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

Fix double submit bug in OTP Form
This commit is contained in:
Joseph Garrone 2025-04-04 23:34:01 +02:00 committed by GitHub
commit b00ffc50c3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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>