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

🐛 Fix highlighting of the LoginBox while logging in

Browse source
This commit is contained in:
Steffo 2021-10-07 01:56:17 +02:00
parent 3225144010
commit 91cb8fa456
Signed by: steffo
GPG key ID: 6965406171929D01
1 changed files with 23 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,7 +21,7 @@ export function AuthorizationLoginBox(): JSX.Element {
const canLogin = const canLogin =
React.useMemo<boolean>( React.useMemo<boolean>(
() => ( () => (
axios !== undefined && authorization !== undefined && !authorization.state.running && authorization.state.token === undefined axios !== undefined && authorization !== undefined && authorization.state.token === undefined
), ),
[axios, authorization, username, password], [axios, authorization, username, password],
) )
@ -29,9 +29,9 @@ export function AuthorizationLoginBox(): JSX.Element {
const canClickLogin = const canClickLogin =
React.useMemo<boolean>( React.useMemo<boolean>(
() => ( () => (
canLogin && username.value !== "" && password.value !== "" canLogin && !authorization!.state.running && username.value !== "" && password.value !== ""
), ),
[canLogin, username, password], [authorization, canLogin, username, password],
) )
const doLogin = const doLogin =
@ -70,6 +70,23 @@ export function AuthorizationLoginBox(): JSX.Element {
[axios, authorization, username, password], [axios, authorization, username, password],
) )
const buttonColor =
React.useMemo<string>(
() => {
if(!authorization) {
return ""
}
if(authorization.state.running) {
return "color-yellow"
}
if(error) {
return "color-red"
}
return ""
},
[authorization, error],
)
const buttonText = const buttonText =
React.useMemo<JSX.Element | null>( React.useMemo<JSX.Element | null>(
() => { () => {
@ -96,10 +113,10 @@ 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 {...username}/> <Form.Field label={"Username"} required disabled={authorization?.state.running} {...username}/>
<Form.Field label={"Password"} type={"password"} required {...password}/> <Form.Field label={"Password"} type={"password"} required disabled={authorization?.state.running} {...password}/>
<Form.Row> <Form.Row>
<Form.Button type={"submit"} bluelibClassNames={error ? "color-red" : ""} disabled={!canClickLogin} onClick={doLogin}> <Form.Button type={"submit"} bluelibClassNames={buttonColor} disabled={!canClickLogin} onClick={doLogin}>
{buttonText} {buttonText}
</Form.Button> </Form.Button>
</Form.Row> </Form.Row>