From 86a3cc5a4a722b4bef03f03a88faf4f449d6971c Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 6 Oct 2021 17:59:03 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20a=20logout=20box?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                         |  1 +
 .../authorization/AuthorizationBrowseBox.tsx  |  2 +-
 .../authorization/AuthorizationLoginBox.tsx   | 14 +++-
 .../authorization/AuthorizationLogoutBox.tsx  | 83 +++++++++++++++++++
 .../authorization/AuthorizationStepPage.tsx   | 19 ++++-
 frontend/yarn.lock                            |  7 ++
 6 files changed, 119 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/authorization/AuthorizationLogoutBox.tsx

diff --git a/frontend/package.json b/frontend/package.json
index e98220b..6854145 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/components/authorization/AuthorizationBrowseBox.tsx b/frontend/src/components/authorization/AuthorizationBrowseBox.tsx
index d3918b3..b7f426d 100644
--- a/frontend/src/components/authorization/AuthorizationBrowseBox.tsx
+++ b/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],
         )
diff --git a/frontend/src/components/authorization/AuthorizationLoginBox.tsx b/frontend/src/components/authorization/AuthorizationLoginBox.tsx
index a6d2b82..3f1614d 100644
--- a/frontend/src/components/authorization/AuthorizationLoginBox.tsx
+++ b/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>
diff --git a/frontend/src/components/authorization/AuthorizationLogoutBox.tsx b/frontend/src/components/authorization/AuthorizationLogoutBox.tsx
new file mode 100644
index 0000000..42a98ee
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/frontend/src/components/authorization/AuthorizationStepPage.tsx b/frontend/src/components/authorization/AuthorizationStepPage.tsx
index 815f93e..4c1ffe3 100644
--- a/frontend/src/components/authorization/AuthorizationStepPage.tsx
+++ b/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/>
-            <AuthorizationLoginBox/>
+            <AuthorizationAdminBox/>
         </Chapter>
-        <AuthorizationAdminBox/>
     </>
 }
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 02e461c..23afd16 100644
--- a/frontend/yarn.lock
+++ b/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"