Remove eslint and run prettier (changelog ignore)
This commit is contained in:
garronej
@ -1,4 +1,3 @@
|
||||
|
||||
import { memo, Fragment } from "react";
|
||||
import { Template } from "./Template";
|
||||
import type { KcProps } from "./KcProps";
|
||||
@ -7,220 +6,349 @@ 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) => {
|
||||
export const RegisterUserProfile = memo(
|
||||
({
|
||||
kcContext,
|
||||
...props
|
||||
}: { kcContext: KcContextBase.RegisterUserProfile } & KcProps) => {
|
||||
const {
|
||||
url,
|
||||
messagesPerField,
|
||||
realm,
|
||||
passwordRequired,
|
||||
recaptchaRequired,
|
||||
recaptchaSiteKey,
|
||||
} = kcContext;
|
||||
|
||||
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>
|
||||
</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>
|
||||
)}
|
||||
<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>
|
||||
|
||||
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>
|
||||
</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>
|
||||
}
|
||||
<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 >
|
||||
}
|
||||
/>
|
||||
);
|
||||
});
|
||||
<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(
|
||||
(
|
||||
{
|
||||
kcContext,
|
||||
BeforeField = () => null,
|
||||
AfterField = () => null,
|
||||
...props
|
||||
}:
|
||||
{ kcContext: KcContextBase.RegisterUserProfile; } &
|
||||
KcProps &
|
||||
Partial<Record<
|
||||
"BeforeField" | "AfterField",
|
||||
ReactComponent<{ attribute: KcContextBase.RegisterUserProfile["profile"]["attributes"][number]; }>
|
||||
>>
|
||||
) => {
|
||||
({
|
||||
kcContext,
|
||||
BeforeField = () => null,
|
||||
AfterField = () => null,
|
||||
...props
|
||||
}: { kcContext: KcContextBase.RegisterUserProfile } & KcProps &
|
||||
Partial<
|
||||
Record<
|
||||
"BeforeField" | "AfterField",
|
||||
ReactComponent<{
|
||||
attribute: KcContextBase.RegisterUserProfile["profile"]["attributes"][number];
|
||||
}>
|
||||
>
|
||||
>) => {
|
||||
const { messagesPerField } = kcContext;
|
||||
|
||||
const { messagesPerField } = kcContext;
|
||||
const { cx } = useCssAndCx();
|
||||
|
||||
const { cx } = useCssAndCx();
|
||||
const { advancedMsg } = useKcMessage();
|
||||
|
||||
const { advancedMsg } = useKcMessage();
|
||||
let currentGroup = "";
|
||||
|
||||
let currentGroup = "";
|
||||
return (
|
||||
<>
|
||||
{kcContext.profile.attributes.map((attribute, i) => {
|
||||
const {
|
||||
group = "",
|
||||
groupDisplayHeader = "",
|
||||
groupDisplayDescription = "",
|
||||
} = attribute;
|
||||
|
||||
return (
|
||||
<>
|
||||
{kcContext.profile.attributes.map((attribute, i) => {
|
||||
if (group === currentGroup) return null;
|
||||
|
||||
const {
|
||||
group = "",
|
||||
groupDisplayHeader = "",
|
||||
groupDisplayDescription = ""
|
||||
} = attribute;
|
||||
currentGroup = group;
|
||||
|
||||
if (group === currentGroup) return null;
|
||||
|
||||
currentGroup = group;
|
||||
|
||||
return (
|
||||
<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}
|
||||
</label>
|
||||
</div>
|
||||
{groupDisplayDescription !== "" &&
|
||||
<div className={cx(props.kcLabelWrapperClass)}>
|
||||
<label
|
||||
id={`description-${group}`}
|
||||
className={`${cx(props.kcLabelClass)}`}
|
||||
>
|
||||
{advancedMsg(groupDisplayDescription) ?? ""}
|
||||
</label>
|
||||
</div>
|
||||
}
|
||||
</div>}
|
||||
<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>
|
||||
{attribute.required && <>*</>}
|
||||
</div>
|
||||
<div className={cx(props.kcInputWrapperClass)}>
|
||||
<input
|
||||
type="text"
|
||||
id={attribute.name}
|
||||
name={attribute.name}
|
||||
value={attribute.value ?? ""}
|
||||
className={cx(props.kcInputClass)}
|
||||
aria-invalid={messagesPerField.existsError(attribute.name)}
|
||||
disabled={attribute.readOnly}
|
||||
{...(attribute.autocomplete === undefined ? {} : {
|
||||
"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)}
|
||||
</span>
|
||||
}
|
||||
</div >
|
||||
</div >
|
||||
<AfterField attribute={attribute} />
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
);
|
||||
return (
|
||||
<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}
|
||||
</label>
|
||||
</div>
|
||||
{groupDisplayDescription !== "" && (
|
||||
<div
|
||||
className={cx(
|
||||
props.kcLabelWrapperClass,
|
||||
)}
|
||||
>
|
||||
<label
|
||||
id={`description-${group}`}
|
||||
className={`${cx(
|
||||
props.kcLabelClass,
|
||||
)}`}
|
||||
>
|
||||
{advancedMsg(
|
||||
groupDisplayDescription,
|
||||
) ?? ""}
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<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>
|
||||
{attribute.required && <>*</>}
|
||||
</div>
|
||||
<div className={cx(props.kcInputWrapperClass)}>
|
||||
<input
|
||||
type="text"
|
||||
id={attribute.name}
|
||||
name={attribute.name}
|
||||
value={attribute.value ?? ""}
|
||||
className={cx(props.kcInputClass)}
|
||||
aria-invalid={messagesPerField.existsError(
|
||||
attribute.name,
|
||||
)}
|
||||
disabled={attribute.readOnly}
|
||||
{...(attribute.autocomplete ===
|
||||
undefined
|
||||
? {}
|
||||
: {
|
||||
"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,
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<AfterField attribute={attribute} />
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user