middleware setup complete

Author: ft4bhi

public/images/FingerprintImg.png

@@ -0,0 +1,130 @@
+// 
+"use client";
+import { useState } from "react";
+import { signInWithGoogle } from "@/lib/firebase/auth";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function AuthPage() {
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [agreed, setAgreed] = useState(false);
+  const router = useRouter();
+
+  const handleLoginWithGoogle = async () => {
+    if (!agreed) {
+      setError("Please agree to the terms and services.");
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await signInWithGoogle();
+      if (result?.isAdmin) {
+        router.push("/admin");
+      } else {
+        router.push("/");
+      }
+    } catch (err) {
+      console.error("Failed to log in with Google:", err);
+      setError(err instanceof Error ? err.message : "Failed to log in with Google");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-black px-6 py-8 relative">
+      {/* Back Arrow Button */}
+      <Link 
+        href="/" 
+        className="absolute top-6 left-6 p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+        aria-label="Go back"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="w-6 h-6"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <line x1="19" y1="12" x2="5" y2="12"></line>
+          <polyline points="12 19 5 12 12 5"></polyline>
+        </svg>
+      </Link>
+
+      <div className="w-full max-w-md text-center space-y-6">
+        {/* Title */}
+        <h1 className="text-2xl md:text-3xl font-semibold text-black dark:text-white">
+          Create your account
+        </h1>
+
+        {/* Illustration */}
+        <div className="flex justify-center">
+          <Image
+            src={"/images/FingerprintImg.png"}
+            alt="Fingerprint illustration"
+            width={240}
+            height={240}
+            className="rounded-xl w-[180px] h-[180px] md:w-[220px] md:h-[220px]"
+            priority
+          />
+        </div>
+
+        {/* Google Login Button */}
+        <button
+          onClick={handleLoginWithGoogle}
+          disabled={loading}
+          aria-label="Continue with Google"
+          type="button"
+          className="flex items-center justify-center w-full py-3 px-6 rounded-full shadow-md 
+                     bg-white border border-gray-300 hover:bg-gray-100 
+                     transition-all disabled:opacity-60 disabled:cursor-not-allowed"
+        >
+          {loading ? (
+            <span className="text-base font-medium text-gray-600">Logging in...</span>
+          ) : (
+            <>
+              <Image
+                src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg"
+                alt="Google logo"
+                width={24}
+                height={24}
+                className="w-5 h-5 md:w-6 md:h-6"
+              />
+              <span className="ml-3 text-base font-medium text-gray-700">
+                Continue with Google
+              </span>
+            </>
+          )}
+        </button>
+
+        {/* Terms and Services */}
+        <div className="flex items-center justify-center space-x-3 text-sm md:text-base">
+          <input
+            type="checkbox"
+            id="terms"
+            checked={agreed}
+            onChange={() => setAgreed(!agreed)}
+            className="form-checkbox text-blue-600 w-4 h-4 md:w-5 md:h-5"
+          />
+          <label htmlFor="terms" className="text-gray-600 dark:text-gray-400">
+            I agree to my <span className="font-semibold underline">terms and services</span>
+          </label>
+        </div>
+
+        {/* Error Message */}
+        {error && (
+          <p className="text-red-500 text-sm md:text-base">
+            {error}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/login/newUser/page.tsx src/app/auth/newUser/page.tsxsrc/app/login/newUser/page.tsx renamed to src/app/auth/newUser/page.tsx

@@ -1,12 +1,33 @@
 "use client";
-import TopNavBar from '../topNavbar';
+import { useEffect, useState } from "react";
+import TopNavBar from "../topNavbar";
 import { QuickActions } from "./QuickActions";
 import { TimeTableBlock } from "./TimeTable";
+import { onAuthStateChanged } from "@/lib/firebase/auth"; // Update with correct path
+import { User } from "firebase/auth";
 
 const ResponsiveDashboard = () => {
+ const [userName, setUserName] = useState<string>("");
+const [userPhotoURL, setUserPhotoURL] = useState<string | null>(null);
+
+useEffect(() => {
+  const unsubscribe = onAuthStateChanged((authUser: User | null) => {
+    if (authUser) {
+      setUserName(authUser.displayName || "Student");
+      setUserPhotoURL(authUser.photoURL || null);
+    } else {
+      setUserName("Guest");
+      setUserPhotoURL(null);
+    }
+  });
+
+  return () => unsubscribe();
+}, []);
+
+
   return (
     <div className="min-h-screen">
-      <TopNavBar userName="John Doe" semester={4} department="CSE" />
+      <TopNavBar userName={userName} userPhotoURL={userPhotoURL}  />
       <div className="mx-auto max-w-[var(--max-screen-size)] pt-4">
         <main className="px-3 pb-24">
           <div className="md:flex lg:h-[calc(100vh-12rem)] md:gap-6 lg:gap-8">

src/app/auth/page.tsx

@@ -2,6 +2,7 @@
 
 import { User } from "iconsax-react";
 import React from "react";
+import { useRouter } from "next/navigation";
 
 function isValidSemester(semester: number) {
   return semester >= 1 && semester <= 8 && Number.isInteger(semester);
@@ -11,11 +12,16 @@ const Header: React.FC<{
   userName?: string | null;
   semester?: number | null;
   department?: string | null;
-}> = ({ userName, semester, department }) => {
+  userPhotoURL?: string | null;
+}> = ({ userName, semester, department, userPhotoURL }) => {
+  const router = useRouter();
   const displaySemester =
     semester !== undefined && semester !== null && isValidSemester(semester)
       ? `S${semester}, `
       : "";
+     const handleUsrProfileClick = () => {
+    router.push("/login");
+  };
 
   return (
     <div className="flex items-center justify-between px-4 py-7 bg-gradient-to-b from-transparent to-20% to-[var(--main)] shadow-[0_8px_20px_10px_var(--main)]">
@@ -31,15 +37,24 @@ const Header: React.FC<{
           </p>
         </div>
 
-        {/* User Icon */}
+        {/* User Image or Icon */}
         <button
           type="button"
-          className="flex size-10 items-center justify-center rounded-full bg-gray-600 transition-colors hover:bg-purple-300 dark:bg-purple-800 dark:hover:bg-purple-700"
+          className="flex size-10 items-center justify-center rounded-full overflow-hidden bg-gray-600 transition-colors hover:bg-purple-300 dark:bg-purple-800 dark:hover:bg-purple-700"
           title="User Profile"
-          onClick={() => console.warn("Profile Clicked")} // Changed to warn
           aria-label="Open user profile"
+          onClick={() => handleUsrProfileClick()}
         >
-          <User size="28" color="white" variant="Linear" />
+          {userPhotoURL ? (
+            <img
+              src={userPhotoURL}
+              alt="User Profile"
+              className="object-cover w-full h-full"
+            />
+          ) : (
+            <User size="28" color="white" variant="Linear" />
+          )}
+          
         </button>
       </div>
     </div>

src/app/login/page.tsx

@@ -0,0 +1,43 @@
+// middleware.ts
+import { NextResponse } from 'next/server'
+import type { NextRequest } from 'next/server'
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl
+  const token = request.cookies.get('authToken')?.value
+
+  // Define public routes that don't need authentication
+  const publicRoutes = [ '/auth']
+  
+  // Check if the current path is a public route
+  const isPublicRoute = publicRoutes.includes(pathname) || 
+                       publicRoutes.some(route => pathname.startsWith(route + '/'))
+
+  // If user has no token and trying to access protected route
+  if (!token && !isPublicRoute) {
+    console.log(`Redirecting ${pathname} to /auth - no token`)
+    return NextResponse.redirect(new URL('/auth', request.url))
+  }
+
+  // If user has token and trying to access auth page, redirect to home
+  if (token && pathname === '/auth') {
+    console.log(`Redirecting from /auth to / - user has token`)
+    return NextResponse.redirect(new URL('/', request.url))
+  }
+
+  return NextResponse.next()
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     * - public files (images, etc.)
+     */
+    '/((?!api|_next/static|_next/image|favicon.ico|images|.*\\..*).*)',
+  ],
+}