@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/components/UserProfileFormFields/InputTag.tsx

@@ -1,116 +1,133 @@
-
-import { Input } from '@/components/ui/input';
-import { assert } from "tsafe/assert";
-import { useI18n } from "../../i18n";
-import { AddRemoveButtonsMultiValuedAttribute } from "./AddRemoveButtonsMultiValuedAttribute";
-import { FieldErrors } from "./FieldErrors";
-import type { InputFieldByTypeProps } from "./InputFieldByType";
-
-export function InputTag(
-    props: InputFieldByTypeProps & { fieldIndex: number | undefined }
-) {
-    const {
-        attribute,
-        fieldIndex,
-        dispatchFormAction,
-        valueOrValues,
-        displayableErrors
-    } = props;
-
-    const { advancedMsgStr } = useI18n();
-
-    return (
-        <>
-            <Input
-                type={(() => {
-                    const { inputType } = attribute.annotations;
-
-                    if (inputType?.startsWith("html5-")) {
-                        return inputType.slice(6);
-                    }
-
-                    return inputType ?? "text";
-                })()}
-                id={attribute.name}
-                name={attribute.name}
-                value={(() => {
-                    if (fieldIndex !== undefined) {
-                        assert(valueOrValues instanceof Array);
-                        return valueOrValues[fieldIndex];
-                    }
-
-                    assert(typeof valueOrValues === "string");
-
-                    return valueOrValues;
-                })()}
-                aria-invalid={displayableErrors.length !== 0}
-                disabled={attribute.readOnly}
-                autoComplete={attribute.autocomplete}
-                placeholder={
-                    attribute.annotations.inputTypePlaceholder === undefined ? undefined : advancedMsgStr(attribute.annotations.inputTypePlaceholder)
-                }
-                pattern={attribute.annotations.inputTypePattern}
-                size={attribute.annotations.inputTypeSize === undefined ? undefined : parseInt(`${attribute.annotations.inputTypeSize}`)}
-                maxLength={
-                    attribute.annotations.inputTypeMaxlength === undefined ? undefined : parseInt(`${attribute.annotations.inputTypeMaxlength}`)
-                }
-                minLength={
-                    attribute.annotations.inputTypeMinlength === undefined ? undefined : parseInt(`${attribute.annotations.inputTypeMinlength}`)
-                }
-                max={attribute.annotations.inputTypeMax}
-                min={attribute.annotations.inputTypeMin}
-                step={attribute.annotations.inputTypeStep}
-                {...Object.fromEntries(Object.entries(attribute.html5DataAnnotations ?? {}).map(([key, value]) => [`data-${key}`, value]))}
-                onChange={event =>
-                    dispatchFormAction({
-                        action: "update",
-                        name: attribute.name,
-                        valueOrValues: (() => {
-                            if (fieldIndex !== undefined) {
-                                assert(valueOrValues instanceof Array);
-
-                                return valueOrValues.map((value, i) => {
-                                    if (i === fieldIndex) {
-                                        return event.target.value;
-                                    }
-
-                                    return value;
-                                });
-                            }
-
-                            return event.target.value;
-                        })()
-                    })
-                }
-                onBlur={() =>
-                    dispatchFormAction({
-                        action: "focus lost",
-                        name: attribute.name,
-                        fieldIndex: fieldIndex
-                    })
-                }
-            />
-            {(() => {
-                if (fieldIndex === undefined) {
-                    return null;
-                }
-
-                assert(valueOrValues instanceof Array);
-
-                const values = valueOrValues;
-
-                return (
-                    <>
-                        <FieldErrors attribute={attribute} displayableErrors={displayableErrors} fieldIndex={fieldIndex} />
-                        <AddRemoveButtonsMultiValuedAttribute
-                            attribute={attribute}
-                            values={values}
-                            fieldIndex={fieldIndex}
-                            dispatchFormAction={dispatchFormAction}
-                        />
-                    </>
-                );
-            })()}
-        </>
-    );
-}
+import { Input } from "@/components/ui/input";
+import { assert } from "tsafe/assert";
+import { useI18n } from "../../i18n";
+import { AddRemoveButtonsMultiValuedAttribute } from "./AddRemoveButtonsMultiValuedAttribute";
+import { FieldErrors } from "./FieldErrors";
+import type { InputFieldByTypeProps } from "./InputFieldByType";
+
+export function InputTag(
+    props: InputFieldByTypeProps & { fieldIndex: number | undefined }
+) {
+    const {
+        attribute,
+        fieldIndex,
+        dispatchFormAction,
+        valueOrValues,
+        displayableErrors
+    } = props;
+
+    const { advancedMsgStr } = useI18n();
+
+    return (
+        <>
+            <Input
+                type={(() => {
+                    const { inputType } = attribute.annotations;
+
+                    if (inputType?.startsWith("html5-")) {
+                        return inputType.slice(6);
+                    }
+
+                    return inputType ?? "text";
+                })()}
+                id={attribute.name}
+                name={attribute.name}
+                value={(() => {
+                    if (fieldIndex !== undefined) {
+                        assert(valueOrValues instanceof Array);
+                        return valueOrValues[fieldIndex];
+                    }
+
+                    assert(typeof valueOrValues === "string");
+
+                    return valueOrValues;
+                })()}
+                aria-invalid={displayableErrors.length !== 0}
+                disabled={attribute.readOnly}
+                autoComplete={attribute.autocomplete}
+                placeholder={
+                    attribute.annotations.inputTypePlaceholder === undefined
+                        ? undefined
+                        : advancedMsgStr(attribute.annotations.inputTypePlaceholder)
+                }
+                pattern={attribute.annotations.inputTypePattern}
+                size={
+                    attribute.annotations.inputTypeSize === undefined
+                        ? undefined
+                        : parseInt(`${attribute.annotations.inputTypeSize}`)
+                }
+                maxLength={
+                    attribute.annotations.inputTypeMaxlength === undefined
+                        ? undefined
+                        : parseInt(`${attribute.annotations.inputTypeMaxlength}`)
+                }
+                minLength={
+                    attribute.annotations.inputTypeMinlength === undefined
+                        ? undefined
+                        : parseInt(`${attribute.annotations.inputTypeMinlength}`)
+                }
+                max={attribute.annotations.inputTypeMax}
+                min={attribute.annotations.inputTypeMin}
+                step={attribute.annotations.inputTypeStep}
+                {...Object.fromEntries(
+                    Object.entries(attribute.html5DataAnnotations ?? {}).map(
+                        ([key, value]) => [`data-${key}`, value]
+                    )
+                )}
+                onChange={event =>
+                    dispatchFormAction({
+                        action: "update",
+                        name: attribute.name,
+                        valueOrValues: (() => {
+                            if (fieldIndex !== undefined) {
+                                assert(valueOrValues instanceof Array);
+
+                                return valueOrValues.map((value, i) => {
+                                    if (i === fieldIndex) {
+                                        return event.target.value;
+                                    }
+
+                                    return value;
+                                });
+                            }
+
+                            return event.target.value;
+                        })()
+                    })
+                }
+                onBlur={() =>
+                    dispatchFormAction({
+                        action: "focus lost",
+                        name: attribute.name,
+                        fieldIndex: fieldIndex
+                    })
+                }
+            />
+            {(() => {
+                if (fieldIndex === undefined) {
+                    return null;
+                }
+
+                assert(valueOrValues instanceof Array);
+
+                const values = valueOrValues;
+
+                return (
+                    <>
+                        <FieldErrors
+                            attribute={attribute}
+                            displayableErrors={displayableErrors}
+                            fieldIndex={fieldIndex}
+                        />
+                        <AddRemoveButtonsMultiValuedAttribute
+                            attribute={attribute}
+                            values={values}
+                            fieldIndex={fieldIndex}
+                            dispatchFormAction={dispatchFormAction}
+                        />
+                    </>
+                );
+            })()}
+        </>
+    );
+}

package/keycloak-theme/login/components/UserProfileFormFields/InputTagSelects.tsx

@@ -1,136 +1,150 @@
-
-import { cn } from '@/components/lib/utils';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Label } from '@/components/ui/label';
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
-import { assert } from 'tsafe/assert';
-import type { InputFieldByTypeProps } from "./InputFieldByType";
-import { InputLabel } from './InputLabel';
-
-export function InputTagSelects(props: InputFieldByTypeProps) {
-    const { attribute, dispatchFormAction, valueOrValues } = props;
-
-
-
-    const isRadio = (() => {
-        const { inputType } = attribute.annotations;
-
-        assert(inputType === "select-radiobuttons" || inputType === "multiselect-checkboxes");
-
-        return inputType === "select-radiobuttons";
-    })();
-
-    const options = (() => {
-        walk: {
-            const { inputOptionsFromValidation } = attribute.annotations;
-
-            if (inputOptionsFromValidation === undefined) {
-                break walk;
-            }
-
-            const validator = (attribute.validators as Record<string, { options?: string[] }>)[inputOptionsFromValidation];
-
-            if (validator === undefined) {
-                break walk;
-            }
-
-            if (validator.options === undefined) {
-                break walk;
-            }
-
-            return validator.options;
-        }
-
-        return attribute.validators.options?.options ?? [];
-    })();
-
-    if (isRadio) {
-        return (
-            <RadioGroup
-                value={typeof valueOrValues === "string" ? valueOrValues : ""}
-                onValueChange={value =>
-                    dispatchFormAction({
-                        action: "update",
-                        name: attribute.name,
-                        valueOrValues: value
-                    })
-                }
-                disabled={attribute.readOnly}
-                className="space-y-2"
-            >
-                {options.map(option => (
-                    <div key={option} className="flex items-center space-x-2">
-                        <RadioGroupItem
-                            value={option}
-                            id={`${attribute.name}-${option}`}
-                            aria-invalid={props.displayableErrors.length !== 0}
-                            onBlur={() =>
-                                dispatchFormAction({
-                                    action: "focus lost",
-                                    name: attribute.name,
-                                    fieldIndex: undefined
-                                })
-                            }
-                        />
-                        <Label
-                            htmlFor={`${attribute.name}-${option}`}
-                            className={cn("text-sm font-normal", attribute.readOnly && "opacity-50 cursor-not-allowed")}
-                        >
-                            <InputLabel attribute={attribute} option={option} />
-                        </Label>
-                    </div>
-                ))}
-            </RadioGroup>
-        );
-    }
-
-    return (
-        <div className="space-y-2">
-            {options.map(option => (
-                <div key={option} className="flex items-center space-x-2">
-                    <Checkbox
-                        id={`${attribute.name}-${option}`}
-                        checked={valueOrValues instanceof Array ? valueOrValues.includes(option) : valueOrValues === option}
-                        disabled={attribute.readOnly}
-                        onCheckedChange={checked =>
-                            dispatchFormAction({
-                                action: "update",
-                                name: attribute.name,
-                                valueOrValues: (() => {
-                                    const isChecked = checked === true;
-
-                                    if (valueOrValues instanceof Array) {
-                                        const newValues = [...valueOrValues];
-
-                                        if (isChecked) {
-                                            newValues.push(option);
-                                        } else {
-                                            newValues.splice(newValues.indexOf(option), 1);
-                                        }
-
-                                        return newValues;
-                                    }
-
-                                    return isChecked ? option : "";
-                                })()
-                            })
-                        }
-                        onBlur={() =>
-                            dispatchFormAction({
-                                action: "focus lost",
-                                name: attribute.name,
-                                fieldIndex: undefined
-                            })
-                        }
-                    />
-                    <Label
-                        htmlFor={`${attribute.name}-${option}`}
-                        className={cn("text-sm font-normal", attribute.readOnly && "opacity-50 cursor-not-allowed")}
-                    >
-                        <InputLabel attribute={attribute} option={option} />
-                    </Label>
-                </div>
-            ))}
-        </div>
-    );
-}
+import { cn } from "@/components/lib/utils";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { assert } from "tsafe/assert";
+import type { InputFieldByTypeProps } from "./InputFieldByType";
+import { InputLabel } from "./InputLabel";
+
+export function InputTagSelects(props: InputFieldByTypeProps) {
+    const { attribute, dispatchFormAction, valueOrValues } = props;
+
+    const isRadio = (() => {
+        const { inputType } = attribute.annotations;
+
+        assert(
+            inputType === "select-radiobuttons" || inputType === "multiselect-checkboxes"
+        );
+
+        return inputType === "select-radiobuttons";
+    })();
+
+    const options = (() => {
+        walk: {
+            const { inputOptionsFromValidation } = attribute.annotations;
+
+            if (inputOptionsFromValidation === undefined) {
+                break walk;
+            }
+
+            const validator = (
+                attribute.validators as Record<string, { options?: string[] }>
+            )[inputOptionsFromValidation];
+
+            if (validator === undefined) {
+                break walk;
+            }
+
+            if (validator.options === undefined) {
+                break walk;
+            }
+
+            return validator.options;
+        }
+
+        return attribute.validators.options?.options ?? [];
+    })();
+
+    if (isRadio) {
+        return (
+            <RadioGroup
+                value={typeof valueOrValues === "string" ? valueOrValues : ""}
+                onValueChange={value =>
+                    dispatchFormAction({
+                        action: "update",
+                        name: attribute.name,
+                        valueOrValues: value
+                    })
+                }
+                disabled={attribute.readOnly}
+                className="space-y-2"
+            >
+                {options.map(option => (
+                    <div key={option} className="flex items-center space-x-2">
+                        <RadioGroupItem
+                            value={option}
+                            id={`${attribute.name}-${option}`}
+                            aria-invalid={props.displayableErrors.length !== 0}
+                            onBlur={() =>
+                                dispatchFormAction({
+                                    action: "focus lost",
+                                    name: attribute.name,
+                                    fieldIndex: undefined
+                                })
+                            }
+                        />
+                        <Label
+                            htmlFor={`${attribute.name}-${option}`}
+                            className={cn(
+                                "text-sm font-normal",
+                                attribute.readOnly && "opacity-50 cursor-not-allowed"
+                            )}
+                        >
+                            <InputLabel attribute={attribute} option={option} />
+                        </Label>
+                    </div>
+                ))}
+            </RadioGroup>
+        );
+    }
+
+    return (
+        <div className="space-y-2">
+            {options.map(option => (
+                <div key={option} className="flex items-center space-x-2">
+                    <Checkbox
+                        id={`${attribute.name}-${option}`}
+                        checked={
+                            valueOrValues instanceof Array
+                                ? valueOrValues.includes(option)
+                                : valueOrValues === option
+                        }
+                        disabled={attribute.readOnly}
+                        onCheckedChange={checked =>
+                            dispatchFormAction({
+                                action: "update",
+                                name: attribute.name,
+                                valueOrValues: (() => {
+                                    const isChecked = checked === true;
+
+                                    if (valueOrValues instanceof Array) {
+                                        const newValues = [...valueOrValues];
+
+                                        if (isChecked) {
+                                            newValues.push(option);
+                                        } else {
+                                            newValues.splice(
+                                                newValues.indexOf(option),
+                                                1
+                                            );
+                                        }
+
+                                        return newValues;
+                                    }
+
+                                    return isChecked ? option : "";
+                                })()
+                            })
+                        }
+                        onBlur={() =>
+                            dispatchFormAction({
+                                action: "focus lost",
+                                name: attribute.name,
+                                fieldIndex: undefined
+                            })
+                        }
+                    />
+                    <Label
+                        htmlFor={`${attribute.name}-${option}`}
+                        className={cn(
+                            "text-sm font-normal",
+                            attribute.readOnly && "opacity-50 cursor-not-allowed"
+                        )}
+                    >
+                        <InputLabel attribute={attribute} option={option} />
+                    </Label>
+                </div>
+            ))}
+        </div>
+    );
+}