Add the distinctions between users

src/app/login/page.tsx

@@ -3,12 +3,26 @@
 import { signInWithGoogle } from "@/lib/auth";
 import { UserContext } from "../../lib/context";
 import { auth } from "@/lib/firebase";
-import { useContext } from "react";
+import { useContext, useState } from "react";
 import Link from "next/link";
-import UsernameForm from "./UsernameForm";
+import HostForm from './tabs/HostTab';
+import GuestForm from './tabs/GuestTab';
+import { act } from "react-dom/test-utils";
+
 
 export default function Login() {
-  const { user, username } = useContext(UserContext);
+  const { user, username, usertype  } = useContext(UserContext);
+  const [activeTab, setActiveTab] = useState("guestTab");
+
+  const handleTabGuest = () => {
+    // update the state to tab1
+    setActiveTab("guestTab");
+  };
+
+  const handleTabHost = () => {
+    // update the state to tab1
+    setActiveTab("hostTab");
+  };
 
   return (
     <main className="p-10">
@@ -23,9 +37,22 @@ export default function Login() {
             </Link>
           </div>
           :
-          <div>
-            <h1 className="text-3xl font-bold mb-4">Set up your username</h1>
-            <UsernameForm />
+
+          <div className="flex justify-center content-center">
+            <div>
+            <h1 className="text-3xl font-bold mb-4 ">Set up your account</h1>
+            <ul className="hidden text-sm font-medium text-center text-gray-500 rounded-lg shadow sm:flex dark:divide-gray-700 dark:text-gray-400">
+                <li className="w-full focus-within:z-10" onClick={handleTabGuest}>
+                    <label className={activeTab == "guestTab" ? "inline-block w-full p-4 text-gray-900 bg-gray-100 border-r border-gray-200 dark:border-gray-700 rounded-s-lg focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white" : "inline-block w-full p-4 bg-white border-s-0 border-gray-200 dark:border-gray-700 rounded-s-lg hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"}>Guest</label>
+                </li>
+                <li className="w-full focus-within:z-10" onClick={handleTabHost}>
+                    <label className={activeTab == "hostTab" ? "inline-block w-full p-4 text-gray-900 bg-gray-100 border-r border-gray-200 dark:border-gray-700 rounded-e-lg focus:ring-4 focus:ring-blue-300 active focus:outline-none dark:bg-gray-700 dark:text-white" :"inline-block w-full p-4 bg-white border-s-0 border-gray-200 dark:border-gray-700 rounded-e-lg hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"} >Host</label>
+                </li>
+            </ul>
+              <div>
+              {activeTab == "guestTab" ? <GuestForm /> : <HostForm /> }
+              </div>
+            </div>
           </div>
         :
         <div>

src/app/login/tabs/GuestTab.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { UserContext } from "@/lib/context";
+import { db } from "@/lib/firebase";
+import { doc, getDoc, writeBatch } from "firebase/firestore";
+import { useContext, useState } from "react";
+import toast from "react-hot-toast";
+
+export default function GuestForm() {
+  const [formValue, setFormValue] = useState('');
+  const [isValid, setIsValid] = useState(false);
+
+  const { user, username, usertype } = useContext(UserContext);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value.toLowerCase();
+    const regex = /^[0-0A-Za-z_]+$/;
+    if (val.length < 3) {
+      setIsValid(false);
+    }
+    if (regex.test(val)) {
+      setIsValid(true);
+    }
+    setFormValue(val);
+  }
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const userDoc = doc(db, 'users', user.uid);
+    const usernameDoc = doc(db, 'usernames', formValue);
+
+    // check if username exists
+    const usernameSnapshot = await getDoc(usernameDoc);
+    if (usernameSnapshot.exists()) {
+      toast.error('Username already exists');
+      return;
+    }
+
+    const batch = writeBatch(db);
+    batch.set(userDoc, {username: formValue});
+    batch.set(usernameDoc, {uid: user.uid, usertype: "guest"});
+
+    await batch.commit();
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col">
+      <label htmlFor="username" className="text-center my-5 text-xl">Create Username</label>
+      <br />
+      <input type="text" name="username" id="username" className="px-2 py-1 bg-gray-300 m-5 rounded-md" value={formValue} onChange={handleChange} />
+      <button type="submit" className="bg-gray-300 px-2 py-1 m-5 rounded-md">Submit</button>
+    </form>
+  )
+}

src/app/login/UsernameForm.tsx → src/app/login/tabs/HostTab.tsx

@@ -6,16 +6,15 @@ import { doc, getDoc, writeBatch } from "firebase/firestore";
 import { useContext, useState } from "react";
 import toast from "react-hot-toast";
 
-export default function UsernameForm() {
+export default function HostForm() {
   const [formValue, setFormValue] = useState('');
   const [isValid, setIsValid] = useState(false);
-  const [loading, setLoading] = useState(false);
 
-  const { user, username } = useContext(UserContext);
+  const { user, username, usertype } = useContext(UserContext);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const val = e.target.value.toLowerCase();
-    const regex = /^\w*$/;
+    const regex = /^[0-0A-Za-z_]+$/;
     if (val.length < 3) {
       setIsValid(false);
     }
@@ -40,17 +39,17 @@ export default function UsernameForm() {
 
     const batch = writeBatch(db);
     batch.set(userDoc, {username: formValue});
-    batch.set(usernameDoc, {uid: user.uid});
+    batch.set(usernameDoc, {uid: user.uid, usertype: "host"});
 
     await batch.commit();
   }
 
   return (
-    <form onSubmit={handleSubmit}>
-      <label htmlFor="username">Create Username:</label>
+    <form onSubmit={handleSubmit} className="flex flex-col">
+      <label htmlFor="username" className="text-center text-xl my-5">Create Username</label>
       <br />
-      <input type="text" name="username" id="username" className="px-2 py-1 mr-2 bg-gray-300 rounded-md" value={formValue} onChange={handleChange} />
-      <button type="submit" className="bg-gray-300 px-2 py-1 rounded-md">Submit</button>
+      <input type="text" name="username" id="username" className="px-2 py-1 bg-gray-300 m-5 rounded-md" value={formValue} onChange={handleChange} />
+      <button type="submit" className="bg-gray-300 px-2 py-1 m-5 rounded-md">Submit</button>
     </form>
   )
-}
+}

src/lib/context.ts

@@ -3,4 +3,4 @@
 import { User } from "firebase/auth";
 import { createContext } from "react";
 
-export const UserContext = createContext({user: {} as User, username: ""});
+export const UserContext = createContext({user: {} as User, username: "", usertype: ""});