diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 50cbffdf8..2bf3064e7 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -14,6 +14,8 @@ import { alertContext } from "./contexts/alertContext"; import { locationContext } from "./contexts/locationContext"; import { TabsContext } from "./contexts/tabsContext"; import Router from "./routes"; +import { AuthContext } from "./contexts/authContext"; +import { getLoggedUser } from "./controllers/API"; export default function App() { let { setCurrent, setShowSideBar, setIsStackedOpen } = diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx index 81ee6270b..d15c38e33 100644 --- a/src/frontend/src/contexts/authContext.tsx +++ b/src/frontend/src/contexts/authContext.tsx @@ -1,8 +1,7 @@ import { createContext, useEffect, useState } from "react"; -import { AuthContextType, userData } from "../types/contexts/auth"; -import { LoginType } from "../types/api"; -import { api } from "../controllers/API/api"; -import Cookies from 'universal-cookie'; +import Cookies from "universal-cookie"; +import { Users } from "../types/api"; +import { AuthContextType } from "../types/contexts/auth"; const initialValue: AuthContextType = { isAuthenticated: false, @@ -14,7 +13,7 @@ const initialValue: AuthContextType = { userData: null, setUserData: () => {}, getAuthentication: () => false, - authenticationErrorCount: 0 + authenticationErrorCount: 0, }; export const AuthContext = createContext(initialValue); @@ -23,7 +22,7 @@ export function AuthProvider({ children }): React.ReactElement { const [accessToken, setAccessToken] = useState(null); const [refreshToken, setRefreshToken] = useState(null); const [isAuthenticated, setIsAuthenticated] = useState(false); - const [userData, setUserData] = useState(null); + const [userData, setUserData] = useState(null); const cookies = new Cookies(); useEffect(() => { @@ -33,25 +32,25 @@ export function AuthProvider({ children }): React.ReactElement { } }, []); - - function getAuthentication(){ - const storedRefreshToken = cookies.get('refresh_token'); - const storedAccess = cookies.get('access_token'); + function getAuthentication() { + const storedRefreshToken = cookies.get("refresh_token"); + const storedAccess = cookies.get("access_token"); const auth = storedAccess && storedRefreshToken ? true : false; return auth; } function login(newAccessToken: string, refreshToken: string) { - cookies.set('access_token', newAccessToken, { path: '/' }); - cookies.set('refresh_token', refreshToken, { path: '/' }); + cookies.set("access_token", newAccessToken, { path: "/" }); + cookies.set("refresh_token", refreshToken, { path: "/" }); setAccessToken(newAccessToken); setRefreshToken(refreshToken); setIsAuthenticated(true); } function logout() { - cookies.remove('access_token', { path: '/' }); - cookies.remove('refresh_token', { path: '/' }); + cookies.remove("access_token", { path: "/" }); + cookies.remove("refresh_token", { path: "/" }); + setUserData(null); setAccessToken(null); setRefreshToken(null); setIsAuthenticated(false); @@ -77,7 +76,6 @@ export function AuthProvider({ children }): React.ReactElement { logout(); } } - return ( // !! to convert string to boolean @@ -92,7 +90,7 @@ export function AuthProvider({ children }): React.ReactElement { setUserData, userData, getAuthentication, - authenticationErrorCount: 0 + authenticationErrorCount: 0, }} > {children} diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index fb923243d..557d83a37 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -388,9 +388,14 @@ export async function renewAccessToken(token: string) { } } -export async function getAllUsers(): Promise { +export async function getLoggedUser(): Promise { try { - return await api.get(`${BASE_URL_API}user`); + + const res = await api.get(`${BASE_URL_API}user`); + + if (res.status === 200) { + return res.data; + } } catch (error) { console.log("Error:", error); throw error; diff --git a/src/frontend/src/modals/UserManagementModal/index.tsx b/src/frontend/src/modals/UserManagementModal/index.tsx index 98ec5642d..153af5858 100644 --- a/src/frontend/src/modals/UserManagementModal/index.tsx +++ b/src/frontend/src/modals/UserManagementModal/index.tsx @@ -1,6 +1,6 @@ import * as Form from "@radix-ui/react-form"; import { Eye, EyeOff } from "lucide-react"; -import { useEffect, useState } from "react"; +import { useContext, useEffect, useState } from "react"; import { Button } from "../../components/ui/button"; import { Checkbox } from "../../components/ui/checkbox"; import { CONTROL_NEW_USER } from "../../constants/constants"; @@ -11,6 +11,7 @@ import { } from "../../types/components"; import { nodeIconsLucide } from "../../utils/styleUtils"; import BaseModal from "../baseModal"; +import { AuthContext } from "../../contexts/authContext"; export default function UserManagementModal({ title, @@ -34,6 +35,11 @@ export default function UserManagementModal({ const [isDisabled, setIsDisabled] = useState(data?.is_disabled ?? false); const [isSuperUser, setIsSuperUser] = useState(data?.is_superuser ?? false); const [inputState, setInputState] = useState(CONTROL_NEW_USER); + const { userData} = useContext(AuthContext); + + + console.log(userData); + function handleInput({ target: { name, value }, @@ -236,28 +242,30 @@ export default function UserManagementModal({ - + {userData?.is_superuser && ( -
- - Superuser - - - { - handleInput({ - target: { name: "is_superuser", value }, - }); - setIsSuperUser(value); - }} - /> - -
-
+
+ + Superuser + + + { + handleInput({ + target: { name: "is_superuser", value }, + }); + setIsSuperUser(value); + }} + /> + +
+ + )} + diff --git a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx index bcc545e9b..7130a217e 100644 --- a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx @@ -5,7 +5,7 @@ import { Input } from "../../../components/ui/input"; import { CONTROL_LOGIN_STATE } from "../../../constants/constants"; import { alertContext } from "../../../contexts/alertContext"; import { AuthContext } from "../../../contexts/authContext"; -import { onLogin } from "../../../controllers/API"; +import { getLoggedUser, onLogin } from "../../../controllers/API"; import { LoginType } from "../../../types/api"; import { inputHandlerEventType, @@ -17,7 +17,7 @@ export default function LoginAdminPage() { const [inputState, setInputState] = useState(CONTROL_LOGIN_STATE); - const { login } = useContext(AuthContext); + const { login, getAuthentication, setUserData } = useContext(AuthContext); const { password, username } = inputState; const { setErrorData } = useContext(alertContext); @@ -36,6 +36,7 @@ export default function LoginAdminPage() { onLogin(user) .then((user) => { login(user.access_token, user.refresh_token); + getUser(); navigate("/admin/"); }) .catch((error) => { @@ -46,6 +47,16 @@ export default function LoginAdminPage() { }); } + function getUser(){ + if(getAuthentication){ + setTimeout(() => { + getLoggedUser().then((user) => { + setUserData(user); + }).catch((error) => {}); + }, 1000); + } +} + return (
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx index 6e638440b..79bc75393 100644 --- a/src/frontend/src/pages/AdminPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/index.tsx @@ -1,4 +1,4 @@ -import _ from "lodash"; +import _, { set } from "lodash"; import { X } from "lucide-react"; import { useEffect, useRef, useState,useContext } from "react"; import PaginatorComponent from "../../components/PaginatorComponent"; diff --git a/src/frontend/src/pages/loginPage/index.tsx b/src/frontend/src/pages/loginPage/index.tsx index f193af2b1..7c813d1c7 100644 --- a/src/frontend/src/pages/loginPage/index.tsx +++ b/src/frontend/src/pages/loginPage/index.tsx @@ -8,7 +8,7 @@ import { Input } from "../../components/ui/input"; import { CONTROL_LOGIN_STATE } from "../../constants/constants"; import { alertContext } from "../../contexts/alertContext"; import { AuthContext } from "../../contexts/authContext"; -import { onLogin } from "../../controllers/API"; +import { getLoggedUser, onLogin } from "../../controllers/API"; import { LoginType } from "../../types/api"; import { inputHandlerEventType, @@ -20,7 +20,7 @@ export default function LoginPage(): JSX.Element { useState(CONTROL_LOGIN_STATE); const { password, username } = inputState; - const { login } = useContext(AuthContext); + const { login, getAuthentication, setUserData } = useContext(AuthContext); const navigate = useNavigate(); const { setErrorData } = useContext(alertContext); @@ -38,6 +38,7 @@ export default function LoginPage(): JSX.Element { onLogin(user) .then((user) => { login(user.access_token, user.refresh_token); + getUser(); navigate("/"); }) .catch((error) => { @@ -48,6 +49,16 @@ export default function LoginPage(): JSX.Element { }); } + function getUser(){ + if(getAuthentication){ + setTimeout(() => { + getLoggedUser().then((user) => { + setUserData(user); + }).catch((error) => {}); + }, 1000); + } +} + return ( { @@ -55,7 +66,7 @@ export default function LoginPage(): JSX.Element { event.preventDefault(); return; } - + signIn(); const data = Object.fromEntries(new FormData(event.currentTarget)); event.preventDefault(); }} @@ -115,7 +126,7 @@ export default function LoginPage(): JSX.Element {
- diff --git a/src/frontend/src/types/contexts/auth.ts b/src/frontend/src/types/contexts/auth.ts index c65e1d1de..496baeb29 100644 --- a/src/frontend/src/types/contexts/auth.ts +++ b/src/frontend/src/types/contexts/auth.ts @@ -1,3 +1,5 @@ +import { Users } from "../api"; + export type AuthContextType = { isAuthenticated: boolean; accessToken: string | null; @@ -5,15 +7,8 @@ export type AuthContextType = { login: (accessToken: string, refreshToken: string) => void; logout: () => void; refreshAccessToken: (refreshToken: string) => Promise; - userData: userData | null; - setUserData: (userData: userData | null) => void; + userData: Users | null; + setUserData: (userData: Users | null) => void; getAuthentication: () => boolean; authenticationErrorCount: number; }; - -export type userData = { - id: string; - name: string; - email: string; - role: string; -};