make login/register seperate paths

src/frontend/src/components/forms/AuthenticationForm.tsx

@@ -332,10 +332,10 @@ export function RegistrationForm() {
 
 export function ModeSelector({
   loginMode,
-  setMode
+  changePage
 }: Readonly<{
   loginMode: boolean;
-  setMode: any;
+  changePage: (state: string) => void;
 }>) {
   const [sso_registration, registration_enabled] = useServerApiState(
     (state) => [state.sso_registration_enabled, state.registration_enabled]
@@ -354,7 +354,7 @@ export function ModeSelector({
             type='button'
             c='dimmed'
             size='xs'
-            onClick={() => setMode.close()}
+            onClick={() => changePage('register')}
           >
             <Trans>Register</Trans>
           </Anchor>
@@ -365,7 +365,7 @@ export function ModeSelector({
           type='button'
           c='dimmed'
           size='xs'
-          onClick={() => setMode.open()}
+          onClick={() => changePage('login')}
         >
           <Trans>Go back to login</Trans>
         </Anchor>

src/frontend/src/pages/Auth/Login.tsx

@@ -39,6 +39,14 @@ export default function Login() {
   const location = useLocation();
   const [searchParams] = useSearchParams();
 
+  useEffect(() => {
+    if (location.pathname === '/register') {
+      setMode.close();
+    } else {
+      setMode.open();
+    }
+  }, [location]);
+
   // Data manipulation functions
   function ChangeHost(newHost: string | null): void {
     if (newHost === null) return;
@@ -95,7 +103,10 @@ export default function Login() {
                 )}
               </Text>
               {loginMode ? <AuthenticationForm /> : <RegistrationForm />}
-              <ModeSelector loginMode={loginMode} setMode={setMode} />
+              <ModeSelector
+                loginMode={loginMode}
+                changePage={(newPage) => navigate(`/${newPage}`)}
+              />
             </Paper>
             <AuthFormOptions hostname={hostname} toggleHostEdit={setHostEdit} />
           </>

src/frontend/src/router.tsx

@@ -171,6 +171,7 @@ export const routes = (
     </Route>
     <Route path='/' errorElement={<ErrorPage />}>
       <Route path='/login' element={<Login />} />,
+      <Route path='/register' element={<Login />} />,
       <Route path='/mfa' element={<MFALogin />} />,
       <Route path='/logout' element={<Logout />} />,
       <Route path='/logged-in' element={<Logged_In />} />