Merge pull request #13 from DoodleyJC/frontend

feat: navbar
RetroOlympics · Jul 21, 2024 · 9efcf72 · 9efcf72
2 parents 43193f7 + 9c1f030
commit 9efcf72
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 1 deletion.
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import Navbar from "@/components/navigationbar";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -16,7 +17,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <Navbar />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
@@ -0,0 +1,20 @@
+import { cookies } from "next/headers";
+
+export default function LoginPage() {
+  async function handleSubmit(formData: FormData) {
+    "use server";
+
+    const email = formData.get("email");
+    const password = formData.get("password");
+
+    cookies().set("isLoggedIn", "1", { expires: Date.now() + 1000 * 60 * 60 }); //cookie that expires after 1 hour
+  }
+
+  return (
+    <form action={handleSubmit}>
+      <input type="text" name="email" placeholder="Email" required />
+      <input type="password" name="password" placeholder="Password" required />
+      <button type="submit">Login</button>
+    </form>
+  );
+}
diff --git a/frontend/src/components/navigationbar.tsx b/frontend/src/components/navigationbar.tsx
@@ -0,0 +1,47 @@
+import Link from "next/link";
+
+export default function Navbar() {
+  return (
+    <div className="w-full bg-gray-900">
+      <nav>
+        <ul className="text-2x mx-20 flex h-16 items-center justify-between text-blue-500">
+          <li>
+            <Link className="hover:text-blue-800" href="/">
+              Home
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:text-blue-800" href="/">
+              Teams
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:text-blue-800" href="/">
+              Standings
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:text-blue-800" href="/">
+              Schedules
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:text-blue-800" href="/">
+              Games
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:text-blue-800" href="/">
+              Volunteers
+            </Link>
+          </li>
+          <li>
+            <Link className="hover:text-blue-800" href="/">
+              History
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+}
diff --git a/frontend/src/middleware.ts b/frontend/src/middleware.ts
@@ -0,0 +1,14 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function middleware(request: NextRequest) {
+  const isLoggedIn = request.cookies.get("isLoggedIn");
+
+  if (isLoggedIn && isLoggedIn.value == "0") {
+    return Response.redirect(new URL("/login", request.nextUrl));
+  }
+}
+
+export const config = {
+  matcher: ["/logintest"],
+};