From f7e84fba49938b66bf05d9017e9d9488c9261042 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 21 May 2025 12:06:24 +0800
Subject: [PATCH 01/11] Add auth redirect for employee sign up

---
 components/employee/signup/SignupForm.tsx | 26 ++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/components/employee/signup/SignupForm.tsx b/components/employee/signup/SignupForm.tsx
index c2fd411..a074aa4 100644
--- a/components/employee/signup/SignupForm.tsx
+++ b/components/employee/signup/SignupForm.tsx
@@ -1,12 +1,29 @@
+"use client";
+
 import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 export default function EmployeeSignUpForm() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [termsAccepted, setTermsAccepted] = useState(false);
+  const handleSignUp = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Will add api logic here
+    console.log("Email:", email);
+    console.log("Password:", password);
+    console.log("Terms Accepted:", termsAccepted);
+    router.push("/dashboard");
+  };
+
   return (
     <>
       <h1 className="text-2xl font-bold text-center mb-6">
         Create Your Account
       </h1>
-      <form className="space-y-4">
+      <form className="space-y-4" onSubmit={handleSignUp}>
         <div>
           <label
             htmlFor="email"
@@ -18,6 +35,7 @@ export default function EmployeeSignUpForm() {
             type="email"
             id="email"
             className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            onChange={(e) => setEmail(e.target.value)}
             required
           />
         </div>
@@ -33,6 +51,7 @@ export default function EmployeeSignUpForm() {
             type="password"
             id="password"
             className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            onChange={(e) => setPassword(e.target.value)}
             required
           />
         </div>
@@ -42,6 +61,11 @@ export default function EmployeeSignUpForm() {
             type="checkbox"
             id="label"
             className="mr-2 h-4 w-4 accent-purple-600"
+            onClick={(e) =>
+              setTermsAccepted((e.target as HTMLInputElement).checked)
+            }
+            onChange={(e) => setTermsAccepted(e.target.checked)}
+            required
           />
           <label htmlFor="label" className="text-sm text-gray-700">
             I agree to the{" "}

From 370e13185d177f7b9ecc8913c821d89b5218b6e8 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Wed, 21 May 2025 12:09:25 +0800
Subject: [PATCH 02/11] Add auth redirect for employee log in

---
 components/employee/login/LoginForm.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/components/employee/login/LoginForm.tsx b/components/employee/login/LoginForm.tsx
index 7723afa..a37c014 100644
--- a/components/employee/login/LoginForm.tsx
+++ b/components/employee/login/LoginForm.tsx
@@ -1,10 +1,24 @@
+"use client";
+
 import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 export default function EmployeeLoginForm() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Will add api logic here
+    console.log("Email:", email);
+    console.log("Password:", password);
+    router.push("/dashboard");
+  };
   return (
     <>
       <h1 className="text-2xl font-bold text-center mb-6">Welcome Back</h1>
-      <form className="space-y-4">
+      <form className="space-y-4" onSubmit={handleLogin}>
         <div>
           <label
             htmlFor="email"
@@ -16,6 +30,7 @@ export default function EmployeeLoginForm() {
             type="email"
             id="email"
             className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            onChange={(e) => setEmail(e.target.value)}
             required
           />
         </div>
@@ -31,6 +46,7 @@ export default function EmployeeLoginForm() {
             type="password"
             id="password"
             className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            onChange={(e) => setPassword(e.target.value)}
             required
           />
         </div>

From 4009ee85963d24a910535257a0d7b3053103c7a9 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 22 May 2025 11:07:06 +0800
Subject: [PATCH 03/11] Add redirect in organisation signup:

---
 app/[organisationName]/dashboard/page.tsx     | 19 ++++++++++++++++
 components/organization/signup/SignupForm.tsx | 22 ++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 app/[organisationName]/dashboard/page.tsx

diff --git a/app/[organisationName]/dashboard/page.tsx b/app/[organisationName]/dashboard/page.tsx
new file mode 100644
index 0000000..bc0c51a
--- /dev/null
+++ b/app/[organisationName]/dashboard/page.tsx
@@ -0,0 +1,19 @@
+export default function Dashboard() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-center mb-6">Dashboard</h1>
+      <div className="flex justify-center">
+        <div className="bg-gray-200 p-4 rounded-lg shadow-md w-full max-w-md">
+          <p className="text-gray-700">
+            Welcome to your organisation dashboard!
+          </p>
+        </div>
+      </div>
+      <div className="flex justify-center mt-4">
+        <div className="bg-gray-200 p-4 rounded-lg shadow-md w-full max-w-md">
+          <p className="text-gray-700">Here you can manage your account.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/organization/signup/SignupForm.tsx b/components/organization/signup/SignupForm.tsx
index 4a9bf13..989cf05 100644
--- a/components/organization/signup/SignupForm.tsx
+++ b/components/organization/signup/SignupForm.tsx
@@ -1,10 +1,27 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+
 export default function OrganizationSignUpForm() {
+  const router = useRouter();
+  const [organisationName, setOrganisationName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const handleSignUp = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Will add api logic here
+    console.log("Organisation Name:", organisationName);
+    console.log("Email:", email);
+    console.log("Password:", password);
+    router.push(`/${organisationName}/dashboard`);
+  };
   return (
     <>
       <h1 className="text-2xl font-bold text-center mb-6">
         Register Organization
       </h1>
-      <form className="space-y-4">
+      <form className="space-y-4" onSubmit={handleSignUp}>
         <div>
           <label
             htmlFor="orgName"
@@ -16,6 +33,7 @@ export default function OrganizationSignUpForm() {
             type="text"
             id="orgName"
             className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            onChange={(e) => setOrganisationName(e.target.value)}
             required
           />
         </div>
@@ -31,6 +49,7 @@ export default function OrganizationSignUpForm() {
             type="email"
             id="email"
             className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            onChange={(e) => setEmail(e.target.value)}
             required
           />
         </div>
@@ -46,6 +65,7 @@ export default function OrganizationSignUpForm() {
             type="password"
             id="password"
             className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            onChange={(e) => setPassword(e.target.value)}
             required
           />
         </div>

From 9969f46b04a4ab93176014261293482d39687f84 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 22 May 2025 11:09:44 +0800
Subject: [PATCH 04/11] Add dashboard redirect for organisation login

---
 components/organization/login/LoginForm.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/components/organization/login/LoginForm.tsx b/components/organization/login/LoginForm.tsx
index b9cb278..04d25b8 100644
--- a/components/organization/login/LoginForm.tsx
+++ b/components/organization/login/LoginForm.tsx
@@ -1,12 +1,27 @@
+"use client";
+
 import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
 
 export default function OrganizationLoginForm() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const handleLogin = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Will add api logic here
+    console.log("Email:", email);
+    console.log("Password:", password);
+    const organisationName = "exampleOrg"; // This should be replaced with actual logic to get the organisation name
+    router.push(`/${organisationName}/dashboard`);
+  };
   return (
     <>
       <h1 className="text-2xl font-bold text-center mb-6">
         Organization Login
       </h1>
-      <form className="space-y-4">
+      <form className="space-y-4" onSubmit={handleLogin}>
         <div>
           <label
             htmlFor="email"
@@ -18,6 +33,7 @@ export default function OrganizationLoginForm() {
             type="email"
             id="email"
             className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            onChange={(e) => setEmail(e.target.value)}
             required
           />
         </div>
@@ -33,6 +49,7 @@ export default function OrganizationLoginForm() {
             type="password"
             id="password"
             className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            onChange={(e) => setPassword(e.target.value)}
             required
           />
         </div>

From 9f9532264ac0b78f8409bf1ac9f1cfb4d78c9717 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 22 May 2025 11:13:39 +0800
Subject: [PATCH 05/11] Add auth header to change if logged in

---
 components/AuthHeader.tsx | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/components/AuthHeader.tsx b/components/AuthHeader.tsx
index 01f3d7f..7fce395 100644
--- a/components/AuthHeader.tsx
+++ b/components/AuthHeader.tsx
@@ -2,16 +2,27 @@ import Image from "next/image";
 import Link from "next/link";
 
 export default function AuthHeader() {
-  return (
-    <header className="bg-purple-100 p-4 shadow-sm">
-      <div className="container mx-auto flex items-center">
-        <Link href="/" className="flex items-center">
-          <Image src="/logo.svg" alt="SkillStack Logo" width={28} height={28} />
-          <span className="ml-2 text-purple-800 font-semibold text-lg">
-            SKILLSTACK
-          </span>
-        </Link>
-      </div>
-    </header>
-  );
+  const authenticated = false; // Replace with actual authentication logic
+
+  if (!authenticated) {
+    return (
+      <header className="bg-purple-100 p-4 shadow-sm">
+        <div className="container mx-auto flex items-center">
+          <Link href="/" className="flex items-center">
+            <Image
+              src="/logo.svg"
+              alt="SkillStack Logo"
+              width={28}
+              height={28}
+            />
+            <span className="ml-2 text-purple-800 font-semibold text-lg">
+              SKILLSTACK
+            </span>
+          </Link>
+        </div>
+      </header>
+    );
+  }
+
+  return null;
 }

From 8656c6dd96b86530e3b01ef5d5b75300b98678d3 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 22 May 2025 12:20:58 +0800
Subject: [PATCH 06/11] add authentication

---
 app/[organisationName]/dashboard/page.tsx | 25 +++++------
 app/api/me/route.ts                       | 17 ++++++++
 app/layout.tsx                            |  9 ++--
 context/AuthContext.tsx                   | 52 +++++++++++++++++++++++
 lib/auth.ts                               | 14 ++++++
 next.config.ts                            |  9 +++-
 package-lock.json                         | 10 +++++
 package.json                              | 13 +++---
 8 files changed, 125 insertions(+), 24 deletions(-)
 create mode 100644 app/api/me/route.ts
 create mode 100644 context/AuthContext.tsx
 create mode 100644 lib/auth.ts

diff --git a/app/[organisationName]/dashboard/page.tsx b/app/[organisationName]/dashboard/page.tsx
index bc0c51a..b379cf1 100644
--- a/app/[organisationName]/dashboard/page.tsx
+++ b/app/[organisationName]/dashboard/page.tsx
@@ -1,19 +1,16 @@
-export default function Dashboard() {
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+
+export default async function DashboardPage() {
+  const user = await getAuthUser();
+  if (!user) {
+    redirect("/auth");
+  }
+
   return (
     <div>
-      <h1 className="text-2xl font-bold text-center mb-6">Dashboard</h1>
-      <div className="flex justify-center">
-        <div className="bg-gray-200 p-4 rounded-lg shadow-md w-full max-w-md">
-          <p className="text-gray-700">
-            Welcome to your organisation dashboard!
-          </p>
-        </div>
-      </div>
-      <div className="flex justify-center mt-4">
-        <div className="bg-gray-200 p-4 rounded-lg shadow-md w-full max-w-md">
-          <p className="text-gray-700">Here you can manage your account.</p>
-        </div>
-      </div>
+      <h1>Welcome, {user.firstname || user.email}</h1>
+      <p>Organisation: {user.organisationName}</p>
     </div>
   );
 }
diff --git a/app/api/me/route.ts b/app/api/me/route.ts
new file mode 100644
index 0000000..83b6282
--- /dev/null
+++ b/app/api/me/route.ts
@@ -0,0 +1,17 @@
+import { NextResponse } from "next/server";
+import { cookies } from "next/headers";
+
+export async function GET() {
+  const cookieStore = await cookies();
+  const auth = cookieStore.get("auth");
+  if (!auth) {
+    return NextResponse.json({ isLoggedIn: false });
+  }
+
+  try {
+    const user = JSON.parse(auth.value);
+    return NextResponse.json(user);
+  } catch {
+    return NextResponse.json({ isLoggedIn: false });
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index 6fdffc6..868de58 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import AuthHeader from "@/components/AuthHeader";
 import Footer from "@/components/Footer";
+import { AuthProvider } from "@/context/AuthContext";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,9 +20,11 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={`${inter.className} bg-white`}>
-        <AuthHeader />
-        <main className="container mx-auto p-4">{children}</main>
-        <Footer />
+        <AuthProvider>
+          <AuthHeader />
+          <main className="container mx-auto p-4">{children}</main>
+          <Footer />
+        </AuthProvider>
       </body>
     </html>
   );
diff --git a/context/AuthContext.tsx b/context/AuthContext.tsx
new file mode 100644
index 0000000..2bd7dc3
--- /dev/null
+++ b/context/AuthContext.tsx
@@ -0,0 +1,52 @@
+// context/AuthContext.tsx
+"use client";
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  ReactNode,
+} from "react";
+
+interface User {
+  isLoggedIn: boolean;
+  email?: string;
+  organisationName?: string;
+  firstname?: string;
+  lastname?: string;
+}
+interface AuthCtx {
+  user: User;
+  setUser: (u: User) => void;
+  logout: () => Promise<void>;
+}
+
+const AuthContext = createContext<AuthCtx | undefined>(undefined);
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User>({ isLoggedIn: false });
+
+  useEffect(() => {
+    fetch("/api/me", { credentials: "include" })
+      .then((r) => r.json())
+      .then(setUser)
+      .catch(() => {});
+  }, []);
+
+  async function logout() {
+    await fetch("/api/logout", { method: "POST", credentials: "include" });
+    setUser({ isLoggedIn: false });
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, setUser, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error("useAuth must be inside AuthProvider");
+  return ctx;
+}
diff --git a/lib/auth.ts b/lib/auth.ts
new file mode 100644
index 0000000..d71c69c
--- /dev/null
+++ b/lib/auth.ts
@@ -0,0 +1,14 @@
+// lib/auth.ts
+import { cookies } from "next/headers";
+
+export async function getAuthUser() {
+  const cookieStore = await cookies();
+  const auth = cookieStore.get("auth");
+  if (!auth) return null;
+  try {
+    const user = JSON.parse(auth.value);
+    return user.isLoggedIn ? user : null;
+  } catch {
+    return null;
+  }
+}
diff --git a/next.config.ts b/next.config.ts
index e9ffa30..50e09c1 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,7 +1,14 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  async rewrites() {
+    return [
+      {
+        source: "/api/:path*",
+        destination: "http://localhost:4000/api/:path*",
+      },
+    ];
+  },
 };
 
 export default nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 821bc11..473fec8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "skillstack",
       "version": "0.1.0",
       "dependencies": {
+        "cookie": "^1.0.2",
         "next": "15.3.2",
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
@@ -2284,6 +2285,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
diff --git a/package.json b/package.json
index debd18a..0447103 100644
--- a/package.json
+++ b/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "cookie": "^1.0.2",
+    "next": "15.3.2",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.3.2"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.3.2",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }

From f0f7f3ee114ecb87567a4b9e900930b0dbd19c9e Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 22 May 2025 13:20:39 +0800
Subject: [PATCH 07/11] remove organisation and employee logins

---
 app/[organisationName]/dashboard/page.tsx     | 16 ----
 components/employee/login/LoginForm.tsx       | 72 ---------------
 components/employee/signup/SignupForm.tsx     | 90 -------------------
 components/organization/login/LoginForm.tsx   | 75 ----------------
 components/organization/signup/SignupForm.tsx | 82 -----------------
 5 files changed, 335 deletions(-)
 delete mode 100644 app/[organisationName]/dashboard/page.tsx
 delete mode 100644 components/employee/login/LoginForm.tsx
 delete mode 100644 components/employee/signup/SignupForm.tsx
 delete mode 100644 components/organization/login/LoginForm.tsx
 delete mode 100644 components/organization/signup/SignupForm.tsx

diff --git a/app/[organisationName]/dashboard/page.tsx b/app/[organisationName]/dashboard/page.tsx
deleted file mode 100644
index b379cf1..0000000
--- a/app/[organisationName]/dashboard/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { redirect } from "next/navigation";
-import { getAuthUser } from "@/lib/auth";
-
-export default async function DashboardPage() {
-  const user = await getAuthUser();
-  if (!user) {
-    redirect("/auth");
-  }
-
-  return (
-    <div>
-      <h1>Welcome, {user.firstname || user.email}</h1>
-      <p>Organisation: {user.organisationName}</p>
-    </div>
-  );
-}
diff --git a/components/employee/login/LoginForm.tsx b/components/employee/login/LoginForm.tsx
deleted file mode 100644
index a37c014..0000000
--- a/components/employee/login/LoginForm.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-
-export default function EmployeeLoginForm() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const handleLogin = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Will add api logic here
-    console.log("Email:", email);
-    console.log("Password:", password);
-    router.push("/dashboard");
-  };
-  return (
-    <>
-      <h1 className="text-2xl font-bold text-center mb-6">Welcome Back</h1>
-      <form className="space-y-4" onSubmit={handleLogin}>
-        <div>
-          <label
-            htmlFor="email"
-            className="block text-sm font-medium mb-1 text-gray-700"
-          >
-            Email
-          </label>
-          <input
-            type="email"
-            id="email"
-            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
-            onChange={(e) => setEmail(e.target.value)}
-            required
-          />
-        </div>
-
-        <div>
-          <label
-            htmlFor="password"
-            className="block text-sm font-medium mb-1 text-gray-700"
-          >
-            Password
-          </label>
-          <input
-            type="password"
-            id="password"
-            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
-            onChange={(e) => setPassword(e.target.value)}
-            required
-          />
-        </div>
-
-        <button
-          type="submit"
-          className="w-full bg-purple-600 text-white py-2 rounded-md hover:bg-purple-700 transition-colors font-medium"
-        >
-          Sign In
-        </button>
-
-        <div className="text-center mt-2">
-          <Link
-            href="/forgot-password"
-            className="text-sm text-purple-600 hover:underline"
-          >
-            Forgot password?
-          </Link>
-        </div>
-      </form>
-    </>
-  );
-}
diff --git a/components/employee/signup/SignupForm.tsx b/components/employee/signup/SignupForm.tsx
deleted file mode 100644
index a074aa4..0000000
--- a/components/employee/signup/SignupForm.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-
-export default function EmployeeSignUpForm() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [termsAccepted, setTermsAccepted] = useState(false);
-  const handleSignUp = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Will add api logic here
-    console.log("Email:", email);
-    console.log("Password:", password);
-    console.log("Terms Accepted:", termsAccepted);
-    router.push("/dashboard");
-  };
-
-  return (
-    <>
-      <h1 className="text-2xl font-bold text-center mb-6">
-        Create Your Account
-      </h1>
-      <form className="space-y-4" onSubmit={handleSignUp}>
-        <div>
-          <label
-            htmlFor="email"
-            className="block text-sm font-medium mb-1 text-gray-700"
-          >
-            Email
-          </label>
-          <input
-            type="email"
-            id="email"
-            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
-            onChange={(e) => setEmail(e.target.value)}
-            required
-          />
-        </div>
-
-        <div>
-          <label
-            htmlFor="password"
-            className="block text-sm font-medium mb-1 text-gray-700"
-          >
-            Password
-          </label>
-          <input
-            type="password"
-            id="password"
-            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
-            onChange={(e) => setPassword(e.target.value)}
-            required
-          />
-        </div>
-
-        <div className="flex items-center">
-          <input
-            type="checkbox"
-            id="label"
-            className="mr-2 h-4 w-4 accent-purple-600"
-            onClick={(e) =>
-              setTermsAccepted((e.target as HTMLInputElement).checked)
-            }
-            onChange={(e) => setTermsAccepted(e.target.checked)}
-            required
-          />
-          <label htmlFor="label" className="text-sm text-gray-700">
-            I agree to the{" "}
-            <Link href="/terms" className="text-purple-600 hover:underline">
-              Terms of Service
-            </Link>
-            <span className="text-xs text-gray-500 block mt-1">
-              You'll receive updates about your account
-            </span>
-          </label>
-        </div>
-
-        <button
-          type="submit"
-          className="w-full bg-purple-600 text-white py-2 rounded-md hover:bg-purple-700 transition-colors font-medium mt-2"
-        >
-          Register
-        </button>
-      </form>
-    </>
-  );
-}
diff --git a/components/organization/login/LoginForm.tsx b/components/organization/login/LoginForm.tsx
deleted file mode 100644
index 04d25b8..0000000
--- a/components/organization/login/LoginForm.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-
-export default function OrganizationLoginForm() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const handleLogin = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Will add api logic here
-    console.log("Email:", email);
-    console.log("Password:", password);
-    const organisationName = "exampleOrg"; // This should be replaced with actual logic to get the organisation name
-    router.push(`/${organisationName}/dashboard`);
-  };
-  return (
-    <>
-      <h1 className="text-2xl font-bold text-center mb-6">
-        Organization Login
-      </h1>
-      <form className="space-y-4" onSubmit={handleLogin}>
-        <div>
-          <label
-            htmlFor="email"
-            className="block text-sm font-medium mb-1 text-gray-700"
-          >
-            Admin Email
-          </label>
-          <input
-            type="email"
-            id="email"
-            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
-            onChange={(e) => setEmail(e.target.value)}
-            required
-          />
-        </div>
-
-        <div>
-          <label
-            htmlFor="password"
-            className="block text-sm font-medium mb-1 text-gray-700"
-          >
-            Password
-          </label>
-          <input
-            type="password"
-            id="password"
-            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
-            onChange={(e) => setPassword(e.target.value)}
-            required
-          />
-        </div>
-
-        <button
-          type="submit"
-          className="w-full bg-purple-600 text-white py-2 rounded-md hover:bg-purple-700 transition-colors font-medium"
-        >
-          Sign In
-        </button>
-
-        <div className="text-center mt-2">
-          <Link
-            href="/organization/forgot-password"
-            className="text-sm text-purple-600 hover:underline"
-          >
-            Forgot password?
-          </Link>
-        </div>
-      </form>
-    </>
-  );
-}
diff --git a/components/organization/signup/SignupForm.tsx b/components/organization/signup/SignupForm.tsx
deleted file mode 100644
index 989cf05..0000000
--- a/components/organization/signup/SignupForm.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-
-export default function OrganizationSignUpForm() {
-  const router = useRouter();
-  const [organisationName, setOrganisationName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const handleSignUp = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Will add api logic here
-    console.log("Organisation Name:", organisationName);
-    console.log("Email:", email);
-    console.log("Password:", password);
-    router.push(`/${organisationName}/dashboard`);
-  };
-  return (
-    <>
-      <h1 className="text-2xl font-bold text-center mb-6">
-        Register Organization
-      </h1>
-      <form className="space-y-4" onSubmit={handleSignUp}>
-        <div>
-          <label
-            htmlFor="orgName"
-            className="block text-sm font-medium mb-1 text-gray-700"
-          >
-            Organization Name
-          </label>
-          <input
-            type="text"
-            id="orgName"
-            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
-            onChange={(e) => setOrganisationName(e.target.value)}
-            required
-          />
-        </div>
-
-        <div>
-          <label
-            htmlFor="email"
-            className="block text-sm font-medium mb-1 text-gray-700"
-          >
-            Admin Email
-          </label>
-          <input
-            type="email"
-            id="email"
-            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
-            onChange={(e) => setEmail(e.target.value)}
-            required
-          />
-        </div>
-
-        <div>
-          <label
-            htmlFor="password"
-            className="block text-sm font-medium mb-1 text-gray-700"
-          >
-            Password
-          </label>
-          <input
-            type="password"
-            id="password"
-            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
-            onChange={(e) => setPassword(e.target.value)}
-            required
-          />
-        </div>
-
-        <button
-          type="submit"
-          className="w-full bg-purple-600 text-white py-2 rounded-md hover:bg-purple-700 transition-colors font-medium mt-2"
-        >
-          Register Organization
-        </button>
-      </form>
-    </>
-  );
-}

From e4f40c9af5b3aa510ab8d3572d107382f3b9a242 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 22 May 2025 13:20:53 +0800
Subject: [PATCH 08/11] update auth context

---
 context/AuthContext.tsx | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/context/AuthContext.tsx b/context/AuthContext.tsx
index 2bd7dc3..ff9a443 100644
--- a/context/AuthContext.tsx
+++ b/context/AuthContext.tsx
@@ -1,5 +1,6 @@
 // context/AuthContext.tsx
 "use client";
+
 import {
   createContext,
   useContext,
@@ -8,13 +9,24 @@ import {
   ReactNode,
 } from "react";
 
-interface User {
+type OrgRole = "admin" | "member";
+
+export interface OrganisationMembership {
+  id: number;
+  organisationName: string;
+  role: OrgRole;
+}
+
+export interface User {
   isLoggedIn: boolean;
+  userId?: number;
   email?: string;
-  organisationName?: string;
   firstname?: string;
   lastname?: string;
+  // now includes all the orgs this user belongs to, with their role
+  organisations?: OrganisationMembership[];
 }
+
 interface AuthCtx {
   user: User;
   setUser: (u: User) => void;
@@ -27,9 +39,22 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const [user, setUser] = useState<User>({ isLoggedIn: false });
 
   useEffect(() => {
+    // 1) Fetch the “whoami”
     fetch("/api/me", { credentials: "include" })
       .then((r) => r.json())
-      .then(setUser)
+      .then((u: User) => {
+        if (u.isLoggedIn) {
+          // 2) If logged in, also fetch their org memberships
+          fetch("/api/orgs/my", { credentials: "include" })
+            .then((r) => r.json())
+            .then((orgs: OrganisationMembership[]) =>
+              setUser({ ...u, organisations: orgs })
+            )
+            .catch(() => setUser(u));
+        } else {
+          setUser(u);
+        }
+      })
       .catch(() => {});
   }, []);
 

From 3ac28b9b112201bbf0ea6630e489ef397d30abd9 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 22 May 2025 13:21:07 +0800
Subject: [PATCH 09/11] use authcontext

---
 app/auth/AuthClient.tsx | 39 +++++++++++++++++++++++++++++++++++++++
 app/dashboard/page.tsx  | 25 +++++++++++++------------
 app/page.tsx            |  9 +++++++--
 3 files changed, 59 insertions(+), 14 deletions(-)
 create mode 100644 app/auth/AuthClient.tsx

diff --git a/app/auth/AuthClient.tsx b/app/auth/AuthClient.tsx
new file mode 100644
index 0000000..51b9735
--- /dev/null
+++ b/app/auth/AuthClient.tsx
@@ -0,0 +1,39 @@
+"use client";
+import { useState } from "react";
+import LoginForm from "@/components/auth/login/LoginForm";
+import SignUpForm from "@/components/auth/signup/SignupForm";
+
+export default function AuthClient() {
+  const [activeTab, setActiveTab] = useState<"signup" | "login">("signup");
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-8 bg-white">
+      <div className="w-full max-w-md shadow-lg rounded-lg p-8 border border-gray-100">
+        <div className="flex mb-8 justify-center border-b">
+          <button
+            className={`px-6 py-3 ${
+              activeTab === "signup"
+                ? "border-b-2 border-purple-600 text-purple-800"
+                : "text-gray-500 hover:text-gray-700"
+            }`}
+            onClick={() => setActiveTab("signup")}
+          >
+            Sign Up
+          </button>
+          <button
+            className={`px-6 py-3 ${
+              activeTab === "login"
+                ? "border-b-2 border-purple-600 text-purple-800"
+                : "text-gray-500 hover:text-gray-700"
+            }`}
+            onClick={() => setActiveTab("login")}
+          >
+            Login
+          </button>
+        </div>
+
+        {activeTab === "signup" ? <SignUpForm /> : <LoginForm />}
+      </div>
+    </div>
+  );
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 9828d7b..45a306c 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,17 +1,18 @@
-export default function Dashboard() {
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import LogoutButton from "@/components/auth/logout/LogoutButton";
+
+export default async function DashboardPage() {
+  const user = await getAuthUser();
+  if (!user) {
+    redirect("/auth");
+  }
+
   return (
     <div>
-      <h1 className="text-2xl font-bold text-center mb-6">Dashboard</h1>
-      <div className="flex justify-center">
-        <div className="bg-gray-200 p-4 rounded-lg shadow-md w-full max-w-md">
-          <p className="text-gray-700">Welcome to your dashboard!</p>
-        </div>
-      </div>
-      <div className="flex justify-center mt-4">
-        <div className="bg-gray-200 p-4 rounded-lg shadow-md w-full max-w-md">
-          <p className="text-gray-700">Here you can manage your account.</p>
-        </div>
-      </div>
+      <h1>Welcome, {user.firstname || user.email}</h1>
+      <p>Organisation: {user.organisationName}</p>
+      <LogoutButton />
     </div>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 941f14e..068fa2b 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,7 +1,12 @@
-import Image from "next/image";
 import Link from "next/link";
+import { getAuthUser } from "@/lib/auth";
+import { redirect } from "next/navigation";
 
-export default function Home() {
+export default async function Home() {
+  const user = await getAuthUser();
+  if (user) {
+    redirect("/dashboard");
+  }
   return (
     <div className="min-h-screen flex flex-col">
       <div className="flex-1 flex flex-col items-center justify-center p-8 bg-white">

From 63dcfafebca1d8b43ed47b90d8679dd3fbfab29b Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 22 May 2025 13:21:18 +0800
Subject: [PATCH 10/11] add authentication

---
 app/auth/page.tsx                     | 101 ++-------------
 components/auth/login/LoginForm.tsx   | 101 +++++++++++++++
 components/auth/signup/SignupForm.tsx | 169 ++++++++++++++++++++++++++
 3 files changed, 281 insertions(+), 90 deletions(-)
 create mode 100644 components/auth/login/LoginForm.tsx
 create mode 100644 components/auth/signup/SignupForm.tsx

diff --git a/app/auth/page.tsx b/app/auth/page.tsx
index 6a13db1..3d7e6c7 100644
--- a/app/auth/page.tsx
+++ b/app/auth/page.tsx
@@ -1,91 +1,12 @@
-"use client";
-
-import { useState } from "react";
-import EmployeeSignUpForm from "@/components/employee/signup/SignupForm";
-import EmployeeLoginForm from "@/components/employee/login/LoginForm";
-import OrganizationSignUpForm from "@/components/organization/signup/SignupForm";
-import OrganizationLoginForm from "@/components/organization/login/LoginForm";
-
-export default function Auth() {
-  const [activeTab, setActiveTab] = useState("signup");
-  const [accountType, setAccountType] = useState("employee");
-
-  return (
-    <div className="min-h-screen flex flex-col bg-white">
-      <div className="flex-1 flex flex-col items-center justify-center p-8">
-        <div className="w-full max-w-md shadow-lg rounded-lg p-8 border border-gray-100">
-          {/* Account Type Tabs */}
-          <div className="flex mb-8 justify-center border-b">
-            <button
-              className={`px-6 py-3 transition-colors ${
-                accountType === "employee"
-                  ? "border-b-2 border-purple-600 text-purple-800 font-medium"
-                  : "text-gray-500 hover:text-gray-700"
-              }`}
-              onClick={() => setAccountType("employee")}
-            >
-              Employee
-            </button>
-            <button
-              className={`px-6 py-3 transition-colors ${
-                accountType === "organization"
-                  ? "border-b-2 border-purple-600 text-purple-800 font-medium"
-                  : "text-gray-500 hover:text-gray-700"
-              }`}
-              onClick={() => setAccountType("organization")}
-            >
-              Organization
-            </button>
-          </div>
-
-          {/* Login/Signup Toggle */}
-          <div className="flex mb-8 justify-center bg-gray-100 rounded-full p-1">
-            <button
-              className={`px-6 py-2 rounded-full transition-all ${
-                activeTab === "signup"
-                  ? "bg-white text-purple-800 font-medium shadow-sm"
-                  : "text-gray-600 hover:text-gray-800"
-              }`}
-              onClick={() => setActiveTab("signup")}
-            >
-              Sign Up
-            </button>
-            <button
-              className={`px-6 py-2 rounded-full transition-all ${
-                activeTab === "login"
-                  ? "bg-white text-purple-800 font-medium shadow-sm"
-                  : "text-gray-600 hover:text-gray-800"
-              }`}
-              onClick={() => setActiveTab("login")}
-            >
-              Log In
-            </button>
-          </div>
-
-          {/* Forms */}
-          <div className="mt-6">
-            {/* Employee Sign Up Form */}
-            {activeTab === "signup" && accountType === "employee" && (
-              <EmployeeSignUpForm />
-            )}
-
-            {/* Employee Login Form */}
-            {activeTab === "login" && accountType === "employee" && (
-              <EmployeeLoginForm />
-            )}
-
-            {/* Organization Sign Up Form */}
-            {activeTab === "signup" && accountType === "organization" && (
-              <OrganizationSignUpForm />
-            )}
-
-            {/* Organization Login Form */}
-            {activeTab === "login" && accountType === "organization" && (
-              <OrganizationLoginForm />
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+// app/auth/page.tsx
+import { redirect } from "next/navigation";
+import { getAuthUser } from "@/lib/auth";
+import AuthClient from "./AuthClient";
+
+export default async function AuthPage() {
+  const user = await getAuthUser();
+  if (user) {
+    redirect(`/dashboard`);
+  }
+  return <AuthClient />;
 }
diff --git a/components/auth/login/LoginForm.tsx b/components/auth/login/LoginForm.tsx
new file mode 100644
index 0000000..6cf56a4
--- /dev/null
+++ b/components/auth/login/LoginForm.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export default function LoginForm() {
+  const router = useRouter();
+  const { setUser } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/login", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.message || "Login failed");
+      }
+      const user = await fetch("/api/me", { credentials: "include" }).then(
+        (r) => r.json()
+      );
+      setUser(user);
+      router.push("/dashboard");
+    } catch (err: any) {
+      setError(err.message);
+      setLoading(false);
+    }
+  };
+  return (
+    <>
+      <h1 className="text-2xl font-bold text-center mb-6">Login</h1>
+      {error && (
+        <div className="text-red-600 text-sm mb-4 text-center">{error}</div>
+      )}
+      <form className="space-y-4" onSubmit={onSubmit}>
+        <div>
+          <label
+            htmlFor="email"
+            className="block text-sm font-medium mb-1 text-gray-700"
+          >
+            Email
+          </label>
+          <input
+            type="email"
+            id="email"
+            value={email}
+            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            onChange={(e) => setEmail(e.target.value)}
+            required
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="password"
+            className="block text-sm font-medium mb-1 text-gray-700"
+          >
+            Password
+          </label>
+          <input
+            type="password"
+            id="password"
+            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </div>
+
+        <button
+          type="submit"
+          className="w-full bg-purple-600 text-white py-2 rounded-md hover:bg-purple-700 transition-colors font-medium disabled:opacity-50"
+          disabled={loading}
+        >
+          {loading ? "Signing in…" : "Sign In"}
+        </button>
+
+        <div className="text-center mt-2">
+          <Link
+            href="/organization/forgot-password"
+            className="text-sm text-purple-600 hover:underline"
+          >
+            Forgot password?
+          </Link>
+        </div>
+      </form>
+    </>
+  );
+}
diff --git a/components/auth/signup/SignupForm.tsx b/components/auth/signup/SignupForm.tsx
new file mode 100644
index 0000000..0617b77
--- /dev/null
+++ b/components/auth/signup/SignupForm.tsx
@@ -0,0 +1,169 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export default function SignupForm() {
+  const router = useRouter();
+  const { setUser } = useAuth();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [firstname, setFirstname] = useState("");
+  const [lastname, setLastname] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+    setLoading(true);
+    try {
+      const res = await fetch("/api/signup", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password, firstname, lastname }),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error(body.message || "Signup failed");
+      }
+      const user = await fetch("/api/me", { credentials: "include" }).then(
+        (r) => r.json()
+      );
+      setUser(user);
+      router.push("/dashboard");
+    } catch (err: any) {
+      setError(err.message);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <h1 className="text-2xl font-bold text-center mb-6">Register</h1>
+
+      {error && (
+        <div className="text-red-600 text-sm mb-4 text-center">{error}</div>
+      )}
+
+      <form className="space-y-4" onSubmit={onSubmit}>
+        <div>
+          <label
+            htmlFor="firstname"
+            className="block text-sm font-medium mb-1 text-gray-700"
+          >
+            First Name
+          </label>
+          <input
+            id="firstname"
+            type="text"
+            value={firstname}
+            onChange={(e) => setFirstname(e.target.value)}
+            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            required
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="lastname"
+            className="block text-sm font-medium mb-1 text-gray-700"
+          >
+            Last Name
+          </label>
+          <input
+            id="lastname"
+            type="text"
+            value={lastname}
+            onChange={(e) => setLastname(e.target.value)}
+            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            required
+          />
+        </div>
+        <div>
+          <label
+            htmlFor="email"
+            className="block text-sm font-medium mb-1 text-gray-700"
+          >
+            Email
+          </label>
+          <input
+            id="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            required
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="password"
+            className="block text-sm font-medium mb-1 text-gray-700"
+          >
+            Password
+          </label>
+          <input
+            id="password"
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full border border-gray-300 rounded-md p-2 focus:ring-2 focus:ring-purple-300 focus:border-purple-500 outline-none transition-all"
+            required
+          />
+        </div>
+
+        <div>
+          <label
+            htmlFor="confirmPassword"
+            className="block text-sm font-medium mb-1 text-gray-700"
+          >
+            Confirm Password
+          </label>
+          <input
+            id="confirmPassword"
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            className="w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-purple-300"
+            required
+          />
+        </div>
+
+        <div className="text-sm text-gray-500">
+          <input
+            type="checkbox"
+            id="terms"
+            className="mr-2 leading-tight"
+            required
+          />
+          By signing up, you agree to our{" "}
+          <a href="/terms" className="text-purple-600 hover:underline">
+            Terms of Service
+          </a>{" "}
+          and{" "}
+          <a href="/privacy" className="text-purple-600 hover:underline">
+            Privacy Policy
+          </a>
+          .
+        </div>
+
+        <button
+          type="submit"
+          disabled={loading}
+          className="w-full bg-purple-600 text-white py-2 rounded-md hover:bg-purple-700 transition-colors font-medium disabled:opacity-50"
+        >
+          {loading ? "Registering…" : "Register"}
+        </button>
+      </form>
+    </>
+  );
+}

From f756893f0e3873d391ce302fc69a955341b52d87 Mon Sep 17 00:00:00 2001
From: lavanyagarg112 <lavanyagarg@u.nus.edu>
Date: Thu, 22 May 2025 13:21:24 +0800
Subject: [PATCH 11/11] add logout button

---
 components/auth/logout/LogoutButton.tsx | 32 +++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 components/auth/logout/LogoutButton.tsx

diff --git a/components/auth/logout/LogoutButton.tsx b/components/auth/logout/LogoutButton.tsx
new file mode 100644
index 0000000..9a5e7a1
--- /dev/null
+++ b/components/auth/logout/LogoutButton.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/context/AuthContext";
+
+export default function LogoutButton() {
+  const { logout } = useAuth();
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+
+  const handleLogout = async () => {
+    setLoading(true);
+    try {
+      await logout();
+      router.push("/auth");
+    } catch (err) {
+      console.error("Logout failed", err);
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleLogout}
+      disabled={loading}
+      className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:opacity-50 transition-colors"
+    >
+      {loading ? "Logging out…" : "Logout"}
+    </button>
+  );
+}