mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-22 23:04:21 +00:00
🔧 Change login flow
This commit is contained in:
parent
3d42add8d8
commit
1bb09cc0e5
4 changed files with 39 additions and 24 deletions
|
@ -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 (
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue