From 759b834ccce9b384aacd55316ae84d1672e9af6b Mon Sep 17 00:00:00 2001
From: garronej <joseph.garrone@protonmail.com>
Date: Fri, 4 Apr 2025 23:55:08 +0200
Subject: [PATCH] Follow up on #827

---
 src/login/pages/LoginOtp.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/login/pages/LoginOtp.tsx b/src/login/pages/LoginOtp.tsx
index 2d977a79..92716b61 100644
--- a/src/login/pages/LoginOtp.tsx
+++ b/src/login/pages/LoginOtp.tsx
@@ -1,4 +1,4 @@
-import { Fragment, useCallback, useRef } from "react";
+import { Fragment, useState } from "react";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
@@ -17,14 +17,7 @@ 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]);
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
     return (
         <Template
@@ -35,7 +28,16 @@ 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} onSubmit={onSubmitForm} method="post">
+            <form
+                id="kc-otp-login-form"
+                className={kcClsx("kcFormClass")}
+                action={url.loginAction}
+                onSubmit={() => {
+                    setIsSubmitting(true);
+                    return true;
+                }}
+                method="post"
+            >
                 {otpLogin.userOtpCredentials.length > 1 && (
                     <div className={kcClsx("kcFormGroupClass")}>
                         <div className={kcClsx("kcInputWrapperClass")}>
@@ -103,7 +105,7 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
                             id="kc-login"
                             type="submit"
                             value={msgStr("doLogIn")}
-                            ref={loginButtonRef}
+                            disabled={isSubmitting}
                         />
                     </div>
                 </div>