prepared for login

client/package-lock.json

@@ -21,6 +21,7 @@
         "@nextui-org/modal": "^2.2.7",
         "@nextui-org/radio": "^2.3.8",
         "@nextui-org/select": "^2.4.9",
+        "@nextui-org/spinner": "^2.2.6",
         "@nextui-org/switch": "^2.2.8",
         "@nextui-org/system": "^2.4.6",
         "@nextui-org/table": "^2.2.8",

client/package.json

@@ -22,6 +22,7 @@
     "@nextui-org/modal": "^2.2.7",
     "@nextui-org/radio": "^2.3.8",
     "@nextui-org/select": "^2.4.9",
+    "@nextui-org/spinner": "^2.2.6",
     "@nextui-org/switch": "^2.2.8",
     "@nextui-org/system": "^2.4.6",
     "@nextui-org/table": "^2.2.8",

client/src/app/Header.tsx

@@ -0,0 +1,11 @@
+import { Link } from "@nextui-org/link";
+
+export default function Header() {
+	return (
+		<div className="flex justify-center">
+			<Link href="/" className="text-center text-8xl">
+				<h1 className="font-display-headline">Volunteer Scheduler</h1>
+			</Link>
+		</div>
+	);
+}

client/src/app/Main.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { apiCall } from "@/lib";
+import { Spinner } from "@nextui-org/spinner";
+import { usePathname, useRouter } from "next/navigation";
+import React, { useEffect, useState } from "react";
+
+enum AuthState {
+	Loading,
+	LoginScreen,
+	Unauthorized,
+	LoggedIn,
+}
+
+export default function Main({ children }: { children: React.ReactNode }) {
+	const [status, setStatus] = useState(AuthState.Loading);
+
+	const router = useRouter();
+	const pathname = usePathname();
+
+	useEffect(() => {
+		void (async () => {
+			if (pathname === "/login") {
+				setStatus(AuthState.LoginScreen);
+			} else {
+				const welcomeResult = await apiCall<{
+					userName: string;
+					loggedIn: boolean;
+				}>("GET", "welcome");
+
+				if (!welcomeResult.ok) {
+					router.push("/login");
+				} else {
+					const response = await welcomeResult.json();
+
+					if (response.loggedIn) {
+						setStatus(AuthState.LoggedIn);
+					} else {
+						setStatus(AuthState.Unauthorized);
+					}
+				}
+			}
+		})();
+	});
+
+	switch (status) {
+		case AuthState.Loading:
+			return <Spinner label="Loading..." />;
+		case AuthState.LoggedIn:
+		case AuthState.LoginScreen:
+			return children;
+		case AuthState.Unauthorized:
+			return "";
+	}
+}

client/src/app/layout.tsx

@@ -3,6 +3,8 @@ import "./globals.css";
 import { NextUIProvider } from "@nextui-org/system";
 import React from "react";
 import Footer from "./Footer";
+import Header from "./Header";
+import Main from "./Main";
 
 export const metadata: Metadata = {
 	title: "Create Next App",
@@ -31,11 +33,11 @@ export default function RootLayout({
 				<NextUIProvider>
 					<div className="flex min-h-screen flex-col p-4">
 						<header>
-							<h1 className="text-center font-display-headline text-8xl">
-								Volunteer Scheduler
-							</h1>
+							<Header />
 						</header>
-						<main className="flex min-h-full flex-1 flex-col">{children}</main>
+						<main className="flex min-h-full flex-1 flex-col">
+							<Main>{children}</Main>
+						</main>
 						<footer className="flex h-4 justify-center gap-4">
 							<Footer sites={footerSites} />
 						</footer>

client/src/app/login/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { ViewFilled, ViewOffFilled } from "@carbon/icons-react";
+import { Button } from "@nextui-org/button";
+import { Form } from "@nextui-org/form";
+import { Input } from "@nextui-org/input";
+import { Switch } from "@nextui-org/switch";
+import { useState } from "react";
+
+export default function Login() {
+	const [visibility, setVisibility] = useState(false);
+
+	return (
+		<div>
+			<h2 className="mb-4 text-center text-4xl">Login</h2>
+			<Form
+				validationBehavior="native"
+				className="flex flex-col items-center gap-2"
+				onSubmit={(e) => e.preventDefault()}
+			>
+				<Input
+					isRequired
+					type="user"
+					label="Name"
+					name="username"
+					variant="bordered"
+					className="max-w-xs"
+				/>
+				<Input
+					isRequired
+					label="Password"
+					name="password"
+					autoComplete="current-password"
+					endContent={
+						<Switch
+							className="my-auto"
+							startContent={<ViewFilled />}
+							endContent={<ViewOffFilled />}
+							onValueChange={setVisibility}
+							isSelected={visibility}
+						/>
+					}
+					type={visibility ? "text" : "password"}
+					variant="bordered"
+					className="max-w-xs"
+				/>
+				<Button className="w-full max-w-xs" color="primary" type="submit">
+					Login
+				</Button>
+			</Form>
+		</div>
+	);
+}

client/src/app/page.tsx

@@ -1,54 +1,6 @@
-"use client";
-
-import { Input } from "@nextui-org/input";
-import { useState } from "react";
-import { ViewFilled, ViewOffFilled } from "@carbon/icons-react";
-import { Switch } from "@nextui-org/switch";
-import { Button } from "@nextui-org/button";
-import { Form } from "@nextui-org/form";
+import OverviewPersonal from "./me/page";
 
 export default function Home() {
-	const [visibility, setVisibility] = useState(false);
-
 	// return <EventVolunteer />;
-	return (
-		<div>
-			<h2 className="mb-4 text-center text-4xl">Login</h2>
-			<Form
-				validationBehavior="native"
-				className="flex flex-col items-center gap-2"
-				onSubmit={(e) => e.preventDefault()}
-			>
-				<Input
-					isRequired
-					type="user"
-					label="Name"
-					name="username"
-					variant="bordered"
-					className="max-w-xs"
-				/>
-				<Input
-					isRequired
-					label="Password"
-					name="password"
-					autoComplete="current-password"
-					endContent={
-						<Switch
-							className="my-auto"
-							startContent={<ViewFilled />}
-							endContent={<ViewOffFilled />}
-							onValueChange={setVisibility}
-							isSelected={visibility}
-						/>
-					}
-					type={visibility ? "text" : "password"}
-					variant="bordered"
-					className="max-w-xs"
-				/>
-				<Button className="w-full max-w-xs" color="primary" type="submit">
-					Login
-				</Button>
-			</Form>
-		</div>
-	);
+	return <OverviewPersonal />;
 }