Add custome fairspace login theme.

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 @@
+TODO: document custom themes here...

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;
+}

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