Update changelog v1.0.3

CHANGELOG.md

@@ -1,3 +1,16 @@
+### **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  

README.md

@@ -9,6 +9,9 @@
     <img src="https://img.shields.io/bundlephobia/minzip/keycloakify">
     <img src="https://img.shields.io/npm/dw/keycloakify">
     <img src="https://img.shields.io/npm/l/keycloakify">
+    <a href="https://github.com/thomasdarimont/awesome-keycloak">
+        <img src="https://awesome.re/mentioned-badge.svg"/>
+    </a>
 </p>
 
 <p align="center">
@@ -41,6 +44,8 @@ Here is `keycloakify` for you 🍸
     <img src="https://user-images.githubusercontent.com/6702424/114332075-c5e37900-9b45-11eb-910b-48a05b3d90d9.gif">
 </p>  
 
+**TL;DR**: [Here](https://github.com/garronej/keycloakify-demo-app) is a Hello World React project with Keycloakify set up.  
+
 *NOTE: No autocomplete here just because it was an incognito window.*  
 
 If you already have a Keycloak custom theme, it can be easily ported to Keycloakify.
@@ -49,6 +54,8 @@ If you already have a Keycloak custom theme, it can be easily ported to Keycloak
 
 
 - [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)
@@ -58,7 +65,6 @@ If you already have a Keycloak custom theme, it can be easily ported to Keycloak
 - [Support for Terms and conditions](#support-for-terms-and-conditions)
 - [Some pages still have the default theme. Why?](#some-pages-still-have-the-default-theme-why)
 - [GitHub Actions](#github-actions)
-- [Requirements](#requirements)
 - [Limitations](#limitations)
   - [`process.env.PUBLIC_URL` not supported.](#processenvpublic_url-not-supported)
   - [`@font-face` importing fonts from the `src/` dir](#font-face-importing-fonts-from-thesrc-dir)
@@ -68,9 +74,29 @@ If you already have a Keycloak custom theme, it can be easily ported to Keycloak
 - [Kickstart video](#kickstart-video)
 - [Email domain whitelist](#email-domain-whitelist)
 
-# How to use
+# Requirements 
 
-**TL;DR**: [Here](https://github.com/garronej/keycloakify-demo-app) is a Hello World React project with Keycloakify set up.  
+Tested with the following Keycloak versions: 
+- [11.0.3](https://hub.docker.com/layers/jboss/keycloak/11.0.3/images/sha256-4438f1e51c1369371cb807dffa526e1208086b3ebb9cab009830a178de949782?context=explore)  
+- [12.0.4](https://hub.docker.com/layers/jboss/keycloak/12.0.4/images/sha256-67e0c88e69bd0c7aef972c40bdeb558a974013a28b3668ca790ed63a04d70584?context=explore)  
+
+This tool will be maintained to stay compatible with Keycloak v11 and up, however, the default pages you will get 
+(before you customize it) will always be the ones of Keycloak v11.
+
+This tool assumes you are bundling your app with Webpack (tested with 4.44.2) .
+It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
+and a `build/static/` directory generated by webpack. 
+For more information see [this issue](https://github.com/InseeFrLab/keycloakify/issues/5#issuecomment-832296432)
+## My framework doesn’t seem to be supported, what can I do?  
+
+Currently Keycloakify is only compatible with `create-react-app` apps.
+It doesn’t mean that you can't use Keycloakify if you are using Next.js, Express or any other 
+framework that involves SSR but your Keycloak theme will need to be a standalone project.  
+Find specific instructions about how to get started [**here**](https://github.com/garronej/keycloakify-demo-app#keycloak-theme-only).  
+
+To share your styles between your main app and your login pages you will need to externalize your design system by making it a
+separate module. Checkout [ts_ci](https://github.com/garronej/ts_ci), it can help with that.
+# How to use
 ## Setting up the build tool
 
 ```bash
@@ -241,10 +267,10 @@ Then to load your own therms of services using [like this](https://github.com/ga
 
 # Some pages still have the default theme. Why?
 
-This project only support the most common user facing pages of Keycloak login.
-[Here is](https://user-images.githubusercontent.com/6702424/116784128-d4f97f00-aa92-11eb-92c9-b024c2521aa3.png) the complete list of pages.  
-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.
+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.
 
@@ -255,18 +281,6 @@ for the `login-otp.ftl` page. You can use it as a model for implementing other p
 [Here is a demo repo](https://github.com/garronej/keycloakify-demo-app) to show how to automate
 the building and publishing of the theme (the .jar file).
 
-# Requirements 
-
-Tested with the following Keycloak versions: 
-- [11.0.3](https://hub.docker.com/layers/jboss/keycloak/11.0.3/images/sha256-4438f1e51c1369371cb807dffa526e1208086b3ebb9cab009830a178de949782?context=explore)  
-- [12.0.4](https://hub.docker.com/layers/jboss/keycloak/12.0.4/images/sha256-67e0c88e69bd0c7aef972c40bdeb558a974013a28b3668ca790ed63a04d70584?context=explore)  
-
-This tool will be maintained to stay compatible with Keycloak v11 and up, however, the default pages you will get 
-(before you customize it) will always be the ones of Keycloak v11.
-
-This tool assumes you are bundling your app with Webpack (tested with 4.44.2) .
-It assumes there is a `build/` directory at the root of your react project directory containing a `index.html` file
-and a `build/static/` directory generated by webpack.
 
 **All this is defaults with [`create-react-app`](https://create-react-app.dev)** (tested with 4.0.3)
 

package.json

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

src/lib/components/LoginOtp.tsx

@@ -58,7 +58,7 @@ export const LoginOtp = memo(({ kcContext, ...props }: { kcContext: KcContext.Lo
                             <div className={cx(props.kcInputWrapperClass)}>
                                 {
                                     otpLogin.userOtpCredentials.map(otpCredential =>
-                                        <div className={cx(props.kcSelectOTPListClass)}>
+                                        <div key={otpCredential.id} className={cx(props.kcSelectOTPListClass)}>
                                             <input type="hidden" value="${otpCredential.id}" />
                                             <div className={cx(props.kcSelectOTPListItemClass)}>
                                                 <span className={cx(props.kcAuthenticatorOtpCircleClass)} />

src/lib/kcContextMocks/index.ts

@@ -211,7 +211,7 @@ export const kcTermsContext: KcContext.Terms = {
     "pageId": "terms.ftl"
 };
 
-export const kcLoginOtcContext: KcContext.LoginOtp = {
+export const kcLoginOtpContext: KcContext.LoginOtp = {
     ...kcCommonContext,
     "pageId": "login-otp.ftl",
     "otpLogin": {