1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-22 23:04:21 +00:00

🔧 Improve login flow

This commit is contained in:
Steffo 2021-10-13 05:14:50 +02:00
parent 58b92a8f8f
commit 4d7877feee
Signed by: steffo
GPG key ID: 6965406171929D01
4 changed files with 37 additions and 19 deletions

View file

@ -4,6 +4,7 @@ import {Box, Form, Heading, useFormState} from "@steffo/bluelib-react"
import * as React from "react" import * as React from "react"
import {useAuthorizationContext} from "../../contexts/authorization" import {useAuthorizationContext} from "../../contexts/authorization"
import {SophonToken, SophonUser} from "../../types/SophonTypes" import {SophonToken, SophonUser} from "../../types/SophonTypes"
import {Validators} from "../../utils/Validators"
import {Loading} from "../elements/Loading" import {Loading} from "../elements/Loading"
import {useInstanceAxios} from "../instance/useInstanceAxios" import {useInstanceAxios} from "../instance/useInstanceAxios"
@ -14,8 +15,8 @@ export function AuthorizationLoginBox(): JSX.Element {
const [error, setError] = React.useState<Error | undefined>(undefined) const [error, setError] = React.useState<Error | undefined>(undefined)
const username = useFormState<string>("", () => undefined) const username = useFormState<string>("", Validators.doNotValidate)
const password = useFormState<string>("", () => undefined) const password = useFormState<string>("", Validators.doNotValidate)
const canLogin = const canLogin =
React.useMemo<boolean>( 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. If you do not have one, you can ask your system administrator to create one for you.
</p> </p>
<Form> <Form>
<Form.Field label={"Username"} required disabled={!canLogin} {...username}/> <Form.Field
<Form.Field label={"Password"} type={"password"} required disabled={!canLogin} {...password}/> label={"Username"}
placeholder={"enfer"}
required={true}
disabled={!canLogin}
{...username}
/>
<Form.Field
label={"Password"}
type={"password"}
placeholder={"••••••••••"}
required={true}
disabled={!canLogin}
{...password}
/>
<Form.Row> <Form.Row>
<Form.Button type={"submit"} bluelibClassNames={buttonColor} disabled={!canClickLogin} onClick={doLogin}> <Form.Button type={"submit"} bluelibClassNames={buttonColor} disabled={!canClickLogin} onClick={doLogin}>
{buttonText} {buttonText}

View file

@ -61,20 +61,24 @@ export function AuthorizationLogoutBox(): JSX.Element {
<Heading level={3}> <Heading level={3}>
Logout Logout
</Heading> </Heading>
<p>
To use a different account with Sophon, you'll need to logout from your current one first.
</p>
<p> <p>
You are currently logged in as {loggedUsername}. You are currently logged in as {loggedUsername}.
</p> </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>
<Form.Row> <Form.Row>
<Form.Button disabled={!canLogout} onClick={doLogout}> <Form.Button disabled={!canLogout} onClick={doLogout}>
Logout Logout
</Form.Button> </Form.Button>
<Form.Button onClick={() => navigate("l/")}>
Continue to Sophon
</Form.Button>
</Form.Row> </Form.Row>
</Form> </Form>
</Box> </Box>

View file

@ -7,10 +7,10 @@ import {AuthorizationLoginBox} from "./AuthorizationLoginBox"
import {AuthorizationLogoutBox} from "./AuthorizationLogoutBox" import {AuthorizationLogoutBox} from "./AuthorizationLogoutBox"
export function AuthorizationStepPage(): JSX.Element { export function AuthorizationStepPage(): JSX.Element | null {
const authorization = useAuthorizationContext() const authorization = useAuthorizationContext()
const loginChapter = React.useMemo( return React.useMemo(
() => { () => {
if(!authorization) { if(!authorization) {
return null return null
@ -20,6 +20,7 @@ export function AuthorizationStepPage(): JSX.Element {
<Chapter> <Chapter>
<AuthorizationLogoutBox/> <AuthorizationLogoutBox/>
<AuthorizationLoginBox/> <AuthorizationLoginBox/>
<AuthorizationAdminBox/>
</Chapter> </Chapter>
) )
} }
@ -28,6 +29,7 @@ export function AuthorizationStepPage(): JSX.Element {
<Chapter> <Chapter>
<AuthorizationBrowseBox/> <AuthorizationBrowseBox/>
<AuthorizationLogoutBox/> <AuthorizationLogoutBox/>
<AuthorizationAdminBox/>
</Chapter> </Chapter>
) )
} }
@ -35,16 +37,10 @@ export function AuthorizationStepPage(): JSX.Element {
<Chapter> <Chapter>
<AuthorizationBrowseBox/> <AuthorizationBrowseBox/>
<AuthorizationLoginBox/> <AuthorizationLoginBox/>
<AuthorizationAdminBox/>
</Chapter> </Chapter>
) )
}, },
[authorization], [authorization],
) )
return <>
{loginChapter}
<Chapter>
<AuthorizationAdminBox/>
</Chapter>
</>
} }

View file

@ -2,6 +2,10 @@ import {Validity} from "@steffo/bluelib-react/dist/types"
export class Validators { export class Validators {
static doNotValidate<T>(val: T): Validity {
return undefined
}
static alwaysValid<T>(val: T): Validity { static alwaysValid<T>(val: T): Validity {
return true return true
} }