#4: Guide for implementing a missing page

This commit is contained in:
garronej 2021-05-01 15:48:49 +02:00
parent f673a65304
commit 2249fa9232

View File

@ -54,6 +54,7 @@ If you already have a Keycloak custom theme, it can be easily ported to Keycloak
- [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)
- [Some pages aren't customizable. Why?](#some-pages-arent-customizable-why)
- [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)
- [GitHub Actions](#github-actions)
@ -178,6 +179,14 @@ You can find an example of such customization [here](https://github.com/InseeFrL
And you can test the result in production by trying the login register page of [Onyxia](https://datalab.sspcloud.fr)
WARNING: If you chose to go this way use:
```json
"dependencies": {
"keycloakify": "~X.Y.Z"
}
```
in your `package.json` instead of `^X.Y.Z`. A minor release might break your app.
### Hot reload
Rebuild the theme each time you make a change to see the result is not practical.
@ -204,6 +213,14 @@ 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)
## Some pages aren't customizable. 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 are](https://github.com/InseeFrLab/keycloakify/tree/main/src/lib/components) the pages currently implemented.
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.
## Enable loading in a blink of an eye of login pages ⚡ (--external-assets)
By default the theme generated is standalone. Meaning that when your users
@ -261,6 +278,8 @@ and a `build/static/` directory generated by webpack.
You won't be able to [import things from your public directory **in your JavaScript code**](https://create-react-app.dev/docs/using-the-public-folder/#adding-assets-outside-of-the-module-system).
(This isn't recommended anyway).
## `@font-face` importing fonts from the `src/` dir
If you are building the theme with [--external-assets](#enable-loading-in-a-blink-of-a-eye-of-login-pages-)