@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/components/Template/useInitializeTemplate.ts

@@ -1,61 +1,61 @@
-import { useEffect } from "react";
-import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
-import { useInsertLinkTags } from "@keycloakify/login-ui/tools/useInsertLinkTags";
-import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
-import { BASE_URL } from "../../../kc.gen";
-import { useKcContext } from "../../KcContext";
-
-export function useInitializeTemplate() {
-    const { kcContext } = useKcContext();
-
-    const { doUseDefaultCss } = useKcClsx();
-
-    const { areAllStyleSheetsLoaded } = useInsertLinkTags({
-        effectId: "Template",
-        hrefs: !doUseDefaultCss
-            ? []
-            : [
-                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/@patternfly/patternfly/patternfly.min.css`,
-                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/patternfly/dist/css/patternfly.min.css`,
-                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
-                  `${BASE_URL}keycloak-theme/login/resources-common/lib/pficon/pficon.css`,
-                  `${BASE_URL}keycloak-theme/login/css/login.css`
-              ]
-    });
-
-    const { insertScriptTags } = useInsertScriptTags({
-        effectId: "Template",
-        scriptTags: [
-            // NOTE: The importmap is added in by the FTL script because it's too late to add it here.
-            {
-                type: "module",
-                src: `${BASE_URL}keycloak-theme/login/js/menu-button-links.js`
-            },
-            ...(kcContext.scripts === undefined
-                ? []
-                : kcContext.scripts.map(src => ({
-                      type: "text/javascript" as const,
-                      src
-                  }))),
-            {
-                type: "module",
-                textContent: [
-                    `import { startSessionPolling, checkAuthSession } from "${BASE_URL}keycloak-theme/login/js/authChecker.js";`,
-                    ``,
-                    `startSessionPolling("${kcContext.url.ssoLoginInOtherTabsUrl}");`,
-                    kcContext.authenticationSession === undefined
-                        ? ""
-                        : `checkAuthSession("${kcContext.authenticationSession.authSessionIdHash}");`
-                ].join("\n")
-            }
-        ]
-    });
-
-    useEffect(() => {
-        if (areAllStyleSheetsLoaded) {
-            insertScriptTags();
-        }
-    }, [areAllStyleSheetsLoaded]);
-
-    return { isReadyToRender: areAllStyleSheetsLoaded };
-}
+import { useEffect } from "react";
+import { useInsertScriptTags } from "@keycloakify/login-ui/tools/useInsertScriptTags";
+import { useInsertLinkTags } from "@keycloakify/login-ui/tools/useInsertLinkTags";
+import { useKcClsx } from "@keycloakify/login-ui/useKcClsx";
+import { BASE_URL } from "../../../kc.gen";
+import { useKcContext } from "../../KcContext";
+
+export function useInitializeTemplate() {
+    const { kcContext } = useKcContext();
+
+    const { doUseDefaultCss } = useKcClsx();
+
+    const { areAllStyleSheetsLoaded } = useInsertLinkTags({
+        effectId: "Template",
+        hrefs: !doUseDefaultCss
+            ? []
+            : [
+                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/@patternfly/patternfly/patternfly.min.css`,
+                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/patternfly/dist/css/patternfly.min.css`,
+                  `${BASE_URL}keycloak-theme/login/resources-common/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+                  `${BASE_URL}keycloak-theme/login/resources-common/lib/pficon/pficon.css`,
+                  `${BASE_URL}keycloak-theme/login/css/login.css`
+              ]
+    });
+
+    const { insertScriptTags } = useInsertScriptTags({
+        effectId: "Template",
+        scriptTags: [
+            // NOTE: The importmap is added in by the FTL script because it's too late to add it here.
+            {
+                type: "module",
+                src: `${BASE_URL}keycloak-theme/login/js/menu-button-links.js`
+            },
+            ...(kcContext.scripts === undefined
+                ? []
+                : kcContext.scripts.map(src => ({
+                      type: "text/javascript" as const,
+                      src
+                  }))),
+            {
+                type: "module",
+                textContent: [
+                    `import { startSessionPolling, checkAuthSession } from "${BASE_URL}keycloak-theme/login/js/authChecker.js";`,
+                    ``,
+                    `startSessionPolling("${kcContext.url.ssoLoginInOtherTabsUrl}");`,
+                    kcContext.authenticationSession === undefined
+                        ? ""
+                        : `checkAuthSession("${kcContext.authenticationSession.authSessionIdHash}");`
+                ].join("\n")
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (areAllStyleSheetsLoaded) {
+            insertScriptTags();
+        }
+    }, [areAllStyleSheetsLoaded]);
+
+    return { isReadyToRender: areAllStyleSheetsLoaded };
+}

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

@@ -1,61 +1,65 @@
-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,33 @@
-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,90 @@
-
-
-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,66 @@
-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;
+        }
+    }
+}

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

@@ -1,4 +1,3 @@
-
 import type { Attribute } from "@keycloakify/login-ui/KcContext";
 import { useI18n } from "../../i18n";