From 268471fed6df131975440ffe4eb93260da44c5c1 Mon Sep 17 00:00:00 2001
From: ewelinagr <ewelina@thehyve.nl>
Date: Tue, 7 May 2024 14:44:36 +0200
Subject: [PATCH 1/4] Add custome fairspace login theme.

---
 charts/fairspace-keycloak/values.yaml         |  20 ++++++
 local-development/deploy.sh                   |  11 ++++
 local-development/fairspace-realm.json        |   5 +-
 local-development/local-values.yaml           |  14 ++++
 themes/Dockerfile                             |   2 +
 themes/README.md                              |   1 +
 .../login/resources/css/fairspace/login.css   |  62 ++++++++++++++++++
 .../resources/img/fairspace_logo_white.png    | Bin 0 -> 5600 bytes
 themes/fairspace_theme/login/theme.properties |   6 ++
 9 files changed, 119 insertions(+), 2 deletions(-)
 create mode 100644 themes/Dockerfile
 create mode 100644 themes/README.md
 create mode 100644 themes/fairspace_theme/login/resources/css/fairspace/login.css
 create mode 100644 themes/fairspace_theme/login/resources/img/fairspace_logo_white.png
 create mode 100644 themes/fairspace_theme/login/theme.properties

diff --git a/charts/fairspace-keycloak/values.yaml b/charts/fairspace-keycloak/values.yaml
index a5dcadf..333c92e 100644
--- a/charts/fairspace-keycloak/values.yaml
+++ b/charts/fairspace-keycloak/values.yaml
@@ -31,6 +31,26 @@ keycloakx:
     database: keycloak
     existingSecret: keycloak-postgresql
     username: keycloak
+  extraInitContainers: |
+    - name: theme-provider
+      image: keycloak-fairspace-theme:latest
+      imagePullPolicy: IfNotPresent
+      command:
+        - sh
+      args:
+        - -c
+        - |
+          echo "Copying Fairspace theme..."
+          cp -R /fairspace_theme/* /theme
+      volumeMounts:
+        - name: theme
+          mountPath: /theme
+  extraVolumeMounts: |
+    - name: theme
+      mountPath: /opt/keycloak/themes/fairspace_theme
+  extraVolumes: |
+    - name: theme
+      emptyDir: { }
 
 postgresql:
   fullnameOverride: keycloak-db-postgresql
diff --git a/local-development/deploy.sh b/local-development/deploy.sh
index 58d3645..19e3101 100755
--- a/local-development/deploy.sh
+++ b/local-development/deploy.sh
@@ -7,6 +7,17 @@ helm_cmd=$(realpath ~/bin/helm3/helm)
 # $ minikube start
 # $ minikube addons enable ingress
 
+eval $(minikube docker-env)
+
+pushd "${here}"
+
+pushd ../themes
+(docker build . -t keycloak-fairspace-theme:latest) || {
+  echo "Building Fairspace theme image failed."
+  popd
+  exit 1
+}
+
 pushd "${here}"
 
 (kubectl get ns keycloak-dev || kubectl create ns keycloak-dev) && \
diff --git a/local-development/fairspace-realm.json b/local-development/fairspace-realm.json
index 52dd6d6..c9398c4 100644
--- a/local-development/fairspace-realm.json
+++ b/local-development/fairspace-realm.json
@@ -1,8 +1,9 @@
 {
   "id": "fairspace",
   "realm": "fairspace",
-  "displayName": "Fairspace (local environment)",
-  "displayNameHtml": "<span style=\"text-transform: none\">Local environment<br><strong>Fairspace</strong></span>",
+  "displayName": "Fairspace (test environment)",
+  "displayNameHtml": "<div class=\"kc-logo-text\"><span>Fairspace</span></div>",
+  "loginTheme": "fairspace_theme",
   "notBefore": 0,
   "revokeRefreshToken": false,
   "refreshTokenMaxReuse": 0,
diff --git a/local-development/local-values.yaml b/local-development/local-values.yaml
index 5aa5651..7bc83f0 100644
--- a/local-development/local-values.yaml
+++ b/local-development/local-values.yaml
@@ -4,6 +4,20 @@ fairspaceKeycloak:
     postgresPassword: "keycloak" # Set passwords to prevent having a new password at every upgrade
 
 keycloakx:
+  extraInitContainers: |
+    - name: theme-provider
+      image: keycloak-fairspace-theme:latest
+      imagePullPolicy: IfNotPresent
+      command:
+        - sh
+      args:
+        - -c
+        - |
+          echo "Copying Fairspace theme..."
+          cp -R /fairspace_theme/* /theme
+      volumeMounts:
+        - name: theme
+          mountPath: /theme
   extraEnv: |
     - name: KEYCLOAK_ADMIN
       value: keycloak
diff --git a/themes/Dockerfile b/themes/Dockerfile
new file mode 100644
index 0000000..4339bfa
--- /dev/null
+++ b/themes/Dockerfile
@@ -0,0 +1,2 @@
+FROM busybox
+COPY fairspace_theme /fairspace_theme
\ No newline at end of file
diff --git a/themes/README.md b/themes/README.md
new file mode 100644
index 0000000..c361761
--- /dev/null
+++ b/themes/README.md
@@ -0,0 +1 @@
+TODO: document custom themes here...
\ No newline at end of file
diff --git a/themes/fairspace_theme/login/resources/css/fairspace/login.css b/themes/fairspace_theme/login/resources/css/fairspace/login.css
new file mode 100644
index 0000000..3aebc30
--- /dev/null
+++ b/themes/fairspace_theme/login/resources/css/fairspace/login.css
@@ -0,0 +1,62 @@
+/*# Overwrites login page style of keycloak theme.
+See: https://github.com/keycloak/keycloak/blob/main/themes/src/main/resources/theme/keycloak/login/resources/css/login.css */
+
+:root {
+    --kc-blue-light: rgba(106,134,232,1);
+    --kc-blue-light-transp-25: rgba(106,134,232,0.25);
+    --kc-blue-medium: rgba(52,95,157,1);
+    --kc-blue-dark: rgba(8,65,92,1);
+}
+
+.login-pf body {
+    background: radial-gradient(circle, var(--kc-blue-light) 5%, var(--kc-blue-medium) 25%, var(--kc-blue-dark) 75%);
+    background-size: cover;
+    height: 100%;
+}
+
+#kc-header-wrapper {
+    padding: 30px 10px 0;
+}
+
+div.kc-logo-text {
+    background-image: url(../../img/fairspace_logo_white.png);
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100px;
+    margin: 0 auto;
+}
+
+.card-pf {
+    color: white;
+    margin: 0 auto;
+    box-shadow: none;
+    max-width: 500px;
+    border: 1px solid;
+    border-radius: 25px;
+    border-color: var(--kc-blue-light-transp-25);
+    background-color: var(--kc-blue-light-transp-25);
+}
+
+.login-pf-page .card-pf {
+    padding: 60px 30px 70px;
+}
+
+.login-pf-page .login-pf-header h1 {
+    text-align: left;
+    font-weight: bold;
+}
+
+.pf-c-button.pf-m-primary {
+    background-color: var(--kc-blue-dark);
+    border-radius: 5px;
+}
+
+#kc-form-buttons {
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+
+.pf-c-form-control:not(textarea) {
+    border-radius: 5px;
+}
\ No newline at end of file
diff --git a/themes/fairspace_theme/login/resources/img/fairspace_logo_white.png b/themes/fairspace_theme/login/resources/img/fairspace_logo_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..6291bdf6a932e13fec7b73a511ec5ba6b430d679
GIT binary patch
literal 5600
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

literal 0
HcmV?d00001

diff --git a/themes/fairspace_theme/login/theme.properties b/themes/fairspace_theme/login/theme.properties
new file mode 100644
index 0000000..acde0a9
--- /dev/null
+++ b/themes/fairspace_theme/login/theme.properties
@@ -0,0 +1,6 @@
+# Copy of Keycloak theme with customisations for Fairspace.
+parent=keycloak
+import=common/keycloak
+
+styles=css/login.css css/fairspace/login.css
+kcLogoLink=https://thehyve.nl/services/fairspace

From c3a6cc5091117b74f0c472a17f3534775413410a Mon Sep 17 00:00:00 2001
From: ewelinagr <ewelina@thehyve.nl>
Date: Mon, 13 May 2024 12:30:53 +0200
Subject: [PATCH 2/4] Add github action to build and upload theme Docker
 images.

---
 ...build_and_upload_theme_on_push_to_dev.yaml | 55 +++++++++++++++++++
 themes/VERSION                                |  1 +
 2 files changed, 56 insertions(+)
 create mode 100644 .github/workflows/build_and_upload_theme_on_push_to_dev.yaml
 create mode 100644 themes/VERSION

diff --git a/.github/workflows/build_and_upload_theme_on_push_to_dev.yaml b/.github/workflows/build_and_upload_theme_on_push_to_dev.yaml
new file mode 100644
index 0000000..ace0fb8
--- /dev/null
+++ b/.github/workflows/build_and_upload_theme_on_push_to_dev.yaml
@@ -0,0 +1,55 @@
+# Jobs to build and deploy a Docker image for Fairspace Keycloak theme on push to the dev or release branches
+
+name: Build & Upload Fairspace Keycloak Theme Docker image
+
+env:
+  DOCKER_REGISTRY: ghcr.io
+
+on:
+  push:
+    branches:
+      - dev
+      - release
+
+jobs:
+  build-and-upload-docker-image-for-keycloak-fairspace-theme:
+    needs: [generate-version]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Prepare version
+        run: |
+          # EXTRACT VERSION
+          BRANCH=${GITHUB_HEAD_REF:-${GITHUB_REF#refs/heads/}}
+          echo "Building theme image from the branch: $BRANCH"
+          VER=$(cat ./themes/VERSION)
+          echo "Building theme image of version: $VER"
+          if [ $BRANCH != "release" ]
+          then
+            VER=$VER-SNAPSHOT
+          fi
+          echo "Docker tag to be attached to images: $VERSION"
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+
+      - name: Log in to the Container registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.DOCKER_REGISTRY }}
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ env.DOCKER_REGISTRY }}/${{ github.repository }}/keycloak-fairspace-theme
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: ./themes/
+          push: true
+          tags: ${{ env.DOCKER_REGISTRY }}/${{ github.repository }}/keycloak-fairspace-theme:${{ env.VERSION }}
+          labels: ${{ steps.meta.outputs.labels }}
diff --git a/themes/VERSION b/themes/VERSION
new file mode 100644
index 0000000..8acdd82
--- /dev/null
+++ b/themes/VERSION
@@ -0,0 +1 @@
+0.0.1

From a6738e519868ba418efb9ba8129cbfb5a817e1ed Mon Sep 17 00:00:00 2001
From: ewelinagr <ewelina@thehyve.nl>
Date: Tue, 14 May 2024 10:13:00 +0200
Subject: [PATCH 3/4] Add theme documentation.

---
 themes/README.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/themes/README.md b/themes/README.md
index c361761..b3ddd94 100644
--- a/themes/README.md
+++ b/themes/README.md
@@ -1 +1,15 @@
-TODO: document custom themes here...
\ No newline at end of file
+# Custom Fairspace themes for Keycloak
+
+Keycloak allows customising the look and feel of the web pages, including login, account or admin console, by providing custom themes.
+Keycloak provides default themes that can be extended or overridden by custom themes. A theme consists of a set of resources, such as HTML templates, CSS, JavaScript, images, message bundles and theme properties.
+
+More information about custom themes can be found in the [Keycloak documentation](https://www.keycloak.org/docs/latest/server_development/#_theme_stylesheet).
+
+
+## Fairspace theme
+
+This directory contains the custom Fairspace theme for Keycloak. The theme is based on the default theme called "keycloak" and includes custom styles and a logo.
+
+The theme is packaged into a Docker image and made available in the Kubernetes setup using init container as theme provider. 
+
+More information about the theme setup with Kubernetes and Helm can be found in [Keycloakx Helm chart documentation](https://github.com/codecentric/helm-charts/tree/master/charts/keycloakx#providing-a-custom-theme).

From 1586ae58741b36a2a5894d9976604975860f9e77 Mon Sep 17 00:00:00 2001
From: ewelinagr <ewelina@thehyve.nl>
Date: Tue, 14 May 2024 10:51:01 +0200
Subject: [PATCH 4/4] Adjust styling to include darker background.

---
 .../fairspace_theme/login/resources/css/fairspace/login.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/themes/fairspace_theme/login/resources/css/fairspace/login.css b/themes/fairspace_theme/login/resources/css/fairspace/login.css
index 3aebc30..ff251d8 100644
--- a/themes/fairspace_theme/login/resources/css/fairspace/login.css
+++ b/themes/fairspace_theme/login/resources/css/fairspace/login.css
@@ -4,12 +4,12 @@ See: https://github.com/keycloak/keycloak/blob/main/themes/src/main/resources/th
 :root {
     --kc-blue-light: rgba(106,134,232,1);
     --kc-blue-light-transp-25: rgba(106,134,232,0.25);
-    --kc-blue-medium: rgba(52,95,157,1);
-    --kc-blue-dark: rgba(8,65,92,1);
+    --kc-blue-medium: rgba(63,102,177,1);
+    --kc-blue-dark: rgb(7, 59, 82);
 }
 
 .login-pf body {
-    background: radial-gradient(circle, var(--kc-blue-light) 5%, var(--kc-blue-medium) 25%, var(--kc-blue-dark) 75%);
+    background: radial-gradient(circle, var(--kc-blue-light) 10%, var(--kc-blue-medium) 25%, var(--kc-blue-dark) 75%);
     background-size: cover;
     height: 100%;
 }