Moving on with implementation of the lib

src/bin/build-keycloak-theme/generateFtl/ftl2js.ftl

@@ -0,0 +1,113 @@
+<script>const _= 
+{
+    "url": {
+        "loginAction": "${url.loginAction}",
+        "resourcesPath": "${url.resourcesPath}",
+        "resourcesCommonPath": "${url.resourcesCommonPath}",
+        "loginRestartFlowUrl": "${url.loginRestartFlowUrl}"
+    },
+    "realm": {
+        "displayName": "${realm.displayName!''}" || undefined,
+        "displayNameHtml": "${realm.displayNameHtml!''}" || undefined,
+        "internationalizationEnabled": ${realm.internationalizationEnabled?c}
+    },
+    "locale": (function (){
+
+        <#if realm.internationalizationEnabled>
+
+            return {
+                "supported": (function(){
+
+                    <#if realm.internationalizationEnabled>
+
+                        var out= [];
+
+                        <#list locale.supported as lng>
+                            out.push({ 
+                                "url": "${lng.url}", 
+                                "label": "${lng.label}",
+                                "languageTag": "${lng.languageTag}"
+                            });
+                        </#list>
+
+                        return out;
+
+                    </#if>
+
+                    return undefined;
+
+                })(),
+                "current": "${locale.current}"
+            };
+
+        </#if>
+
+        return undefined;
+
+    })(),
+    "auth": (function (){
+
+
+        <#if auth?has_content>
+
+            var out= {
+                "showUsername": ${auth.showUsername()?c},
+                "showResetCredentials": ${auth.showResetCredentials()?c},
+                "showTryAnotherWayLink": ${auth.showTryAnotherWayLink()?c}
+            };
+
+            <#if auth.showUsername() && !auth.showResetCredentials()>
+                Object.assign(
+                    out,
+                    {
+                        "attemptedUsername": "${auth.attemptedUsername}"
+                    }
+                );
+            </#if>
+
+            return out;
+
+        </#if>
+
+
+        return undefined;
+
+    })(),
+    "scripts": (function(){
+
+        var out = [];
+
+        <#if scripts??>
+            <#list scripts as script>
+        out.push("${script}");
+            </#list>
+        </#if>
+
+        return out;
+
+    })(),
+    "message": (function (){
+
+        <#if message?has_content>
+
+            return { 
+                "type": "${message.type}",
+                "summary": "${kcSanitize(message.summary)?no_esc}"
+            };
+
+        </#if>
+
+        return undefined;
+
+    })(),
+    "isAppInitiatedAction": (function (){
+
+        <#if isAppInitiatedAction??>
+            return true;
+        </#if>
+        return false;
+
+    })()
+
+}
+</script>

src/bin/build-keycloak-theme/generateFtl/index.ts

@@ -4,7 +4,10 @@ import cheerio from "cheerio";
 import {
     replaceImportFromStaticInJsCode,
     generateCssCodeToDefineGlobals
-} from "./replaceImportFromStatic";
+} from "../replaceImportFromStatic";
+import fs from "fs";
+import { join as pathJoin } from "path";
+import { objectKeys } from "evt/tools/typeSafety/objectKeys";
 
 export function generateFtlFilesCodeFactory(
     params: {
@@ -47,6 +50,22 @@ export function generateFtlFilesCodeFactory(
         })
     );
 
+    //FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.
+    const ftlPlaceholders = {
+        '{ "x": "xIdLqMeOed9sdLdIdOxdK0d" }':
+            fs.readFileSync(pathJoin(__dirname, "ftl2js.ftl"))
+                .toString("utf8")
+                .match(/^<script>const _=((?:.|\n)+)<\/script>[\n]?$/)![1],
+        '<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->':
+            [
+                '<#if scripts??>',
+                '    <#list scripts as script>',
+                '        <script src="${script}" type="text/javascript"></script>',
+                '    </#list>',
+                '</#if>',
+            ].join("\n")
+    };
+
     $("head").prepend(
         [
             ...(Object.keys(cssGlobalsToDefine).length === 0 ? [] : [
@@ -58,18 +77,14 @@ export function generateFtlFilesCodeFactory(
                 '</style>',
                 ''
             ]),
-
             '<script>',
             '    Object.assign(',
             `        window.${ftlValuesGlobalName},`,
-            '        {',
-            '            "url": {',
-            '                "loginAction": "${url.loginAction}",',
-            '                "resourcesPath": "${url.resourcesPath}"',
-            '            }',
-            '        }',
+            `        ${objectKeys(ftlPlaceholders)[0]}`,
             '    );',
             '</script>',
+            '',
+            objectKeys(ftlPlaceholders)[1],
             ''
         ].join("\n"),
     );
@@ -94,11 +109,15 @@ export function generateFtlFilesCodeFactory(
                 `   window.${ftlValuesGlobalName} = { "pageBasename": "${pageBasename}" };`,
                 '</script>',
                 ''
-            ].join("\n"),
-
+            ].join("\n")
         );
 
-        return { "ftlCode": $.html() };
+        let ftlCode = $.html();
+
+        objectKeys(ftlPlaceholders)
+            .forEach(id => ftlCode = ftlCode.replace(id, ftlPlaceholders[id]));
+
+        return { ftlCode };
 
     }
 

src/lib/keycloakFtlValues.ts

@@ -3,17 +3,53 @@
 
 import { ftlValuesGlobalName } from "../bin/build-keycloak-theme/generateKeycloakThemeResources";
 import type { generateFtlFilesCodeFactory } from "../bin/build-keycloak-theme/generateFtl";
-import { id } from "evt/tools/typeSafety/id";
+import { id } from "evt/tools/typeSafety/id";
 
+export type LanguageLabel =
+    /* spell-checker: disable */
+    "Deutsch" | "Norsk" | "Русский" | "Svenska" | "Português (Brasil)" | "Lietuvių" |
+    "English" | "Italiano" | "Français" | "中文简体" | "Español" | "Čeština" | "日本語" |
+    "Slovenčina" | "Polish" | "Català" | "Nederlands" | "tr";
+/* spell-checker: enable */
+
+export type LanguageTag = "de" | "no" | "ru" | "sv" | "pt-BR" | "lt" | "en" | "it" | "fr" | "zh-CN" | "es" | "cs" | "ja" | "sk" | "pl" | "ca" | "nl" | "tr";
 
 export type KeycloakFtlValues = {
     pageBasename: Parameters<ReturnType<typeof generateFtlFilesCodeFactory>["generateFtlFilesCode"]>[0]["pageBasename"];
     url: {
-        loginAction: string,
-        resourcesPath: string
-    }
+        loginAction: string;
+        resourcesPath: string;
+        resourcesCommonPath: string;
+        loginRestartFlowUrl: string;
+    },
+    realm: {
+        displayName?: string;
+        displayNameHtml?: string;
+        internationalizationEnabled: boolean;
+    },
+    //NOTE: Undefined if !realm.internationalizationEnabled
+    locale?: {
+        supported: {
+            url: string;
+            label: LanguageLabel;
+            languageTag: LanguageTag;
+        },
+        current: LanguageLabel;
+    },
+    auth?: {
+        showUsername: boolean;
+        showResetCredentials: boolean;
+        showTryAnotherWayLink: boolean;
+        attemptedUsername?: boolean;
+    },
+    scripts: string[];
+    message?: {
+        type: "success" | "warning" | "error" | "info";
+        summary: string;
+    },
+    isAppInitiatedAction: boolean;
 };
 
-export const { keycloakPagesContext } = 
+export const { keycloakPagesContext } =
     { [ftlValuesGlobalName]: id<KeycloakFtlValues | undefined>((window as any)[ftlValuesGlobalName]) };
 ;