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

🐛 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 8ebb649ebe
commit 2b6df6a208
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>