fix double click on login button

src/pages/authentication/auth-forms/AuthLogin.js

@@ -1,5 +1,5 @@
 import React, {
-  useEffect, useState} from 'react';
+  useEffect, useState, useRef} from 'react';
 import {useNavigate} from 'react-router-dom';
 
 // material-ui
@@ -46,6 +46,8 @@ const AuthLogin = () => {
   let [posts, setPosts] = useState([]);
   let [userName, setUserName] = useState("");
   let [userPassword, setUserPassword] = useState("");
+  const [loginRequestPending, setLoginRequestPending] = useState(false);
+  const loginInFlightRef = useRef(false);
 
   useEffect(() => {
     //console.log("POST: " + posts.accessToken);
@@ -56,6 +58,11 @@ const AuthLogin = () => {
   };
 
   const tryLogin = () => {
+    if (loginInFlightRef.current) {
+      return;
+    }
+    loginInFlightRef.current = true;
+    setLoginRequestPending(true);
     axios.post(`${apiPath}${POST_LOGIN}`,
         {
           "username": userName,
@@ -90,6 +97,8 @@ const AuthLogin = () => {
         })
         .catch(error => {
           console.error(error);
+          loginInFlightRef.current = false;
+          setLoginRequestPending(false);
         });
   }
 
@@ -213,7 +222,7 @@ const AuthLogin = () => {
               <Grid item xs={12}>
                 <AnimateButton>
                   <Button disableElevation onClick={tryLogin}
-                          disabled={isSubmitting} fullWidth size="large" type="submit" variant="contained" color="primary">
+                          disabled={isSubmitting || loginRequestPending} fullWidth size="large" type="submit" variant="contained" color="primary">
                     <FormattedMessage id="login"/>
                   </Button>
                 </AnimateButton>

src/pages/authentication/auth-forms/AuthLoginCustom.js

@@ -1,6 +1,7 @@
 import {
   useEffect,
   useState,
+  useRef,
   lazy,
   useContext
 } from 'react';
@@ -71,6 +72,8 @@ const AuthLoginCustom = () => {
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
   const [errorMassage, setErrorMassage] = useState('');
   const [onLogin, setOnLogin] = useState(false);
+  /** Blocks a second login before React re-renders (double-click / rapid taps). */
+  const loginInFlightRef = useRef(false);
 
   const handleMouseDownPassword = (event) => {
     event.preventDefault();
@@ -78,6 +81,10 @@ const AuthLoginCustom = () => {
 
   const tryLogin = () => {
     if (isValid) {
+      if (loginInFlightRef.current) {
+        return;
+      }
+      loginInFlightRef.current = true;
       dispatch(handleLogoutFunction());
       setOnLogin(true)
       useJwt
@@ -127,6 +134,7 @@ const AuthLoginCustom = () => {
         .catch((error) => {
           // console.log(error.response)
           // setSuccess(false)
+          loginInFlightRef.current = false;
           setOnLogin(false)
           if (error.response != undefined) {
             setErrorMassage(error.response.data.error)