Enabling shorter import paths [automatic]

CHANGELOG.md

@@ -1,3 +1,16 @@
+### **0.0.18** (2021-02-23)  
+  
+- Bump version number  
+- Moving on with implementation of the lib  
+- Update readme  
+- Readme eddit  
+- Fixing video link    
+  
+### **0.0.16** (2021-02-23)  
+  
+- Bump version  
+- Give test container credentials    
+  
 ### **0.0.14** (2021-02-23)  
   
 - Bump version number  

README.md

@@ -18,7 +18,7 @@ The problem:
 ![keycloak_before](https://user-images.githubusercontent.com/6702424/108838381-dbbbcf80-75d3-11eb-8ae8-db41563ef9db.gif)
 
 When we redirected to Keycloak the user suffers from a harsh context switch.
-The language is set back to default and the theme is different.  
+On je login/register pages the language is set back to default and the theme is different that the one on the app.  
 
 Keycloak does offer a way to customize theses pages but it requires a lot of raw HTML/CSS hacking
 to reproduce the look and feel of a specific app. Not mentioning the maintenance cost of such an endeavour.  
@@ -28,9 +28,7 @@ still letting Keycloak handle the heavy lifting of actually authenticating the u
 
 Here is `yarn add keycloak-react-theming` for you 🍸
 
-![image](https://user-images.githubusercontent.com/6702424/108833938-c9d72e00-75cd-11eb-8263-4334ca79275c.png)
-![image](https://user-images.githubusercontent.com/6702424/108834054-f68b4580-75cd-11eb-9661-b1a43836c4b0.png)
-![image](https://user-images.githubusercontent.com/6702424/108834220-32bea600-75ce-11eb-9e11-7661188beb7c.png)
+TODO: Insert video after.
 
 # How to use
 
@@ -56,6 +54,8 @@ Typically you will get:
 Then build your app with `yarn run build` or `npm run build`, you will be provided with instructions
 about how to load the theme into Keycloak.
 
+[![kickstart_video](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)](https://youtu.be/xTz0Rj7i2v8)
+
 ## Developing your login and register pages in your React app
 
 TODO

bin/build-keycloak-theme/generateFtl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"generateFtl.js","sourceRoot":"","sources":["../../src/bin/build-keycloak-theme/generateFtl.ts"],"names":[],"mappings":"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"}

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>

bin/build-keycloak-theme/generateFtl/index.js

@@ -25,7 +25,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateFtlFilesCodeFactory = void 0;
 var cheerio_1 = __importDefault(require("cheerio"));
-var replaceImportFromStatic_1 = require("./replaceImportFromStatic");
+var replaceImportFromStatic_1 = require("../replaceImportFromStatic");
+var fs_1 = __importDefault(require("fs"));
+var path_1 = require("path");
+var objectKeys_1 = require("evt/tools/typeSafety/objectKeys");
 function generateFtlFilesCodeFactory(params) {
     var ftlValuesGlobalName = params.ftlValuesGlobalName, cssGlobalsToDefine = params.cssGlobalsToDefine, indexHtmlCode = params.indexHtmlCode;
     var $ = cheerio_1.default.load(indexHtmlCode);
@@ -59,6 +62,19 @@ function generateFtlFilesCodeFactory(params) {
             $(element).attr(attrName, "${url.resourcesPath}" + href);
         });
     });
+    //FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.
+    var ftlPlaceholders = {
+        '{ "x": "xIdLqMeOed9sdLdIdOxdK0d" }': fs_1.default.readFileSync(path_1.join(__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(__spread((Object.keys(cssGlobalsToDefine).length === 0 ? [] : [
         '',
         '<style>',
@@ -69,14 +85,11 @@ function generateFtlFilesCodeFactory(params) {
         '<script>',
         '    Object.assign(',
         "        window." + ftlValuesGlobalName + ",",
-        '        {',
-        '            "url": {',
-        '                "loginAction": "${url.loginAction}",',
-        '                "resourcesPath": "${url.resourcesPath}"',
-        '            }',
-        '        }',
+        "        " + objectKeys_1.objectKeys(ftlPlaceholders)[0],
         '    );',
         '</script>',
+        '',
+        objectKeys_1.objectKeys(ftlPlaceholders)[1],
         ''
     ]).join("\n"));
     var partiallyFixedIndexHtmlCode = $.html();
@@ -90,9 +103,12 @@ function generateFtlFilesCodeFactory(params) {
             '</script>',
             ''
         ].join("\n"));
-        return { "ftlCode": $.html() };
+        var ftlCode = $.html();
+        objectKeys_1.objectKeys(ftlPlaceholders)
+            .forEach(function (id) { return ftlCode = ftlCode.replace(id, ftlPlaceholders[id]); });
+        return { ftlCode: ftlCode };
     }
     return { generateFtlFilesCode: generateFtlFilesCode };
 }
 exports.generateFtlFilesCodeFactory = generateFtlFilesCodeFactory;
-//# sourceMappingURL=generateFtl.js.map
+//# sourceMappingURL=index.js.map

bin/build-keycloak-theme/generateFtl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/bin/build-keycloak-theme/generateFtl/index.ts"],"names":[],"mappings":"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"}

bin/build-keycloak-theme/index.js

@@ -75,7 +75,7 @@ if (require.main === module) {
         '',
         "$ ./" + path_1.relative(reactProjectDirPath, path_1.join(exports.keycloakThemeBuildingDirPath, generateDebugFiles_1.containerLaunchScriptBasename)),
         '',
-        'To enable the theme within keycloak log into the admin console, create a realm (called "myrealm" for example),',
+        'To enable the theme within keycloak log into the admin console ( username: admin, password: admin), create a realm (called "myrealm" for example),',
         "go to your realm settings, click on the theme tab then select " + parsedPackageJson.name + ".",
         "More details: https://www.keycloak.org/getting-started/getting-started-docker",
         '',

bin/build-keycloak-theme/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/bin/build-keycloak-theme/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,mFAAkF;AAClF,mEAAkE;AAElE,6BAA4F;AAC5F,2DAA+C;AAC/C,2DAAyF;AAGzF,IAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;AAE1C,IAAM,iBAAiB,GAAsB,OAAO,CAAC,WAAQ,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC;AAEvF,QAAA,4BAA4B,GAAG,WAAQ,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC;AAG5F,OAAO,CAAC,GAAG,CAAC,oCAAoC,CAAC,CAAC;AAElD,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE;IAEzB,+DAA8B,CAAC;QAC3B,4BAA4B,sCAAA;QAC5B,sBAAsB,EAAE,WAAQ,CAAC,mBAAmB,EAAE,OAAO,CAAC;QAC9D,WAAW,EAAE,iBAAiB,CAAC,IAAI;KACtC,CAAC,CAAC;IAEK,IAAA,WAAW,GAAK,+CAAsB,CAAC;QAC3C,iBAAiB,mBAAA;QACjB,4BAA4B,sCAAA;KAC/B,CAAC,YAHiB,CAGhB;IAEH,aAAa,CAAC,QAAQ,CAClB,aAAa,EACb,EAAE,KAAK,EAAE,oCAA4B,EAAE,CAC1C,CAAC;IAEF,uCAAkB,CAAC;QACf,4BAA4B,sCAAA;QAC5B,iBAAiB,EAAE,iBAAiB,CAAC,IAAI;KAC5C,CAAC,CAAC;IAEH,OAAO,CAAC,GAAG,CAAC;QACR,EAAE;QACF,sEAA+D,eAAY,CAAC,mBAAmB,EAAE,WAAW,CAAC,kBAAK;QAClH,mJAAiJ;QACjJ,EAAE;QACF,2EAA2E;QAC3E,EAAE;QACF,cAAc;QACd,4BAA4B;QAC5B,oCAAoC;QACpC,kCAAkC;QAClC,yCAAyC;QACzC,oBAAoB;QACpB,kBAAkB;QAClB,iBAAiB;QACjB,kBAAkB;QAClB,gDAA8C,eAAY,CAAC,WAAW,CAAC,4BAAuB,eAAY,CAAC,WAAW,CAAG;QACzH,yBAAyB;QACzB,gCAAgC;QAChC,sCAAsC;QACtC,UAAU;QACV,8BAA8B;QAC9B,gCAAgC;QAChC,qEAAqE;QACrE,EAAE;QACF,EAAE;QACF,8HAA8H;QAC9H,EAAE;QACF,SAAO,eAAY,CAAC,mBAAmB,EAAE,WAAQ,CAAC,oCAA4B,EAAE,kDAA6B,CAAC,CAAG;QACjH,EAAE;QACF,gHAAgH;QAChH,mEAAiE,iBAAiB,CAAC,IAAI,MAAG;QAC1F,+EAA+E;QAC/E,EAAE;QACF,+FAA+F;QAC/F,EAAE;KACL,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;CAEjB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/bin/build-keycloak-theme/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,mFAAkF;AAClF,mEAAkE;AAElE,6BAA4F;AAC5F,2DAA+C;AAC/C,2DAAyF;AAGzF,IAAM,mBAAmB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;AAE1C,IAAM,iBAAiB,GAAsB,OAAO,CAAC,WAAQ,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC,CAAC;AAEvF,QAAA,4BAA4B,GAAG,WAAQ,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,CAAC;AAG5F,OAAO,CAAC,GAAG,CAAC,oCAAoC,CAAC,CAAC;AAElD,IAAI,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE;IAEzB,+DAA8B,CAAC;QAC3B,4BAA4B,sCAAA;QAC5B,sBAAsB,EAAE,WAAQ,CAAC,mBAAmB,EAAE,OAAO,CAAC;QAC9D,WAAW,EAAE,iBAAiB,CAAC,IAAI;KACtC,CAAC,CAAC;IAEK,IAAA,WAAW,GAAK,+CAAsB,CAAC;QAC3C,iBAAiB,mBAAA;QACjB,4BAA4B,sCAAA;KAC/B,CAAC,YAHiB,CAGhB;IAEH,aAAa,CAAC,QAAQ,CAClB,aAAa,EACb,EAAE,KAAK,EAAE,oCAA4B,EAAE,CAC1C,CAAC;IAEF,uCAAkB,CAAC;QACf,4BAA4B,sCAAA;QAC5B,iBAAiB,EAAE,iBAAiB,CAAC,IAAI;KAC5C,CAAC,CAAC;IAEH,OAAO,CAAC,GAAG,CAAC;QACR,EAAE;QACF,sEAA+D,eAAY,CAAC,mBAAmB,EAAE,WAAW,CAAC,kBAAK;QAClH,mJAAiJ;QACjJ,EAAE;QACF,2EAA2E;QAC3E,EAAE;QACF,cAAc;QACd,4BAA4B;QAC5B,oCAAoC;QACpC,kCAAkC;QAClC,yCAAyC;QACzC,oBAAoB;QACpB,kBAAkB;QAClB,iBAAiB;QACjB,kBAAkB;QAClB,gDAA8C,eAAY,CAAC,WAAW,CAAC,4BAAuB,eAAY,CAAC,WAAW,CAAG;QACzH,yBAAyB;QACzB,gCAAgC;QAChC,sCAAsC;QACtC,UAAU;QACV,8BAA8B;QAC9B,gCAAgC;QAChC,qEAAqE;QACrE,EAAE;QACF,EAAE;QACF,8HAA8H;QAC9H,EAAE;QACF,SAAO,eAAY,CAAC,mBAAmB,EAAE,WAAQ,CAAC,oCAA4B,EAAE,kDAA6B,CAAC,CAAG;QACjH,EAAE;QACF,oJAAoJ;QACpJ,mEAAiE,iBAAiB,CAAC,IAAI,MAAG;QAC1F,+EAA+E;QAC/E,EAAE;QACF,+FAA+F;QAC/F,EAAE;KACL,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;CAEjB"}

lib/keycloakFtlValues.d.ts

@@ -1,9 +1,38 @@
 import type { generateFtlFilesCodeFactory } from "../bin/build-keycloak-theme/generateFtl";
+export declare type LanguageLabel = "Deutsch" | "Norsk" | "Русский" | "Svenska" | "Português (Brasil)" | "Lietuvių" | "English" | "Italiano" | "Français" | "中文简体" | "Español" | "Čeština" | "日本語" | "Slovenčina" | "Polish" | "Català" | "Nederlands" | "tr";
+export declare type LanguageTag = "de" | "no" | "ru" | "sv" | "pt-BR" | "lt" | "en" | "it" | "fr" | "zh-CN" | "es" | "cs" | "ja" | "sk" | "pl" | "ca" | "nl" | "tr";
 export declare type KeycloakFtlValues = {
     pageBasename: Parameters<ReturnType<typeof generateFtlFilesCodeFactory>["generateFtlFilesCode"]>[0]["pageBasename"];
     url: {
         loginAction: string;
         resourcesPath: string;
+        resourcesCommonPath: string;
+        loginRestartFlowUrl: string;
     };
+    realm: {
+        displayName?: string;
+        displayNameHtml?: string;
+        internationalizationEnabled: boolean;
+    };
+    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 declare const keycloakPagesContext: KeycloakFtlValues | undefined;

lib/keycloakFtlValues.js.map

@@ -1 +1 @@
-{"version":3,"file":"keycloakFtlValues.js","sourceRoot":"","sources":["../src/lib/keycloakFtlValues.ts"],"names":[],"mappings":";;;;AAGA,6GAAiG;AAEjG,8CAA6C;AAW9B,QAAA,oBAAoB,aAC7B,GAAC,oDAAmB,IAAG,OAAE,CAAiC,MAAc,CAAC,oDAAmB,CAAC,CAAC,2BAAG;AACvG,CAAC"}
+{"version":3,"file":"keycloakFtlValues.js","sourceRoot":"","sources":["../src/lib/keycloakFtlValues.ts"],"names":[],"mappings":";;;;AAGA,6GAAiG;AAEjG,8CAA6C;AA+C9B,QAAA,oBAAoB,aAC7B,GAAC,oDAAmB,IAAG,OAAE,CAAiC,MAAc,CAAC,oDAAmB,CAAC,CAAC,2BAAG;AACvG,CAAC"}

package-lock.json

@@ -1,11 +1,11 @@
 {
     "name": "keycloak-react-theming",
-    "version": "0.0.14",
+    "version": "0.0.18",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
-            "version": "0.0.13",
+            "version": "0.0.18",
             "license": "MIT",
             "dependencies": {
                 "cheerio": "^1.0.0-rc.5",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloak-react-theming",
-    "version": "0.0.14",
+    "version": "0.0.18",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -17,7 +17,8 @@
     "files": [
         "src/bin/build-keycloak-theme/generateDebugFiles/index.ts",
         "src/bin/build-keycloak-theme/generateDebugFiles/standalone-ha.xml",
-        "src/bin/build-keycloak-theme/generateFtl.ts",
+        "src/bin/build-keycloak-theme/generateFtl/ftl2js.ftl",
+        "src/bin/build-keycloak-theme/generateFtl/index.ts",
         "src/bin/build-keycloak-theme/generateJavaStackFiles.ts",
         "src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts",
         "src/bin/build-keycloak-theme/index.ts",
@@ -31,9 +32,10 @@
         "bin/build-keycloak-theme/generateDebugFiles/index.js",
         "bin/build-keycloak-theme/generateDebugFiles/index.js.map",
         "bin/build-keycloak-theme/generateDebugFiles/standalone-ha.xml",
-        "bin/build-keycloak-theme/generateFtl.d.ts",
-        "bin/build-keycloak-theme/generateFtl.js",
-        "bin/build-keycloak-theme/generateFtl.js.map",
+        "bin/build-keycloak-theme/generateFtl/ftl2js.ftl",
+        "bin/build-keycloak-theme/generateFtl/index.d.ts",
+        "bin/build-keycloak-theme/generateFtl/index.js",
+        "bin/build-keycloak-theme/generateFtl/index.js.map",
         "bin/build-keycloak-theme/generateJavaStackFiles.d.ts",
         "bin/build-keycloak-theme/generateJavaStackFiles.js",
         "bin/build-keycloak-theme/generateJavaStackFiles.js.map",

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/bin/build-keycloak-theme/index.ts

@@ -70,7 +70,7 @@ if (require.main === module) {
         '',
         `$ ./${pathRelative(reactProjectDirPath, pathJoin(keycloakThemeBuildingDirPath, containerLaunchScriptBasename))}`,
         '',
-        'To enable the theme within keycloak log into the admin console, create a realm (called "myrealm" for example),',
+        'To enable the theme within keycloak log into the admin console ( username: admin, password: admin), create a realm (called "myrealm" for example),',
         `go to your realm settings, click on the theme tab then select ${parsedPackageJson.name}.`,
         `More details: https://www.keycloak.org/getting-started/getting-started-docker`,
         '',

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]) };
 ;

tsconfig.tsbuildinfo

@@ -241,8 +241,13 @@
         "signature": "c3a2f14af88ebca3c9e0445aa8c14d1cf6fcebfdadf54a46e26c46959e368119",
         "affectsGlobalScope": false
       },
-      "../src/bin/build-keycloak-theme/generateFtl.ts": {
-        "version": "9b6401a245a32e2968648cf5e48595a0a4e1d12237bf8aadf2da6336304ad8c8",
+      "../node_modules/evt/tools/typeSafety/objectKeys.d.ts": {
+        "version": "4da2684f4596bd222840b428282b011560505fd93efb2de24709418ec33ad614",
+        "signature": "4da2684f4596bd222840b428282b011560505fd93efb2de24709418ec33ad614",
+        "affectsGlobalScope": false
+      },
+      "../src/bin/build-keycloak-theme/generateFtl/index.ts": {
+        "version": "0f236ff99727073587d85a380fc1e46f3176124d458ad699560507de2180c794",
         "signature": "3a11af9abe294b90f19598d16e9d081f5452cdb668939e63abdd6a4d90955279",
         "affectsGlobalScope": false
       },
@@ -262,7 +267,7 @@
         "affectsGlobalScope": false
       },
       "../src/bin/build-keycloak-theme/index.ts": {
-        "version": "324a1c0c8c3cfa50dbc213fa4f2650551a3e5537e53635b8d4225acad9c83dc3",
+        "version": "1f6404cd2a4d67ef191c6a28fad07efc06da8c8cb7eab19878d4ac5697a841a6",
         "signature": "cc0e708e12dd472472902f20c879f10b9352d52e6823ac341bc0941ef15b9618",
         "affectsGlobalScope": false
       },
@@ -277,8 +282,8 @@
         "affectsGlobalScope": false
       },
       "../src/lib/keycloakFtlValues.ts": {
-        "version": "8855aa745f2916ae3bc7161b4ef9784c21f595070e177e2a201a5d8ffc672a64",
-        "signature": "47f69685f9207ddeb9e876a0b9545efbd8a73a6b3b123c9b685165bde9d408df",
+        "version": "1cad1ed4d26f828a7cdeef4ea5eb9bd6db3026ef9464eec29d1b6c0d00d78954",
+        "signature": "a4b2d36ae0aadc02ecd11b0e7da14a0b66f9498a2528e5d019023355787fed27",
         "affectsGlobalScope": false
       },
       "../src/lib/index.ts": {
@@ -774,8 +779,11 @@
         "../node_modules/@types/node/fs.d.ts",
         "../node_modules/@types/node/path.d.ts"
       ],
-      "../src/bin/build-keycloak-theme/generateFtl.ts": [
+      "../src/bin/build-keycloak-theme/generateFtl/index.ts": [
+        "../node_modules/@types/node/fs.d.ts",
+        "../node_modules/@types/node/path.d.ts",
         "../node_modules/cheerio/types/index.d.ts",
+        "../node_modules/evt/tools/typeSafety/objectKeys.d.ts",
         "../src/bin/build-keycloak-theme/replaceImportFromStatic.ts"
       ],
       "../src/bin/build-keycloak-theme/generateJavaStackFiles.ts": [
@@ -786,7 +794,7 @@
       "../src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts": [
         "../node_modules/@types/node/fs.d.ts",
         "../node_modules/@types/node/path.d.ts",
-        "../src/bin/build-keycloak-theme/generateFtl.ts",
+        "../src/bin/build-keycloak-theme/generateFtl/index.ts",
         "../src/bin/build-keycloak-theme/replaceImportFromStatic.ts",
         "../src/tools/transformCodebase.ts"
       ],
@@ -811,7 +819,7 @@
       ],
       "../src/lib/keycloakFtlValues.ts": [
         "../node_modules/evt/tools/typeSafety/id.d.ts",
-        "../src/bin/build-keycloak-theme/generateFtl.ts",
+        "../src/bin/build-keycloak-theme/generateFtl/index.ts",
         "../src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts"
       ],
       "../src/test/build-keycloak-theme.ts": [
@@ -1057,7 +1065,7 @@
         "../src/lib/keycloakFtlValues.ts"
       ],
       "../src/lib/keycloakFtlValues.ts": [
-        "../src/bin/build-keycloak-theme/generateFtl.ts"
+        "../src/bin/build-keycloak-theme/generateFtl/index.ts"
       ]
     },
     "semanticDiagnosticsPerFile": [
@@ -1119,6 +1127,7 @@
       "../node_modules/domutils/lib/tagtypes.d.ts",
       "../node_modules/domutils/lib/traversal.d.ts",
       "../node_modules/evt/tools/typeSafety/id.d.ts",
+      "../node_modules/evt/tools/typeSafety/objectKeys.d.ts",
       "../node_modules/htmlparser2/lib/FeedHandler.d.ts",
       "../node_modules/htmlparser2/lib/Parser.d.ts",
       "../node_modules/htmlparser2/lib/Tokenizer.d.ts",
@@ -1154,7 +1163,7 @@
       "../node_modules/typescript/lib/lib.es5.d.ts",
       "../node_modules/typescript/lib/lib.esnext.intl.d.ts",
       "../src/bin/build-keycloak-theme/generateDebugFiles/index.ts",
-      "../src/bin/build-keycloak-theme/generateFtl.ts",
+      "../src/bin/build-keycloak-theme/generateFtl/index.ts",
       "../src/bin/build-keycloak-theme/generateJavaStackFiles.ts",
       "../src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts",
       "../src/bin/build-keycloak-theme/index.ts",