🔧 Improve login flow

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}

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>

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>
-    </>
 }

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
     }