agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support the new recapcha without breaking for older keycloak

Browse Source
This commit is contained in:
Joseph Garrone 2024-09-09 08:25:00 +02:00
parent b8a08f0789
commit 7456750828
2 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/login/KcContext/KcContext.ts
View File

@ -208,9 +208,12 @@ export declare namespace KcContext {
registrationAction: string; registrationAction: string;
}; };
passwordRequired: boolean; passwordRequired: boolean;
recaptchaRequired: boolean; recaptchaRequired?: boolean;
recaptchaVisible?: boolean;
recaptchaSiteKey?: string; recaptchaSiteKey?: string;
recaptchaAction?: string;
termsAcceptanceRequired?: boolean; termsAcceptanceRequired?: boolean;
messageHeader?: string;
}; };
export type Info = Common & { export type Info = Common & {

32
src/login/pages/Register.tsx
View File

@ -1,6 +1,7 @@
import { useState } from "react"; import { useState } from "react";
import type { LazyOrNot } from "keycloakify/tools/LazyOrNot"; import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx"; import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
import { clsx } from "keycloakify/tools/clsx";
import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFieldsProps"; import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFieldsProps";
import type { PageProps } from "keycloakify/login/pages/PageProps"; import type { PageProps } from "keycloakify/login/pages/PageProps";
import type { KcContext } from "../KcContext"; import type { KcContext } from "../KcContext";
@ -19,9 +20,10 @@ export default function Register(props: RegisterProps) {
classes classes
}); });
const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey, termsAcceptanceRequired } = kcContext; const { messageHeader, url, messagesPerField, recaptchaRequired, recaptchaVisible, recaptchaSiteKey, recaptchaAction, termsAcceptanceRequired } =
kcContext;
const { msg, msgStr } = i18n; const { msg, msgStr, advancedMsg } = i18n;
const [isFormSubmittable, setIsFormSubmittable] = useState(false); const [isFormSubmittable, setIsFormSubmittable] = useState(false);
const [areTermsAccepted, setAreTermsAccepted] = useState(false); const [areTermsAccepted, setAreTermsAccepted] = useState(false);
@ -32,7 +34,7 @@ export default function Register(props: RegisterProps) {
i18n={i18n} i18n={i18n}
doUseDefaultCss={doUseDefaultCss} doUseDefaultCss={doUseDefaultCss}
classes={classes} classes={classes}
headerNode={msg("registerTitle")} headerNode={messageHeader !== undefined ? advancedMsg(messageHeader) : msg("registerTitle")}
displayMessage={messagesPerField.exists("global")} displayMessage={messagesPerField.exists("global")}
displayRequiredFields displayRequiredFields
> >
@ -53,10 +55,10 @@ export default function Register(props: RegisterProps) {
onAreTermsAcceptedValueChange={setAreTermsAccepted} onAreTermsAcceptedValueChange={setAreTermsAccepted}
/> />
)} )}
{recaptchaRequired && ( {recaptchaRequired && (recaptchaVisible || recaptchaAction === undefined) && (
<div className="form-group"> <div className="form-group">
<div className={kcClsx("kcInputWrapperClass")}> <div className={kcClsx("kcInputWrapperClass")}>
<div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey}></div> <div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} data-action={recaptchaAction}></div>
</div> </div>
</div> </div>
)} )}
@ -68,6 +70,25 @@ export default function Register(props: RegisterProps) {
</span> </span>
</div> </div>
</div> </div>
{recaptchaRequired && !recaptchaVisible && recaptchaAction !== undefined ? (
<div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
<button
className={clsx(
kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass"),
"g-recaptcha"
)}
data-sitekey={recaptchaSiteKey}
data-callback={() => {
(document.getElementById("kc-register-form") as HTMLFormElement).submit();
}}
data-action={recaptchaAction}
type="submit"
>
{msg("doRegister")}
</button>
</div>
) : (
<div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}> <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
<input <input
disabled={!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)} disabled={!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)}
@ -76,6 +97,7 @@ export default function Register(props: RegisterProps) {
value={msgStr("doRegister")} value={msgStr("doRegister")}
/> />
</div> </div>
)}
</div> </div>
</form> </form>
</Template> </Template>