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;
};
passwordRequired: boolean;
recaptchaRequired: boolean;
recaptchaRequired?: boolean;
recaptchaVisible?: boolean;
recaptchaSiteKey?: string;
recaptchaAction?: string;
termsAcceptanceRequired?: boolean;
messageHeader?: string;
};
export type Info = Common & {

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

@ -1,6 +1,7 @@
import { useState } from "react";
import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
import { clsx } from "keycloakify/tools/clsx";
import type { UserProfileFormFieldsProps } from "keycloakify/login/UserProfileFormFieldsProps";
import type { PageProps } from "keycloakify/login/pages/PageProps";
import type { KcContext } from "../KcContext";
@ -19,9 +20,10 @@ export default function Register(props: RegisterProps) {
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 [areTermsAccepted, setAreTermsAccepted] = useState(false);
@ -32,7 +34,7 @@ export default function Register(props: RegisterProps) {
i18n={i18n}
doUseDefaultCss={doUseDefaultCss}
classes={classes}
headerNode={msg("registerTitle")}
headerNode={messageHeader !== undefined ? advancedMsg(messageHeader) : msg("registerTitle")}
displayMessage={messagesPerField.exists("global")}
displayRequiredFields
>
@ -53,10 +55,10 @@ export default function Register(props: RegisterProps) {
onAreTermsAcceptedValueChange={setAreTermsAccepted}
/>
)}
{recaptchaRequired && (
{recaptchaRequired && (recaptchaVisible || recaptchaAction === undefined) && (
<div className="form-group">
<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>
)}
@ -68,6 +70,25 @@ export default function Register(props: RegisterProps) {
</span>
</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")}>
<input
disabled={!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)}
@ -76,6 +97,7 @@ export default function Register(props: RegisterProps) {
value={msgStr("doRegister")}
/>
</div>
)}
</div>
</form>
</Template>