Create login page

src/app/globals.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&display=swap");
 @import "../styles/variables.css";
 
 :root {

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Manrope } from "next/font/google";
-
+// import { Geist, Geist_Mono } from "next/font/google";
+import { UserProvider } from "@/lib/client/userContext";
 import "./globals.css";
 
 const manrope = Manrope({
@@ -10,8 +11,8 @@ const manrope = Manrope({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "TRCC Dashboard",
+  description: "TRCC volunteer management dashboard",
 };
 
 export default function RootLayout({
@@ -25,7 +26,7 @@ export default function RootLayout({
         className={`${manrope.variable} font-sans`}
         suppressHydrationWarning
       >
-        {children}
+        <UserProvider>{children}</UserProvider>
       </body>
     </html>
   );

src/app/login/page.tsx

@@ -1,125 +1,100 @@
-// temp ugly auth page for testing
 "use client";
 
-import { useState } from "react";
-import { AnimatedButton } from "@/components/ui/AnimatedButton";
-import { AnimatedInput } from "@/components/ui/AnimatedInput";
-import { InteractiveSurface } from "@/components/ui/InteractiveSurface";
-import { Reveal } from "@/components/ui/Reveal";
-import { Stagger } from "@/components/ui/Stagger";
-import { signInWithEmail, signUpWithEmail } from "@/lib/client/supabase/auth";
+import { JSX, useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { signInWithEmail } from "@/lib/client/supabase/auth";
+import styles from "@/styles/login.module.css";
 
-export default function LoginPage(): React.JSX.Element {
-  const [signInEmail, setSignInEmail] = useState("");
-  const [signInPassword, setSignInPassword] = useState("");
-  const [signUpEmail, setSignUpEmail] = useState("");
-  const [signUpPassword, setSignUpPassword] = useState("");
-  const [message, setMessage] = useState<string | null>(null);
-  const [responseData, setResponseData] = useState<unknown>(null);
+export default function LoginPage(): JSX.Element {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const router = useRouter();
 
-  const handleSignIn = async (
+  const handleSubmit = async (
     event: React.FormEvent<HTMLFormElement>
   ): Promise<void> => {
     event.preventDefault();
+    setError(null);
     setLoading(true);
-    setMessage(null);
-    setResponseData(null);
-    const { data, error } = await signInWithEmail(signInEmail, signInPassword);
-    setMessage(error ? error.message : "Signed in successfully.");
-    setResponseData(data);
-    setLoading(false);
-  };
 
-  const handleSignUp = async (
-    event: React.FormEvent<HTMLFormElement>
-  ): Promise<void> => {
-    event.preventDefault();
-    setLoading(true);
-    setMessage(null);
-    setResponseData(null);
-    const { data, error } = await signUpWithEmail(signUpEmail, signUpPassword);
-    setMessage(
-      error ? error.message : "Check your email to confirm your account."
-    );
-    setResponseData(data);
-    setLoading(false);
+    try {
+      const { error: authError } = await signInWithEmail(email, password);
+
+      if (authError) {
+        setError(authError.message);
+        return;
+      }
+
+      router.push("/volunteers");
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
-    <main>
-      <Reveal as="h1" variant="blur" distance={12}>
-        Sign In
-      </Reveal>
-      <InteractiveSurface as="div">
-        <Stagger as="form" onSubmit={handleSignIn} delayMs={40} stepMs={44}>
-          <label htmlFor="signin-email">Email</label>
-          <AnimatedInput
-            id="signin-email"
-            type="email"
-            value={signInEmail}
-            onChange={(event) => setSignInEmail(event.target.value)}
-            required
-          />
-
-          <label htmlFor="signin-password">Password</label>
-          <AnimatedInput
-            id="signin-password"
-            type="password"
-            value={signInPassword}
-            onChange={(event) => setSignInPassword(event.target.value)}
-            required
-          />
+    <main className={styles["container"]}>
+      <div className={styles["content"]}>
+        <h1 className={styles["title"]}>Log in</h1>
 
-          <AnimatedButton type="submit" disabled={loading}>
-            Sign In
-          </AnimatedButton>
-        </Stagger>
-      </InteractiveSurface>
+        <form onSubmit={handleSubmit} className={styles["formCard"]}>
+          <div className={styles["inputGroup"]}>
+            <label htmlFor="login-email" className={styles["label"]}>
+              Email
+            </label>
+            <input
+              id="login-email"
+              name="email"
+              type="email"
+              required
+              autoComplete="email"
+              placeholder="Enter your email"
+              className={styles["input"]}
+              value={email}
+              onChange={(event) => setEmail(event.target.value)}
+            />
+          </div>
 
-      <Reveal as="h1" delayMs={80} variant="blur" distance={12}>
-        Sign Up
-      </Reveal>
-      <InteractiveSurface as="div">
-        <Stagger as="form" onSubmit={handleSignUp} delayMs={120} stepMs={44}>
-          <label htmlFor="signup-email">Email</label>
-          <AnimatedInput
-            id="signup-email"
-            type="email"
-            value={signUpEmail}
-            onChange={(event) => setSignUpEmail(event.target.value)}
-            required
-          />
+          <div className={styles["inputGroup"]}>
+            <label htmlFor="login-password" className={styles["label"]}>
+              Password
+            </label>
+            <input
+              id="login-password"
+              name="password"
+              type="password"
+              required
+              autoComplete="current-password"
+              placeholder="Enter your password"
+              className={styles["input"]}
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+            />
+          </div>
 
-          <label htmlFor="signup-password">Password</label>
-          <AnimatedInput
-            id="signup-password"
-            type="password"
-            value={signUpPassword}
-            onChange={(event) => setSignUpPassword(event.target.value)}
-            required
-          />
+          <div className={styles["forgotPasswordContainer"]}>
+            <Link href="/forgot-password" className={styles["forgotPassword"]}>
+              Forgot password?
+            </Link>
+          </div>
 
-          <AnimatedButton type="submit" disabled={loading}>
-            Sign Up
-          </AnimatedButton>
-        </Stagger>
-      </InteractiveSurface>
+          <button
+            type="submit"
+            disabled={loading}
+            className={styles["submitButton"]}
+          >
+            {loading ? "Logging in…" : "Log in"}
+          </button>
+        </form>
 
-      {message ? (
-        <InteractiveSurface as="div">
-          <Reveal as="p" delayMs={160} variant="scale" distance={10}>
-            {message}
-          </Reveal>
-        </InteractiveSurface>
-      ) : null}
-      {responseData ? (
-        <InteractiveSurface as="div">
-          <Reveal as="pre" delayMs={200} variant="scale" distance={10}>
-            {JSON.stringify(responseData, null, 2)}
-          </Reveal>
-        </InteractiveSurface>
-      ) : null}
+        {error ? (
+          <p role="alert" className={styles["error"]}>
+            {error}
+          </p>
+        ) : null}
+      </div>
     </main>
   );
 }

src/lib/client/userContext.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type JSX,
+  type ReactNode,
+} from "react";
+import type { AuthChangeEvent, Session, User } from "@supabase/supabase-js";
+import { createClient } from "@/lib/client/supabase/client";
+
+interface UserContextValue {
+  user: User | null;
+  loading: boolean;
+}
+
+const UserContext = createContext<UserContextValue>({
+  user: null,
+  loading: true,
+});
+
+export function UserProvider({
+  children,
+}: Readonly<{ children: ReactNode }>): JSX.Element {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const supabase = createClient();
+
+    // Fetch the initial session
+    supabase.auth
+      .getUser()
+      .then(({ data }: { data: { user: User | null } }) => {
+        setUser(data.user);
+      })
+      .catch((error: unknown) => {
+        console.error("Error fetching user:", error);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+
+    // Subscribe to auth state changes
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange(
+      (_event: AuthChangeEvent, session: Session | null) => {
+        setUser(session?.user ?? null);
+      }
+    );
+
+    return (): void => {
+      subscription.unsubscribe();
+    };
+  }, []);
+
+  return <UserContext value={{ user, loading }}>{children}</UserContext>;
+}
+
+export function useUser(): UserContextValue {
+  return useContext(UserContext);
+}