From 4d7877feeee74e4df6491d5e5b1e2dadd69c6062 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 13 Oct 2021 05:14:50 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Improve=20login=20flow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../authorization/AuthorizationLoginBox.tsx   | 22 +++++++++++++++----
 .../authorization/AuthorizationLogoutBox.tsx  | 16 +++++++++-----
 .../authorization/AuthorizationStepPage.tsx   | 14 +++++-------
 frontend/src/utils/Validators.ts              |  4 ++++
 4 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/authorization/AuthorizationLoginBox.tsx b/frontend/src/components/authorization/AuthorizationLoginBox.tsx
index f972095..e7ffd59 100644
--- a/frontend/src/components/authorization/AuthorizationLoginBox.tsx
+++ b/frontend/src/components/authorization/AuthorizationLoginBox.tsx
@@ -4,6 +4,7 @@ import {Box, Form, Heading, useFormState} from "@steffo/bluelib-react"
 import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
 import {SophonToken, SophonUser} from "../../types/SophonTypes"
+import {Validators} from "../../utils/Validators"
 import {Loading} from "../elements/Loading"
 import {useInstanceAxios} from "../instance/useInstanceAxios"
 
@@ -14,8 +15,8 @@ export function AuthorizationLoginBox(): JSX.Element {
 
     const [error, setError] = React.useState<Error | undefined>(undefined)
 
-    const username = useFormState<string>("", () => undefined)
-    const password = useFormState<string>("", () => undefined)
+    const username = useFormState<string>("", Validators.doNotValidate)
+    const password = useFormState<string>("", Validators.doNotValidate)
 
     const canLogin =
         React.useMemo<boolean>(
@@ -110,8 +111,21 @@ 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={!canLogin} {...username}/>
-                <Form.Field label={"Password"} type={"password"} required disabled={!canLogin} {...password}/>
+                <Form.Field
+                    label={"Username"}
+                    placeholder={"enfer"}
+                    required={true}
+                    disabled={!canLogin}
+                    {...username}
+                />
+                <Form.Field
+                    label={"Password"}
+                    type={"password"}
+                    placeholder={"••••••••••"}
+                    required={true}
+                    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 0bfdd98..448df34 100644
--- a/frontend/src/components/authorization/AuthorizationLogoutBox.tsx
+++ b/frontend/src/components/authorization/AuthorizationLogoutBox.tsx
@@ -61,20 +61,24 @@ export function AuthorizationLogoutBox(): JSX.Element {
             <Heading level={3}>
                 Logout
             </Heading>
-            <p>
-                To use a different account with Sophon, you'll need to logout from your current one first.
-            </p>
             <p>
                 You are currently logged in as {loggedUsername}.
             </p>
+            <Form>
+                <Form.Row>
+                    <Form.Button onClick={() => navigate("l/")}>
+                        Continue to Sophon
+                    </Form.Button>
+                </Form.Row>
+            </Form>
+            <p>
+                To use a different account with Sophon, you'll need to logout from your current one first.
+            </p>
             <Form>
                 <Form.Row>
                     <Form.Button disabled={!canLogout} onClick={doLogout}>
                         Logout
                     </Form.Button>
-                    <Form.Button onClick={() => navigate("l/")}>
-                        Continue to Sophon
-                    </Form.Button>
                 </Form.Row>
             </Form>
         </Box>
diff --git a/frontend/src/components/authorization/AuthorizationStepPage.tsx b/frontend/src/components/authorization/AuthorizationStepPage.tsx
index 29570b0..6075b62 100644
--- a/frontend/src/components/authorization/AuthorizationStepPage.tsx
+++ b/frontend/src/components/authorization/AuthorizationStepPage.tsx
@@ -7,10 +7,10 @@ import {AuthorizationLoginBox} from "./AuthorizationLoginBox"
 import {AuthorizationLogoutBox} from "./AuthorizationLogoutBox"
 
 
-export function AuthorizationStepPage(): JSX.Element {
+export function AuthorizationStepPage(): JSX.Element | null {
     const authorization = useAuthorizationContext()
 
-    const loginChapter = React.useMemo(
+    return React.useMemo(
         () => {
             if(!authorization) {
                 return null
@@ -20,6 +20,7 @@ export function AuthorizationStepPage(): JSX.Element {
                     <Chapter>
                         <AuthorizationLogoutBox/>
                         <AuthorizationLoginBox/>
+                        <AuthorizationAdminBox/>
                     </Chapter>
                 )
             }
@@ -28,6 +29,7 @@ export function AuthorizationStepPage(): JSX.Element {
                     <Chapter>
                         <AuthorizationBrowseBox/>
                         <AuthorizationLogoutBox/>
+                        <AuthorizationAdminBox/>
                     </Chapter>
                 )
             }
@@ -35,16 +37,10 @@ export function AuthorizationStepPage(): JSX.Element {
                 <Chapter>
                     <AuthorizationBrowseBox/>
                     <AuthorizationLoginBox/>
+                    <AuthorizationAdminBox/>
                 </Chapter>
             )
         },
         [authorization],
     )
-
-    return <>
-        {loginChapter}
-        <Chapter>
-            <AuthorizationAdminBox/>
-        </Chapter>
-    </>
 }
diff --git a/frontend/src/utils/Validators.ts b/frontend/src/utils/Validators.ts
index 63503fe..866d828 100644
--- a/frontend/src/utils/Validators.ts
+++ b/frontend/src/utils/Validators.ts
@@ -2,6 +2,10 @@ import {Validity} from "@steffo/bluelib-react/dist/types"
 
 
 export class Validators {
+    static doNotValidate<T>(val: T): Validity {
+        return undefined
+    }
+
     static alwaysValid<T>(val: T): Validity {
         return true
     }