keycloakify 10.1.3 → 11.0.0

package/src/account/i18n/withJsx/i18nBuilder.ts

@@ -0,0 +1,117 @@
+import type {
+    LanguageTag as LanguageTag_defaultSet,
+    MessageKey as MessageKey_defaultSet
+} from "../messages_defaultSet/types";
+import { type ReturnTypeOfCreateUseI18n, createUseI18n } from "../withJsx/useI18n";
+
+export type I18nBuilder<
+    ThemeName extends string = never,
+    MessageKey_themeDefined extends string = never,
+    LanguageTag_notInDefaultSet extends string = never,
+    ExcludedMethod extends
+        | "withThemeName"
+        | "withExtraLanguages"
+        | "withCustomTranslations" = never
+> = Omit<
+    {
+        withThemeName: <ThemeName extends string>() => I18nBuilder<
+            ThemeName,
+            MessageKey_themeDefined,
+            LanguageTag_notInDefaultSet,
+            ExcludedMethod | "withThemeName"
+        >;
+        withExtraLanguages: <
+            LanguageTag_notInDefaultSet extends string
+        >(extraLanguageTranslations: {
+            [LanguageTag in LanguageTag_notInDefaultSet]: {
+                label: string;
+                getMessages: () => Promise<{
+                    default: Record<MessageKey_defaultSet, string>;
+                }>;
+            };
+        }) => I18nBuilder<
+            ThemeName,
+            MessageKey_themeDefined,
+            LanguageTag_notInDefaultSet,
+            ExcludedMethod | "withExtraLanguages"
+        >;
+        withCustomTranslations: <MessageKey_themeDefined extends string>(
+            messagesByLanguageTag_themeDefined: Partial<{
+                [LanguageTag in
+                    | LanguageTag_defaultSet
+                    | LanguageTag_notInDefaultSet]: Record<
+                    MessageKey_themeDefined,
+                    string | Record<ThemeName, string>
+                >;
+            }>
+        ) => I18nBuilder<
+            ThemeName,
+            MessageKey_themeDefined,
+            LanguageTag_notInDefaultSet,
+            ExcludedMethod | "withCustomTranslations"
+        >;
+        build: () => ReturnTypeOfCreateUseI18n<
+            MessageKey_themeDefined,
+            LanguageTag_notInDefaultSet
+        >;
+    },
+    ExcludedMethod
+>;
+
+function createI18nBuilder<
+    ThemeName extends string = never,
+    MessageKey_themeDefined extends string = never,
+    LanguageTag_notInDefaultSet extends string = never
+>(params: {
+    extraLanguageTranslations: {
+        [LanguageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{
+                default: Record<MessageKey_defaultSet, string>;
+            }>;
+        };
+    };
+    messagesByLanguageTag_themeDefined: Partial<{
+        [LanguageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: Record<
+            MessageKey_themeDefined,
+            string | Record<ThemeName, string>
+        >;
+    }>;
+}): I18nBuilder<ThemeName, MessageKey_themeDefined, LanguageTag_notInDefaultSet> {
+    const i18nBuilder: I18nBuilder<
+        ThemeName,
+        MessageKey_themeDefined,
+        LanguageTag_notInDefaultSet
+    > = {
+        withThemeName: () =>
+            createI18nBuilder({
+                extraLanguageTranslations: params.extraLanguageTranslations,
+                messagesByLanguageTag_themeDefined:
+                    params.messagesByLanguageTag_themeDefined as any
+            }),
+        withExtraLanguages: extraLanguageTranslations =>
+            createI18nBuilder({
+                extraLanguageTranslations,
+                messagesByLanguageTag_themeDefined:
+                    params.messagesByLanguageTag_themeDefined as any
+            }),
+        withCustomTranslations: messagesByLanguageTag_themeDefined =>
+            createI18nBuilder({
+                extraLanguageTranslations: params.extraLanguageTranslations,
+                messagesByLanguageTag_themeDefined
+            }),
+        build: () =>
+            createUseI18n({
+                extraLanguageTranslations: params.extraLanguageTranslations,
+                messagesByLanguageTag_themeDefined:
+                    params.messagesByLanguageTag_themeDefined
+            })
+    };
+
+    return i18nBuilder;
+}
+
+export const i18nBuilder = createI18nBuilder({
+    extraLanguageTranslations: {},
+    messagesByLanguageTag_themeDefined: {}
+});

package/src/account/i18n/withJsx/index.ts

@@ -0,0 +1,3 @@
+export { i18nBuilder } from "./i18nBuilder";
+export type { KcContextLike } from "./useI18n";
+export type { MessageKey as MessageKey_defaultSet } from "../messages_defaultSet/types";

package/src/{login/i18n → account/i18n/withJsx}/useI18n.tsx

@@ -1,17 +1,49 @@
 import { useEffect, useState } from "react";
-import { createGetI18n, type GenericI18n_noJsx, type KcContextLike, type MessageKey_defaultSet } from "./i18n";
-import { GenericI18n } from "./GenericI18n";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
+import { createGetI18n, type KcContextLike } from "../noJsx/getI18n";
+import type { GenericI18n_noJsx } from "../noJsx/GenericI18n_noJsx";
 import { Reflect } from "tsafe/Reflect";
+import type { GenericI18n } from "./GenericI18n";
+import type { LanguageTag as LanguageTag_defaultSet, MessageKey as MessageKey_defaultSet } from "../messages_defaultSet/types";
+
+export type ReturnTypeOfCreateUseI18n<MessageKey_themeDefined extends string, LanguageTag_notInDefaultSet extends string> = {
+    useI18n: (params: { kcContext: KcContextLike }) => {
+        i18n: GenericI18n<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>;
+    };
+    ofTypeI18n: GenericI18n<MessageKey_defaultSet | MessageKey_themeDefined, LanguageTag_defaultSet | LanguageTag_notInDefaultSet>;
+};
+
+export { KcContextLike };
+
+export function createUseI18n<
+    ThemeName extends string = string,
+    MessageKey_themeDefined extends string = never,
+    LanguageTag_notInDefaultSet extends string = never
+>(params: {
+    extraLanguageTranslations: {
+        [languageTag in LanguageTag_notInDefaultSet]: {
+            label: string;
+            getMessages: () => Promise<{ default: Record<MessageKey_defaultSet, string> }>;
+        };
+    };
+    messagesByLanguageTag_themeDefined: Partial<{
+        [languageTag in LanguageTag_defaultSet | LanguageTag_notInDefaultSet]: {
+            [key in MessageKey_themeDefined]: string | Record<ThemeName, string>;
+        };
+    }>;
+}): ReturnTypeOfCreateUseI18n<MessageKey_themeDefined, LanguageTag_notInDefaultSet> {
+    const { extraLanguageTranslations, messagesByLanguageTag_themeDefined } = params;
+
+    type LanguageTag = LanguageTag_defaultSet | LanguageTag_notInDefaultSet;
 
-export function createUseI18n<MessageKey_themeDefined extends string = never>(messagesByLanguageTag: {
-    [languageTag: string]: { [key in MessageKey_themeDefined]: string };
-}) {
     type MessageKey = MessageKey_defaultSet | MessageKey_themeDefined;
 
-    type I18n = GenericI18n<MessageKey>;
+    type I18n = GenericI18n<MessageKey, LanguageTag>;
+
+    type Result = { i18n: I18n };
 
     const { withJsx } = (() => {
-        const cache = new WeakMap<GenericI18n_noJsx<MessageKey>, GenericI18n<MessageKey>>();
+        const cache = new WeakMap<GenericI18n_noJsx<MessageKey, LanguageTag>, GenericI18n<MessageKey, LanguageTag>>();
 
         function renderHtmlString(params: { htmlString: string; msgKey: string }): JSX.Element {
             const { htmlString, msgKey } = params;
@@ -19,13 +51,13 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
                 <div
                     data-kc-msg={msgKey}
                     dangerouslySetInnerHTML={{
-                        __html: htmlString
+                        __html: kcSanitize(htmlString)
                     }}
                 />
             );
         }
 
-        function withJsx(i18n_noJsx: GenericI18n_noJsx<MessageKey>): I18n {
+        function withJsx(i18n_noJsx: GenericI18n_noJsx<MessageKey, LanguageTag>): I18n {
             use_cache: {
                 const i18n = cache.get(i18n_noJsx);
 
@@ -63,9 +95,9 @@ export function createUseI18n<MessageKey_themeDefined extends string = never>(me
         (styleElement.textContent = `[data-kc-msg] { display: inline-block; }`), document.head.prepend(styleElement);
     }
 
-    const { getI18n } = createGetI18n(messagesByLanguageTag);
+    const { getI18n } = createGetI18n({ extraLanguageTranslations, messagesByLanguageTag_themeDefined });
 
-    function useI18n(params: { kcContext: KcContextLike }): { i18n: I18n } {
+    function useI18n(params: { kcContext: KcContextLike }): Result {
         const { kcContext } = params;
 
         const { i18n, prI18n_currentLanguage } = getI18n({ kcContext });

package/src/account/index.ts

@@ -1,3 +1,3 @@
 export type { ExtendKcContext } from "keycloakify/account/KcContext";
 export type { ClassKey } from "keycloakify/account/TemplateProps";
-export { createUseI18n } from "keycloakify/account/i18n";
+export { i18nBuilder, type MessageKey_defaultSet } from "keycloakify/account/i18n";

package/src/account/pages/Totp.tsx

@@ -1,5 +1,6 @@
 import { clsx } from "keycloakify/tools/clsx";
 import { getKcClsx } from "keycloakify/account/lib/kcClsx";
+import { kcSanitize } from "keycloakify/lib/kcSanitize";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
@@ -159,7 +160,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                             className={kcClsx("kcInputErrorMessageClass")}
                                             aria-live="polite"
                                             dangerouslySetInnerHTML={{
-                                                __html: messagesPerField.get("totp")
+                                                __html: kcSanitize(messagesPerField.get("totp"))
                                             }}
                                         />
                                     )}
@@ -190,7 +191,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                             className={kcClsx("kcInputErrorMessageClass")}
                                             aria-live="polite"
                                             dangerouslySetInnerHTML={{
-                                                __html: messagesPerField.get("userLabel")
+                                                __html: kcSanitize(messagesPerField.get("userLabel"))
                                             }}
                                         />
                                     )}

package/src/bin/initialize-account-theme/src/multi-page/i18n.ts

@@ -1,5 +1,12 @@
-import { createUseI18n } from "keycloakify/account";
+import { i18nBuilder } from "keycloakify/account";
+import type { ThemeName } from "../kc.gen";
 
-export const { useI18n, ofTypeI18n } = createUseI18n({});
+const { useI18n, ofTypeI18n } = i18nBuilder
+    .withThemeName<ThemeName>()
+    .withExtraLanguages({})
+    .withCustomTranslations({})
+    .build();
 
-export type I18n = typeof ofTypeI18n;
+type I18n = typeof ofTypeI18n;
+
+export { useI18n, type I18n };

package/src/bin/keycloakify/generateFtl/kcContextDeclarationTemplate.ftl

@@ -85,6 +85,21 @@ attributes_to_attributesByName: {
     });
 }
 window.kcContext = kcContext;
+
+<#if xKeycloakify.themeType == "login" >
+    {
+        const script = document.createElement("script");
+        script.type = "importmap";
+        script.textContent = JSON.stringify({
+          imports: {
+            "rfc4648": kcContext.url.resourcesCommonPath + "/node_modules/rfc4648/lib/rfc4648.js"
+          }
+        }, null, 2); 
+
+        document.head.appendChild(script);
+    }
+</#if>
+
 function decodeHtmlEntities(htmlStr){
     var element = decodeHtmlEntities.element;
     if (!element) {