merge conflicts

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/genericIconComponent/index.tsx

@@ -9,7 +9,7 @@ const ForwardedIconComponent = forwardRef(
       <TargetIcon
         strokeWidth={1.5}
         className={className}
-        style={{ color: iconColor }}
+        style={iconColor ? { color: iconColor } : {}}
         ref={ref}
       />
     );

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);
@@ -23,6 +24,8 @@ export default function Header() {
 
   const [stars, setStars] = useState(null);
 
+  const { isAdmin, setIsAdmin } = useContext(AuthContext);
+
   // Get and set numbers of stars on header
   useEffect(() => {
     async function fetchStars() {
@@ -31,6 +34,7 @@ export default function Header() {
     }
     fetchStars();
   }, []);
+
   return (
     <div className="header-arrangement">
       <div className="header-start-display">
@@ -49,6 +53,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} />
@@ -132,6 +146,12 @@ export default function Header() {
               />
             </div>
           </AlertDropdown>
+          <button>
+            <IconComponent
+              name="Key"
+              className="side-bar-button-size text-muted-foreground hover:text-accent-foreground"
+            />
+          </button>
         </div>
       </div>
     </div>

src/frontend/src/components/inputComponent/index.tsx

@@ -74,7 +74,8 @@ export default function InputComponent({
               ? "input-component-true-button"
               : "input-component-false-button"
           )}
-          onClick={() => {
+          onClick={(event) => {
+            event.preventDefault();
             setPwdVisible(!pwdVisible);
           }}
         >

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,
@@ -24,6 +27,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 [autoLogin, setAutoLogin] = useState<boolean>(false);
   const cookies = new Cookies();
@@ -34,6 +38,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");
@@ -72,6 +85,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();
       }
@@ -84,6 +98,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;