add permissions for routes in frontend

frontend/src/AppRoutes.tsx

@@ -1,4 +1,4 @@
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, Navigate } from 'react-router-dom';
 import {
   AboutPage,
   AdminPage,
@@ -45,10 +45,61 @@ import { AdminLayout } from './PagesAdmin/AdminLayout/AdminLayout';
 import { RecruitmentFormAdminPage } from './PagesAdmin/RecruitmentFormAdminPage';
 import { SaksdokumentAdminPage } from './PagesAdmin/SaksdokumentAdminPage';
 import { ROUTES } from './routes';
+import { PERM } from './permissions';
+import { useAuthContext } from './AuthContext';
+import { UserDto } from './dto';
+import { hasPerm } from './utils';
+import { ElementType } from 'react';
+
+/**
+ * Router component, to be used inside element of a route, and page that is requested
+ * Allows for setting up routes that requires authentication, permissions, and staff
+ * @param {ElementType} Page - The page to be rendered
+ * @param {UserDto | undefined} user - the current user, undefined if not logged in
+ * @param {string[] | undefined} permissions - list of permissions needed to access page, undefined if not needed
+ * @param {string} redirectPath - redirect to specific page if wanted
+ * @param {boolean} requiresStaff: - if staff permissions are required for page
+ */
+
+const ProtectedRoute = (
+  Page: ElementType,
+  user?: UserDto | undefined,
+  permissions?: string[] | undefined,
+  redirectPath: string = ROUTES.frontend.home,
+  requiresStaff = true,
+) => {
+  // const { user } = useAuthContext(); // test for if this is the best level for fetching user
+  console.log(user);
+
+  if (!user) {
+    // All Protected routes need a user, redirects to login
+    //
+    //TODO improve to keep attempted route
+    return <Navigate to={ROUTES.frontend.login} replace />;
+  }
+  if (requiresStaff && !user?.is_staff) {
+    return <Navigate to={redirectPath} replace />;
+  }
+  if (permissions) {
+    for (const permission of permissions) {
+      console.log('perm', permission);
+      console.log(permissions);
+      console.log(hasPerm({ permission: permission, user: user }));
+      if (!hasPerm({ permission: permission, user: user })) {
+        return <Navigate to={redirectPath} replace />;
+      }
+    }
+  }
+  console.log(permissions);
+  console.log(user.permissions);
+  return <Page />;
+};
 
 export function AppRoutes() {
   // Must be called within <BrowserRouter> because it uses hook useLocation().
   useGoatCounter();
+  const { user } = useAuthContext();
+  //const isStaff = user?.is_staff;
 
   return (
     <Routes>
@@ -76,12 +127,21 @@ export function AppRoutes() {
       {/* 
             ADMIN ROUTES
       */}
-      <Route element={<AdminLayout />}>
-        <Route path={ROUTES.frontend.admin} element={<AdminPage />} />
+      <Route element={<ProtectedRoute Page={AdminLayout} />}>
+        <Route path={ROUTES.frontend.admin} element={<ProtectedRoute user={user} Page={AdminPage} />} />
         {/* Gangs */}
-        <Route path={ROUTES.frontend.admin_gangs} element={<GangsAdminPage />} />
-        <Route path={ROUTES.frontend.admin_gangs_create} element={<GangsFormAdminPage />} />
-        <Route path={ROUTES.frontend.admin_gangs_edit} element={<GangsFormAdminPage />} />
+        <Route
+          path={ROUTES.frontend.admin_gangs}
+          element={<ProtectedRoute permissions={[PERM.SAMFUNDET_VIEW_GANG]} user={user} Page={GangsAdminPage} />}
+        />
+        <Route
+          path={ROUTES.frontend.admin_gangs_create}
+          element={<ProtectedRoute permissions={[PERM.SAMFUNDET_ADD_GANG]} user={user} Page={GangsFormAdminPage} />}
+        />
+        <Route
+          path={ROUTES.frontend.admin_gangs_edit}
+          element={<ProtectedRoute permissions={[PERM.SAMFUNDET_ADD_GANG]} user={user} Page={GangsFormAdminPage} />}
+        />
         {/* Events */}
         <Route path={ROUTES.frontend.admin_events} element={<EventsAdminPage />} />
         <Route path={ROUTES.frontend.admin_events_create} element={<EventCreatorAdminPage />} />
@@ -118,13 +178,13 @@ export function AppRoutes() {
           path={ROUTES.frontend.admin_recruitment_gang_position_edit}
           element={<RecruitmentPositionFormAdminPage />}
         />
-      </Route>
-      {/* 
+        {/* 
         Info pages
         Custom layout for edit/create
       */}
-      <Route path={ROUTES.frontend.admin_information_create} element={<InformationFormAdminPage />} />
-      <Route path={ROUTES.frontend.admin_information_edit} element={<InformationFormAdminPage />} />
+        <Route path={ROUTES.frontend.admin_information_create} element={<InformationFormAdminPage />} />
+        <Route path={ROUTES.frontend.admin_information_edit} element={<InformationFormAdminPage />} />
+      </Route>
       {/* 
             SULTEN ROUTES
       */}