Merge pull request #151 from CS3219-AY2425S1/enhancement/frontend/refactor-auth-wrapper

Enhancement/frontend/refactor auth wrapper

Author: SelwynAng

frontend/app/app/admin-user-management/page.tsx

@@ -1,5 +1,10 @@
 import AdminUserManagement from "@/components/admin-user-management/admin-user-management";
+import AuthPageWrapper from "@/components/auth/auth-page-wrapper";
 
 export default function AdminUserManagementPage() {
-  return <AdminUserManagement />;
+  return (
+    <AuthPageWrapper requireAdmin>
+      <AdminUserManagement />
+    </AuthPageWrapper>
+  );
 }

frontend/app/app/questions/page.tsx

@@ -1,10 +1,13 @@
+import AuthPageWrapper from "@/components/auth/auth-page-wrapper";
 import QuestionListing from "@/components/questions/questions-listing";
 import { Suspense } from "react";
 
 export default function QuestionListingPage() {
   return (
-    <Suspense>
-      <QuestionListing />
-    </Suspense>
+    <AuthPageWrapper requireLoggedIn>
+      <Suspense>
+        <QuestionListing />
+      </Suspense>
+    </AuthPageWrapper>
   );
 }

frontend/app/app/user-settings/[user_id]/page.tsx

@@ -1,9 +1,14 @@
+import AuthPageWrapper from "@/components/auth/auth-page-wrapper";
 import UserSettings from "@/components/user-settings/user-settings";
 
 export default function UserSettingsPage({
   params,
 }: {
   params: { user_id: string };
 }) {
-  return <UserSettings userId={params.user_id} />;
+  return (
+    <AuthPageWrapper requireLoggedIn userId={params.user_id}>
+      <UserSettings userId={params.user_id} />;
+    </AuthPageWrapper>
+  );
 }

frontend/app/layout.tsx

@@ -4,6 +4,7 @@ import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toaster } from "@/components/ui/toaster";
 import AuthProvider from "@/app/auth/auth-context";
+import AuthPageWrapper from "@/components/auth/auth-page-wrapper";
 import { Navbar } from "@/components/navbar";
 
 const geistSans = localFont({
@@ -40,7 +41,7 @@ export default function RootLayout({
         >
           <AuthProvider>
             <Navbar />
-            {children}
+            <AuthPageWrapper>{children}</AuthPageWrapper>
           </AuthProvider>
           <Toaster />
         </ThemeProvider>

frontend/components/admin-user-management/admin-user-management.tsx

@@ -15,7 +15,6 @@ import {
 import LoadingScreen from "@/components/common/loading-screen";
 import AdminEditUserModal from "@/components/admin-user-management/admin-edit-user-modal";
 import { PencilIcon, Trash2Icon } from "lucide-react";
-import AuthPageWrapper from "@/components/auth/auth-page-wrapper";
 import { User, UserArraySchema } from "@/lib/schemas/user-schema";
 
 const fetcher = async (url: string): Promise<User[]> => {
@@ -88,7 +87,7 @@ export default function AdminUserManagement() {
   };
 
   return (
-    <AuthPageWrapper requireAdmin>
+    <>
       <div className="container mx-auto p-4">
         <h1 className="text-2xl font-bold mb-4">User Management</h1>
         <AdminEditUserModal
@@ -137,6 +136,6 @@ export default function AdminUserManagement() {
           </TableBody>
         </Table>
       </div>
-    </AuthPageWrapper>
+    </>
   );
 }

frontend/components/auth/auth-page-wrapper.tsx

@@ -6,10 +6,13 @@ import { useAuth } from "@/app/auth/auth-context";
 import { Button } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 
-type AuthCheck = (user: { isAdmin: boolean } | undefined | null) => boolean;
+type AuthCheck = (
+  user: { id: string; isAdmin: boolean } | undefined | null
+) => boolean;
 
 interface AuthPageWrapperProps extends React.HTMLProps<HTMLDivElement> {
   children: ReactNode;
+  userId?: string;
 
   // User access rules
   authCheck?: AuthCheck; // Custom predicate which is true when user is to be granted access
@@ -19,20 +22,24 @@ interface AuthPageWrapperProps extends React.HTMLProps<HTMLDivElement> {
 
 const AuthPageWrapper: React.FC<AuthPageWrapperProps> = ({
   children,
+  userId,
   ...props
 }) => {
   const auth = useAuth();
   const router = useRouter();
 
   const authCheck = (
-    user: { isAdmin: boolean } | undefined | null
+    user: { id: string; isAdmin: boolean } | undefined | null
   ): boolean => {
     if (props?.requireLoggedIn && !user) {
       return false;
     }
     if (props?.requireAdmin && !user?.isAdmin) {
       return false;
     }
+    if (userId && user?.id !== userId) {
+      return false;
+    }
     if (props?.authCheck) {
       return props.authCheck(user);
     }
@@ -53,7 +60,9 @@ const AuthPageWrapper: React.FC<AuthPageWrapperProps> = ({
             <Button
               size="lg"
               onClick={() => {
-                auth?.user ? router.push("/") : router.push("/auth/login");
+                auth?.user
+                  ? router.push("/app/questions")
+                  : router.push("/auth/login");
               }}
             >
               Return Home

frontend/components/navbar.tsx

@@ -22,6 +22,10 @@ export function Navbar() {
 
   const isActive = (path: string) => pathname === path;
 
+  if (!auth?.user) {
+    return;
+  }
+
   return (
     <nav className="bg-background border-b">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

frontend/components/user-settings/user-settings.tsx

@@ -23,7 +23,6 @@ import ProfileTab from "@/components/user-settings/profile-tab";
 import LoadingScreen from "@/components/common/loading-screen";
 import { useAuth } from "@/app/auth/auth-context";
 import { cn } from "@/lib/utils";
-import AuthPageWrapper from "../auth/auth-page-wrapper";
 import { User, UserSchema } from "@/lib/schemas/user-schema";
 
 const fetcher = async (url: string): Promise<User> => {
@@ -309,7 +308,7 @@ export default function UserSettings({ userId }: { userId: string }) {
   }
 
   return (
-    <AuthPageWrapper requireLoggedIn>
+    <>
       {error ? (
         <div>Error: Failed to load user data</div>
       ) : !user ? (
@@ -496,6 +495,6 @@ export default function UserSettings({ userId }: { userId: string }) {
           </Tabs>
         </div>
       )}
-    </AuthPageWrapper>
+    </>
   );
 }