diff --git a/src/login/pages/shared/UserProfileFormFields.tsx b/src/login/pages/shared/UserProfileFormFields.tsx index 1d311999..32be7f49 100644 --- a/src/login/pages/shared/UserProfileFormFields.tsx +++ b/src/login/pages/shared/UserProfileFormFields.tsx @@ -125,14 +125,7 @@ export function UserProfileFormFields(props: UserProfileFormFieldsProps) { valueOrValues={valueOrValues} /> )} - {/* - TODO: - - <#list profile.html5DataAnnotations?keys as key> - - - - */} + {/* NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook */} @@ -279,32 +272,6 @@ type PropsOfInputFiledByType = { function InputFiledByType(props: PropsOfInputFiledByType) { const { attribute, valueOrValues } = props; - /* - <#macro inputFieldByType attribute> - <#switch attribute.annotations.inputType!''> - <#case 'textarea'> - <@textareaTag attribute=attribute/> - <#break> - <#case 'select'> - <#case 'multiselect'> - <@selectTag attribute=attribute/> - <#break> - <#case 'select-radiobuttons'> - <#case 'multiselect-checkboxes'> - <@inputTagSelects attribute=attribute/> - <#break> - <#default> - <#if attribute.multivalued && attribute.values?has_content> - <#list attribute.values as value> - <@inputTag attribute=attribute value=value!''/> - - <#else> - <@inputTag attribute=attribute value=attribute.value!''/> - - - - */ - switch (attribute.annotations.inputType) { case "textarea": return ; @@ -330,43 +297,6 @@ function InputFiledByType(props: PropsOfInputFiledByType) { } function InputTag(props: PropsOfInputFiledByType & { fieldIndex: number | undefined }) { - /* - <#macro inputTag attribute value> - disabled - <#if attribute.autocomplete??>autocomplete="${attribute.autocomplete}" - <#if attribute.annotations.inputTypePlaceholder??>placeholder="${attribute.annotations.inputTypePlaceholder}" - <#if attribute.annotations.inputTypePattern??>pattern="${attribute.annotations.inputTypePattern}" - <#if attribute.annotations.inputTypeSize??>size="${attribute.annotations.inputTypeSize}" - <#if attribute.annotations.inputTypeMaxlength??>maxlength="${attribute.annotations.inputTypeMaxlength}" - <#if attribute.annotations.inputTypeMinlength??>minlength="${attribute.annotations.inputTypeMinlength}" - <#if attribute.annotations.inputTypeMax??>max="${attribute.annotations.inputTypeMax}" - <#if attribute.annotations.inputTypeMin??>min="${attribute.annotations.inputTypeMin}" - <#if attribute.annotations.inputTypeStep??>step="${attribute.annotations.inputTypeStep}" - <#if attribute.annotations.inputTypeStep??>step="${attribute.annotations.inputTypeStep}" - <#list attribute.html5DataAnnotations as key, value> - data-${key}="${value}" - - /> - - - <#macro inputTagType attribute> - <#compress> - <#if attribute.annotations.inputType??> - <#if attribute.annotations.inputType?starts_with("html5-")> - ${attribute.annotations.inputType[6..]} - <#else> - ${attribute.annotations.inputType} - - <#else> - text - - - - - */ - const { attribute, fieldIndex, getClassName, formValidationDispatch, valueOrValues, i18n, displayableErrors } = props; return ( @@ -582,41 +512,6 @@ function AddRemoveButtonsMultiValuedAttribute(props: { } function InputTagSelects(props: PropsOfInputFiledByType) { - /* -<#macro inputTagSelects attribute> - <#if attribute.annotations.inputType=='select-radiobuttons'> - <#assign inputType='radio'> - <#assign classDiv=properties.kcInputClassRadio!> - <#assign classInput=properties.kcInputClassRadioInput!> - <#assign classLabel=properties.kcInputClassRadioLabel!> - <#else> - <#assign inputType='checkbox'> - <#assign classDiv=properties.kcInputClassCheckbox!> - <#assign classInput=properties.kcInputClassCheckboxInput!> - <#assign classLabel=properties.kcInputClassCheckboxLabel!> - - - <#if attribute.annotations.inputOptionsFromValidation?? && attribute.validators[attribute.annotations.inputOptionsFromValidation]?? && attribute.validators[attribute.annotations.inputOptionsFromValidation].options??> - <#assign options=attribute.validators[attribute.annotations.inputOptionsFromValidation].options> - <#elseif attribute.validators.options?? && attribute.validators.options.options??> - <#assign options=attribute.validators.options.options> - <#else> - <#assign options=[]> - - - <#list options as option> -
- disabled - <#if attribute.values?seq_contains(option)>checked - /> - -
- - - */ - const { attribute, formValidationDispatch, getClassName, valueOrValues } = props; const { advancedMsg } = props.i18n; diff --git a/src/tools/formatNumber.ts b/src/tools/formatNumber.ts new file mode 100644 index 00000000..a21f7652 --- /dev/null +++ b/src/tools/formatNumber.ts @@ -0,0 +1,48 @@ +export const formatNumber = (input: string, format: string): string => { + if (!input) { + return ""; + } + + // array holding the patterns for the number of expected digits in each part + const digitPattern = format.match(/{\d+}/g); + + if (!digitPattern) { + return ""; + } + + // calculate the maximum size of the given pattern based on the sum of the expected digits + const maxSize = digitPattern.reduce((total, p) => total + parseInt(p.replace("{", "").replace("}", "")), 0); + + // keep only digits + let rawValue = input.replace(/\D+/g, ""); + + // make sure the value is a number + if (`${parseInt(rawValue)}` !== rawValue) { + return ""; + } + + // make sure the number of digits does not exceed the maximum size + if (rawValue.length > maxSize) { + rawValue = rawValue.substring(0, maxSize); + } + + // build the regex based based on the expected digits in each part + const formatter = digitPattern.reduce((result, p) => result + `(\\d${p})`, "^"); + + // if the current digits match the pattern we have each group of digits in an array + let digits = new RegExp(formatter).exec(rawValue); + + // no match, return the raw value without any format + if (!digits) { + return input; + } + + let result = format; + + // finally format the current digits accordingly to the given format + for (let i = 0; i < digitPattern.length; i++) { + result = result.replace(digitPattern[i], digits[i + 1]); + } + + return result; +};