From a9ad27804b896b9f35ccb6179232e8ffbe797aa2 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 7 Oct 2021 20:38:57 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Change=20login=20flow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../authorization/AuthorizationBrowseBox.tsx  |  9 +---
 .../authorization/AuthorizationLoginBox.tsx   |  7 +--
 .../authorization/AuthorizationLogoutBox.tsx  |  4 ++
 .../authorization/AuthorizationStepPage.tsx   | 43 ++++++++++++++-----
 4 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/authorization/AuthorizationBrowseBox.tsx b/frontend/src/components/authorization/AuthorizationBrowseBox.tsx
index b7f426d..fcf798d 100644
--- a/frontend/src/components/authorization/AuthorizationBrowseBox.tsx
+++ b/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 (
diff --git a/frontend/src/components/authorization/AuthorizationLoginBox.tsx b/frontend/src/components/authorization/AuthorizationLoginBox.tsx
index 69083fb..f972095 100644
--- a/frontend/src/components/authorization/AuthorizationLoginBox.tsx
+++ b/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={"Password"} type={"password"} required disabled={authorization?.state.running} {...password}/>
+                <Form.Field label={"Username"} required disabled={!canLogin} {...username}/>
+                <Form.Field label={"Password"} type={"password"} required disabled={!canLogin} {...password}/>
                 <Form.Row>
                     <Form.Button type={"submit"} bluelibClassNames={buttonColor} disabled={!canClickLogin} onClick={doLogin}>
                         {buttonText}
diff --git a/frontend/src/components/authorization/AuthorizationLogoutBox.tsx b/frontend/src/components/authorization/AuthorizationLogoutBox.tsx
index bc44458..f1f3a50 100644
--- a/frontend/src/components/authorization/AuthorizationLogoutBox.tsx
+++ b/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>
diff --git a/frontend/src/components/authorization/AuthorizationStepPage.tsx b/frontend/src/components/authorization/AuthorizationStepPage.tsx
index 4c1ffe3..aa3ada5 100644
--- a/frontend/src/components/authorization/AuthorizationStepPage.tsx
+++ b/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/>
-        {
-            authorization?.state.token === undefined ?
-            <Chapter>
-                <AuthorizationBrowseBox/>
-                <AuthorizationLoginBox/>
-            </Chapter>
-                                                     :
-            <Chapter>
-                <AuthorizationLogoutBox/>
-            </Chapter>
-        }
+        {loginChapter}
         <Chapter>
             <AuthorizationAdminBox/>
         </Chapter>