Merge branch 'main' into feature/user-service/admin-edit-user

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

@@ -12,10 +12,10 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import UnauthorisedAccess from "@/components/common/unauthorised-access";
 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[]> => {
@@ -42,14 +42,13 @@ const fetcher = async (url: string): Promise<User[]> => {
 
 export default function AdminUserManagement() {
   const auth = useAuth();
-  const { data, error, isLoading, mutate } = useSWR(
+
+  const { data, isLoading, mutate } = useSWR(
     "http://localhost:3001/users",
     fetcher
   );
 
   const [users, setUsers] = useState<User[]>([]);
-  const [unauthorised, setUnauthorised] = useState<boolean>(false);
-  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(true);
   const [showModal, setShowModal] = useState<boolean>(false);
   const [selectedUser, setSelectedUser] = useState<User>();
 
@@ -59,24 +58,10 @@ export default function AdminUserManagement() {
     }
   }, [data]);
 
-  useEffect(() => {
-    if (error && error.message === "No authentication token found") {
-      setUnauthorised(true);
-      setIsLoggedIn(false);
-    }
-    if (error && error.message === "401") {
-      setUnauthorised(true);
-    }
-  }, [error]);
-
   if (isLoading) {
     return <LoadingScreen />;
   }
 
-  if (unauthorised) {
-    return <UnauthorisedAccess isLoggedIn={isLoggedIn} />;
-  }
-
   const handleDelete = async (userId: string) => {
     const token = auth?.token;
     if (!token) {
@@ -103,53 +88,55 @@ export default function AdminUserManagement() {
   };
 
   return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-2xl font-bold mb-4">User Management</h1>
-      <AdminEditUserModal
-        showModal={showModal}
-        setShowModal={setShowModal}
-        user={selectedUser}
-        onUserUpdate={onUserUpdate}
-      />
-      <Table>
-        <TableHeader>
-          <TableRow>
-            <TableHead>Username</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Role</TableHead>
-            <TableHead>Skill Level</TableHead>
-            <TableHead>Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {users.map((user) => (
-            <TableRow key={user.id}>
-              <TableCell>{user.username}</TableCell>
-              <TableCell>{user.email}</TableCell>
-              <TableCell>{user.isAdmin ? "Admin" : "User"}</TableCell>
-              <TableCell>{user.skillLevel}</TableCell>
-              <TableCell>
-                <Button
-                  variant="outline"
-                  className="mr-2"
-                  onClick={() => {
-                    setSelectedUser(user);
-                    setShowModal(true);
-                  }}
-                >
-                  <PencilIcon />
-                </Button>
-                <Button
-                  variant="destructive"
-                  onClick={() => handleDelete(user.id)}
-                >
-                  <Trash2Icon />
-                </Button>
-              </TableCell>
+    <AuthPageWrapper requireAdmin>
+      <div className="container mx-auto p-4">
+        <h1 className="text-2xl font-bold mb-4">User Management</h1>
+        <AdminEditUserModal
+          showModal={showModal}
+          setShowModal={setShowModal}
+          user={selectedUser}
+          onUserUpdate={onUserUpdate}
+        />
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Username</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead>Role</TableHead>
+              <TableHead>Skill Level</TableHead>
+              <TableHead>Actions</TableHead>
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
+          </TableHeader>
+          <TableBody>
+            {users.map((user) => (
+              <TableRow key={user.id}>
+                <TableCell>{user.username}</TableCell>
+                <TableCell>{user.email}</TableCell>
+                <TableCell>{user.isAdmin ? "Admin" : "User"}</TableCell>
+                <TableCell>{user.skillLevel}</TableCell>
+                <TableCell>
+                  <Button
+                    variant="outline"
+                    className="mr-2"
+                    onClick={() => {
+                      setSelectedUser(user);
+                      setShowModal(true);
+                    }}
+                  >
+                    <PencilIcon />
+                  </Button>
+                  <Button
+                    variant="destructive"
+                    onClick={() => handleDelete(user.id)}
+                  >
+                    <Trash2Icon />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    </AuthPageWrapper>
   );
 }

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

@@ -0,0 +1,68 @@
+"use client";
+
+import React from "react";
+import { ReactNode } from "react";
+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;
+
+interface AuthPageWrapperProps extends React.HTMLProps<HTMLDivElement> {
+  children: ReactNode;
+
+  // User access rules
+  authCheck?: AuthCheck; // Custom predicate which is true when user is to be granted access
+  requireAdmin?: boolean;
+  requireLoggedIn?: boolean;
+}
+
+const AuthPageWrapper: React.FC<AuthPageWrapperProps> = ({
+  children,
+  ...props
+}) => {
+  const auth = useAuth();
+  const router = useRouter();
+
+  const authCheck = (
+    user: { isAdmin: boolean } | undefined | null
+  ): boolean => {
+    if (props?.requireLoggedIn && !user) {
+      return false;
+    }
+    if (props?.requireAdmin && !user?.isAdmin) {
+      return false;
+    }
+    if (props?.authCheck) {
+      return props.authCheck(user);
+    }
+    // Allow access if no user access rule is defined
+    return true;
+  };
+
+  return (
+    <div>
+      {authCheck(auth?.user) ? (
+        children
+      ) : (
+        <div className="flex items-start justify-center h-2/6">
+          <div className="text-center mt-[20vh]">
+            <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl mb-6">
+              Uh Oh! You&apos;re not supposed to be here!
+            </h1>
+            <Button
+              size="lg"
+              onClick={() => {
+                auth?.user ? router.push("/") : router.push("/auth/login");
+              }}
+            >
+              Return Home
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AuthPageWrapper;

frontend/components/auth/login-form.tsx

@@ -35,10 +35,18 @@ export function LoginForm() {
       } else if (user) {
         router.push("/app/questions");
       } else {
-        toast({ title: "Error", variant: "destructive", description: "Login Failed." });
+        toast({
+          title: "Error",
+          variant: "destructive",
+          description: "Login Failed.",
+        });
       }
     } catch (err) {
-      toast({ title: "Error", variant: "destructive", description: "Login Failed." });
+      toast({
+        title: "Error",
+        variant: "destructive",
+        description: "Login Failed.",
+      });
     }
   };