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

Make terms acceptance a required field on the Register page

Browse Source
This commit is contained in:
Joseph Garrone 2024-06-28 07:16:17 +02:00
parent a51724208c
commit 14cb07efb2
2 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@ export default function Register(props: RegisterProps) {
const { msg, msgStr } = i18n; const { msg, msgStr } = i18n;
const [isFormSubmittable, setIsFormSubmittable] = useState(false); const [isFormSubmittable, setIsFormSubmittable] = useState(false);
const [areTermsAccepted, setAreTermsAccepted] = useState(false);
return ( return (
<Template <Template
@ -43,7 +44,15 @@ export default function Register(props: RegisterProps) {
onIsFormSubmittableValueChange={setIsFormSubmittable} onIsFormSubmittableValueChange={setIsFormSubmittable}
doMakeUserConfirmPassword={doMakeUserConfirmPassword} doMakeUserConfirmPassword={doMakeUserConfirmPassword}
/> />
{termsAcceptanceRequired && <TermsAcceptance i18n={i18n} kcClsx={kcClsx} messagesPerField={messagesPerField} />} {termsAcceptanceRequired && (
<TermsAcceptance
i18n={i18n}
kcClsx={kcClsx}
messagesPerField={messagesPerField}
areTermsAccepted={areTermsAccepted}
onAreTermsAcceptedValueChange={setAreTermsAccepted}
/>
)}
{recaptchaRequired && ( {recaptchaRequired && (
<div className="form-group"> <div className="form-group">
<div className={kcClsx("kcInputWrapperClass")}> <div className={kcClsx("kcInputWrapperClass")}>
@ -61,7 +70,7 @@ export default function Register(props: RegisterProps) {
</div> </div>
<div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}> <div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
<input <input
disabled={!isFormSubmittable} disabled={!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)}
className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")} className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
type="submit" type="submit"
value={msgStr("doRegister")} value={msgStr("doRegister")}
@ -73,8 +82,14 @@ export default function Register(props: RegisterProps) {
); );
} }
function TermsAcceptance(props: { i18n: I18n; kcClsx: KcClsx; messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get"> }) { function TermsAcceptance(props: {
const { i18n, kcClsx, messagesPerField } = props; i18n: I18n;
kcClsx: KcClsx;
messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
areTermsAccepted: boolean;
onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
}) {
const { i18n, kcClsx, messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange } = props;
const { msg } = i18n; const { msg } = i18n;
@ -93,6 +108,8 @@ function TermsAcceptance(props: { i18n: I18n; kcClsx: KcClsx; messagesPerField:
id="termsAccepted" id="termsAccepted"
name="termsAccepted" name="termsAccepted"
className={kcClsx("kcCheckboxInputClass")} className={kcClsx("kcCheckboxInputClass")}
checked={areTermsAccepted}
onChange={e => onAreTermsAcceptedValueChange(e.target.checked)}
aria-invalid={messagesPerField.existsError("termsAccepted")} aria-invalid={messagesPerField.existsError("termsAccepted")}
/> />
<label htmlFor="termsAccepted" className={kcClsx("kcLabelClass")}> <label htmlFor="termsAccepted" className={kcClsx("kcLabelClass")}>

13
stories/login/pages/Register.stories.tsx
View File

@ -170,3 +170,16 @@ export const WithPasswordMinLength8: Story = {
/> />
) )
}; };
export const WithTermsAcceptance: Story = {
render: () => (
<KcPageStory
kcContext={{
termsAcceptanceRequired: true,
"x-keycloakify": {
realmMessageBundleTermsText: "<a href='https://example.com/terms'>Service Terms of Use</a>"
}
}}
/>
)
};