🔧 Change login flow

frontend/src/components/authorization/AuthorizationBrowseBox.tsx

@@ -1,15 +1,12 @@
 import {faLock, faUniversity} from "@fortawesome/free-solid-svg-icons"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import {navigate} from "@reach/router"
 import {Box, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react"
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
-import {useSophonPath} from "../../hooks/useSophonPath"
 
 
 export function AuthorizationBrowseBox(): JSX.Element {
     const authorization = useAuthorizationContext()
-    const path = useSophonPath()
 
     const canBrowse =
         React.useMemo(
@@ -29,12 +26,8 @@ export function AuthorizationBrowseBox(): JSX.Element {
                 authorization.dispatch({
                     type: "browse",
                 })
-
-                if(!path.loggedIn) {
-                    await navigate("l/")
-                }
             },
-            [authorization, path]
+            [authorization],
         )
 
     return (

frontend/src/components/authorization/AuthorizationLoginBox.tsx

@@ -1,6 +1,5 @@
 import {faExclamationCircle} from "@fortawesome/free-solid-svg-icons"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
-import {navigate} from "@reach/router"
 import {Box, Form, Heading, useFormState} from "@steffo/bluelib-react"
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
@@ -64,8 +63,6 @@ export function AuthorizationLoginBox(): JSX.Element {
                     })
                     return
                 }
-
-                await navigate("l/")
             },
             [axios, authorization, username, password],
         )
@@ -113,8 +110,8 @@ export function AuthorizationLoginBox(): JSX.Element {
                 If you do not have one, you can ask your system administrator to create one for you.
             </p>
             <Form>
-                <Form.Field label={"Username"} required disabled={authorization?.state.running} {...username}/>
+                <Form.Field label={"Username"} required disabled={!canLogin} {...username}/>
-                <Form.Field label={"Password"} type={"password"} required disabled={authorization?.state.running} {...password}/>
+                <Form.Field label={"Password"} type={"password"} required disabled={!canLogin} {...password}/>
                 <Form.Row>
                     <Form.Button type={"submit"} bluelibClassNames={buttonColor} disabled={!canClickLogin} onClick={doLogin}>
                         {buttonText}

frontend/src/components/authorization/AuthorizationLogoutBox.tsx

@@ -1,6 +1,7 @@
 import {faUser as faUserRegular} from "@fortawesome/free-regular-svg-icons"
 import {faExclamationCircle, faTimesCircle, faUser as faUserSolid} from "@fortawesome/free-solid-svg-icons"
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {navigate} from "@reach/router"
 import {Box, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react"
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
@@ -68,6 +69,9 @@ export function AuthorizationLogoutBox(): JSX.Element {
             </p>
             <Form>
                 <Form.Row>
+                    <Form.Button onClick={() => navigate("l/")} bluelibClassNames={"color-lime"}>
+                        Continue to Sophon
+                    </Form.Button>
                     <Form.Button disabled={!canLogout} onClick={doLogout}>
                         Logout
                     </Form.Button>

frontend/src/components/authorization/AuthorizationStepPage.tsx

@@ -11,19 +11,40 @@ import {AuthorizationLogoutBox} from "./AuthorizationLogoutBox"
 export function AuthorizationStepPage(): JSX.Element {
     const authorization = useAuthorizationContext()
 
+    const loginChapter = React.useMemo(
+        () => {
+            if(!authorization) {
+                return null
+            }
+            if(authorization.state.token === null) {
+                return (
+                    <Chapter>
+                        <AuthorizationLogoutBox/>
+                        <AuthorizationLoginBox/>
+                    </Chapter>
+                )
+            }
+            if(authorization.state.token !== undefined) {
+                return (
+                    <Chapter>
+                        <AuthorizationBrowseBox/>
+                        <AuthorizationLogoutBox/>
+                    </Chapter>
+                )
+            }
+            return (
+                <Chapter>
+                    <AuthorizationBrowseBox/>
+                    <AuthorizationLoginBox/>
+                </Chapter>
+            )
+        },
+        [authorization],
+    )
+
     return <>
         <InstanceDescriptionBox/>
-        {
+        {loginChapter}
-            authorization?.state.token === undefined ?
-            <Chapter>
-                <AuthorizationBrowseBox/>
-                <AuthorizationLoginBox/>
-            </Chapter>
-                                                     :
-            <Chapter>
-                <AuthorizationLogoutBox/>
-            </Chapter>
-        }
         <Chapter>
             <AuthorizationAdminBox/>
         </Chapter>