feat: Add admin page button and refactor protected route /admin

src/frontend/src/components/authAdminGuard/index.tsx

@@ -3,25 +3,21 @@ import { Navigate } from "react-router-dom";
 import { AuthContext } from "../../contexts/authContext";
 
 export const ProtectedAdminRoute = ({ children }) => {
-  const { isAuthenticated, logout, getAuthentication, userData } =
+  const { isAdmin, isAuthenticated, logout, getAuthentication, userData } =
     useContext(AuthContext);
   useEffect(() => {
     if (!isAuthenticated && !getAuthentication()) {
       window.location.replace("/login");
       logout();
     }
-
-    if (userData && userData?.is_superuser === false) {
-      logout();
-    }
   }, [isAuthenticated, getAuthentication, logout, userData]);
 
   if (!isAuthenticated && !getAuthentication()) {
     return <Navigate to="/login" replace />;
   }
 
-  if (userData && userData?.is_superuser === false) {
-    return <Navigate to="/login" replace />;
+  if (userData && !isAdmin) {
+    return <Navigate to="/" replace />;
   }
 
   return children;

src/frontend/src/components/headerComponent/index.tsx

@@ -7,11 +7,12 @@ import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
 import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
-import { getRepoStars } from "../../controllers/API";
+import { getLoggedUser, getRepoStars } from "../../controllers/API";
 import IconComponent from "../genericIconComponent";
 import { Button } from "../ui/button";
 import { Separator } from "../ui/separator";
 import MenuBar from "./components/menuBar";
+import { Users } from "../../types/api";
 
 export default function Header() {
   const { flows, tabId } = useContext(TabsContext);
@@ -24,6 +25,8 @@ export default function Header() {
   const [stars, setStars] = useState(null);
   const isLocalHost = window.location.href.includes("localhost");
 
+  const { isAdmin, setIsAdmin } = useContext(AuthContext);
+
   // Get and set numbers of stars on header
   useEffect(() => {
     async function fetchStars() {
@@ -32,6 +35,7 @@ export default function Header() {
     }
     fetchStars();
   }, []);
+
   return (
     <div className="header-arrangement">
       <div className="header-start-display">
@@ -50,6 +54,16 @@ export default function Header() {
             Sign out
           </Button>
         )}
+        
+        {isAdmin && (
+          <Button
+            variant="outline"
+            onClick={() => navigate("/admin")}
+          >
+            Admin page
+          </Button>
+        )}
+
 
         {flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && (
           <MenuBar flows={flows} tabId={tabId} />

src/frontend/src/contexts/authContext.tsx

@@ -2,8 +2,11 @@ import { createContext, useEffect, useState } from "react";
 import Cookies from "universal-cookie";
 import { Users } from "../types/api";
 import { AuthContextType } from "../types/contexts/auth";
+import { getLoggedUser } from "../controllers/API";
 
 const initialValue: AuthContextType = {
+  isAdmin: false,
+  setIsAdmin: () => false,
   isAuthenticated: false,
   accessToken: null,
   refreshToken: null,
@@ -22,6 +25,7 @@ export function AuthProvider({ children }): React.ReactElement {
   const [accessToken, setAccessToken] = useState<string | null>(null);
   const [refreshToken, setRefreshToken] = useState<string | null>(null);
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
+  const [isAdmin, setIsAdmin] = useState<boolean>(false);
   const [userData, setUserData] = useState<Users>(null);
   const cookies = new Cookies();
 
@@ -31,6 +35,15 @@ export function AuthProvider({ children }): React.ReactElement {
       setAccessToken(storedAccessToken);
     }
   }, []);
+  
+  useEffect(() => {
+    if (accessToken) {
+      getLoggedUser().then((user) => {
+        const isSuperUser = user.is_superuser
+        setIsAdmin(isSuperUser);
+      });
+    }
+  }, [accessToken, isAdmin])
 
   function getAuthentication() {
     const storedRefreshToken = cookies.get("refresh_token");
@@ -69,6 +82,7 @@ export function AuthProvider({ children }): React.ReactElement {
       if (response.ok) {
         const data = await response.json();
         login(data.accessToken, refreshToken);
+        getLoggedUser().then((user) => { console.log('oi')});
       } else {
         logout();
       }
@@ -81,6 +95,8 @@ export function AuthProvider({ children }): React.ReactElement {
     // !! to convert string to boolean
     <AuthContext.Provider
       value={{
+        isAdmin,
+        setIsAdmin,
         isAuthenticated: !!accessToken,
         accessToken,
         refreshToken,

src/frontend/src/types/contexts/auth.ts

@@ -1,6 +1,8 @@
 import { Users } from "../api";
 
 export type AuthContextType = {
+  isAdmin: boolean;
+  setIsAdmin: (isAdmin: boolean) => void;
   isAuthenticated: boolean;
   accessToken: string | null;
   refreshToken: string | null;