From 91cb8fa456993056c910b7f3e3b46b37acbcf92a Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Thu, 7 Oct 2021 01:56:17 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20highlighting=20of=20the=20?=
 =?UTF-8?q?LoginBox=20while=20logging=20in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../authorization/AuthorizationLoginBox.tsx   | 29 +++++++++++++++----
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/authorization/AuthorizationLoginBox.tsx b/frontend/src/components/authorization/AuthorizationLoginBox.tsx
index 54fb376..afbc02d 100644
--- a/frontend/src/components/authorization/AuthorizationLoginBox.tsx
+++ b/frontend/src/components/authorization/AuthorizationLoginBox.tsx
@@ -21,7 +21,7 @@ export function AuthorizationLoginBox(): JSX.Element {
     const canLogin =
         React.useMemo<boolean>(
             () => (
-                axios !== undefined && authorization !== undefined && !authorization.state.running && authorization.state.token === undefined
+                axios !== undefined && authorization !== undefined && authorization.state.token === undefined
             ),
             [axios, authorization, username, password],
         )
@@ -29,9 +29,9 @@ export function AuthorizationLoginBox(): JSX.Element {
     const canClickLogin =
         React.useMemo<boolean>(
             () => (
-                canLogin && username.value !== "" && password.value !== ""
+                canLogin && !authorization!.state.running && username.value !== "" && password.value !== ""
             ),
-            [canLogin, username, password],
+            [authorization, canLogin, username, password],
         )
 
     const doLogin =
@@ -70,6 +70,23 @@ export function AuthorizationLoginBox(): JSX.Element {
             [axios, authorization, username, password],
         )
 
+    const buttonColor =
+        React.useMemo<string>(
+            () => {
+                if(!authorization) {
+                    return ""
+                }
+                if(authorization.state.running) {
+                    return "color-yellow"
+                }
+                if(error) {
+                    return "color-red"
+                }
+                return ""
+            },
+            [authorization, error],
+        )
+
     const buttonText =
         React.useMemo<JSX.Element | null>(
             () => {
@@ -96,10 +113,10 @@ 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.Field label={"Username"} required {...username}/>
-                <Form.Field label={"Password"} type={"password"} required {...password}/>
+                <Form.Field label={"Username"} required disabled={authorization?.state.running} {...username}/>
+                <Form.Field label={"Password"} type={"password"} required disabled={authorization?.state.running} {...password}/>
                 <Form.Row>
-                    <Form.Button type={"submit"} bluelibClassNames={error ? "color-red" : ""} disabled={!canClickLogin} onClick={doLogin}>
+                    <Form.Button type={"submit"} bluelibClassNames={buttonColor} disabled={!canClickLogin} onClick={doLogin}>
                         {buttonText}
                     </Form.Button>
                 </Form.Row>