Merge pull request #123 from thehyve/custom-theme

Add setup for providing custom Fairspace theme

.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 }}

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

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) && \

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,

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

themes/Dockerfile

@@ -0,0 +1,2 @@
+FROM busybox
+COPY fairspace_theme /fairspace_theme

themes/README.md

@@ -0,0 +1,15 @@
+# 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).

themes/VERSION

@@ -0,0 +1 @@
+0.0.1

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(63,102,177,1);
+    --kc-blue-dark: rgb(7, 59, 82);
+}
+
+.login-pf body {
+    background: radial-gradient(circle, var(--kc-blue-light) 10%, 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;
+}

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