Merge pull request #4 from lGnyte/login-distinctions

[Web-001] Add the distinctions between guests and hosts

src/app/login/page.tsx

@@ -3,29 +3,56 @@
 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';
+
 
 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">
       {Object.keys(user).length ? 
         username ?
           <div>
-            <h1 className="text-3xl font-bold mb-4">Welcome back, {username}!</h1>
+            { usertype == "host" ? <h1 className="text-3xl font-bold mb-4">Welcome landlord, {username}!</h1> :
+                <h1 className="text-3xl font-bold mb-4">Welcome special guest, {username}!</h1> }
             <button onClick={() => auth.signOut()} className="px-2 py-1 bg-gray-300 text-lg mb-2 rounded-md">Sign out</button>
             <br />
             <Link href={"/"} className="text-blue-500 text-lg">
               Go home
             </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, usertype: "guest"});
+    batch.set(usernameDoc, {uid: user.uid});
+
+    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);
     }
@@ -39,18 +38,18 @@ export default function UsernameForm() {
     }
 
     const batch = writeBatch(db);
-    batch.set(userDoc, {username: formValue});
+    batch.set(userDoc, {username: formValue, usertype: "host"});
     batch.set(usernameDoc, {uid: user.uid});
 
     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/components/AuthCheck.tsx

@@ -15,4 +15,4 @@ export default function AuthCheck(props: {children: React.ReactNode}) {
   }, [user]);
 
   return user ? <>{props.children}</> : null;
-}
+}

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: ""});

src/lib/hooks.ts

@@ -7,13 +7,15 @@ import { db } from "./firebase";
 export function useUserData() {
   const [user, setUser] = useState({} as User);
   const [username, setUsername] = useState("");
+  const [usertype, setUsertype] = useState("");
 
   useEffect(() => {
     const auth = getAuth();
     onAuthStateChanged(auth, (authUser) => { //when user sign-in state changes
       if (authUser) {
         setUser(authUser); //set the user => next useEffect triggers for the rest of the data
       } else { //no user -> reset everything
+        setUsertype("");
         setUsername("");
         setUser({} as User);
       }
@@ -26,15 +28,17 @@ export function useUserData() {
       if(user){
         unsubscribe = onSnapshot(doc(db, 'users', user.uid), doc => {
           setUsername(doc.data()?.username);
+          setUsertype(doc.data()?.usertype);
         }, err => {
           console.error(`Encountered error: ${err}`);
         });
       } else { //no record
         setUsername("");
+        setUsertype("");
       }
     }
     return unsubscribe;
   }, [user]);
 
-  return { user, username };
-}
+  return { user, username, usertype };
+}