From 09700fd6a0b4fd561967a609ff2ed1f918aa5183 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 6 Oct 2021 18:23:40 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Remove=20the=20messagePanel=20fr?=
 =?UTF-8?q?om=20the=20LoginBox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../authorization/AuthorizationLoginBox.tsx   | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/authorization/AuthorizationLoginBox.tsx b/frontend/src/components/authorization/AuthorizationLoginBox.tsx
index 3f1614d..54fb376 100644
--- a/frontend/src/components/authorization/AuthorizationLoginBox.tsx
+++ b/frontend/src/components/authorization/AuthorizationLoginBox.tsx
@@ -1,4 +1,4 @@
-import {faInfoCircle} from "@fortawesome/free-solid-svg-icons"
+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"
@@ -6,7 +6,6 @@ import * as React from "react"
 import {useAuthorizationContext} from "../../contexts/authorization"
 import {SophonToken, SophonUser} from "../../types/SophonTypes"
 import {Loading} from "../elements/Loading"
-import {ErrorBox} from "../errors/ErrorBox"
 import {useInstanceAxios} from "../instance/useInstanceAxios"
 
 
@@ -71,21 +70,16 @@ export function AuthorizationLoginBox(): JSX.Element {
             [axios, authorization, username, password],
         )
 
-    const messagePanel =
+    const buttonText =
         React.useMemo<JSX.Element | null>(
             () => {
-                if(!authorization) {
-                    return <ErrorBox error={new Error("This component is being rendered outside an AuthorizationContext.")}/>
+                if(authorization?.state.running) {
+                    return <Loading text={"Logging in..."}/>
                 }
                 if(error) {
-                    return <ErrorBox error={error}/>
+                    return <><FontAwesomeIcon icon={faExclamationCircle}/>&nbsp;Login</>
                 }
-                if(authorization.state.running) {
-                    return <Box bluelibClassNames={"color-yellow"}><Loading text={"Logging in..."}/></Box>
-                }
-                return (
-                    <Box><FontAwesomeIcon icon={faInfoCircle}/> Press the login button after inserting your credentials.</Box>
-                )
+                return <>Login</>
             },
             [error, authorization],
         )
@@ -102,14 +96,11 @@ export function AuthorizationLoginBox(): JSX.Element {
                 If you do not have one, you can ask your system administrator to create one for you.
             </p>
             <Form>
-                <Form.Row>
-                    {messagePanel}
-                </Form.Row>
                 <Form.Field label={"Username"} required {...username}/>
                 <Form.Field label={"Password"} type={"password"} required {...password}/>
                 <Form.Row>
-                    <Form.Button type={"submit"} disabled={!canClickLogin} onClick={doLogin}>
-                        Login
+                    <Form.Button type={"submit"} bluelibClassNames={error ? "color-red" : ""} disabled={!canClickLogin} onClick={doLogin}>
+                        {buttonText}
                     </Form.Button>
                 </Form.Row>
             </Form>