Improve log in page button handling

Disable the log in button while "logging in" is in progress, or if the
username and password are empty

Fixes: #581

Signed-off-by: Mark Reynolds <[email protected]>

src/login/LoginMainPage.tsx

@@ -64,6 +64,7 @@ const LoginMainPage = () => {
   const [isValidUsername, setIsValidUsername] = React.useState(true);
   const [password, setPassword] = React.useState("");
   const [isValidPassword, setIsValidPassword] = React.useState(true);
+  const [authenticating, setAuthenticating] = React.useState(false);
 
   // Authentication method (assumes user + password by default)
   // - This will help to get the user credentials if the user is logged in via Kerberos
@@ -216,6 +217,7 @@ const LoginMainPage = () => {
     setIsValidPassword(!!password);
     setShowHelperText(!username || !password);
 
+    setAuthenticating(true);
     if (!username && isKerberosEnabled) {
       onKrbLogin().then((response) => {
         if ("error" in response) {
@@ -261,13 +263,15 @@ const LoginMainPage = () => {
         } else {
           onSuccessLogin();
         }
+        setAuthenticating(false);
       });
     }
   };
 
   // Login using certificate
   const onLoginWithCertClick = (_event) => {
     _event.preventDefault();
+    setAuthenticating(true);
     onCertLogin(username).then((response) => {
       if ("error" in response) {
         const receivedError = response.error as MetaResponse;
@@ -284,6 +288,7 @@ const LoginMainPage = () => {
       } else {
         onSuccessLogin();
       }
+      setAuthenticating(false);
     });
   };
 
@@ -334,6 +339,7 @@ const LoginMainPage = () => {
       isValidPassword={isValidPassword}
       onLoginButtonClick={onLoginButtonClick}
       loginButtonLabel="Log in"
+      isLoginButtonDisabled={authenticating}
     />
   );