steffo/sophon
steffo/sophon
1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-22 14:54:22 +00:00
Code Activity

🔧 Remove the messagePanel from the LoginBox

Browse source
This commit is contained in:
Steffo 2021-10-06 18:23:40 +02:00
parent 11bdd9fa3f
commit 82eb27bf1c
1 changed files with 8 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/components/authorization/AuthorizationLoginBox.tsx
View file

@ -1,4 +1,4 @@
import {faInfoCircle} from "@fortawesome/free-solid-svg-icons" import {faExclamationCircle} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome" import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {navigate} from "@reach/router" import {navigate} from "@reach/router"
import {Box, Form, Heading, useFormState} from "@steffo/bluelib-react" import {Box, Form, Heading, useFormState} from "@steffo/bluelib-react"
@ -6,7 +6,6 @@ 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 {Loading} from "../elements/Loading" import {Loading} from "../elements/Loading"
import {ErrorBox} from "../errors/ErrorBox"
import {useInstanceAxios} from "../instance/useInstanceAxios" import {useInstanceAxios} from "../instance/useInstanceAxios"
@ -71,21 +70,16 @@ export function AuthorizationLoginBox(): JSX.Element {
[axios, authorization, username, password], [axios, authorization, username, password],
) )
const messagePanel = const buttonText =
React.useMemo<JSX.Element | null>( React.useMemo<JSX.Element | null>(
() => { () => {
if(!authorization) { if(authorization?.state.running) {
return <ErrorBox error={new Error("This component is being rendered outside an AuthorizationContext.")}/> return <Loading text={"Logging in..."}/>
} }
if(error) { if(error) {
return <ErrorBox error={error}/> return <><FontAwesomeIcon icon={faExclamationCircle}/>&nbsp;Login</>
} }
if(authorization.state.running) { return <>Login</>
return <Box bluelibClassNames={"color-yellow"}><Loading text={"Logging in..."}/></Box>
}
return (
<Box><FontAwesomeIcon icon={faInfoCircle}/> Press the login button after inserting your credentials.</Box>
)
}, },
[error, authorization], [error, authorization],
) )
@ -102,14 +96,11 @@ 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.Row>
{messagePanel}
</Form.Row>
<Form.Field label={"Username"} required {...username}/> <Form.Field label={"Username"} required {...username}/>
<Form.Field label={"Password"} type={"password"} required {...password}/> <Form.Field label={"Password"} type={"password"} required {...password}/>
<Form.Row> <Form.Row>
<Form.Button type={"submit"} disabled={!canClickLogin} onClick={doLogin}> <Form.Button type={"submit"} bluelibClassNames={error ? "color-red" : ""} disabled={!canClickLogin} onClick={doLogin}>
Login {buttonText}
</Form.Button> </Form.Button>
</Form.Row> </Form.Row>
</Form> </Form>