Update changelog v2.0.2

Fix typo on email

.github/workflows/ci.yaml

@@ -2,87 +2,128 @@ name: ci
 on:
   push:
     branches:
-      - develop
+      - main
   pull_request:
     branches:
-      - develop
+      - main
 
 jobs:
 
-  test_node:
-    runs-on: ubuntu-latest
+  test:
+    runs-on: macos-10.15
     strategy:
       matrix:
-        node: [ '14', '13', '12' ]
+        node: [ '15', '14', '13' ]
     name: Test with Node v${{ matrix.node }}
     steps:
     - name: Tell if project is using npm or yarn
-      id: _1
-      uses: garronej/github_actions_toolkit@v1.11
+      id: step1
+      uses: garronej/github_actions_toolkit@v2.2
       with: 
         action_name: tell_if_project_uses_npm_or_yarn
-        owner: ${{github.repository_owner}}
-        repo: ${{github.event.repository.name}}
-        branch: ${{github.ref}}
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
+    - uses: actions/checkout@v2.3.4
+    - uses: actions/setup-node@v2.1.3
       with:
         node-version: ${{ matrix.node }}
-    - if: steps._1.outputs.npm_or_yarn == 'yarn'
+    - uses: bahmutov/npm-install@v1
+    - if: steps.step1.outputs.npm_or_yarn == 'yarn'
       run: |
-        yarn install --frozen-lockfile                                                                                                                                                                                        
-        yarn run build
-        yarn run test
-    - if: steps._1.outputs.npm_or_yarn == 'npm'
+        yarn build
+        yarn test
+    - if: steps.step1.outputs.npm_or_yarn == 'npm'
       run: |
-        npm ci                                                                                                                                                                                        
         npm run build
-        npm run test
-  trigger_publish:
-    name: Trigger publish.yaml workflow if package.json version updated ( and secrets.PAT is set ).
+        npm test
+  check_if_version_upgraded:
+    name: Check if version upgrade
+    if: github.event_name == 'push'
     runs-on: ubuntu-latest
-    env:
-      PAT: ${{secrets.PAT}}
-    if: github.event_name == 'push' && github.event.head_commit.author.name != 'ts_ci'
-    needs: test_node
+    needs: test
+    outputs:
+      from_version: ${{ steps.step1.outputs.from_version }}
+      to_version: ${{ steps.step1.outputs.to_version }}
+      is_upgraded_version: ${{steps.step1.outputs.is_upgraded_version }}
     steps:
-
-    - name: Get version on latest
-      id: v_latest
-      uses: garronej/github_actions_toolkit@v1.11
+    - uses: garronej/github_actions_toolkit@v2.2
+      id: step1
       with: 
-        action_name: get_package_json_version
-        owner: ${{github.repository_owner}}
-        repo: ${{github.event.repository.name}}
-        branch: latest
-        compare_to_version: '0.0.0'
+        action_name: is_package_json_version_upgraded
 
-    - name: Get version on develop
-      id: v_develop
-      uses: garronej/github_actions_toolkit@v1.11
-      with: 
-        action_name: get_package_json_version
-        owner: ${{github.repository_owner}}
-        repo: ${{github.event.repository.name}}
-        branch: ${{ github.sha }}
-        compare_to_version: ${{steps.v_latest.outputs.version || '0.0.0'}}
-
-    - name: 'Trigger the ''publish'' workflow' 
-      if: ${{ !!env.PAT && steps.v_develop.outputs.compare_result == '1' }}
-      uses: garronej/github_actions_toolkit@v1.11
-      env:
-        GITHUB_TOKEN: ${{ secrets.PAT }} 
+  update_changelog:
+    runs-on: ubuntu-latest
+    needs: check_if_version_upgraded
+    if: needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true'
+    steps:
+    - uses: garronej/github_actions_toolkit@v2.4
       with:
-        action_name: dispatch_event
-        owner: ${{github.repository_owner}}
-        repo: ${{github.event.repository.name}}
-        event_type: publish
-        client_payload_json: |
-          ${{
-            format(
-              '{{"from_version":"{0}","to_version":"{1}","repo":"{2}"}}',
-              steps.v_latest.outputs.version,
-              steps.v_develop.outputs.version,
-              github.event.repository.name
-            )
-          }}
+        action_name: update_changelog
+        branch: ${{ github.ref }}
+
+  create_github_release:
+    runs-on: ubuntu-latest
+    needs: 
+      - update_changelog
+      - check_if_version_upgraded
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        ref: ${{ github.ref }}
+    - name: Build GitHub release body
+      id: step1
+      run: |
+        if [ "$FROM_VERSION" = "0.0.0" ]; then
+            echo "::set-output name=body::🚀"
+        else
+            echo "::set-output name=body::📋 [CHANGELOG](https://github.com/$GITHUB_REPOSITORY/blob/v$TO_VERSION/CHANGELOG.md)"
+        fi
+      env: 
+        FROM_VERSION: ${{ needs.check_if_version_upgraded.outputs.from_version }}
+        TO_VERSION: ${{ needs.check_if_version_upgraded.outputs.to_version }}
+    - uses: garronej/action-gh-release@v0.2.0
+      with:
+        name: Release v${{ needs.check_if_version_upgraded.outputs.to_version }}
+        tag_name: v${{ needs.check_if_version_upgraded.outputs.to_version }}
+        target_commitish: ${{ github.ref }}
+        body: ${{ steps.step1.outputs.body }}
+        draft: false
+        prerelease: false
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 
+
+  publish_on_npm:
+    runs-on: macos-10.15
+    needs: 
+      - update_changelog
+      - check_if_version_upgraded
+    steps:
+    - uses: actions/checkout@v2.3.4
+      with:
+        ref: ${{ github.ref }}
+    - uses: actions/setup-node@v2.1.3
+      with:
+        node-version: '15'
+        registry-url: https://registry.npmjs.org/
+    - uses: bahmutov/npm-install@v1
+    - run: |
+        PACKAGE_MANAGER=npm
+        if [ -f "./yarn.lock" ]; then
+            PACKAGE_MANAGER=yarn
+        fi
+        $PACKAGE_MANAGER run build
+    - run: npx -y -p denoify@0.6.5 denoify_enable_short_npm_import_path
+      env:
+        DRY_RUN: "0"
+    - name: Publishing on NPM
+      run: |
+        if [ "$(npm show . version)" = "$VERSION" ]; then
+          echo "This version is already published"
+          exit 0
+        fi
+        if [ "$NODE_AUTH_TOKEN" = "" ]; then
+          echo "Can't publish on NPM, You must first create a secret called NPM_TOKEN that contains your NPM auth token. https://help.github.com/en/actions/automating-your-workflow-with-github-actions/creating-and-using-encrypted-secrets"
+          false
+        fi
+        npm publish
+      env:
+        NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+        VERSION: ${{ needs.check_if_version_upgraded.outputs.to_version }}

.github/workflows/publish.yaml

@@ -1,116 +0,0 @@
-on:
-  repository_dispatch:
-    types: publish
-
-jobs:
-  update_changelog_and_sync_package_lock_version:
-    name: Update CHANGELOG.md and make sure package.json and package-lock.json versions matches.
-    runs-on: ubuntu-latest
-    steps:
-    - name: Synchronize package.json  and package-lock.json version if needed.
-      uses: garronej/github_actions_toolkit@v1.11
-      env:
-        GITHUB_TOKEN: ${{ secrets.PAT }} 
-      with:
-        action_name: sync_package_and_package_lock_version
-        owner: ${{github.repository_owner}}
-        repo: ${{github.event.client_payload.repo}}
-        branch: develop
-        commit_author_email: ts_ci@github.com
-    - name: Update CHANGELOG.md
-      if: ${{ !!github.event.client_payload.from_version }}
-      uses: garronej/github_actions_toolkit@v1.11
-      env:
-        GITHUB_TOKEN: ${{ secrets.PAT }} 
-      with:
-        action_name: update_changelog
-        owner: ${{github.repository_owner}}
-        repo: ${{github.event.client_payload.repo}}
-        branch_behind: latest
-        branch_ahead: develop
-        commit_author_email: ts_ci@github.com
-        exclude_commit_from_author_names_json: '["ts_ci"]'
-
-  publish:
-    runs-on: ubuntu-latest
-    needs: update_changelog_and_sync_package_lock_version
-    steps:
-    - uses: actions/checkout@v2
-      with:
-        fetch-depth: 0
-        ref: develop
-    - name: Remove .github directory, useless on 'latest' branch
-      run: rm -r .github
-    - name: Remove branch 'latest' 
-      continue-on-error: true
-      run: |
-        git branch -d latest || true
-        git push origin :latest
-    - name: Create the new 'latest' branch
-      run: |
-        git branch latest
-        git checkout latest
-    - uses: actions/setup-node@v1
-    - run: |
-        if [ -f "./yarn.lock" ]; then
-            yarn install --frozen-lockfile                                                                                                                                                                                        
-        else
-            npm ci
-        fi
-    - run: |
-        PACKAGE_MANAGER=npm
-        if [ -f "./yarn.lock" ]; then
-            PACKAGE_MANAGER=yarn
-        fi
-        $PACKAGE_MANAGER run enable_short_import_path
-      env:
-        DRY_RUN: "0"
-    - name: (DEBUG) Show how the files have been moved to enable short import
-      run: ls -lR
-    - name: Publishing on NPM
-      run: |
-        if [ "$(npm show . version)" = "$VERSION" ]; then
-          echo "This version is already published"
-          exit 0
-        fi
-        if [ "$NPM_TOKEN" = "" ]; then
-          echo "Can't publish on NPM, You must first create a secret called NPM_TOKEN that contains your NPM auth token. https://help.github.com/en/actions/automating-your-workflow-with-github-actions/creating-and-using-encrypted-secrets"
-          false
-        fi
-        echo '//registry.npmjs.org/:_authToken=${NPM_TOKEN}' > .npmrc
-        npm publish
-        rm .npmrc
-      env:
-        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        VERSION: ${{ github.event.client_payload.to_version }}
-    - name: Commit changes
-      run: |
-        git config --local user.email "ts_ci@github.com"
-        git config --local user.name "ts_ci"
-        git add -A
-        git commit -am "Enabling shorter import paths [automatic]"
-    - run: git push origin latest
-    - name: Release body
-      id: id_rb
-      run: |
-        if [ "$FROM_VERSION" = "" ]; then
-            echo "::set-output name=body::🚀"
-        else
-            echo "::set-output name=body::📋 [CHANGELOG](https://github.com/$OWNER/$REPO/blob/$REF/CHANGELOG.md)"
-        fi
-      env: 
-        FROM_VERSION: ${{ github.event.client_payload.from_version }}
-        OWNER: ${{github.repository_owner}}
-        REPO: ${{github.event.client_payload.repo}}
-        REF: v${{github.event.client_payload.to_version}}
-    - name: Create Release
-      uses: garronej/create-release@master
-      env:
-        GITHUB_TOKEN: ${{ secrets.PAT }} 
-      with:
-        tag_name: v${{ github.event.client_payload.to_version }}
-        release_name: Release v${{ github.event.client_payload.to_version }}
-        branch: latest
-        draft: false
-        prerelease: false
-        body: ${{ steps.id_rb.outputs.body }}

CHANGELOG.md

@@ -1,3 +1,297 @@
+### **2.0.2** (2021-06-28)  
+  
+- Updagte README for implementing non incuded pages    
+  
+### **2.0.1** (2021-06-28)  
+  
+- Update documentation for v2    
+  
+# **2.0.0** (2021-06-28)  
+  
+- Fix last bugs before relasing v2  
+- Implement a mechanism to overload kcContext  
+- Give the option in template to pull the default assets or not  
+- Enable possiblity to support custom pages (without forking keycloakify)  
+- Implement a getter for kcContext  
+- Update README.md    
+  
+# **2.0.0** (2021-06-28)  
+  
+- Fix last bugs before relasing v2  
+- Implement a mechanism to overload kcContext  
+- Give the option in template to pull the default assets or not  
+- Enable possiblity to support custom pages (without forking keycloakify)  
+- Implement a getter for kcContext  
+- Update README.md    
+  
+### **1.2.1** (2021-06-22)  
+  
+- Remove unessesary log    
+  
+## **1.2.0** (2021-06-22)  
+  
+- Generate kcContext automatically :rocket:    
+  
+### **1.1.6** (2021-06-21)  
+  
+- Fix: Alert messages sometimes includes HTML that is not rendered  
+- Update dist    
+  
+### **1.1.5** (2021-06-15)  
+  
+- #11: Provide socials in the register    
+  
+### **1.1.4** (2021-06-15)  
+  
+- Merge pull request #12 from InseeFrLab/email-typo
+
+Fix typo on email  
+- Fix typo on email    
+  
+### **1.1.3** (2021-06-14)  
+  
+- Add missing key in Login for providers    
+  
+### **1.1.2** (2021-06-14)  
+  
+  
+  
+### **1.1.1** (2021-06-14)  
+  
+  
+  
+## **1.1.0** (2021-06-14)  
+  
+- Add login-idp-link-confirm.ftl  
+- Fix login-update-profile.ftl  
+- Add login-update-profile.ftl page  
+- Fix default background bug  
+- Remove unused 'markdown' dependency  
+- Fix warning related to powerhooks_useGlobalState_kcLanguageTag  
+- Update README.md    
+  
+### **1.0.4** (2021-05-28)  
+  
+- Instructions for custom themes with custom components    
+  
+### **1.0.3** (2021-05-23)  
+  
+- Instuction about how to integrate with non CRA projects  
+- Add mention to awesome list    
+  
+### **1.0.2** (2021-05-01)  
+  
+  
+  
+### **1.0.1** (2021-05-01)  
+  
+- Fix: LoginOtp (and not otc)    
+  
+# **1.0.0** (2021-05-01)  
+  
+- #4: Guide for implementing a missing page  
+- Support OTP #4    
+  
+### **0.4.4** (2021-04-29)  
+  
+- Fix previous release    
+  
+### **0.4.3** (2021-04-29)  
+  
+- Add infos about the plugin that defines authorizedMailDomains    
+  
+### **0.4.2** (2021-04-29)  
+  
+- Client side validation of allowed email domains  
+- Support email whitlisting  
+- Restore kickstart video in the readme  
+- Update README.md  
+- Update README.md  
+- Important readme update    
+  
+### **0.4.1** (2021-04-11)  
+  
+- Quietly re-introduce --external-assets  
+- Give example of customization    
+  
+## **0.4.0** (2021-04-09)  
+  
+- Acual support of Therms of services    
+  
+### **0.3.24** (2021-04-08)  
+  
+- Add missing dependency: markdown    
+  
+### **0.3.23** (2021-04-08)  
+  
+- Allow to lazily load therms    
+  
+### **0.3.22** (2021-04-08)  
+  
+- update powerhooks  
+- Support terms and condition  
+- Fix info.ftl  
+- For useKcMessage we prefer returning callbacks with a changing references    
+  
+### **0.3.21** (2021-04-04)  
+  
+- Update powerhooks    
+  
+### **0.3.20** (2021-04-01)  
+  
+- Always catch freemarker errors    
+  
+### **0.3.19** (2021-04-01)  
+  
+- Fix previous release    
+  
+### **0.3.18** (2021-04-01)  
+  
+- Fix error.ftt, Adopt best effort strategy to convert ftl values into JS    
+  
+### **0.3.17** (2021-03-29)  
+  
+- Use push instead of replace in keycloak-js adapter to enable going back    
+  
+### **0.3.15** (2021-03-28)  
+  
+- Remove all reference to --external-assets, broken feature    
+  
+### **0.3.14** (2021-03-28)  
+  
+- Fix standalone mode: imports from js    
+  
+### **0.3.13** (2021-03-26)  
+  
+  
+  
+### **0.3.12** (2021-03-26)  
+  
+- Fix mocksContext    
+  
+### **0.3.11** (2021-03-26)  
+  
+- Fix previous build, improve README    
+  
+### **0.3.10** (2021-03-26)  
+  
+- Handle <style> tag, improve documentation    
+  
+### **0.3.9** (2021-03-25)  
+  
+- Update readme  
+- Document  --external-assets  
+- Update README.md  
+- Update README.md  
+- Update README.md    
+  
+### **0.3.8** (2021-03-22)  
+  
+- Make standalone mode the default    
+  
+### **0.3.7** (2021-03-22)  
+  
+- (test) external asset mode by default    
+  
+### **0.3.6** (2021-03-22)  
+  
+- Fix previous release    
+  
+### **0.3.5** (2021-03-22)  
+  
+- support homepage with urlPath    
+  
+### **0.3.4** (2021-03-22)  
+  
+- Bugfix: Import assets from CSS    
+  
+### **0.3.3** (2021-03-22)  
+  
+- Fix submit not receving correct text    
+  
+### **0.3.2** (2021-03-21)  
+  
+- Fix broken previous release    
+  
+### **0.3.1** (2021-03-21)  
+  
+- kcHeaderClass can be updated after initial mount    
+  
+## **0.3.0** (2021-03-20)  
+  
+- Bump version  
+- Feat: Cary over states using URL search params  
+- Bugfix: with kcHtmlClass    
+  
+### **0.2.10** (2021-03-19)  
+  
+- Remove dependency to denoify    
+  
+### **0.2.9** (2021-03-19)  
+  
+- Update deps and CI workflow    
+  
+### **0.2.8** (2021-03-19)  
+  
+- Bugfix: keycloak_build that grow and grow in size  
+- Add disclaimer about maitainment strategy  
+- Add a note for tested version support    
+  
+### **0.2.7** (2021-03-13)  
+  
+- Bump version  
+- Update README.md  
+- Update README.md    
+  
+### **0.2.6** (2021-03-10)  
+  
+- Fix generated gitignore    
+  
+### **0.2.5** (2021-03-10)  
+  
+- Fix generated .gitignore    
+  
+### **0.2.4** (2021-03-10)  
+  
+- Update README.md    
+  
+### **0.2.3** (2021-03-09)  
+  
+- fix gitignore generation    
+  
+### **0.2.2** (2021-03-08)  
+  
+- Add table of content  
+- Update README.md  
+- Update README.md    
+  
+## **0.2.1** (2021-03-08)  
+  
+- Update ci.yaml  
+- Update readme  
+- Update readme  
+- update deps  
+- Update readme  
+- Add all mocks for testing  
+- many small fixes    
+  
+### **0.1.6** (2021-03-07)  
+  
+- Fix Turkish    
+  
+### **0.1.5** (2021-03-07)  
+  
+- Fix getKcLanguageLabel    
+  
+### **0.1.4** (2021-03-07)  
+  
+  
+  
+### **0.1.3** (2021-03-07)  
+  
+- Implement LoginVerifyEmail  
+- Implement login-reset-password.ftl    
+  
 ### **0.1.2** (2021-03-07)  
   
 - Fix build  

README.md

@@ -2,98 +2,400 @@
     <img src="https://user-images.githubusercontent.com/6702424/109387840-eba11f80-7903-11eb-9050-db1dad883f78.png">  
 </p>
 <p align="center">
-    <i>🔏 Keycloak theme generator for Reacts app 🔏</i>
+    <i>🔏  Create Keycloak themes using React 🔏</i>
     <br>
     <br>
     <img src="https://github.com/garronej/keycloakify/workflows/ci/badge.svg?branch=develop">
     <img src="https://img.shields.io/bundlephobia/minzip/keycloakify">
     <img src="https://img.shields.io/npm/dw/keycloakify">
     <img src="https://img.shields.io/npm/l/keycloakify">
+    <img src="https://camo.githubusercontent.com/0f9fcc0ac1b8617ad4989364f60f78b2d6b32985ad6a508f215f14d8f897b8d3/68747470733a2f2f62616467656e2e6e65742f62616467652f547970655363726970742f7374726963742532302546302539462539322541412f626c7565">
+    <a href="https://github.com/thomasdarimont/awesome-keycloak">
+        <img src="https://awesome.re/mentioned-badge.svg"/>
+    </a>
 </p>
 
+<p align="center">
+    <i>Ultimately this build tool generates a Keycloak theme</i>
+    <img src="https://user-images.githubusercontent.com/6702424/110260457-a1c3d380-7fac-11eb-853a-80459b65626b.png">
+</p>
 
-
-**!!! This module is under active developement. It is not usable yet!!!**
-
+**NEW in v2**  
+- It's now possible to implement custom `.ftl` pages.
+- Support for Keycloak plugins that introduce non standard ftl values. 
+  (Like for example [this plugin](https://github.com/micedre/keycloak-mail-whitelisting) that define `authorizedMailDomains` in `register.ftl`).
 # Motivations
 
-The problem: 
+Keycloak provides [theme support](https://www.keycloak.org/docs/latest/server_development/#_themes) for web pages. This allows customizing the look and feel of end-user facing pages so they can be integrated with your applications.
+It involves, however, a lot of raw JS/CSS/[FTL]() hacking, and bundling the theme is not exactly straightforward.
 
-![keycloak_before](https://user-images.githubusercontent.com/6702424/108838381-dbbbcf80-75d3-11eb-8ae8-db41563ef9db.gif)
+Beyond that, if you use Keycloak for a specific app you want your login page to be tightly integrated with it.
+Ideally, you don't want the user to notice when he is being redirected away. 
 
-When we redirected to Keycloak the user suffers from a harsh context switch.
-On je login/register pages the language is set back to default and the theme is different that the one on the app.  
+Trying to reproduce the look and feel of a specific app in another stack is not an easy task not to mention
+the cheer amount of maintenance that it involves.
 
-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.  
+<p align="center">
+    <i>Without keycloakify, users suffers from a harsh context switch, no fronted form pre-validation</i><br>
+    <img src="https://user-images.githubusercontent.com/6702424/108838381-dbbbcf80-75d3-11eb-8ae8-db41563ef9db.gif">
+</p>
 
-Wouldn't it be great if we could just design the login and register pages as if they where part of our app while
-still letting Keycloak handle the heavy lifting of actually authenticating the users? 
+Wouldn't it be great if we could just design the login and register pages as if they were part of our app?  
+Here is `keycloakify` for you 🍸
 
-Here is `yarn add keycloakify` for you 🍸
+<p align="center">
+    <i> <a href="https://datalab.sspcloud.fr">With keycloakify:</a> </i> 
+    <br>
+    <img src="https://user-images.githubusercontent.com/6702424/114332075-c5e37900-9b45-11eb-910b-48a05b3d90d9.gif">
+</p>  
 
-TODO: Insert video after.
+**TL;DR**: [Here](https://github.com/garronej/keycloakify-demo-app) is a Hello World React project with Keycloakify set up.  
 
+If you already have a Keycloak custom theme, it can be easily ported to Keycloakify.
+
+---
+
+
+- [Motivations](#motivations)
+- [Requirements](#requirements)
+  - [My framework doesn’t seem to be supported, what can I do?](#my-framework-doesnt-seem-to-be-supported-what-can-i-do)
+- [How to use](#how-to-use)
+  - [Setting up the build tool](#setting-up-the-build-tool)
+    - [Changing just the look of the default Keycloak theme](#changing-just-the-look-of-the-default-keycloak-theme)
+    - [Advanced pages configuration](#advanced-pages-configuration)
+    - [Hot reload](#hot-reload)
+  - [Enable loading in a blink of an eye of login pages ⚡ (--external-assets)](#enable-loading-in-a-blink-of-an-eye-of-login-pages----external-assets)
+- [Support for Terms and conditions](#support-for-terms-and-conditions)
+- [Some pages still have the default theme. Why?](#some-pages-still-have-the-default-theme-why)
+- [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)
+    - [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)
+- [Email domain whitelist](#email-domain-whitelist)
+
+# Requirements 
+
+Tested with the following Keycloak versions: 
+- [11.0.3](https://hub.docker.com/layers/jboss/keycloak/11.0.3/images/sha256-4438f1e51c1369371cb807dffa526e1208086b3ebb9cab009830a178de949782?context=explore)  
+- [12.0.4](https://hub.docker.com/layers/jboss/keycloak/12.0.4/images/sha256-67e0c88e69bd0c7aef972c40bdeb558a974013a28b3668ca790ed63a04d70584?context=explore)  
+- Tests ongoing with [14.0.0](https://hub.docker.com/layers/jboss/keycloak/14.0.0/images/sha256-ca713e87ad163da71ab329010de2464a41ff030a25ae0aef15c1c290252f3d7f?context=explore) 
+
+This tool will be maintained to stay compatible with Keycloak v11 and up, however, the default pages you will get 
+(before you customize it) will always be the ones of Keycloak v11.
+
+This tool assumes you are bundling your app with Webpack (tested with 4.44.2) .
+It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
+and a `build/static/` directory generated by webpack. 
+For more information see [this issue](https://github.com/InseeFrLab/keycloakify/issues/5#issuecomment-832296432)
+## My framework doesn’t seem to be supported, what can I do?  
+
+Currently Keycloakify is only compatible with `create-react-app` apps.
+It doesn’t mean that you can't use Keycloakify if you are using Next.js, Express or any other 
+framework that involves SSR but your Keycloak theme will need to be a standalone project.  
+Find specific instructions about how to get started [**here**](https://github.com/garronej/keycloakify-demo-app#keycloak-theme-only).  
+
+To share your styles between your main app and your login pages you will need to externalize your design system by making it a
+separate module. Checkout [ts_ci](https://github.com/garronej/ts_ci), it can help with that.
 # How to use
-
 ## Setting up the build tool
 
-Add `keycloakify` to the dev dependencies of your project `npm install --save-dev keycloakify` or `yarn add --dev keycloakify`
-then configure your `package.json` build's script to build the keycloak's theme by adding `&& build-keycloak-theme`.
-
-Typically you will get: 
-
-`package.json`:
-```json
-  "devDependencies": {
-    "keycloakify": "^0.0.10"
-  },
-  "scripts": {
-    "build": "react-scripts build && build-keycloak-theme"
-  },
+```bash
+yarn add keycloakify
 ```
 
-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.
+[`package.json`](https://github.com/garronej/keycloakify-demo-app/blob/main/package.json)
+```json
+"scripts": {
+    "keycloak": "yarn build && build-keycloak-theme",
+}
+```
 
+```bash
+yarn keycloak # generates keycloak-theme.jar
+```
+
+On the console will be printed all the instructions about how to load the generated theme in Keycloak
+
+### Changing just the look of the default Keycloak theme
+
+The first approach is to only customize the style of the default Keycloak login by providing
+your own class names.
+
+If you have created a new React project specifically to create a Keycloak theme and nothing else then
+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";
+
+const { kcContext } = getKcContext();
+
+const myClassName = css({ "color": "red" });
+
+reactDom.render(
+        <KcApp 
+            kcContext={kcContext} 
+            {...{
+                ...defaultKcProps,
+                "kcHeaderWrapperClass": myClassName
+            }} 
+        />
+    document.getElementById("root")
+);
+```
+
+If you share a unique project for your app and the Keycloak theme, your index should look
+more like this: 
+
+`src/index.tsx`
+```tsx
+import { App } from "./<wherever>/App";
+import { 
+  KcApp, 
+  defaultKcProps, 
+  getKcContext
+} from "keycloakify";
+import { css } from "tss-react";
+
+const { kcContext } = getKcContext();
+
+const myClassName = css({ "color": "red" });
+
+reactDom.render(
+    // Unless the app is currently being served by Keycloak 
+    // kcContext is undefined.
+    kcContext !== undefined ? 
+        <KcApp 
+            kcContext={kcContext} 
+            {...{
+                ...defaultKcProps,
+                "kcHeaderWrapperClass": myClassName
+            }} 
+        /> :
+        <App />, // Your actual app
+    document.getElementById("root")
+);
+```
+
+
+<p align="center">
+    <i>result:</i></br>
+    <img src="https://user-images.githubusercontent.com/6702424/114326299-6892fc00-9b34-11eb-8d75-85696e55458f.png">
+</p>
+
+Example of a customization using only CSS: [here](https://github.com/InseeFrLab/onyxia-ui/blob/012639d62327a9a56be80c46e32c32c9497b82db/src/app/components/KcApp.tsx) 
+(the [index.tsx](https://github.com/InseeFrLab/onyxia-ui/blob/012639d62327a9a56be80c46e32c32c9497b82db/src/app/index.tsx#L89-L94) )
+and the result you can expect: 
+
+<p align="center">
+    <i> <a href="https://datalab.sspcloud.fr">Customization using only CSS:</a> </i> 
+    <br>
+    <img src="https://github.com/InseeFrLab/keycloakify/releases/download/v0.3.8/keycloakify_after.gif">
+</p>
+
+### Advanced pages configuration
+
+If you want to go beyond only customizing the CSS you can re-implement some of the 
+pages or event add new ones. 
+
+If you want to go this way checkout the demo setup provided [here](https://github.com/garronej/keycloakify-demo-app/tree/look_and_feel)
+
+Main takeaways are:
+- You must declare your custom pages in the package.json. [example](https://github.com/garronej/keycloakify-demo-app/blob/4eb2a9f63e9823e653b2d439495bda55e5ecc134/package.json#L17-L22)
+- (TS only) You must declare theses page in the type argument of the getter 
+  function for the `kcContext` in order to have the correct typings. [example](https://github.com/garronej/keycloakify-demo-app/blob/4eb2a9f63e9823e653b2d439495bda55e5ecc134/src/KcApp/kcContext.ts#L16-L21)
+- (TS only) If you use Keycloak plugins that defines non standard `.ftl` values
+  (Like for example [this plugin](https://github.com/micedre/keycloak-mail-whitelisting) 
+  that define `authorizedMailDomains` in `register.ftl`) you should 
+  declare theses value to get the type. [example](https://github.com/garronej/keycloakify-demo-app/blob/4eb2a9f63e9823e653b2d439495bda55e5ecc134/src/KcApp/kcContext.ts#L6-L13)
+- You should provide sample data for all the non standard value if you want to be able
+  to debug the page outside of keycloak. [example](https://github.com/garronej/keycloakify-demo-app/blob/4eb2a9f63e9823e653b2d439495bda55e5ecc134/src/KcApp/kcContext.ts#L28-L43)
+
+WARNING: If you chose to go this way use:
+```json
+"dependencies": {
+    "keycloakify": "~X.Y.Z"
+}
+```
+in your `package.json` instead of `^X.Y.Z`. A minor update of Keycloakify might break your app.
+
+### Hot reload
+
+Rebuild the theme each time you make a change to see the result is not practical.
+If you want to test your login screens outside of Keycloak you can mock a given `kcContext`: 
+
+```tsx
+import {
+    KcApp,
+    defaultKcProps,
+    getKcContext
+} from "keycloakify";
+
+const { kcContext } = getKcContext({
+    "mockPageId": "login.ftl"
+});
+
+reactDom.render(
+        <KcApp 
+            kcContext={kcContextMocks.kcLoginContext}
+            {...defaultKcProps} 
+        />
+    document.getElementById("root")
+);
+```
+
+Then `yarn start`, you will see your login page.
+
+Checkout [this concrete example](https://github.com/garronej/keycloakify-demo-app/blob/main/src/index.tsx)
+
+## Enable loading in a blink of an eye of login pages ⚡ (--external-assets)
+
+By default the theme generated is standalone. Meaning that when your users
+reach the login pages all scripts, images and stylesheet are downloaded from the Keycloak server.  
+If you are specifically building a theme to integrate with an app or a website that allows users
+to first browse unauthenticated before logging in, you will get a significant 
+performance boost if you jump through those hoops:
+
+- Provide the url of your app in the `homepage` field of package.json. [ex](https://github.com/garronej/keycloakify-demo-app/blob/7847cc70ef374ab26a6cc7953461cf25603e9a6d/package.json#L2)
+- Build the theme using `npx build-keycloak-theme --external-assets` [ex](https://github.com/garronej/keycloakify-demo-app/blob/7847cc70ef374ab26a6cc7953461cf25603e9a6d/.github/workflows/ci.yaml#L21)
+- Enable [long-term assets caching](https://create-react-app.dev/docs/production-build/#static-file-caching) on the server hosting your app.
+- Make sure not to build your app and the keycloak theme separately
+  and remember to update the Keycloak theme every time you update your app.
+- Be mindful that if your app is down your login pages are down as well.
+
+Checkout a complete setup [here](https://github.com/garronej/keycloakify-demo-app#about-keycloakify)
+
+# Support for Terms and conditions
+
+[Many organizations have a requirement that when a new user logs in for the first time, they need to agree to the terms and conditions of the website.](https://www.keycloak.org/docs/4.8/server_admin/#terms-and-conditions).
+
+First you need to enable the required action on the Keycloak server admin console:  
+![image](https://user-images.githubusercontent.com/6702424/114280501-dad2e600-9a39-11eb-9c39-a225572dd38a.png)
+
+Then to load your own therms of services using [like this](https://github.com/garronej/keycloakify-demo-app/blob/8168c928a66605f2464f9bd28a4dc85fb0a231f9/src/index.tsx#L42-L66).
+
+# Some pages still have the default theme. Why?
+
+This project only support out of the box the most common user facing pages of Keycloak login.  
+[Here](https://user-images.githubusercontent.com/6702424/116787906-227fe700-aaa7-11eb-92ee-22e7673717c2.png) is the complete list of pages (you get them after running `yarn test`)
+and [here](https://github.com/InseeFrLab/keycloakify/tree/main/src/lib/components) are the pages currently implemented by this module.  
+If you need to customize pages that are not supported yet or if you need to implement some non standard `.ftl` pages please refer to [Advanced pages configuration](#advanced-pages-configuration).
+
+# GitHub Actions
+
+![image](https://user-images.githubusercontent.com/6702424/114286938-47aea600-9a63-11eb-936e-17159e8826e8.png)
+
+[Here is a demo repo](https://github.com/garronej/keycloakify-demo-app) to show how to automate
+the building and publishing of the theme (the .jar file).
+
+
+**All this is defaults with [`create-react-app`](https://create-react-app.dev)** (tested with 4.0.3)
+
+- For building the theme: `mvn` (Maven) must be installed (but you can build the theme in the CI)
+- For testing the theme in a local Keycloak container (which is not mandatory for development): 
+  `rm`, `mkdir`, `wget`, `unzip` are assumed to be available and `docker` up and running.
+# Limitations
+## `process.env.PUBLIC_URL` not supported.
+
+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
+
+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.
+
+### Example of setup that **won't** work 
+
+- We have a `fonts/` directory in `src/`
+- We import the font like this [`src: url("/fonts/my-font.woff2") format("woff2");`](https://github.com/garronej/keycloakify-demo-app/blob/07d54a3012ef354ee12b1374c6f7ad1cb125d56b/src/fonts.scss#L4) in a `.scss` a file.  
+
+### Possible workarounds  
+
+- Use [`--external-assets`](#enable-loading-in-a-blink-of-a-eye-of-login-pages-).
+- If it is possible, use Google Fonts or any other font provider.
+- If you want to host your font recommended approach is to move your fonts into the `public` 
+directory and to place your `@font-face` statements in the `public/index.html`.  
+Example [here](https://github.com/InseeFrLab/onyxia-ui/blob/0e3a04610cfe872ca71dad59e05ced8f785dee4b/public/index.html#L6-L51).  
+- You can also [use non relative url](https://github.com/garronej/keycloakify-demo-app/blob/2de8a9eb6f5de9c94f9cd3991faad0377e63268c/src/fonts.scss#L16) but don't forget [`Access-Control-Allow-Origin`](https://github.com/garronej/keycloakify-demo-app/blob/2de8a9eb6f5de9c94f9cd3991faad0377e63268c/nginx.conf#L17-L19).
+
+# Implement context persistence (optional)
+
+If, before logging in, a user has selected a specific language 
+you don't want it to be reset to default when the user gets redirected to
+the login or register pages.  
+  
+Same goes for the dark mode, you don't want, if the user had it enabled
+to show the login page with light themes.  
+  
+The problem is that you are probably using `localStorage` to persist theses values across
+reload but, as the Keycloak pages are not served on the same domain that the rest of your
+app you won't be able to carry over states using `localStorage`.  
+
+The only reliable solution is to inject parameters into the URL before
+redirecting to Keycloak. We integrate with 
+[`keycloak-js`](https://github.com/keycloak/keycloak-documentation/blob/master/securing_apps/topics/oidc/javascript-adapter.adoc), 
+by providing you a way to tell `keycloak-js` that you would like to inject
+some search parameters before redirecting.  
+
+The method also works with [`@react-keycloak/web`](https://www.npmjs.com/package/@react-keycloak/web) (use the `initOptions`).
+
+You can implement your own mechanism to pass the states in the URL and
+restore it on the other side but we recommend using `powerhooks/useGlobalState`
+from the library [`powerhooks`](https://www.powerhooks.dev) that provide an elegant
+way to handle states such as `isDarkModeEnabled` or `selectedLanguage`.
+
+Let's modify [the example](https://github.com/keycloak/keycloak-documentation/blob/master/securing_apps/topics/oidc/javascript-adapter.adoc) from the official `keycloak-js` documentation to
+enables the states of `useGlobalStates` to be injected in the URL before redirecting.  
+Note that the states are automatically restored on the other side by `powerhooks`
+
+```typescript
+import keycloak_js from "keycloak-js";
+import { injectGlobalStatesInSearchParams } from "powerhooks/useGlobalState";
+import { createKeycloakAdapter } from "keycloakify";
+
+//...
+
+const keycloakInstance = keycloak_js({
+    "url": "http://keycloak-server/auth",
+    "realm": "myrealm",
+    "clientId": "myapp"
+});
+
+keycloakInstance.init({
+    "onLoad": 'check-sso',
+    "silentCheckSsoRedirectUri": window.location.origin + "/silent-check-sso.html",
+    "adapter": createKeycloakAdapter({
+        "transformUrlBeforeRedirect": injectGlobalStatesInSearchParams,
+        keycloakInstance
+    })
+});
+
+//...
+```
+
+If you really want to go the extra miles and avoid having the white
+flash of the blank html before the js bundle have been evaluated
+[here is a snippet](https://github.com/InseeFrLab/onyxia-ui/blob/a77eb502870cfe6878edd0d956c646d28746d053/public/index.html#L5-L54) that you can place in your `public/index.html` if you are using `powerhooks/useGlobalState`.
+
+# Kickstart video
+
+*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)
 
-## Developing your login and register pages in your React app
+# Email domain whitelist
 
-TODO
-
-# How to implement context persistance
-
-If you want dark mode preference, language and others users preferences your can do so
-very easily by using [`powerhooks/useGlobalState`](https://github.com/garronej/powerhooks)
-
-WARNING: `powerhooks` is still a work in progress.
-
-# REQUIREMENTS
-
-This tools assumes you are bundling your app with Webpack (tested with 4.44.2) .
-It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
-and a `static/` directory generated by webpack.
-
-**All this is defaults with [`create-react-app`](https://create-react-app.dev)** (tested with 4.0.3=)
-
-- For building the theme: `mvn` (Maven) must be installed
-- For development, (testing the theme in a local container ): `rm`, `mkdir`, `wget`, `unzip` are assumed to be available
-  and `docker` up and running.
-
-NOTE: This build tool has only be tested on MacOS.
-
-# API Reference 
-
-## The build tool 
-
-Part of the lib that runs with node, at build time.
-
-- `npx build-keycloak-theme`: Builds the theme, the CWD is assumed to be the root of your react project.
-- `npx download-sample-keycloak-themes`: Downloads the keycloak default themes (for development purposes)
-
-## The fronted lib ( imported into your react app )
-
-Part of the lib that you import in your react project and runs on the browser.
-
-**TODO**
+If you want to restrict the emails domain that can register, you can use [this plugin](https://github.com/micedre/keycloak-mail-whitelisting) 
+and `kcRegisterContext["authorizedMailDomains"]` to validate on.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "0.1.2",
+    "version": "2.0.2",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -12,11 +12,9 @@
         "clean": "rimraf dist/",
         "build": "yarn clean && tsc && yarn grant-exec-perms && yarn copy-files",
         "grant-exec-perms": "node dist/bin/tools/grant-exec-perms.js",
-        "test": "node dist/test",
-        "enable_short_import_path": "yarn build && denoify_enable_short_npm_import_path",
+        "test": "node dist/test/bin && node dist/test/lib",
         "copy-files": "copyfiles -u 1 src/**/*.ftl src/**/*.xml src/**/*.js dist/",
-        "generate-messages": "node dist/bin/generate-i18n-messages.js",
-        "watch": "tsc -w"
+        "generate-messages": "node dist/bin/generate-i18n-messages.js"
     },
     "bin": {
         "build-keycloak-theme": "dist/bin/build-keycloak-theme/index.js",
@@ -45,18 +43,21 @@
         "@types/node": "^10.0.0",
         "@types/react": "^17.0.0",
         "copyfiles": "^2.4.1",
-        "denoify": "^0.6.5",
         "properties-parser": "^0.3.1",
         "react": "^17.0.1",
         "rimraf": "^3.0.2",
-        "typescript": "^4.1.5"
+        "typescript": "^4.2.3",
+        "ts-toolbelt": "^9.6.0"
     },
     "dependencies": {
         "cheerio": "^1.0.0-rc.5",
-        "evt": "2.0.0-beta.15",
+        "evt": "2.0.0-beta.20",
         "minimal-polyfills": "^2.1.6",
-        "powerhooks": "^0.0.19",
+        "path": "^0.12.7",
+        "powerhooks": "^0.1.6",
+        "react-markdown": "^5.0.3",
         "scripting-tools": "^0.19.13",
-        "tss-react": "^0.0.11"
+        "tss-react": "^0.0.12",
+        "tsafe": "^0.4.1"
     }
 }

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

@@ -0,0 +1,114 @@
+import { generateKeycloakThemeResources } from "./generateKeycloakThemeResources";
+import { generateJavaStackFiles } from "./generateJavaStackFiles";
+import type { ParsedPackageJson } from "./generateJavaStackFiles";
+import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
+import * as child_process from "child_process";
+import { generateDebugFiles, containerLaunchScriptBasename } from "./generateDebugFiles";
+import { URL } from "url";
+
+const reactProjectDirPath = process.cwd();
+
+const doUseExternalAssets = process.argv[2]?.toLowerCase() === "--external-assets";
+
+const parsedPackageJson: ParsedPackageJson = require(pathJoin(reactProjectDirPath, "package.json"));
+
+export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
+
+export function main() {
+
+    console.log("🔏 Building the keycloak theme...⌚");
+
+    const extraPagesId: string[] = (parsedPackageJson as any)["keycloakify"]?.["extraPages"] ?? [];
+
+    generateKeycloakThemeResources({
+        keycloakThemeBuildingDirPath,
+        "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
+        "themeName": parsedPackageJson.name,
+        ...(() => {
+
+            const url = (() => {
+
+                const { homepage } = parsedPackageJson;
+
+                return homepage === undefined ?
+                    undefined :
+                    new URL(homepage);
+
+            })();
+
+            return {
+                "urlPathname":
+                    url === undefined ?
+                        "/" :
+                        url.pathname.replace(/([^/])$/, "$1/"),
+                "urlOrigin": !doUseExternalAssets ? undefined : (() => {
+
+                    if (url === undefined) {
+                        console.error("ERROR: You must specify 'homepage' in your package.json");
+                        process.exit(-1);
+                    }
+
+                    return url.origin;
+
+                })()
+
+            };
+
+        })(),
+        extraPagesId
+    });
+
+    const { jarFilePath } = generateJavaStackFiles({
+        parsedPackageJson,
+        keycloakThemeBuildingDirPath
+    });
+
+    child_process.execSync(
+        "mvn package",
+        { "cwd": keycloakThemeBuildingDirPath }
+    );
+
+    generateDebugFiles({
+        keycloakThemeBuildingDirPath,
+        "packageJsonName": parsedPackageJson.name
+    });
+
+    console.log([
+        '',
+        `✅ Your keycloak theme has been generated and bundled into ./${pathRelative(reactProjectDirPath, jarFilePath)} 🚀`,
+        `It is to be placed in "/opt/jboss/keycloak/standalone/deployments" in the container running a jboss/keycloak Docker image. (Tested with 11.0.3)`,
+        '',
+        'Using Helm (https://github.com/codecentric/helm-charts), edit to reflect:',
+        '',
+        'value.yaml: ',
+        '    extraInitContainers: |',
+        '        - name: realm-ext-provider',
+        '          image: curlimages/curl',
+        '          imagePullPolicy: IfNotPresent',
+        '          command:',
+        '            - sh',
+        '          args:',
+        '            - -c',
+        `            - curl -L -f -S -o /extensions/${pathBasename(jarFilePath)} https://AN.URL.FOR/${pathBasename(jarFilePath)}`,
+        '          volumeMounts:',
+        '            - name: extensions',
+        '              mountPath: /extensions',
+        '        ',
+        '        extraVolumeMounts: |',
+        '            - name: extensions',
+        '              mountPath: /opt/jboss/keycloak/standalone/deployments',
+        '',
+        '',
+        'To test your theme locally, with hot reloading, you can spin up a Keycloak container image with the theme loaded by running:',
+        '',
+        `👉 $ ./${pathRelative(reactProjectDirPath, pathJoin(keycloakThemeBuildingDirPath, containerLaunchScriptBasename))} 👈`,
+        '',
+        'To enable the theme within keycloak log into the admin console ( 👉 http://localhost:8080 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`,
+        '',
+        'Once your container is up and configured 👉 http://localhost:8080/auth/realms/myrealm/account 👈',
+        '',
+    ].join("\n"));
+
+}

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

@@ -0,0 +1,74 @@
+
+import * as fs from "fs";
+import { join as pathJoin, dirname as pathDirname, basename as pathBasename } from "path";
+
+export const containerLaunchScriptBasename = "start_keycloak_testing_container.sh";
+
+/** Files for being able to run a hot reload keycloak container */
+export function generateDebugFiles(
+    params: {
+        packageJsonName: string;
+        keycloakThemeBuildingDirPath: string;
+    }
+) {
+
+    const { packageJsonName, keycloakThemeBuildingDirPath } = params;
+
+    fs.writeFileSync(
+        pathJoin(keycloakThemeBuildingDirPath, "Dockerfile"),
+        Buffer.from(
+            [
+                "FROM jboss/keycloak:11.0.3",
+                "",
+                "USER root",
+                "",
+                "WORKDIR /",
+                "",
+                "ADD configuration /opt/jboss/keycloak/standalone/configuration/",
+                "",
+                'ENTRYPOINT [ "/opt/jboss/tools/docker-entrypoint.sh" ]',
+            ].join("\n"),
+            "utf8"
+        )
+    );
+
+    const dockerImage = `${packageJsonName}/keycloak-hot-reload`;
+    const containerName = "keycloak-testing-container";
+
+    fs.writeFileSync(
+        pathJoin(keycloakThemeBuildingDirPath, containerLaunchScriptBasename),
+        Buffer.from(
+            [
+                "#!/bin/bash",
+                "",
+                `cd ${keycloakThemeBuildingDirPath}`,
+                "",
+                `docker rm ${containerName} || true`,
+                "",
+                `docker build . -t ${dockerImage}`,
+                "",
+                "docker run \\",
+                "	-p 8080:8080 \\",
+                `	--name ${containerName} \\`,
+                "	-e KEYCLOAK_USER=admin \\",
+                "	-e KEYCLOAK_PASSWORD=admin \\",
+                `	-v ${pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", packageJsonName)
+                }:/opt/jboss/keycloak/themes/${packageJsonName}:rw \\`,
+                `	-it ${dockerImage}:latest`,
+                ""
+            ].join("\n"),
+            "utf8"
+        ),
+        { "mode": 0o755 }
+    );
+
+    const standaloneHaFilePath = pathJoin(keycloakThemeBuildingDirPath, "configuration", "standalone-ha.xml");
+
+    try { fs.mkdirSync(pathDirname(standaloneHaFilePath)); } catch { }
+
+    fs.writeFileSync(
+        standaloneHaFilePath,
+        fs.readFileSync(pathJoin(__dirname, pathBasename(standaloneHaFilePath)))
+    );
+
+}

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

@@ -1,74 +1 @@
-
-import * as fs from "fs";
-import { join as pathJoin, dirname as pathDirname, basename as pathBasename } from "path";
-
-export const containerLaunchScriptBasename = "start_keycloak_testing_container.sh";
-
-/** Files for being able to run a hot reload keycloak container */
-export function generateDebugFiles(
-    params: {
-        packageJsonName: string;
-        keycloakThemeBuildingDirPath: string;
-    }
-) {
-
-    const { packageJsonName, keycloakThemeBuildingDirPath } = params;
-
-    fs.writeFileSync(
-        pathJoin(keycloakThemeBuildingDirPath, "Dockerfile"),
-        Buffer.from(
-            [
-                "FROM jboss/keycloak:11.0.3",
-                "",
-                "USER root",
-                "",
-                "WORKDIR /",
-                "",
-                "ADD configuration /opt/jboss/keycloak/standalone/configuration/",
-                "",
-                'ENTRYPOINT [ "/opt/jboss/tools/docker-entrypoint.sh" ]',
-            ].join("\n"),
-            "utf8"
-        )
-    );
-
-    const dockerImage = `${packageJsonName}/keycloak-hot-reload`;
-    const containerName = "keycloak-testing-container";
-
-    fs.writeFileSync(
-        pathJoin(keycloakThemeBuildingDirPath, containerLaunchScriptBasename),
-        Buffer.from(
-            [
-                "#!/bin/bash",
-                "",
-                `cd ${keycloakThemeBuildingDirPath}`,
-                "",
-                `docker rm ${containerName} || true`,
-                "",
-                `docker build . -t ${dockerImage}`,
-                "",
-                "docker run \\",
-                "	-p 8080:8080 \\",
-                `	--name ${containerName} \\`,
-                "	-e KEYCLOAK_USER=admin \\",
-                "	-e KEYCLOAK_PASSWORD=admin \\",
-                `	-v ${pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", packageJsonName)
-                }:/opt/jboss/keycloak/themes/${packageJsonName}:rw \\`,
-                `	-it ${dockerImage}:latest`,
-                ""
-            ].join("\n"),
-            "utf8"
-        ),
-        { "mode": 0o755 }
-    );
-
-    const standaloneHaFilePath = pathJoin(keycloakThemeBuildingDirPath, "configuration", "standalone-ha.xml");
-
-    try { fs.mkdirSync(pathDirname(standaloneHaFilePath)); } catch { }
-
-    fs.writeFileSync(
-        standaloneHaFilePath,
-        fs.readFileSync(pathJoin(__dirname, pathBasename(standaloneHaFilePath)))
-    );
-
-}
+export * from "./generateDebugFiles";

src/bin/build-keycloak-theme/generateFtl/String.htmlUnescape.js

@@ -1,26 +0,0 @@
-
-var es = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34);/g;
-
-var unes = {
-    '&': '&',
-    '&': '&',
-    '&lt;': '<',
-    '&#60;': '<',
-    '&gt;': '>',
-    '&#62;': '>',
-    '&apos;': "'",
-    '&#39;': "'",
-    '&quot;': '"',
-    '&#34;': '"'
-};
-var cape = function (m) { return unes[m]; };
-
-Object.defineProperty(
-    String,
-    "htmlUnescape",
-    {
-        "value": function (un) {
-            return String.prototype.replace.call(un, es, cape);
-        }
-    }
-);

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

@@ -0,0 +1,192 @@
+<script>const _= 
+<#macro objectToJson object depth>
+    <@compress>
+
+        <#local isHash = false>
+        <#attempt>
+            <#local isHash = object?is_hash || object?is_hash_ex>
+        <#recover>
+            /* can't evaluate if object is hash */
+            undefined
+            <#return>
+        </#attempt>
+        <#if isHash>
+
+            <#local keys = "">
+
+            <#attempt>
+                <#local keys = object?keys>
+            <#recover>
+                /* can't list keys of object */
+                undefined
+                <#return>
+            </#attempt>
+
+            {${'\n'}
+
+            <#list keys as key>
+
+                <#if key == "class">
+                    /* skipping "class" property of object */
+                    <#continue>
+                </#if>
+
+                <#local value = "">
+
+                <#attempt>
+                    <#local value = object[key]>
+                <#recover>
+                    /* couldn't dereference ${key} of object */
+                    <#continue>
+                </#attempt>
+
+                <#if depth gt 4>
+                    /* Avoid calling recustively too many times depth: ${depth}, key: ${key} */
+                    <#continue>
+                </#if>
+
+                "${key}": <@objectToJson object=value depth=depth+1/>,
+
+            </#list>
+
+            }${'\n'}
+
+            <#return>
+
+        </#if>
+
+
+        <#local isMethod = "">
+        <#attempt>
+            <#local isMethod = object?is_method>
+        <#recover>
+            /* can't test if object is a method */
+            undefined
+            <#return>
+        </#attempt>
+
+        <#if isMethod>
+            undefined
+            <#return>
+        </#if>
+
+
+
+        <#local isBoolean = "">
+        <#attempt>
+            <#local isBoolean = object?is_boolean>
+        <#recover>
+            /* can't test if object is a boolean */
+            undefined
+            <#return>
+        </#attempt>
+
+        <#if isBoolean>
+            ${object?c}
+            <#return>
+        </#if>
+
+
+        <#local isEnumerable = "">
+        <#attempt>
+            <#local isEnumerable = object?is_enumerable>
+        <#recover>
+            /* can't test if object is enumerable */
+            undefined
+            <#return>
+        </#attempt>
+
+        <#if isEnumerable>
+
+            [${'\n'}
+
+            <#list object as item>
+
+                <@objectToJson object=item depth=depth+1/>,
+
+            </#list>
+
+            ]${'\n'}
+
+            <#return>
+        </#if>
+
+
+        <#attempt>
+            "${object?no_esc}"
+        <#recover>
+            /* couldn't convert into string non hash, non method, non boolean, non enumerable object */
+            undefined;
+            <#return>
+        </#attempt>
+
+
+    </@compress>
+</#macro>
+
+(()=>{
+
+    //Removing all the undefined
+    const obj = JSON.parse(JSON.stringify(<@objectToJson object=.data_model depth=0 />));
+
+    //Freemarker values that can't be automatically converted into a JavaScript object.
+    Object.deepAssign(
+        obj,
+        { 
+            "messagesPerField": {
+                "printIfExists": function (key, x) {
+                    switch(key){
+                        case "userLabel": return (function (){
+                            <#attempt>
+                                return "${messagesPerField.printIfExists('userLabel','1')}" ? x : undefined;
+                            <#recover>
+                            </#attempt>
+                        })();
+                        case "username": return (function (){
+                            <#attempt>
+                                return "${messagesPerField.printIfExists('username','1')}" ? x : undefined;
+                            <#recover>
+                            </#attempt>
+                        })();
+                        case "email": return (function (){
+                            <#attempt>
+                                return "${messagesPerField.printIfExists('email','1')}" ? x : undefined;
+                            <#recover>
+                            </#attempt>
+                        })();
+                        case "firstName": return (function (){
+                            <#attempt>
+                                return "${messagesPerField.printIfExists('firstName','1')}" ? x : undefined;
+                            <#recover>
+                            </#attempt>
+                        })();
+                        case "lastName": return (function (){
+                            <#attempt>
+                                return "${messagesPerField.printIfExists('lastName','1')}" ? x : undefined;
+                            <#recover>
+                            </#attempt>
+                        })();
+                        case "password": return (function (){
+                            <#attempt>
+                                return "${messagesPerField.printIfExists('password','1')}" ? x : undefined;
+                            <#recover>
+                            </#attempt>
+                        })();
+                        case "password-confirm": return (function (){
+                            <#attempt>
+                                return "${messagesPerField.printIfExists('password-confirm','1')}" ? x : undefined;
+                            <#recover>
+                            </#attempt>
+                        })();
+                    }
+                }
+            },
+            "msg": function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); },
+        }
+    );
+
+    return obj;
+
+})()
+
+</script>

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

@@ -1,15 +0,0 @@
-<script>const _= 
-{
-    "client": (function (){
-
-            <#if client??>
-                return {
-                    "baseUrl": "${(client.baseUrl!'')?no_esc}" || undefined
-                };
-            </#if>
-
-            return undefined;
-
-    })()
-}
-</script>

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

@@ -0,0 +1,170 @@
+
+
+import cheerio from "cheerio";
+import {
+    replaceImportsFromStaticInJsCode,
+    replaceImportsInInlineCssCode,
+    generateCssCodeToDefineGlobals
+} from "../replaceImportFromStatic";
+import fs from "fs";
+import { join as pathJoin } from "path";
+import { objectKeys } from "tsafe/objectKeys";
+import { ftlValuesGlobalName } from "../ftlValuesGlobalName";
+
+export const pageIds = [
+    "login.ftl", "register.ftl", "info.ftl",
+    "error.ftl", "login-reset-password.ftl",
+    "login-verify-email.ftl", "terms.ftl",
+    "login-otp.ftl", "login-update-profile.ftl",
+    "login-idp-link-confirm.ftl"
+] as const;
+
+export type PageId = typeof pageIds[number];
+
+function loadAdjacentFile(fileBasename: string) {
+    return fs.readFileSync(pathJoin(__dirname, fileBasename))
+        .toString("utf8");
+};
+
+
+export function generateFtlFilesCodeFactory(
+    params: {
+        cssGlobalsToDefine: Record<string, string>;
+        indexHtmlCode: string;
+        urlPathname: string;
+        urlOrigin: undefined | string;
+    }
+) {
+
+    const { cssGlobalsToDefine, indexHtmlCode, urlPathname, urlOrigin } = params;
+
+    const $ = cheerio.load(indexHtmlCode);
+
+    $("script:not([src])").each((...[, element]) => {
+
+        const { fixedJsCode } = replaceImportsFromStaticInJsCode({
+            "jsCode": $(element).html()!,
+            urlOrigin
+        });
+
+        $(element).text(fixedJsCode);
+
+    });
+
+    $("style").each((...[, element]) => {
+
+        const { fixedCssCode } = replaceImportsInInlineCssCode({
+            "cssCode": $(element).html()!,
+            "urlPathname": params.urlPathname,
+            urlOrigin
+        });
+
+        $(element).text(fixedCssCode);
+
+    });
+
+    ([
+        ["link", "href"],
+        ["script", "src"],
+    ] as const).forEach(([selector, attrName]) =>
+        $(selector).each((...[, element]) => {
+
+            const href = $(element).attr(attrName);
+
+            if (href === undefined) {
+                return;
+            }
+
+            $(element).attr(
+                attrName,
+                urlOrigin !== undefined ?
+                    href.replace(/^\//, `${urlOrigin}/`) :
+                    href.replace(
+                        new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
+                        "${url.resourcesPath}/build/"
+                    )
+            );
+
+        })
+    );
+
+    //FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.
+    const ftlPlaceholders = {
+        '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }': loadAdjacentFile("common.ftl")
+            .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")
+    };
+
+    const pageSpecificCodePlaceholder = "<!-- dIddLqMeOedErIdLsPdNdI9dSl42sw -->";
+
+    $("head").prepend(
+        [
+            ...(Object.keys(cssGlobalsToDefine).length === 0 ? [] : [
+                '',
+                '<style>',
+                generateCssCodeToDefineGlobals({
+                    cssGlobalsToDefine,
+                    urlPathname
+                }).cssCodeToPrependInHead,
+                '</style>',
+                ''
+            ]),
+            "<script>",
+            loadAdjacentFile("Object.deepAssign.js"),
+            "</script>",
+            '<script>',
+            `    window.${ftlValuesGlobalName}= Object.assign(`,
+            `        {},`,
+            `        ${objectKeys(ftlPlaceholders)[0]}`,
+            '    );',
+            '</script>',
+            '',
+            pageSpecificCodePlaceholder,
+            '',
+            objectKeys(ftlPlaceholders)[1]
+        ].join("\n"),
+    );
+
+    const partiallyFixedIndexHtmlCode = $.html();
+
+    function generateFtlFilesCode(
+        params: {
+            pageId: string;
+        }
+    ): { ftlCode: string; } {
+
+        const { pageId } = params;
+
+        const $ = cheerio.load(partiallyFixedIndexHtmlCode);
+
+        let ftlCode = $.html()
+            .replace(
+                pageSpecificCodePlaceholder,
+                [
+                    '<script>',
+                    `    Object.deepAssign(`,
+                    `        window.${ftlValuesGlobalName},`,
+                    `        { "pageId": "${pageId}" }`,
+                    '    );',
+                    '</script>'
+                ].join("\n")
+            );
+
+        objectKeys(ftlPlaceholders)
+            .forEach(id => ftlCode = ftlCode.replace(id, ftlPlaceholders[id]));
+
+        return { ftlCode };
+
+    }
+
+    return { generateFtlFilesCode };
+
+
+}

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

@@ -1,156 +1 @@
-
-
-import cheerio from "cheerio";
-import {
-    replaceImportFromStaticInJsCode,
-    generateCssCodeToDefineGlobals
-} from "../replaceImportFromStatic";
-import fs from "fs";
-import { join as pathJoin } from "path";
-import { objectKeys } from "evt/tools/typeSafety/objectKeys";
-
-export const pageIds= [ "login.ftl", "register.ftl", "info.ftl", "error.ftl"] as const;
-
-export type PageId =  typeof pageIds[number];
-
-function loadAdjacentFile(fileBasename: string){
-    return fs.readFileSync(pathJoin(__dirname, fileBasename))
-        .toString("utf8");
-};
-
-function loadFtlFile(ftlFileBasename: PageId | "template.ftl") {
-    return loadAdjacentFile(ftlFileBasename)
-        .match(/^<script>const _=((?:.|\n)+)<\/script>[\n]?$/)![1];
-}
-
-export function generateFtlFilesCodeFactory(
-    params: {
-        ftlValuesGlobalName: string;
-        cssGlobalsToDefine: Record<string, string>;
-        indexHtmlCode: string;
-    }
-) {
-
-    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode } = params;
-
-    const $ = cheerio.load(indexHtmlCode);
-
-    $("script:not([src])").each((...[, element]) => {
-
-        const { fixedJsCode } = replaceImportFromStaticInJsCode({
-            ftlValuesGlobalName,
-            "jsCode": $(element).html()!
-        });
-
-        $(element).text(fixedJsCode);
-
-    });
-
-    ([
-        ["link", "href"],
-        ["script", "src"],
-    ] as const).forEach(([selector, attrName]) =>
-        $(selector).each((...[, element]) => {
-
-            const href = $(element).attr(attrName);
-
-            if (!href?.startsWith("/")) {
-                return;
-            }
-
-            $(element).attr(attrName, "${url.resourcesPath}/build" + href);
-
-        })
-    );
-
-    //FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.
-    const ftlCommonPlaceholders = {
-        '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }': loadFtlFile("template.ftl"),
-        '<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->':
-            [
-                '<#if scripts??>',
-                '    <#list scripts as script>',
-                '        <script src="${script}" type="text/javascript"></script>',
-                '    </#list>',
-                '</#if>'
-            ].join("\n")
-    };
-
-    const pageSpecificCodePlaceholder = "<!-- dIddLqMeOedErIdLsPdNdI9dSl42sw -->";
-
-    $("head").prepend(
-        [
-            ...(Object.keys(cssGlobalsToDefine).length === 0 ? [] : [
-                '',
-                '<style>',
-                generateCssCodeToDefineGlobals(
-                    { cssGlobalsToDefine }
-                ).cssCodeToPrependInHead,
-                '</style>',
-                ''
-            ]),
-            ...["Object.deepAssign.js", "String.htmlUnescape.js"].map(
-                fileBasename => [
-                    "<script>",
-                    loadAdjacentFile(fileBasename),
-                    "</script>"
-                ].join("\n")
-            ),
-            '<script>',
-            `    window.${ftlValuesGlobalName}= Object.assign(`,
-            `        {},`,
-            `        ${objectKeys(ftlCommonPlaceholders)[0]}`,
-            '    );',
-            '</script>',
-            '',
-            pageSpecificCodePlaceholder,
-            '',
-            objectKeys(ftlCommonPlaceholders)[1]
-        ].join("\n"),
-    );
-
-    const partiallyFixedIndexHtmlCode = $.html();
-
-    function generateFtlFilesCode(
-        params: {
-            pageId: PageId;
-        }
-    ): { ftlCode: string; } {
-
-        const { pageId } = params;
-
-        const $ = cheerio.load(partiallyFixedIndexHtmlCode);
-
-        const ftlPlaceholders = {
-            '{ "x": "kxOlLqMeOed9sdLdIdOxd444" }': loadFtlFile(pageId),
-            ...ftlCommonPlaceholders
-        };
-
-        let ftlCode = $.html()
-            .replace(
-                pageSpecificCodePlaceholder,
-                [
-                    '<script>',
-                    `    Object.deepAssign(`,
-                    `        window.${ftlValuesGlobalName},`,
-                    `        { "pageId": "${pageId}" }`,
-                    '    );',
-                    `    Object.deepAssign(`,
-                    `        window.${ftlValuesGlobalName},`,
-                    `        ${objectKeys(ftlPlaceholders)[0]}`,
-                    '    );',
-                    '</script>'
-                ].join("\n")
-            );
-
-        objectKeys(ftlPlaceholders)
-            .forEach(id => ftlCode = ftlCode.replace(id, ftlPlaceholders[id]));
-
-        return { ftlCode };
-
-    }
-
-    return { generateFtlFilesCode };
-
-
-}
+export * from "./generateFtl";

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

@@ -1,37 +0,0 @@
-<script>const _= 
-{
-    "messageHeader": "${messageHeader!''}" || undefined,
-    "requiredActions": (function (){
-
-        <#if requiredActions??>
-
-            var out =[];
-
-            <#list requiredActions>
-                <#items as reqActionItem>
-                    out.push("${reqActionItem}");
-                </#items></b>
-            </#list>
-
-            return out;
-
-        <#else>
-
-        return undefined;
-
-    })(),
-    "skipLink": (function (){
-
-        <#if skipLink??>
-            return true;
-        </#if>
-        return false;
-
-    })(),
-    "pageRedirectUri": "${(pageRedirectUri!'')?no_esc}" || undefined,
-    "actionUri": "${(actionUri!'')?no_esc}" || undefined,
-    "client": {
-        "baseUrl": "${(client.baseUrl!'')?no_esc}" || undefined
-    }
-}
-</script>

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

@@ -1,83 +0,0 @@
-<script>const _= 
-{
-    "url": {
-        "loginResetCredentialsUrl": "${url.loginResetCredentialsUrl?no_esc}",
-        "registrationUrl": "${url.registrationUrl?no_esc}"
-    },
-    "realm": {
-        "loginWithEmailAllowed": ${realm.loginWithEmailAllowed?c},
-        "rememberMe": ${realm.rememberMe?c},
-        "password": ${realm.password?c},
-        "resetPasswordAllowed": ${realm.resetPasswordAllowed?c},
-        "registrationAllowed": ${realm.registrationAllowed?c}
-    },
-    "auth": (function (){
-
-        <#if auth?has_content>
-
-            var out= {
-                "selectedCredential": "${auth.selectedCredential!''}" || undefined
-            };
-
-            return out;
-
-        </#if>
-
-        return undefined;
-
-    })(),
-    "social": {
-        "displayInfo": ${social.displayInfo?c},
-        "providers": (()=>{
-
-            <#if social.providers??>
-
-                var out= [];
-
-                <#list social.providers as p>
-                    out.push({ 
-                        "loginUrl": "${p.loginUrl?no_esc}",
-                        "alias": "${p.alias}",
-                        "providerId": "${p.providerId}",
-                        "displayName": "${p.displayName}"
-                    });
-                </#list>
-
-                return out;
-
-            </#if>
-
-            return undefined;
-
-        })()
-    },
-    "usernameEditDisabled": (function () {
-
-        <#if usernameEditDisabled??>
-            return true;
-        </#if>
-        return false;
-
-    })(),
-    "login": {
-        "username": "${login.username!''}" || undefined,
-        "rememberMe": (function (){
-
-            <#if login.rememberMe??>
-                return true;
-            </#if>
-            return false;
-
-
-        })()
-    },
-    "registrationDisabled": (function (){
-
-        <#if registrationDisabled??>
-            return true;
-        </#if>
-        return false;
-
-    })()
-}
-</script>

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

@@ -1,46 +0,0 @@
-<script>const _= 
-{
-    "url": {
-        "registrationAction": "${url.registrationAction?no_esc}"
-    },
-    "messagesPerField": {
-        "printIfExists": function (key, x) {
-            switch(key){
-                case "userLabel": "${messagesPerField.printIfExists('userLabel','1')}" ? x : undefined;
-                case "username": "${messagesPerField.printIfExists('username','1')}" ? x : undefined;
-                case "email": "${messagesPerField.printIfExists('email','1')}" ? x : undefined;
-                case "firstName": "${messagesPerField.printIfExists('firstName','1')}" ? x : undefined;
-                case "lastName": "${messagesPerField.printIfExists('lastName','1')}" ? x : undefined;
-                case "password": "${messagesPerField.printIfExists('password','1')}" ? x : undefined;
-                case "password-confirm": "${messagesPerField.printIfExists('password-confirm','1')}" ? x : undefined;
-            }
-        }
-    },
-    "register": {
-        "formData": {
-            "firstName": "${register.formData.firstName!''}" || undefined,
-            "displayName": "${register.formData.displayName!''}" || undefined,
-            "lastName": "${register.formData.lastName!''}" || undefined,
-            "email": "${register.formData.email!''}" || undefined,
-            "username": "${register.formData.username!''}" || undefined
-        }
-    },
-    "passwordRequired": (function (){
-
-        <#if passwordRequired??>
-            return true;
-        </#if>
-        return false;
-
-    })(),
-    "recaptchaRequired": (function (){
-
-        <#if passwordRequired??>
-            return true;
-        </#if>
-        return false;
-
-    })(),
-    "recaptchaSiteKey": "${recaptchaSiteKey!''}" || undefined
-}
-</script>

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

@@ -1,114 +0,0 @@
-<script>const _= 
-{
-    "url": {
-        "loginAction": "${url.loginAction?no_esc}",
-        "resourcesPath": "${url.resourcesPath?no_esc}",
-        "resourcesCommonPath": "${url.resourcesCommonPath?no_esc}",
-        "loginRestartFlowUrl": "${url.loginRestartFlowUrl?no_esc}",
-        "loginUrl": "${url.loginUrl?no_esc}"
-    },
-    "realm": {
-        "displayName": "${realm.displayName!''}" || undefined,
-        "displayNameHtml": "${realm.displayNameHtml!''}" || undefined,
-        "internationalizationEnabled": ${realm.internationalizationEnabled?c},
-        "registrationEmailAsUsername": ${realm.registrationEmailAsUsername?c},
-    },
-    "locale": (function (){
-
-        <#if realm.internationalizationEnabled>
-
-            return {
-                "supported": (function(){
-
-                    <#if realm.internationalizationEnabled>
-
-                        var out= [];
-
-                        <#list locale.supported as lng>
-                            out.push({ 
-                                "url": "${lng.url?no_esc}", 
-                                "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": String.htmlUnescape("${message.summary}")
-            };
-
-        </#if>
-
-        return undefined;
-
-    })(),
-    "isAppInitiatedAction": (function (){
-
-        <#if isAppInitiatedAction??>
-            return true;
-        </#if>
-        return false;
-
-    })()
-}
-</script>

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

@@ -32,7 +32,7 @@ export function generateJavaStackFiles(
 
                 return (!homepage ?
                     fallbackGroupId :
-                    url.parse(homepage).host?.split(".").reverse().join(".") ?? fallbackGroupId
+                    url.parse(homepage).host?.replace(/:[0-9]+$/,"")?.split(".").reverse().join(".") ?? fallbackGroupId
                 ) + ".keycloak";
 
             })();

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

@@ -3,37 +3,60 @@ import { transformCodebase } from "../tools/transformCodebase";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
 import {
-    replaceImportFromStaticInCssCode,
-    replaceImportFromStaticInJsCode
+    replaceImportsInCssCode,
+    replaceImportsFromStaticInJsCode
 } from "./replaceImportFromStatic";
 import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
-import { builtinThemesUrl } from "../install-builtin-keycloak-themes";
-import { downloadAndUnzip } from "../tools/downloadAndUnzip";
+import { builtinThemesUrl } from "../install-builtin-keycloak-themes";
+import { downloadAndUnzip } from "../tools/downloadAndUnzip";
 import * as child_process from "child_process";
-import { ftlValuesGlobalName } from "./ftlValuesGlobalName";
+import { resourcesCommonPath, resourcesPath, subDirOfPublicDirBasename } from "../../lib/getKcContext/kcContextMocks/urlResourcesPath";
+import { isInside } from "../tools/isInside";
+
 
 export function generateKeycloakThemeResources(
     params: {
         themeName: string;
         reactAppBuildDirPath: string;
         keycloakThemeBuildingDirPath: string;
+        urlPathname: string;
+        //If urlOrigin is not undefined then it means --externals-assets
+        urlOrigin: undefined | string;
+        extraPagesId: string[];
     }
 ) {
 
-    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath } = params;
+    const { 
+        themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, 
+        urlPathname, urlOrigin, extraPagesId
+    } = params;
 
     const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", themeName, "login");
 
     let allCssGlobalsToDefine: Record<string, string> = {};
 
     transformCodebase({
-        "destDirPath": pathJoin(themeDirPath, "resources", "build"),
+        "destDirPath":
+            urlOrigin === undefined ?
+                pathJoin(themeDirPath, "resources", "build") :
+                reactAppBuildDirPath,
         "srcDirPath": reactAppBuildDirPath,
         "transformSourceCode": ({ filePath, sourceCode }) => {
 
-            if (/\.css?$/i.test(filePath)) {
+            //NOTE: Prevent cycles, excludes the folder we generated for debug in public/
+            if (
+                urlOrigin === undefined &&
+                isInside({
+                    "dirPath": pathJoin(reactAppBuildDirPath, subDirOfPublicDirBasename),
+                    filePath
+                })
+            ) {
+                return undefined;
+            }
 
-                const { cssGlobalsToDefine, fixedCssCode } = replaceImportFromStaticInCssCode(
+            if (urlOrigin === undefined && /\.css?$/i.test(filePath)) {
+
+                const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode(
                     { "cssCode": sourceCode.toString("utf8") }
                 );
 
@@ -48,32 +71,37 @@ export function generateKeycloakThemeResources(
 
             if (/\.js?$/i.test(filePath)) {
 
-                const { fixedJsCode } = replaceImportFromStaticInJsCode({
+                const { fixedJsCode } = replaceImportsFromStaticInJsCode({
                     "jsCode": sourceCode.toString("utf8"),
-                    ftlValuesGlobalName
+                    urlOrigin
                 });
 
                 return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
 
             }
 
-            return { "modifiedSourceCode": sourceCode };
+            return urlOrigin === undefined ? 
+                { "modifiedSourceCode": sourceCode } :
+                undefined;
 
         }
     });
 
     const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
         "cssGlobalsToDefine": allCssGlobalsToDefine,
-        ftlValuesGlobalName,
         "indexHtmlCode": fs.readFileSync(
             pathJoin(reactAppBuildDirPath, "index.html")
-        ).toString("utf8")
+        ).toString("utf8"),
+        urlPathname,
+        urlOrigin
     });
 
-    pageIds.forEach(pageId => {
+    [...pageIds, ...extraPagesId].forEach(pageId => {
 
         const { ftlCode } = generateFtlFilesCode({ pageId });
 
+        fs.mkdirSync(themeDirPath, { "recursive": true });
+
         fs.writeFileSync(
             pathJoin(themeDirPath, pageId),
             Buffer.from(ftlCode, "utf8")
@@ -90,11 +118,48 @@ export function generateKeycloakThemeResources(
             "destDirPath": tmpDirPath
         });
 
+        const themeResourcesDirPath = pathJoin(themeDirPath, "resources");
+
         transformCodebase({
             "srcDirPath": pathJoin(tmpDirPath, "keycloak", "login", "resources"),
-            "destDirPath": pathJoin(themeDirPath, "resources")
+            "destDirPath": themeResourcesDirPath
         });
 
+        const reactAppPublicDirPath = pathJoin(reactAppBuildDirPath, "..", "public");
+
+        transformCodebase({
+            "srcDirPath": themeResourcesDirPath,
+            "destDirPath": pathJoin(
+                reactAppPublicDirPath,
+                resourcesPath
+            )
+        });
+
+        transformCodebase({
+            "srcDirPath": pathJoin(tmpDirPath, "keycloak", "common", "resources"),
+            "destDirPath": pathJoin(
+                reactAppPublicDirPath,
+                resourcesCommonPath
+            )
+        });
+
+        const keycloakResourcesWithinPublicDirPath =
+            pathJoin(reactAppPublicDirPath, subDirOfPublicDirBasename);
+
+
+        fs.writeFileSync(
+            pathJoin(keycloakResourcesWithinPublicDirPath, "README.txt"),
+            Buffer.from([
+                "This is just a test folder that helps develop",
+                "the login and register page without having to yarn build"
+            ].join(" "))
+        );
+
+        fs.writeFileSync(
+            pathJoin(keycloakResourcesWithinPublicDirPath, ".gitignore"),
+            Buffer.from("*", "utf8")
+        );
+
         child_process.execSync(`rm -r ${tmpDirPath}`);
 
     }

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

@@ -1,81 +1,10 @@
 #!/usr/bin/env node
 
-import { generateKeycloakThemeResources } from "./generateKeycloakThemeResources";
-import { generateJavaStackFiles } from "./generateJavaStackFiles";
-import type { ParsedPackageJson } from "./generateJavaStackFiles";
-import { join as pathJoin, relative as pathRelative, basename as pathBasename } from "path";
-import * as child_process from "child_process";
-import { generateDebugFiles, containerLaunchScriptBasename } from "./generateDebugFiles";
-
-
-const reactProjectDirPath = process.cwd();
-
-const parsedPackageJson: ParsedPackageJson = require(pathJoin(reactProjectDirPath, "package.json"));
-
-export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
-
+export * from "./build-keycloak-theme";
+import { main } from "./build-keycloak-theme";
 
 if (require.main === module) {
 
-    console.log("🔏 Building the keycloak theme...⌚");
+	main();
 
-    generateKeycloakThemeResources({
-        keycloakThemeBuildingDirPath,
-        "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
-        "themeName": parsedPackageJson.name
-    });
-
-    const { jarFilePath } = generateJavaStackFiles({
-        parsedPackageJson,
-        keycloakThemeBuildingDirPath
-    });
-
-    child_process.execSync(
-        "mvn package",
-        { "cwd": keycloakThemeBuildingDirPath }
-    );
-
-    generateDebugFiles({
-        keycloakThemeBuildingDirPath,
-        "packageJsonName": parsedPackageJson.name
-    });
-
-    console.log([
-        '',
-        `✅ Your keycloak theme has been generated and bundled into ./${pathRelative(reactProjectDirPath, jarFilePath)} 🚀`,
-        `It is to be placed in "/opt/jboss/keycloak/standalone/deployments" in the container running a jboss/keycloak Docker image. (Tested with 11.0.3)`,
-        '',
-        'Using Helm (https://github.com/codecentric/helm-charts), edit to reflect:',
-        '',
-        'value.yaml: ',
-        '    extraInitContainers: |',
-        '        - name: realm-ext-provider',
-        '          image: curlimages/curl',
-        '          imagePullPolicy: IfNotPresent',
-        '          command:',
-        '            - sh',
-        '          args:',
-        '            - -c',
-        `            - curl -L -f -S -o /extensions/${pathBasename(jarFilePath)} https://AN.URL.FOR/${pathBasename(jarFilePath)}`,
-        '          volumeMounts:',
-        '            - name: extensions',
-        '              mountPath: /extensions',
-        '        ',
-        '        extraVolumeMounts: |',
-        '            - name: extensions',
-        '              mountPath: /opt/jboss/keycloak/standalone/deployments',
-        '',
-        '',
-        'To test your theme locally, with hot reloading, you can spin up a Keycloak container image with the theme loaded by running:',
-        '',
-        `👉 $ ./${pathRelative(reactProjectDirPath, pathJoin(keycloakThemeBuildingDirPath, containerLaunchScriptBasename))} 👈`,
-        '',
-        'To enable the theme within keycloak log into the admin console ( 👉 http://localhost:8080 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`,
-        '',
-        'Once your container is up and configured 👉 http://localhost:8080/auth/realms/myrealm/account 👈',
-        '',
-    ].join("\n"));
-
-}
+}

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

@@ -1,25 +1,52 @@
 
 import * as crypto from "crypto";
+import { ftlValuesGlobalName } from "./ftlValuesGlobalName";
 
-export function replaceImportFromStaticInJsCode(
+export function replaceImportsFromStaticInJsCode(
     params: {
-        ftlValuesGlobalName: string;
         jsCode: string;
+        urlOrigin: undefined | string;
     }
 ): { fixedJsCode: string; } {
 
-    const { jsCode, ftlValuesGlobalName } = params;
+    const { jsCode, urlOrigin } = params;
 
-    const fixedJsCode = jsCode!.replace(
-        /"static\//g,
-        `window.${ftlValuesGlobalName}.url.resourcesPath.replace(/^\\//,"") + "/build/static/`
+    const fixedJsCode = jsCode.replace(
+        /([a-z]+\.[a-z]+)\+"static\//g,
+        (...[, group]) =>
+            urlOrigin === undefined ?
+                `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/` :
+                `("${ftlValuesGlobalName}" in window ? "${urlOrigin}" : "") + ${group} + "static/`
     );
 
     return { fixedJsCode };
 
 }
 
-export function replaceImportFromStaticInCssCode(
+export function replaceImportsInInlineCssCode(
+    params: {
+        cssCode: string;
+        urlPathname: string;
+        urlOrigin: undefined | string;
+    }
+): { fixedCssCode: string; } {
+
+    const { cssCode, urlPathname, urlOrigin } = params;
+
+    const fixedCssCode = cssCode.replace(
+        urlPathname === "/" ?
+            /url\(\/([^/][^)]+)\)/g :
+            new RegExp(`url\\(${urlPathname}([^)]+)\\)`, "g"),
+        (...[, group]) => `url(${urlOrigin === undefined ?
+            "${url.resourcesPath}/build/" + group :
+            params.urlOrigin + urlPathname + group})`
+    );
+
+    return { fixedCssCode };
+
+}
+
+export function replaceImportsInCssCode(
     params: {
         cssCode: string;
     }
@@ -32,7 +59,7 @@ export function replaceImportFromStaticInCssCode(
 
     const cssGlobalsToDefine: Record<string, string> = {};
 
-    new Set(cssCode.match(/(url\(\/[^)]+\))/g) ?? [])
+    new Set(cssCode.match(/url\(\/[^/][^)]+\)[^;}]*/g) ?? [])
         .forEach(match =>
             cssGlobalsToDefine[
             "url" + crypto
@@ -60,12 +87,13 @@ export function replaceImportFromStaticInCssCode(
 export function generateCssCodeToDefineGlobals(
     params: {
         cssGlobalsToDefine: Record<string, string>;
+        urlPathname: string;
     }
 ): {
     cssCodeToPrependInHead: string;
 } {
 
-    const { cssGlobalsToDefine } = params;
+    const { cssGlobalsToDefine, urlPathname } = params;
 
     return {
         "cssCodeToPrependInHead": [
@@ -73,12 +101,8 @@ export function generateCssCodeToDefineGlobals(
             ...Object.keys(cssGlobalsToDefine)
                 .map(cssVariableName => [
                     `--${cssVariableName}:`,
-                    [
-                        "url(",
-                        "${url.resourcesPath}/build" +
-                        cssGlobalsToDefine[cssVariableName].match(/^url\(([^)]+)\)$/)![1],
-                        ")"
-                    ].join("")
+                    cssGlobalsToDefine[cssVariableName]
+                        .replace(new RegExp(`url\\(${urlPathname.replace(/\//g, "\\/")}`, "g"), "url(${url.resourcesPath}/build/")
                 ].join(" "))
                 .map(line => `    ${line};`),
             "}"

src/bin/generate-i18n-messages.ts

@@ -49,7 +49,7 @@ crawl(".").forEach(filePath => {
 
 child_process.execSync(`rm -r ${tmpDirPath}`);
 
-const targetDirPath = pathJoin(getProjectRoot(), "src", "lib", "i18n", "generated_messages");
+const targetDirPath = pathJoin(getProjectRoot(), "src", "lib", "i18n", "generated_kcMessages");
 
 fs.mkdirSync(targetDirPath, { "recursive": true });
 
@@ -65,7 +65,7 @@ Object.keys(record).forEach(pageType => {
                 '//PLEASE DO NOT EDIT MANUALLY',
                 '',
                 '/* spell-checker: disable */',
-                `export const messages= ${JSON.stringify(record[pageType], null, 2)} as const;`,
+                `export const kcMessages= ${JSON.stringify(record[pageType], null, 2)};`,
                 '/* spell-checker: enable */'
             ].join("\n"), "utf8")
     );

src/bin/tools/isInside.ts

@@ -0,0 +1,14 @@
+import { relative as pathRelative } from "path";
+
+export function isInside(
+    params: {
+        dirPath: string;
+        filePath: string;
+    }
+) {
+
+    const { dirPath, filePath } = params;
+
+    return !pathRelative(dirPath, filePath).startsWith("..");
+
+}

src/bin/tools/transformCodebase.ts

@@ -3,7 +3,7 @@
 import * as fs from "fs";
 import * as path from "path";
 import { crawl } from "./crawl";
-import { id } from "evt/tools/typeSafety/id";
+import { id } from "tsafe/id";
 
 type TransformSourceCode = 
         (params: {

src/lib/components/Error.tsx

@@ -1,28 +1,21 @@
-
 import { memo } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
-import { assert } from "../tools/assert";
-import { kcContext } from "../kcContext";
-import { useKcTranslation } from "../i18n/useKcTranslation";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
 
-export const Error = memo((props: KcProps) => {
+export const Error = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Error; } & KcProps) => {
 
-    const { t } = useKcTranslation();
-
-    assert(
-        kcContext !== undefined &&
-        kcContext.pageId === "error.ftl" &&
-        kcContext.message !== undefined
-    );
+    const { msg } = useKcMessage();
 
     const { message, client } = kcContext;
 
     return (
         <Template
-            {...props}
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
             displayMessage={false}
-            headerNode={t("errorTitle")}
+            headerNode={msg("errorTitle")}
             formNode={
                 <div id="kc-error-message">
                     <p className="instruction">{message.summary}</p>
@@ -30,7 +23,7 @@ export const Error = memo((props: KcProps) => {
                         client !== undefined && client.baseUrl !== undefined &&
                         <p>
                             <a id="backToApplication" href={client.baseUrl}>
-                                {t("backToApplication")}
+                                {msg("backToApplication")}
                             </a>
                         </p>
                     }

src/lib/components/Info.tsx

@@ -3,18 +3,14 @@ import { memo } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
 import { assert } from "../tools/assert";
-import { kcContext } from "../kcContext";
-import { useKcTranslation } from "../i18n/useKcTranslation";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
 
-export const Info = memo((props: KcProps) => {
+export const Info = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Info; } & KcProps) => {
 
-    const { t } = useKcTranslation();
+    const { msg } = useKcMessage();
 
-    assert(
-        kcContext !== undefined &&
-        kcContext.pageId === "info.ftl" &&
-        kcContext.message !== undefined
-    );
+    assert(kcContext.message !== undefined);
 
     const {
         messageHeader,
@@ -28,7 +24,8 @@ export const Info = memo((props: KcProps) => {
 
     return (
         <Template
-            {...props}
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
             displayMessage={false}
             headerNode={
                 messageHeader !== undefined ?
@@ -45,7 +42,7 @@ export const Info = memo((props: KcProps) => {
                             <b>
                                 {
                                     requiredActions
-                                        .map(requiredAction => t(`requiredAction.${requiredAction}` as const))
+                                        .map(requiredAction => msg(`requiredAction.${requiredAction}` as const))
                                         .join(",")
                                 }
 
@@ -57,13 +54,13 @@ export const Info = memo((props: KcProps) => {
                     {
                         !skipLink &&
                             pageRedirectUri !== undefined ?
-                            <p><a href="${pageRedirectUri}">${(t("backToApplication"))}</a></p>
+                            <p><a href={pageRedirectUri}>{(msg("backToApplication"))}</a></p>
                             :
                             actionUri !== undefined ?
-                                <p><a href="${actionUri}">${t("proceedWithAction")}</a></p>
+                                <p><a href={actionUri}>{msg("proceedWithAction")}</a></p>
                                 :
                                 client.baseUrl !== undefined &&
-                                <p><a href="${client.baseUrl}">${t("backToApplication")}</a></p>
+                                <p><a href={client.baseUrl}>{msg("backToApplication")}</a></p>
                     }
                 </div>
 

src/lib/components/KcApp.tsx

@@ -1,23 +1,29 @@
 
 import { memo } from "react";
-import { kcContext } from "../kcContext";
-import { assert } from "../tools/assert";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
 import type { KcProps } from "./KcProps";
 import { Login } from "./Login";
 import { Register } from "./Register";
 import { Info } from "./Info";
-import { Error } from "./Error";
-
-
-export const KcApp = memo((props: KcProps) => {
-
-    assert(kcContext !== undefined, "App is not currently served by a Keycloak server");
+import { Error } from "./Error";
+import { LoginResetPassword } from "./LoginResetPassword";
+import { LoginVerifyEmail } from "./LoginVerifyEmail";
+import { Terms } from "./Terms";
+import { LoginOtp } from "./LoginOtp";
+import { LoginUpdateProfile } from "./LoginUpdateProfile";
+import { LoginIdpLinkConfirm } from "./LoginIdpLinkConfirm";
 
+export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContextBase; } & KcProps) => {
     switch (kcContext.pageId) {
-        case "login.ftl": return <Login {...props} />;
-        case "register.ftl": return <Register {...props} />;
-        case "info.ftl": return <Info {...props} />;
-        case "error.ftl": return <Error {...props} />;
+        case "login.ftl": return <Login {...{ kcContext, ...props }} />;
+        case "register.ftl": return <Register {...{ kcContext, ...props }} />;
+        case "info.ftl": return <Info {...{ kcContext, ...props }} />;
+        case "error.ftl": return <Error {...{ kcContext, ...props }} />;
+        case "login-reset-password.ftl": return <LoginResetPassword {...{ kcContext, ...props }} />;
+        case "login-verify-email.ftl": return <LoginVerifyEmail {...{ kcContext, ...props }} />;
+        case "terms.ftl": return <Terms {...{ kcContext, ...props }} />;
+        case "login-otp.ftl": return <LoginOtp {...{ kcContext, ...props }} />;
+        case "login-update-profile.ftl": return <LoginUpdateProfile {...{ kcContext, ...props }} />;
+        case "login-idp-link-confirm.ftl": return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
     }
-
 });

src/lib/components/KcProps.ts

@@ -1,6 +1,6 @@
 
 import { allPropertiesValuesToUndefined } from "../tools/allPropertiesValuesToUndefined";
-import { doExtends } from "evt/tools/typeSafety/doExtends";
+import { doExtends } from "tsafe/doExtends";
 
 /** Class names can be provided as an array or separated by whitespace */
 export type KcPropsGeneric<CssClasses extends string> = { [key in CssClasses]: readonly string[] | string | undefined; };

src/lib/components/Login.tsx

@@ -2,20 +2,14 @@
 import { useState, memo } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
-import { assert } from "../tools/assert";
-import { kcContext } from "../kcContext";
-import { useKcTranslation } from "../i18n/useKcTranslation";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
 import { cx } from "tss-react";
 import { useConstCallback } from "powerhooks";
 
-export const Login = memo((props: KcProps) => {
+export const Login = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Login; } & KcProps) => {
 
-    const { t, tStr } = useKcTranslation();
-
-    assert(
-        kcContext !== undefined &&
-        kcContext.pageId === "login.ftl"
-    );
+    const { msg, msgStr } = useKcMessage();
 
     const {
         social, realm, url,
@@ -31,10 +25,11 @@ export const Login = memo((props: KcProps) => {
 
     return (
         <Template
-            {...props}
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
             displayInfo={social.displayInfo}
             displayWide={realm.password && social.providers !== undefined}
-            headerNode={t("doLogIn")}
+            headerNode={msg("doLogIn")}
             formNode={
                 <div
                     id="kc-form"
@@ -52,12 +47,12 @@ export const Login = memo((props: KcProps) => {
                                         <label htmlFor="username" className={cx(props.kcLabelClass)}>
                                             {
                                                 !realm.loginWithEmailAllowed ?
-                                                    t("username")
+                                                    msg("username")
                                                     :
                                                     (
                                                         !realm.registrationEmailAsUsername ?
-                                                            t("usernameOrEmail") :
-                                                            t("email")
+                                                            msg("usernameOrEmail") :
+                                                            msg("email")
                                                     )
                                             }
                                         </label>
@@ -68,12 +63,12 @@ export const Login = memo((props: KcProps) => {
                                             name="username"
                                             defaultValue={login.username ?? ''}
                                             type="text"
-                                            {...(usernameEditDisabled ? { "disabled": true } : { "autoFocus": true, "autocomplete": "off" })}
+                                            {...(usernameEditDisabled ? { "disabled": true } : { "autoFocus": true, "autoComplete": "off" })}
                                         />
                                     </div>
                                     <div className={cx(props.kcFormGroupClass)}>
                                         <label htmlFor="password" className={cx(props.kcLabelClass)}>
-                                            {t("password")}
+                                            {msg("password")}
                                         </label>
                                         <input tabIndex={2} id="password" className={cx(props.kcInputClass)} name="password" type="password" autoComplete="off" />
                                     </div>
@@ -87,7 +82,7 @@ export const Login = memo((props: KcProps) => {
                                                 <div className="checkbox">
                                                     <label>
                                                         <input tabIndex={3} id="rememberMe" name="rememberMe" type="checkbox" {...(login.rememberMe ? { "checked": true } : {})} />
-                                                        {t("rememberMe")}
+                                                        {msg("rememberMe")}
                                                     </label>
                                                 </div>
                                             }
@@ -96,7 +91,7 @@ export const Login = memo((props: KcProps) => {
                                             {
                                                 realm.resetPasswordAllowed &&
                                                 <span>
-                                                    <a tabIndex={5} href={url.loginResetCredentialsUrl}>{t("doForgotPassword")}</a>
+                                                    <a tabIndex={5} href={url.loginResetCredentialsUrl}>{msg("doForgotPassword")}</a>
                                                 </span>
                                             }
                                         </div>
@@ -112,7 +107,7 @@ export const Login = memo((props: KcProps) => {
                                         <input
                                             tabIndex={4}
                                             className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)} name="login" id="kc-login" type="submit"
-                                            value={tStr("doLogIn")}
+                                            value={msgStr("doLogIn")}
                                             disabled={isLoginButtonDisabled}
                                         />
                                     </div>
@@ -126,7 +121,7 @@ export const Login = memo((props: KcProps) => {
                             <ul className={cx(props.kcFormSocialAccountListClass, social.providers.length > 4 && props.kcFormSocialAccountDoubleListClass)}>
                                 {
                                     social.providers.map(p =>
-                                        <li className={cx(props.kcFormSocialAccountListLinkClass)}>
+                                        <li key={p.providerId} className={cx(props.kcFormSocialAccountListLinkClass)}>
                                             <a href={p.loginUrl} id={`zocial-${p.alias}`} className={cx("zocial", p.providerId)}>
                                                 <span>{p.displayName}</span>
                                             </a>
@@ -138,7 +133,7 @@ export const Login = memo((props: KcProps) => {
                     }
                 </div>
             }
-            displayInfoNode={
+            infoNode={
                 (
                     realm.password &&
                     realm.registrationAllowed &&
@@ -146,9 +141,9 @@ export const Login = memo((props: KcProps) => {
                 ) &&
                 <div id="kc-registration">
                     <span>
-                        {t("noAccount")}
+                        {msg("noAccount")}
                         <a tabIndex={6} href={url.registrationUrl}>
-                            {t("doRegister")}
+                            {msg("doRegister")}
                         </a>
                     </span>
                 </div>

src/lib/components/LoginIdpLinkConfirm.tsx

@@ -0,0 +1,59 @@
+
+import { memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
+import { cx } from "tss-react";
+
+export const LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginIdpLinkConfirm; } & KcProps) => {
+
+	const { msg } = useKcMessage();
+
+	const { url, idpAlias } = kcContext;
+
+	return (
+		<Template
+			{...{ kcContext, ...props }}
+			doFetchDefaultThemeResources={true}
+			headerNode={msg("confirmLinkIdpTitle")}
+			formNode={
+				<form id="kc-register-form" action={url.loginAction} method="post">
+					<div className={cx(props.kcFormGroupClass)}>
+						<button
+							type="submit"
+							className={cx(
+								props.kcButtonClass,
+								props.kcButtonDefaultClass,
+								props.kcButtonBlockClass,
+								props.kcButtonLargeClass
+							)}
+							name="submitAction"
+							id="updateProfile"
+							value="updateProfile"
+						>
+							{msg("confirmLinkIdpReviewProfile")}
+						</button>
+						<button
+							type="submit"
+							className={cx(
+								props.kcButtonClass,
+								props.kcButtonDefaultClass,
+								props.kcButtonBlockClass,
+								props.kcButtonLargeClass
+							)}
+							name="submitAction"
+							id="linkAccount"
+							value="linkAccount"
+						>
+							{msg("confirmLinkIdpContinue", idpAlias)}
+						</button>
+					</div>
+				</form>
+			}
+		/>
+	);
+
+});
+
+

src/lib/components/LoginOtp.tsx

@@ -0,0 +1,146 @@
+
+
+import { useEffect, memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
+import { appendHead } from "../tools/appendHead";
+import { join as pathJoin } from "path";
+import { cx } from "tss-react";
+
+export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginOtp; } & KcProps) => {
+
+    const { otpLogin, url } = kcContext;
+
+    const { msg, msgStr } = useKcMessage();
+
+    useEffect(
+        () => {
+
+            let isCleanedUp = false;
+
+            appendHead({
+                "type": "javascript",
+                "src": pathJoin(
+                    kcContext.url.resourcesCommonPath,
+                    "node_modules/jquery/dist/jquery.min.js"
+                )
+            }).then(() => {
+
+                if (isCleanedUp) return;
+
+                evaluateInlineScript();
+
+            });
+
+            return () => { isCleanedUp = true };
+
+        },
+        []
+    );
+
+    return (
+        <Template
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("doLogIn")}
+            formNode={
+
+                <form
+                    id="kc-otp-login-form"
+                    className={cx(props.kcFormClass)}
+                    action={url.loginAction}
+                    method="post"
+                >
+                    {
+                        otpLogin.userOtpCredentials.length > 1 &&
+                        <div className={cx(props.kcFormGroupClass)}>
+                            <div className={cx(props.kcInputWrapperClass)}>
+                                {
+                                    otpLogin.userOtpCredentials.map(otpCredential =>
+                                        <div key={otpCredential.id} className={cx(props.kcSelectOTPListClass)}>
+                                            <input type="hidden" value="${otpCredential.id}" />
+                                            <div className={cx(props.kcSelectOTPListItemClass)}>
+                                                <span className={cx(props.kcAuthenticatorOtpCircleClass)} />
+                                                <h2 className={cx(props.kcSelectOTPItemHeadingClass)}>
+                                                    {otpCredential.userLabel}
+                                                </h2>
+                                            </div>
+                                        </div>
+                                    )
+                                }
+                            </div>
+                        </div>
+                    }
+                    <div className={cx(props.kcFormGroupClass)}>
+                        <div className={cx(props.kcLabelWrapperClass)}>
+                            <label htmlFor="otp" className={cx(props.kcLabelClass)}>
+                                {msg("loginOtpOneTime")}
+                            </label>
+                        </div>
+
+                        <div className={cx(props.kcInputWrapperClass)}>
+                            <input
+                                id="otp"
+                                name="otp"
+                                autoComplete="off"
+                                type="text"
+                                className={cx(props.kcInputClass)}
+                                autoFocus
+                            />
+                        </div>
+                    </div>
+
+                    <div className={cx(props.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                            <div className={cx(props.kcFormOptionsWrapperClass)} />
+                        </div>
+
+                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                            <input
+                                className={cx(
+                                    props.kcButtonClass,
+                                    props.kcButtonPrimaryClass,
+                                    props.kcButtonBlockClass,
+                                    props.kcButtonLargeClass
+                                )}
+                                name="login"
+                                id="kc-login"
+                                type="submit"
+                                value={msgStr("doLogIn")}
+                            />
+                        </div>
+                    </div>
+                </form >
+
+            }
+        />
+    );
+});
+
+
+
+
+declare const $: any;
+
+function evaluateInlineScript() {
+
+    $(document).ready(function () {
+        // Card Single Select
+        $('.card-pf-view-single-select').click(function (this: any) {
+            if ($(this).hasClass('active')) { $(this).removeClass('active'); $(this).children().removeAttr('name'); }
+            else {
+                $('.card-pf-view-single-select').removeClass('active');
+                $('.card-pf-view-single-select').children().removeAttr('name');
+                $(this).addClass('active'); $(this).children().attr('name', 'selectedCredentialId');
+            }
+        });
+
+        var defaultCred = $('.card-pf-view-single-select')[0];
+        if (defaultCred) {
+            defaultCred.click();
+        }
+    });
+
+}

src/lib/components/LoginResetPassword.tsx

@@ -0,0 +1,81 @@
+
+import { memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
+import { cx } from "tss-react";
+
+export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginResetPassword; } & KcProps) => {
+
+    const { msg, msgStr } = useKcMessage();
+
+    const {
+        url,
+        realm,
+        auth
+    } = kcContext;
+
+    return (
+        <Template
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
+            displayMessage={false}
+            headerNode={msg("emailForgotTitle")}
+            formNode={
+                <form id="kc-reset-password-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                    <div className={cx(props.kcFormGroupClass)}>
+                        <div className={cx(props.kcLabelWrapperClass)}>
+                            <label htmlFor="username" className={cx(props.kcLabelClass)}>
+                                {
+                                    !realm.loginWithEmailAllowed ?
+                                        msg("username")
+                                        :
+                                        !realm.registrationEmailAsUsername ?
+                                            msg("usernameOrEmail") :
+                                            msg("email")
+                                }
+                            </label>
+                        </div>
+                        <div className={cx(props.kcInputWrapperClass)}>
+                            <input
+                                type="text"
+                                id="username"
+                                name="username"
+                                className={cx(props.kcInputClass)}
+                                autoFocus
+                                defaultValue={
+                                    auth !== undefined && auth.showUsername ?
+                                        auth.attemptedUsername : undefined
+                                }
+                            />
+                        </div>
+                    </div>
+                    <div className={cx(props.kcFormGroupClass, props.kcFormSettingClass)}>
+                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                            <div className={cx(props.kcFormOptionsWrapperClass)}>
+                                <span>
+                                    <a href={url.loginUrl}>{msg("backToLogin")}</a>
+                                </span>
+                            </div>
+                        </div>
+
+                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                            <input
+                                className={cx(
+                                    props.kcButtonClass, props.kcButtonPrimaryClass,
+                                    props.kcButtonBlockClass, props.kcButtonLargeClass
+                                )}
+                                type="submit"
+                                value={msgStr("doSubmit")}
+                            />
+                        </div>
+                    </div>
+                </form>
+            }
+            infoNode={msg("emailInstruction")}
+        />
+    );
+});
+
+

src/lib/components/LoginUpdateProfile.tsx

@@ -0,0 +1,131 @@
+import { memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
+import { cx } from "tss-react";
+
+export const LoginUpdateProfile = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdateProfile; } & KcProps) => {
+
+	const { msg, msgStr } = useKcMessage();
+
+	const { url, user, messagesPerField, isAppInitiatedAction } = kcContext;
+
+	return (
+		<Template
+			{...{ kcContext, ...props }}
+			doFetchDefaultThemeResources={true}
+			headerNode={msg("loginProfileTitle")}
+			formNode={
+				<form id="kc-update-profile-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+					{user.editUsernameAllowed &&
+						<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("username", props.kcFormGroupErrorClass))}>
+							<div className={cx(props.kcLabelWrapperClass)}>
+								<label htmlFor="username" className={cx(props.kcLabelClass)}>
+									{msg("username")}
+								</label>
+							</div>
+							<div className={cx(props.kcInputWrapperClass)}>
+								<input
+									type="text"
+									id="username"
+									name="username"
+									defaultValue={user.username ?? ""}
+									className={cx(props.kcInputClass)}
+								/>
+							</div>
+						</div>
+					}
+
+					<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("email", props.kcFormGroupErrorClass))}>
+						<div className={cx(props.kcLabelWrapperClass)}>
+							<label htmlFor="email" className={cx(props.kcLabelClass)}>
+								{msg("email")}
+							</label>
+						</div>
+						<div className={cx(props.kcInputWrapperClass)}>
+							<input
+								type="text"
+								id="email"
+								name="email"
+								defaultValue={user.email ?? ""}
+								className={cx(props.kcInputClass)}
+							/>
+						</div>
+					</div>
+
+					<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("firstName", props.kcFormGroupErrorClass))}>
+						<div className={cx(props.kcLabelWrapperClass)}>
+							<label htmlFor="firstName" className={cx(props.kcLabelClass)}>
+								{msg("firstName")}
+							</label>
+						</div>
+						<div className={cx(props.kcInputWrapperClass)}>
+							<input
+								type="text"
+								id="firstName"
+								name="firstName"
+								defaultValue={user.firstName ?? ""}
+								className={cx(props.kcInputClass)}
+							/>
+						</div>
+					</div>
+
+					<div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("lastName", props.kcFormGroupErrorClass))}>
+						<div className={cx(props.kcLabelWrapperClass)}>
+							<label htmlFor="lastName" className={cx(props.kcLabelClass)}>
+								{msg("lastName")}
+							</label>
+						</div>
+						<div className={cx(props.kcInputWrapperClass)}>
+							<input
+								type="text"
+								id="lastName"
+								name="lastName"
+								defaultValue={user.lastName ?? ""}
+								className={cx(props.kcInputClass)}
+							/>
+						</div>
+					</div>
+
+					<div className={cx(props.kcFormGroupClass)}>
+						<div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+							<div className={cx(props.kcFormOptionsWrapperClass)} />
+						</div>
+
+						<div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+							{
+								isAppInitiatedAction ?
+									<>
+										<input
+											className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
+											type="submit"
+											defaultValue={msgStr("doSubmit")}
+										/>
+										<button
+											className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
+											type="submit"
+											name="cancel-aia"
+											value="true"
+										>
+											{msg("doCancel")}
+										</button>
+									</>
+									:
+									<input
+										className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)}
+										type="submit"
+										defaultValue={msgStr("doSubmit")}
+									/>
+							}
+						</div>
+					</div>
+
+				</form>
+			}
+		/>
+	);
+
+});
+
+

src/lib/components/LoginVerifyEmail.tsx

@@ -0,0 +1,39 @@
+
+import { memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
+
+export const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginVerifyEmail; } & KcProps) => {
+
+    const { msg } = useKcMessage();
+
+    const {
+        url
+    } = kcContext;
+
+    return (
+        <Template
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
+            displayMessage={false}
+            headerNode={msg("emailVerifyTitle")}
+            formNode={
+                <>
+                    <p className="instruction">
+                        {msg("emailVerifyInstruction1")}
+                    </p>
+                    <p className="instruction">
+                        {msg("emailVerifyInstruction2")}
+                        <a href={url.loginAction}>{msg("doClickHere")}</a>
+                        {msg("emailVerifyInstruction3")}
+                    </p>
+                </>
+            }
+        />
+    );
+
+});
+
+

src/lib/components/Register.tsx

@@ -1,19 +1,13 @@
 import { memo } from "react";
 import { Template } from "./Template";
 import type { KcProps } from "./KcProps";
-import { assert } from "../tools/assert";
-import { kcContext } from "../kcContext";
-import { useKcTranslation } from "../i18n/useKcTranslation";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
 import { cx } from "tss-react";
 
-export const Register = memo((props: KcProps) => {
+export const Register = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Register; } & KcProps) => {
 
-    const { t, tStr } = useKcTranslation();
-
-    assert(
-        kcContext !== undefined &&
-        kcContext.pageId === "register.ftl"
-    );
+    const { msg, msgStr } = useKcMessage();
 
     const {
         url,
@@ -27,14 +21,15 @@ export const Register = memo((props: KcProps) => {
 
     return (
         <Template
-            {...props}
-            headerNode={t("registerTitle")}
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("registerTitle")}
             formNode={
                 <form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">
 
-                    <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists('firstName', props.kcFormGroupErrorClass))}>
+                    <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("firstName", props.kcFormGroupErrorClass))}>
                         <div className={cx(props.kcLabelWrapperClass)}>
-                            <label htmlFor="firstName" className={cx(props.kcLabelClass)}>{t("firstName")}</label>
+                            <label htmlFor="firstName" className={cx(props.kcLabelClass)}>{msg("firstName")}</label>
                         </div>
                         <div className={cx(props.kcInputWrapperClass)}>
                             <input type="text" id="firstName" className={cx(props.kcInputClass)} name="firstName"
@@ -45,7 +40,7 @@ export const Register = memo((props: KcProps) => {
 
                     <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("lastName", props.kcFormGroupErrorClass))}>
                         <div className={cx(props.kcLabelWrapperClass)}>
-                            <label htmlFor="lastName" className={cx(props.kcLabelClass)}>{t("lastName")}</label>
+                            <label htmlFor="lastName" className={cx(props.kcLabelClass)}>{msg("lastName")}</label>
                         </div>
                         <div className={cx(props.kcInputWrapperClass)}>
                             <input type="text" id="lastName" className={cx(props.kcInputClass)} name="lastName"
@@ -56,7 +51,7 @@ export const Register = memo((props: KcProps) => {
 
                     <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists('email', props.kcFormGroupErrorClass))}>
                         <div className={cx(props.kcLabelWrapperClass)}>
-                            <label htmlFor="email" className={cx(props.kcLabelClass)}>{t("email")}</label>
+                            <label htmlFor="email" className={cx(props.kcLabelClass)}>{msg("email")}</label>
                         </div>
                         <div className={cx(props.kcInputWrapperClass)}>
                             <input type="text" id="email" className={cx(props.kcInputClass)} name="email"
@@ -69,7 +64,7 @@ export const Register = memo((props: KcProps) => {
 
                         <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists('username', props.kcFormGroupErrorClass))}>
                             <div className={cx(props.kcLabelWrapperClass)}>
-                                <label htmlFor="username" className={cx(props.kcLabelClass)}>{t("username")}</label>
+                                <label htmlFor="username" className={cx(props.kcLabelClass)}>{msg("username")}</label>
                             </div>
                             <div className={cx(props.kcInputWrapperClass)}>
                                 <input type="text" id="username" className={cx(props.kcInputClass)} name="username"
@@ -84,7 +79,7 @@ export const Register = memo((props: KcProps) => {
 
                             <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password", props.kcFormGroupErrorClass))}>
                                 <div className={cx(props.kcLabelWrapperClass)}>
-                                    <label htmlFor="password" className={cx(props.kcLabelClass)}>{t("password")}</label>
+                                    <label htmlFor="password" className={cx(props.kcLabelClass)}>{msg("password")}</label>
                                 </div>
                                 <div className={cx(props.kcInputWrapperClass)}>
                                     <input type="password" id="password" className={cx(props.kcInputClass)} name="password" autoComplete="new-password" />
@@ -93,7 +88,7 @@ export const Register = memo((props: KcProps) => {
 
                             <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass))}>
                                 <div className={cx(props.kcLabelWrapperClass)}>
-                                    <label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>{t("passwordConfirm")}</label>
+                                    <label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>{msg("passwordConfirm")}</label>
                                 </div>
                                 <div className={cx(props.kcInputWrapperClass)}>
                                     <input type="password" id="password-confirm" className={cx(props.kcInputClass)} name="password-confirm" />
@@ -113,13 +108,13 @@ export const Register = memo((props: KcProps) => {
                     <div className={cx(props.kcFormGroupClass)}>
                         <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
                             <div className={cx(props.kcFormOptionsWrapperClass)}>
-                                <span><a href={url.loginUrl}>{t("backToLogin")}</a></span>
+                                <span><a href={url.loginUrl}>{msg("backToLogin")}</a></span>
                             </div>
                         </div>
 
                         <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
                             <input className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonBlockClass, props.kcButtonLargeClass)} type="submit"
-                                defaultValue={tStr("doRegister")} />
+                                value={msgStr("doRegister")} />
                         </div>
                     </div>
                 </form >

src/lib/components/Template.tsx

@@ -1,9 +1,9 @@
 
 import { useReducer, useEffect, memo } from "react";
 import type { ReactNode } from "react";
-import { useKcTranslation } from "../i18n/useKcTranslation";
+import { useKcMessage } from "../i18n/useKcMessage";
 import { useKcLanguageTag } from "../i18n/useKcLanguageTag";
-import { kcContext } from "../kcContext";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
 import { assert } from "../tools/assert";
 import { cx } from "tss-react";
 import type { KcLanguageTag } from "../i18n/KcLanguageTag";
@@ -24,9 +24,12 @@ export type TemplateProps = {
     headerNode: ReactNode;
     showUsernameNode?: ReactNode;
     formNode: ReactNode;
-    displayInfoNode?: ReactNode;
-} & KcTemplateProps;
-
+    infoNode?: ReactNode;
+    /** If you write your own page you probably want
+     * to avoid pulling the default theme assets.
+     */
+    doFetchDefaultThemeResources: boolean;
+} & { kcContext: KcContextBase; } & KcTemplateProps;
 
 export const Template = memo((props: TemplateProps) => {
 
@@ -39,12 +42,14 @@ export const Template = memo((props: TemplateProps) => {
         headerNode,
         showUsernameNode = null,
         formNode,
-        displayInfoNode = null
+        infoNode = null,
+        kcContext,
+        doFetchDefaultThemeResources
     } = props;
 
     useEffect(() => { console.log("Rendering this page with react using keycloakify") }, []);
 
-    const { t } = useKcTranslation();
+    const { msg } = useKcMessage();
 
     const { kcLanguageTag, setKcLanguageTag } = useKcLanguageTag();
 
@@ -58,37 +63,41 @@ export const Template = memo((props: TemplateProps) => {
         (document.forms["kc-select-try-another-way-form" as never].submit(), false)
     );
 
-    assert(kcContext !== undefined);
-
     const {
-        realm, locale, auth, 
+        realm, locale, auth,
         url, message, isAppInitiatedAction
-    }= kcContext;
+    } = kcContext;
 
-    useEffect(()=>{
+    useEffect(() => {
 
-        if( !realm.internationalizationEnabled ){
+        if (!realm.internationalizationEnabled) {
             return;
         }
 
-        assert( locale !== undefined );
+        assert(locale !== undefined);
 
-        if( kcLanguageTag === getBestMatchAmongKcLanguageTag(locale.current) ){
+        if (kcLanguageTag === getBestMatchAmongKcLanguageTag(locale.current)) {
             return;
         }
 
-        window.location.href = 
+        window.location.href =
             locale.supported.find(({ languageTag }) => languageTag === kcLanguageTag)!.url;
 
-    },[kcLanguageTag]);
+    }, [kcLanguageTag]);
 
     const [isExtraCssLoaded, setExtraCssLoaded] = useReducer(() => true, false);
 
     useEffect(() => {
 
-        let isUnmounted = false;
+        if (!doFetchDefaultThemeResources) {
+            setExtraCssLoaded();
+            return;
+        }
 
-        const toArr = (x: string | readonly string[] | undefined) => 
+        let isUnmounted = false;
+        const cleanups: (() => void)[] = [];
+
+        const toArr = (x: string | readonly string[] | undefined) =>
             typeof x === "string" ? x.split(" ") : x ?? [];
 
         Promise.all(
@@ -115,13 +124,29 @@ export const Template = memo((props: TemplateProps) => {
             })
         );
 
-        document.getElementsByTagName("html")[0]
-            .classList
-            .add(cx(props.kcHtmlClass));
+        if (props.kcHtmlClass !== undefined) {
 
-        return () => { isUnmounted = true; };
+            const htmlClassList =
+                document.getElementsByTagName("html")[0]
+                    .classList;
 
-    }, []);
+            const tokens = cx(props.kcHtmlClass).split(" ")
+
+            htmlClassList.add(...tokens);
+
+            cleanups.push(() => htmlClassList.remove(...tokens));
+
+        }
+
+        return () => {
+
+            isUnmounted = true;
+
+            cleanups.forEach(f => f());
+
+        };
+
+    }, [props.kcHtmlClass]);
 
     if (!isExtraCssLoaded) {
         return null;
@@ -132,7 +157,7 @@ export const Template = memo((props: TemplateProps) => {
 
             <div id="kc-header" className={cx(props.kcHeaderClass)}>
                 <div id="kc-header-wrapper" className={cx(props.kcHeaderWrapperClass)}>
-                    {t("loginTitleHtml", realm.displayNameHtml)}
+                    {msg("loginTitleHtml", realm.displayNameHtml)}
                 </div>
             </div>
 
@@ -154,7 +179,7 @@ export const Template = memo((props: TemplateProps) => {
                                         {
                                             locale.supported.map(
                                                 ({ languageTag }) =>
-                                                    <li className="kc-dropdown-item">
+                                                    <li key={languageTag} className="kc-dropdown-item">
                                                         <a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
                                                             {getKcLanguageTagLabel(languageTag)}
                                                         </a>
@@ -182,7 +207,7 @@ export const Template = memo((props: TemplateProps) => {
                                             <div className={cx(props.kcLabelWrapperClass, "subtitle")}>
                                                 <span className="subtitle">
                                                     <span className="required">*</span>
-                                                    {t("requiredFields")}
+                                                    {msg("requiredFields")}
                                                 </span>
                                             </div>
                                             <div className="col-md-10">
@@ -201,7 +226,7 @@ export const Template = memo((props: TemplateProps) => {
                                 displayRequiredFields ? (
                                     <div className={cx(props.kcContentWrapperClass)}>
                                         <div className={cx(props.kcLabelWrapperClass, "subtitle")}>
-                                            <span className="subtitle"><span className="required">*</span> {t("requiredFields")}</span>
+                                            <span className="subtitle"><span className="required">*</span> {msg("requiredFields")}</span>
                                         </div>
                                         <div className="col-md-10">
                                             {showUsernameNode}
@@ -211,7 +236,7 @@ export const Template = memo((props: TemplateProps) => {
                                                     <a id="reset-login" href={url.loginRestartFlowUrl}>
                                                         <div className="kc-login-tooltip">
                                                             <i className={cx(props.kcResetFlowIcon)}></i>
-                                                            <span className="kc-tooltip-text">{t("restartLoginTooltip")}</span>
+                                                            <span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
                                                         </div>
                                                     </a>
                                                 </div>
@@ -219,21 +244,21 @@ export const Template = memo((props: TemplateProps) => {
                                         </div>
                                     </div>
                                 ) : (
-                                        <>
-                                            {showUsernameNode}
-                                            <div className={cx(props.kcFormGroupClass)}>
-                                                <div id="kc-username">
-                                                    <label id="kc-attempted-username">{auth?.attemptedUsername}</label>
-                                                    <a id="reset-login" href={url.loginRestartFlowUrl}>
-                                                        <div className="kc-login-tooltip">
-                                                            <i className={cx(props.kcResetFlowIcon)}></i>
-                                                            <span className="kc-tooltip-text">{t("restartLoginTooltip")}</span>
-                                                        </div>
-                                                    </a>
-                                                </div>
+                                    <>
+                                        {showUsernameNode}
+                                        <div className={cx(props.kcFormGroupClass)}>
+                                            <div id="kc-username">
+                                                <label id="kc-attempted-username">{auth?.attemptedUsername}</label>
+                                                <a id="reset-login" href={url.loginRestartFlowUrl}>
+                                                    <div className="kc-login-tooltip">
+                                                        <i className={cx(props.kcResetFlowIcon)}></i>
+                                                        <span className="kc-tooltip-text">{msg("restartLoginTooltip")}</span>
+                                                    </div>
+                                                </a>
                                             </div>
-                                        </>
-                                    )
+                                        </div>
+                                    </>
+                                )
                             )
                     }
                 </header>
@@ -254,7 +279,10 @@ export const Template = memo((props: TemplateProps) => {
                                 {message.type === "warning" && <span className={cx(props.kcFeedbackWarningIcon)}></span>}
                                 {message.type === "error" && <span className={cx(props.kcFeedbackErrorIcon)}></span>}
                                 {message.type === "info" && <span className={cx(props.kcFeedbackInfoIcon)}></span>}
-                                <span className="kc-feedback-text">{message.summary}</span>
+                                <span 
+                                    className="kc-feedback-text" 
+                                    dangerouslySetInnerHTML={{ "__html": message.summary }} 
+                                />
                             </div>
                         }
                         {formNode}
@@ -269,7 +297,7 @@ export const Template = memo((props: TemplateProps) => {
                                 <div className={cx(displayWide && [props.kcFormSocialAccountContentClass, props.kcFormSocialAccountClass])} >
                                     <div className={cx(props.kcFormGroupClass)}>
                                         <input type="hidden" name="tryAnotherWay" value="on" />
-                                        <a href="#" id="try-another-way" onClick={onTryAnotherWayClick}>{t("doTryAnotherWay")}</a>
+                                        <a href="#" id="try-another-way" onClick={onTryAnotherWayClick}>{msg("doTryAnotherWay")}</a>
                                     </div>
                                 </div >
                             </form>
@@ -279,7 +307,7 @@ export const Template = memo((props: TemplateProps) => {
 
                             <div id="kc-info" className={cx(props.kcSignUpClass)}>
                                 <div id="kc-info-wrapper" className={cx(props.kcInfoAreaWrapperClass)}>
-                                    {displayInfoNode}
+                                    {infoNode}
                                 </div>
                             </div>
                         }

src/lib/components/Terms.tsx

@@ -0,0 +1,58 @@
+import { memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
+import { cx } from "tss-react";
+
+export const Terms = memo(({ kcContext, ...props }: { kcContext: KcContextBase.Terms; } & KcProps) => {
+
+    const { msg, msgStr } = useKcMessage();
+
+    const { url } = kcContext;
+
+    return (
+        <Template
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
+            displayMessage={false}
+            headerNode={msg("termsTitle")}
+            formNode={
+                <>
+                    <div id="kc-terms-text">
+                        {msg("termsText")}
+                    </div>
+                    <form className="form-actions" action={url.loginAction} method="POST">
+                        <input
+                            className={cx(
+                                props.kcButtonClass,
+                                props.kcButtonClass,
+                                props.kcButtonClass,
+                                props.kcButtonPrimaryClass,
+                                props.kcButtonLargeClass
+                            )}
+                            name="accept"
+                            id="kc-accept"
+                            type="submit"
+                            value={msgStr("doAccept")}
+                        />
+                        <input
+                            className={cx(
+                                props.kcButtonClass,
+                                props.kcButtonDefaultClass,
+                                props.kcButtonLargeClass
+                            )}
+                            name="cancel"
+                            id="kc-decline"
+                            type="submit"
+                            value={msgStr("doDecline")}
+                        />
+                    </form>
+                    <div className="clearfix" />
+                </>
+            }
+        />
+    );
+});
+
+

src/lib/getKcContext/KcContextBase.ts

@@ -1,19 +1,26 @@
 
-import { ftlValuesGlobalName } from "../bin/build-keycloak-theme/ftlValuesGlobalName";
-import type { PageId } from "../bin/build-keycloak-theme/generateFtl";
-import { id } from "evt/tools/typeSafety/id";
-import type { KcLanguageTag } from "./i18n/KcLanguageTag";
-import { doExtends } from "evt/tools/typeSafety/doExtends";
-import type { MessageKey } from "./i18n/useKcTranslation";
-import type { LanguageLabel } from "./i18n/KcLanguageTag";
+import type { PageId } from "../../bin/build-keycloak-theme/generateFtl";
+import type { KcLanguageTag } from "../i18n/KcLanguageTag";
+import { doExtends } from "tsafe/doExtends";
+import type { MessageKey } from "../i18n/useKcMessage";
+import type { LanguageLabel } from "../i18n/KcLanguageTag";
 
-type ExtractAfterStartingWith<Prefix extends string, StrEnum> = 
+type ExtractAfterStartingWith<Prefix extends string, StrEnum> =
     StrEnum extends `${Prefix}${infer U}` ? U : never;
 
-export type KcContext = KcContext.Login | KcContext.Register | KcContext.Info | KcContext.Error;
-export declare namespace KcContext {
+/** Take theses type definition with a grain of salt. 
+ * Some values might be undefined on some pages.
+ * (ex: url.loginAction is undefined on error.ftl)
+ */
+export type KcContextBase =
+    KcContextBase.Login | KcContextBase.Register | KcContextBase.Info |
+    KcContextBase.Error | KcContextBase.LoginResetPassword | KcContextBase.LoginVerifyEmail |
+    KcContextBase.Terms | KcContextBase.LoginOtp | KcContextBase.LoginUpdateProfile |
+    KcContextBase.LoginIdpLinkConfirm;
 
-    export type Template = {
+export declare namespace KcContextBase {
+
+    export type Common = {
         url: {
             loginAction: string;
             resourcesPath: string;
@@ -25,7 +32,7 @@ export declare namespace KcContext {
             displayName?: string;
             displayNameHtml?: string;
             internationalizationEnabled: boolean;
-            registrationEmailAsUsername: boolean; //<---
+            registrationEmailAsUsername: boolean;
         };
         /** Undefined if !realm.internationalizationEnabled */
         locale?: {
@@ -43,7 +50,7 @@ export declare namespace KcContext {
             showUsername: boolean;
             showResetCredentials: boolean;
             showTryAnotherWayLink: boolean;
-            attemptedUsername?: boolean;
+            attemptedUsername?: string;
         };
         scripts: string[];
         message?: {
@@ -53,7 +60,7 @@ export declare namespace KcContext {
         isAppInitiatedAction: boolean;
     };
 
-    export type Login = Template & {
+    export type Login = Common & {
         pageId: "login.ftl";
         url: {
             loginResetCredentialsUrl: string;
@@ -86,7 +93,7 @@ export declare namespace KcContext {
         };
     };
 
-    export type Register = Template & {
+    export type Register = Common & {
         pageId: "register.ftl";
         url: {
             registrationAction: string;
@@ -115,14 +122,22 @@ export declare namespace KcContext {
         };
         passwordRequired: boolean;
         recaptchaRequired: boolean;
-        /** undefined if !recaptchaRequired */
         recaptchaSiteKey?: string;
+        social: {
+            displayInfo: boolean;
+            providers?: {
+                loginUrl: string;
+                alias: string;
+                providerId: string;
+                displayName: string;
+            }[]
+        };
     };
 
-    export type Info = Template & {
+    export type Info = Common & {
         pageId: "info.ftl";
         messageHeader?: string;
-        requiredActions?: ExtractAfterStartingWith<"requiredAction.",MessageKey>[];
+        requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKey>[];
         skipLink: boolean;
         pageRedirectUri?: string;
         actionUri?: string;
@@ -131,16 +146,63 @@ export declare namespace KcContext {
         }
     };
 
-    export type Error = Template & {
+    export type Error = Common & {
         pageId: "error.ftl";
         client?: {
             baseUrl?: string;
+        },
+        message: NonNullable<Common["message"]>;
+    };
+
+    export type LoginResetPassword = Common & {
+        pageId: "login-reset-password.ftl";
+        realm: {
+            loginWithEmailAllowed: boolean;
         }
     };
 
+    export type LoginVerifyEmail = Common & {
+        pageId: "login-verify-email.ftl";
+    };
+
+    export type Terms = Common & {
+        pageId: "terms.ftl";
+    };
+
+    export type LoginOtp = Common & {
+        pageId: "login-otp.ftl";
+        otpLogin: {
+            userOtpCredentials: { id: string; userLabel: string; }[];
+        }
+    };
+
+    export type LoginUpdateProfile = Common & {
+        pageId: "login-update-profile.ftl";
+        user: {
+            editUsernameAllowed: boolean;
+            username?: string;
+            email?: string;
+            firstName?: string;
+            lastName?: string;
+        };
+        messagesPerField: {
+            printIfExists<T>(
+                key: "username" | "email" | "firstName" | "lastName",
+                x: T
+            ): T | undefined;
+        };
+
+    };
+
+    export type LoginIdpLinkConfirm = Common & {
+        pageId: "login-idp-link-confirm.ftl";
+        idpAlias: string;
+    };
+
 }
 
-doExtends<KcContext["pageId"], PageId>();
-doExtends<PageId, KcContext["pageId"]>();
+doExtends<KcContextBase["pageId"], PageId>();
+doExtends<PageId, KcContextBase["pageId"]>();
+
+
 
-export const kcContext = id<KcContext | undefined>((window as any)[ftlValuesGlobalName]);

src/lib/getKcContext/getKcContext.ts

@@ -0,0 +1,93 @@
+
+import type { KcContextBase } from "./KcContextBase";
+import { kcContextMocks, kcContextCommonMock } from "./kcContextMocks";
+import { ftlValuesGlobalName } from "../../bin/build-keycloak-theme/ftlValuesGlobalName";
+import type { AndByDiscriminatingKey } from "../tools/AndByDiscriminatingKey";
+import type { DeepPartial } from "../tools/DeepPartial";
+import { deepAssign } from "../tools/deepAssign";
+
+
+export type ExtendsKcContextBase<
+	KcContextExtended extends ({ pageId: string; } | undefined)
+	> =
+	KcContextExtended extends undefined ?
+	KcContextBase :
+	AndByDiscriminatingKey<
+		"pageId",
+		KcContextExtended & KcContextBase.Common,
+		KcContextBase
+	>;
+
+export function getKcContext<KcContextExtended extends ({ pageId: string; } | undefined) = undefined>(
+	params?: {
+		mockPageId?: ExtendsKcContextBase<KcContextExtended>["pageId"];
+		mockData?: readonly DeepPartial<ExtendsKcContextBase<KcContextExtended>>[];
+	}
+): { kcContext: ExtendsKcContextBase<KcContextExtended> | undefined; } {
+
+	const {
+		mockPageId,
+		mockData
+	} = params ?? {};
+
+	if (mockPageId !== undefined) {
+
+		//TODO maybe trow if no mock fo custom page
+
+		const kcContextDefaultMock = kcContextMocks.find(({ pageId }) => pageId === mockPageId);
+
+		const partialKcContextCustomMock = mockData?.find(({ pageId }) => pageId === mockPageId);
+
+		if (
+			kcContextDefaultMock === undefined &&
+			partialKcContextCustomMock === undefined
+		) {
+
+			console.warn([
+				`WARNING: You declared the non build in page ${mockPageId} but you didn't `,
+				`provide mock data needed to debug the page outside of Keycloak as you are trying to do now.`,
+				`Please check the documentation of the getKcContext function`
+			].join("\n"));
+
+		}
+
+		const kcContext: any = { "pageId": mockPageId };
+
+		deepAssign({
+			"target": kcContext,
+			"source": kcContextCommonMock
+		});
+
+		if (kcContextDefaultMock !== undefined) {
+
+			deepAssign({
+				"target": kcContext,
+				"source": kcContextDefaultMock
+			});
+
+		}
+
+		if (partialKcContextCustomMock !== undefined) {
+
+			deepAssign({
+				"target": kcContext,
+				"source": partialKcContextCustomMock
+			});
+
+		}
+
+		return { kcContext };
+
+	}
+
+	return {
+		"kcContext":
+			typeof window === "undefined" ?
+				undefined :
+				(window as any)[ftlValuesGlobalName]
+	};
+
+}
+
+
+

src/lib/getKcContext/index.ts

@@ -0,0 +1,2 @@
+export type { KcContextBase } from "./KcContextBase";
+export { getKcContext } from "./getKcContext";

src/lib/getKcContext/kcContextMocks/index.ts

@@ -0,0 +1 @@
+export * from "./kcContextMocks";

src/lib/getKcContext/kcContextMocks/kcContextMocks.ts

@@ -0,0 +1,256 @@
+
+import type { KcContextBase } from "../KcContextBase";
+import { getEvtKcLanguage } from "../../i18n/useKcLanguageTag";
+import { getKcLanguageTagLabel } from "../../i18n/KcLanguageTag";
+//NOTE: Aside because we want to be able to import them from node
+import { resourcesCommonPath, resourcesPath } from "./urlResourcesPath";
+import { id } from "tsafe/id";
+import { join as pathJoin } from "path";
+
+const PUBLIC_URL = process.env["PUBLIC_URL"] ?? "/";
+
+export const kcContextCommonMock: KcContextBase.Common = {
+	"url": {
+		"loginAction": "#",
+		"resourcesPath": pathJoin(PUBLIC_URL, resourcesPath),
+		"resourcesCommonPath": pathJoin(PUBLIC_URL, resourcesCommonPath),
+		"loginRestartFlowUrl": "/auth/realms/myrealm/login-actions/restart?client_id=account&tab_id=HoAx28ja4xg",
+		"loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg",
+	},
+	"realm": {
+		"displayName": "myrealm",
+		"displayNameHtml": "myrealm",
+		"internationalizationEnabled": true,
+		"registrationEmailAsUsername": true,
+	},
+	"locale": {
+		"supported": [
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=de",
+				"languageTag": "de"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=no",
+				"languageTag": "no"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ru",
+				"languageTag": "ru"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sv",
+				"languageTag": "sv"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pt-BR",
+				"languageTag": "pt-BR"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=lt",
+				"languageTag": "lt"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=en",
+				"languageTag": "en"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=it",
+				"languageTag": "it"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=fr",
+				"languageTag": "fr"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=zh-CN",
+				"languageTag": "zh-CN"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=es",
+				"languageTag": "es"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=cs",
+				"languageTag": "cs"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ja",
+				"languageTag": "ja"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sk",
+				"languageTag": "sk"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pl",
+				"languageTag": "pl"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ca",
+				"languageTag": "ca"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=nl",
+				"languageTag": "nl"
+			},
+			{
+				"url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=tr",
+				"languageTag": "tr"
+			}
+		],
+		//"current": null as any
+		"current": "English"
+	},
+	"auth": {
+		"showUsername": false,
+		"showResetCredentials": false,
+		"showTryAnotherWayLink": false
+	},
+	"scripts": [],
+	"message": {
+		"type": "success",
+		"summary": "This is a test message"
+	},
+	"isAppInitiatedAction": false,
+};
+
+
+Object.defineProperty(
+	kcContextCommonMock.locale!,
+	"current",
+	{
+		"get": () => getKcLanguageTagLabel(getEvtKcLanguage().state),
+		"enumerable": true
+	}
+);
+
+const loginUrl = {
+	...kcContextCommonMock.url,
+	"loginResetCredentialsUrl": "/auth/realms/myrealm/login-actions/reset-credentials?client_id=account&tab_id=HoAx28ja4xg",
+	"registrationUrl": "/auth/realms/myrealm/login-actions/registration?client_id=account&tab_id=HoAx28ja4xg"
+};
+
+export const kcContextMocks: KcContextBase[] = [
+	id<KcContextBase.Login>({
+		...kcContextCommonMock,
+		"pageId": "login.ftl",
+		"url": loginUrl,
+		"realm": {
+			...kcContextCommonMock.realm,
+			"loginWithEmailAllowed": true,
+			"rememberMe": true,
+			"password": true,
+			"resetPasswordAllowed": true,
+			"registrationAllowed": true
+		},
+		"auth": kcContextCommonMock.auth!,
+		"social": {
+			"displayInfo": true
+		},
+		"usernameEditDisabled": false,
+		"login": {
+			"rememberMe": false
+		},
+		"registrationDisabled": false,
+
+	}),
+	id<KcContextBase.Register>({
+		...kcContextCommonMock,
+		"pageId": "register.ftl",
+		"url": {
+			...loginUrl,
+			"registrationAction": "http://localhost:8080/auth/realms/myrealm/login-actions/registration?session_code=gwZdUeO7pbYpFTRxiIxRg_QtzMbtFTKrNu6XW_f8asM&execution=12146ce0-b139-4bbd-b25b-0eccfee6577e&client_id=account&tab_id=uS8lYfebLa0"
+		},
+		"messagesPerField": {
+			"printIfExists": (...[, x]) => x
+		},
+		"scripts": [],
+		"isAppInitiatedAction": false,
+		"register": {
+			"formData": {}
+		},
+		"passwordRequired": true,
+		"recaptchaRequired": false,
+		"social": {
+			"displayInfo": true
+		},
+
+	}),
+	id<KcContextBase.Info>({
+		...kcContextCommonMock,
+		"pageId": "info.ftl",
+		"messageHeader": "<Message header>",
+		"requiredActions": undefined,
+		"skipLink": false,
+		"actionUri": "#",
+		"client": {
+			"baseUrl": "#"
+		}
+
+	}),
+	id<KcContextBase.Error>({
+		...kcContextCommonMock,
+		"pageId": "error.ftl",
+		"client": {
+			"baseUrl": "#"
+		},
+		"message": {
+			"type": "error",
+			"summary": "This is the error message"
+		}
+	}),
+	id<KcContextBase.LoginResetPassword>({
+		...kcContextCommonMock,
+		"pageId": "login-reset-password.ftl",
+		"realm": {
+			...kcContextCommonMock.realm,
+			"loginWithEmailAllowed": false
+		}
+
+	}),
+	id<KcContextBase.LoginVerifyEmail>({
+		...kcContextCommonMock,
+		"pageId": "login-verify-email.ftl"
+	}),
+	id<KcContextBase.Terms>({
+		...kcContextCommonMock,
+		"pageId": "terms.ftl"
+
+	}),
+	id<KcContextBase.LoginOtp>({
+		...kcContextCommonMock,
+		"pageId": "login-otp.ftl",
+		"otpLogin": {
+			"userOtpCredentials": [
+				{
+					"id": "id1",
+					"userLabel": "label1"
+				},
+				{
+					"id": "id2",
+					"userLabel": "label2"
+				}
+			]
+		}
+
+	}),
+	id<KcContextBase.LoginUpdateProfile>({
+		...kcContextCommonMock,
+		"pageId": "login-update-profile.ftl",
+		"user": {
+			"editUsernameAllowed": true,
+			"username": "anUsername",
+			"email": "foo@example.com",
+			"firstName": "aFirstName",
+			"lastName": "aLastName"
+		},
+		"messagesPerField": {
+			"printIfExists": () => undefined
+		}
+	}),
+	id<KcContextBase.LoginIdpLinkConfirm>({
+		...kcContextCommonMock,
+		"pageId": "login-idp-link-confirm.ftl",
+		"idpAlias": "FranceConnect"
+	})
+];

src/lib/getKcContext/kcContextMocks/urlResourcesPath.ts

@@ -0,0 +1,6 @@
+
+import { join as pathJoin } from "path";
+
+export const subDirOfPublicDirBasename = "keycloak_static";
+export const resourcesPath = pathJoin(subDirOfPublicDirBasename, "/resources");
+export const resourcesCommonPath = pathJoin(subDirOfPublicDirBasename, "/resources_common");

src/lib/i18n/KcLanguageTag.ts

@@ -1,14 +1,14 @@
 
-import { objectKeys } from "evt/tools/typeSafety/objectKeys";
-import { messages } from "./generated_messages/login";
+import { objectKeys } from "tsafe/objectKeys";
+import { kcMessages } from "./kcMessages/login";
 
-export type KcLanguageTag = keyof typeof messages;
+export type KcLanguageTag = keyof typeof kcMessages;
 
 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";
+    "Slovenčina" | "Polski" | "Català" | "Nederlands" | "Türkçe";
 /* spell-checker: enable */
 
 export function getKcLanguageTagLabel(language: KcLanguageTag): LanguageLabel {
@@ -24,16 +24,15 @@ export function getKcLanguageTagLabel(language: KcLanguageTag): LanguageLabel {
         case "no": return "Norsk";
         case "pt-BR": return "Português (Brasil)";
         case "ru": return "Русский";
-        case "sk":
-        case "sv": return "Slovenčina";
+        case "sk": return "Slovenčina";
         case "ja": return "日本語";
-        case "pl": return "Polish";
+        case "pl": return "Polski";
         case "zh-CN": return "中文简体"
         case "sv": return "Svenska";
         case "lt": return "Lietuvių";
         case "cs": return "Čeština";
         case "nl": return "Nederlands";
-        case "tr": return "tr"
+        case "tr": return "Türkçe";
         /* spell-checker: enable */
     }
 
@@ -41,7 +40,7 @@ export function getKcLanguageTagLabel(language: KcLanguageTag): LanguageLabel {
 
 }
 
-const availableLanguages = objectKeys(messages);
+const availableLanguages = objectKeys(kcMessages);
 
 /** 
  * Pass in "fr-FR" or "français" for example, it will return the AvailableLanguage

src/lib/i18n/generated_kcMessages/account.ts

@@ -2,7 +2,7 @@
 //PLEASE DO NOT EDIT MANUALLY
 
 /* spell-checker: disable */
-export const messages= {
+export const kcMessages= {
   "ca": {
     "doSave": "Desa",
     "doCancel": "Cancel·la",
@@ -3060,5 +3060,5 @@ export const messages= {
     "locale_ru": "Русский",
     "locale_zh-CN": "中文简体"
   }
-} as const;
+};
 /* spell-checker: enable */

src/lib/i18n/generated_kcMessages/admin.ts

@@ -2,7 +2,7 @@
 //PLEASE DO NOT EDIT MANUALLY
 
 /* spell-checker: disable */
-export const messages= {
+export const kcMessages= {
   "ca": {
     "invalidPasswordHistoryMessage": "Contrasenya incorrecta: no pot ser igual a cap de les últimes {0} contrasenyes.",
     "invalidPasswordMinDigitsMessage": "Contraseña incorrecta: debe contener al menos {0} caracteres numéricos.",
@@ -240,5 +240,5 @@ export const messages= {
     "pairwiseFailedToGetRedirectURIs": "无法从服务器获得重定向URL",
     "pairwiseRedirectURIsMismatch": "客户端的重定向URI与服务器端获取的URI配置不匹配。"
   }
-} as const;
+};
 /* spell-checker: enable */

src/lib/i18n/generated_kcMessages/email.ts

@@ -2,7 +2,7 @@
 //PLEASE DO NOT EDIT MANUALLY
 
 /* spell-checker: disable */
-export const messages= {
+export const kcMessages= {
   "ca": {
     "emailVerificationSubject": "Verificació d'email",
     "emailVerificationBody": "Algú ha creat un compte de {2} amb aquesta adreça de correu electrònic. Si has estat tu, fes clic a l'enllaç següent per verificar la teva adreça de correu electrònic.\n\n{0}\n\nAquest enllaç expirarà en {1} minuts.\n\nSi tu no has creat aquest compte, simplement ignora aquest missatge.",
@@ -634,5 +634,5 @@ export const messages= {
     "eventUpdateTotpBody": "您账户的OTP 配置在{0} 由 {1}更改. 如非本人操作，请联系管理员。",
     "eventUpdateTotpBodyHtml": "<p>您账户的OTP 配置在{0} 由 {1}更改. 如非本人操作，请联系管理员。</p>"
   }
-} as const;
+};
 /* spell-checker: enable */

src/lib/i18n/generated_kcMessages/login.ts

@@ -2,7 +2,7 @@
 //PLEASE DO NOT EDIT MANUALLY
 
 /* spell-checker: disable */
-export const messages= {
+export const kcMessages= {
   "ca": {
     "doLogIn": "Inicia sessió",
     "doRegister": "Registra't",
@@ -4360,5 +4360,5 @@ export const messages= {
     "invalidParameterMessage": "无效的参数 : {0}",
     "alreadyLoggedIn": "您已经登录"
   }
-} as const;
+};
 /* spell-checker: enable */

src/lib/i18n/kcMessages/login.ts

@@ -0,0 +1,33 @@
+
+import { kcMessages } from "../generated_kcMessages/login";
+import { Evt } from "evt";
+import { objectKeys } from "tsafe/objectKeys";
+
+export const evtTermsUpdated = Evt.asNonPostable(Evt.create<void>());
+
+(["termsText", "doAccept", "doDecline", "termsTitle"] as const).forEach(key =>
+    objectKeys(kcMessages).forEach(kcLanguage =>
+        Object.defineProperty(
+            kcMessages[kcLanguage],
+            key,
+            (() => {
+
+                let value = key === "termsText" ? "⏳" : kcMessages[kcLanguage][key];
+
+                return {
+                    "enumerable": true,
+                    "get": () => value,
+                    "set": (newValue: string) => {
+                        value = newValue;
+                        Evt.asPostable(evtTermsUpdated).post();
+                    }
+                };
+
+
+            })()
+        )
+    )
+);
+
+export { kcMessages };
+

src/lib/i18n/useKcLanguageTag.ts

@@ -1,13 +1,42 @@
 
 import { createUseGlobalState } from "powerhooks";
-import { kcContext } from "../kcContext";
+import { getKcContext } from "../getKcContext";
 import { getBestMatchAmongKcLanguageTag } from "./KcLanguageTag";
+import type { StatefulEvt } from "powerhooks";
+import { KcLanguageTag } from "./KcLanguageTag";
 
-export const { useKcLanguageTag } = createUseGlobalState(
+
+//export const { useKcLanguageTag, evtKcLanguageTag } = createUseGlobalState(
+const wrap = createUseGlobalState(
     "kcLanguageTag",
-    () => getBestMatchAmongKcLanguageTag(
-        kcContext?.locale?.current ??
-        navigator.language
-    ),
-    { "persistance": "cookie" }
+    () => {
+
+
+        const { kcContext } = getKcContext();
+
+        const languageLike =
+            kcContext?.locale?.current ??
+            (
+                typeof navigator === "undefined" ?
+                    undefined :
+                    navigator.language
+            );
+
+        if (languageLike === undefined) {
+            return "en";
+        }
+
+        return getBestMatchAmongKcLanguageTag(languageLike);
+
+    },
+    { "persistance": "localStorage" }
 );
+
+export const { useKcLanguageTag } = wrap;
+
+export function getEvtKcLanguage(): StatefulEvt<KcLanguageTag> {
+    return wrap.evtKcLanguageTag;
+}
+
+
+

src/lib/i18n/useKcMessage.tsx

@@ -0,0 +1,58 @@
+
+import { useCallback, useReducer } from "react";
+import { useKcLanguageTag } from "./useKcLanguageTag";
+import { kcMessages, evtTermsUpdated } from "./kcMessages/login";
+import type { ReactNode } from "react";
+import { useEvt } from "evt/hooks";
+//NOTE for later: https://github.com/remarkjs/react-markdown/blob/236182ecf30bd89c1e5a7652acaf8d0bf81e6170/src/renderers.js#L7-L35
+import ReactMarkdown from "react-markdown";
+
+export type MessageKey = keyof typeof kcMessages["en"];
+
+/** 
+ * When the language is switched the page is reloaded, this may appear
+ * as a bug as you might notice that the language successfully switch before
+ * reload.
+ * However we need to tell Keycloak that the user have changed the language
+ * during login so we can retrieve the "local" field of the JWT encoded accessToken.
+ */
+export function useKcMessage() {
+
+    const { kcLanguageTag } = useKcLanguageTag();
+
+    const [trigger, forceUpdate] = useReducer((counter: number) => counter + 1, 0);
+
+    useEvt(ctx => evtTermsUpdated.attach(ctx, forceUpdate), []);
+
+    const msgStr = useCallback(
+        (key: MessageKey, ...args: (string | undefined)[]): string => {
+
+            let str: string = kcMessages[kcLanguageTag as any as "en"][key] ?? kcMessages["en"][key];
+
+            args.forEach((arg, i) => {
+
+                if (arg === undefined) {
+                    return;
+                }
+
+                str = str.replace(new RegExp(`\\{${i}\\}`, "g"), arg);
+
+            });
+
+            return str;
+
+        },
+        [kcLanguageTag, trigger]
+    );
+
+    const msg = useCallback<(...args: Parameters<typeof msgStr>) => ReactNode>(
+        (key, ...args) =>
+            <ReactMarkdown allowDangerousHtml renderers={key === "termsText" ? undefined : { "paragraph": "span" }}>
+                {msgStr(key, ...args)}
+            </ReactMarkdown>,
+        [msgStr]
+    );
+
+    return { msg, msgStr };
+
+}

src/lib/i18n/useKcTranslation.tsx

@@ -1,43 +0,0 @@
-
-import { useKcLanguageTag } from "./useKcLanguageTag";
-import { messages } from "./generated_messages/login";
-import { useConstCallback } from "powerhooks";
-import type { ReactNode } from "react";
-import { id } from "evt/tools/typeSafety/id";
-
-export type MessageKey = keyof typeof messages["en"];
-
-export function useKcTranslation() {
-
-    const { kcLanguageTag } = useKcLanguageTag();
-
-    const tStr = useConstCallback(
-        (key: MessageKey, ...args: (string | undefined)[]): string => {
-
-            let str: string = messages[kcLanguageTag as any as "en"][key] ?? messages["en"][key];
-
-            args.forEach((arg, i) => {
-
-                if (arg === undefined) {
-                    return;
-                }
-
-                str = str.replace(new RegExp(`\\{${i}\\}`, "g"), arg);
-
-            });
-
-            return str;
-
-        }
-    );
-
-    const t = useConstCallback(
-        id<(...args: Parameters<typeof tStr>) => ReactNode>(
-            (key, ...args) =>
-                <span className={key} dangerouslySetInnerHTML={{ "__html": tStr(key, ...args) }} />
-        )
-    );
-
-    return { t, tStr };
-
-}

src/lib/index.ts

@@ -1,8 +1,9 @@
-export * from "./kcContext";
+export * from "./getKcContext";
 
 export * from "./i18n/KcLanguageTag";
 export * from "./i18n/useKcLanguageTag";
-export * from "./i18n/useKcTranslation";
+export * from "./i18n/useKcMessage";
+export * from "./i18n/kcMessages/login";
 
 export * from "./components/KcProps";
 export * from "./components/Login";
@@ -10,5 +11,9 @@ export * from "./components/Template";
 export * from "./components/KcApp";
 export * from "./components/Info";
 export * from "./components/Error";
+export * from "./components/LoginResetPassword";
+export * from "./components/LoginVerifyEmail";
+export * from "./keycloakJsAdapter";
+
+export * from "./tools/assert";
 
-export * from "./tools/assert";

src/lib/keycloakJsAdapter.ts

@@ -0,0 +1,118 @@
+
+
+export declare namespace keycloak_js {
+
+    export type KeycloakPromiseCallback<T> = (result: T) => void;
+    export class KeycloakPromise<TSuccess, TError> extends Promise<TSuccess> {
+        success(callback: KeycloakPromiseCallback<TSuccess>): KeycloakPromise<TSuccess, TError>;
+        error(callback: KeycloakPromiseCallback<TError>): KeycloakPromise<TSuccess, TError>;
+    }
+    export interface KeycloakAdapter {
+        login(options?: KeycloakLoginOptions): KeycloakPromise<void, void>;
+        logout(options?: KeycloakLogoutOptions): KeycloakPromise<void, void>;
+        register(options?: KeycloakLoginOptions): KeycloakPromise<void, void>;
+        accountManagement(): KeycloakPromise<void, void>;
+        redirectUri(options: { redirectUri: string; }, encodeHash: boolean): string;
+    }
+    export interface KeycloakLogoutOptions {
+        redirectUri?: string;
+    }
+    export interface KeycloakLoginOptions {
+        scope?: string;
+        redirectUri?: string;
+        prompt?: 'none' | 'login';
+        action?: string;
+        maxAge?: number;
+        loginHint?: string;
+        idpHint?: string;
+        locale?: string;
+        cordovaOptions?: { [optionName: string]: string };
+    }
+
+    export type KeycloakInstance = Record<
+        "createLoginUrl" |
+        "createLogoutUrl" |
+        "createRegisterUrl",
+        (options: KeycloakLoginOptions | undefined) => string
+    > & {
+        createAccountUrl(): string;
+        redirectUri?: string;
+    }
+
+}
+
+/**
+* NOTE: This is just a slightly modified version of the default adapter in keycloak-js
+* The goal here is just to be able to inject search param in url before keycloak redirect.
+* Our use case for it is to pass over the login screen the states of useGlobalState
+* namely isDarkModeEnabled, lgn... 
+*/
+export function createKeycloakAdapter(
+    params: {
+        keycloakInstance: keycloak_js.KeycloakInstance;
+        transformUrlBeforeRedirect(url: string): string;
+    }
+): keycloak_js.KeycloakAdapter {
+
+    const { keycloakInstance, transformUrlBeforeRedirect } = params;
+
+    const neverResolvingPromise: keycloak_js.KeycloakPromise<void, void> = Object.defineProperties(
+        new Promise(() => { }),
+        {
+            "success": { "value": () => { } },
+            "error": { "value": () => { } }
+        }
+    ) as any;
+
+    return {
+        "login": options => {
+            window.location.href= 
+                transformUrlBeforeRedirect(
+                    keycloakInstance.createLoginUrl(
+                        options
+                    )
+                );
+            return neverResolvingPromise;
+        },
+        "logout": options => {
+            window.location.replace(
+                transformUrlBeforeRedirect(
+                    keycloakInstance.createLogoutUrl(
+                        options
+                    )
+                )
+            );
+            return neverResolvingPromise;
+        },
+        "register": options => {
+            window.location.href =
+                transformUrlBeforeRedirect(
+                    keycloakInstance.createRegisterUrl(
+                        options
+                    )
+                );
+
+            return neverResolvingPromise;
+        },
+        "accountManagement": () => {
+            var accountUrl = transformUrlBeforeRedirect(keycloakInstance.createAccountUrl());
+            if (typeof accountUrl !== 'undefined') {
+                window.location.href = accountUrl;
+            } else {
+                throw new Error("Not supported by the OIDC server");
+            }
+            return neverResolvingPromise;
+        },
+        "redirectUri": options => {
+            if (options && options.redirectUri) {
+                return options.redirectUri;
+            } else if (keycloakInstance.redirectUri) {
+                return keycloakInstance.redirectUri;
+            } else {
+                return window.location.href;
+            }
+        }
+    };
+
+
+}

src/lib/tools/AndByDiscriminatingKey.ts

@@ -0,0 +1,35 @@
+
+export type AndByDiscriminatingKey<
+	DiscriminatingKey extends string,
+	U1 extends Record<DiscriminatingKey, string>,
+	U2 extends Record<DiscriminatingKey, string>
+	> =
+	AndByDiscriminatingKey.Tf1<DiscriminatingKey, U1, U1, U2>;
+
+export declare namespace AndByDiscriminatingKey {
+
+	export type Tf1<
+		DiscriminatingKey extends string,
+		U1,
+		U1Again extends Record<DiscriminatingKey, string>,
+		U2 extends Record<DiscriminatingKey, string>
+		> =
+		U1 extends Pick<U2, DiscriminatingKey> ?
+		Tf2<DiscriminatingKey, U1, U2, U1Again> :
+		U1;
+
+	export type Tf2<
+		DiscriminatingKey extends string,
+		SingletonU1 extends Record<DiscriminatingKey, string>,
+		U2,
+		U1 extends Record<DiscriminatingKey, string>
+		> =
+		U2 extends Pick<SingletonU1, DiscriminatingKey> ?
+		U2 & SingletonU1 :
+		U2 extends Pick<U1, DiscriminatingKey> ?
+		never :
+		U2;
+
+}
+
+

src/lib/tools/DeepPartial.ts

@@ -0,0 +1,4 @@
+
+export type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
+};

src/lib/tools/assert.ts

@@ -1,2 +1,2 @@
 
-export { assert } from "evt/tools/typeSafety/assert";
+export { assert } from "tsafe/assert";

src/lib/tools/deepAssign.ts

@@ -0,0 +1,56 @@
+
+import { assert } from "tsafe/assert";
+import { is } from "tsafe/is";
+
+export function deepAssign(
+	params: {
+		target: Record<string, unknown>;
+		source: Record<string, unknown>;
+	}
+) {
+
+	const { target, source } = params;
+
+	Object.keys(source).forEach(key => {
+		var dereferencedSource = source[key];
+
+		if (
+			target[key] === undefined ||
+			!(dereferencedSource instanceof Object)
+		) {
+
+			Object.defineProperty(
+				target,
+				key,
+				{
+					"enumerable": true,
+					"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;
+		}
+
+		assert(is<Record<string, unknown>>(dereferencedTarget));
+		assert(is<Record<string, unknown>>(dereferencedSource));
+
+		deepAssign({
+			"target": dereferencedTarget,
+			"source": dereferencedSource
+		});
+
+	});
+
+}

src/lib/tools/deepClone.ts

@@ -0,0 +1,4 @@
+
+export function deepClone<T>(arg: T): T {
+	return JSON.parse(JSON.stringify(arg));
+}

src/test/bin/generateKeycloakThemeResources.ts

@@ -1,7 +1,7 @@
 
 import { join as pathJoin } from "path";
-import { generateKeycloakThemeResources } from "../bin/build-keycloak-theme/generateKeycloakThemeResources";
-import { 
+import { generateKeycloakThemeResources } from "../../bin/build-keycloak-theme/generateKeycloakThemeResources";
+import {
     setupSampleReactProject,
     sampleReactProjectDirPath
 } from "./setupSampleReactProject";
@@ -9,8 +9,11 @@ import {
 setupSampleReactProject();
 
 generateKeycloakThemeResources({
-    "themeName": "onyxia-ui",
+    "themeName": "keycloakify-demo-app",
     "reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
-    "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme")
+    "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
+    "urlPathname": "/keycloakify-demo-app/",
+    "urlOrigin": undefined,
+    "extraPagesId": ["my-custom-page.ftl"]
 });
 

src/test/bin/index.ts

@@ -6,13 +6,14 @@ import {
 } from "./setupSampleReactProject";
 import * as st from "scripting-tools";
 import { join as pathJoin } from "path";
-import { getProjectRoot } from "../bin/tools/getProjectRoot";
+import { getProjectRoot } from "../../bin/tools/getProjectRoot";
 
 setupSampleReactProject();
 
 const binDirPath= pathJoin(getProjectRoot(), "dist", "bin");
 
 st.execSyncTrace(
+    //`node ${pathJoin(binDirPath, "build-keycloak-theme")} --external-assets`,
     `node ${pathJoin(binDirPath, "build-keycloak-theme")}`,
     { "cwd": sampleReactProjectDirPath }
 );
@@ -21,4 +22,3 @@ st.execSyncTrace(
     `node ${pathJoin(binDirPath, "install-builtin-keycloak-themes")}`,
     { "cwd": sampleReactProjectDirPath }
 );
-

src/test/bin/replaceImportFromStatic.ts

@@ -0,0 +1,67 @@
+
+import { 
+    replaceImportsFromStaticInJsCode,
+    replaceImportsInCssCode,
+    generateCssCodeToDefineGlobals
+} from "../../bin/build-keycloak-theme/replaceImportFromStatic";
+
+const { fixedJsCode } = replaceImportsFromStaticInJsCode({
+    "jsCode": `
+        function f() {
+            return a.p+"static/js/" + ({}[e] || e) + "." + {
+                3: "0664cdc0"
+            }[e] + ".chunk.js"
+        }
+
+        function f2() {
+            return a.p+"static/js/" + ({}[e] || e) + "." + {
+                3: "0664cdc0"
+            }[e] + ".chunk.js"
+        }
+    `,
+    "urlOrigin": undefined
+});
+
+const { fixedJsCode: fixedJsCodeExternal } = replaceImportsFromStaticInJsCode({
+    "jsCode": `
+        function f() {
+            return a.p+"static/js/" + ({}[e] || e) + "." + {
+                3: "0664cdc0"
+            }[e] + ".chunk.js"
+        }
+
+        function f2() {
+            return a.p+"static/js/" + ({}[e] || e) + "." + {
+                3: "0664cdc0"
+            }[e] + ".chunk.js"
+        }
+    `,
+    "urlOrigin": "https://www.example.com"
+});
+
+console.log({ fixedJsCode, fixedJsCodeExternal });
+
+const { fixedCssCode, cssGlobalsToDefine } = replaceImportsInCssCode({
+    "cssCode": `
+
+    .my-div {
+        background: url(/logo192.png) no-repeat center center;
+    }
+
+    .my-div2 {
+        background: url(/logo192.png) no-repeat center center;
+    }
+
+    .my-div {
+        background-image: url(/static/media/something.svg);
+    }
+    `
+});
+
+
+console.log({ fixedCssCode, cssGlobalsToDefine });
+
+
+const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({ cssGlobalsToDefine, "urlPathname": "/" });
+
+console.log({ cssCodeToPrependInHead });

src/test/bin/setupSampleReactProject.ts

@@ -1,7 +1,7 @@
 
-import { getProjectRoot } from "../bin/tools/getProjectRoot";
+import { getProjectRoot } from "../../bin/tools/getProjectRoot";
 import { join as pathJoin } from "path";
-import { downloadAndUnzip } from "../bin/tools/downloadAndUnzip";
+import { downloadAndUnzip } from "../../bin/tools/downloadAndUnzip";
 
 export const sampleReactProjectDirPath = pathJoin(getProjectRoot(), "sample_react_project");
 

src/test/lib/getKcContext.ts

@@ -0,0 +1,207 @@
+
+import { getKcContext } from "../../lib/getKcContext";
+import type { KcContextBase } from "../../lib/getKcContext";
+import type { ExtendsKcContextBase } from "../../lib/getKcContext/getKcContext";
+import { same } from "evt/tools/inDepth";
+import { doExtends } from "tsafe/doExtends";
+import { assert } from "tsafe/assert";
+import { kcContextMocks, kcContextCommonMock } from "../../lib/getKcContext/kcContextMocks";
+import { deepClone } from "../../lib/tools/deepClone";
+import type { Any } from "ts-toolbelt";
+
+
+const authorizedMailDomains = [
+	"example.com",
+	"another-example.com",
+	"*.yet-another-example.com",
+	"*.example.com",
+	"hello-world.com"
+];
+
+const displayName = "this is an overwritten common value";
+
+const aNonStandardValue = "a non standard value";
+
+type KcContextExtended = {
+	pageId: "register.ftl";
+	authorizedMailDomains: string[];
+} | {
+	pageId: "my-extra-page-1.ftl";
+} | {
+	pageId: "my-extra-page-2.ftl";
+	aNonStandardValue: string;
+};
+
+function getKcContextProxy(
+	params: {
+		mockPageId: ExtendsKcContextBase<KcContextExtended>["pageId"];
+	}
+) {
+
+	const { mockPageId } = params;
+
+	const { kcContext } = getKcContext<KcContextExtended>({
+		mockPageId,
+		"mockData": [
+			{
+				"pageId": "login.ftl",
+				"realm": { displayName }
+			},
+			{
+				"pageId": "register.ftl",
+				authorizedMailDomains
+			},
+			{
+				"pageId": "my-extra-page-2.ftl",
+				aNonStandardValue
+			}
+		]
+	});
+
+	return { kcContext };
+
+}
+
+{
+
+	const pageId= "login.ftl";
+
+	const { kcContext } = getKcContextProxy({ "mockPageId": pageId });
+
+	//@ts-expect-error
+	doExtends<Any.Equals<typeof kcContext, any>, 1>();
+
+	assert(kcContext?.pageId === pageId);
+
+	doExtends<typeof kcContext, KcContextBase.Login>();
+
+	assert(same(
+		//NOTE: deepClone for printIfExists or other functions...
+		deepClone(kcContext),
+		(() => {
+
+			const mock = deepClone(kcContextMocks.find(({ pageId: pageId_i }) => pageId_i === pageId)!);
+
+			mock.realm.displayName = displayName;
+
+			return mock;
+
+		})()
+	));
+
+	console.log(`PASS ${pageId}`);
+
+}
+
+{
+	const pageId = "register.ftl";
+
+	const { kcContext } = getKcContextProxy({ "mockPageId": pageId });
+
+	//@ts-expect-error
+	doExtends<Any.Equals<typeof kcContext, any>, 1>();
+
+	assert(kcContext?.pageId === pageId);
+
+	doExtends<typeof kcContext, KcContextBase.Register>();
+
+	assert(same(
+		deepClone(kcContext),
+		(() => {
+
+			const mock = deepClone(kcContextMocks.find(({ pageId: pageId_i }) => pageId_i === pageId)!);
+
+			Object.assign(mock, { authorizedMailDomains });
+
+			return mock;
+
+		})()
+	));
+
+	console.log(`PASS ${pageId}`);
+	
+}
+
+{
+
+	const pageId  = "my-extra-page-2.ftl";
+
+	const { kcContext } = getKcContextProxy({ "mockPageId": pageId });
+
+	//@ts-expect-error
+	doExtends<Any.Equals<typeof kcContext, any>, 1>();
+
+	assert(kcContext?.pageId === pageId);
+
+	//@ts-expect-error
+	doExtends<typeof kcContext, KcContextBase>();
+
+	doExtends<typeof kcContext, KcContextBase.Common>();
+
+	assert(same(
+		deepClone(kcContext),
+		(() => {
+
+			const mock = deepClone(kcContextCommonMock);
+
+			Object.assign(mock, { pageId, aNonStandardValue });
+
+			return mock;
+
+		})()
+	));
+
+	console.log(`PASS ${pageId}`);
+
+}
+
+{
+
+	const pageId  = "my-extra-page-1.ftl";
+
+	console.log("We expect a warning here =>");
+
+	const { kcContext } = getKcContextProxy({ "mockPageId": pageId });
+
+	//@ts-expect-error
+	doExtends<Any.Equals<typeof kcContext, any>, 1>();
+
+	assert(kcContext?.pageId === pageId);
+
+	//@ts-expect-error
+	doExtends<typeof kcContext, KcContextBase>();
+
+	doExtends<typeof kcContext, KcContextBase.Common>();
+
+	assert(same(
+		deepClone(kcContext),
+		(() => {
+
+			const mock = deepClone(kcContextCommonMock);
+
+			Object.assign(mock, { pageId });
+
+			return mock;
+
+		})()
+	));
+
+	console.log(`PASS ${pageId}`);
+
+}
+
+{
+	const { kcContext } = getKcContext();
+
+	//@ts-expect-error
+	doExtends<Any.Equals<typeof kcContext, any>, 1>();
+
+	doExtends<typeof kcContext, KcContextBase | undefined>();
+
+}
+
+
+
+
+
+

src/test/lib/index.ts

@@ -0,0 +1,2 @@
+
+import "./getKcContext";

src/test/lib/tools/AndByDiscriminatingKey.type.ts

@@ -0,0 +1,91 @@
+
+import { AndByDiscriminatingKey } from "../../../lib/tools/AndByDiscriminatingKey";
+import { doExtends } from "tsafe/doExtends";
+
+type Base =
+	{ pageId: "a"; onlyA: string; } |
+	{ pageId: "b"; onlyB: string; } |
+	{ pageId: "only base"; onlyBase: string; };
+
+type Extension =
+	{ pageId: "a"; onlyExtA: string; } |
+	{ pageId: "b"; onlyExtB: string; } |
+	{ pageId: "only ext"; onlyExt: string; };
+
+type Got = AndByDiscriminatingKey<"pageId", Extension, Base>;
+
+type Expected =
+	{ pageId: "a"; onlyA: string; onlyExtA: string; } |
+	{ pageId: "b"; onlyB: string; onlyExtB: string; } |
+	{ pageId: "only base"; onlyBase: string; } |
+	{ pageId: "only ext"; onlyExt: string; };
+
+doExtends<Got, Expected>();
+doExtends<Expected, Got>();
+
+const x: Got = null as any;
+
+if (x.pageId === "a") {
+
+	x.onlyA;
+	x.onlyExtA;
+
+	//@ts-expect-error
+	x.onlyB;
+
+	//@ts-expect-error
+	x.onlyBase;
+
+	//@ts-expect-error
+	x.onlyExt;
+
+}
+
+
+if (x.pageId === "b") {
+
+	x.onlyB;
+	x.onlyExtB;
+
+	//@ts-expect-error
+	x.onlyA;
+
+	//@ts-expect-error
+	x.onlyBase;
+
+	//@ts-expect-error
+	x.onlyExt;
+
+}
+
+if (x.pageId === "only base") {
+
+	x.onlyBase;
+
+	//@ts-expect-error
+	x.onlyA;
+
+	//@ts-expect-error
+	x.onlyB;
+
+	//@ts-expect-error
+	x.onlyExt;
+
+}
+
+if (x.pageId === "only ext") {
+
+	x.onlyExt;
+
+
+	//@ts-expect-error
+	x.onlyA;
+
+	//@ts-expect-error
+	x.onlyB;
+
+	//@ts-expect-error
+	x.onlyBase;
+
+}
+

src/test/replaceImportFromStatic.ts

@@ -1,50 +0,0 @@
-
-import { 
-    replaceImportFromStaticInJsCode,
-    replaceImportFromStaticInCssCode,
-    generateCssCodeToDefineGlobals
-} from "../bin/build-keycloak-theme/replaceImportFromStatic";
-
-const { fixedJsCode } = replaceImportFromStaticInJsCode({
-    "ftlValuesGlobalName": "keycloakFtlValues",
-    "jsCode": `
-        function f() {
-            return a.p + "static/js/" + ({}[e] || e) + "." + {
-                3: "0664cdc0"
-            }[e] + ".chunk.js"
-        }
-
-        function f2() {
-            return a.p +"static/js/" + ({}[e] || e) + "." + {
-                3: "0664cdc0"
-            }[e] + ".chunk.js"
-        }
-    `
-});
-
-console.log({ fixedJsCode });
-
-const { fixedCssCode, cssGlobalsToDefine } = replaceImportFromStaticInCssCode({
-    "cssCode": `
-
-    .my-div {
-        background: url(/logo192.png) no-repeat center center;
-    }
-
-    .my-div2 {
-        background: url(/logo192.png) no-repeat center center;
-    }
-
-    .my-div {
-        background-image: url(/static/media/something.svg);
-    }
-    `
-});
-
-
-console.log({ fixedCssCode, cssGlobalsToDefine });
-
-
-const { cssCodeToPrependInHead } = generateCssCodeToDefineGlobals({ cssGlobalsToDefine });
-
-console.log({ cssCodeToPrependInHead });