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

Feature TextArea

Browse Source
This commit is contained in:
Joseph Garrone 2024-04-28 19:35:16 +02:00
parent 9c6e3da304
commit 8f627aa382
1 changed files with 47 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

133
src/login/pages/shared/UserProfileFormFields.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState, Fragment } from "react";
import { useEffect, Fragment } from "react";
import type { ClassKey } from "keycloakify/login/TemplateProps";
import { clsx } from "keycloakify/tools/clsx";
import {
@ -36,7 +36,7 @@ const doMakeUserConfirmPassword = true;
export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
const { kcContext, onIsFormSubmittableValueChange, i18n, getClassName, BeforeField, AfterField } = props;
const { advancedMsg, msg } = i18n;
const { advancedMsg } = i18n;
const {
formState: { formFieldStates, isFormSubmittable },
@ -82,9 +82,7 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
)}
<div
className={formGroupClassName}
style={{
"display": attribute.name === "password-confirm" && !doMakeUserConfirmPassword ? "none" : undefined
}}
style={{ "display": attribute.name === "password-confirm" && !doMakeUserConfirmPassword ? "none" : undefined }}
>
<div className={getClassName("kcLabelWrapperClass")}>
<label htmlFor={attribute.name} className={getClassName("kcLabelClass")}>
@ -155,80 +153,6 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
</#list>
*/}
{(() => {
/*
const { options } = attribute.validators;
if (options !== undefined) {
return (
<select
id={attribute.name}
name={attribute.name}
onChange={event =>
formValidationDispatch({
"action": "update value",
"name": attribute.name,
"newValue": event.target.value
})
}
onBlur={() =>
formValidationDispatch({
"action": "focus lost",
"name": attribute.name
})
}
value={value}
>
<>
<option value="" selected disabled hidden>
{msg("selectAnOption")}
</option>
{options.options.map(option => (
<option key={option} value={option}>
{option}
</option>
))}
</>
</select>
);
}
return (
<input
type={(() => {
switch (attribute.name) {
case "password-confirm":
case "password":
return "password";
default:
return "text";
}
})()}
id={attribute.name}
name={attribute.name}
value={value}
onChange={event =>
formValidationDispatch({
"action": "update value",
"name": attribute.name,
"newValue": event.target.value
})
}
onBlur={() =>
formValidationDispatch({
"action": "focus lost",
"name": attribute.name
})
}
className={getClassName("kcInputClass")}
aria-invalid={displayableErrors.length !== 0}
disabled={attribute.readOnly}
autoComplete={attribute.autocomplete}
/>
);
*/
})()}
</div>
</div>
</Fragment>
@ -465,22 +389,25 @@ function AddRemoveButtonsMultiValuedAttribute(props: {
})
}
>
{msg("add value")}
{msg("addValue")}
</button>
)}
</>
);
}
function InputFiledByType(props: {
type PropsOfInputFiledByType = {
attribute: Attribute;
index: number;
value: string;
displayableErrors: FormFieldError[];
formValidationDispatch: React.Dispatch<FormAction>;
getClassName: UserProfileFormFieldsProps["getClassName"];
i18n: I18n;
}) {
const { attribute, formValidationDispatch, getClassName, i18n } = props;
};
function InputFiledByType(props: PropsOfInputFiledByType) {
const { attribute } = props;
/*
<#macro inputFieldByType attribute>
@ -510,13 +437,47 @@ function InputFiledByType(props: {
switch (attribute.annotations.inputType) {
case "textarea":
return <textareaTag {...props} />;
return <TextareaTag {...props} />;
case "select":
case "multiselect":
return <selectTag {...props} />;
return <SelectTag {...props} />;
case "select-radiobuttons":
case "multiselect-checkboxes":
return <inputTagSelects {...props} />;
return <InputTagSelects {...props} />;
default:
return <InputTag {...props} />;
}
}
function TextareaTag(props: PropsOfInputFiledByType) {
const { attribute, index, value, formValidationDispatch, getClassName, displayableErrors } = props;
return (
<textarea
id={`${attribute.name}-${index === 0 ? "" : index + 1}`}
name={attribute.name}
className={getClassName("kcInputClass")}
aria-invalid={displayableErrors.length !== 0}
disabled={attribute.readOnly}
cols={attribute.annotations.inputTypeCols === undefined ? undefined : parseInt(attribute.annotations.inputTypeCols)}
rows={attribute.annotations.inputTypeRows === undefined ? undefined : parseInt(attribute.annotations.inputTypeRows)}
maxLength={attribute.annotations.inputTypeMaxlength === undefined ? undefined : parseInt(attribute.annotations.inputTypeMaxlength)}
value={value}
onChange={event =>
formValidationDispatch({
"action": "update value",
"name": attribute.name,
index,
"newValue": event.target.value
})
}
onBlur={() =>
formValidationDispatch({
"action": "focus lost",
"name": attribute.name,
index
})
}
/>
);
}