From 18ed86f1e94c5ad3ff291dd9d398e6d2cf98a4e9 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Sat, 4 Mar 2023 15:46:33 +0100 Subject: [PATCH 1/9] Update README.md Signed-off-by: Joseph Garrone --- README.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 898ccaf..7d92f78 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,11 @@ A starter/demo project for [Keycloakify](https://keycloakify.dev) -> NOTE: If you are only looking to create a theme and don't care about integrating it into an React app there -> are a lot of things that you can remove from this starter. [Please read this](#standalone-keycloak-theme). +# Introduction + +This repo constitutes an easily reusable setup for a standalone Keycloak theme project OR for a SPA React App that generates a +Keycloak theme that goes along with it. +If you are only looking to create a theme (an not a theme + an App) there are a lot of things that you can remove from this starter: [Please read this](#standalone-keycloak-theme). # Quick start @@ -23,11 +26,6 @@ yarn build-keycloak-theme # your theme on a real Keycloak instance. ``` -# Introduction - -This repo constitutes an easily reusable CI setup for SPA React App that generates Keycloaks's theme -using [keycloakify](https://github.com/InseeFrLab/keycloakify). - # The CI workflow - You need to manually allow GitHub Action to push on your REPO. For this reason the initial setup will fail. You need to enabled permission and re-run failed job: [see video](https://user-images.githubusercontent.com/6702424/213480604-0aac0ea7-487f-491d-94ae-df245b2c7ee8.mov). From d31b14a7da82d6a2ecf4b246c23d986a5a16c186 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Sat, 4 Mar 2023 15:47:57 +0100 Subject: [PATCH 2/9] Update README.md Signed-off-by: Joseph Garrone --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7d92f78..90cde69 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ If you want an example of an app that put that setup in production checkout onyx The CI creates two jars - `keycloak-theme.jar`: Generated with `npx keycloakify --external-assets`, the assets, located `static/**/*`, like for example - `static/js/main..js` will be downloaded from `https://demo-app.keycloakify.dev/static/js/main..js` (`demo-app.keycloakify.dev` is + `static/js/main..js` will be downloaded from `https://starter.keycloakify.dev/static/js/main..js` (`starter.keycloakify.dev` is specified in the `package.json`. - `standalone-keycloak-theme.jar`: Generated with `npx keycloakify`, this theme is fully standalone, all assets will be served by the Keycloak server, for example `static/js/main..js` will be downloaded from an url like `http:///resources/xxxx/login/keycloakify-starter/build/static/js/main..js`. From d4c83c625e34b827c339b6675adf8c580915e56d Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Sat, 4 Mar 2023 15:49:45 +0100 Subject: [PATCH 3/9] Update README.md Signed-off-by: Joseph Garrone --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 90cde69..1c92338 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ yarn build-keycloak-theme - You need to manually allow GitHub Action to push on your REPO. For this reason the initial setup will fail. You need to enabled permission and re-run failed job: [see video](https://user-images.githubusercontent.com/6702424/213480604-0aac0ea7-487f-491d-94ae-df245b2c7ee8.mov). - This CI is configured to both publish on [GitHub Pages](https://github.com/codegouvfr/keycloakify-starter/blob/3617a71deb1a6544c3584aa8d6d2241647abd48c/.github/workflows/ci.yaml#L51-L76) and on [DockerHub](https://github.com/codegouvfr/keycloakify-starter/blob/3617a71deb1a6544c3584aa8d6d2241647abd48c/.github/workflows/ci.yaml#L78-L123). In practice you probably want one - or the other but not both. + or the other but not both... or none if you are just building a theme (and not a theme + an app). We deploy the demo app at [starter.keycloakify.dev](https://starter.keycloakify.dev) using GitHub page on the branch `gh-pages` (you have to enable it). To configure your own domain name please refer to [this documentation](https://docs.gitlanding.dev/using-a-custom-domain-name). - To release **don't create a tag manually**, the CI do it for you. Just update the `package.json`'s version field and push. From 8a985fcb95e5b9dea4a8205aca5fa0055959e217 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Sat, 4 Mar 2023 15:52:40 +0100 Subject: [PATCH 4/9] Update README.md Signed-off-by: Joseph Garrone --- README.md | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 1c92338..5c07a4a 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,10 @@ yarn build-keycloak-theme - You need to manually allow GitHub Action to push on your REPO. For this reason the initial setup will fail. You need to enabled permission and re-run failed job: [see video](https://user-images.githubusercontent.com/6702424/213480604-0aac0ea7-487f-491d-94ae-df245b2c7ee8.mov). - This CI is configured to both publish on [GitHub Pages](https://github.com/codegouvfr/keycloakify-starter/blob/3617a71deb1a6544c3584aa8d6d2241647abd48c/.github/workflows/ci.yaml#L51-L76) and on [DockerHub](https://github.com/codegouvfr/keycloakify-starter/blob/3617a71deb1a6544c3584aa8d6d2241647abd48c/.github/workflows/ci.yaml#L78-L123). In practice you probably want one - or the other but not both... or none if you are just building a theme (and not a theme + an app). + or the other but not both... or neither if you are just building a theme (and not a theme + an app). + To enables the CI to publish on DockerHub on your behalf go to repository `Settings` tab, then `Secrets` you will need to add two new secrets: + `DOCKERHUB_TOKEN`, you Dockerhub authorization token. + `DOCKERHUB_USERNAME`, Your Dockerhub username. We deploy the demo app at [starter.keycloakify.dev](https://starter.keycloakify.dev) using GitHub page on the branch `gh-pages` (you have to enable it). To configure your own domain name please refer to [this documentation](https://docs.gitlanding.dev/using-a-custom-domain-name). - To release **don't create a tag manually**, the CI do it for you. Just update the `package.json`'s version field and push. @@ -67,14 +70,6 @@ yarn && yarn build && tar -cvf build.tar ./build && docker build -f Dockerfile.c docker run -it -dp 8083:80 codegouvfr/keycloakify-starter:test ``` -## DockerHub credentials - -To enables the CI to publish on DockerHub on your behalf go to -repository `Settings` tab, then `Secrets` you will need to add two new secrets: - -- `DOCKERHUB_TOKEN`, you Dockerhub authorization token. -- `DOCKERHUB_USERNAME`, Your Dockerhub username. - # Standalone keycloak theme If you are only looking to create a keycloak theme, you can run theses few commands From 08005ae5eeb672e94f60cf2bb1f33b33c7830992 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Sat, 4 Mar 2023 15:54:27 +0100 Subject: [PATCH 5/9] Update README.md Signed-off-by: Joseph Garrone --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5c07a4a..e05e6c3 100644 --- a/README.md +++ b/README.md @@ -29,7 +29,7 @@ yarn build-keycloak-theme # The CI workflow - You need to manually allow GitHub Action to push on your REPO. For this reason the initial setup will fail. You need to enabled permission and re-run failed job: [see video](https://user-images.githubusercontent.com/6702424/213480604-0aac0ea7-487f-491d-94ae-df245b2c7ee8.mov). -- This CI is configured to both publish on [GitHub Pages](https://github.com/codegouvfr/keycloakify-starter/blob/3617a71deb1a6544c3584aa8d6d2241647abd48c/.github/workflows/ci.yaml#L51-L76) and on [DockerHub](https://github.com/codegouvfr/keycloakify-starter/blob/3617a71deb1a6544c3584aa8d6d2241647abd48c/.github/workflows/ci.yaml#L78-L123). In practice you probably want one +- This CI is configured to both publish on [GitHub Pages](https://github.com/codegouvfr/keycloakify-starter/blob/3617a71deb1a6544c3584aa8d6d2241647abd48c/.github/workflows/ci.yaml#L51-L76) and on [DockerHub](https://github.com/codegouvfr/keycloakify-starter/blob/3617a71deb1a6544c3584aa8d6d2241647abd48c/.github/workflows/ci.yaml#L78-L123) (An Ngnix based image). In practice you probably want one or the other but not both... or neither if you are just building a theme (and not a theme + an app). To enables the CI to publish on DockerHub on your behalf go to repository `Settings` tab, then `Secrets` you will need to add two new secrets: `DOCKERHUB_TOKEN`, you Dockerhub authorization token. From 7c57a2a29e4a56740e7f4390d92135a8dc990a06 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Sat, 4 Mar 2023 16:00:11 +0100 Subject: [PATCH 6/9] Update README.md Signed-off-by: Joseph Garrone --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e05e6c3..ded8d46 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ yarn build-keycloak-theme # Build the theme one time (some assets will be copied # public/keycloak_static, they are needed to dev your page outside of Keycloak) yarn start # See the Hello World app # Uncomment line 15 of src/keycloak-theme/kcContext, reload https://localhost:3000 -# You can now develop your Login pages. +# You can now develop your Login pages. (Don't forget to comment it back when you're done) # Think your theme is ready? Run yarn build-keycloak-theme From 58fa92f5ac9bb661769ed7c4ed5e37a19f50f3cc Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Sat, 4 Mar 2023 16:14:31 +0100 Subject: [PATCH 7/9] Update i18n.ts Signed-off-by: Joseph Garrone --- src/keycloak-theme/i18n.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/keycloak-theme/i18n.ts b/src/keycloak-theme/i18n.ts index d917b5d..3b89a1e 100644 --- a/src/keycloak-theme/i18n.ts +++ b/src/keycloak-theme/i18n.ts @@ -6,6 +6,10 @@ export function useI18n(props: Props) { const { kcContext } = props; return useI18nBase({ kcContext, + // NOTE: Here you can override the default i18n messages + // or define new ones that, for example, you would have + // defined in the Keycloak admin UI for UserProfile + // https://user-images.githubusercontent.com/6702424/182050652-522b6fe6-8ee5-49df-aca3-dba2d33f24a5.png "extraMessages": { "en": { "alphanumericalCharsOnly": "Only alphanumerical characters", From 92abd2161813fbd931cc475bc80824f5c51b0e76 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Sat, 4 Mar 2023 16:16:26 +0100 Subject: [PATCH 8/9] Update KcApp.tsx Signed-off-by: Joseph Garrone --- src/keycloak-theme/KcApp.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/keycloak-theme/KcApp.tsx b/src/keycloak-theme/KcApp.tsx index de1f801..514b01e 100644 --- a/src/keycloak-theme/KcApp.tsx +++ b/src/keycloak-theme/KcApp.tsx @@ -35,6 +35,12 @@ export default function App(props: { kcContext: KcContext; }) { if (i18n === null) { return null; } + + /* + * Examples assuming i18n.currentLanguageTag === "en": + * i18n.msg("access-denied") === Access denied + * i18n.msg("foo") === foo in English + */ const pageProps: Omit, "kcContext"> = { i18n, From 9f2e4438bd54648767571be7ef47a777bc6565f8 Mon Sep 17 00:00:00 2001 From: Joseph Garrone Date: Sat, 4 Mar 2023 16:17:39 +0100 Subject: [PATCH 9/9] Update KcApp.tsx Signed-off-by: Joseph Garrone --- src/keycloak-theme/KcApp.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/keycloak-theme/KcApp.tsx b/src/keycloak-theme/KcApp.tsx index 514b01e..57d320f 100644 --- a/src/keycloak-theme/KcApp.tsx +++ b/src/keycloak-theme/KcApp.tsx @@ -31,8 +31,8 @@ export default function App(props: { kcContext: KcContext; }) { const i18n = useI18n({ kcContext }); - //NOTE: Locales not yet downloaded if (i18n === null) { + //NOTE: Locales not yet downloaded, we could as well display a loading progress but it's usually a matter of milliseconds. return null; }