Update changelog v1.2.1

Fix typo on email

.github/workflows/ci.yaml

@@ -13,7 +13,7 @@ jobs:
     runs-on: macos-10.15
     strategy:
       matrix:
-        node: [ '14', '13', '12' ]
+        node: [ '15', '14', '13' ]
     name: Test with Node v${{ matrix.node }}
     steps:
     - name: Tell if project is using npm or yarn
@@ -25,14 +25,13 @@ jobs:
     - uses: actions/setup-node@v2.1.3
       with:
         node-version: ${{ matrix.node }}
+    - uses: bahmutov/npm-install@v1
     - if: steps.step1.outputs.npm_or_yarn == 'yarn'
       run: |
-        yarn install --frozen-lockfile                                                                                                                                                                                        
         yarn build
         yarn test
     - if: steps.step1.outputs.npm_or_yarn == 'npm'
       run: |
-        npm ci                                                                                                                                                                                        
         npm run build
         npm test
   check_if_version_upgraded:
@@ -55,11 +54,10 @@ jobs:
     needs: check_if_version_upgraded
     if: needs.check_if_version_upgraded.outputs.is_upgraded_version == 'true'
     steps:
-    - uses: garronej/github_actions_toolkit@v2.2
+    - uses: garronej/github_actions_toolkit@v2.4
       with:
         action_name: update_changelog
         branch: ${{ github.ref }}
-        commit_author_email: ts_ci@github.com
 
   create_github_release:
     runs-on: ubuntu-latest
@@ -104,16 +102,13 @@ jobs:
     - uses: actions/setup-node@v2.1.3
       with:
         node-version: '15'
+        registry-url: https://registry.npmjs.org/
+    - uses: bahmutov/npm-install@v1
     - run: |
         PACKAGE_MANAGER=npm
         if [ -f "./yarn.lock" ]; then
             PACKAGE_MANAGER=yarn
         fi
-        if [ "$PACKAGE_MANAGER" = "yarn" ]; then
-            yarn install --frozen-lockfile                                                                                                                                                                                        
-        else
-            npm ci
-        fi
         $PACKAGE_MANAGER run build
     - run: npx -y -p denoify@0.6.5 denoify_enable_short_npm_import_path
       env:
@@ -124,13 +119,11 @@ jobs:
           echo "This version is already published"
           exit 0
         fi
-        if [ "$NPM_TOKEN" = "" ]; then
+        if [ "$NODE_AUTH_TOKEN" = "" ]; then
           echo "Can't publish on NPM, You must first create a secret called NPM_TOKEN that contains your NPM auth token. https://help.github.com/en/actions/automating-your-workflow-with-github-actions/creating-and-using-encrypted-secrets"
           false
         fi
-        echo '//registry.npmjs.org/:_authToken=${NPM_TOKEN}' > .npmrc
         npm publish
-        rm .npmrc
       env:
-        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
         VERSION: ${{ needs.check_if_version_upgraded.outputs.to_version }}

CHANGELOG.md

@@ -1,3 +1,176 @@
+### **1.2.1** (2021-06-22)  
+  
+- Remove unessesary log    
+  
+## **1.2.0** (2021-06-22)  
+  
+- Generate kcContext automatically :rocket:    
+  
+### **1.1.6** (2021-06-21)  
+  
+- Fix: Alert messages sometimes includes HTML that is not rendered  
+- Update dist    
+  
+### **1.1.5** (2021-06-15)  
+  
+- #11: Provide socials in the register    
+  
+### **1.1.4** (2021-06-15)  
+  
+- Merge pull request #12 from InseeFrLab/email-typo
+
+Fix typo on email  
+- Fix typo on email    
+  
+### **1.1.3** (2021-06-14)  
+  
+- Add missing key in Login for providers    
+  
+### **1.1.2** (2021-06-14)  
+  
+  
+  
+### **1.1.1** (2021-06-14)  
+  
+  
+  
+## **1.1.0** (2021-06-14)  
+  
+- Add login-idp-link-confirm.ftl  
+- Fix login-update-profile.ftl  
+- Add login-update-profile.ftl page  
+- Fix default background bug  
+- Remove unused 'markdown' dependency  
+- Fix warning related to powerhooks_useGlobalState_kcLanguageTag  
+- Update README.md    
+  
+### **1.0.4** (2021-05-28)  
+  
+- Instructions for custom themes with custom components    
+  
+### **1.0.3** (2021-05-23)  
+  
+- Instuction about how to integrate with non CRA projects  
+- Add mention to awesome list    
+  
+### **1.0.2** (2021-05-01)  
+  
+  
+  
+### **1.0.1** (2021-05-01)  
+  
+- Fix: LoginOtp (and not otc)    
+  
+# **1.0.0** (2021-05-01)  
+  
+- #4: Guide for implementing a missing page  
+- Support OTP #4    
+  
+### **0.4.4** (2021-04-29)  
+  
+- Fix previous release    
+  
+### **0.4.3** (2021-04-29)  
+  
+- Add infos about the plugin that defines authorizedMailDomains    
+  
+### **0.4.2** (2021-04-29)  
+  
+- Client side validation of allowed email domains  
+- Support email whitlisting  
+- Restore kickstart video in the readme  
+- Update README.md  
+- Update README.md  
+- Important readme update    
+  
+### **0.4.1** (2021-04-11)  
+  
+- Quietly re-introduce --external-assets  
+- Give example of customization    
+  
+## **0.4.0** (2021-04-09)  
+  
+- Acual support of Therms of services    
+  
+### **0.3.24** (2021-04-08)  
+  
+- Add missing dependency: markdown    
+  
+### **0.3.23** (2021-04-08)  
+  
+- Allow to lazily load therms    
+  
+### **0.3.22** (2021-04-08)  
+  
+- update powerhooks  
+- Support terms and condition  
+- Fix info.ftl  
+- For useKcMessage we prefer returning callbacks with a changing references    
+  
+### **0.3.21** (2021-04-04)  
+  
+- Update powerhooks    
+  
+### **0.3.20** (2021-04-01)  
+  
+- Always catch freemarker errors    
+  
+### **0.3.19** (2021-04-01)  
+  
+- Fix previous release    
+  
+### **0.3.18** (2021-04-01)  
+  
+- Fix error.ftt, Adopt best effort strategy to convert ftl values into JS    
+  
+### **0.3.17** (2021-03-29)  
+  
+- Use push instead of replace in keycloak-js adapter to enable going back    
+  
+### **0.3.15** (2021-03-28)  
+  
+- Remove all reference to --external-assets, broken feature    
+  
+### **0.3.14** (2021-03-28)  
+  
+- Fix standalone mode: imports from js    
+  
+### **0.3.13** (2021-03-26)  
+  
+  
+  
+### **0.3.12** (2021-03-26)  
+  
+- Fix mocksContext    
+  
+### **0.3.11** (2021-03-26)  
+  
+- Fix previous build, improve README    
+  
+### **0.3.10** (2021-03-26)  
+  
+- Handle <style> tag, improve documentation    
+  
+### **0.3.9** (2021-03-25)  
+  
+- Update readme  
+- Document  --external-assets  
+- Update README.md  
+- Update README.md  
+- Update README.md    
+  
+### **0.3.8** (2021-03-22)  
+  
+- Make standalone mode the default    
+  
+### **0.3.7** (2021-03-22)  
+  
+- (test) external asset mode by default    
+  
+### **0.3.6** (2021-03-22)  
+  
+- Fix previous release    
+  
 ### **0.3.5** (2021-03-22)  
   
 - support homepage with urlPath    

README.md

@@ -2,85 +2,156 @@
     <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">
+    <img src="https://camo.githubusercontent.com/0f9fcc0ac1b8617ad4989364f60f78b2d6b32985ad6a508f215f14d8f897b8d3/68747470733a2f2f62616467656e2e6e65742f62616467652f547970655363726970742f7374726963742532302546302539462539322541412f626c7565">
+    <a href="https://github.com/thomasdarimont/awesome-keycloak">
+        <img src="https://awesome.re/mentioned-badge.svg"/>
+    </a>
 </p>
 
 <p align="center">
-    <i>Ultimately this build tool Generates a Keycloak theme</i>
+    <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.
 
-![keycloak_before](https://user-images.githubusercontent.com/6702424/108838381-dbbbcf80-75d3-11eb-8ae8-db41563ef9db.gif)
+Beyond that, if you use Keycloak for a specific app you want your login page to be tightly integrated with it.
+Ideally, you don't want the user to notice when he is being redirected away. 
 
-When we redirected to Keycloak the user suffers from a harsh context switch.
-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.  
+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.
 
-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 🍸
+<p align="center">
+    <i>Without keycloakify, users suffers from a harsh context switch, no fronted form pre-validation</i><br>
+    <img src="https://user-images.githubusercontent.com/6702424/108838381-dbbbcf80-75d3-11eb-8ae8-db41563ef9db.gif">
+</p>
 
-TODO: Insert video after.
+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> <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.  
+
+If you already have a Keycloak custom theme, it can be easily ported to Keycloakify.
+
+---
+
+
+- [Motivations](#motivations)
+- [Requirements](#requirements)
+  - [My framework doesn’t seem to be supported, what can I do?](#my-framework-doesnt-seem-to-be-supported-what-can-i-do)
+- [How to use](#how-to-use)
+  - [Setting up the build tool](#setting-up-the-build-tool)
+    - [Changing just the look of the default Keycloak theme](#changing-just-the-look-of-the-default-keycloak-theme)
+    - [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)
+- [Limitations](#limitations)
+  - [`process.env.PUBLIC_URL` not supported.](#processenvpublic_url-not-supported)
+  - [`@font-face` importing fonts from the `src/` dir](#font-face-importing-fonts-from-thesrc-dir)
+    - [Example of setup that **won't** work](#example-of-setup-that-wont-work)
+    - [Possible workarounds](#possible-workarounds)
+- [Implement context persistence (optional)](#implement-context-persistence-optional)
+- [Kickstart video](#kickstart-video)
+- [Email domain whitelist](#email-domain-whitelist)
+
+# Requirements 
 
 Tested with the following Keycloak versions: 
 - [11.0.3](https://hub.docker.com/layers/jboss/keycloak/11.0.3/images/sha256-4438f1e51c1369371cb807dffa526e1208086b3ebb9cab009830a178de949782?context=explore)  
 - [12.0.4](https://hub.docker.com/layers/jboss/keycloak/12.0.4/images/sha256-67e0c88e69bd0c7aef972c40bdeb558a974013a28b3668ca790ed63a04d70584?context=explore)  
 
-**Disclaimer**: 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 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.
 
-- [Motivations](#motivations)
-- [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 the look **and** feel](#changing-the-look-and-feel)
-    - [Hot reload](#hot-reload)
-- [GitHub Actions](#github-actions)
-- [REQUIREMENTS](#requirements)
-- [API Reference](#api-reference)
-  - [The build tool](#the-build-tool)
-- [Implement context persistance (optional)](#implement-context-persistance-optional)
+This tool assumes you are bundling your app with Webpack (tested with 4.44.2) .
+It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
+and a `build/static/` directory generated by webpack. 
+For more information see [this issue](https://github.com/InseeFrLab/keycloakify/issues/5#issuecomment-832296432)
+## My framework doesn’t seem to be supported, what can I do?  
 
+Currently Keycloakify is only compatible with `create-react-app` apps.
+It doesn’t mean that you can't use Keycloakify if you are using Next.js, Express or any other 
+framework that involves SSR but your Keycloak theme will need to be a standalone project.  
+Find specific instructions about how to get started [**here**](https://github.com/garronej/keycloakify-demo-app#keycloak-theme-only).  
+
+To share your styles between your main app and your login pages you will need to externalize your design system by making it a
+separate module. Checkout [ts_ci](https://github.com/garronej/ts_ci), it can help with that.
 # How to use
 ## Setting up the build tool
 
-Add `keycloakify` to the dev dependencies of your project `npm install --save-dev keycloakify` or `yarn add --dev keycloakify`
-then configure your `package.json` build's script to build the keycloak's theme by adding `&& build-keycloak-theme`.
-
-Typically you will get: 
-
-`package.json`
-```json
-"devDependencies": {
-    "keycloakify": "^0.0.10"
-},
-"scripts": {
-    "keycloak": "yarn build && build-keycloak-theme",
-},
+```bash
+yarn add keycloakify
 ```
 
-Then run `yarn keycloak` or `npm run keycloak`, you will be provided with instructions
-about how to load the theme into Keycloak.
+[`package.json`](https://github.com/garronej/keycloakify-demo-app/blob/main/package.json)
+```json
+"scripts": {
+    "keycloak": "yarn build && build-keycloak-theme",
+}
+```
 
-## Developing your login and register pages in your React app
+```bash
+yarn keycloak # generates keycloak-theme.jar
+```
 
-### Just changing the look
+On the console will be printed all the instructions about how to load the generated theme in Keycloak
 
-The fist approach is to only arr/replace the default class names by your
-own.
+### Changing just the look of the default Keycloak theme
 
+The first approach is to only customize the style of the default Keycloak login by providing
+your own class names.
+
+If you have created a new React project specifically to create a Keycloak theme and nothing else then
+your index should look something like:  
+
+`src/index.tsx`
 ```tsx
+import { App } from "./<wherever>/App";
+import { 
+  KcApp, 
+  defaultKcProps, 
+  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, 
@@ -107,23 +178,48 @@ 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)
+
+Note that you don’t have to re write **all** components, only the ones that you most need customized.  
+Look at [here for example](https://github.com/InseeFrLab/onyxia-ui/blob/3bf18aa82b198fc6ba7998c30abf0a9ae54a58b1/src/app/components/KcApp/KcApp.tsx#L112-L120). 
+We want to have our very own login and register page, so we wrote customs [Login.tsx](https://github.com/InseeFrLab/onyxia-ui/blob/master/src/app/components/KcApp/Login.tsx) and [Register.txs](https://github.com/InseeFrLab/onyxia-ui/blob/master/src/app/components/KcApp/Register.tsx), we import them [here](https://github.com/InseeFrLab/onyxia-ui/blob/3bf18aa82b198fc6ba7998c30abf0a9ae54a58b1/src/app/components/KcApp/KcApp.tsx#L9-L10) and use them [here](https://github.com/InseeFrLab/onyxia-ui/blob/3bf18aa82b198fc6ba7998c30abf0a9ae54a58b1/src/app/components/KcApp/KcApp.tsx#L113-L114).  
+We don't want to bother, however, customizing `login-reset-password.ftl`. We are fine using the component from [the default theme](https://github.com/InseeFrLab/onyxia-ui/blob/3bf18aa82b198fc6ba7998c30abf0a9ae54a58b1/src/app/components/KcApp/KcApp.tsx#L13) with just some [CSS customization](https://github.com/InseeFrLab/onyxia-ui/blob/3bf18aa82b198fc6ba7998c30abf0a9ae54a58b1/src/app/components/KcApp/KcApp.tsx#L103-L110).  
+
+WARNING: If you chose to go this way use:
+```json
+"dependencies": {
+    "keycloakify": "~X.Y.Z"
+}
+```
+in your `package.json` instead of `^X.Y.Z`. A minor update of Keycloakify might break your app.
+
 ### Hot reload
 
-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`.
 
@@ -135,7 +231,6 @@ import {
 } from "keycloakify";
 
 reactDom.render(
-    kcContext !== undefined ? 
         <KcApp 
             kcContext={kcContextMocks.kcLoginContext}
             {...defaultKcProps} 
@@ -144,45 +239,90 @@ 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?
+
+**NEW in v1.2 it is now much more easy to add support for custom pages since the
+Keycloak context is now automatically converted into a JavaScript object (kcContext).
+In v2 (coming soon) it won't be required to fork for adding support for custom pages.**
+
+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
 
-This tools assumes you are bundling your app with Webpack (tested with 4.44.2) .
-It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
-and a `static/` directory generated by webpack.
+**All this is defaults with [`create-react-app`](https://create-react-app.dev)** (tested with 4.0.3)
 
-**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.
 
-- 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.
+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).
 
-NOTE: This build tool has only be tested on MacOS.
 
-# API Reference 
 
-## The build tool 
+## `@font-face` importing fonts from the `src/` dir
 
-Part of the lib that runs with node, at build time.
+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.
 
-- `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)
+### Example of setup that **won't** work 
 
-# Implement context persistance (optional)
+- We have a `fonts/` directory in `src/`
+- We import the font like this [`src: url("/fonts/my-font.woff2") format("woff2");`](https://github.com/garronej/keycloakify-demo-app/blob/07d54a3012ef354ee12b1374c6f7ad1cb125d56b/src/fonts.scss#L4) in a `.scss` a file.  
+
+### Possible workarounds  
+
+- Use [`--external-assets`](#enable-loading-in-a-blink-of-a-eye-of-login-pages-).
+- If it is possible, use Google Fonts or any other font provider.
+- If you want to host your font recommended approach is to move your fonts into the `public` 
+directory and to place your `@font-face` statements in the `public/index.html`.  
+Example [here](https://github.com/InseeFrLab/onyxia-ui/blob/0e3a04610cfe872ca71dad59e05ced8f785dee4b/public/index.html#L6-L51).  
+- You can also [use non relative url](https://github.com/garronej/keycloakify-demo-app/blob/2de8a9eb6f5de9c94f9cd3991faad0377e63268c/src/fonts.scss#L16) but don't forget [`Access-Control-Allow-Origin`](https://github.com/garronej/keycloakify-demo-app/blob/2de8a9eb6f5de9c94f9cd3991faad0377e63268c/nginx.conf#L17-L19).
+
+# Implement context persistence (optional)
 
 If, before logging in, a user has selected a specific language 
 you don't want it to be reset to default when the user gets redirected to
@@ -240,3 +380,13 @@ keycloakInstance.init({
 If you really want to go the extra miles and avoid having the white
 flash of the blank html before the js bundle have been evaluated
 [here is a snippet](https://github.com/InseeFrLab/onyxia-ui/blob/a77eb502870cfe6878edd0d956c646d28746d053/public/index.html#L5-L54) that you can place in your `public/index.html` if you are using `powerhooks/useGlobalState`.
+
+# Kickstart video
+
+*NOTE: keycloak-react-theming was renamed keycloakify since this video was recorded*
+[![kickstart_video](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)](https://youtu.be/xTz0Rj7i2v8)
+
+# Email domain whitelist
+
+If you want to restrict the emails domain that can register, you can use [this plugin](https://github.com/micedre/keycloak-mail-whitelisting) 
+and `kcRegisterContext["authorizedMailDomains"]` to validate on.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "0.3.5",
+    "version": "1.2.1",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",
@@ -14,8 +14,7 @@
         "grant-exec-perms": "node dist/bin/tools/grant-exec-perms.js",
         "test": "node dist/test",
         "copy-files": "copyfiles -u 1 src/**/*.ftl src/**/*.xml src/**/*.js dist/",
-        "generate-messages": "node dist/bin/generate-i18n-messages.js",
-        "watch": "tsc -w"
+        "generate-messages": "node dist/bin/generate-i18n-messages.js"
     },
     "bin": {
         "build-keycloak-theme": "dist/bin/build-keycloak-theme/index.js",
@@ -54,8 +53,9 @@
         "evt": "2.0.0-beta.15",
         "minimal-polyfills": "^2.1.6",
         "path": "^0.12.7",
-        "powerhooks": "^0.0.27",
+        "powerhooks": "^0.1.0",
+        "react-markdown": "^5.0.3",
         "scripting-tools": "^0.19.13",
-        "tss-react": "^0.0.11"
+        "tss-react": "^0.0.12"
     }
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-<script>const _= 
-{
-    "realm": {
-        "loginWithEmailAllowed": ${realm.loginWithEmailAllowed?c}
-    },
-}
-</script>

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

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

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

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

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

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

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

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

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

@@ -3,39 +3,45 @@ import { transformCodebase } from "../tools/transformCodebase";
 import * as fs from "fs";
 import { join as pathJoin } from "path";
 import {
-    replaceImportFromStaticInCssCode,
-    replaceImportFromStaticInJsCode
+    replaceImportsInCssCode,
+    replaceImportsFromStaticInJsCode
 } from "./replaceImportFromStatic";
 import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
-import { builtinThemesUrl } from "../install-builtin-keycloak-themes";
-import { downloadAndUnzip } from "../tools/downloadAndUnzip";
+import { builtinThemesUrl } from "../install-builtin-keycloak-themes";
+import { downloadAndUnzip } from "../tools/downloadAndUnzip";
 import * as child_process from "child_process";
-import { ftlValuesGlobalName } from "./ftlValuesGlobalName";
-import { resourcesCommonPath, resourcesPath, subDirOfPublicDirBasename } from "../../lib/kcContextMocks/urlResourcesPath";
-import { isInside } from "../tools/isInside";
+import { resourcesCommonPath, resourcesPath, subDirOfPublicDirBasename } from "../../lib/kcContextMocks/urlResourcesPath";
+import { isInside } from "../tools/isInside";
+
 
 export function generateKeycloakThemeResources(
     params: {
-        urlPathname: string;
         themeName: string;
         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
@@ -44,10 +50,9 @@ export function generateKeycloakThemeResources(
                 return undefined;
             }
 
+            if (urlOrigin === undefined && /\.css?$/i.test(filePath)) {
 
-            if (/\.css?$/i.test(filePath)) {
-
-                const { cssGlobalsToDefine, fixedCssCode } = replaceImportFromStaticInCssCode(
+                const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode(
                     { "cssCode": sourceCode.toString("utf8") }
                 );
 
@@ -62,33 +67,37 @@ export function generateKeycloakThemeResources(
 
             if (/\.js?$/i.test(filePath)) {
 
-                const { fixedJsCode } = replaceImportFromStaticInJsCode({
+                const { fixedJsCode } = replaceImportsFromStaticInJsCode({
                     "jsCode": sourceCode.toString("utf8"),
-                    ftlValuesGlobalName
+                    urlOrigin
                 });
 
                 return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
 
             }
 
-            return { "modifiedSourceCode": sourceCode };
+            return urlOrigin === undefined ? 
+                { "modifiedSourceCode": sourceCode } :
+                undefined;
 
         }
     });
 
     const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
         "cssGlobalsToDefine": allCssGlobalsToDefine,
-        ftlValuesGlobalName,
         "indexHtmlCode": fs.readFileSync(
             pathJoin(reactAppBuildDirPath, "index.html")
         ).toString("utf8"),
-        urlPathname
+        urlPathname,
+        urlOrigin
     });
 
     pageIds.forEach(pageId => {
 
         const { ftlCode } = generateFtlFilesCode({ pageId });
 
+        fs.mkdirSync(themeDirPath, { "recursive": true });
+
         fs.writeFileSync(
             pathJoin(themeDirPath, pageId),
             Buffer.from(ftlCode, "utf8")

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

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

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

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

src/bin/generate-i18n-messages.ts

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

src/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>
 

src/lib/components/KcApp.tsx

@@ -8,8 +8,12 @@ import { Info } from "./Info";
 import { Error } from "./Error";
 import { LoginResetPassword } from "./LoginResetPassword";
 import { LoginVerifyEmail } from "./LoginVerifyEmail";
+import { Terms } from "./Terms";
+import { LoginOtp } from "./LoginOtp";
+import { LoginUpdateProfile } from "./LoginUpdateProfile";
+import { LoginIdpLinkConfirm } from "./LoginIdpLinkConfirm";
 
-export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContext; } & KcProps ) => {
+export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContext; } & KcProps) => {
     switch (kcContext.pageId) {
         case "login.ftl": return <Login {...{ kcContext, ...props }} />;
         case "register.ftl": return <Register {...{ kcContext, ...props }} />;
@@ -17,5 +21,9 @@ 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 }} />;
+        case "login-update-profile.ftl": return <LoginUpdateProfile {...{ kcContext, ...props }} />;
+        case "login-idp-link-confirm.ftl": return <LoginIdpLinkConfirm {...{ kcContext, ...props }} />;
     }
 });

src/lib/components/Login.tsx

@@ -120,7 +120,7 @@ export const Login = memo(({ kcContext, ...props }: { kcContext: KcContext.Login
                             <ul className={cx(props.kcFormSocialAccountListClass, social.providers.length > 4 && props.kcFormSocialAccountDoubleListClass)}>
                                 {
                                     social.providers.map(p =>
-                                        <li className={cx(props.kcFormSocialAccountListLinkClass)}>
+                                        <li key={p.providerId} className={cx(props.kcFormSocialAccountListLinkClass)}>
                                             <a href={p.loginUrl} id={`zocial-${p.alias}`} className={cx("zocial", p.providerId)}>
                                                 <span>{p.displayName}</span>
                                             </a>

src/lib/components/LoginIdpLinkConfirm.tsx

@@ -0,0 +1,58 @@
+
+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 LoginIdpLinkConfirm = memo(({ kcContext, ...props }: { kcContext: KcContext.LoginIdpLinkConfirm; } & KcProps) => {
+
+	const { msg } = useKcMessage();
+
+	const { url, idpAlias } = kcContext;
+
+	return (
+		<Template
+			{...{ kcContext, ...props }}
+			headerNode={msg("confirmLinkIdpTitle")}
+			formNode={
+				<form id="kc-register-form" action={url.loginAction} method="post">
+					<div className={cx(props.kcFormGroupClass)}>
+						<button
+							type="submit"
+							className={cx(
+								props.kcButtonClass,
+								props.kcButtonDefaultClass,
+								props.kcButtonBlockClass,
+								props.kcButtonLargeClass
+							)}
+							name="submitAction"
+							id="updateProfile"
+							value="updateProfile"
+						>
+							{msg("confirmLinkIdpReviewProfile")}
+						</button>
+						<button
+							type="submit"
+							className={cx(
+								props.kcButtonClass,
+								props.kcButtonDefaultClass,
+								props.kcButtonBlockClass,
+								props.kcButtonLargeClass
+							)}
+							name="submitAction"
+							id="linkAccount"
+							value="linkAccount"
+						>
+							{msg("confirmLinkIdpContinue", idpAlias)}
+						</button>
+					</div>
+				</form>
+			}
+		/>
+	);
+
+});
+
+

src/lib/components/LoginOtp.tsx

@@ -0,0 +1,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();
+        }
+    });
+
+}

src/lib/components/LoginUpdateProfile.tsx

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

src/lib/components/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) => {
 
@@ -269,7 +269,10 @@ export const Template = memo((props: TemplateProps) => {
                                 {message.type === "warning" && <span className={cx(props.kcFeedbackWarningIcon)}></span>}
                                 {message.type === "error" && <span className={cx(props.kcFeedbackErrorIcon)}></span>}
                                 {message.type === "info" && <span className={cx(props.kcFeedbackInfoIcon)}></span>}
-                                <span className="kc-feedback-text">{message.summary}</span>
+                                <span 
+                                    className="kc-feedback-text" 
+                                    dangerouslySetInnerHTML={{ "__html": message.summary }} 
+                                />
                             </div>
                         }
                         {formNode}

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" />
+                </>
+            }
+        />
+    );
+});
+
+

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

src/lib/i18n/generated_kcMessages/account.ts

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

src/lib/i18n/generated_kcMessages/admin.ts

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

src/lib/i18n/generated_kcMessages/email.ts

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

src/lib/i18n/generated_kcMessages/login.ts

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

src/lib/i18n/kcMessages/login.ts

@@ -0,0 +1,33 @@
+
+import { kcMessages } from "../generated_kcMessages/login";
+import { Evt } from "evt";
+import { objectKeys } from "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 };
+

src/lib/i18n/useKcLanguageTag.ts

@@ -10,7 +10,7 @@ const wrap = createUseGlobalState(
         kcContext?.locale?.current ??
         navigator.language
     ),
-    { "persistance": "cookie" }
+    { "persistance": "localStorage" }
 );
 
 export const { useKcLanguageTag } = wrap;

src/lib/i18n/useKcMessage.tsx

@@ -1,20 +1,33 @@
 
+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"];
 
+/** 
+ * When the language is switched the page is reloaded, this may appear
+ * as a bug as you might notice that the language successfully switch before
+ * reload.
+ * However we need to tell Keycloak that the user have changed the language
+ * during login so we can retrieve the "local" field of the JWT encoded accessToken.
+ */
 export function useKcMessage() {
 
     const { kcLanguageTag } = useKcLanguageTag();
 
-    const 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 +41,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 };

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";

src/lib/kcContext.ts

@@ -10,12 +10,19 @@ 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 | KcContext.LoginUpdateProfile |
+    KcContext.LoginIdpLinkConfirm;
+
 export declare namespace KcContext {
 
-    export type Template = {
+    export type Common = {
         url: {
             loginAction: string;
             resourcesPath: string;
@@ -27,7 +34,7 @@ export declare namespace KcContext {
             displayName?: string;
             displayNameHtml?: string;
             internationalizationEnabled: boolean;
-            registrationEmailAsUsername: boolean; //<---
+            registrationEmailAsUsername: boolean;
         };
         /** Undefined if !realm.internationalizationEnabled */
         locale?: {
@@ -55,7 +62,7 @@ export declare namespace KcContext {
         isAppInitiatedAction: boolean;
     };
 
-    export type Login = Template & {
+    export type Login = Common & {
         pageId: "login.ftl";
         url: {
             loginResetCredentialsUrl: string;
@@ -88,7 +95,7 @@ export declare namespace KcContext {
         };
     };
 
-    export type Register = Template & {
+    export type Register = Common & {
         pageId: "register.ftl";
         url: {
             registrationAction: string;
@@ -118,9 +125,23 @@ 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[];
+        social: {
+            displayInfo: boolean;
+            providers?: {
+                loginUrl: string;
+                alias: string;
+                providerId: string;
+                displayName: string;
+            }[]
+        };
     };
 
-    export type Info = Template & {
+    export type Info = Common & {
         pageId: "info.ftl";
         messageHeader?: string;
         requiredActions?: ExtractAfterStartingWith<"requiredAction.", MessageKey>[];
@@ -132,24 +153,58 @@ 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; }[];
+        }
+    };
+
+    export type LoginUpdateProfile = Common & {
+        pageId: "login-update-profile.ftl";
+        user: {
+            editUsernameAllowed: boolean;
+            username?: string;
+            email?: string;
+            firstName?: string;
+            lastName?: string;
+        };
+        messagesPerField: {
+            printIfExists<T>(
+                key: "username" | "email" | "firstName" | "lastName",
+                x: T
+            ): T | undefined;
+        };
+
+    };
+
+    export type LoginIdpLinkConfirm = Common & {
+        pageId: "login-idp-link-confirm.ftl";
+        idpAlias: string;
+    };
+
 }
 
 doExtends<KcContext["pageId"], PageId>();

src/lib/kcContextMocks/index.ts

@@ -1,201 +1 @@
-
-
-import type { KcContext } from "../KcContext";
-import { getEvtKcLanguage } from "../i18n/useKcLanguageTag";
-import { getKcLanguageTagLabel } from "../i18n/KcLanguageTag";
-//NOTE: Aside because we want to be able to import them from node
-import { resourcesCommonPath, resourcesPath } from "./urlResourcesPath";
-
-export const kcTemplateContext: KcContext.Template = {
-    "url": {
-        "loginAction": "#",
-        "resourcesPath": "/" + resourcesPath,
-        "resourcesCommonPath": "/" + resourcesCommonPath,
-        "loginRestartFlowUrl": "/auth/realms/myrealm/login-actions/restart?client_id=account&tab_id=HoAx28ja4xg",
-        "loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg",
-    },
-    "realm": {
-        "displayName": "myrealm",
-        "displayNameHtml": "myrealm",
-        "internationalizationEnabled": true,
-        "registrationEmailAsUsername": true,
-    },
-    "locale": {
-        "supported": [
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=de",
-                "languageTag": "de"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=no",
-                "languageTag": "no"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ru",
-                "languageTag": "ru"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sv",
-                "languageTag": "sv"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pt-BR",
-                "languageTag": "pt-BR"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=lt",
-                "languageTag": "lt"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=en",
-                "languageTag": "en"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=it",
-                "languageTag": "it"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=fr",
-                "languageTag": "fr"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=zh-CN",
-                "languageTag": "zh-CN"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=es",
-                "languageTag": "es"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=cs",
-                "languageTag": "cs"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ja",
-                "languageTag": "ja"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sk",
-                "languageTag": "sk"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pl",
-                "languageTag": "pl"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ca",
-                "languageTag": "ca"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=nl",
-                "languageTag": "nl"
-            },
-            {
-                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=tr",
-                "languageTag": "tr"
-            }
-        ],
-        "current": null as any
-    },
-    "auth": {
-        "showUsername": false,
-        "showResetCredentials": false,
-        "showTryAnotherWayLink": false
-    },
-    "scripts": [],
-    "message": {
-        "type": "success",
-        "summary": "This is a test message"
-    },
-    "isAppInitiatedAction": false,
-};
-
-Object.defineProperty(
-    kcTemplateContext.locale!,
-    "current",
-    {
-        "get": () => getKcLanguageTagLabel(getEvtKcLanguage().state),
-        "enumerable": true
-    }
-);
-
-export const kcLoginContext: KcContext.Login = {
-    ...kcTemplateContext,
-    "pageId": "login.ftl",
-    "url": {
-        ...kcTemplateContext.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,
-        "loginWithEmailAllowed": true,
-        "rememberMe": true,
-        "password": true,
-        "resetPasswordAllowed": true,
-        "registrationAllowed": true
-    },
-    "auth": kcTemplateContext.auth!,
-    "social": {
-        "displayInfo": true
-    },
-    "usernameEditDisabled": false,
-    "login": {
-        "rememberMe": false
-    },
-    "registrationDisabled": false,
-};
-
-export const kcRegisterContext: KcContext.Register = {
-    ...kcTemplateContext,
-    "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
-    },
-    "scripts": [],
-    "isAppInitiatedAction": false,
-    "pageId": "register.ftl",
-    "register": {
-        "formData": {}
-    },
-    "passwordRequired": true,
-    "recaptchaRequired": false
-};
-
-export const kcInfoContext: KcContext.Info ={
-    ...kcTemplateContext,
-    "pageId": "info.ftl",
-    "messageHeader": "<Message header>",
-    "requiredActions": undefined,
-    "skipLink": false,
-    "actionUri": "#",
-    "client": {
-        "baseUrl": "#"
-    }
-};
-
-export const kcErrorContext: KcContext.Error = {
-    ...kcTemplateContext,
-    "pageId": "error.ftl",
-    "client": {
-        "baseUrl": "#"
-    }
-};
-
-export const kcLoginResetPasswordContext: KcContext.LoginResetPassword = {
-    ...kcTemplateContext,
-    "pageId": "login-reset-password.ftl",
-    "realm":{
-        ...kcTemplateContext.realm,
-        "loginWithEmailAllowed": false
-    }
-};
-
-export const kcLoginVerifyEmailContext: KcContext.LoginVerifyEmail = {
-    ...kcTemplateContext,
-    "pageId": "login-verify-email.ftl"
-};
-
+export * from "./kcContextMocks";

src/lib/kcContextMocks/kcContextMocks.ts

@@ -0,0 +1,252 @@
+
+import type { KcContext } from "../KcContext";
+import { getEvtKcLanguage } from "../i18n/useKcLanguageTag";
+import { getKcLanguageTagLabel } from "../i18n/KcLanguageTag";
+//NOTE: Aside because we want to be able to import them from node
+import { resourcesCommonPath, resourcesPath } from "./urlResourcesPath";
+
+const kcCommonContext: KcContext.Common = {
+    "url": {
+        "loginAction": "#",
+        "resourcesPath": `${process.env["PUBLIC_URL"]}/${resourcesPath}`,
+        "resourcesCommonPath": `${process.env["PUBLIC_URL"]}/${resourcesCommonPath}`,
+        "loginRestartFlowUrl": "/auth/realms/myrealm/login-actions/restart?client_id=account&tab_id=HoAx28ja4xg",
+        "loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg",
+    },
+    "realm": {
+        "displayName": "myrealm",
+        "displayNameHtml": "myrealm",
+        "internationalizationEnabled": true,
+        "registrationEmailAsUsername": true,
+    },
+    "locale": {
+        "supported": [
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=de",
+                "languageTag": "de"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=no",
+                "languageTag": "no"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ru",
+                "languageTag": "ru"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sv",
+                "languageTag": "sv"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pt-BR",
+                "languageTag": "pt-BR"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=lt",
+                "languageTag": "lt"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=en",
+                "languageTag": "en"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=it",
+                "languageTag": "it"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=fr",
+                "languageTag": "fr"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=zh-CN",
+                "languageTag": "zh-CN"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=es",
+                "languageTag": "es"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=cs",
+                "languageTag": "cs"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ja",
+                "languageTag": "ja"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=sk",
+                "languageTag": "sk"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=pl",
+                "languageTag": "pl"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=ca",
+                "languageTag": "ca"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=nl",
+                "languageTag": "nl"
+            },
+            {
+                "url": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg&execution=ee6c2834-46a4-4a20-a1b6-f6d6f6451b36&kc_locale=tr",
+                "languageTag": "tr"
+            }
+        ],
+        "current": null as any
+    },
+    "auth": {
+        "showUsername": false,
+        "showResetCredentials": false,
+        "showTryAnotherWayLink": false
+    },
+    "scripts": [],
+    "message": {
+        "type": "success",
+        "summary": "This is a test message"
+    },
+    "isAppInitiatedAction": false,
+};
+
+Object.defineProperty(
+    kcCommonContext.locale!,
+    "current",
+    {
+        "get": () => getKcLanguageTagLabel(getEvtKcLanguage().state),
+        "enumerable": true
+    }
+);
+
+export const kcLoginContext: KcContext.Login = {
+    ...kcCommonContext,
+    "pageId": "login.ftl",
+    "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": {
+        ...kcCommonContext.realm,
+        "loginWithEmailAllowed": true,
+        "rememberMe": true,
+        "password": true,
+        "resetPasswordAllowed": true,
+        "registrationAllowed": true
+    },
+    "auth": kcCommonContext.auth!,
+    "social": {
+        "displayInfo": true
+    },
+    "usernameEditDisabled": false,
+    "login": {
+        "rememberMe": false
+    },
+    "registrationDisabled": false,
+};
+
+export const kcRegisterContext: KcContext.Register = {
+    ...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
+    },
+    "scripts": [],
+    "isAppInitiatedAction": false,
+    "pageId": "register.ftl",
+    "register": {
+        "formData": {}
+    },
+    "passwordRequired": true,
+    "recaptchaRequired": false,
+    "authorizedMailDomains": [
+        "example.com",
+        "another-example.com",
+        "*.yet-another-example.com",
+        "*.example.com",
+        "hello-world.com"
+    ],
+    "social": {
+        "displayInfo": true
+    },
+};
+
+export const kcInfoContext: KcContext.Info = {
+    ...kcCommonContext,
+    "pageId": "info.ftl",
+    "messageHeader": "<Message header>",
+    "requiredActions": undefined,
+    "skipLink": false,
+    "actionUri": "#",
+    "client": {
+        "baseUrl": "#"
+    }
+};
+
+export const kcErrorContext: KcContext.Error = {
+    ...kcCommonContext,
+    "pageId": "error.ftl",
+    "client": {
+        "baseUrl": "#"
+    }
+};
+
+export const kcLoginResetPasswordContext: KcContext.LoginResetPassword = {
+    ...kcCommonContext,
+    "pageId": "login-reset-password.ftl",
+    "realm": {
+        ...kcCommonContext.realm,
+        "loginWithEmailAllowed": false
+    }
+};
+
+export const kcLoginVerifyEmailContext: KcContext.LoginVerifyEmail = {
+    ...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"
+            }
+        ]
+    }
+};
+
+export const kcLoginUpdateProfileContext: KcContext.LoginUpdateProfile = {
+    ...kcCommonContext,
+    "pageId": "login-update-profile.ftl",
+    "user": {
+        "editUsernameAllowed": true,
+        "username": "anUsername",
+        "email": "foo@example.com",
+        "firstName": "aFirstName",
+        "lastName": "aLastName"
+    },
+    "messagesPerField": {
+        "printIfExists": () => undefined
+    }
+};
+
+export const kcLoginIdpLinkConfirmContext: KcContext.LoginIdpLinkConfirm ={
+    ...kcCommonContext,
+    "pageId": "login-idp-link-confirm.ftl",
+    "idpAlias": "FranceConnect"
+};

src/lib/keycloakJsAdapter.ts

@@ -62,17 +62,16 @@ export function createKeycloakAdapter(
             "success": { "value": () => { } },
             "error": { "value": () => { } }
         }
-    );
+    ) as any;
 
     return {
         "login": options => {
-            window.location.replace(
+            window.location.href= 
                 transformUrlBeforeRedirect(
                     keycloakInstance.createLoginUrl(
                         options
                     )
-                )
-            );
+                );
             return neverResolvingPromise;
         },
         "logout": options => {
@@ -86,13 +85,13 @@ export function createKeycloakAdapter(
             return neverResolvingPromise;
         },
         "register": options => {
-            window.location.replace(
+            window.location.href =
                 transformUrlBeforeRedirect(
                     keycloakInstance.createRegisterUrl(
                         options
                     )
-                )
-            );
+                );
+
             return neverResolvingPromise;
         },
         "accountManagement": () => {

src/test/generateKeycloakThemeResources.ts

@@ -1,7 +1,7 @@
 
 import { join as pathJoin } from "path";
 import { generateKeycloakThemeResources } from "../bin/build-keycloak-theme/generateKeycloakThemeResources";
-import { 
+import {
     setupSampleReactProject,
     sampleReactProjectDirPath
 } from "./setupSampleReactProject";
@@ -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
 });
 

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

src/test/replaceImportFromStatic.ts

@@ -1,30 +1,47 @@
 
 import { 
-    replaceImportFromStaticInJsCode,
-    replaceImportFromStaticInCssCode,
+    replaceImportsFromStaticInJsCode,
+    replaceImportsInCssCode,
     generateCssCodeToDefineGlobals
 } from "../bin/build-keycloak-theme/replaceImportFromStatic";
 
-const { fixedJsCode } = replaceImportFromStaticInJsCode({
-    "ftlValuesGlobalName": "keycloakFtlValues",
+const { fixedJsCode } = replaceImportsFromStaticInJsCode({
     "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"
+        }
 
-const { fixedCssCode, cssGlobalsToDefine } = replaceImportFromStaticInCssCode({
+        function f2() {
+            return a.p+"static/js/" + ({}[e] || e) + "." + {
+                3: "0664cdc0"
+            }[e] + ".chunk.js"
+        }
+    `,
+    "urlOrigin": "https://www.example.com"
+});
+
+console.log({ fixedJsCode, fixedJsCodeExternal });
+
+const { fixedCssCode, cssGlobalsToDefine } = replaceImportsInCssCode({
     "cssCode": `
 
     .my-div {

yarn.lock

@@ -3,72 +3,71 @@
 
 
 "@babel/code-frame@^7.0.0":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"
-  integrity sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
+  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
   dependencies:
-    "@babel/highlight" "^7.12.13"
+    "@babel/highlight" "^7.14.5"
 
-"@babel/helper-module-imports@^7.7.0":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.12.13.tgz#ec67e4404f41750463e455cc3203f6a32e93fcb0"
-  integrity sha512-NGmfvRp9Rqxy0uHSSVP+SRIW1q31a7Ji10cLBcqSDUngGentY4FRiHOFZFE1CLU5eiL0oE8reH7Tg1y99TDM/g==
+"@babel/helper-module-imports@^7.12.13":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
+  integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==
   dependencies:
-    "@babel/types" "^7.12.13"
+    "@babel/types" "^7.14.5"
 
-"@babel/helper-plugin-utils@^7.12.13":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
-  integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
+"@babel/helper-plugin-utils@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
 
-"@babel/helper-validator-identifier@^7.12.11":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
-  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
+"@babel/helper-validator-identifier@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
+  integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==
 
-"@babel/highlight@^7.12.13":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
-  integrity sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==
+"@babel/highlight@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.14.5.tgz#6861a52f03966405001f6aa534a01a24d99e8cd9"
+  integrity sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
+    "@babel/helper-validator-identifier" "^7.14.5"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/plugin-syntax-jsx@^7.12.1":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.13.tgz#044fb81ebad6698fe62c478875575bcbb9b70f15"
-  integrity sha512-d4HM23Q1K7oq/SLNmG6mRt85l2csmQ0cHRaxRXjKW0YFdEXqlZ5kzFQKH5Uc3rDJECgu+yCRgPkG04Mm98R/1g==
+"@babel/plugin-syntax-jsx@^7.12.13":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
+  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/runtime@^7.7.2":
-  version "7.13.10"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.10.tgz#47d42a57b6095f4468da440388fdbad8bebf0d7d"
-  integrity sha512-4QPkjJq6Ns3V/RgpEahRk+AGfL0eO6RHHtTWoNNr5mO49G6B5+X6d6THgWEAvTrznU5xYpbAlVKRYcsCgh/Akw==
+"@babel/runtime@^7.13.10", "@babel/runtime@^7.7.2":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/types@^7.12.13":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.0.tgz#74424d2816f0171b4100f0ab34e9a374efdf7f80"
-  integrity sha512-hE+HE8rnG1Z6Wzo+MhaKE5lM5eMx71T4EHJgku2E3xIfaULhDcxiiRxUYgwX8qwP1BBSlag+TdGOt6JAidIZTA==
+"@babel/types@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
+  integrity sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.12.11"
-    lodash "^4.17.19"
+    "@babel/helper-validator-identifier" "^7.14.5"
     to-fast-properties "^2.0.0"
 
 "@emotion/babel-plugin@^11.0.0":
-  version "11.2.0"
-  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.2.0.tgz#f25c6df8ec045dad5ae6ca63df0791673b98c920"
-  integrity sha512-lsnQBnl3l4wu/FJoyHnYRpHJeIPNkOBMbtDUIXcO8luulwRKZXPvA10zd2eXVN6dABIWNX4E34en/jkejIg/yA==
+  version "11.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
+  integrity sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==
   dependencies:
-    "@babel/helper-module-imports" "^7.7.0"
-    "@babel/plugin-syntax-jsx" "^7.12.1"
-    "@babel/runtime" "^7.7.2"
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
     "@emotion/hash" "^0.8.0"
     "@emotion/memoize" "^0.7.5"
-    "@emotion/serialize" "^1.0.0"
+    "@emotion/serialize" "^1.0.2"
     babel-plugin-macros "^2.6.1"
     convert-source-map "^1.5.0"
     escape-string-regexp "^4.0.0"
@@ -77,9 +76,9 @@
     stylis "^4.0.3"
 
 "@emotion/cache@^11.1.3":
-  version "11.1.3"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd"
-  integrity sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.4.0.tgz#293fc9d9a7a38b9aad8e9337e5014366c3b09ac0"
+  integrity sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==
   dependencies:
     "@emotion/memoize" "^0.7.4"
     "@emotion/sheet" "^1.0.0"
@@ -108,10 +107,10 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
-"@emotion/serialize@^1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.1.tgz#322cdebfdbb5a88946f17006548191859b9b0855"
-  integrity sha512-TXlKs5sgUKhFlszp/rg4lIAZd7UUSmJpwaf9/lAEFcUh2vPi32i7x4wk7O8TN8L8v2Ol8k0CxnhRBY0zQalTxA==
+"@emotion/serialize@^1.0.0", "@emotion/serialize@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
+  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
   dependencies:
     "@emotion/hash" "^0.8.0"
     "@emotion/memoize" "^0.7.4"
@@ -139,10 +138,17 @@
   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"
-  integrity sha512-koZJ89uLZufDvToeWO5BrC4CR4OUfHnUz2qoPs/daQH6qq3IN62QFxCTZ+bKaCE0xaoCAJYE4AXre8AbghCrhg==
+  version "10.17.60"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.60.tgz#35f3d6213daed95da7f0f73e75bcc6980e90597b"
+  integrity sha512-F0KIgDJfy2nA3zMLmWGKxcH2ZVEtCZXHHdOQs2gSaQ27+lNeEfGxzkIw90aXswATX7AZ33tahPbzy6KAfUreVw==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -155,9 +161,9 @@
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
 "@types/react@^17.0.0":
-  version "17.0.3"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79"
-  integrity sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg==
+  version "17.0.11"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451"
+  integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"
@@ -168,6 +174,11 @@
   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==
+
 ansi-regex@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
@@ -196,10 +207,15 @@ 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"
-  integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 boolbase@^1.0.0:
   version "1.0.0"
@@ -228,29 +244,44 @@ chalk@^2.0.0:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-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"
-  integrity sha512-YYs5JvbpU19VYJyj+F7oYrIE2BOll1/hRU7rEy/5+v9BzkSo3bK81iAeeQEMI92vRIxz677m72UmJUiVwwgjfQ==
+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@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823"
+  integrity sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==
   dependencies:
-    css-select "^3.1.2"
-    css-what "^4.0.0"
-    domelementtype "^2.1.0"
-    domhandler "^4.0.0"
-    domutils "^2.4.4"
+    css-select "^4.1.3"
+    css-what "^5.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+    domutils "^2.7.0"
 
 cheerio@^1.0.0-rc.5:
-  version "1.0.0-rc.5"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.5.tgz#88907e1828674e8f9fee375188b27dadd4f0fa2f"
-  integrity sha512-yoqps/VCaZgN4pfXtenwHROTp8NG6/Hlt4Jpz2FEP0ZJQ+ZUkVDd0hAPDNKhj3nakpfPt/CNs57yEtxD1bXQiw==
+  version "1.0.0-rc.10"
+  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.10.tgz#2ba3dcdfcc26e7956fc1f440e61d51c643379f3e"
+  integrity sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==
   dependencies:
-    cheerio-select-tmp "^0.1.0"
-    dom-serializer "~1.2.0"
-    domhandler "^4.0.0"
-    entities "~2.1.0"
-    htmlparser2 "^6.0.0"
-    parse5 "^6.0.0"
-    parse5-htmlparser2-tree-adapter "^6.0.0"
+    cheerio-select "^1.5.0"
+    dom-serializer "^1.3.2"
+    domhandler "^4.2.0"
+    htmlparser2 "^6.1.0"
+    parse5 "^6.0.1"
+    parse5-htmlparser2-tree-adapter "^6.0.1"
+    tslib "^2.2.0"
 
 cliui@^7.0.2:
   version "7.0.4"
@@ -291,9 +322,9 @@ concat-map@0.0.1:
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
 convert-source-map@^1.5.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
-  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
   dependencies:
     safe-buffer "~5.1.1"
 
@@ -326,26 +357,26 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-css-select@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-3.1.2.tgz#d52cbdc6fee379fba97fb0d3925abbd18af2d9d8"
-  integrity sha512-qmss1EihSuBNWNNhHjxzxSfJoFBM/lERB/Q4EnsJQQC62R2evJDW481091oAdOr9uh46/0n4nrg0It5cAnj1RA==
+css-select@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.3.tgz#a70440f70317f2669118ad74ff105e65849c7067"
+  integrity sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==
   dependencies:
     boolbase "^1.0.0"
-    css-what "^4.0.0"
-    domhandler "^4.0.0"
-    domutils "^2.4.3"
+    css-what "^5.0.0"
+    domhandler "^4.2.0"
+    domutils "^2.6.0"
     nth-check "^2.0.0"
 
-css-what@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-4.0.0.tgz#35e73761cab2eeb3d3661126b23d7aa0e8432233"
-  integrity sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A==
+css-what@^5.0.0, css-what@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
+  integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
 
 csstype@^3.0.2:
-  version "3.0.7"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.7.tgz#2a5fb75e1015e84dd15692f71e89a1450290950b"
-  integrity sha512-KxnUB0ZMlnUWCsx2Z8MUsr6qV6ja1w9ArPErJaJaF8a5SOWoHLIszeCTKGRGRgtLgYrs1E8CHkNSP1VZTTPc9g==
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
+  integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
 d@1, d@^1.0.1:
   version "1.0.1"
@@ -355,35 +386,49 @@ d@1, d@^1.0.1:
     es5-ext "^0.10.50"
     type "^1.0.1"
 
-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"
-  integrity sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==
+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.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
   dependencies:
     domelementtype "^2.0.1"
-    domhandler "^4.0.0"
+    domhandler "^4.2.0"
     entities "^2.0.0"
 
-domelementtype@^2.0.1, domelementtype@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.1.0.tgz#a851c080a6d1c3d94344aed151d99f669edf585e"
-  integrity sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==
+domelementtype@^2.0.1, 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@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.0.0.tgz#01ea7821de996d85f69029e81fa873c21833098e"
-  integrity sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==
+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.1.0"
+    domelementtype "^2.0.1"
 
-domutils@^2.4.3, domutils@^2.4.4:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.5.0.tgz#42f49cffdabb92ad243278b331fd761c1c2d3039"
-  integrity sha512-Ho16rzNMOFk2fPwChGh3D2D9OEHAfG19HgmRR2l+WLSsIstNsAYBzePH412bL0y5T44ejABIVfTHQ8nqi/tBCg==
+domhandler@^4.0.0, domhandler@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.0.tgz#f9768a5f034be60a89a27c2e4d0f74eba0d8b059"
+  integrity sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==
+  dependencies:
+    domelementtype "^2.2.0"
+
+domutils@^2.4.2, domutils@^2.5.2, domutils@^2.6.0, domutils@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442"
+  integrity sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg==
   dependencies:
     dom-serializer "^1.0.1"
-    domelementtype "^2.0.1"
-    domhandler "^4.0.0"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -395,11 +440,6 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
-entities@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
-  integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -481,6 +521,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"
@@ -502,9 +547,9 @@ get-caller-file@^2.0.5:
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
 glob@^7.0.5, glob@^7.1.3:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
   dependencies:
     fs.realpath "^1.0.0"
     inflight "^1.0.4"
@@ -525,14 +570,34 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-htmlparser2@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.0.1.tgz#422521231ef6d42e56bd411da8ba40aa36e91446"
-  integrity sha512-GDKPd+vk4jvSuvCbyuzx/unmXkk090Azec7LovXP8as1Hn8q9p3hbjmDGbUqqhknw0ajwit6LiiWqfiTUPMK7w==
+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.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
   dependencies:
     domelementtype "^2.0.1"
     domhandler "^4.0.0"
-    domutils "^2.4.4"
+    domutils "^2.5.2"
     entities "^2.0.0"
 
 import-fresh@^3.1.0:
@@ -561,23 +626,56 @@ 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"
-  integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1"
+  integrity sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==
   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 +706,12 @@ 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@^4.17.19:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+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=
 
-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 +725,29 @@ lru-queue@^0.1.0:
   dependencies:
     es5-ext "~0.10.2"
 
+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,10 +762,18 @@ 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"
-  integrity sha512-vqoxj7eMzsqX0M6/dkgoNFPw6Mztgn5qjSl0bWGboQeU7Y4UPLeyoqQw6JI+0qmBcJYdkr3nK7dqY8u/fgRp5g==
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/minimal-polyfills/-/minimal-polyfills-2.2.1.tgz#7249d7ece666d3b4e1ec1c1b8f949eb9d44e2308"
+  integrity sha512-WLmHQrsZob4rVYf8yHapZPNJZ3sspGa/sN8abuSD59b0FifDEE7HMfLUi24z7mPZqTpBXy4Svp+iGvAmclCmXg==
 
 minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
@@ -658,6 +787,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"
@@ -702,6 +836,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"
@@ -712,14 +858,14 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse5-htmlparser2-tree-adapter@^6.0.0:
+parse5-htmlparser2-tree-adapter@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
   integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
   dependencies:
     parse5 "^6.0.1"
 
-parse5@^6.0.0, parse5@^6.0.1:
+parse5@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
@@ -730,9 +876,9 @@ path-is-absolute@^1.0.0:
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
 path-parse@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
-  integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
 
 path-type@^4.0.0:
   version "4.0.0"
@@ -747,14 +893,15 @@ 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.1.0:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/powerhooks/-/powerhooks-0.1.4.tgz#82aae8dae5485a154d3ce4e89342a2d68cb2a413"
+  integrity sha512-ig47hJIW/b75gCS3l2EtK8NVAduNVd9vem8IvaWkuPuZIP4mbDAy4Rc0/hvjXVUPs9OzK7jc/zIQika3tTacYg==
   dependencies:
     evt "2.0.0-beta.15"
     memoizee "^0.4.15"
     resize-observer-polyfill "^1.5.1"
+    tsafe "^0.1.0"
 
 process-nextick-args@~2.0.0:
   version "2.0.1"
@@ -766,6 +913,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,10 +929,36 @@ 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"
-  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -809,6 +991,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"
@@ -895,9 +1084,9 @@ strip-ansi@^6.0.0:
     ansi-regex "^5.0.0"
 
 stylis@^4.0.3:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.7.tgz#412a90c28079417f3d27c028035095e4232d2904"
-  integrity sha512-OFFeUXFgwnGOKvEXaSv0D0KQ5ADP0n6g3SVONx6I/85JzNZ3u50FRwB3lVIk1QO2HNdI75tbVzc4Z66Gdp9voA==
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
+  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
 
 supports-color@^5.3.0:
   version "5.5.0"
@@ -927,10 +1116,25 @@ 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==
+
+tsafe@^0.1.0:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-0.1.15.tgz#9e2b6137fb5a49fc7c23cb0bc49ae09bab215f2a"
+  integrity sha512-aAWMOACHXMmwE2zRcQpBv+whxYqB4zvAbs+dzwbnGaGK9NAOQ65m0+WyO+jw/41JzCX7orJU/ieFHTmgehTOKA==
+
+tslib@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
+
+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"
 
@@ -945,9 +1149,55 @@ type@^2.0.0:
   integrity sha512-180WMDQaIMm3+7hGXWf12GtdniDEy7nYcyFMKJn/eZz/6tSLXrUN9V0wKSbMjej0I1WHWbpREDEKHtqPQa9NNw==
 
 typescript@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.3.tgz#39062d8019912d43726298f09493d598048c1ce3"
-  integrity sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.4.tgz#3f85b986945bcf31071decdd96cf8bfa65f9dcbc"
+  integrity sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==
+
+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"
@@ -966,6 +1216,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,15 +1248,15 @@ 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==
 
 y18n@^5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.5.tgz#8769ec08d03b1ea2df2500acef561743bbb9ab18"
-  integrity sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
 yaml@^1.7.2:
   version "1.10.2"
@@ -996,9 +1264,9 @@ yaml@^1.7.2:
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
 yargs-parser@^20.2.2:
-  version "20.2.7"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.7.tgz#61df85c113edfb5a7a4e36eb8aa60ef423cbc90a"
-  integrity sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==
+  version "20.2.9"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee"
+  integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
 yargs@^16.1.0:
   version "16.2.0"