From d906806f6a2a651f4ff6e244bb5f613f23836381 Mon Sep 17 00:00:00 2001 From: Leon <> Date: Wed, 2 Feb 2022 15:52:09 +0200 Subject: [PATCH] routing fix --- ui/src/components/AppSwitchRoutes.tsx | 72 ++----------------- ui/src/components/Header/EntHeader.tsx | 4 +- .../components/Pages/AuthPage/InstallPage.tsx | 1 - .../components/Pages/AuthPage/LoginPage.tsx | 4 ++ ui/src/helpers/AuthenticatedRoute.tsx | 40 +++++++++++ ui/src/helpers/api.js | 2 +- 6 files changed, 53 insertions(+), 70 deletions(-) create mode 100644 ui/src/helpers/AuthenticatedRoute.tsx diff --git a/ui/src/components/AppSwitchRoutes.tsx b/ui/src/components/AppSwitchRoutes.tsx index 250ca108b..a07f3e3c5 100644 --- a/ui/src/components/AppSwitchRoutes.tsx +++ b/ui/src/components/AppSwitchRoutes.tsx @@ -1,87 +1,27 @@ -import React, {useCallback, useEffect, useState} from "react"; -import {Route, Routes, useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom"; +import React, { useState} from "react"; +import {Route, Routes} from "react-router-dom"; import {RouterRoutes} from "../helpers/routes"; -import {useRecoilState} from "recoil"; -import entPageAtom, {Page} from "../recoil/entPage"; -import {toast} from "react-toastify"; import AuthPageBase from "./Pages/AuthPage/AuthPageBase"; import InstallPage from "./Pages/AuthPage/InstallPage"; import LoginPage from "./Pages/AuthPage/LoginPage"; -import LoadingOverlay from "./LoadingOverlay"; import SystemViewer from "./Pages/SystemViewer/SystemViewer"; -import Api from "../helpers/api"; + import {TrafficPage} from "./Pages/TrafficPage/TrafficPage"; import SettingsPage from "./Pages/SettingsPage/SettingsPage"; +import { AuthenticatedRoute } from "../helpers/AuthenticatedRoute"; -const api = Api.getInstance(); const AppSwitchRoutes = () => { - const navigate = useNavigate(); - - const [isLoading, setIsLoading] = useState(true); - const [entPage, setEntPage] = useRecoilState(entPageAtom); const [isFirstLogin, setIsFirstLogin] = useState(false); - let {inviteToken} = useParams() - const location = useLocation(); - - const determinePage = useCallback(async () => { - try { - const isInstallNeeded = await api.isInstallNeeded(); - if (isInstallNeeded) { - setEntPage(Page.Setup); - } else { - const isAuthNeeded = await api.isAuthenticationNeeded(); - if(isAuthNeeded && inviteToken) { - setEntPage(Page.Setup) - } - else if(isAuthNeeded) - setEntPage(Page.Login); - } - } catch (e) { - toast.error("Error occured while checking Mizu API status, see console for mode details"); - console.error(e); - } finally { - setIsLoading(false); - } - },[setEntPage]); - useEffect(() => { - determinePage(); - }, [determinePage]); - - useEffect(() => { - if(!location.pathname || location.pathname !== '/') { - return; - } - - switch (entPage) { - case Page.Traffic: - navigate("/"); - break; - case Page.Setup: - navigate(RouterRoutes.SETUP); - break; - case Page.Login: - navigate(RouterRoutes.LOGIN); - break; - default: - navigate(RouterRoutes.LOGIN); - } - // eslint-disable-next-line - },[entPage, location]) - - - if (isLoading) { - return ; - } return }> - } /> {/*todo: set settings component*/} - }/> + } /> {/*todo: set settings component*/} + }/> setIsFirstLogin(true)}/>}/> diff --git a/ui/src/components/Header/EntHeader.tsx b/ui/src/components/Header/EntHeader.tsx index 6c94ca0ba..8808c10df 100644 --- a/ui/src/components/Header/EntHeader.tsx +++ b/ui/src/components/Header/EntHeader.tsx @@ -54,12 +54,12 @@ export const EntHeader: React.FC = ({isFirstLogin, setIsFirstLog const ProfileButton = () => { - const setEntPage = useSetRecoilState(entPageAtom); + const navigate = useNavigate(); const logout = async (popupState) => { try { await api.logout(); - setEntPage(Page.Login); + navigate(RouterRoutes.LOGIN); } catch (e) { toast.error("Something went wrong, please check the console"); console.error(e); diff --git a/ui/src/components/Pages/AuthPage/InstallPage.tsx b/ui/src/components/Pages/AuthPage/InstallPage.tsx index e4fa7e82d..b69a45cc5 100644 --- a/ui/src/components/Pages/AuthPage/InstallPage.tsx +++ b/ui/src/components/Pages/AuthPage/InstallPage.tsx @@ -57,7 +57,6 @@ export const InstallPage: React.FC = ({onFirstLogin}) => { setEntPage(Page.Traffic); if (!await api.isAuthenticationNeeded()) { navigate('/'); - setEntPage(Page.Traffic); onFirstLogin(); } } catch (e) { diff --git a/ui/src/components/Pages/AuthPage/LoginPage.tsx b/ui/src/components/Pages/AuthPage/LoginPage.tsx index b7a3c96bd..74066398c 100644 --- a/ui/src/components/Pages/AuthPage/LoginPage.tsx +++ b/ui/src/components/Pages/AuthPage/LoginPage.tsx @@ -8,6 +8,7 @@ import entPageAtom, {Page} from "../../../recoil/entPage"; import {useSetRecoilState} from "recoil"; import useKeyPress from "../../../hooks/useKeyPress" import shortcutsKeyboard from "../../../configs/shortcutsKeyboard" +import { useNavigate } from "react-router-dom"; const api = Api.getInstance(); @@ -19,6 +20,8 @@ const LoginPage: React.FC = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const formRef = useRef(null); + const navigate = useNavigate(); + const setEntPage = useSetRecoilState(entPageAtom); @@ -29,6 +32,7 @@ const LoginPage: React.FC = () => { await api.login(username, password); if (!await api.isAuthenticationNeeded()) { setEntPage(Page.Traffic); + navigate("/"); } else { toast.error("Invalid credentials"); } diff --git a/ui/src/helpers/AuthenticatedRoute.tsx b/ui/src/helpers/AuthenticatedRoute.tsx new file mode 100644 index 000000000..7dd02c5a5 --- /dev/null +++ b/ui/src/helpers/AuthenticatedRoute.tsx @@ -0,0 +1,40 @@ +import React, { ReactNode, useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import LoadingOverlay from "../components/LoadingOverlay"; +import Api from "./api"; +import { RouterRoutes } from "./routes"; + +const api = Api.getInstance(); + +export const AuthenticatedRoute: React.FC = ({children}) => { + + const navigate = useNavigate(); + const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + (async () => { + setIsLoading(true); + try { + const isInstallNeeded = await api.isInstallNeeded(); + if (isInstallNeeded) { + navigate(RouterRoutes.SETUP); + } else { + const isAuthNeeded = await api.isAuthenticationNeeded(); + if(isAuthNeeded) { + navigate(RouterRoutes.LOGIN); + } + } + } catch (e) { + console.error(e); + } finally { + setIsLoading(false); + } + })(); + }, []) + + if (isLoading) { + return ; + } + + return <>{children}; +} diff --git a/ui/src/helpers/api.js b/ui/src/helpers/api.js index b38786cbf..65a8709d8 100644 --- a/ui/src/helpers/api.js +++ b/ui/src/helpers/api.js @@ -219,7 +219,7 @@ export default class Api { isAuthenticationNeeded = async () => { try { - await this.client.get("/status/tap"); + await this.client.get("/user/whoAmI"); return false; } catch (e) { if (e.response.status === 401) {