routing fix

ui/src/components/AppSwitchRoutes.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useEffect, useState} from "react";
-import {Route, Routes, useNavigate} from "react-router-dom";
+import {Route, Routes, useLocation, useNavigate, useParams, useSearchParams} from "react-router-dom";
 import {RouterRoutes} from "../helpers/routes";
 import {useRecoilState} from "recoil";
 import entPageAtom, {Page} from "../recoil/entPage";
@@ -22,6 +22,10 @@ const AppSwitchRoutes = () => {
     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 {
@@ -30,9 +34,11 @@ const AppSwitchRoutes = () => {
                 setEntPage(Page.Setup);
             } else {
                 const isAuthNeeded = await api.isAuthenticationNeeded();
-                if(isAuthNeeded) {
-                    setEntPage(Page.Login);
+                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");
@@ -47,6 +53,10 @@ const AppSwitchRoutes = () => {
     }, [determinePage]);
 
     useEffect(() => {
+        if(!location.pathname || location.pathname !== '/') {
+            return;
+        }
+        
         switch (entPage) {
             case Page.Traffic:
                 navigate("/");
@@ -60,8 +70,8 @@ const AppSwitchRoutes = () => {
             default:
                 navigate(RouterRoutes.LOGIN);
         }
-        // eslint-disable-next-line
-    },[entPage])
+       // eslint-disable-next-line
+    },[entPage, location])
 
 
     if (isLoading) {
@@ -71,11 +81,12 @@ const AppSwitchRoutes = () => {
     return <Routes>
         <Route path={"/"} element={<SystemViewer isFirstLogin={isFirstLogin} setIsFirstLogin={setIsFirstLogin}/>}>
             <Route path={RouterRoutes.SETTINGS} element={<SettingsPage/>} /> {/*todo: set settings component*/}
-            <Route path={"/"} element={<TrafficPage/>} />
+            <Route path={"/"} element={<TrafficPage/>}/>
             
         </Route>
+        <Route path={RouterRoutes.SETUP+ "/:inviteToken"} element={<AuthPageBase><InstallPage onFirstLogin={() => setIsFirstLogin(true)}/></AuthPageBase>}/>
         <Route path={RouterRoutes.LOGIN} element={<AuthPageBase><LoginPage/></AuthPageBase>}/>
-        <Route path={RouterRoutes.SETUP} element={<AuthPageBase><InstallPage onFirstLogin={() => setIsFirstLogin(true)}/></AuthPageBase>}/>
+        
     </Routes>
 }
 

ui/src/components/Pages/AuthPage/InstallPage.tsx

@@ -9,6 +9,8 @@ import {useSetRecoilState} from "recoil";
 import entPageAtom, {Page} from "../../../recoil/entPage";
 import useKeyPress from "../../../hooks/useKeyPress"
 import shortcutsKeyboard from "../../../configs/shortcutsKeyboard"
+import { useNavigate, useParams } from "react-router-dom";
+
 
 
 const api = Api.getInstance();
@@ -24,7 +26,10 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
     const [isLoading, setIsLoading] = useState(false);
     const [password, setPassword] = useState("");
     const [passwordConfirm, setPasswordConfirm] = useState("");
-
+    const {inviteToken} = useParams()
+    const navigate = useNavigate();
+    
+    console.log("inviteToken : ",inviteToken)
     const setEntPage = useSetRecoilState(entPageAtom);
 
     const onFormSubmit = async () => {
@@ -36,10 +41,22 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
             return;
         }
 
+        if(inviteToken){
+            registerUser(async ()=> await api.recoverUser({password: password, inviteToken: inviteToken}))
+        }
+        else{
+            registerUser(async () => await api.setupAdminUser(adminUsername, password))
+        }
+    }
+
+    const registerUser = async(registerFunc) => {
         try {
-            setIsLoading(true);
-            await api.setupAdminUser(adminUsername, password);
+    
+            setIsLoading(true);           
+            await registerFunc();
+            setEntPage(Page.Traffic);
             if (!await api.isAuthenticationNeeded()) {
+                navigate('/');
                 setEntPage(Page.Traffic);
                 onFirstLogin();
             }
@@ -55,7 +72,6 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
         } finally {
             setIsLoading(false);
         }
-
     }
 
     useKeyPress(shortcutsKeyboard.enter, onFormSubmit, formRef.current);
@@ -63,11 +79,12 @@ export const InstallPage: React.FC<InstallPageProps> = ({onFirstLogin}) => {
     return <div className="centeredForm" ref={formRef}>
             {isLoading && <LoadingOverlay/>}
             <div className="form-title left-text">Setup</div>
-            <span className="form-subtitle">Welcome to Mizu, please set up the admin user to continue</span>
-            <div className="form-input">
+            {inviteToken && <span className="form-subtitle">you have been invited to join Mizu, please set password in order to complete the registration process</span>}
+            {!inviteToken && <span className="form-subtitle">Welcome to Mizu, please set up the admin user to continue</span>}
+            {!inviteToken && <div className="form-input">
                 <label htmlFor="inputUsername">Username</label>
                 <input id="inputUsername" className={classes.textField} value={adminUsername} disabled={true} />
-            </div>
+            </div>}
             <div className="form-input">
                 <label htmlFor="inputUsername">Password</label>
                 <input id="inputUsername" className={classes.textField} value={password} type="password" onChange={(event) => setPassword(event.target.value)}/>