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
b2bfb61ae5
commit
a9ad27804b
4 changed files with 39 additions and 24 deletions
|
@ -1,15 +1,12 @@
|
||||||
import {faLock, faUniversity} from "@fortawesome/free-solid-svg-icons"
|
import {faLock, faUniversity} from "@fortawesome/free-solid-svg-icons"
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||||
import {navigate} from "@reach/router"
|
|
||||||
import {Box, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react"
|
import {Box, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react"
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import {useAuthorizationContext} from "../../contexts/authorization"
|
import {useAuthorizationContext} from "../../contexts/authorization"
|
||||||
import {useSophonPath} from "../../hooks/useSophonPath"
|
|
||||||
|
|
||||||
|
|
||||||
export function AuthorizationBrowseBox(): JSX.Element {
|
export function AuthorizationBrowseBox(): JSX.Element {
|
||||||
const authorization = useAuthorizationContext()
|
const authorization = useAuthorizationContext()
|
||||||
const path = useSophonPath()
|
|
||||||
|
|
||||||
const canBrowse =
|
const canBrowse =
|
||||||
React.useMemo(
|
React.useMemo(
|
||||||
|
@ -29,12 +26,8 @@ export function AuthorizationBrowseBox(): JSX.Element {
|
||||||
authorization.dispatch({
|
authorization.dispatch({
|
||||||
type: "browse",
|
type: "browse",
|
||||||
})
|
})
|
||||||
|
|
||||||
if(!path.loggedIn) {
|
|
||||||
await navigate("l/")
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
[authorization, path]
|
[authorization],
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import {faExclamationCircle} 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 {Box, Form, Heading, useFormState} from "@steffo/bluelib-react"
|
import {Box, Form, Heading, useFormState} from "@steffo/bluelib-react"
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import {useAuthorizationContext} from "../../contexts/authorization"
|
import {useAuthorizationContext} from "../../contexts/authorization"
|
||||||
|
@ -64,8 +63,6 @@ export function AuthorizationLoginBox(): JSX.Element {
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
await navigate("l/")
|
|
||||||
},
|
},
|
||||||
[axios, authorization, username, password],
|
[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.
|
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 disabled={authorization?.state.running} {...username}/>
|
<Form.Field label={"Username"} required disabled={!canLogin} {...username}/>
|
||||||
<Form.Field label={"Password"} type={"password"} required disabled={authorization?.state.running} {...password}/>
|
<Form.Field label={"Password"} type={"password"} required disabled={!canLogin} {...password}/>
|
||||||
<Form.Row>
|
<Form.Row>
|
||||||
<Form.Button type={"submit"} bluelibClassNames={buttonColor} disabled={!canClickLogin} onClick={doLogin}>
|
<Form.Button type={"submit"} bluelibClassNames={buttonColor} disabled={!canClickLogin} onClick={doLogin}>
|
||||||
{buttonText}
|
{buttonText}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import {faUser as faUserRegular} from "@fortawesome/free-regular-svg-icons"
|
import {faUser as faUserRegular} from "@fortawesome/free-regular-svg-icons"
|
||||||
import {faExclamationCircle, faTimesCircle, faUser as faUserSolid} from "@fortawesome/free-solid-svg-icons"
|
import {faExclamationCircle, faTimesCircle, faUser as faUserSolid} from "@fortawesome/free-solid-svg-icons"
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
||||||
|
import {navigate} from "@reach/router"
|
||||||
import {Box, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react"
|
import {Box, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react"
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import {useAuthorizationContext} from "../../contexts/authorization"
|
import {useAuthorizationContext} from "../../contexts/authorization"
|
||||||
|
@ -68,6 +69,9 @@ export function AuthorizationLogoutBox(): JSX.Element {
|
||||||
</p>
|
</p>
|
||||||
<Form>
|
<Form>
|
||||||
<Form.Row>
|
<Form.Row>
|
||||||
|
<Form.Button onClick={() => navigate("l/")} bluelibClassNames={"color-lime"}>
|
||||||
|
Continue to Sophon
|
||||||
|
</Form.Button>
|
||||||
<Form.Button disabled={!canLogout} onClick={doLogout}>
|
<Form.Button disabled={!canLogout} onClick={doLogout}>
|
||||||
Logout
|
Logout
|
||||||
</Form.Button>
|
</Form.Button>
|
||||||
|
|
|
@ -11,19 +11,40 @@ import {AuthorizationLogoutBox} from "./AuthorizationLogoutBox"
|
||||||
export function AuthorizationStepPage(): JSX.Element {
|
export function AuthorizationStepPage(): JSX.Element {
|
||||||
const authorization = useAuthorizationContext()
|
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 <>
|
return <>
|
||||||
<InstanceDescriptionBox/>
|
<InstanceDescriptionBox/>
|
||||||
{
|
{loginChapter}
|
||||||
authorization?.state.token === undefined ?
|
|
||||||
<Chapter>
|
|
||||||
<AuthorizationBrowseBox/>
|
|
||||||
<AuthorizationLoginBox/>
|
|
||||||
</Chapter>
|
|
||||||
:
|
|
||||||
<Chapter>
|
|
||||||
<AuthorizationLogoutBox/>
|
|
||||||
</Chapter>
|
|
||||||
}
|
|
||||||
<Chapter>
|
<Chapter>
|
||||||
<AuthorizationAdminBox/>
|
<AuthorizationAdminBox/>
|
||||||
</Chapter>
|
</Chapter>
|
||||||
|
|
Loading…
Reference in a new issue