keycloakify 10.0.0-rc.23 → 10.0.0-rc.24

package/src/login/lib/useDownloadTerms.ts

@@ -1,14 +1,11 @@
-import { useEffect } from "react";
-import { memoize } from "keycloakify/tools/memoize";
 import { fallbackLanguageTag } from "keycloakify/login/i18n/i18n";
-import { useConst } from "keycloakify/tools/useConst";
-import { useConstCallback } from "keycloakify/tools/useConstCallback";
 import { assert } from "tsafe/assert";
 import {
     createStatefulObservable,
     useRerenderOnChange
 } from "keycloakify/tools/StatefulObservable";
 import { KcContext } from "../kcContext";
+import { useOnFistMount } from "keycloakify/tools/useOnFirstMount";
 
 const obsTermsMarkdown = createStatefulObservable<string | undefined>(() => undefined);
 
@@ -27,29 +24,18 @@ export function useDownloadTerms(params: {
     kcContext: KcContextLike;
     downloadTermMarkdown: (params: { currentLanguageTag: string }) => Promise<string>;
 }) {
-    const { kcContext } = params;
+    const { kcContext, downloadTermMarkdown } = params;
 
-    const { downloadTermMarkdownMemoized } = (function useClosure() {
-        const { downloadTermMarkdown } = params;
-
-        const downloadTermMarkdownConst = useConstCallback(downloadTermMarkdown);
-
-        const downloadTermMarkdownMemoized = useConst(() =>
-            memoize((currentLanguageTag: string) =>
-                downloadTermMarkdownConst({ currentLanguageTag })
-            )
-        );
-
-        return { downloadTermMarkdownMemoized };
-    })();
-
-    useEffect(() => {
+    useOnFistMount(async () => {
         if (kcContext.pageId === "terms.ftl" || kcContext.termsAcceptanceRequired) {
-            downloadTermMarkdownMemoized(
-                kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag
-            ).then(thermMarkdown => (obsTermsMarkdown.current = thermMarkdown));
+            const termsMarkdown = await downloadTermMarkdown({
+                currentLanguageTag:
+                    kcContext.locale?.currentLanguageTag ?? fallbackLanguageTag
+            });
+
+            obsTermsMarkdown.current = termsMarkdown;
         }
-    }, []);
+    });
 }
 
 export function useTermsMarkdown() {

package/src/login/lib/useGetClassName.ts

@@ -3,6 +3,7 @@ import type { ClassKey } from "keycloakify/login/TemplateProps";
 
 export const { useGetClassName } = createUseClassName<ClassKey>({
     defaultClasses: {
+        kcHtmlClass: "login-pf",
         kcBodyClass: undefined,
         kcHeaderWrapperClass: undefined,
         kcLocaleWrapperClass: undefined,
@@ -54,7 +55,6 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
         kcLogoLink: "http://www.keycloak.org",
         kcContainerClass: "container-fluid",
         kcSelectAuthListItemTitle: "select-auth-box-paragraph",
-        kcHtmlClass: "login-pf",
         kcLoginOTPListItemTitleClass: "pf-c-tile__title",
         "kcLogoIdP-openshift-v4": "pf-icon pf-icon-openshift",
         kcWebAuthnUnknownIcon: "pficon pficon-key unknown-transport-class",

package/src/login/lib/useUserProfileForm.tsx

@@ -8,7 +8,8 @@ import { emailRegexp } from "keycloakify/tools/emailRegExp";
 import type { KcContext, PasswordPolicies } from "keycloakify/login/kcContext/KcContext";
 import { assert, type Equals } from "tsafe/assert";
 import { formatNumber } from "keycloakify/tools/formatNumber";
-import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { structuredCloneButFunctions } from "keycloakify/tools/structuredCloneButFunctions";
 import type { I18n } from "../i18n";
 
 export type FormFieldError = {
@@ -67,7 +68,7 @@ export type FormAction =
 export type KcContextLike = {
     messagesPerField: Pick<KcContext.Common["messagesPerField"], "existsError" | "get">;
     profile: {
-        attributes: Attribute[];
+        attributesByName: Record<string, Attribute>;
         html5DataAnnotations?: Record<string, string>;
     };
     passwordRequired?: boolean;
@@ -102,12 +103,11 @@ namespace internal {
     };
 }
 
-const { useInsertScriptTags } = createUseInsertScriptTags();
-
 export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTypeOfUseUserProfileForm {
     const { kcContext, i18n, doMakeUserConfirmPassword } = params;
 
     const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "useUserProfileForm",
         scriptTags: Object.keys(kcContext.profile?.html5DataAnnotations ?? {})
             .filter(key => key !== "kcMultivalued" && key !== "kcNumberFormat") // NOTE: Keycloakify handles it.
             .map(key => ({
@@ -136,7 +136,11 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
 
             const attributes = (() => {
                 retrocompat_patch: {
-                    if ("profile" in kcContext && "attributes" in kcContext.profile && kcContext.profile.attributes.length !== 0) {
+                    if (
+                        "profile" in kcContext &&
+                        "attributesByName" in kcContext.profile &&
+                        Object.keys(kcContext.profile.attributesByName).length !== 0
+                    ) {
                         break retrocompat_patch;
                     }
 
@@ -216,7 +220,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                     assert(false, "Unable to mock user profile from the current kcContext");
                 }
 
-                return kcContext.profile.attributes.map(attribute_pre_group_patch => {
+                return Object.values(kcContext.profile.attributesByName).map(attribute_pre_group_patch => {
                     if (typeof attribute_pre_group_patch.group === "string" && attribute_pre_group_patch.group !== "") {
                         const { group, groupDisplayHeader, groupDisplayDescription, groupAnnotations, ...rest } =
                             attribute_pre_group_patch as Attribute & {
@@ -242,7 +246,7 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
             })();
 
             for (const attribute of attributes) {
-                syntheticAttributes.push(attribute);
+                syntheticAttributes.push(structuredCloneButFunctions(attribute));
 
                 add_password_and_password_confirm: {
                     if (!kcContext.passwordRequired) {
@@ -284,6 +288,21 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                 }
             }
 
+            // NOTE: Consistency patch
+            syntheticAttributes.forEach(attribute => {
+                if (getIsMultivaluedSingleField({ attribute })) {
+                    attribute.multivalued = true;
+                }
+
+                if (attribute.multivalued) {
+                    attribute.values ??= attribute.value !== undefined ? [attribute.value] : [];
+                    delete attribute.value;
+                } else {
+                    attribute.value ??= attribute.values?.[0];
+                    delete attribute.values;
+                }
+            });
+
             return syntheticAttributes;
         })();
 
@@ -299,10 +318,10 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                         break handle_multi_valued_attribute;
                     }
 
-                    const values = attribute.values ?? [""];
+                    const values = attribute.values?.length ? attribute.values : [""];
 
                     apply_validator_min_range: {
-                        if (attribute.annotations.inputType?.startsWith("multiselect")) {
+                        if (getIsMultivaluedSingleField({ attribute })) {
                             break apply_validator_min_range;
                         }
 
@@ -349,7 +368,8 @@ export function useUserProfileForm(params: ParamsOfUseUserProfileForm): ReturnTy
                     attributeName: attribute.name,
                     formFieldStates: initialFormFieldState
                 }),
-                hasLostFocusAtLeastOnce: valueOrValues instanceof Array ? valueOrValues.map(() => false) : false,
+                hasLostFocusAtLeastOnce:
+                    valueOrValues instanceof Array && !getIsMultivaluedSingleField({ attribute }) ? valueOrValues.map(() => false) : false,
                 valueOrValues: valueOrValues
             }))
         };
@@ -543,7 +563,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
             server_side_error: {
                 if (attribute.multivalued) {
-                    const defaultValues = attribute.values ?? [""];
+                    const defaultValues = attribute.values?.length ? attribute.values : [""];
 
                     assert(valueOrValues instanceof Array);
 
@@ -595,7 +615,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     break handle_multi_valued_multi_fields;
                 }
 
-                if (attribute.annotations.inputType?.startsWith("multiselect")) {
+                if (getIsMultivaluedSingleField({ attribute })) {
                     break handle_multi_valued_multi_fields;
                 }
 
@@ -674,7 +694,7 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     break handle_multi_valued_single_field;
                 }
 
-                if (!attribute.annotations.inputType?.startsWith("multiselect")) {
+                if (!getIsMultivaluedSingleField({ attribute })) {
                     break handle_multi_valued_single_field;
                 }
 
@@ -913,6 +933,10 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                         return valueOrValues;
                     })();
 
+                    if (usernameValue === "") {
+                        break check_password_policy_x;
+                    }
+
                     if (value !== usernameValue) {
                         break check_password_policy_x;
                     }
@@ -950,6 +974,10 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
                     {
                         const emailValue = emailFormFieldState.valueOrValues;
 
+                        if (emailValue === "") {
+                            break check_password_policy_x;
+                        }
+
                         if (value !== emailValue) {
                             break check_password_policy_x;
                         }
@@ -1239,3 +1267,79 @@ function useGetErrors(params: { kcContext: Pick<KcContextLike, "messagesPerField
 
     return { getErrors };
 }
+
+function getIsMultivaluedSingleField(params: { attribute: Attribute }) {
+    const { attribute } = params;
+
+    return attribute.annotations.inputType?.startsWith("multiselect") ?? false;
+}
+
+export function getButtonToDisplayForMultivaluedAttributeField(params: { attribute: Attribute; values: string[]; fieldIndex: number }) {
+    const { attribute, values, fieldIndex } = params;
+
+    const hasRemove = (() => {
+        if (values.length === 1) {
+            return false;
+        }
+
+        const minCount = (() => {
+            const { multivalued } = attribute.validators;
+
+            if (multivalued === undefined) {
+                return undefined;
+            }
+
+            const minStr = multivalued.min;
+
+            if (minStr === undefined) {
+                return undefined;
+            }
+
+            return parseInt(`${minStr}`);
+        })();
+
+        if (minCount === undefined) {
+            return true;
+        }
+
+        if (values.length === minCount) {
+            return false;
+        }
+
+        return true;
+    })();
+
+    const hasAdd = (() => {
+        if (fieldIndex + 1 !== values.length) {
+            return false;
+        }
+
+        const maxCount = (() => {
+            const { multivalued } = attribute.validators;
+
+            if (multivalued === undefined) {
+                return undefined;
+            }
+
+            const maxStr = multivalued.max;
+
+            if (maxStr === undefined) {
+                return undefined;
+            }
+
+            return parseInt(`${maxStr}`);
+        })();
+
+        if (maxCount === undefined) {
+            return false;
+        }
+
+        if (values.length === maxCount) {
+            return false;
+        }
+
+        return true;
+    })();
+
+    return { hasRemove, hasAdd };
+}

package/src/login/pages/LoginConfigTotp.tsx

@@ -25,7 +25,7 @@ export default function LoginConfigTotp(props: PageProps<Extract<KcContext, { pa
 
                         <ul id="kc-totp-supported-apps">
                             {totp.supportedApplications.map(app => (
-                                <li>{advancedMsg(app)}</li>
+                                <li key={app}>{advancedMsg(app)}</li>
                             ))}
                         </ul>
                     </li>

package/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx

@@ -2,12 +2,10 @@ import { useEffect } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
-import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
-const { useInsertScriptTags } = createUseInsertScriptTags();
-
 export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<KcContext, { pageId: "login-recovery-authn-code-config.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
@@ -21,6 +19,7 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
     const { msg, msgStr } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
         scriptTags: [
             {
                 type: "text/javascript",
@@ -31,7 +30,7 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
                         var tmpTextarea = document.createElement("textarea");
                         var codes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
                         for (i = 0; i < codes.length; i++) {
-                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\n";
+                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\\n";
                         }
                         document.body.appendChild(tmpTextarea);
                         tmpTextarea.select();
@@ -65,7 +64,7 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
 
                         for (var i = 0; i < recoveryCodes.length; i++) {
                             var recoveryCodeLiElement = recoveryCodes[i].innerText;
-                            recoveryCodeList += recoveryCodeLiElement + "\r\n";
+                            recoveryCodeList += recoveryCodeLiElement + "\\r\\n";
                         }
 
                         return recoveryCodeList;
@@ -84,9 +83,9 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
                         };
 
                         return fileBodyContent =
-                            "${msgStr("recovery-codes-download-file-header")}\n\n" +
-                            recoveryCodeList + "\n" +
-                            "${msgStr("recovery-codes-download-file-description")}\n\n" +
+                            "${msgStr("recovery-codes-download-file-header")}\\n\\n" +
+                            recoveryCodeList + "\\n" +
+                            "${msgStr("recovery-codes-download-file-description")}\\n\\n" +
                             "${msgStr("recovery-codes-download-file-date")} " + formatCurrentDateTime();
                     }
 

package/src/login/pages/WebauthnAuthenticate.tsx

@@ -3,12 +3,10 @@ import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import { assert } from "tsafe/assert";
-import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
-const { useInsertScriptTags } = createUseInsertScriptTags();
-
 export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext, { pageId: "webauthn-authenticate.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
@@ -31,6 +29,7 @@ export default function WebauthnAuthenticate(props: PageProps<Extract<KcContext,
     const { msg, msgStr, advancedMsg } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "WebauthnAuthenticate",
         scriptTags: [
             {
                 type: "text/javascript",

package/src/login/pages/WebauthnRegister.tsx

@@ -3,12 +3,10 @@ import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import { assert } from "tsafe/assert";
-import { createUseInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 
-const { useInsertScriptTags } = createUseInsertScriptTags();
-
 export default function WebauthnRegister(props: PageProps<Extract<KcContext, { pageId: "webauthn-register.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
@@ -35,6 +33,7 @@ export default function WebauthnRegister(props: PageProps<Extract<KcContext, { p
     const { msg, msgStr } = i18n;
 
     const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "WebauthnRegister",
         scriptTags: [
             {
                 type: "text/javascript",

package/src/tools/ExtractAfterStartingWith.ts

@@ -0,0 +1,4 @@
+export type ExtractAfterStartingWith<
+    Prefix extends string,
+    StrEnum
+> = StrEnum extends `${Prefix}${infer U}` ? U : never;

package/src/tools/StatefulObservable/hooks/useRerenderOnChange.ts

@@ -5,15 +5,15 @@ import type { StatefulObservable } from "../StatefulObservable";
 /**
  * Equivalent of https://docs.evt.land/api/react-hooks
  * */
-export function useRerenderOnChange($: StatefulObservable<unknown>): void {
+export function useRerenderOnChange(obs: StatefulObservable<unknown>): void {
     //NOTE: We use function in case the state is a function
-    const [, setCurrent] = useState(() => $.current);
+    const [, setCurrent] = useState(() => obs.current);
 
     useObservable(
         ({ registerSubscription }) => {
-            const subscription = $.subscribe(current => setCurrent(() => current));
+            const subscription = obs.subscribe(current => setCurrent(() => current));
             registerSubscription(subscription);
         },
-        [$]
+        [obs]
     );
 }

package/src/tools/ValueOf.ts

@@ -0,0 +1,2 @@
+/** Pendant of `keyof T` */
+export type ValueOf<T> = T[keyof T];

package/src/tools/deepAssign.ts

@@ -1,45 +1,61 @@
 import { assert } from "tsafe/assert";
 import { is } from "tsafe/is";
-import { deepClone } from "./deepClone";
+import { structuredCloneButFunctions } from "./structuredCloneButFunctions";
 
-//Warning: Be mindful that because of array this is not idempotent.
+/** NOTE: Array a copied over, not merged. */
 export function deepAssign(params: {
     target: Record<string, unknown>;
     source: Record<string, unknown>;
-}) {
-    const { target } = params;
-
-    const source = deepClone(params.source);
+}): void {
+    const { target, source } = params;
 
     Object.keys(source).forEach(key => {
         var dereferencedSource = source[key];
 
+        if (dereferencedSource === undefined) {
+            delete target[key];
+            return;
+        }
+
+        if (dereferencedSource instanceof Date) {
+            assign({
+                target,
+                key,
+                value: new Date(dereferencedSource.getTime())
+            });
+
+            return;
+        }
+
+        if (dereferencedSource instanceof Array) {
+            assign({
+                target,
+                key,
+                value: structuredCloneButFunctions(dereferencedSource)
+            });
+
+            return;
+        }
+
         if (
-            target[key] === undefined ||
             dereferencedSource instanceof Function ||
             !(dereferencedSource instanceof Object)
         ) {
-            Object.defineProperty(target, key, {
-                enumerable: true,
-                writable: true,
-                configurable: true,
+            assign({
+                target,
+                key,
                 value: dereferencedSource
             });
 
             return;
         }
 
-        const dereferencedTarget = target[key];
-
-        if (dereferencedSource instanceof Array) {
-            assert(is<unknown[]>(dereferencedTarget));
-            assert(is<unknown[]>(dereferencedSource));
-
-            dereferencedSource.forEach(entry => dereferencedTarget.push(entry));
-
-            return;
+        if (!(target[key] instanceof Object)) {
+            target[key] = {};
         }
 
+        const dereferencedTarget = target[key];
+
         assert(is<Record<string, unknown>>(dereferencedTarget));
         assert(is<Record<string, unknown>>(dereferencedSource));
 
@@ -49,3 +65,18 @@ export function deepAssign(params: {
         });
     });
 }
+
+function assign(params: {
+    target: Record<string, unknown>;
+    key: string;
+    value: unknown;
+}): void {
+    const { target, key, value } = params;
+
+    Object.defineProperty(target, key, {
+        enumerable: true,
+        writable: true,
+        configurable: true,
+        value
+    });
+}

package/src/tools/structuredCloneButFunctions.ts

@@ -0,0 +1,24 @@
+import "minimal-polyfills/Object.fromEntries";
+
+/**
+ * Functionally equivalent to structuredClone but
+ * functions are not cloned but kept as is.
+ * (as opposed to structuredClone that chokes if it encounters a function)
+ */
+export function structuredCloneButFunctions<T>(o: T): T {
+    if (!(o instanceof Object)) {
+        return o;
+    }
+
+    if (typeof o === "function") {
+        return o;
+    }
+
+    if (o instanceof Array) {
+        return o.map(structuredCloneButFunctions) as any;
+    }
+
+    return Object.fromEntries(
+        Object.entries(o).map(([key, value]) => [key, structuredCloneButFunctions(value)])
+    ) as any;
+}