✨ Add a logout box

frontend/package.json

@@ -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",

frontend/src/components/authorization/AuthorizationBrowseBox.tsx

@@ -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],
         )

frontend/src/components/authorization/AuthorizationLoginBox.tsx

@@ -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>

frontend/src/components/authorization/AuthorizationLogoutBox.tsx

@@ -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>
+    )
+}

frontend/src/components/authorization/AuthorizationStepPage.tsx

@@ -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>
-            <AuthorizationBrowseBox/>
+            <AuthorizationAdminBox/>
-            <AuthorizationLoginBox/>
         </Chapter>
-        <AuthorizationAdminBox/>
     </>
 }

frontend/yarn.lock

@@ -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"