From cac941a300f47fef2b88c298123d1a874631a278 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benjamin=20B=C3=A4dorf?= Date: Sun, 27 Nov 2022 21:38:41 +0100 Subject: [PATCH] Improve keycloak theming --- .dev-import/.gitkeep | 0 .gitignore | 1 + README.md | 33 +++-- account/template.ftl | 28 ++-- common/resources/css/index.css | 56 ++++++-- common/resources/scss/form-group.scss | 7 + common/resources/scss/i18n-links.scss | 44 +++++++ common/resources/scss/index.scss | 1 + common/resources/scss/main.scss | 5 - common/resources/scss/page.scss | 14 +- login/login-password.ftl | 86 +++++++------ login/login-username.ftl | 178 +++++++++++++++----------- login/template.ftl | 47 ++++--- login/theme.properties | 2 + 14 files changed, 324 insertions(+), 178 deletions(-) create mode 100644 .dev-import/.gitkeep create mode 100644 common/resources/scss/i18n-links.scss diff --git a/.dev-import/.gitkeep b/.dev-import/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/.gitignore b/.gitignore index 3c933ee..259759a 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ tags .direnv common/resources/css/*.css +.dev-import/*.json diff --git a/README.md b/README.md index 27fc9ed..bd6260d 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,25 @@ # pub.solar Keycloak theme -To start a dev keycloak instance that can show the theme. -``` -docker run \ - --name keycloak-theme-dev \ - -p 8080:8080 \ - -e KEYCLOAK_ADMIN=admin \ - -e KEYCLOAK_ADMIN_PASSWORD=admin \ - -v $(pwd):/opt/keycloak/themes/pub.solar \ - quay.io/keycloak/keycloak:20.0.1 \ - start-dev -``` +## Development setup + +To start a dev keycloak instance that can show the theme, you need to do the following: + +1. Go into Keycloak, and export the `pub.solar` realm config. In Keycloak, open the pub.solar realm, click on the menu item "Realm settings", open the dropdown "Action", and click "Partial export". Move the generated JSON file into `./.dev-imports` in this repo. + +2. Run the following command: + ``` + docker run \ + --name keycloak-theme-dev \ + -p 8080:8080 \ + -e KEYCLOAK_ADMIN=admin \ + -e KEYCLOAK_ADMIN_PASSWORD=admin \ + -v $(pwd):/opt/keycloak/themes/pub.solar \ + -v $(pwd)/.dev-import:/opt/keycloak/data/import \ + quay.io/keycloak/keycloak:20.0.1 \ + start-dev --import-realm + ``` + +3. After this, you can start and stop the container using `docker start keycloak-theme-dev` and `docker-stop keycloak-theme-dev`. + +4. Connect to the local keycloak instance at `http://localhost:8080` and open the administration console. In the `pub.solar` realm, click on the menu item "Clients", then the client "account", "Advanced" tab, "Authentication flow overrides" section, select "Webauthn Browser" for the "Browser Flow". Press save. diff --git a/account/template.ftl b/account/template.ftl index 7beb105..e5053a3 100644 --- a/account/template.ftl +++ b/account/template.ftl @@ -57,22 +57,22 @@
pub.solar/ + + <#if realm.internationalizationEnabled && locale.supported?size gt 1> + + +