Updated login page, added ProtectedRoute object for wrapping in layouts, added ProtectedRoute authorization verification to Admin route root

app/Admin/layout.tsx

@@ -1,11 +1,13 @@
 import React from "react";
 
-export default function AdminLayout({children}: {children: React.ReactNode}) {
+import ProtectedRoute from "@/components/wrappers/ProtectedRoute";
+
+export default async function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   // TODO: Put user state management here
   //redirect("wherever state says") <= stateRouteManager()
-  return (
-    <div>
-      {children}
-    </div>
-  )
-  }
+  return <ProtectedRoute>{children}</ProtectedRoute>;
+}

app/Admin/page.tsx

@@ -1,6 +1,5 @@
-import { redirect } from "next/navigation";
+import UnderConstruction from "@/components/static_pages/UnderConstruction";
 
 export default function Admin() {
-  // TODO: Replace with Layout State Manager
-  redirect("/Admin/Login");
+  return <UnderConstruction />;
 }

app/Authentication/Login/page.tsx

@@ -2,12 +2,16 @@
 import { useState } from "react";
 
 import { login, signup } from "@/lib/server_functions/userAuth";
+import Form from "@/components/ui/Form";
 export default function Login() {
   const [createAccount, setCreateAccount] = useState(false);
 
   return (
-    <div>
-      <form action={createAccount ? login : signup}>
+    <div className="flex h-full w-full justify-center py-10">
+      <Form
+        action={createAccount ? login : signup}
+        submitText={createAccount ? "Login" : "Signup"}
+      >
         <input type="text" name="username" placeholder="Username" required />
         <input
           type="password"
@@ -15,11 +19,12 @@ export default function Login() {
           placeholder="Password"
           required
         />
-        <button type="submit">{createAccount ? "Login" : "Signup"}</button>
-      </form>
-      <button onClick={() => setCreateAccount(!createAccount)}>
-        {createAccount ? "Don't have an account?" : "Already have an account?"}
-      </button>
+        <button onClick={() => setCreateAccount(!createAccount)}>
+          {createAccount
+            ? "Don't have an account?"
+            : "Already have an account?"}
+        </button>
+      </Form>
     </div>
   );
 }

components/ui/Form.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import RoundedContainer from "./RoundedContainer";
+
+export default function Form({
+  action,
+  children,
+  submitText,
+}: {
+  // eslint-disable-next-line no-unused-vars
+  action?: string | ((formData: FormData) => void | Promise<void>);
+  children: React.ReactNode;
+  submitText: string;
+}) {
+  return (
+    <div>
+      <form action={action}>
+        <RoundedContainer slim={false}>
+          {children}
+          <button type="submit">{submitText}</button>
+        </RoundedContainer>
+      </form>
+    </div>
+  );
+}

components/wrappers/ProtectedRoute.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { redirect } from "next/navigation";
+
+import { verifySession } from "@/lib/server_functions/dataAccessLayer";
+
+export default async function ProtectedRoute({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await verifySession();
+  if (!session.isAuthed) {
+    redirect("/Authentication/Login");
+  }
+
+  return <div>{children}</div>;
+}