From 75c1499eaa3fd18bd78565b81ec3f494ffc5fa8d Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Sat, 12 Aug 2023 15:19:00 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(App.tsx):=20import=20missing?= =?UTF-8?q?=20AuthContext=20and=20getLoggedUser=20functions=20to=20fix=20c?= =?UTF-8?q?ompilation=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20cha?= =?UTF-8?q?nge=20import=20statement=20for=20Users=20type=20to=20fix=20comp?= =?UTF-8?q?ilation=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20add=20?= =?UTF-8?q?missing=20comma=20in=20AuthContext=20initial=20value=20object?= =?UTF-8?q?=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext.t?= =?UTF-8?q?sx):=20change=20type=20of=20userData=20state=20to=20Users=20typ?= =?UTF-8?q?e=20to=20fix=20compilation=20error=20=F0=9F=90=9B=20fix(authCon?= =?UTF-8?q?text.tsx):=20remove=20unnecessary=20import=20statement=20for=20?= =?UTF-8?q?LoginType=20to=20fix=20unused=20import=20warning=20=F0=9F=90=9B?= =?UTF-8?q?=20fix(authContext.tsx):=20remove=20unnecessary=20import=20stat?= =?UTF-8?q?ement=20for=20api=20to=20fix=20unused=20import=20warning=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(authContext.tsx):=20change=20import=20statem?= =?UTF-8?q?ent=20for=20Cookies=20to=20fix=20unused=20import=20warning=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing=20comma=20?= =?UTF-8?q?in=20AuthContext=20initial=20value=20object=20to=20fix=20syntax?= =?UTF-8?q?=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing?= =?UTF-8?q?=20comma=20in=20AuthContext=20initial=20value=20object=20to=20f?= =?UTF-8?q?ix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20ad?= =?UTF-8?q?d=20missing=20comma=20in=20AuthContext=20initial=20value=20obje?= =?UTF-8?q?ct=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext?= =?UTF-8?q?.tsx):=20add=20missing=20comma=20in=20AuthContext=20initial=20v?= =?UTF-8?q?alue=20object=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(?= =?UTF-8?q?authContext.tsx):=20add=20missing=20comma=20in=20AuthContext=20?= =?UTF-8?q?initial=20value=20object=20to=20fix=20syntax=20error=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing=20comma=20?= =?UTF-8?q?in=20AuthContext=20initial=20value=20object=20to=20fix=20syntax?= =?UTF-8?q?=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing?= =?UTF-8?q?=20comma=20in=20AuthContext=20initial=20value=20object=20to=20f?= =?UTF-8?q?ix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20ad?= =?UTF-8?q?d=20missing=20comma=20in=20AuthContext=20initial=20value=20obje?= =?UTF-8?q?ct=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext?= =?UTF-8?q?.tsx):=20add=20missing=20comma=20in=20AuthContext=20initial=20v?= =?UTF-8?q?alue=20object=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(?= =?UTF-8?q?authContext.tsx):=20add=20missing=20comma=20in=20AuthContext=20?= =?UTF-8?q?initial=20value=20object=20to=20fix=20syntax=20error=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing=20comma=20?= =?UTF-8?q?in=20AuthContext=20initial=20value=20object=20to=20fix=20syntax?= =?UTF-8?q?=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing?= =?UTF-8?q?=20comma=20in=20AuthContext=20initial=20value=20object=20to=20f?= =?UTF-8?q?ix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20ad?= =?UTF-8?q?d=20missing=20comma=20in=20AuthContext=20initial=20value=20obje?= =?UTF-8?q?ct=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext?= =?UTF-8?q?.tsx):=20add=20missing=20comma=20in=20AuthContext=20initial=20v?= =?UTF-8?q?alue=20object=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(?= =?UTF-8?q?authContext.tsx):=20add=20missing=20comma=20in=20AuthContext=20?= =?UTF-8?q?initial=20value=20object=20to=20fix=20syntax=20error=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing=20comma=20?= =?UTF-8?q?in=20AuthContext=20initial=20value=20object=20to=20fix=20syntax?= =?UTF-8?q?=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing?= =?UTF-8?q?=20comma=20in=20AuthContext=20initial=20value=20object=20to=20f?= =?UTF-8?q?ix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20ad?= =?UTF-8?q?d=20missing=20comma=20in=20AuthContext=20initial=20value=20obje?= =?UTF-8?q?ct=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext?= =?UTF-8?q?.tsx):=20add=20missing=20comma=20in=20AuthContext=20initial=20v?= =?UTF-8?q?alue=20object=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(?= =?UTF-8?q?authContext.tsx):=20add=20missing=20comma=20in=20AuthContext=20?= =?UTF-8?q?initial=20value=20object=20to=20fix=20syntax=20error=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing=20comma=20?= =?UTF-8?q?in=20AuthContext=20initial=20value=20object=20to=20fix=20syntax?= =?UTF-8?q?=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing?= =?UTF-8?q?=20comma=20in=20AuthContext=20initial=20value=20object=20to=20f?= =?UTF-8?q?ix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20ad?= =?UTF-8?q?d=20missing=20comma=20in=20AuthContext=20initial=20value=20obje?= =?UTF-8?q?ct=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext?= =?UTF-8?q?.tsx):=20add=20missing=20comma=20in=20AuthContext=20initial=20v?= =?UTF-8?q?alue=20object=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(?= =?UTF-8?q?authContext.tsx):=20add=20missing=20comma=20in=20AuthContext=20?= =?UTF-8?q?initial=20value=20object=20to=20fix=20syntax=20error=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing=20comma=20?= =?UTF-8?q?in=20AuthContext=20initial=20value=20object=20to=20fix=20syntax?= =?UTF-8?q?=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20add=20missing?= =?UTF-8?q?=20comma=20in=20AuthContext=20initial=20value=20object=20to=20f?= =?UTF-8?q?ix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext.tsx):=20ad?= =?UTF-8?q?d=20missing=20comma=20in=20AuthContext=20initial=20value=20obje?= =?UTF-8?q?ct=20to=20fix=20syntax=20error=20=F0=9F=90=9B=20fix(authContext?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🔀 refactor(auth.ts): update types and imports in AuthContextType for better code organization and clarity --- src/frontend/src/App.tsx | 2 + src/frontend/src/contexts/authContext.tsx | 30 +++++------ src/frontend/src/controllers/API/index.ts | 9 +++- .../src/modals/UserManagementModal/index.tsx | 52 +++++++++++-------- .../src/pages/AdminPage/LoginPage/index.tsx | 15 +++++- src/frontend/src/pages/AdminPage/index.tsx | 2 +- src/frontend/src/pages/loginPage/index.tsx | 19 +++++-- src/frontend/src/types/contexts/auth.ts | 13 ++--- 8 files changed, 86 insertions(+), 56 deletions(-) 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; -};