Better prettier params (changelog ignore)
This commit is contained in:
garronej
@ -6,216 +6,115 @@ import { useKcMessage } from "../i18n/useKcMessage";
|
||||
import { useCssAndCx } from "tss-react";
|
||||
import type { ReactComponent } from "../tools/ReactComponent";
|
||||
|
||||
export const RegisterUserProfile = memo(
|
||||
({
|
||||
kcContext,
|
||||
...props
|
||||
}: { kcContext: KcContextBase.RegisterUserProfile } & KcProps) => {
|
||||
const {
|
||||
url,
|
||||
messagesPerField,
|
||||
realm,
|
||||
passwordRequired,
|
||||
recaptchaRequired,
|
||||
recaptchaSiteKey,
|
||||
} = kcContext;
|
||||
export const RegisterUserProfile = memo(({ kcContext, ...props }: { kcContext: KcContextBase.RegisterUserProfile } & KcProps) => {
|
||||
const { url, messagesPerField, realm, passwordRequired, recaptchaRequired, recaptchaSiteKey } = kcContext;
|
||||
|
||||
const { msg, msgStr } = useKcMessage();
|
||||
const { msg, msgStr } = useKcMessage();
|
||||
|
||||
const { cx } = useCssAndCx();
|
||||
const { cx } = useCssAndCx();
|
||||
|
||||
return (
|
||||
<Template
|
||||
{...{ kcContext, ...props }}
|
||||
displayMessage={messagesPerField.exists("global")}
|
||||
displayRequiredFields={true}
|
||||
doFetchDefaultThemeResources={true}
|
||||
headerNode={msg("registerTitle")}
|
||||
formNode={
|
||||
<form
|
||||
id="kc-register-form"
|
||||
className={cx(props.kcFormClass)}
|
||||
action={url.registrationAction}
|
||||
method="post"
|
||||
>
|
||||
<UserProfileFormFields
|
||||
kcContext={kcContext}
|
||||
{...props}
|
||||
AfterField={({ attribute }) =>
|
||||
/*render password fields just under the username or email (if used as username)*/
|
||||
(passwordRequired &&
|
||||
(attribute.name == "username" ||
|
||||
(attribute.name == "email" &&
|
||||
realm.registrationEmailAsUsername)) && (
|
||||
<>
|
||||
<div
|
||||
className={cx(
|
||||
props.kcFormGroupClass,
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cx(
|
||||
props.kcLabelWrapperClass,
|
||||
)}
|
||||
>
|
||||
<label
|
||||
htmlFor="password"
|
||||
className={cx(
|
||||
props.kcLabelClass,
|
||||
)}
|
||||
>
|
||||
{msg("password")}
|
||||
</label>{" "}
|
||||
*
|
||||
</div>
|
||||
<div
|
||||
className={cx(
|
||||
props.kcInputWrapperClass,
|
||||
)}
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
className={cx(
|
||||
props.kcInputClass,
|
||||
)}
|
||||
name="password"
|
||||
autoComplete="new-password"
|
||||
aria-invalid={
|
||||
messagesPerField.existsError(
|
||||
"password",
|
||||
) ||
|
||||
messagesPerField.existsError(
|
||||
"password-confirm",
|
||||
)
|
||||
}
|
||||
/>
|
||||
{messagesPerField.existsError(
|
||||
"password",
|
||||
) && (
|
||||
<span
|
||||
id="input-error-password"
|
||||
className={cx(
|
||||
props.kcInputErrorMessageClass,
|
||||
)}
|
||||
aria-live="polite"
|
||||
>
|
||||
{messagesPerField.get(
|
||||
"password",
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
return (
|
||||
<Template
|
||||
{...{ kcContext, ...props }}
|
||||
displayMessage={messagesPerField.exists("global")}
|
||||
displayRequiredFields={true}
|
||||
doFetchDefaultThemeResources={true}
|
||||
headerNode={msg("registerTitle")}
|
||||
formNode={
|
||||
<form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
|
||||
<UserProfileFormFields
|
||||
kcContext={kcContext}
|
||||
{...props}
|
||||
AfterField={({ attribute }) =>
|
||||
/*render password fields just under the username or email (if used as username)*/
|
||||
(passwordRequired &&
|
||||
(attribute.name == "username" || (attribute.name == "email" && realm.registrationEmailAsUsername)) && (
|
||||
<>
|
||||
<div className={cx(props.kcFormGroupClass)}>
|
||||
<div className={cx(props.kcLabelWrapperClass)}>
|
||||
<label htmlFor="password" className={cx(props.kcLabelClass)}>
|
||||
{msg("password")}
|
||||
</label>{" "}
|
||||
*
|
||||
</div>
|
||||
<div
|
||||
className={cx(
|
||||
props.kcFormGroupClass,
|
||||
<div className={cx(props.kcInputWrapperClass)}>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
className={cx(props.kcInputClass)}
|
||||
name="password"
|
||||
autoComplete="new-password"
|
||||
aria-invalid={
|
||||
messagesPerField.existsError("password") || messagesPerField.existsError("password-confirm")
|
||||
}
|
||||
/>
|
||||
{messagesPerField.existsError("password") && (
|
||||
<span id="input-error-password" className={cx(props.kcInputErrorMessageClass)} aria-live="polite">
|
||||
{messagesPerField.get("password")}
|
||||
</span>
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cx(
|
||||
props.kcLabelWrapperClass,
|
||||
)}
|
||||
>
|
||||
<label
|
||||
htmlFor="password-confirm"
|
||||
className={cx(
|
||||
props.kcLabelClass,
|
||||
)}
|
||||
>
|
||||
{msg("passwordConfirm")}
|
||||
</label>{" "}
|
||||
*
|
||||
</div>
|
||||
<div
|
||||
className={cx(
|
||||
props.kcInputWrapperClass,
|
||||
)}
|
||||
>
|
||||
<input
|
||||
type="password"
|
||||
id="password-confirm"
|
||||
className={cx(
|
||||
props.kcInputClass,
|
||||
)}
|
||||
name="password-confirm"
|
||||
aria-invalid={messagesPerField.existsError(
|
||||
"password-confirm",
|
||||
)}
|
||||
/>
|
||||
{messagesPerField.existsError(
|
||||
"password-confirm",
|
||||
) && (
|
||||
<span
|
||||
id="input-error-password-confirm"
|
||||
className={cx(
|
||||
props.kcInputErrorMessageClass,
|
||||
)}
|
||||
aria-live="polite"
|
||||
>
|
||||
{messagesPerField.get(
|
||||
"password-confirm",
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)) ||
|
||||
null
|
||||
}
|
||||
/>
|
||||
{recaptchaRequired && (
|
||||
<div className="form-group">
|
||||
<div className={cx(props.kcInputWrapperClass)}>
|
||||
<div
|
||||
className="g-recaptcha"
|
||||
data-size="compact"
|
||||
data-sitekey={recaptchaSiteKey}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={cx(props.kcFormGroupClass)}>
|
||||
<div
|
||||
id="kc-form-options"
|
||||
className={cx(props.kcFormOptionsClass)}
|
||||
>
|
||||
<div
|
||||
className={cx(
|
||||
props.kcFormOptionsWrapperClass,
|
||||
)}
|
||||
>
|
||||
<span>
|
||||
<a href={url.loginUrl}>
|
||||
{msg("backToLogin")}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="kc-form-buttons"
|
||||
className={cx(props.kcFormButtonsClass)}
|
||||
>
|
||||
<input
|
||||
className={cx(
|
||||
props.kcButtonClass,
|
||||
props.kcButtonPrimaryClass,
|
||||
props.kcButtonBlockClass,
|
||||
props.kcButtonLargeClass,
|
||||
)}
|
||||
type="submit"
|
||||
value={msgStr("doRegister")}
|
||||
/>
|
||||
</div>
|
||||
<div className={cx(props.kcFormGroupClass)}>
|
||||
<div className={cx(props.kcLabelWrapperClass)}>
|
||||
<label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>
|
||||
{msg("passwordConfirm")}
|
||||
</label>{" "}
|
||||
*
|
||||
</div>
|
||||
<div className={cx(props.kcInputWrapperClass)}>
|
||||
<input
|
||||
type="password"
|
||||
id="password-confirm"
|
||||
className={cx(props.kcInputClass)}
|
||||
name="password-confirm"
|
||||
aria-invalid={messagesPerField.existsError("password-confirm")}
|
||||
/>
|
||||
{messagesPerField.existsError("password-confirm") && (
|
||||
<span
|
||||
id="input-error-password-confirm"
|
||||
className={cx(props.kcInputErrorMessageClass)}
|
||||
aria-live="polite"
|
||||
>
|
||||
{messagesPerField.get("password-confirm")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)) ||
|
||||
null
|
||||
}
|
||||
/>
|
||||
{recaptchaRequired && (
|
||||
<div className="form-group">
|
||||
<div className={cx(props.kcInputWrapperClass)}>
|
||||
<div className="g-recaptcha" data-size="compact" data-sitekey={recaptchaSiteKey} />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
)}
|
||||
<div className={cx(props.kcFormGroupClass)}>
|
||||
<div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
|
||||
<div className={cx(props.kcFormOptionsWrapperClass)}>
|
||||
<span>
|
||||
<a href={url.loginUrl}>{msg("backToLogin")}</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
|
||||
<input
|
||||
className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
|
||||
type="submit"
|
||||
value={msgStr("doRegister")}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
const UserProfileFormFields = memo(
|
||||
({
|
||||
@ -243,13 +142,11 @@ const UserProfileFormFields = memo(
|
||||
return (
|
||||
<>
|
||||
{kcContext.profile.attributes.map((attribute, i) => {
|
||||
const {
|
||||
group = "",
|
||||
groupDisplayHeader = "",
|
||||
groupDisplayDescription = "",
|
||||
} = attribute;
|
||||
const { group = "", groupDisplayHeader = "", groupDisplayDescription = "" } = attribute;
|
||||
|
||||
if (group === currentGroup) return null;
|
||||
console.log(JSON.stringify(attribute, null, 2));
|
||||
|
||||
//if (group === currentGroup) return null;
|
||||
|
||||
currentGroup = group;
|
||||
|
||||
@ -257,39 +154,15 @@ const UserProfileFormFields = memo(
|
||||
<Fragment key={i}>
|
||||
{group !== "" && (
|
||||
<div className={cx(props.kcFormGroupClass)}>
|
||||
<div
|
||||
className={cx(
|
||||
props.kcContentWrapperClass,
|
||||
)}
|
||||
>
|
||||
<label
|
||||
id={`header-${group}`}
|
||||
className={cx(
|
||||
props.kcFormGroupHeader,
|
||||
)}
|
||||
>
|
||||
{(groupDisplayHeader !== "" &&
|
||||
advancedMsg(
|
||||
groupDisplayHeader,
|
||||
)) ||
|
||||
currentGroup}
|
||||
<div className={cx(props.kcContentWrapperClass)}>
|
||||
<label id={`header-${group}`} className={cx(props.kcFormGroupHeader)}>
|
||||
{(groupDisplayHeader !== "" && advancedMsg(groupDisplayHeader)) || currentGroup}
|
||||
</label>
|
||||
</div>
|
||||
{groupDisplayDescription !== "" && (
|
||||
<div
|
||||
className={cx(
|
||||
props.kcLabelWrapperClass,
|
||||
)}
|
||||
>
|
||||
<label
|
||||
id={`description-${group}`}
|
||||
className={`${cx(
|
||||
props.kcLabelClass,
|
||||
)}`}
|
||||
>
|
||||
{advancedMsg(
|
||||
groupDisplayDescription,
|
||||
) ?? ""}
|
||||
<div className={cx(props.kcLabelWrapperClass)}>
|
||||
<label id={`description-${group}`} className={`${cx(props.kcLabelClass)}`}>
|
||||
{advancedMsg(groupDisplayDescription) ?? ""}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
@ -298,13 +171,8 @@ const UserProfileFormFields = memo(
|
||||
<BeforeField attribute={attribute} />
|
||||
<div className={cx(props.kcFormGroupClass)}>
|
||||
<div className={cx(props.kcLabelWrapperClass)}>
|
||||
<label
|
||||
htmlFor={attribute.name}
|
||||
className={cx(props.kcLabelClass)}
|
||||
>
|
||||
{advancedMsg(
|
||||
attribute.displayName ?? "",
|
||||
)}
|
||||
<label htmlFor={attribute.name} className={cx(props.kcLabelClass)}>
|
||||
{advancedMsg(attribute.displayName ?? "")}
|
||||
</label>
|
||||
{attribute.required && <>*</>}
|
||||
</div>
|
||||
@ -313,33 +181,19 @@ const UserProfileFormFields = memo(
|
||||
type="text"
|
||||
id={attribute.name}
|
||||
name={attribute.name}
|
||||
value={attribute.value ?? ""}
|
||||
defaultValue={attribute.value ?? ""}
|
||||
className={cx(props.kcInputClass)}
|
||||
aria-invalid={messagesPerField.existsError(
|
||||
attribute.name,
|
||||
)}
|
||||
aria-invalid={messagesPerField.existsError(attribute.name)}
|
||||
disabled={attribute.readOnly}
|
||||
{...(attribute.autocomplete ===
|
||||
undefined
|
||||
{...(attribute.autocomplete === undefined
|
||||
? {}
|
||||
: {
|
||||
"autoComplete":
|
||||
attribute.autocomplete,
|
||||
"autoComplete": attribute.autocomplete,
|
||||
})}
|
||||
/>
|
||||
{kcContext.messagesPerField.existsError(
|
||||
attribute.name,
|
||||
) && (
|
||||
<span
|
||||
id={`input-error-${attribute.name}`}
|
||||
className={cx(
|
||||
props.kcInputErrorMessageClass,
|
||||
)}
|
||||
aria-live="polite"
|
||||
>
|
||||
{messagesPerField.get(
|
||||
attribute.name,
|
||||
)}
|
||||
{kcContext.messagesPerField.existsError(attribute.name) && (
|
||||
<span id={`input-error-${attribute.name}`} className={cx(props.kcInputErrorMessageClass)} aria-live="polite">
|
||||
{messagesPerField.get(attribute.name)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user