Update changelog v4.2.14

Prevent ftl errors in Keycloak log

CHANGELOG.md

@@ -1,3 +1,20 @@
+### **4.2.14** (2021-12-12)  
+  
+- Merge pull request #65 from InseeFrLab/doge_ftl_errors
+
+Prevent ftl errors in Keycloak log  
+- Encourage users to report errors in logs  
+- Fix ftl error related to url.loginAction in saml-post-form.ftl  
+- Ftl prevent error with updateProfileCtx  
+- Ftl prevent error with auth.attemptedUsername  
+- Fix ftl error as comment formatting  
+- Merge remote-tracking branch 'origin/main' into doge_ftl_errors  
+- Update README, remove all instruction about errors in logs  
+- Avoid error in Keycloak logs, fix long template loading time  
+- Add missing collon in README sample code
+
+Add miss ','    
+  
 ### **4.2.13** (2021-12-08)  
   
 - Fix broken link about how to import fonts #62  

README.md

@@ -20,10 +20,10 @@
     <img src="https://user-images.githubusercontent.com/6702424/110260457-a1c3d380-7fac-11eb-853a-80459b65626b.png">
 </p>
 
-**NEW in v4**
+**NEW in 4.2.14**
 
--   Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳
--   Improvements (and breaking changes in `import { useKcMessage } from "keycloakify"`.
+-   No more error in Keycloak logs 🍾
+-   Templates now load in fraction of a second 🏎
 
 # Motivations
 
@@ -71,13 +71,12 @@ If you already have a Keycloak custom theme, it can be easily ported to Keycloak
 -   [GitHub Actions](#github-actions)
 -   [Limitations](#limitations)
     -   [`process.env.PUBLIC_URL` not supported.](#processenvpublic_url-not-supported)
-    -   [`@font-face` importing fonts from the `src/` dir](#font-face-importing-fonts-from-thesrc-dir)
+    -   [`@font-face` importing fonts from the `src/` dir](#font-face-importing-fonts-from-the-src-dir)
         -   [Example of setup that **won't** work](#example-of-setup-that-wont-work)
         -   [Possible workarounds](#possible-workarounds)
 -   [Implement context persistence (optional)](#implement-context-persistence-optional)
 -   [Kickstart video](#kickstart-video)
--   [About the errors related to `objectToJson` in Keycloak logs.](#about-the-errors-related-to-objecttojson-in-keycloak-logs)
--   [The pages take too long to load ?](#the-pages-take-too-long-to-load-)
+-   [FTL errors related to `ftl_object_to_js_code_declaring_an_object` in Keycloak logs.](#ftl-errors-related-to-ftl_object_to_js_code_declaring_an_object-in-keycloak-logs)
 -   [Adding custom message (to `i18n/useKcMessage.tsx`)](#adding-custom-message-to-i18nusekcmessagetsx)
 -   [Email domain whitelist](#email-domain-whitelist)
 -   [Changelog highlights](#changelog-highlights)
@@ -152,27 +151,23 @@ your index should look something like:
 `src/index.tsx`
 
 ```tsx
-import { App } from "./<wherever>/App";
-import {
-  KcApp,
-  defaultKcProps,
-  getKcContext
-} from "keycloakify";
-import { css } from "tss-react/@emotion/css";
+import { App } from "./<wherever>/App";
+import { KcApp, defaultKcProps, getKcContext } from "keycloakify";
+import { css } from "tss-react/@emotion/css";
 
 const { kcContext } = getKcContext();
 
 const myClassName = css({ "color": "red" });
 
 reactDom.render(
-        <KcApp
-            kcContext={kcContext}
-            {...{
-                ...defaultKcProps,
-                "kcHeaderWrapperClass": myClassName
-            }}
-        />
-    document.getElementById("root")
+    <KcApp
+        kcContext={kcContext}
+        {...{
+            ...defaultKcProps,
+            "kcHeaderWrapperClass": myClassName,
+        }}
+    />,
+    document.getElementById("root"),
 );
 ```
 
@@ -358,7 +353,7 @@ the building and publishing of the theme (the .jar file).
 You won't be able to [import things from your public directory **in your JavaScript code**](https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system).
 (This isn't recommended anyway).
 
-## `@font-face` importing fonts from the `src/` dir
+## `@font-face` importing fonts from the `src/` dir
 
 If you are building the theme with [--external-assets](#enable-loading-in-a-blink-of-a-eye-of-login-pages-)
 this limitation doesn't apply, you can import fonts however you see fit.
@@ -442,35 +437,22 @@ flash of the blank html before the js bundle have been evaluated
 _NOTE: keycloak-react-theming was renamed keycloakify since this video was recorded_
 [![kickstart_video](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)](https://youtu.be/xTz0Rj7i2v8)
 
-# About the errors related to `objectToJson` in Keycloak logs.
+# FTL errors related to `ftl_object_to_js_code_declaring_an_object` in Keycloak logs.
 
-The logs of your keycloak server will always show this kind of errors every time a client request a page:
+If you ever encounter one of these errors:
 
 ```log
 FTL stack trace ("~" means nesting-related):
-        - Failed at: #local value = object[key]  [in template "login.ftl" in macro "objectToJson_please_ignore_errors" at line 70, column 21]
-        - Reached through: @compress  [in template "login.ftl" in macro "objectToJson_please_ignore_errors" at line 36, column 5]
-        - Reached through: @objectToJson_please_ignore_errors object=value depth=(dep...  [in template "login.ftl" in macro "objectToJson_please_ignore_errors" at line 81, column 27]
-        - Reached through: @compress  [in template "login.ftl" in macro "objectToJson_please_ignore_errors" at line 36, column 5]
-        - Reached through: @objectToJson_please_ignore_errors object=(.data_model) de...  [in template "login.ftl" at line 163, column 43]
+        - Failed at: #local value = object[key]  [in template "login.ftl" in macro "ftl_object_to_js_code_declaring_an_object" at line 70, column 21]
+        - Reached through: @compress  [in template "login.ftl" in macro "ftl_object_to_js_code_declaring_an_object" at line 36, column 5]
+        - Reached through: @ftl_object_to_js_code_declaring_an_object object=value depth=(dep...  [in template "login.ftl" in macro "ftl_object_to_js_code_declaring_an_object" at line 81, column 27]
+        - Reached through: @compress  [in template "login.ftl" in macro "ftl_object_to_js_code_declaring_an_object" at line 36, column 5]
+        - Reached through: @ftl_object_to_js_code_declaring_an_object object=(.data_model) de...  [in template "login.ftl" at line 163, column 43]
 ```
 
-Theses are expected to show up in the log.
-Unfortunately, there is nothing I know of that can be done to avoid them or even mute them.
-They can be, however, safely ignored.
-
-To [converts the `.ftl` values into a JavaScript object](https://github.com/InseeFrLab/keycloakify/blob/main/src/bin/build-keycloak-theme/generateFtl/common.ftl)
-without making assumptions on the `.data_model` we have to do things that throws.  
-It's all-right because every statement that can fail is inside an `<#attempt><#recorver>` block but it results in errors being printed to the logs.
-
-# The pages take too long to load ?
-
-The problem of templates taking a long time to load only happens in the test environment, when you have a console logging all the above-mentioned `.ftl` warnings in real time. Logging all those warnings is what takes time. Once in production page load is way faster.
-
-If you run the docker container locally we acknowledge that the loading time is getting out of hand.
-We are [in the process](https://github.com/InseeFrLab/keycloakify/pull/63) of resolving this issue.
-
-In the meantime we recommend [to run the docker container as a background task](https://youtu.be/F29Z1GaH-jk).
+It's just noise, they can be safely ignored.  
+You can, however, and are encouraged to, report any that you would spot.  
+Just open an issue about it and I will release a patched version of Keycloakify in the better delays.
 
 # Adding custom message (to `i18n/useKcMessage.tsx`)
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "4.2.14-beta.1",
+    "version": "4.2.14",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",

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

@@ -1,4 +1,5 @@
 <script>const _= 
+<#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
 (()=>{
 
     const out = 
@@ -76,9 +77,11 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
         }
     };
 
+    out["pageId"] = "${pageId}";
+
     return out;
 
-})();
+})()
 <#function ftl_object_to_js_code_declaring_an_object object path>
 
         <#local isHash = "">
@@ -112,13 +115,35 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
                 </#if>
 
                 <#if 
-                    ["loginUpdatePasswordUrl", "loginUpdateProfileUrl", "loginUsernameReminderUrl", "loginUpdateTotpUrl"]?seq_contains(key) && 
-                    path?map(x -> x?is_number?string("_index_",x))?join("°") == ["url"]?join("°")
+                    (
+                        ["loginUpdatePasswordUrl", "loginUpdateProfileUrl", "loginUsernameReminderUrl", "loginUpdateTotpUrl"]?seq_contains(key) && 
+                        are_same_path(path, ["url"])
+                    ) || (
+                        key == "updateProfileCtx" && 
+                        are_same_path(path, [])
+                    ) || (
+                        <#-- https://github.com/InseeFrLab/keycloakify/pull/65#issuecomment-991896344 -->
+                        key == "loginAction" && 
+                        are_same_path(path, ["url"]) && 
+                        pageId == "saml-post-form.ftl"
+                    )
                 >
-                    <#local out_seq += ["/*If you need" + key + " please submit an issue to the Keycloakify repo*/"]>
+                    <#local out_seq += ["/*If you need '" + key + "' on " + pageId + ", please submit an issue to the Keycloakify repo*/"]>
                     <#continue>
                 </#if>
 
+                <#if key == "attemptedUsername" && are_same_path(path, ["auth"])>
+
+                    <#attempt>
+                        <#-- https://github.com/keycloak/keycloak/blob/3a2bf0c04bcde185e497aaa32d0bb7ab7520cf4a/themes/src/main/resources/theme/base/login/template.ftl#L63 -->
+                        <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
+                            <#continue>
+                        </#if>
+                    <#recover>
+                    </#attempt>
+
+                </#if>
+
                 <#attempt>
                     <#if !object[key]??>
                         <#continue>
@@ -226,5 +251,40 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
 
         <#return "ABORT: Couldn't convert into string non hash, non method, non boolean, non enumerable object">
 
+</#function>
+<#function are_same_path path searchedPath>
+
+    <#if path?size != path?size>
+        <#return false>
+    </#if>
+
+    <#local i=0>
+
+    <#list path as property>
+
+        <#local searchedProperty=searchedPath[i]>
+
+        <#if searchedProperty?is_string && searchedProperty == "*">
+            <#continue>
+        </#if>
+
+        <#if searchedProperty?is_string && !property?is_string>
+            <#return false>
+        </#if>
+
+        <#if searchedProperty?is_number && !property?is_number>
+            <#return false>
+        </#if>
+
+        <#if searchedProperty?string != property?string>
+            <#return false>
+        </#if>
+
+        <#local i+= 1>
+
+    </#list>
+
+    <#return true>
+
 </#function>
 </script>

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

@@ -87,8 +87,6 @@ export function generateFtlFilesCodeFactory(params: {
         ].join("\n"),
     };
 
-    const pageIdSearchValue = "PAGE_ID_xIgLsPgGId9D8e";
-
     $("head").prepend(
         [
             ...(Object.keys(cssGlobalsToDefine).length === 0
@@ -105,7 +103,6 @@ export function generateFtlFilesCodeFactory(params: {
                   ]),
             "<script>",
             `    window.${ftlValuesGlobalName}= ${objectKeys(replaceValueBySearchValue)[0]};`,
-            `    window.${ftlValuesGlobalName}["pageId"]= "${pageIdSearchValue}";`,
             "</script>",
             "",
             objectKeys(replaceValueBySearchValue)[1],
@@ -125,7 +122,8 @@ export function generateFtlFilesCodeFactory(params: {
 
         Object.entries({
             ...replaceValueBySearchValue,
-            [pageIdSearchValue]: pageId,
+            //If updated, don't forget to change in the ftl script as well.
+            "PAGE_ID_xIgLsPgGId9D8e": pageId,
         }).map(([searchValue, replaceValue]) => (ftlCode = ftlCode.replace(searchValue, replaceValue)));
 
         return { ftlCode };