From 1bb09cc0e58b8a97abb5d50a9ded97666055d7d7 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi
Date: Thu, 7 Oct 2021 20:38:57 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Change=20login=20flow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../authorization/AuthorizationBrowseBox.tsx | 9 +---
.../authorization/AuthorizationLoginBox.tsx | 7 +--
.../authorization/AuthorizationLogoutBox.tsx | 4 ++
.../authorization/AuthorizationStepPage.tsx | 43 ++++++++++++++-----
4 files changed, 39 insertions(+), 24 deletions(-)
diff --git a/frontend/src/components/authorization/AuthorizationBrowseBox.tsx b/frontend/src/components/authorization/AuthorizationBrowseBox.tsx
index b7f426d..fcf798d 100644
--- a/frontend/src/components/authorization/AuthorizationBrowseBox.tsx
+++ b/frontend/src/components/authorization/AuthorizationBrowseBox.tsx
@@ -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 (
diff --git a/frontend/src/components/authorization/AuthorizationLoginBox.tsx b/frontend/src/components/authorization/AuthorizationLoginBox.tsx
index 69083fb..f972095 100644
--- a/frontend/src/components/authorization/AuthorizationLoginBox.tsx
+++ b/frontend/src/components/authorization/AuthorizationLoginBox.tsx
@@ -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.
-
+
+
{buttonText}
diff --git a/frontend/src/components/authorization/AuthorizationLogoutBox.tsx b/frontend/src/components/authorization/AuthorizationLogoutBox.tsx
index bc44458..f1f3a50 100644
--- a/frontend/src/components/authorization/AuthorizationLogoutBox.tsx
+++ b/frontend/src/components/authorization/AuthorizationLogoutBox.tsx
@@ -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 {
+ navigate("l/")} bluelibClassNames={"color-lime"}>
+ Continue to Sophon
+
Logout
diff --git a/frontend/src/components/authorization/AuthorizationStepPage.tsx b/frontend/src/components/authorization/AuthorizationStepPage.tsx
index 4c1ffe3..aa3ada5 100644
--- a/frontend/src/components/authorization/AuthorizationStepPage.tsx
+++ b/frontend/src/components/authorization/AuthorizationStepPage.tsx
@@ -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 (
+
+
+
+
+ )
+ }
+ if(authorization.state.token !== undefined) {
+ return (
+
+
+
+
+ )
+ }
+ return (
+
+
+
+
+ )
+ },
+ [authorization],
+ )
+
return <>
- {
- authorization?.state.token === undefined ?
-
-
-
-
- :
-
-
-
- }
+ {loginChapter}