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

['select-radiobuttons'/'multiselect-checkboxes'] fixed 'inputOptionLabels'

Browse Source
This commit is contained in:
johanjk 2024-10-02 16:16:16 +02:00
parent ce3135c83b
commit 80eaa77acc
No known key found for this signature in database
GPG Key ID: BF6FDD9200125E6E
2 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/login/UserProfileFormFields.tsx
View File

@ -434,9 +434,7 @@ function AddRemoveButtonsMultiValuedAttribute(props: {
}
function InputTagSelects(props: InputFieldByTypeProps) {
const { attribute, dispatchFormAction, kcClsx, valueOrValues } = props;
const { advancedMsg } = props.i18n;
const { attribute, dispatchFormAction, kcClsx, i18n, valueOrValues } = props;
const { classDiv, classInput, classLabel, inputType } = (() => {
const { inputType } = attribute.annotations;
@ -533,7 +531,7 @@ function InputTagSelects(props: InputFieldByTypeProps) {
htmlFor={`${attribute.name}-${option}`}
className={`${classLabel}${attribute.readOnly ? ` ${kcClsx("kcInputClassRadioCheckboxLabelDisabled")}` : ""}`}
>
{advancedMsg(option)}
{inputLabel(i18n, attribute, option)}
</label>
</div>
))}
@ -580,8 +578,6 @@ function TextareaTag(props: InputFieldByTypeProps) {
function SelectTag(props: InputFieldByTypeProps) {
const { attribute, dispatchFormAction, kcClsx, displayableErrors, i18n, valueOrValues } = props;
const { advancedMsgStr } = i18n;
const isMultiple = attribute.annotations.inputType === "multiselect";
return (
@ -645,22 +641,26 @@ function SelectTag(props: InputFieldByTypeProps) {
return options.map(option => (
<option key={option} value={option}>
{(() => {
if (attribute.annotations.inputOptionLabels !== undefined) {
const { inputOptionLabels } = attribute.annotations;
return advancedMsgStr(inputOptionLabels[option] ?? option);
}
if (attribute.annotations.inputOptionLabelsI18nPrefix !== undefined) {
return advancedMsgStr(`${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}`);
}
return option;
})()}
{inputLabel(i18n, attribute, option)}
</option>
));
})()}
</select>
);
}
function inputLabel(i18n: I18n, attribute: Attribute, option: string) {
const { advancedMsg } = i18n;
if (attribute.annotations.inputOptionLabels !== undefined) {
const { inputOptionLabels } = attribute.annotations;
return advancedMsg(inputOptionLabels[option] ?? option);
}
if (attribute.annotations.inputOptionLabelsI18nPrefix !== undefined) {
return advancedMsg(`${attribute.annotations.inputOptionLabelsI18nPrefix}.${option}`);
}
return option;
}

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

@ -115,6 +115,38 @@ export const WithFavoritePet: Story = {
)
};
export const WithNewsletter: Story = {
render: () => (
<KcPageStory
kcContext={{
profile: {
attributesByName: {
newsletter: {
name: "newsletter",
displayName: "Sign up to the newsletter",
validators: {
options: {
options: ["yes"]
}
},
annotations: {
inputOptionLabels: {
"yes": "I want my email inbox filled with spam"
},
inputType: "multiselect-checkboxes"
},
required: false,
readOnly: false
} satisfies Attribute
}
},
}}
/>
)
};
export const WithEmailAsUsername: Story = {
render: () => (
<KcPageStory