keycloakify 10.0.0-rc.96 → 10.0.0-rc.97
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/login/pages/Register.js
CHANGED
|
@@ -10,11 +10,12 @@ export default function Register(props) {
|
|
|
10
10
|
const { url, messagesPerField, recaptchaRequired, recaptchaSiteKey, termsAcceptanceRequired } = kcContext;
|
|
11
11
|
const { msg, msgStr } = i18n;
|
|
12
12
|
const [isFormSubmittable, setIsFormSubmittable] = useState(false);
|
|
13
|
-
|
|
13
|
+
const [areTermsAccepted, setAreTermsAccepted] = useState(false);
|
|
14
|
+
return (_jsx(Template, Object.assign({ kcContext: kcContext, i18n: i18n, doUseDefaultCss: doUseDefaultCss, classes: classes, headerNode: msg("registerTitle"), displayMessage: messagesPerField.exists("global"), displayRequiredFields: true }, { children: _jsxs("form", Object.assign({ id: "kc-register-form", className: kcClsx("kcFormClass"), action: url.registrationAction, method: "post" }, { children: [_jsx(UserProfileFormFields, { kcContext: kcContext, i18n: i18n, kcClsx: kcClsx, onIsFormSubmittableValueChange: setIsFormSubmittable, doMakeUserConfirmPassword: doMakeUserConfirmPassword }), termsAcceptanceRequired && (_jsx(TermsAcceptance, { i18n: i18n, kcClsx: kcClsx, messagesPerField: messagesPerField, areTermsAccepted: areTermsAccepted, onAreTermsAcceptedValueChange: setAreTermsAccepted })), recaptchaRequired && (_jsx("div", Object.assign({ className: "form-group" }, { children: _jsx("div", Object.assign({ className: kcClsx("kcInputWrapperClass") }, { children: _jsx("div", { className: "g-recaptcha", "data-size": "compact", "data-sitekey": recaptchaSiteKey }) })) }))), _jsxs("div", Object.assign({ className: kcClsx("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ id: "kc-form-options", className: kcClsx("kcFormOptionsClass") }, { children: _jsx("div", Object.assign({ className: kcClsx("kcFormOptionsWrapperClass") }, { children: _jsx("span", { children: _jsx("a", Object.assign({ href: url.loginUrl }, { children: msg("backToLogin") })) }) })) })), _jsx("div", Object.assign({ id: "kc-form-buttons", className: kcClsx("kcFormButtonsClass") }, { children: _jsx("input", { disabled: !isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted), className: kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass"), type: "submit", value: msgStr("doRegister") }) }))] }))] })) })));
|
|
14
15
|
}
|
|
15
16
|
function TermsAcceptance(props) {
|
|
16
|
-
const { i18n, kcClsx, messagesPerField } = props;
|
|
17
|
+
const { i18n, kcClsx, messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange } = props;
|
|
17
18
|
const { msg } = i18n;
|
|
18
|
-
return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "form-group" }, { children: _jsxs("div", Object.assign({ className: kcClsx("kcInputWrapperClass") }, { children: [msg("termsTitle"), _jsx("div", Object.assign({ id: "kc-registration-terms-text" }, { children: msg("termsText") }))] })) })), _jsxs("div", Object.assign({ className: "form-group" }, { children: [_jsxs("div", Object.assign({ className: kcClsx("kcLabelWrapperClass") }, { children: [_jsx("input", { type: "checkbox", id: "termsAccepted", name: "termsAccepted", className: kcClsx("kcCheckboxInputClass"), "aria-invalid": messagesPerField.existsError("termsAccepted") }), _jsx("label", Object.assign({ htmlFor: "termsAccepted", className: kcClsx("kcLabelClass") }, { children: msg("acceptTerms") }))] })), messagesPerField.existsError("termsAccepted") && (_jsx("div", Object.assign({ className: kcClsx("kcLabelWrapperClass") }, { children: _jsx("span", Object.assign({ id: "input-error-terms-accepted", className: kcClsx("kcInputErrorMessageClass"), "aria-live": "polite" }, { children: messagesPerField.get("termsAccepted") })) })))] }))] }));
|
|
19
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "form-group" }, { children: _jsxs("div", Object.assign({ className: kcClsx("kcInputWrapperClass") }, { children: [msg("termsTitle"), _jsx("div", Object.assign({ id: "kc-registration-terms-text" }, { children: msg("termsText") }))] })) })), _jsxs("div", Object.assign({ className: "form-group" }, { children: [_jsxs("div", Object.assign({ className: kcClsx("kcLabelWrapperClass") }, { children: [_jsx("input", { type: "checkbox", id: "termsAccepted", name: "termsAccepted", className: kcClsx("kcCheckboxInputClass"), checked: areTermsAccepted, onChange: e => onAreTermsAcceptedValueChange(e.target.checked), "aria-invalid": messagesPerField.existsError("termsAccepted") }), _jsx("label", Object.assign({ htmlFor: "termsAccepted", className: kcClsx("kcLabelClass") }, { children: msg("acceptTerms") }))] })), messagesPerField.existsError("termsAccepted") && (_jsx("div", Object.assign({ className: kcClsx("kcLabelWrapperClass") }, { children: _jsx("span", Object.assign({ id: "input-error-terms-accepted", className: kcClsx("kcInputErrorMessageClass"), "aria-live": "polite" }, { children: messagesPerField.get("termsAccepted") })) })))] }))] }));
|
|
19
20
|
}
|
|
20
21
|
//# sourceMappingURL=Register.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Register.js","sourceRoot":"","sources":["../../src/login/pages/Register.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAe,MAAM,8BAA8B,CAAC;AAWtE,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAoB;IACjD,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,GAAG,KAAK,CAAC;IAExH,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QACzB,eAAe;QACf,OAAO;KACV,CAAC,CAAC;IAEH,MAAM,EAAE,GAAG,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,uBAAuB,EAAE,GAAG,SAAS,CAAC;IAE1G,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAE7B,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Register.js","sourceRoot":"","sources":["../../src/login/pages/Register.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -24,6 +24,7 @@ export default function Register(props: RegisterProps) {
|
|
|
24
24
|
const { msg, msgStr } = i18n;
|
|
25
25
|
|
|
26
26
|
const [isFormSubmittable, setIsFormSubmittable] = useState(false);
|
|
27
|
+
const [areTermsAccepted, setAreTermsAccepted] = useState(false);
|
|
27
28
|
|
|
28
29
|
return (
|
|
29
30
|
<Template
|
|
@@ -43,7 +44,15 @@ export default function Register(props: RegisterProps) {
|
|
|
43
44
|
onIsFormSubmittableValueChange={setIsFormSubmittable}
|
|
44
45
|
doMakeUserConfirmPassword={doMakeUserConfirmPassword}
|
|
45
46
|
/>
|
|
46
|
-
{termsAcceptanceRequired &&
|
|
47
|
+
{termsAcceptanceRequired && (
|
|
48
|
+
<TermsAcceptance
|
|
49
|
+
i18n={i18n}
|
|
50
|
+
kcClsx={kcClsx}
|
|
51
|
+
messagesPerField={messagesPerField}
|
|
52
|
+
areTermsAccepted={areTermsAccepted}
|
|
53
|
+
onAreTermsAcceptedValueChange={setAreTermsAccepted}
|
|
54
|
+
/>
|
|
55
|
+
)}
|
|
47
56
|
{recaptchaRequired && (
|
|
48
57
|
<div className="form-group">
|
|
49
58
|
<div className={kcClsx("kcInputWrapperClass")}>
|
|
@@ -61,7 +70,7 @@ export default function Register(props: RegisterProps) {
|
|
|
61
70
|
</div>
|
|
62
71
|
<div id="kc-form-buttons" className={kcClsx("kcFormButtonsClass")}>
|
|
63
72
|
<input
|
|
64
|
-
disabled={!isFormSubmittable}
|
|
73
|
+
disabled={!isFormSubmittable || (termsAcceptanceRequired && !areTermsAccepted)}
|
|
65
74
|
className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
|
|
66
75
|
type="submit"
|
|
67
76
|
value={msgStr("doRegister")}
|
|
@@ -73,8 +82,14 @@ export default function Register(props: RegisterProps) {
|
|
|
73
82
|
);
|
|
74
83
|
}
|
|
75
84
|
|
|
76
|
-
function TermsAcceptance(props: {
|
|
77
|
-
|
|
85
|
+
function TermsAcceptance(props: {
|
|
86
|
+
i18n: I18n;
|
|
87
|
+
kcClsx: KcClsx;
|
|
88
|
+
messagesPerField: Pick<KcContext["messagesPerField"], "existsError" | "get">;
|
|
89
|
+
areTermsAccepted: boolean;
|
|
90
|
+
onAreTermsAcceptedValueChange: (areTermsAccepted: boolean) => void;
|
|
91
|
+
}) {
|
|
92
|
+
const { i18n, kcClsx, messagesPerField, areTermsAccepted, onAreTermsAcceptedValueChange } = props;
|
|
78
93
|
|
|
79
94
|
const { msg } = i18n;
|
|
80
95
|
|
|
@@ -93,6 +108,8 @@ function TermsAcceptance(props: { i18n: I18n; kcClsx: KcClsx; messagesPerField:
|
|
|
93
108
|
id="termsAccepted"
|
|
94
109
|
name="termsAccepted"
|
|
95
110
|
className={kcClsx("kcCheckboxInputClass")}
|
|
111
|
+
checked={areTermsAccepted}
|
|
112
|
+
onChange={e => onAreTermsAcceptedValueChange(e.target.checked)}
|
|
96
113
|
aria-invalid={messagesPerField.existsError("termsAccepted")}
|
|
97
114
|
/>
|
|
98
115
|
<label htmlFor="termsAccepted" className={kcClsx("kcLabelClass")}>
|
|
@@ -170,3 +170,16 @@ export const WithPasswordMinLength8: Story = {
|
|
|
170
170
|
/>
|
|
171
171
|
)
|
|
172
172
|
};
|
|
173
|
+
|
|
174
|
+
export const WithTermsAcceptance: Story = {
|
|
175
|
+
render: () => (
|
|
176
|
+
<KcPageStory
|
|
177
|
+
kcContext={{
|
|
178
|
+
termsAcceptanceRequired: true,
|
|
179
|
+
"x-keycloakify": {
|
|
180
|
+
realmMessageBundleTermsText: "<a href='https://example.com/terms'>Service Terms of Use</a>"
|
|
181
|
+
}
|
|
182
|
+
}}
|
|
183
|
+
/>
|
|
184
|
+
)
|
|
185
|
+
};
|