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

🔧 Change login flow

Browse source
This commit is contained in:
Steffo 2021-10-07 20:38:57 +02:00
parent b2bfb61ae5
commit a9ad27804b
4 changed files with 39 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/components/authorization/AuthorizationBrowseBox.tsx
View file

@ -1,15 +1,12 @@
import {faLock, faUniversity} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {navigate} from "@reach/router"
import {Box, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react"
import * as React from "react"
import {useAuthorizationContext} from "../../contexts/authorization"
import {useSophonPath} from "../../hooks/useSophonPath"
export function AuthorizationBrowseBox(): JSX.Element {
const authorization = useAuthorizationContext()
const path = useSophonPath()
const canBrowse =
React.useMemo(
@ -29,12 +26,8 @@ export function AuthorizationBrowseBox(): JSX.Element {
authorization.dispatch({
type: "browse",
})
if(!path.loggedIn) {
await navigate("l/")
}
},
[authorization, path]
[authorization],
)
return (

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

@ -1,6 +1,5 @@
import {faExclamationCircle} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {navigate} from "@reach/router"
import {Box, Form, Heading, useFormState} from "@steffo/bluelib-react"
import * as React from "react"
import {useAuthorizationContext} from "../../contexts/authorization"
@ -64,8 +63,6 @@ export function AuthorizationLoginBox(): JSX.Element {
})
return
}
await navigate("l/")
},
[axios, authorization, username, password],
)
@ -113,8 +110,8 @@ 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={authorization?.state.running} {...username}/>
<Form.Field label={"Password"} type={"password"} required disabled={authorization?.state.running} {...password}/>
<Form.Field label={"Username"} required disabled={!canLogin} {...username}/>
<Form.Field label={"Password"} type={"password"} required disabled={!canLogin} {...password}/>
<Form.Row>
<Form.Button type={"submit"} bluelibClassNames={buttonColor} disabled={!canClickLogin} onClick={doLogin}>
{buttonText}

4
frontend/src/components/authorization/AuthorizationLogoutBox.tsx
View file

@ -1,6 +1,7 @@
import {faUser as faUserRegular} from "@fortawesome/free-regular-svg-icons"
import {faExclamationCircle, faTimesCircle, faUser as faUserSolid} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {navigate} from "@reach/router"
import {Box, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react"
import * as React from "react"
import {useAuthorizationContext} from "../../contexts/authorization"
@ -68,6 +69,9 @@ export function AuthorizationLogoutBox(): JSX.Element {
</p>
<Form>
<Form.Row>
<Form.Button onClick={() => navigate("l/")} bluelibClassNames={"color-lime"}>
Continue to Sophon
</Form.Button>
<Form.Button disabled={!canLogout} onClick={doLogout}>
Logout
</Form.Button>

43
frontend/src/components/authorization/AuthorizationStepPage.tsx
View file

@ -11,19 +11,40 @@ import {AuthorizationLogoutBox} from "./AuthorizationLogoutBox"
export function AuthorizationStepPage(): JSX.Element {
const authorization = useAuthorizationContext()
const loginChapter = React.useMemo(
() => {
if(!authorization) {
return null
}
if(authorization.state.token === null) {
return (
<Chapter>
<AuthorizationLogoutBox/>
<AuthorizationLoginBox/>
</Chapter>
)
}
if(authorization.state.token !== undefined) {
return (
<Chapter>
<AuthorizationBrowseBox/>
<AuthorizationLogoutBox/>
</Chapter>
)
}
return (
<Chapter>
<AuthorizationBrowseBox/>
<AuthorizationLoginBox/>
</Chapter>
)
},
[authorization],
)
return <>
<InstanceDescriptionBox/>
{
authorization?.state.token === undefined ?
<Chapter>
<AuthorizationBrowseBox/>
<AuthorizationLoginBox/>
</Chapter>
:
<Chapter>
<AuthorizationLogoutBox/>
</Chapter>
}
{loginChapter}
<Chapter>
<AuthorizationAdminBox/>
</Chapter>