Merge pull request #827 from kodebach/fix-keycloak-36012
Fix double submit bug in OTP Form
This commit is contained in:
commit
b00ffc50c3
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user