@oussemasahbeni/keycloakify-login-shadcn 250004.0.2 → 250004.0.7

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

@@ -1,61 +1,61 @@
-import { Button } from '@/components/ui/button';
-import { useI18n } from '@/login/i18n';
-import type { Attribute } from "@keycloakify/login-ui/KcContext";
-import {
-    getButtonToDisplayForMultivaluedAttributeField,
-    type FormAction
-} from "@keycloakify/login-ui/useUserProfileForm";
-
-export function AddRemoveButtonsMultiValuedAttribute(props: {
-    attribute: Attribute;
-    values: string[];
-    fieldIndex: number;
-    dispatchFormAction: React.Dispatch<Extract<FormAction, { action: "update" }>>;
-}) {
-    const { attribute, values, fieldIndex, dispatchFormAction } = props;
-
-    const { msg } = useI18n();
-
-    const { hasAdd, hasRemove } = getButtonToDisplayForMultivaluedAttributeField({ attribute, values, fieldIndex });
-
-    const idPostfix = `-${attribute.name}-${fieldIndex + 1}`;
-
-    return (
-        <div className="flex items-center gap-2 mt-2">
-            {hasRemove && (
-                <Button
-                    id={`kc-remove${idPostfix}`}
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    onClick={() =>
-                        dispatchFormAction({
-                            action: "update",
-                            name: attribute.name,
-                            valueOrValues: values.filter((_, i) => i !== fieldIndex)
-                        })
-                    }
-                >
-                    {msg("remove")}
-                </Button>
-            )}
-            {hasAdd && (
-                <Button
-                    id={`kc-add${idPostfix}`}
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={() =>
-                        dispatchFormAction({
-                            action: "update",
-                            name: attribute.name,
-                            valueOrValues: [...values, ""]
-                        })
-                    }
-                >
-                    {msg("addValue")}
-                </Button>
-            )}
-        </div>
-    );
-}
+import { Button } from '@/components/ui/button';
+import { useI18n } from '@/login/i18n';
+import type { Attribute } from "@keycloakify/login-ui/KcContext";
+import {
+    getButtonToDisplayForMultivaluedAttributeField,
+    type FormAction
+} from "@keycloakify/login-ui/useUserProfileForm";
+
+export function AddRemoveButtonsMultiValuedAttribute(props: {
+    attribute: Attribute;
+    values: string[];
+    fieldIndex: number;
+    dispatchFormAction: React.Dispatch<Extract<FormAction, { action: "update" }>>;
+}) {
+    const { attribute, values, fieldIndex, dispatchFormAction } = props;
+
+    const { msg } = useI18n();
+
+    const { hasAdd, hasRemove } = getButtonToDisplayForMultivaluedAttributeField({ attribute, values, fieldIndex });
+
+    const idPostfix = `-${attribute.name}-${fieldIndex + 1}`;
+
+    return (
+        <div className="flex items-center gap-2 mt-2">
+            {hasRemove && (
+                <Button
+                    id={`kc-remove${idPostfix}`}
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() =>
+                        dispatchFormAction({
+                            action: "update",
+                            name: attribute.name,
+                            valueOrValues: values.filter((_, i) => i !== fieldIndex)
+                        })
+                    }
+                >
+                    {msg("remove")}
+                </Button>
+            )}
+            {hasAdd && (
+                <Button
+                    id={`kc-add${idPostfix}`}
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                        dispatchFormAction({
+                            action: "update",
+                            name: attribute.name,
+                            valueOrValues: [...values, ""]
+                        })
+                    }
+                >
+                    {msg("addValue")}
+                </Button>
+            )}
+        </div>
+    );
+}

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

@@ -1,2 +1,2 @@
-// Change this to true to disable the confirm password field
-export const DO_MAKE_USER_CONFIRM_PASSWORD = true;
+// Change this to true to disable the confirm password field
+export const DO_MAKE_USER_CONFIRM_PASSWORD = true;

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

@@ -1,29 +1,29 @@
-import { FieldError } from '@/components/ui/field';
-import type { Attribute } from "@keycloakify/login-ui/KcContext";
-import type { FormFieldError } from "@keycloakify/login-ui/useUserProfileForm";
-import { Fragment } from "react";
-
-export function FieldErrors(props: {
-    attribute: Attribute;
-    displayableErrors: FormFieldError[];
-    fieldIndex: number | undefined;
-}) {
-    const { attribute, fieldIndex } = props;
-
-    const displayableErrors = props.displayableErrors.filter(error => error.fieldIndex === fieldIndex);
-
-    if (displayableErrors.length === 0) {
-        return null;
-    }
-
-    return (
-        <FieldError id={`input-error-${attribute.name}${fieldIndex === undefined ? "" : `-${fieldIndex}`}`}>
-            {displayableErrors.map(({ errorMessage }, i, arr) => (
-                <Fragment key={i}>
-                    {errorMessage}
-                    {arr.length - 1 !== i && <br />}
-                </Fragment>
-            ))}
-        </FieldError>
-    );
+import { FieldError } from '@/components/ui/field';
+import type { Attribute } from "@keycloakify/login-ui/KcContext";
+import type { FormFieldError } from "@keycloakify/login-ui/useUserProfileForm";
+import { Fragment } from "react";
+
+export function FieldErrors(props: {
+    attribute: Attribute;
+    displayableErrors: FormFieldError[];
+    fieldIndex: number | undefined;
+}) {
+    const { attribute, fieldIndex } = props;
+
+    const displayableErrors = props.displayableErrors.filter(error => error.fieldIndex === fieldIndex);
+
+    if (displayableErrors.length === 0) {
+        return null;
+    }
+
+    return (
+        <FieldError id={`input-error-${attribute.name}${fieldIndex === undefined ? "" : `-${fieldIndex}`}`}>
+            {displayableErrors.map(({ errorMessage }, i, arr) => (
+                <Fragment key={i}>
+                    {errorMessage}
+                    {arr.length - 1 !== i && <br />}
+                </Fragment>
+            ))}
+        </FieldError>
+    );
 }

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

@@ -1,71 +1,71 @@
-
-
-import { cn } from '@/components/lib/utils';
-import { useI18n } from '@/login/i18n';
-import type { Attribute } from "@keycloakify/login-ui/KcContext";
-import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
-import { assert } from "tsafe/assert";
-
-export function GroupLabel(props: {
-    attribute: Attribute;
-    groupNameRef: {
-        current: string;
-    };
-}) {
-    const { attribute, groupNameRef } = props;
-
-    const { advancedMsg } = useI18n();
-
-    const { kcClsx } = useKcClsx();
-
-
-    if (attribute.group?.name !== groupNameRef.current) {
-        groupNameRef.current = attribute.group?.name ?? "";
-
-        if (groupNameRef.current !== "") {
-            assert(attribute.group !== undefined);
-
-            return (
-                <div
-                    className={cn("space-y-4 p-4 border rounded-lg bg-card", kcClsx("kcFormGroupClass"))}
-                    {...Object.fromEntries(Object.entries(attribute.group.html5DataAnnotations).map(([key, value]) => [`data-${key}`, value]))}
-                >
-                    {(() => {
-                        const groupDisplayHeader = attribute.group.displayHeader ?? "";
-                        const groupHeaderText = groupDisplayHeader !== "" ? advancedMsg(groupDisplayHeader) : attribute.group.name;
-
-                        return (
-                            <div className={cn("", kcClsx("kcContentWrapperClass"))}>
-                                <h3 id={`header-${attribute.group.name}`} className={cn("text-lg font-semibold", kcClsx("kcFormGroupHeader"))}>
-                                    {groupHeaderText}
-                                </h3>
-                            </div>
-                        );
-                    })()}
-                    {(() => {
-                        const groupDisplayDescription = attribute.group.displayDescription ?? "";
-
-                        if (groupDisplayDescription !== "") {
-                            const groupDescriptionText = advancedMsg(groupDisplayDescription);
-
-                            return (
-                                <div className={cn("", kcClsx("kcLabelWrapperClass"))}>
-                                    <p
-                                        id={`description-${attribute.group.name}`}
-                                        className={cn("text-sm text-muted-foreground", kcClsx("kcLabelClass"))}
-                                    >
-                                        {groupDescriptionText}
-                                    </p>
-                                </div>
-                            );
-                        }
-
-                        return null;
-                    })()}
-                </div>
-            );
-        }
-    }
-
-    return null;
+
+
+import { cn } from '@/components/lib/utils';
+import { useI18n } from '@/login/i18n';
+import type { Attribute } from "@keycloakify/login-ui/KcContext";
+import { useKcClsx } from '@keycloakify/login-ui/useKcClsx';
+import { assert } from "tsafe/assert";
+
+export function GroupLabel(props: {
+    attribute: Attribute;
+    groupNameRef: {
+        current: string;
+    };
+}) {
+    const { attribute, groupNameRef } = props;
+
+    const { advancedMsg } = useI18n();
+
+    const { kcClsx } = useKcClsx();
+
+
+    if (attribute.group?.name !== groupNameRef.current) {
+        groupNameRef.current = attribute.group?.name ?? "";
+
+        if (groupNameRef.current !== "") {
+            assert(attribute.group !== undefined);
+
+            return (
+                <div
+                    className={cn("space-y-4 p-4 border rounded-lg bg-card", kcClsx("kcFormGroupClass"))}
+                    {...Object.fromEntries(Object.entries(attribute.group.html5DataAnnotations).map(([key, value]) => [`data-${key}`, value]))}
+                >
+                    {(() => {
+                        const groupDisplayHeader = attribute.group.displayHeader ?? "";
+                        const groupHeaderText = groupDisplayHeader !== "" ? advancedMsg(groupDisplayHeader) : attribute.group.name;
+
+                        return (
+                            <div className={cn("", kcClsx("kcContentWrapperClass"))}>
+                                <h3 id={`header-${attribute.group.name}`} className={cn("text-lg font-semibold", kcClsx("kcFormGroupHeader"))}>
+                                    {groupHeaderText}
+                                </h3>
+                            </div>
+                        );
+                    })()}
+                    {(() => {
+                        const groupDisplayDescription = attribute.group.displayDescription ?? "";
+
+                        if (groupDisplayDescription !== "") {
+                            const groupDescriptionText = advancedMsg(groupDisplayDescription);
+
+                            return (
+                                <div className={cn("", kcClsx("kcLabelWrapperClass"))}>
+                                    <p
+                                        id={`description-${attribute.group.name}`}
+                                        className={cn("text-sm text-muted-foreground", kcClsx("kcLabelClass"))}
+                                    >
+                                        {groupDescriptionText}
+                                    </p>
+                                </div>
+                            );
+                        }
+
+                        return null;
+                    })()}
+                </div>
+            );
+        }
+    }
+
+    return null;
 }

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

@@ -1,59 +1,59 @@
-import type { Attribute } from "@keycloakify/login-ui/KcContext";
-import type {
-    FormAction,
-    FormFieldError
-} from "@keycloakify/login-ui/useUserProfileForm";
-import { PasswordWrapper } from "../PasswordWrapper";
-import { InputTag } from "./InputTag";
-import { InputTagSelects } from "./InputTagSelects";
-import { SelectTag } from "./SelectTag";
-import { TextareaTag } from "./TextareaTag";
-
-export type InputFieldByTypeProps = {
-    attribute: Attribute;
-    valueOrValues: string | string[];
-    displayableErrors: FormFieldError[];
-    dispatchFormAction: React.Dispatch<FormAction>;
-};
-
-export function InputFieldByType(props: InputFieldByTypeProps) {
-    const { attribute, valueOrValues } = props;
-
-    switch (attribute.annotations.inputType) {
-        // NOTE: Unfortunately, keycloak won't let you define input type="hidden" in the Admin Console.
-        // sometimes in the future it might.
-        case "hidden":
-            return <input type="hidden" id={attribute.name} name={attribute.name} value={valueOrValues as string} />;
-        case "textarea":
-            return <TextareaTag {...props} />;
-        case "select":
-        case "multiselect":
-            return <SelectTag {...props} />;
-        case "select-radiobuttons":
-        case "multiselect-checkboxes":
-            return <InputTagSelects {...props} />;
-        default: {
-            if (valueOrValues instanceof Array) {
-                return (
-                    <>
-                        {valueOrValues.map((...[, i]) => (
-                            <InputTag key={i} {...props} fieldIndex={i} />
-                        ))}
-                    </>
-                );
-            }
-
-            const inputNode = <InputTag {...props} fieldIndex={undefined} />;
-
-            if (attribute.name === "password" || attribute.name === "password-confirm") {
-                return (
-                    <PasswordWrapper passwordInputId={attribute.name}>
-                        {inputNode}
-                    </PasswordWrapper>
-                );
-            }
-
-            return inputNode;
-        }
-    }
+import type { Attribute } from "@keycloakify/login-ui/KcContext";
+import type {
+    FormAction,
+    FormFieldError
+} from "@keycloakify/login-ui/useUserProfileForm";
+import { PasswordWrapper } from "../PasswordWrapper";
+import { InputTag } from "./InputTag";
+import { InputTagSelects } from "./InputTagSelects";
+import { SelectTag } from "./SelectTag";
+import { TextareaTag } from "./TextareaTag";
+
+export type InputFieldByTypeProps = {
+    attribute: Attribute;
+    valueOrValues: string | string[];
+    displayableErrors: FormFieldError[];
+    dispatchFormAction: React.Dispatch<FormAction>;
+};
+
+export function InputFieldByType(props: InputFieldByTypeProps) {
+    const { attribute, valueOrValues } = props;
+
+    switch (attribute.annotations.inputType) {
+        // NOTE: Unfortunately, keycloak won't let you define input type="hidden" in the Admin Console.
+        // sometimes in the future it might.
+        case "hidden":
+            return <input type="hidden" id={attribute.name} name={attribute.name} value={valueOrValues as string} />;
+        case "textarea":
+            return <TextareaTag {...props} />;
+        case "select":
+        case "multiselect":
+            return <SelectTag {...props} />;
+        case "select-radiobuttons":
+        case "multiselect-checkboxes":
+            return <InputTagSelects {...props} />;
+        default: {
+            if (valueOrValues instanceof Array) {
+                return (
+                    <>
+                        {valueOrValues.map((...[, i]) => (
+                            <InputTag key={i} {...props} fieldIndex={i} />
+                        ))}
+                    </>
+                );
+            }
+
+            const inputNode = <InputTag {...props} fieldIndex={undefined} />;
+
+            if (attribute.name === "password" || attribute.name === "password-confirm") {
+                return (
+                    <PasswordWrapper passwordInputId={attribute.name}>
+                        {inputNode}
+                    </PasswordWrapper>
+                );
+            }
+
+            return inputNode;
+        }
+    }
 }