Update changelog v1.0.3

Instuction about how to integrate with non CRA projects
Add mention to awesome list
2021-05-23 20:22:50 +00:00 · 2021-05-23 22:19:51 +02:00 · 2021-05-15 22:41:30 +02:00 · 2021-05-01 18:05:40 +02:00 · 2021-05-01 18:04:07 +02:00 · 2021-05-01 18:03:35 +02:00
37 changed files with 1669 additions and 359 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,78 @@
+### **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    
--- a/README.md
+++ b/README.md
@ -2,95 +2,157 @@
    <img src="https://user-images.githubusercontent.com/6702424/109387840-eba11f80-7903-11eb-9050-db1dad883f78.png">  
 </p>
 <p align="center">
-    <i>🔏  Customize key cloak's pages as if they were part of your 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">
+    <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>
+    <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>

 # 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.
+
+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. 
+
+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.

 <p align="center">
-    <i>Without keycloakify:</i><br>
+    <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>
-When we redirected to Keycloak the user suffers from a harsh context switch.
-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.  

-Wouldn't it be great if we could just design the login and register pages as if they where part of our app?  
-Here is `yarn add keycloakify` for you 🍸
+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 🍸

 <p align="center">
-    <i>With keycloakify:</i><br>
-    <img src="https://github.com/InseeFrLab/keycloakify/releases/download/v0.3.8/keycloakify_after.gif">
-</p>
+    <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>  

 **TL;DR**: [Here](https://github.com/garronej/keycloakify-demo-app) is a Hello World React project with Keycloakify set up.  

+*NOTE: No autocomplete here just because it was an incognito window.*  
+
+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)
-  - [Developing your login and register pages in your React app](#developing-your-login-and-register-pages-in-your-react-app)
-    - [Just changing the look](#just-changing-the-look)
+    - [Changing just the look of the default Keycloak theme](#changing-just-the-look-of-the-default-keycloak-theme)
    - [Changing the look **and** feel](#changing-the-look-and-feel)
    - [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)
- [Requirements](#requirements)
 - [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)
-    - [Workarounds](#workarounds)
+    - [Possible workarounds](#possible-workarounds)
 - [Implement context persistence (optional)](#implement-context-persistence-optional)
- [API Reference](#api-reference)
-  - [The build tool](#the-build-tool)
+- [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)  
+
+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

+```bash
+yarn add keycloakify
+```
+
 [`package.json`](https://github.com/garronej/keycloakify-demo-app/blob/main/package.json)
 ```json
-"homepage": "https://URL.OF/YOUR-APP"
-"dependencies": {
-    "keycloakify": "^0.0.10"
-},
 "scripts": {
    "keycloak": "yarn build && build-keycloak-theme",
-},
+}
 ```
-`"homepage"` must be specified only if the url path is not `/` 
-(Onl `/YOUR-APP` matters `URL.OF` don't have to be the actual domain)

-It is mandatory that you specify the url where your app will be available
-using the `homepage` field.
+```bash
+yarn keycloak # generates keycloak-theme.jar
+```

-Once you've edited your `package.json` you can install your new
-dependency with `yarn install` and build the keycloak theme with
-`yarn keycloak`. 
+On the console will be printed all the instructions about how to load the generated theme in Keycloak

-Once the build is complete instructions about how to load
-the theme into Keycloak are printed in the console.
+### Changing just the look of the default Keycloak theme

-## Developing your login and register pages in your React app
+The first approach is to only customize the style of the default Keycloak login by providing
+your own class names.

-### Just changing the look
-
-The first approach is to only arr/replace the default class names by your
-own.
+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, 
+  kcContext
+} from "keycloakify";
+import { css } from "tss-react";

+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, 
@ -117,23 +179,43 @@ reactDom.render(
 );
 ```

-<i>result:</i>

 <p align="center">
-    <img src="https://user-images.githubusercontent.com/6702424/110261408-688d6280-7fb0-11eb-9822-7003d268b459.png">
+    <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>

 ### Changing the look **and** feel

-If you want to really re-implement the pages the best approach is to 
-create you own version of the [`<KcApp />`](https://github.com/garronej/keycloakify/blob/develop/src/lib/components/KcApp.tsx).
+If you want to really re-implement the pages, the best approach is to 
+create your own version of the [`<KcApp />`](https://github.com/garronej/keycloakify/blob/develop/src/lib/components/KcApp.tsx).
 Copy/past some of [the components](https://github.com/garronej/keycloakify/tree/develop/src/lib/components) provided by this module and start hacking around. 

+You can find an example of such customization [here](https://github.com/InseeFrLab/onyxia-ui/tree/master/src/app/components/KcApp).
+
+And you can test the result in production by trying the login register page of [Onyxia](https://datalab.sspcloud.fr)
+
+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 release might break your app.
+
 ### Hot reload

-By default, in order to see your changes you will have to wait for 
-`yarn build` to complete which can takes sevrall minute. 
-
+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, in [storybook](https://storybook.js.org/)
 for example you can use `kcContextMocks`.

@ -145,7 +227,6 @@ import {
 } from "keycloakify";

 reactDom.render(
-    kcContext !== undefined ? 
        <KcApp 
            kcContext={kcContextMocks.kcLoginContext}
            {...defaultKcProps} 
@ -154,63 +235,84 @@ reactDom.render(
 );
 ```

-then `yarn start` ...
+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)

-*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)
+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 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 you can submit an issue about it and wait for me get it implemented.  
+If you can't wait, PR are welcome! [Here](https://github.com/InseeFrLab/keycloakify/commit/0163459ad6b1ad0afcc34fae5f3cc28dbcf8b4a7) is the commit that adds support 
+for the `login-otp.ftl` page. You can use it as a model for implementing other pages.

 # GitHub Actions

-![image](https://user-images.githubusercontent.com/6702424/110708305-c44b2c00-81fa-11eb-8152-eeaaac0883d6.png)
+![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).

-# 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)  
-
-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 the Keycloak v11.
-
-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 `build/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.
+**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).
+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.  
+- 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.  

-### Workarounds  
+### Possible workarounds  

-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` 
+- 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]().  
-
-You can also [use your explicit 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).
+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)

@ -271,11 +373,12 @@ 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`.

-# API Reference 
+# Kickstart video

-## The build tool 
+*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)

-Part of the lib that runs with node, at build time.
+# Email domain whitelist

- `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)
+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.
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
    "name": "keycloakify",
-    "version": "0.3.17",
+    "version": "1.0.3",
    "description": "Keycloak theme generator for Reacts app",
    "repository": {
        "type": "git",
@ -51,10 +51,12 @@
    "dependencies": {
        "cheerio": "^1.0.0-rc.5",
        "evt": "2.0.0-beta.15",
+        "markdown": "^0.5.0",
        "minimal-polyfills": "^2.1.6",
        "path": "^0.12.7",
-        "powerhooks": "^0.0.27",
+        "powerhooks": "^0.0.36",
+        "react-markdown": "^5.0.3",
        "scripting-tools": "^0.19.13",
-        "tss-react": "^0.0.11"
+        "tss-react": "^0.0.12"
    }
 }
--- a/src/bin/build-keycloak-theme/generateFtl/common.ftl
+++ b/src/bin/build-keycloak-theme/generateFtl/common.ftl
@ -0,0 +1,263 @@
+<script>const _= 
+{
+    "url": {
+        "loginAction": (function (){
+
+            <#attempt>
+                return "${url.loginAction?no_esc}";
+            <#recover>
+            </#attempt>
+
+        })(),
+        "resourcesPath": (function (){
+
+            <#attempt>
+                return "${url.resourcesPath?no_esc}";
+            <#recover>
+            </#attempt>
+
+        })(),
+        "resourcesCommonPath": (function (){
+
+            <#attempt>
+                return "${url.resourcesCommonPath?no_esc}";
+            <#recover>
+            </#attempt>
+
+        })(),
+        "loginRestartFlowUrl": (function (){
+
+            <#attempt>
+                return "${url.loginRestartFlowUrl?no_esc}";
+            <#recover>
+            </#attempt>
+
+        })(),
+        "loginUrl": (function (){
+
+            <#attempt>
+                return "${url.loginUrl?no_esc}";
+            <#recover>
+            </#attempt>
+
+        })()
+    },
+    "realm": {
+        "displayName": (function (){
+
+            <#attempt>
+                return "${realm.displayName!''}" || undefined;
+            <#recover>
+            </#attempt>
+
+        })(),
+        "displayNameHtml": (function (){
+
+            <#attempt>
+                return "${realm.displayNameHtml!''}" || undefined;
+            <#recover>
+            </#attempt>
+
+        })(),
+        "internationalizationEnabled": (function (){
+
+            <#attempt>
+                return ${realm.internationalizationEnabled?c};
+            <#recover>
+            </#attempt>
+
+        })(),
+        "registrationEmailAsUsername": (function (){
+
+            <#attempt>
+                return ${realm.registrationEmailAsUsername?c};
+            <#recover>
+            </#attempt>
+
+        })()
+    },
+    "locale": (function (){
+
+        <#attempt>
+            <#if realm.internationalizationEnabled>
+
+                return {
+                    "supported": (function(){
+
+                        var out= [];
+
+                        <#attempt>
+                            <#list locale.supported as lng>
+                                out.push({ 
+                                    "url": (function (){
+
+                                        <#attempt>
+                                            return "${lng.url?no_esc}";
+                                        <#recover>
+                                        </#attempt>
+
+                                    })(),
+                                    "label": (function (){
+
+                                        <#attempt>
+                                            return "${lng.label}";
+                                        <#recover>
+                                        </#attempt>
+
+                                    })(),
+                                    "languageTag": (function (){
+
+                                        <#attempt>
+                                            return "${lng.languageTag}";
+                                        <#recover>
+                                        </#attempt>
+
+                                    })()
+                                });
+                            </#list>
+                        <#recover>
+                        </#attempt>
+
+                        return out;
+
+                    })(),
+                    "current": (function (){
+
+                        <#attempt>
+                            return "${locale.current}";
+                        <#recover>
+                        </#attempt>
+
+                    })()
+                };
+
+            </#if>
+        <#recover>
+        </#attempt>
+
+    })(),
+    "auth": (function (){
+
+        <#attempt>
+        <#if auth?has_content>
+
+            var out= {
+                "showUsername": (function (){
+
+                    <#attempt>
+                        return ${auth.showUsername()?c};
+                    <#recover>
+                    </#attempt>
+
+                })(),
+                "showResetCredentials": (function (){
+
+                    <#attempt>
+                        return ${auth.showResetCredentials()?c};
+                    <#recover>
+                    </#attempt>
+
+                })(),
+                "showTryAnotherWayLink": (function(){
+
+                    <#attempt>
+                        return ${auth.showTryAnotherWayLink()?c};
+                    <#recover>
+                    </#attempt>
+
+                })()
+            };
+
+            <#attempt>
+            <#if auth.showUsername() && !auth.showResetCredentials()>
+                Object.assign(
+                    out,
+                    {
+                        "attemptedUsername": (function (){
+                            <#attempt>
+                                return "${auth.attemptedUsername}";
+                            <#recover>
+                            </#attempt>
+                        })()
+                    }
+                );
+            </#if>
+            <#recover>
+            </#attempt>
+
+            return out;
+
+        </#if>
+        <#recover>
+        </#attempt>
+
+    })(),
+    "scripts": (function(){
+
+        var out = [];
+
+        <#attempt>
+            <#if scripts??>
+                <#attempt>
+                    <#list scripts as script>
+                        out.push((function (){
+
+                            <#attempt>
+                                return "${script}";
+                            <#recover>
+                            </#attempt>
+
+                        })());
+                    </#list>
+                <#recover>
+                </#attempt>
+            </#if>
+        <#recover>
+        </#attempt>
+
+        return out;
+
+    })(),
+    "message": (function (){
+
+        <#attempt>
+            <#if message?has_content>
+
+                return { 
+                    "type": (function (){
+
+                        <#attempt>
+                            return "${message.type}";
+                        <#recover>
+                        </#attempt>
+
+                    })(),
+                    "summary": (function (){
+
+                        <#attempt>
+                            return String.htmlUnescape("${message.summary}");
+                        <#recover>
+                        </#attempt>
+
+                    })()
+                };
+
+            </#if>
+        <#recover>
+        </#attempt>
+
+    })(),
+    "isAppInitiatedAction": (function (){
+
+        <#attempt>
+            <#if isAppInitiatedAction??>
+                return true;
+            </#if>
+        <#recover>
+        </#attempt>
+
+        return false;
+
+    })()
+}
+</script>
--- a/src/bin/build-keycloak-theme/generateFtl/error.ftl
+++ b/src/bin/build-keycloak-theme/generateFtl/error.ftl
@ -2,13 +2,21 @@
 {
    "client": (function (){

+        <#attempt>
            <#if client??>
                return {
-                    "baseUrl": "${(client.baseUrl!'')?no_esc}" || undefined
+                    "baseUrl": (function (){
+
+                        <#attempt>
+                            return "${(client.baseUrl!'')?no_esc}" || undefined;
+                        <#recover>
+                        </#attempt>
+
+                    })()
                };
            </#if>
-
-            return undefined;
+        <#recover>
+        </#attempt>

    })()
 }
--- a/src/bin/build-keycloak-theme/generateFtl/index.ts
+++ b/src/bin/build-keycloak-theme/generateFtl/index.ts
@ -9,8 +9,14 @@ import {
 import fs from "fs";
 import { join as pathJoin } from "path";
 import { objectKeys } from "evt/tools/typeSafety/objectKeys";
+import { ftlValuesGlobalName } from "../ftlValuesGlobalName";

-export const pageIds = ["login.ftl", "register.ftl", "info.ftl", "error.ftl", "login-reset-password.ftl", "login-verify-email.ftl"] as const;
+export const pageIds = [
+    "login.ftl", "register.ftl", "info.ftl", 
+    "error.ftl", "login-reset-password.ftl", 
+    "login-verify-email.ftl", "terms.ftl",
+    "login-otp.ftl"
+] as const;

 export type PageId = typeof pageIds[number];

@ -19,7 +25,7 @@ function loadAdjacentFile(fileBasename: string) {
        .toString("utf8");
 };

-function loadFtlFile(ftlFileBasename: PageId | "template.ftl") {
+function loadFtlFile(ftlFileBasename: PageId | "common.ftl") {
    try {

        return loadAdjacentFile(ftlFileBasename)
@ -33,22 +39,22 @@ function loadFtlFile(ftlFileBasename: PageId | "template.ftl") {

 export function generateFtlFilesCodeFactory(
    params: {
-        ftlValuesGlobalName: string;
        cssGlobalsToDefine: Record<string, string>;
        indexHtmlCode: string;
        urlPathname: string;
+        urlOrigin: undefined | string;
    }
 ) {

-    const { ftlValuesGlobalName, cssGlobalsToDefine, indexHtmlCode, urlPathname } = params;
+    const { cssGlobalsToDefine, indexHtmlCode, urlPathname, urlOrigin } = params;

    const $ = cheerio.load(indexHtmlCode);

    $("script:not([src])").each((...[, element]) => {

        const { fixedJsCode } = replaceImportsFromStaticInJsCode({
-            ftlValuesGlobalName,
-            "jsCode": $(element).html()!
+            "jsCode": $(element).html()!,
+            urlOrigin
        });

        $(element).text(fixedJsCode);
@ -59,7 +65,8 @@ export function generateFtlFilesCodeFactory(

        const { fixedCssCode } = replaceImportsInInlineCssCode({
            "cssCode": $(element).html()!,
-            "urlPathname": params.urlPathname
+            "urlPathname": params.urlPathname,
+            urlOrigin
        });

        $(element).text(fixedCssCode);
@ -80,10 +87,12 @@ export function generateFtlFilesCodeFactory(

            $(element).attr(
                attrName,
-                href.replace(
-                    new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
-                    "${url.resourcesPath}/build/"
-                )
+                urlOrigin !== undefined ?
+                    href.replace(/^\//, `${urlOrigin}/`) :
+                    href.replace(
+                        new RegExp(`^${urlPathname.replace(/\//g, "\\/")}`),
+                        "${url.resourcesPath}/build/"
+                    )
            );

        })
@ -91,7 +100,7 @@ export function generateFtlFilesCodeFactory(

    //FTL is no valid html, we can't insert with cheerio, we put placeholder for injecting later.
    const ftlCommonPlaceholders = {
-        '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }': loadFtlFile("template.ftl"),
+        '{ "x": "vIdLqMeOed9sdLdIdOxdK0d" }': loadFtlFile("common.ftl"),
        '<!-- xIdLqMeOedErIdLsPdNdI9dSlxI -->':
            [
                '<#if scripts??>',
--- a/src/bin/build-keycloak-theme/generateFtl/info.ftl
+++ b/src/bin/build-keycloak-theme/generateFtl/info.ftl
@ -1,37 +1,82 @@
 <script>const _= 
 {
-    "messageHeader": "${messageHeader!''}" || undefined,
+    "messageHeader": (function (){
+
+        <#attempt>
+            return "${messageHeader!''}" || undefined;
+        <#recover>
+        </#attempt>
+
+    })(),
    "requiredActions": (function (){

+        <#attempt>
        <#if requiredActions??>

            var out =[];

+            <#attempt>
            <#list requiredActions>
+                <#attempt>
                <#items as reqActionItem>
-                    out.push("${reqActionItem}");
-                </#items></b>
+                    out.push((function (){
+
+                        <#attempt>
+                            return "${reqActionItem}";
+                        <#recover>
+                        </#attempt>
+
+                    })());
+                </#items>
+                <#recover>
+                </#attempt>
            </#list>
+            <#recover>
+            </#attempt>

            return out;

-        <#else>
-
-        return undefined;
+        </#if>
+        <#recover>
+        </#attempt>

    })(),
    "skipLink": (function (){

+        <#attempt>
        <#if skipLink??>
            return true;
        </#if>
+        <#recover>
+        </#attempt>
        return false;

    })(),
-    "pageRedirectUri": "${(pageRedirectUri!'')?no_esc}" || undefined,
-    "actionUri": "${(actionUri!'')?no_esc}" || undefined,
+    "pageRedirectUri": (function (){
+
+        <#attempt>
+            return "${(pageRedirectUri!'')?no_esc}" || undefined;
+        <#recover>
+        </#attempt>
+
+    })(),
+    "actionUri": (function (){
+
+        <#attempt>
+            return "${(actionUri!'')?no_esc}" || undefined;
+        <#recover>
+        </#attempt>
+
+    })(),
    "client": {
-        "baseUrl": "${(client.baseUrl!'')?no_esc}" || undefined
+        "baseUrl": (function(){
+
+            <#attempt>
+                return "${(client.baseUrl!'')?no_esc}" || undefined;
+            <#recover>
+            </#attempt>
+
+        })()
    }
 }
 </script>
--- a/src/bin/build-keycloak-theme/generateFtl/login-otp.ftl
+++ b/src/bin/build-keycloak-theme/generateFtl/login-otp.ftl
@ -0,0 +1,37 @@
+<script>const _= 
+{
+    "otpLogin": {
+        "userOtpCredentials": (function(){
+
+            var out = [];
+
+            <#attempt>
+                <#list otpLogin.userOtpCredentials as otpCredential>
+                    out.push({
+                        "id": (function (){
+
+                            <#attempt>
+                                return "${otpCredential.id}";
+                            <#recover>
+                            </#attempt>
+
+                        })(),
+                        "userLabel": (function (){
+
+                            <#attempt>
+                                return "${otpCredential.userLabel}";
+                            <#recover>
+                            </#attempt>
+
+                        })()
+                    });
+                </#list>
+            <#recover>
+            </#attempt>
+
+            return out;
+
+        })()
+    }
+}
+</script>
--- a/src/bin/build-keycloak-theme/generateFtl/login-reset-password.ftl
+++ b/src/bin/build-keycloak-theme/generateFtl/login-reset-password.ftl
@ -1,7 +1,14 @@
 <script>const _= 
 {
    "realm": {
-        "loginWithEmailAllowed": ${realm.loginWithEmailAllowed?c}
-    },
+        "loginWithEmailAllowed": (function (){
+
+            <#attempt>
+                return ${realm.loginWithEmailAllowed?c};
+            <#recover>
+            </#attempt>
+
+        })()
+    }
 }
 </script>
--- a/src/bin/build-keycloak-theme/generateFtl/login.ftl
+++ b/src/bin/build-keycloak-theme/generateFtl/login.ftl
@ -1,83 +1,160 @@
 <script>const _= 
 {
    "url": {
-        "loginResetCredentialsUrl": "${url.loginResetCredentialsUrl?no_esc}",
-        "registrationUrl": "${url.registrationUrl?no_esc}"
+        "loginResetCredentialsUrl": (function (){
+            <#attempt>
+                return "${url.loginResetCredentialsUrl?no_esc}";
+            <#recover>
+            </#attempt>
+        })(),
+        "registrationUrl": (function (){
+            <#attempt>
+                return "${url.registrationUrl?no_esc}";
+            <#recover>
+            </#attempt>
+        })()
    },
    "realm": {
-        "loginWithEmailAllowed": ${realm.loginWithEmailAllowed?c},
-        "rememberMe": ${realm.rememberMe?c},
-        "password": ${realm.password?c},
-        "resetPasswordAllowed": ${realm.resetPasswordAllowed?c},
-        "registrationAllowed": ${realm.registrationAllowed?c}
+        "loginWithEmailAllowed": (function(){
+            <#attempt>
+                return ${realm.loginWithEmailAllowed?c};
+            <#recover>
+            </#attempt>
+        })(),
+        "rememberMe": (function (){
+            <#attempt>
+                return ${realm.rememberMe?c};
+            <#recover>
+            </#attempt>
+        })(),
+        "password": (function (){
+            <#attempt>
+                return ${realm.password?c};
+            <#recover>
+            </#attempt>
+        })(),
+        "resetPasswordAllowed": (function (){
+            <#attempt>
+                return ${realm.resetPasswordAllowed?c};
+            <#recover>
+            </#attempt>
+        })(),
+        "registrationAllowed": (function (){
+            <#attempt>
+                return ${realm.registrationAllowed?c};
+            <#recover>
+            </#attempt>
+        })()
    },
    "auth": (function (){

+        <#attempt>
        <#if auth?has_content>

-            var out= {
-                "selectedCredential": "${auth.selectedCredential!''}" || undefined
+            return {
+                "selectedCredential": (function (){
+                    <#attempt>
+                        return "${auth.selectedCredential!''}" || undefined;
+                    <#recover>
+                    </#attempt>
+                })()
            };

-            return out;
-
        </#if>
-
-        return undefined;
+        <#recover>
+        </#attempt>

    })(),
    "social": {
-        "displayInfo": ${social.displayInfo?c},
+        "displayInfo": (function (){
+            <#attempt>
+                return ${social.displayInfo?c};
+            <#recover>
+            </#attempt>
+        })(),
        "providers": (()=>{

+            <#attempt>
            <#if social.providers??>

                var out= [];

+                <#attempt>
                <#list social.providers as p>
                    out.push({ 
-                        "loginUrl": "${p.loginUrl?no_esc}",
-                        "alias": "${p.alias}",
-                        "providerId": "${p.providerId}",
-                        "displayName": "${p.displayName}"
+                        "loginUrl": (function (){
+                            <#attempt>
+                                return "${p.loginUrl?no_esc}";
+                            <#recover>
+                            </#attempt>
+                        })(),
+                        "alias": (function (){
+                            <#attempt>
+                                return "${p.alias}";
+                            <#recover>
+                            </#attempt>
+                        })(),
+                        "providerId": (function (){
+                            <#attempt>
+                                return "${p.providerId}";
+                            <#recover>
+                            </#attempt>
+                        })(),
+                        "displayName": (function (){
+                            <#attempt>
+                                return "${p.displayName}";
+                            <#recover>
+                            </#attempt>
+                        })()
                    });
                </#list>
+                <#recover>
+                </#attempt>

                return out;

            </#if>
-
-            return undefined;
+            <#recover>
+            </#attempt>

        })()
    },
    "usernameEditDisabled": (function () {

+        <#attempt>
        <#if usernameEditDisabled??>
            return true;
        </#if>
+        <#recover>
+        </#attempt>
        return false;

    })(),
    "login": {
-        "username": "${login.username!''}" || undefined,
+        "username": (function (){
+            <#attempt>
+                return "${login.username!''}" || undefined;
+            <#recover>
+            </#attempt>
+        })(),
        "rememberMe": (function (){
-
+            <#attempt>
            <#if login.rememberMe??>
                return true;
            </#if>
+            <#recover>
+            </#attempt>
            return false;
-
-
        })()
    },
    "registrationDisabled": (function (){
-
+        <#attempt>
        <#if registrationDisabled??>
            return true;
        </#if>
+        <#recover>
+        </#attempt>
        return false;
-
    })()
 }
 </script>
--- a/src/bin/build-keycloak-theme/generateFtl/register.ftl
+++ b/src/bin/build-keycloak-theme/generateFtl/register.ftl
@ -1,46 +1,189 @@
 <script>const _= 
 {
    "url": {
-        "registrationAction": "${url.registrationAction?no_esc}"
+        "registrationAction": (function (){
+
+            <#attempt>
+                return "${url.registrationAction?no_esc}";
+            <#recover>
+            </#attempt>
+
+        })()
    },
    "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;
+                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>
+
+                })();
            }
        }
    },
    "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
+            "firstName": (function (){
+
+                <#attempt>
+                    return "${register.formData.firstName!''}" || undefined;
+                <#recover>
+                </#attempt>
+
+            })(),
+            "displayName": (function (){
+
+                <#attempt>
+                    return "${register.formData.displayName!''}" || undefined;
+                <#recover>
+                </#attempt>
+
+            })(),
+            "lastName": (function (){
+
+                <#attempt>
+                    return "${register.formData.lastName!''}" || undefined;
+                <#recover>
+                </#attempt>
+
+            })(),
+            "email": (function(){
+
+                <#attempt>
+                    return "${register.formData.email!''}" || undefined;
+                <#recover>
+                </#attempt>
+
+            })(),
+            "username": (function (){
+
+                <#attempt>
+                    return "${register.formData.username!''}" || undefined;
+                <#recover>
+                </#attempt>
+
+            })()
        }
    },
    "passwordRequired": (function (){

+        <#attempt>
        <#if passwordRequired??>
            return true;
        </#if>
+        <#recover>
+        </#attempt>
+
        return false;

    })(),
    "recaptchaRequired": (function (){

+        <#attempt>
        <#if passwordRequired??>
            return true;
        </#if>
+        <#recover>
+        </#attempt>
+
        return false;

    })(),
-    "recaptchaSiteKey": "${recaptchaSiteKey!''}" || undefined
+    "recaptchaSiteKey": (function (){
+
+        <#attempt>
+            return "${recaptchaSiteKey!''}" || undefined;
+        <#recover>
+        </#attempt>
+
+    })(),
+    "authorizedMailDomains": (function (){
+
+        <#attempt>
+            return "${authorizedMailDomains!''}" || undefined;
+        <#recover>
+        </#attempt>
+
+    })(),
+    "authorizedMailDomains": (function(){
+
+        var out = undefined;
+
+        <#attempt>
+            <#if authorizedMailDomains??>
+
+                out = [];
+
+                <#attempt>
+                    <#list authorizedMailDomains as authorizedMailDomain>
+                        out.push((function (){
+
+                            <#attempt>
+                                return "${authorizedMailDomain}";
+                            <#recover>
+                            </#attempt>
+
+                        })());
+                    </#list>
+                <#recover>
+                </#attempt>
+            </#if>
+        <#recover>
+        </#attempt>
+
+        return out;
+
+    })(),
 }
 </script>
--- a/src/bin/build-keycloak-theme/generateFtl/template.ftl
+++ b/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>
--- a/src/bin/build-keycloak-theme/generateJavaStackFiles.ts
+++ b/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";

            })();
--- a/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts
+++ b/src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts
@ -10,7 +10,6 @@ import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
 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/kcContextMocks/urlResourcesPath";
 import { isInside } from "../tools/isInside";

@ -21,22 +20,28 @@ export function generateKeycloakThemeResources(
        reactAppBuildDirPath: string;
        keycloakThemeBuildingDirPath: string;
        urlPathname: string;
+        //If urlOrigin is not undefined then it means --externals-assets
+        urlOrigin: undefined | string;
    }
 ) {

-    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, urlPathname } = params;
+    const { themeName, reactAppBuildDirPath, keycloakThemeBuildingDirPath, urlPathname, urlOrigin } = 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 }) => {

            //NOTE: Prevent cycles, excludes the folder we generated for debug in public/
            if (
+                urlOrigin === undefined &&
                isInside({
                    "dirPath": pathJoin(reactAppBuildDirPath, subDirOfPublicDirBasename),
                    filePath
@ -45,8 +50,7 @@ export function generateKeycloakThemeResources(
                return undefined;
            }

-
-            if (/\.css?$/i.test(filePath)) {
+            if (urlOrigin === undefined && /\.css?$/i.test(filePath)) {

                const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode(
                    { "cssCode": sourceCode.toString("utf8") }
@ -61,36 +65,39 @@ export function generateKeycloakThemeResources(

            }

-
            if (/\.js?$/i.test(filePath)) {

                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"),
-        urlPathname
+        urlPathname,
+        urlOrigin
    });

    pageIds.forEach(pageId => {

        const { ftlCode } = generateFtlFilesCode({ pageId });

+        fs.mkdirSync(themeDirPath, { "recursive": true });
+
        fs.writeFileSync(
            pathJoin(themeDirPath, pageId),
            Buffer.from(ftlCode, "utf8")
--- a/src/bin/build-keycloak-theme/index.ts
+++ b/src/bin/build-keycloak-theme/index.ts
@ -11,6 +11,8 @@ 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");
@ -24,7 +26,7 @@ if (require.main === module) {
        keycloakThemeBuildingDirPath,
        "reactAppBuildDirPath": pathJoin(reactProjectDirPath, "build"),
        "themeName": parsedPackageJson.name,
-        "urlPathname": (() => {
+        ...(() => {

            const url = (() => {

@ -36,10 +38,23 @@ if (require.main === module) {

            })();

-            return url === undefined ?
-                "/" :
-                url.pathname.replace(/([^/])$/, "$1/");
+            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;
+
+                })()
+
+            };

        })()
    });
--- a/src/bin/build-keycloak-theme/replaceImportFromStatic.ts
+++ b/src/bin/build-keycloak-theme/replaceImportFromStatic.ts
@ -1,18 +1,22 @@

 import * as crypto from "crypto";
+import { ftlValuesGlobalName } from "./ftlValuesGlobalName";

 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(
-        /[a-z]+\.[a-z]+\+"static\//g,
-        `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/`
+        /([a-z]+\.[a-z]+)\+"static\//g,
+        (...[, group]) =>
+            urlOrigin === undefined ?
+                `window.${ftlValuesGlobalName}.url.resourcesPath + "/build/static/` :
+                `("${ftlValuesGlobalName}" in window ? "${urlOrigin}" : "") + ${group} + "static/`
    );

    return { fixedJsCode };
@ -23,16 +27,19 @@ export function replaceImportsInInlineCssCode(
    params: {
        cssCode: string;
        urlPathname: string;
+        urlOrigin: undefined | string;
    }
 ): { fixedCssCode: string; } {

-    const { cssCode, urlPathname } = params;
+    const { cssCode, urlPathname, urlOrigin } = params;

    const fixedCssCode = cssCode.replace(
        urlPathname === "/" ?
            /url\(\/([^/][^)]+)\)/g :
            new RegExp(`url\\(${urlPathname}([^)]+)\\)`, "g"),
-        (...[, group]) => `url(${"${url.resourcesPath}/build/" + group})`
+        (...[, group]) => `url(${urlOrigin === undefined ?
+            "${url.resourcesPath}/build/" + group :
+            params.urlOrigin + urlPathname + group})`
    );

    return { fixedCssCode };
--- a/src/bin/generate-i18n-messages.ts
+++ b/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")
    );
--- a/src/bin/install-builtin-keycloak-themes.ts
+++ b/src/bin/install-builtin-keycloak-themes.ts
@ -5,7 +5,7 @@ import { downloadAndUnzip } from "./tools/downloadAndUnzip";
 import { join as pathJoin } from "path";

 export const builtinThemesUrl =
-    "https://github.com/garronej/keycloakify/releases/download/v0.0.1/keycloak_11.0.3_builtin_themes.zip";
+    "https://github.com/garronej/keycloakify/releases/download/v0.0.1/keycloak_11.0.3_builtin_themes_with_light_mods.zip";

 if (require.main === module) {

--- a/src/lib/components/Info.tsx
+++ b/src/lib/components/Info.tsx
@ -53,13 +53,13 @@ export const Info = memo(({ kcContext, ...props }: { kcContext: KcContext.Info;
                    {
                        !skipLink &&
                            pageRedirectUri !== undefined ?
-                            <p><a href="${pageRedirectUri}">${(msg("backToApplication"))}</a></p>
+                            <p><a href={pageRedirectUri}>{(msg("backToApplication"))}</a></p>
                            :
                            actionUri !== undefined ?
-                                <p><a href="${actionUri}">${msg("proceedWithAction")}</a></p>
+                                <p><a href={actionUri}>{msg("proceedWithAction")}</a></p>
                                :
                                client.baseUrl !== undefined &&
-                                <p><a href="${client.baseUrl}">${msg("backToApplication")}</a></p>
+                                <p><a href={client.baseUrl}>{msg("backToApplication")}</a></p>
                    }
                </div>

--- a/src/lib/components/KcApp.tsx
+++ b/src/lib/components/KcApp.tsx
@ -8,6 +8,8 @@ import { Info } from "./Info";
 import { Error } from "./Error";
 import { LoginResetPassword } from "./LoginResetPassword";
 import { LoginVerifyEmail } from "./LoginVerifyEmail";
+import { Terms } from "./Terms";
+import { LoginOtp } from "./LoginOtp";

 export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContext; } & KcProps ) => {
    switch (kcContext.pageId) {
@ -17,5 +19,7 @@ export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContext; } &
        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 }}/>;
    }
 });
--- a/src/lib/components/LoginOtp.tsx
+++ b/src/lib/components/LoginOtp.tsx
@ -0,0 +1,145 @@
+
+
+import { useEffect, memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContext } from "../KcContext";
+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: KcContext.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 }}
+            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();
+        }
+    });
+
+}
--- a/src/lib/components/Template.tsx
+++ b/src/lib/components/Template.tsx
@ -25,7 +25,7 @@ export type TemplateProps = {
    showUsernameNode?: ReactNode;
    formNode: ReactNode;
    infoNode?: ReactNode;
-} & { kcContext: KcContext.Template; } & KcTemplateProps;
+} & { kcContext: KcContext; } & KcTemplateProps;

 export const Template = memo((props: TemplateProps) => {

--- a/src/lib/components/Terms.tsx
+++ b/src/lib/components/Terms.tsx
@ -0,0 +1,57 @@
+import { memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContext } from "../KcContext";
+import { useKcMessage } from "../i18n/useKcMessage";
+import { cx } from "tss-react";
+
+export const Terms = memo(({ kcContext, ...props }: { kcContext: KcContext.Terms; } & KcProps) => {
+
+    const { msg, msgStr } = useKcMessage();
+
+    const { url } = kcContext;
+
+    return (
+        <Template
+            {...{ kcContext, ...props }}
+            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" />
+                </>
+            }
+        />
+    );
+});
+
+
--- a/src/lib/i18n/KcLanguageTag.ts
+++ b/src/lib/i18n/KcLanguageTag.ts
@ -1,8 +1,8 @@

 import { objectKeys } from "evt/tools/typeSafety/objectKeys";
-import { messages } from "./generated_messages/login";
+import { kcMessages } from "./kcMessages/login";

-export type KcLanguageTag = keyof typeof messages;
+export type KcLanguageTag = keyof typeof kcMessages;

 export type LanguageLabel =
    /* spell-checker: disable */
@ -40,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
--- a/src/lib/i18n/generated_kcMessages/account.ts
+++ b/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 */
--- a/src/lib/i18n/generated_kcMessages/admin.ts
+++ b/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 */
--- a/src/lib/i18n/generated_kcMessages/email.ts
+++ b/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 */
--- a/src/lib/i18n/generated_kcMessages/login.ts
+++ b/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 */
--- a/src/lib/i18n/kcMessages/login.ts
+++ b/src/lib/i18n/kcMessages/login.ts
@ -0,0 +1,33 @@
+
+import { kcMessages } from "../generated_kcMessages/login";
+import { Evt } from "evt";
+import { objectKeys } from "evt/tools/typeSafety/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 };
+
--- a/src/lib/i18n/useKcMessage.tsx
+++ b/src/lib/i18n/useKcMessage.tsx
@ -1,20 +1,26 @@

+import { useCallback, useReducer } from "react";
 import { useKcLanguageTag } from "./useKcLanguageTag";
-import { messages } from "./generated_messages/login";
-import { useConstCallback } from "powerhooks";
+import { kcMessages, evtTermsUpdated } from "./kcMessages/login";
 import type { ReactNode } from "react";
-import { id } from "evt/tools/typeSafety/id";
+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 messages["en"];
+export type MessageKey = keyof typeof kcMessages["en"];

 export function useKcMessage() {

    const { kcLanguageTag } = useKcLanguageTag();

-    const msgStr = useConstCallback(
+    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 = messages[kcLanguageTag as any as "en"][key] ?? messages["en"][key];
+            let str: string = kcMessages[kcLanguageTag as any as "en"][key] ?? kcMessages["en"][key];

            args.forEach((arg, i) => {

@ -28,14 +34,16 @@ export function useKcMessage() {

            return str;

-        }
+        },
+        [kcLanguageTag, trigger]
    );

-    const msg = useConstCallback(
-        id<(...args: Parameters<typeof msgStr>) => ReactNode>(
-            (key, ...args) =>
-                <span className={key} dangerouslySetInnerHTML={{ "__html": msgStr(key, ...args) }} />
-        )
+    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 };
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@ -3,6 +3,7 @@ export * from "./KcContext";
 export * from "./i18n/KcLanguageTag";
 export * from "./i18n/useKcLanguageTag";
 export * from "./i18n/useKcMessage";
+export * from "./i18n/kcMessages/login";

 export * from "./components/KcProps";
 export * from "./components/Login";
@ -16,4 +17,5 @@ export * from "./keycloakJsAdapter";

 export * from "./tools/assert";

+
 export * as kcContextMocks from "./kcContextMocks";
--- a/src/lib/kcContext.ts
+++ b/src/lib/kcContext.ts
@ -10,12 +10,18 @@ import type { LanguageLabel } from "./i18n/KcLanguageTag";
 type ExtractAfterStartingWith<Prefix extends string, StrEnum> =
    StrEnum extends `${Prefix}${infer U}` ? U : never;

+/** 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 KcContext =
    KcContext.Login | KcContext.Register | KcContext.Info |
-    KcContext.Error | KcContext.LoginResetPassword | KcContext.LoginVerifyEmail;
+    KcContext.Error | KcContext.LoginResetPassword | KcContext.LoginVerifyEmail |
+    KcContext.Terms | KcContext.LoginOtp;
+
 export declare namespace KcContext {

-    export type Template = {
+    export type Common = {
        url: {
            loginAction: string;
            resourcesPath: string;
@ -27,7 +33,7 @@ export declare namespace KcContext {
            displayName?: string;
            displayNameHtml?: string;
            internationalizationEnabled: boolean;
-            registrationEmailAsUsername: boolean; //<---
+            registrationEmailAsUsername: boolean;
        };
        /** Undefined if !realm.internationalizationEnabled */
        locale?: {
@ -55,7 +61,7 @@ export declare namespace KcContext {
        isAppInitiatedAction: boolean;
    };

-    export type Login = Template & {
+    export type Login = Common & {
        pageId: "login.ftl";
        url: {
            loginResetCredentialsUrl: string;
@ -88,7 +94,7 @@ export declare namespace KcContext {
        };
    };

-    export type Register = Template & {
+    export type Register = Common & {
        pageId: "register.ftl";
        url: {
            registrationAction: string;
@ -118,9 +124,14 @@ export declare namespace KcContext {
        passwordRequired: boolean;
        recaptchaRequired: boolean;
        recaptchaSiteKey?: string;
+        /** 
+         * Defined when you use the keycloak-mail-whitelisting keycloak plugin
+         * (https://github.com/micedre/keycloak-mail-whitelisting)
+         */
+        authorizedMailDomains?: string[];
    };

-    export type Info = Template & {
+    export type Info = Common & {
        pageId: "info.ftl";
        messageHeader?: string;
        requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKey>[];
@ -132,24 +143,35 @@ export declare namespace KcContext {
        }
    };

-    export type Error = Template & {
+    export type Error = Common & {
        pageId: "error.ftl";
        client?: {
            baseUrl?: string;
        }
    };

-    export type LoginResetPassword = Template & {
+    export type LoginResetPassword = Common & {
        pageId: "login-reset-password.ftl";
        realm: {
            loginWithEmailAllowed: boolean;
        }
    };

-    export type LoginVerifyEmail = Template & {
+    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; }[];
+        }
+    };
+
 }

 doExtends<KcContext["pageId"], PageId>();
--- a/src/lib/kcContextMocks/index.ts
+++ b/src/lib/kcContextMocks/index.ts
@ -6,7 +6,7 @@ import { getKcLanguageTagLabel } from "../i18n/KcLanguageTag";
 //NOTE: Aside because we want to be able to import them from node
 import { resourcesCommonPath, resourcesPath } from "./urlResourcesPath";

-export const kcTemplateContext: KcContext.Template = {
+const kcCommonContext: KcContext.Common = {
    "url": {
        "loginAction": "#",
        "resourcesPath": `${process.env["PUBLIC_URL"]}/${resourcesPath}`,
@ -111,7 +111,7 @@ export const kcTemplateContext: KcContext.Template = {
 };

 Object.defineProperty(
-    kcTemplateContext.locale!,
+    kcCommonContext.locale!,
    "current",
    {
        "get": () => getKcLanguageTagLabel(getEvtKcLanguage().state),
@ -120,22 +120,22 @@ Object.defineProperty(
 );

 export const kcLoginContext: KcContext.Login = {
-    ...kcTemplateContext,
+    ...kcCommonContext,
    "pageId": "login.ftl",
    "url": {
-        ...kcTemplateContext.url,
+        ...kcCommonContext.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"
    },
    "realm": {
-        ...kcTemplateContext.realm,
+        ...kcCommonContext.realm,
        "loginWithEmailAllowed": true,
        "rememberMe": true,
        "password": true,
        "resetPasswordAllowed": true,
        "registrationAllowed": true
    },
-    "auth": kcTemplateContext.auth!,
+    "auth": kcCommonContext.auth!,
    "social": {
        "displayInfo": true
    },
@ -147,13 +147,13 @@ export const kcLoginContext: KcContext.Login = {
 };

 export const kcRegisterContext: KcContext.Register = {
-    ...kcTemplateContext,
+    ...kcCommonContext,
    "url": {
        ...kcLoginContext.url,
        "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
+        "printIfExists": (...[, x]) => x
    },
    "scripts": [],
    "isAppInitiatedAction": false,
@ -162,11 +162,18 @@ export const kcRegisterContext: KcContext.Register = {
        "formData": {}
    },
    "passwordRequired": true,
-    "recaptchaRequired": false
+    "recaptchaRequired": false,
+    "authorizedMailDomains": [
+        "example.com",
+        "another-example.com",
+        "*.yet-another-example.com",
+        "*.example.com",
+        "hello-world.com"
+    ]
 };

-export const kcInfoContext: KcContext.Info ={
-    ...kcTemplateContext,
+export const kcInfoContext: KcContext.Info = {
+    ...kcCommonContext,
    "pageId": "info.ftl",
    "messageHeader": "<Message header>",
    "requiredActions": undefined,
@ -178,7 +185,7 @@ export const kcInfoContext: KcContext.Info ={
 };

 export const kcErrorContext: KcContext.Error = {
-    ...kcTemplateContext,
+    ...kcCommonContext,
    "pageId": "error.ftl",
    "client": {
        "baseUrl": "#"
@ -186,16 +193,38 @@ export const kcErrorContext: KcContext.Error = {
 };

 export const kcLoginResetPasswordContext: KcContext.LoginResetPassword = {
-    ...kcTemplateContext,
+    ...kcCommonContext,
    "pageId": "login-reset-password.ftl",
-    "realm":{
-        ...kcTemplateContext.realm,
+    "realm": {
+        ...kcCommonContext.realm,
        "loginWithEmailAllowed": false
    }
 };

 export const kcLoginVerifyEmailContext: KcContext.LoginVerifyEmail = {
-    ...kcTemplateContext,
+    ...kcCommonContext,
    "pageId": "login-verify-email.ftl"
 };

+export const kcTermsContext: KcContext.Terms = {
+    ...kcCommonContext,
+    "pageId": "terms.ftl"
+};
+
+export const kcLoginOtpContext: KcContext.LoginOtp = {
+    ...kcCommonContext,
+    "pageId": "login-otp.ftl",
+    "otpLogin": {
+        "userOtpCredentials": [
+            {
+                "id": "id1",
+                "userLabel": "label1"
+            },
+            {
+                "id": "id2",
+                "userLabel": "label2"
+            }
+        ]
+    }
+};
+
--- a/src/test/generateKeycloakThemeResources.ts
+++ b/src/test/generateKeycloakThemeResources.ts
@ -12,6 +12,7 @@ generateKeycloakThemeResources({
    "themeName": "keycloakify-demo-app",
    "reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
    "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
-    "urlPathname": "/keycloakify-demo-app/"
+    "urlPathname": "/keycloakify-demo-app/",
+    "urlOrigin": undefined
 });

--- a/src/test/index.ts
+++ b/src/test/index.ts
@ -13,6 +13,7 @@ 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 }
 );
-
--- a/src/test/replaceImportFromStatic.ts
+++ b/src/test/replaceImportFromStatic.ts
@ -6,23 +6,40 @@ import {
 } from "../bin/build-keycloak-theme/replaceImportFromStatic";

 const { fixedJsCode } = replaceImportsFromStaticInJsCode({
-    "ftlValuesGlobalName": "keycloakFtlValues",
    "jsCode": `
        function f() {
-            return a.p + "static/js/" + ({}[e] || e) + "." + {
+            return a.p+"static/js/" + ({}[e] || e) + "." + {
                3: "0664cdc0"
            }[e] + ".chunk.js"
        }

        function f2() {
-            return a.p +"static/js/" + ({}[e] || e) + "." + {
+            return a.p+"static/js/" + ({}[e] || e) + "." + {
                3: "0664cdc0"
            }[e] + ".chunk.js"
        }
-    `
+    `,
+    "urlOrigin": undefined
 });

-console.log({ fixedJsCode });
+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": `
--- a/yarn.lock
+++ b/yarn.lock
@ -139,6 +139,13 @@
  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==

+"@types/mdast@^3.0.0", "@types/mdast@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb"
+  integrity sha512-SXPBMnFVQg1s00dlMCc/jCdvPqdE4mXaMMCeRlxLDmTAEoegHT53xKtkDnzDTOcmMHUfcjyf36/YYZ6SxRdnsw==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/node@^10.0.0":
  version "10.17.55"
  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.55.tgz#a147f282edec679b894d4694edb5abeb595fecbd"
@ -168,6 +175,16 @@
  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.1.tgz#18845205e86ff0038517aab7a18a62a6b9f71275"
  integrity sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==

+"@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
+  integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
+
+abbrev@1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
+  integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
+
 ansi-regex@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
@ -196,6 +213,11 @@ babel-plugin-macros@^2.6.1:
    cosmiconfig "^6.0.0"
    resolve "^1.12.0"

+bail@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
+  integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
+
 balanced-match@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@ -228,6 +250,21 @@ chalk@^2.0.0:
    escape-string-regexp "^1.0.5"
    supports-color "^5.3.0"

+character-entities-legacy@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz#94bc1845dce70a5bb9d2ecc748725661293d8fc1"
+  integrity sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==
+
+character-entities@^1.0.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
+  integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
+
+character-reference-invalid@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
+  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
+
 cheerio-select-tmp@^0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/cheerio-select-tmp/-/cheerio-select-tmp-0.1.1.tgz#55bbef02a4771710195ad736d5e346763ca4e646"
@ -355,6 +392,13 @@ d@1, d@^1.0.1:
    es5-ext "^0.10.50"
    type "^1.0.1"

+debug@^4.0.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
+  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
+  dependencies:
+    ms "2.1.2"
+
 dom-serializer@^1.0.1, dom-serializer@~1.2.0:
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.2.0.tgz#3433d9136aeb3c627981daa385fc7f32d27c48f1"
@ -369,6 +413,18 @@ domelementtype@^2.0.1, domelementtype@^2.1.0:
  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.1.0.tgz#a851c080a6d1c3d94344aed151d99f669edf585e"
  integrity sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==

+domelementtype@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
+domhandler@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-3.3.0.tgz#6db7ea46e4617eb15cf875df68b2b8524ce0037a"
+  integrity sha512-J1C5rIANUbuYK+FuFL98650rihynUOEzRLxW+90bKZRWB6A1X1Tf82GxR1qAWLyfNPRvjqfip3Q5tdYlmAa9lA==
+  dependencies:
+    domelementtype "^2.0.1"
+
 domhandler@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.0.0.tgz#01ea7821de996d85f69029e81fa873c21833098e"
@ -376,6 +432,22 @@ domhandler@^4.0.0:
  dependencies:
    domelementtype "^2.1.0"

+domhandler@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.1.0.tgz#c1d8d494d5ec6db22de99e46a149c2a4d23ddd43"
+  integrity sha512-/6/kmsGlMY4Tup/nGVutdrK9yQi4YjWVcVeoQmixpzjOUK1U7pQkvAPHBJeUxOgxF0J8f8lwCJSlCfD0V4CMGQ==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.4.2:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.5.2.tgz#37ef8ba087dff1a17175e7092e8a042e4b050e6c"
+  integrity sha512-MHTthCb1zj8f1GVfRpeZUbohQf/HdBos0oX5gZcQFepOZPLLRyj6Wn7XS7EMnY7CVpwv8863u2vyE83Hfu28HQ==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.1.0"
+
 domutils@^2.4.3, domutils@^2.4.4:
  version "2.5.0"
  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.5.0.tgz#42f49cffdabb92ad243278b331fd761c1c2d3039"
@ -481,6 +553,11 @@ ext@^1.1.2:
  dependencies:
    type "^2.0.0"

+extend@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
+  integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
+
 find-root@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
@ -525,6 +602,26 @@ has@^1.0.3:
  dependencies:
    function-bind "^1.1.1"

+html-to-react@^1.3.4:
+  version "1.4.5"
+  resolved "https://registry.yarnpkg.com/html-to-react/-/html-to-react-1.4.5.tgz#59091c11021d1ef315ef738460abb6a4a41fe1ce"
+  integrity sha512-KONZUDFPg5OodWaQu2ymfkDmU0JA7zB1iPfvyHehTmMUZnk0DS7/TyCMTzsLH6b4BvxX15g88qZCXFhJWktsmA==
+  dependencies:
+    domhandler "^3.3.0"
+    htmlparser2 "^5.0"
+    lodash.camelcase "^4.3.0"
+    ramda "^0.27.1"
+
+htmlparser2@^5.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-5.0.1.tgz#7daa6fc3e35d6107ac95a4fc08781f091664f6e7"
+  integrity sha512-vKZZra6CSe9qsJzh0BjBGXo8dvzNsq/oGvsjfRdOrrryfeD9UOBEEQdeoqCRmKZchF5h2zOBMQ6YuQ0uRUmdbQ==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^3.3.0"
+    domutils "^2.4.2"
+    entities "^2.0.0"
+
 htmlparser2@^6.0.0:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.0.1.tgz#422521231ef6d42e56bd411da8ba40aa36e91446"
@ -561,11 +658,29 @@ inherits@2.0.3:
  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=

+is-alphabetical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
+  integrity sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==
+
+is-alphanumerical@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz#7eb9a2431f855f6b1ef1a78e326df515696c4dbf"
+  integrity sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==
+  dependencies:
+    is-alphabetical "^1.0.0"
+    is-decimal "^1.0.0"
+
 is-arrayish@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
  integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=

+is-buffer@^2.0.0:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.5.tgz#ebc252e400d22ff8d77fa09888821a24a658c191"
+  integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+
 is-core-module@^2.2.0:
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.2.0.tgz#97037ef3d52224d85163f5597b2b63d9afed981a"
@ -573,11 +688,26 @@ is-core-module@^2.2.0:
  dependencies:
    has "^1.0.3"

+is-decimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.4.tgz#65a3a5958a1c5b63a706e1b333d7cd9f630d3fa5"
+  integrity sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==
+
 is-fullwidth-code-point@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==

+is-hexadecimal@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
+  integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
+
+is-plain-obj@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
 is-promise@^2.2.2:
  version "2.2.2"
  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
@ -608,12 +738,17 @@ lines-and-columns@^1.1.6:
  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=

+lodash.camelcase@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
+  integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY=
+
 lodash@^4.17.19:
  version "4.17.21"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==

-loose-envify@^1.1.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@ -627,6 +762,36 @@ lru-queue@^0.1.0:
  dependencies:
    es5-ext "~0.10.2"

+markdown@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/markdown/-/markdown-0.5.0.tgz#28205b565a8ae7592de207463d6637dc182722b2"
+  integrity sha1-KCBbVlqK51kt4gdGPWY33BgnIrI=
+  dependencies:
+    nopt "~2.1.1"
+
+mdast-add-list-metadata@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mdast-add-list-metadata/-/mdast-add-list-metadata-1.0.1.tgz#95e73640ce2fc1fa2dcb7ec443d09e2bfe7db4cf"
+  integrity sha512-fB/VP4MJ0LaRsog7hGPxgOrSL3gE/2uEdZyDuSEnKCv/8IkYHiDkIQSbChiJoHyxZZXZ9bzckyRk+vNxFzh8rA==
+  dependencies:
+    unist-util-visit-parents "1.1.2"
+
+mdast-util-from-markdown@^0.8.0:
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz#d1ef2ca42bc377ecb0463a987910dae89bd9a28c"
+  integrity sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-to-string "^2.0.0"
+    micromark "~2.11.0"
+    parse-entities "^2.0.0"
+    unist-util-stringify-position "^2.0.0"
+
+mdast-util-to-string@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz#b8cfe6a713e1091cb5b728fc48885a4767f8b97b"
+  integrity sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==
+
 memoizee@^0.4.15:
  version "0.4.15"
  resolved "https://registry.yarnpkg.com/memoizee/-/memoizee-0.4.15.tgz#e6f3d2da863f318d02225391829a6c5956555b72"
@ -641,6 +806,14 @@ memoizee@^0.4.15:
    next-tick "^1.1.0"
    timers-ext "^0.1.7"

+micromark@~2.11.0:
+  version "2.11.4"
+  resolved "https://registry.yarnpkg.com/micromark/-/micromark-2.11.4.tgz#d13436138eea826383e822449c9a5c50ee44665a"
+  integrity sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA==
+  dependencies:
+    debug "^4.0.0"
+    parse-entities "^2.0.0"
+
 minimal-polyfills@^2.1.5, minimal-polyfills@^2.1.6:
  version "2.1.6"
  resolved "https://registry.yarnpkg.com/minimal-polyfills/-/minimal-polyfills-2.1.6.tgz#eab50832add31afd40a22b38fb76d1fdcd2a51e4"
@ -658,6 +831,11 @@ mkdirp@^1.0.4:
  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==

+ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
 next-tick@1, next-tick@^1.1.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
@ -676,6 +854,13 @@ noms@0.0.0:
    inherits "^2.0.1"
    readable-stream "~1.0.31"

+nopt@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/nopt/-/nopt-2.1.2.tgz#6cccd977b80132a07731d6e8ce58c2c8303cf9af"
+  integrity sha1-bMzZd7gBMqB3MdbozljCyDA8+a8=
+  dependencies:
+    abbrev "1"
+
 nth-check@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-2.0.0.tgz#1bb4f6dac70072fc313e8c9cd1417b5074c0a125"
@ -702,6 +887,18 @@ parent-module@^1.0.0:
  dependencies:
    callsites "^3.0.0"

+parse-entities@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-2.0.0.tgz#53c6eb5b9314a1f4ec99fa0fdf7ce01ecda0cbe8"
+  integrity sha512-kkywGpCcRYhqQIchaWqZ875wzpS/bMKhz5HnN3p7wveJTkTtyAB/AlnS0f8DFSqYW1T82t6yEAkEcB+A1I3MbQ==
+  dependencies:
+    character-entities "^1.0.0"
+    character-entities-legacy "^1.0.0"
+    character-reference-invalid "^1.0.0"
+    is-alphanumerical "^1.0.0"
+    is-decimal "^1.0.0"
+    is-hexadecimal "^1.0.0"
+
 parse-json@^5.0.0:
  version "5.2.0"
  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
@ -747,10 +944,10 @@ path@^0.12.7:
    process "^0.11.1"
    util "^0.10.3"

-powerhooks@^0.0.27:
-  version "0.0.27"
-  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.0.27.tgz#e9dc29258860d2f6bf32b249d9cba07c6f53f393"
-  integrity sha512-ohayWhtIEdLqiC2th/GEhaRfOhqekFg2uFo0JZ8Dn7oTnAZybs618QJeq5ag9oy3lFVzl+kbROpVa8Ch5zrkaA==
+powerhooks@^0.0.36:
+  version "0.0.36"
+  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.0.36.tgz#d973d339ad8ca7ce52ea9d288ebe8e138df7d769"
+  integrity sha512-0fEGKLfJmuFeEYDGsAlTuvGKKdqOH059xezosmYRoGurfC1bbUlaNJD+TuzOT5cTGURi88DCLcDnhk/2eLyCyA==
  dependencies:
    evt "2.0.0-beta.15"
    memoizee "^0.4.15"
@ -766,6 +963,15 @@ process@^0.11.1:
  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
  integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=

+prop-types@^15.7.2:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.8.1"
+
 properties-parser@^0.3.1:
  version "0.3.1"
  resolved "https://registry.yarnpkg.com/properties-parser/-/properties-parser-0.3.1.tgz#1316e9539ffbfd93845e369b211022abd478771a"
@ -773,6 +979,32 @@ properties-parser@^0.3.1:
  dependencies:
    string.prototype.codepointat "^0.2.0"

+ramda@^0.27.1:
+  version "0.27.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.27.1.tgz#66fc2df3ef873874ffc2da6aa8984658abacf5c9"
+  integrity sha512-PgIdVpn5y5Yns8vqb8FzBUEYn98V3xcPgawAkkgj0YJ0qDsnHCiNmZYfOGMgOvoB0eWFLpYbhxUR3mxfDIMvpw==
+
+react-is@^16.8.1, react-is@^16.8.6:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-markdown@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-5.0.3.tgz#41040ea7a9324b564b328fb81dd6c04f2a5373ac"
+  integrity sha512-jDWOc1AvWn0WahpjW6NK64mtx6cwjM4iSsLHJPNBqoAgGOVoIdJMqaKX4++plhOtdd4JksdqzlDibgPx6B/M2w==
+  dependencies:
+    "@types/mdast" "^3.0.3"
+    "@types/unist" "^2.0.3"
+    html-to-react "^1.3.4"
+    mdast-add-list-metadata "1.0.1"
+    prop-types "^15.7.2"
+    react-is "^16.8.6"
+    remark-parse "^9.0.0"
+    unified "^9.0.0"
+    unist-util-visit "^2.0.0"
+    xtend "^4.0.1"
+
 react@^17.0.1:
  version "17.0.1"
  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
@ -809,6 +1041,13 @@ regenerator-runtime@^0.13.4:
  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==

+remark-parse@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-9.0.0.tgz#4d20a299665880e4f4af5d90b7c7b8a935853640"
+  integrity sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==
+  dependencies:
+    mdast-util-from-markdown "^0.8.0"
+
 require-directory@^2.1.1:
  version "2.1.1"
  resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@ -927,10 +1166,15 @@ to-fast-properties@^2.0.0:
  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=

-tss-react@^0.0.11:
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-0.0.11.tgz#1cd061927744cd4fc9b7346e2fd1cfcf896a18d5"
-  integrity sha512-j8CDpHHIl6S6/mX+AmK08v7waPqwgNA7urHOD3qknCgbY79LRlS7he5DF4NUNE/5B4/Btc3F25w+KqgChNbyGw==
+trough@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
+  integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
+
+tss-react@^0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-0.0.12.tgz#6463617ae5e7f670742e48e497d8825d59e2a2e9"
+  integrity sha512-oHekukqdaE71uhHx4XEdHy6aMnDYhoHLWB94iy2Fy9X8btH2lJH1joPj0zS1q7+1Xy2TydkLEZsTq3ElVd7ZqA==
  dependencies:
    "@emotion/css" "^11.1.3"

@ -949,6 +1193,52 @@ typescript@^4.2.3:
  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
  integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==

+unified@^9.0.0:
+  version "9.2.1"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.1.tgz#ae18d5674c114021bfdbdf73865ca60f410215a3"
+  integrity sha512-juWjuI8Z4xFg8pJbnEZ41b5xjGUWGHqXALmBZ3FC3WX0PIx1CZBIIJ6mXbYMcf6Yw4Fi0rFUTA1cdz/BglbOhA==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-buffer "^2.0.0"
+    is-plain-obj "^2.0.0"
+    trough "^1.0.0"
+    vfile "^4.0.0"
+
+unist-util-is@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-4.1.0.tgz#976e5f462a7a5de73d94b706bac1b90671b57797"
+  integrity sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==
+
+unist-util-stringify-position@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz#cce3bfa1cdf85ba7375d1d5b17bdc4cada9bd9da"
+  integrity sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==
+  dependencies:
+    "@types/unist" "^2.0.2"
+
+unist-util-visit-parents@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-1.1.2.tgz#f6e3afee8bdbf961c0e6f028ea3c0480028c3d06"
+  integrity sha512-yvo+MMLjEwdc3RhhPYSximset7rwjMrdt9E41Smmvg25UQIenzrN83cRnF1JMzoMi9zZOQeYXHSDf7p+IQkW3Q==
+
+unist-util-visit-parents@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz#65a6ce698f78a6b0f56aa0e88f13801886cdaef6"
+  integrity sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^4.0.0"
+
+unist-util-visit@^2.0.0:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-2.0.3.tgz#c3703893146df47203bb8a9795af47d7b971208c"
+  integrity sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-is "^4.0.0"
+    unist-util-visit-parents "^3.0.0"
+
 untildify@^4.0.0:
  version "4.0.0"
  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
@ -966,6 +1256,24 @@ util@^0.10.3:
  dependencies:
    inherits "2.0.3"

+vfile-message@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a"
+  integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    unist-util-stringify-position "^2.0.0"
+
+vfile@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.2.1.tgz#03f1dce28fc625c625bc6514350fbdb00fa9e624"
+  integrity sha512-O6AE4OskCG5S1emQ/4gl8zK586RqA3srz3nfK/Viy0UPToBc5Trp9BVFb1u0CjsKrAWwnpr4ifM/KBXPWwJbCA==
+  dependencies:
+    "@types/unist" "^2.0.0"
+    is-buffer "^2.0.0"
+    unist-util-stringify-position "^2.0.0"
+    vfile-message "^2.0.0"
+
 wrap-ansi@^7.0.0:
  version "7.0.0"
  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
@ -980,7 +1288,7 @@ wrappy@1:
  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=

-xtend@~4.0.1:
+xtend@^4.0.1, xtend@~4.0.1:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
Author	SHA1	Message	Date
ts_ci	984ef63661	Update changelog v1.0.3	2021-05-23 20:22:50 +00:00
garronej	a8daf175ea	Instuction about how to integrate with non CRA projects	2021-05-23 22:19:51 +02:00
garronej	055263a3da	Add mention to awesome list	2021-05-15 22:41:30 +02:00
garronej	9990b0ab05	fmt (changelog ignore)	2021-05-01 18:05:40 +02:00
garronej	423397ce3e	Merge branch 'main' of https://github.com/garronej/keycloakify into main	2021-05-01 18:04:07 +02:00
garronej	954567712c	Give hint about where to find the ftl files (changelog ignore)	2021-05-01 18:03:35 +02:00
ts_ci	9f52eb8123	Update changelog v1.0.2	2021-05-01 14:17:28 +00:00
garronej	744b198fb4	Merge branch 'main' of https://github.com/garronej/keycloakify into main	2021-05-01 16:15:44 +02:00
garronej	15eab797c3	Add key for child in a list (changelog ignore)	2021-05-01 16:15:40 +02:00
ts_ci	8ff86b1e29	Update changelog v1.0.1	2021-05-01 14:12:41 +00:00
garronej	e1b8760ee3	Merge branch 'main' of https://github.com/garronej/keycloakify into main	2021-05-01 16:10:57 +02:00
garronej	bd0d890b2c	Fix: LoginOtp (and not otc)	2021-05-01 16:10:52 +02:00
ts_ci	2a2118d769	Update changelog v1.0.0	2021-05-01 13:52:33 +00:00
garronej	9839b64650	Bump version (changelog ignore)	2021-05-01 15:50:45 +02:00
garronej	2bf55e12f9	Guide for implementing a missing page (fix, changelog ignore)	2021-05-01 15:50:12 +02:00
garronej	2249fa9232	#4 : Guide for implementing a missing page	2021-05-01 15:48:49 +02:00
garronej	f673a65304	Merge branch 'main' of https://github.com/garronej/keycloakify into main	2021-05-01 14:56:01 +02:00
garronej	0163459ad6	Support OTP #4	2021-05-01 14:55:58 +02:00
ts_ci	b21123cc9d	Update changelog v0.4.4	2021-04-29 21:33:33 +00:00
garronej	7800d125b2	Merge branch 'main' of https://github.com/garronej/keycloakify into main	2021-04-29 23:31:12 +02:00
garronej	89ea648f18	Fix previous release	2021-04-29 23:31:05 +02:00
ts_ci	ab7ac3c2d0	Update changelog v0.4.3	2021-04-29 17:07:48 +00:00
garronej	b16319d962	Merge branch 'main' of https://github.com/garronej/keycloakify into main	2021-04-29 19:02:16 +02:00
garronej	f8012d5dfb	Bump version (changelog ignore)	2021-04-29 19:00:56 +02:00
garronej	45a2015597	Add infos about the plugin that defines authorizedMailDomains	2021-04-29 19:00:38 +02:00
ts_ci	524ab000be	Update changelog v0.4.2	2021-04-29 16:47:44 +00:00
garronej	d73cfb8765	Merge branch 'main' of https://github.com/garronej/keycloakify into main	2021-04-29 18:42:29 +02:00
garronej	8164f5373f	Client side validation of allowed email domains	2021-04-29 18:42:14 +02:00
Joseph Garrone	824b0c275e	fmt (changelog ignore)	2021-04-21 20:45:03 +02:00
Joseph Garrone	f8d83d7a37	Update README (changelog ignore)	2021-04-20 11:44:57 +02:00
Joseph Garrone	b291526b13	Support email whitlisting	2021-04-15 12:20:08 +02:00
Joseph Garrone	e1c310d383	Merge branch 'main' of https://github.com/garronej/keycloakify into main	2021-04-12 23:46:29 +02:00
Joseph Garrone	242777a8eb	Restore kickstart video in the readme	2021-04-12 23:46:24 +02:00
Joseph Garrone	10a6b70fe9	Update README.md	2021-04-12 19:27:54 +02:00
Joseph Garrone	c829f5969c	Update README.md	2021-04-12 18:51:16 +02:00
Joseph Garrone	ba6a5047b1	Add note (changelog ignore)	2021-04-12 04:59:39 +02:00
Joseph Garrone	852f48c05f	update gif (changelog ignore)	2021-04-12 04:47:53 +02:00
Joseph Garrone	c342f04a92	Update video (changelog ignore)	2021-04-12 04:21:18 +02:00
Joseph Garrone	42eb8147c6	fmt (changelog ignore)	2021-04-12 02:29:24 +02:00
Joseph Garrone	ebcdbd782f	fmt (changelog ignore)	2021-04-12 02:28:22 +02:00
Joseph Garrone	d2059e08d1	fmt (changelog ignore)	2021-04-12 02:25:48 +02:00
Joseph Garrone	4f075882d5	Merge branch 'main' of https://github.com/garronej/keycloakify into main	2021-04-12 02:24:17 +02:00
Joseph Garrone	044ec1a2da	Important readme update	2021-04-12 02:24:11 +02:00
ts_ci	a49a32703d	Update changelog v0.4.1	2021-04-11 16:24:36 +00:00
Joseph Garrone	46ec832767	Quietly re-introduce --external-assets	2021-04-11 18:18:52 +02:00
Joseph Garrone	fc858b3db6	Update screenshot (changelog ignore)	2021-04-11 01:21:01 +02:00
Joseph Garrone	3cd8843157	Update screenshot in readme for therms and conditions (changelog ignore)	2021-04-10 20:20:26 +02:00
Joseph Garrone	c9358ea8dd	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify into main	2021-04-09 04:02:30 +02:00
Joseph Garrone	354a4db0f6	Give example of customization	2021-04-09 04:02:23 +02:00
ts_ci	90d435d96b	Update changelog v0.4.0	2021-04-09 01:31:07 +00:00
Joseph Garrone	2d804f0f0f	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify into main	2021-04-09 03:26:06 +02:00
Joseph Garrone	1c9acedac0	Bump version (changelog ignore)	2021-04-09 03:26:01 +02:00
Joseph Garrone	6e914e4ea3	Acual support of Therms of services	2021-04-09 03:25:39 +02:00
ts_ci	f0c4786267	Update changelog v0.3.24	2021-04-08 16:14:10 +00:00
Joseph Garrone	0b16159312	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify into main	2021-04-08 18:00:04 +02:00
Joseph Garrone	ea8a91e069	Add missing dependency: markdown	2021-04-08 17:59:58 +02:00
ts_ci	59db202fe4	Update changelog v0.3.23	2021-04-08 15:43:34 +00:00
Joseph Garrone	09927afd43	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify into main	2021-04-08 17:40:54 +02:00
Joseph Garrone	13c6122b9b	Bump version (changelog ignore)	2021-04-08 17:06:26 +02:00
Joseph Garrone	1bb19f65a2	Allow to lazily load therms	2021-04-08 17:06:09 +02:00
ts_ci	918a80cfb6	Update changelog v0.3.22	2021-04-08 13:48:41 +00:00
Joseph Garrone	ed7d5eabcb	Bump version (changelog ignore)	2021-04-08 15:43:12 +02:00
Joseph Garrone	2795109162	update powerhooks	2021-04-08 15:42:41 +02:00
Joseph Garrone	966f277628	Support terms and condition	2021-04-08 15:41:40 +02:00
Joseph Garrone	36d60411f9	Fix info.ftl	2021-04-08 12:54:29 +02:00
Joseph Garrone	60fe33f3fd	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify into main	2021-04-08 12:20:14 +02:00
Joseph Garrone	1df685df92	For useKcMessage we prefer returning callbacks with a changing references	2021-04-08 12:20:06 +02:00
ts_ci	7894d95ace	Update changelog v0.3.21	2021-04-04 19:20:27 +00:00
Joseph Garrone	a8b4493aa1	update yarn.lock (changelog ignore)	2021-04-04 21:17:35 +02:00
Joseph Garrone	715a7399cf	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify into main	2021-04-04 21:12:39 +02:00
Joseph Garrone	a1e59bae23	Update powerhooks	2021-04-04 21:12:30 +02:00
ts_ci	b0819314a1	Update changelog v0.3.20	2021-04-01 22:37:41 +00:00
Joseph Garrone	0099442543	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify into main	2021-04-01 23:43:14 +02:00
Joseph Garrone	66a0b07228	Bump version (changelog ignore)	2021-04-01 23:43:08 +02:00
Joseph Garrone	85f9544754	Always catch freemarker errors	2021-04-01 23:42:31 +02:00
ts_ci	2f16a09ab8	Update changelog v0.3.19	2021-04-01 15:21:10 +00:00
Joseph Garrone	183ae98c30	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify into main	2021-04-01 17:16:01 +02:00
Joseph Garrone	ba15e63879	Bump version (changelog ignore)	2021-04-01 17:15:55 +02:00
Joseph Garrone	654277feda	Fix previous release	2021-04-01 17:15:28 +02:00
ts_ci	81279a5cc5	Update changelog v0.3.18	2021-04-01 15:04:08 +00:00
Joseph Garrone	59f0a843b0	Merge branch 'main' of https://github.com/InseeFrLab/keycloakify into main	2021-04-01 16:52:53 +02:00
Joseph Garrone	c094f70171	Bump version (changelog ignore)	2021-04-01 16:51:50 +02:00
Joseph Garrone	0858fe6319	Fix error.ftt, Adopt best effort strategy to convert ftl values into JS	2021-04-01 16:51:28 +02:00