@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

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

@@ -1,114 +1,135 @@
-
-
-import { cn } from '@/components/lib/utils';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { assert } from "tsafe/assert";
-import type { InputFieldByTypeProps } from "./InputFieldByType";
-import { InputLabel } from './InputLabel';
-
-export function SelectTag(props: InputFieldByTypeProps) {
-    const { attribute, dispatchFormAction, displayableErrors, valueOrValues } = props;
-
-    const isMultiple = attribute.annotations.inputType === "multiselect";
-
-    const options = (() => {
-        walk: {
-            const { inputOptionsFromValidation } = attribute.annotations;
-
-            if (inputOptionsFromValidation === undefined) {
-                break walk;
-            }
-
-            assert(typeof inputOptionsFromValidation === "string");
-
-            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 ?? [];
-    })();
-
-    // For multiselect, fall back to native select as shadcn doesn't support multi-select
-    if (isMultiple) {
-        return (
-            <select
-                id={attribute.name}
-                name={attribute.name}
-                className={cn(
-                    "flex min-h-25 h-auto w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                    displayableErrors.length !== 0 && "border-destructive ring-destructive/20 focus:ring-destructive"
-                )}
-                aria-invalid={displayableErrors.length !== 0}
-                disabled={attribute.readOnly}
-                multiple={true}
-                size={attribute.annotations.inputTypeSize === undefined ? undefined : parseInt(`${attribute.annotations.inputTypeSize}`)}
-                value={valueOrValues}
-                onChange={event =>
-                    dispatchFormAction({
-                        action: "update",
-                        name: attribute.name,
-                        valueOrValues: Array.from(event.target.selectedOptions).map(option => option.value)
-                    })
-                }
-                onBlur={() =>
-                    dispatchFormAction({
-                        action: "focus lost",
-                        name: attribute.name,
-                        fieldIndex: undefined
-                    })
-                }
-            >
-                {options.map(option => (
-                    <option key={option} value={option}>
-                        <InputLabel attribute={attribute} option={option} />
-                    </option>
-                ))}
-            </select>
-        );
-    }
-
-    return (
-        <Select
-            value={typeof valueOrValues === "string" && valueOrValues !== "" ? valueOrValues : undefined}
-            onValueChange={value =>
-                dispatchFormAction({
-                    action: "update",
-                    name: attribute.name,
-                    valueOrValues: value
-                })
-            }
-            disabled={attribute.readOnly}
-        >
-            <SelectTrigger
-                id={attribute.name}
-                className={cn("w-full", displayableErrors.length !== 0 && "border-destructive ring-destructive/20 focus-visible:ring-destructive")}
-                aria-invalid={displayableErrors.length !== 0}
-                onBlur={() =>
-                    dispatchFormAction({
-                        action: "focus lost",
-                        name: attribute.name,
-                        fieldIndex: undefined
-                    })
-                }
-            >
-                <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent>
-                {options.map(option => (
-                    <SelectItem key={option} value={option}>
-                        <InputLabel attribute={attribute} option={option} />
-                    </SelectItem>
-                ))}
-            </SelectContent>
-        </Select>
-    );
-}
+import { cn } from "@/components/lib/utils";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@/components/ui/select";
+import { assert } from "tsafe/assert";
+import type { InputFieldByTypeProps } from "./InputFieldByType";
+import { InputLabel } from "./InputLabel";
+
+export function SelectTag(props: InputFieldByTypeProps) {
+    const { attribute, dispatchFormAction, displayableErrors, valueOrValues } = props;
+
+    const isMultiple = attribute.annotations.inputType === "multiselect";
+
+    const options = (() => {
+        walk: {
+            const { inputOptionsFromValidation } = attribute.annotations;
+
+            if (inputOptionsFromValidation === undefined) {
+                break walk;
+            }
+
+            assert(typeof inputOptionsFromValidation === "string");
+
+            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 ?? [];
+    })();
+
+    // For multiselect, fall back to native select as shadcn doesn't support multi-select
+    if (isMultiple) {
+        return (
+            <select
+                id={attribute.name}
+                name={attribute.name}
+                className={cn(
+                    "flex min-h-25 h-auto w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                    displayableErrors.length !== 0 &&
+                        "border-destructive ring-destructive/20 focus:ring-destructive"
+                )}
+                aria-invalid={displayableErrors.length !== 0}
+                disabled={attribute.readOnly}
+                multiple={true}
+                size={
+                    attribute.annotations.inputTypeSize === undefined
+                        ? undefined
+                        : parseInt(`${attribute.annotations.inputTypeSize}`)
+                }
+                value={valueOrValues}
+                onChange={event =>
+                    dispatchFormAction({
+                        action: "update",
+                        name: attribute.name,
+                        valueOrValues: Array.from(event.target.selectedOptions).map(
+                            option => option.value
+                        )
+                    })
+                }
+                onBlur={() =>
+                    dispatchFormAction({
+                        action: "focus lost",
+                        name: attribute.name,
+                        fieldIndex: undefined
+                    })
+                }
+            >
+                {options.map(option => (
+                    <option key={option} value={option}>
+                        <InputLabel attribute={attribute} option={option} />
+                    </option>
+                ))}
+            </select>
+        );
+    }
+
+    return (
+        <Select
+            value={
+                typeof valueOrValues === "string" && valueOrValues !== ""
+                    ? valueOrValues
+                    : undefined
+            }
+            onValueChange={value =>
+                dispatchFormAction({
+                    action: "update",
+                    name: attribute.name,
+                    valueOrValues: value
+                })
+            }
+            disabled={attribute.readOnly}
+        >
+            <SelectTrigger
+                id={attribute.name}
+                className={cn(
+                    "w-full",
+                    displayableErrors.length !== 0 &&
+                        "border-destructive ring-destructive/20 focus-visible:ring-destructive"
+                )}
+                aria-invalid={displayableErrors.length !== 0}
+                onBlur={() =>
+                    dispatchFormAction({
+                        action: "focus lost",
+                        name: attribute.name,
+                        fieldIndex: undefined
+                    })
+                }
+            >
+                <SelectValue placeholder="Select an option" />
+            </SelectTrigger>
+            <SelectContent>
+                {options.map(option => (
+                    <SelectItem key={option} value={option}>
+                        <InputLabel attribute={attribute} option={option} />
+                    </SelectItem>
+                ))}
+            </SelectContent>
+        </Select>
+    );
+}

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

@@ -1,43 +1,55 @@
-
-import { cn } from '@/components/lib/utils';
-import { assert } from "tsafe/assert";
-import type { InputFieldByTypeProps } from "./InputFieldByType";
-
-export function TextareaTag(props: InputFieldByTypeProps) {
-    const { attribute, dispatchFormAction, displayableErrors, valueOrValues } = props;
-
-    assert(typeof valueOrValues === "string");
-
-    const value = valueOrValues;
-
-    return (
-        <textarea
-            id={attribute.name}
-            name={attribute.name}
-            className={cn(
-                "flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                displayableErrors.length !== 0 && "border-destructive ring-destructive/20 focus-visible:ring-destructive"
-            )}
-            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 =>
-                dispatchFormAction({
-                    action: "update",
-                    name: attribute.name,
-                    valueOrValues: event.target.value
-                })
-            }
-            onBlur={() =>
-                dispatchFormAction({
-                    action: "focus lost",
-                    name: attribute.name,
-                    fieldIndex: undefined
-                })
-            }
-        />
-    );
-}
+import { cn } from "@/components/lib/utils";
+import { assert } from "tsafe/assert";
+import type { InputFieldByTypeProps } from "./InputFieldByType";
+
+export function TextareaTag(props: InputFieldByTypeProps) {
+    const { attribute, dispatchFormAction, displayableErrors, valueOrValues } = props;
+
+    assert(typeof valueOrValues === "string");
+
+    const value = valueOrValues;
+
+    return (
+        <textarea
+            id={attribute.name}
+            name={attribute.name}
+            className={cn(
+                "flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+                displayableErrors.length !== 0 &&
+                    "border-destructive ring-destructive/20 focus-visible:ring-destructive"
+            )}
+            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 =>
+                dispatchFormAction({
+                    action: "update",
+                    name: attribute.name,
+                    valueOrValues: event.target.value
+                })
+            }
+            onBlur={() =>
+                dispatchFormAction({
+                    action: "focus lost",
+                    name: attribute.name,
+                    fieldIndex: undefined
+                })
+            }
+        />
+    );
+}

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

@@ -1,127 +1,133 @@
-
-import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
-import type { Attribute } from "@keycloakify/login-ui/KcContext";
-import type { JSX } from "@keycloakify/login-ui/tools/JSX";
-import {
-    useUserProfileForm,
-    type FormAction,
-    type FormFieldError
-} from "@keycloakify/login-ui/useUserProfileForm";
-import { Fragment, useEffect } from "react";
-import { assert } from "tsafe/assert";
-import { useKcContext } from "../../KcContext";
-import { useI18n } from "../../i18n";
-import { DO_MAKE_USER_CONFIRM_PASSWORD } from "./DO_MAKE_USER_CONFIRM_PASSWORD";
-import { FieldErrors } from "./FieldErrors";
-import { GroupLabel } from "./GroupLabel";
-import { InputFieldByType } from "./InputFieldByType";
-
-export type UserProfileFormFieldsProps = {
-    onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
-    BeforeField?: (props: BeforeAfterFieldProps) => JSX.Element | null;
-    AfterField?: (props: BeforeAfterFieldProps) => JSX.Element | null;
-};
-
-type BeforeAfterFieldProps = {
-    attribute: Attribute;
-    dispatchFormAction: React.Dispatch<FormAction>;
-    displayableErrors: FormFieldError[];
-    valueOrValues: string | string[];
-};
-
-export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
-    const { onIsFormSubmittableValueChange, BeforeField, AfterField } = props;
-
-    const { kcContext } = useKcContext();
-
-    assert("profile" in kcContext);
-
-    const i18n = useI18n();
-
-    const { advancedMsg } = i18n;
-
-    const {
-        formState: { formFieldStates, isFormSubmittable },
-        dispatchFormAction
-    } = useUserProfileForm({
-        kcContext,
-        i18n,
-        doMakeUserConfirmPassword: DO_MAKE_USER_CONFIRM_PASSWORD
-    });
-
-    useEffect(() => {
-        onIsFormSubmittableValueChange(isFormSubmittable);
-    }, [isFormSubmittable]);
-
-    const groupNameRef = { current: "" };
-
-    return (
-        <>
-            {formFieldStates.map(({ attribute, displayableErrors, valueOrValues }) => {
-                return (
-                    <Fragment key={attribute.name}>
-                        <GroupLabel attribute={attribute} groupNameRef={groupNameRef} />
-                        {BeforeField !== undefined && (
-                            <BeforeField
-                                attribute={attribute}
-                                dispatchFormAction={dispatchFormAction}
-                                displayableErrors={displayableErrors}
-                                valueOrValues={valueOrValues}
-                            />
-                        )}
-                        <Field
-                            data-invalid={displayableErrors.length > 0 ? "true" : undefined}
-                            style={{
-                                display:
-                                    attribute.annotations.inputType === "hidden"
-                                        ? "none"
-                                        : undefined
-                            }}
-                        >
-                            <FieldLabel htmlFor={attribute.name}>
-                                {advancedMsg(attribute.displayName ?? "")}
-                                {attribute.required && <> *</>}
-                            </FieldLabel>
-                            {attribute.annotations.inputHelperTextBefore !== undefined && (
-                                <FieldDescription
-                                    id={`form-help-text-before-${attribute.name}`}
-                                    aria-live="polite"
-                                >
-                                    {advancedMsg(attribute.annotations.inputHelperTextBefore)}
-                                </FieldDescription>
-                            )}
-                            <InputFieldByType
-                                attribute={attribute}
-                                valueOrValues={valueOrValues}
-                                displayableErrors={displayableErrors}
-                                dispatchFormAction={dispatchFormAction}
-                            />
-                            <FieldErrors
-                                attribute={attribute}
-                                displayableErrors={displayableErrors}
-                                fieldIndex={undefined}
-                            />
-                            {attribute.annotations.inputHelperTextAfter !== undefined && (
-                                <FieldDescription
-                                    id={`form-help-text-after-${attribute.name}`}
-                                    aria-live="polite"
-                                >
-                                    {advancedMsg(attribute.annotations.inputHelperTextAfter)}
-                                </FieldDescription>
-                            )}
-                            {AfterField !== undefined && (
-                                <AfterField
-                                    attribute={attribute}
-                                    dispatchFormAction={dispatchFormAction}
-                                    displayableErrors={displayableErrors}
-                                    valueOrValues={valueOrValues}
-                                />
-                            )}
-                            {/* NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook */}
-                        </Field>
-                    </Fragment>
-                );
-            })}
-        </>
-    );
-}
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
+import type { Attribute } from "@keycloakify/login-ui/KcContext";
+import type { JSX } from "@keycloakify/login-ui/tools/JSX";
+import {
+    useUserProfileForm,
+    type FormAction,
+    type FormFieldError
+} from "@keycloakify/login-ui/useUserProfileForm";
+import { Fragment, useEffect } from "react";
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { useI18n } from "../../i18n";
+import { DO_MAKE_USER_CONFIRM_PASSWORD } from "./DO_MAKE_USER_CONFIRM_PASSWORD";
+import { FieldErrors } from "./FieldErrors";
+import { GroupLabel } from "./GroupLabel";
+import { InputFieldByType } from "./InputFieldByType";
+
+export type UserProfileFormFieldsProps = {
+    onIsFormSubmittableValueChange: (isFormSubmittable: boolean) => void;
+    BeforeField?: (props: BeforeAfterFieldProps) => JSX.Element | null;
+    AfterField?: (props: BeforeAfterFieldProps) => JSX.Element | null;
+};
+
+type BeforeAfterFieldProps = {
+    attribute: Attribute;
+    dispatchFormAction: React.Dispatch<FormAction>;
+    displayableErrors: FormFieldError[];
+    valueOrValues: string | string[];
+};
+
+export function UserProfileFormFields(props: UserProfileFormFieldsProps) {
+    const { onIsFormSubmittableValueChange, BeforeField, AfterField } = props;
+
+    const { kcContext } = useKcContext();
+
+    assert("profile" in kcContext);
+
+    const i18n = useI18n();
+
+    const { advancedMsg } = i18n;
+
+    const {
+        formState: { formFieldStates, isFormSubmittable },
+        dispatchFormAction
+    } = useUserProfileForm({
+        kcContext,
+        i18n,
+        doMakeUserConfirmPassword: DO_MAKE_USER_CONFIRM_PASSWORD
+    });
+
+    useEffect(() => {
+        onIsFormSubmittableValueChange(isFormSubmittable);
+    }, [isFormSubmittable]);
+
+    const groupNameRef = { current: "" };
+
+    return (
+        <>
+            {formFieldStates.map(({ attribute, displayableErrors, valueOrValues }) => {
+                return (
+                    <Fragment key={attribute.name}>
+                        <GroupLabel attribute={attribute} groupNameRef={groupNameRef} />
+                        {BeforeField !== undefined && (
+                            <BeforeField
+                                attribute={attribute}
+                                dispatchFormAction={dispatchFormAction}
+                                displayableErrors={displayableErrors}
+                                valueOrValues={valueOrValues}
+                            />
+                        )}
+                        <Field
+                            data-invalid={
+                                displayableErrors.length > 0 ? "true" : undefined
+                            }
+                            style={{
+                                display:
+                                    attribute.annotations.inputType === "hidden"
+                                        ? "none"
+                                        : undefined
+                            }}
+                        >
+                            <FieldLabel htmlFor={attribute.name}>
+                                {advancedMsg(attribute.displayName ?? "")}
+                                {attribute.required && <> *</>}
+                            </FieldLabel>
+                            {attribute.annotations.inputHelperTextBefore !==
+                                undefined && (
+                                <FieldDescription
+                                    id={`form-help-text-before-${attribute.name}`}
+                                    aria-live="polite"
+                                >
+                                    {advancedMsg(
+                                        attribute.annotations.inputHelperTextBefore
+                                    )}
+                                </FieldDescription>
+                            )}
+                            <InputFieldByType
+                                attribute={attribute}
+                                valueOrValues={valueOrValues}
+                                displayableErrors={displayableErrors}
+                                dispatchFormAction={dispatchFormAction}
+                            />
+                            <FieldErrors
+                                attribute={attribute}
+                                displayableErrors={displayableErrors}
+                                fieldIndex={undefined}
+                            />
+                            {attribute.annotations.inputHelperTextAfter !== undefined && (
+                                <FieldDescription
+                                    id={`form-help-text-after-${attribute.name}`}
+                                    aria-live="polite"
+                                >
+                                    {advancedMsg(
+                                        attribute.annotations.inputHelperTextAfter
+                                    )}
+                                </FieldDescription>
+                            )}
+                            {AfterField !== undefined && (
+                                <AfterField
+                                    attribute={attribute}
+                                    dispatchFormAction={dispatchFormAction}
+                                    displayableErrors={displayableErrors}
+                                    valueOrValues={valueOrValues}
+                                />
+                            )}
+                            {/* NOTE: Downloading of html5DataAnnotations scripts is done in the useUserProfileForm hook */}
+                        </Field>
+                    </Fragment>
+                );
+            })}
+        </>
+    );
+}

package/keycloak-theme/login/components/UserProfileFormFields/index.ts

@@ -1 +1 @@
-export * from "./UserProfileFormFields";
+export * from "./UserProfileFormFields";