Feature/frontend/auth

frontend/src/App.css

@@ -40,6 +40,22 @@
   }
 }
 
+.d-flex {
+  display: flex;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   a:nth-of-type(2) .logo {
     animation: logo-spin infinite 20s linear;

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import Dashboard from './pages/Dashboard/Dashboard';
 import ReviewPaper from './pages/ReviewPaper/ReviewPaper';
 import UserManagement from './pages/UserManagement/UserManagement';
 import ProjectManagement from './pages/ProjectManagement/ProjectManagement';
+import ProtectedRoute from './components/routes/protectedRoute';
 
 function App() {
   const { user } = useUserStore();
@@ -20,9 +21,9 @@ function App() {
           <NavBar />
           <Routes>
             <Route path="/" element={<Dashboard />} />
-            <Route path="/user-management" element={<UserManagement />} />
-            <Route path="/project-management" element={<ProjectManagement />} />
-            <Route path="/reviewpage/:id" element={<ReviewPaper />} />
+            <Route path="/user-management" element={<ProtectedRoute allowedRoles={['admin']} requireAuth={true}>{<UserManagement />}</ProtectedRoute>} />
+            <Route path="/project-management" element={<ProtectedRoute allowedRoles={['admin']} requireAuth={true}><ProjectManagement /></ProtectedRoute>} />
+            <Route path="/reviewpage/:id" element={<ProtectedRoute allowedRoles={['admin']} requireAuth={true}><ReviewPaper /></ProtectedRoute>} />
             <Route path="*" element={<h1>404 - Not Found</h1>} />
           </Routes>
         </>

frontend/src/components/ItemManagement.tsx

@@ -19,16 +19,17 @@ const sampleItems: Item[] = [
 
 type ItemManagementProps = {
   pageName: string;
+  onAdd: () => void;
 };
 
-const ItemManagement: React.FC<ItemManagementProps> = ({ pageName }) => {
+const ItemManagement: React.FC<ItemManagementProps> = ({ pageName, onAdd }) => {
   const items = sampleItems;
 
   return (
     <div style={styles.page}>
       <div style={styles.headerRow}>
         <h2 style={styles.title}>{pageName} Management</h2>
-        <button style={styles.addButton} aria-label="Add Item">
+        <button style={styles.addButton} aria-label="Add Item" onClick={onAdd}>
           + Add {pageName}
         </button>
       </div>

frontend/src/components/Modal.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect } from "react";
+
+type ModalProps = {
+  title: string;
+  children: React.ReactNode;
+  onClose: () => void;
+};
+
+const Modal: React.FC<ModalProps> = ({ title, children, onClose }) => {
+
+  useEffect(() => {
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, []);
+
+  return (
+    <div style={styles.overlay} onClick={onClose}>
+      <div style={styles.modal} onClick={(e) => e.stopPropagation()}>
+        <div style={styles.header}>
+          <h3 style={{ margin: 0 }}>{title}</h3>
+          <button style={styles.closeBtn} onClick={onClose}>✕</button>
+        </div>
+
+        <div style={styles.content}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
+
+const styles: { [key: string]: React.CSSProperties } = {
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    backdropFilter: "blur(2px)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: 1000,
+    animation: "fadeIn 0.15s ease",
+    padding: "20px",
+  },
+  modal: {
+    background: "#fff",
+    width: "100%",
+    maxWidth: "460px",
+    maxHeight: "85vh",
+    overflowY: "auto", // content scrolls, not background
+    borderRadius: "12px",
+    boxShadow: "0 4px 22px rgba(0,0,0,0.2)",
+    padding: "22px",
+    animation: "zoomIn 0.2s ease",
+  },
+  header: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "14px",
+    borderBottom: "1px solid #eee",
+    paddingBottom: "10px",
+  },
+  closeBtn: {
+    background: "transparent",
+    border: "none",
+    fontSize: "22px",
+    cursor: "pointer",
+    color: "#333",
+    padding: "4px",
+  },
+  content: {
+    marginTop: "10px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "14px",
+  },
+};

frontend/src/components/routes/protectedRoute.tsx

@@ -1,20 +1,18 @@
 import { Navigate, Outlet } from "react-router-dom";
-import { isAuthenticated } from "../../utils/auth";
+import { useUserStore } from "../../store/userStore";
 
 interface ProtectedRouteProps {
   requireAuth?: boolean;
+  children?: React.ReactNode;
+  allowedRoles?: string[];
 }
 
-const ProtectedRoute = ({ requireAuth = true }: ProtectedRouteProps) => {
-  if (requireAuth && !isAuthenticated()) {
+const ProtectedRoute = ({ allowedRoles = [], requireAuth = true, children }: ProtectedRouteProps) => {
+  const { user } = useUserStore();
+  if (requireAuth && !user?.token || !allowedRoles?.includes(user?.role || '')) {
     return <Navigate to="/login" replace />;
   }
-
-  if (!requireAuth && isAuthenticated()) {
-    return <Navigate to="/dashboard" replace />;
-  }
-
-  return <Outlet />;
+  return children || <Outlet />;
 };
 
 export default ProtectedRoute;

frontend/src/pages/Login/login.tsx

@@ -33,7 +33,7 @@ const Login = () => {
 
       mockValidateToken(token).then((isValid) => {
         if (isValid) {
-          setUser({ username: 'admin', token });
+          setUser({ username: 'admin', token, role: 'admin' });
         } else {
           StorageManager.getInstance().removeItem('auth_token');
           setUser(null);

frontend/src/pages/ProjectManagement/ProjectManagement.tsx

@@ -4,7 +4,7 @@ function ProjectManagement() {
   return (
     <div>
       <h1>Project management page</h1>
-      <ItemManagement pageName="Project" />
+      <ItemManagement pageName="Project" onAdd={() => {console.log('add project clicked')}} />
     </div>
   );
 }