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

✨ Add a logout box

Browse source
This commit is contained in:
Steffo 2021-10-06 17:59:03 +02:00
parent f008487a07
commit 11bdd9fa3f
6 changed files with 119 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/package.json
View file

@ -4,6 +4,7 @@
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.15",
"@reach/router": "^1.3.4",

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

@ -14,7 +14,7 @@ export function AuthorizationBrowseBox(): JSX.Element {
const canBrowse =
React.useMemo(
() => (
authorization !== undefined && !authorization.state.running
authorization !== undefined && !authorization.state.running && authorization.state.token === undefined
),
[authorization],
)

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

@ -22,11 +22,19 @@ export function AuthorizationLoginBox(): JSX.Element {
const canLogin =
React.useMemo<boolean>(
() => (
axios !== undefined && authorization !== undefined && !authorization.state.running && username.value !== "" && password.value !== ""
axios !== undefined && authorization !== undefined && !authorization.state.running && authorization.state.token === undefined
),
[axios, authorization, username, password],
)
const canClickLogin =
React.useMemo<boolean>(
() => (
canLogin && username.value !== "" && password.value !== ""
),
[canLogin, username, password],
)
const doLogin =
React.useCallback(
async () => {
@ -83,7 +91,7 @@ export function AuthorizationLoginBox(): JSX.Element {
)
return (
<Box>
<Box disabled={!canLogin}>
<Heading level={3}>
Login
</Heading>
@ -100,7 +108,7 @@ export function AuthorizationLoginBox(): JSX.Element {
<Form.Field label={"Username"} required {...username}/>
<Form.Field label={"Password"} type={"password"} required {...password}/>
<Form.Row>
<Form.Button type={"submit"} disabled={!canLogin} onClick={doLogin}>
<Form.Button type={"submit"} disabled={!canClickLogin} onClick={doLogin}>
Login
</Form.Button>
</Form.Row>

83
frontend/src/components/authorization/AuthorizationLogoutBox.tsx Normal file
View file

@ -0,0 +1,83 @@
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 {Box, Form, Heading, Idiomatic as I} from "@steffo/bluelib-react"
import * as React from "react"
import {useAuthorizationContext} from "../../contexts/authorization"
export interface AuthorizationLogoutBoxProps {
}
export function AuthorizationLogoutBox({}: AuthorizationLogoutBoxProps): JSX.Element {
const authorization = useAuthorizationContext()
const loggedUsername = React.useMemo(
() => {
if(!authorization) {
return <I bluelibClassNames={"color-red"}>
<FontAwesomeIcon icon={faExclamationCircle}/> Not in a AuthorizationContext
</I>
}
else if(authorization.state.user === undefined) {
return <I bluelibClassNames={"color-red"}>
<FontAwesomeIcon icon={faTimesCircle}/> Not logged in
</I>
}
else if(authorization.state.user === null) {
return <I>
<FontAwesomeIcon icon={faUserRegular}/> a guest
</I>
}
else {
return <I>
<FontAwesomeIcon icon={faUserSolid}/> {authorization.state.user.username}
</I>
}
},
[authorization],
)
const canLogout = React.useMemo(
() => (
authorization !== undefined && authorization.state.user !== undefined && !authorization.state.running
),
[authorization],
)
const doLogout = React.useCallback(
() => {
if(!authorization) {
return
}
authorization.dispatch({
type: "clear",
})
},
[authorization],
)
return (
<Box disabled={!canLogout}>
<Heading level={3}>
Logout
</Heading>
<p>
To use a different account with Sophon, you'll need to logout from your current one first.
</p>
<p>
You are currently logged in as {loggedUsername}.
</p>
<Form>
<Form.Row>
<Form.Button disabled={!canLogout} onClick={doLogout}>
Logout
</Form.Button>
</Form.Row>
</Form>
</Box>
)
}

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

@ -1,18 +1,31 @@
import {Chapter} from "@steffo/bluelib-react"
import * as React from "react"
import {useAuthorizationContext} from "../../contexts/authorization"
import {InstanceDescriptionBox} from "../instance/InstanceDescriptionBox"
import {AuthorizationAdminBox} from "./AuthorizationAdminBox"
import {AuthorizationBrowseBox} from "./AuthorizationBrowseBox"
import {AuthorizationLoginBox} from "./AuthorizationLoginBox"
import {AuthorizationLogoutBox} from "./AuthorizationLogoutBox"
export function AuthorizationStepPage(): JSX.Element {
const authorization = useAuthorizationContext()
return <>
<InstanceDescriptionBox/>
{
authorization?.state.token === undefined ?
<Chapter>
<AuthorizationBrowseBox/>
<AuthorizationLoginBox/>
</Chapter>
:
<Chapter>
<AuthorizationLogoutBox/>
</Chapter>
}
<Chapter>
<AuthorizationAdminBox/>
</Chapter>
</>
}

7
frontend/yarn.lock
View file

@ -1246,6 +1246,13 @@
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.36"
"@fortawesome/free-regular-svg-icons@^5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.4.tgz#b97edab436954333bbeac09cfc40c6a951081a02"
integrity sha512-9VNNnU3CXHy9XednJ3wzQp6SwNwT3XaM26oS4Rp391GsxVYA+0oDR2J194YCIWf7jNRCYKjUCOduxdceLrx+xw==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.36"
"@fortawesome/free-solid-svg-icons@^5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"