Merge pull request #827 from kodebach/fix-keycloak-36012

Fix double submit bug in OTP Form

src/login/pages/LoginOtp.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, useCallback, useRef } from "react";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
@@ -17,6 +17,15 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
 
     const { msg, msgStr } = i18n;
 
+    const loginButtonRef = useRef<HTMLInputElement>(null);
+
+    const onSubmitForm = useCallback(() => {
+        if (loginButtonRef.current !== null) {
+            loginButtonRef.current.disabled = true;
+        }
+        return true;
+    }, [loginButtonRef]);
+
     return (
         <Template
             kcContext={kcContext}
@@ -26,7 +35,7 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
             displayMessage={!messagesPerField.existsError("totp")}
             headerNode={msg("doLogIn")}
         >
-            <form id="kc-otp-login-form" className={kcClsx("kcFormClass")} action={url.loginAction} method="post">
+            <form id="kc-otp-login-form" className={kcClsx("kcFormClass")} action={url.loginAction} onSubmit={onSubmitForm} method="post">
                 {otpLogin.userOtpCredentials.length > 1 && (
                     <div className={kcClsx("kcFormGroupClass")}>
                         <div className={kcClsx("kcInputWrapperClass")}>
@@ -94,6 +103,7 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
                             id="kc-login"
                             type="submit"
                             value={msgStr("doLogIn")}
+                            ref={loginButtonRef}
                         />
                     </div>
                 </div>