diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index 7ccb7cba0..248ddf899 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -11,11 +11,11 @@ import SuccessAlert from "./alerts/success"; import CrashErrorComponent from "./components/CrashErrorComponent"; import Header from "./components/headerComponent"; import { alertContext } from "./contexts/alertContext"; +import { AuthContext } from "./contexts/authContext"; import { locationContext } from "./contexts/locationContext"; import { TabsContext } from "./contexts/tabsContext"; -import Router from "./routes"; -import { AuthContext } from "./contexts/authContext"; import { getLoggedUser } from "./controllers/API"; +import Router from "./routes"; export default function App() { let { setCurrent, setShowSideBar, setIsStackedOpen } = @@ -130,15 +130,16 @@ export default function App() { //this function is to get the user logged in when the page is refreshed const { setUserData, getAuthentication } = useContext(AuthContext); useEffect(() => { - setTimeout(() => { - if(getAuthentication && !isLoginPage){ - getLoggedUser().then((user) => { + setTimeout(() => { + if (getAuthentication && !isLoginPage) { + getLoggedUser() + .then((user) => { setUserData(user); - }).catch((error) => {}); - } - }, 1000); - },[]); - + }) + .catch((error) => {}); + } + }, 1000); + }, []); return ( //need parent component with width and height diff --git a/src/frontend/src/components/PaginatorComponent/index.tsx b/src/frontend/src/components/PaginatorComponent/index.tsx index ebad18506..01293c4e3 100644 --- a/src/frontend/src/components/PaginatorComponent/index.tsx +++ b/src/frontend/src/components/PaginatorComponent/index.tsx @@ -17,12 +17,9 @@ export default function PaginatorComponent({ totalRowsCount = 0, paginate, }: PaginatorComponentType) { - const [size, setPageSize] = useState(pageSize); const [index, setPageIndex] = useState(pageIndex); - const [maxIndex, setMaxPageIndex] = useState( - 100 - ); + const [maxIndex, setMaxPageIndex] = useState(100); return ( <> @@ -51,11 +48,11 @@ export default function PaginatorComponent({
- Page {index+1} of {maxIndex} + Page {index + 1} of {maxIndex}
{flows.findIndex((f) => tabId === f.id) !== -1 && tabId !== "" && ( diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts index c7e8301db..c2fbd1fb5 100644 --- a/src/frontend/src/constants/constants.ts +++ b/src/frontend/src/constants/constants.ts @@ -507,7 +507,7 @@ export const URL_EXCLUDED_FROM_ERROR_RETRIES = [ "/api/v1/validate/code", "/api/v1/custom_component", "/api/v1/validate/prompt", - "http://localhost:7860/login" + "http://localhost:7860/login", ]; export const CONTROL_INPUT_STATE = { @@ -609,4 +609,4 @@ export function tabsArray(codes: string[], method: number) { ]; } -export const BASE_URL_API = "http://localhost:7860/"; \ No newline at end of file +export const BASE_URL_API = "http://localhost:7860/"; diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx index 969a04214..64142f942 100644 --- a/src/frontend/src/contexts/index.tsx +++ b/src/frontend/src/contexts/index.tsx @@ -3,38 +3,36 @@ import { ReactFlowProvider } from "reactflow"; import { TooltipProvider } from "../components/ui/tooltip"; import { SSEProvider } from "./SSEContext"; import { AlertProvider } from "./alertContext"; +import { AuthProvider } from "./authContext"; import { DarkProvider } from "./darkContext"; import { LocationProvider } from "./locationContext"; import { TabsProvider } from "./tabsContext"; import { TypesProvider } from "./typesContext"; import { UndoRedoProvider } from "./undoRedoContext"; -import { AuthProvider } from "./authContext"; export default function ContextWrapper({ children }: { children: ReactNode }) { //element to wrap all context return ( <> - - - - - - - - - - - {children} - - - - - - - - + + + + + + + + + + {children} + + + + + + + + - ); } diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx index 6f3742bc7..d798e72d5 100644 --- a/src/frontend/src/controllers/API/api.tsx +++ b/src/frontend/src/controllers/API/api.tsx @@ -1,11 +1,10 @@ import axios, { AxiosError, AxiosInstance } from "axios"; import { useContext, useEffect } from "react"; +import { Cookies } from "react-cookie"; import { useNavigate } from "react-router-dom"; import { renewAccessToken } from "."; -import { URL_EXCLUDED_FROM_ERROR_RETRIES } from "../../constants/constants"; import { alertContext } from "../../contexts/alertContext"; import { AuthContext } from "../../contexts/authContext"; -import { Cookies } from "react-cookie"; // Create a new Axios instance const api: AxiosInstance = axios.create({ @@ -14,23 +13,23 @@ const api: AxiosInstance = axios.create({ function ApiInterceptor() { const { setErrorData } = useContext(alertContext); - let { accessToken, login, logout, authenticationErrorCount } = useContext(AuthContext); + let { accessToken, login, logout, authenticationErrorCount } = + useContext(AuthContext); const navigate = useNavigate(); const cookies = new Cookies(); console.log(accessToken); - useEffect(() => { const interceptor = api.interceptors.response.use( (response) => response, async (error: AxiosError) => { if (error.response?.status === 401) { - const refreshToken = cookies.get('refresh_token'); + const refreshToken = cookies.get("refresh_token"); if (refreshToken) { authenticationErrorCount = authenticationErrorCount + 1; - if(authenticationErrorCount > 3){ + if (authenticationErrorCount > 3) { authenticationErrorCount = 0; logout(); navigate("/login"); @@ -39,7 +38,7 @@ function ApiInterceptor() { const res = await renewAccessToken(refreshToken); login(res.data.access_token, res.data.refresh_token); try { - const accessToken = cookies.get('access_token'); + const accessToken = cookies.get("access_token"); delete error.config.headers["Authorization"]; error.config.headers["Authorization"] = `Bearer ${accessToken}`; const response = await axios.request(error.config); @@ -50,15 +49,13 @@ function ApiInterceptor() { navigate("/login"); } } - } - else{ + } else { logout(); navigate("/login"); } - } - else{ + } else { // if (URL_EXCLUDED_FROM_ERROR_RETRIES.includes(error.config?.url)) { - return Promise.reject(error); + return Promise.reject(error); // } } // else { diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 557d83a37..2f7f95cda 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -1,5 +1,6 @@ import { AxiosResponse } from "axios"; import { ReactFlowJsonObject } from "reactflow"; +import { BASE_URL_API } from "../../constants/constants"; import { api } from "../../controllers/API/api"; import { APIObjectType, @@ -17,8 +18,6 @@ import { UploadFileTypeAPI, errorsTypeAPI, } from "./../../types/api/index"; -import { BASE_URL_API } from "../../constants/constants"; - /** * Fetches all objects from the API endpoint. @@ -390,7 +389,6 @@ export async function renewAccessToken(token: string) { export async function getLoggedUser(): Promise { try { - const res = await api.get(`${BASE_URL_API}user`); if (res.status === 200) { diff --git a/src/frontend/src/modals/UserManagementModal/index.tsx b/src/frontend/src/modals/UserManagementModal/index.tsx index 153af5858..c6d6abde2 100644 --- a/src/frontend/src/modals/UserManagementModal/index.tsx +++ b/src/frontend/src/modals/UserManagementModal/index.tsx @@ -4,6 +4,7 @@ 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"; +import { AuthContext } from "../../contexts/authContext"; import { UserInputType, UserManagementType, @@ -11,7 +12,6 @@ import { } from "../../types/components"; import { nodeIconsLucide } from "../../utils/styleUtils"; import BaseModal from "../baseModal"; -import { AuthContext } from "../../contexts/authContext"; export default function UserManagementModal({ title, @@ -24,7 +24,6 @@ export default function UserManagementModal({ index, onConfirm, }: UserManagementType) { - const Icon: any = nodeIconsLucide[icon]; const [pwdVisible, setPwdVisible] = useState(false); const [confirmPwdVisible, setConfirmPwdVisible] = useState(false); @@ -35,11 +34,9 @@ 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); + const { userData } = useContext(AuthContext); - - console.log(userData); - + console.log(userData); function handleInput({ target: { name, value }, @@ -50,8 +47,7 @@ export default function UserManagementModal({ useEffect(() => { if (!data) { resetForm(); - } - else{ + } else { handleInput({ target: { name: "username", value: username } }); handleInput({ target: { name: "is_disabled", value: isDisabled } }); handleInput({ target: { name: "is_superuser", value: isSuperUser } }); @@ -138,16 +134,18 @@ export default function UserManagementModal({ {pwdVisible && ( setPwdVisible(!pwdVisible)} - className="h-5 cursor-pointer" strokeWidth={1.5} /> + onClick={() => setPwdVisible(!pwdVisible)} + className="h-5 cursor-pointer" + strokeWidth={1.5} + /> )} - - {!pwdVisible && ( + {!pwdVisible && ( setPwdVisible(!pwdVisible)} - className="h-5 cursor-pointer" strokeWidth={1.5} /> + onClick={() => setPwdVisible(!pwdVisible)} + className="h-5 cursor-pointer" + strokeWidth={1.5} + /> )} -
@@ -194,14 +192,21 @@ export default function UserManagementModal({ {confirmPwdVisible && ( setConfirmPwdVisible(!confirmPwdVisible)} - className="h-5 cursor-pointer" strokeWidth={1.5} /> + onClick={() => + setConfirmPwdVisible(!confirmPwdVisible) + } + className="h-5 cursor-pointer" + strokeWidth={1.5} + /> )} - - {!confirmPwdVisible && ( + {!confirmPwdVisible && ( setConfirmPwdVisible(!confirmPwdVisible)} - className="h-5 cursor-pointer" strokeWidth={1.5} /> + onClick={() => + setConfirmPwdVisible(!confirmPwdVisible) + } + className="h-5 cursor-pointer" + strokeWidth={1.5} + /> )} @@ -242,30 +247,29 @@ export default function UserManagementModal({ - {userData?.is_superuser && ( - -
- - Superuser - - - { - handleInput({ - target: { name: "is_superuser", value }, - }); - setIsSuperUser(value); - }} - /> - -
- - )} - + {userData?.is_superuser && ( + +
+ + 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 7130a217e..3a56b8e99 100644 --- a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx +++ b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx @@ -47,15 +47,17 @@ export default function LoginAdminPage() { }); } - function getUser(){ - if(getAuthentication){ + function getUser() { + if (getAuthentication) { setTimeout(() => { - getLoggedUser().then((user) => { - setUserData(user); - }).catch((error) => {}); + getLoggedUser() + .then((user) => { + setUserData(user); + }) + .catch((error) => {}); }, 1000); + } } -} return (
diff --git a/src/frontend/src/pages/loginPage/index.tsx b/src/frontend/src/pages/loginPage/index.tsx index 7c813d1c7..56ce90f75 100644 --- a/src/frontend/src/pages/loginPage/index.tsx +++ b/src/frontend/src/pages/loginPage/index.tsx @@ -1,7 +1,6 @@ import * as Form from "@radix-ui/react-form"; import { useContext, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; -import IconComponent from "../../components/genericIconComponent"; import InputComponent from "../../components/inputComponent"; import { Button } from "../../components/ui/button"; import { Input } from "../../components/ui/input"; @@ -49,15 +48,17 @@ export default function LoginPage(): JSX.Element { }); } - function getUser(){ - if(getAuthentication){ + function getUser() { + if (getAuthentication) { setTimeout(() => { - getLoggedUser().then((user) => { - setUserData(user); - }).catch((error) => {}); + getLoggedUser() + .then((user) => { + setUserData(user); + }) + .catch((error) => {}); }, 1000); + } } -} return (
- +
diff --git a/src/frontend/src/pages/signUpPage/index.tsx b/src/frontend/src/pages/signUpPage/index.tsx index 2f5e3f771..c81253f4d 100644 --- a/src/frontend/src/pages/signUpPage/index.tsx +++ b/src/frontend/src/pages/signUpPage/index.tsx @@ -1,7 +1,6 @@ import * as Form from "@radix-ui/react-form"; import { FormEvent, useState } from "react"; import { Link } from "react-router-dom"; -import IconComponent from "../../components/genericIconComponent"; import InputComponent from "../../components/inputComponent"; import { Button } from "../../components/ui/button"; import { Input } from "../../components/ui/input"; diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 9dff35843..a0918e692 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -230,6 +230,6 @@ export type loginInputStateType = { export type UserInputType = { username: string; password: string; - is_disabled:boolean; + is_disabled: boolean; is_superuser: boolean; };