Keycloak theme (#170)

* feat: update lock-file version

* feat: apollusia theme keycloak

* feat: bootstrap 5

* feat: use nx-sass

* fix(keycloak): Use correct paths

* refactor: use build in keycloak package.json

* style: basic card design

* style: remove header-wrapper and add kc-page-title

* style: background and use primary

* refactor: remove bootstrap 5

* feat: add favicon

* style: social provider buttons

* style: flex start

* feat: copy fonts

* style: facebook, google, github, twitter

* style(refactor): use extend bi in fa

* style(refactor): remove .scss suffix

* fix: remove cpx

* fix: use assets instead of copy

* fix: broken pnpm-lock.yaml

---------

Co-authored-by: Adrian Kunz <clashsoft@hotmail.com>

.gitignore

@@ -41,4 +41,4 @@ Thumbs.db
 .angular
 .env
 
-.nx/cache
+.nx/cache

.stylelintrc.json

@@ -0,0 +1,17 @@
+{
+  "ignoreFiles": [
+    "**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "**/*.scss"
+      ],
+      "extends": [
+        "stylelint-config-standard-scss"
+      ],
+      "rules": {}
+    }
+  ],
+  "rules": {}
+}

docker-compose.yml

@@ -21,14 +21,16 @@ services:
 
   keycloak:
     image: quay.io/keycloak/keycloak:24.0.3
-    command: [ 'start-dev', '--optimize' ]
+    command: [ 'start-dev' ]
     environment:
       KC_HOSTNAME: localhost
       KC_HTTP_RELATIVE_PATH: /auth
       KEYCLOAK_ADMIN: admin
       KEYCLOAK_ADMIN_PASSWORD: root
     ports:
       - "8080:8080"
+    volumes:
+      - ./libs/keycloak:/opt/keycloak/themes/apollusia
 
 volumes:
   database:

libs/keycloak/.gitignore

@@ -0,0 +1,2 @@
+common/resources/css
+common/resources/fonts

libs/keycloak/.stylelintrc.json

@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "../../.stylelintrc.json"
+  ],
+  "ignoreFiles": [
+    "!**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "**/*.scss"
+      ],
+      "rules": {}
+    }
+  ]
+}

libs/keycloak/login/theme.properties

@@ -0,0 +1,4 @@
+parent=keycloak
+import=common/apollusia
+styles=css/styles.css
+stylesCommon=

libs/keycloak/project.json

@@ -0,0 +1,59 @@
+{
+  "name": "keycloak",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "libs/keycloak",
+  "targets": {
+    "build": {
+      "executor": "@gitopslovers/nx-sass:compiler",
+      "outputs": [
+        "{options.outputPath}"
+      ],
+      "options": {
+        "outputPath": "libs/keycloak/common/resources/css/",
+        "main": "libs/keycloak/src/theme.scss",
+        "sourceMap": true,
+        "assets": [
+          {
+            "glob": "**/*.{woff,woff2}",
+            "input": "../../node_modules/bootstrap-icons/font/fonts",
+            "output": "libs/keycloak/common/resources/css/fonts"
+          }
+        ]
+      },
+      "configurations": {
+        "production": {},
+        "development": {}
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@gitopslovers/nx-sass:compiler",
+      "options": {
+        "watch": true,
+        "outputPath": "libs/keycloak/common/resources/css/",
+        "main": "libs/keycloak/src/theme.scss",
+        "sourceMap": true,
+        "assets": [
+          {
+            "glob": "**/*.{woff,woff2}",
+            "input": "../../node_modules/bootstrap-icons/font/fonts",
+            "output": "libs/keycloak/common/resources/css/fonts"
+          }
+        ]
+      }
+    },
+    "lint": {
+      "executor": "nx-stylelint:lint",
+      "outputs": [
+        "{options.outputFile}"
+      ],
+      "options": {
+        "lintFilePatterns": [
+          "libs/keycloak/src/**/*.scss"
+        ],
+        "formatter": "compact"
+      }
+    }
+  }
+}

libs/keycloak/src/theme.scss

@@ -0,0 +1,146 @@
+/* Color palette */
+$french-violet: #7b2cbfff;
+$amethyst: #9d4eddff;
+$white: #ffffff;
+$facebook: #1877f2;
+$google: #ea4335;
+$github: #333333;
+$twitter: #1da1f2;
+
+/* overrides */
+$primary: $french-violet;
+
+@font-face {
+  font-family: 'bootstrap-icons';
+  src: url('fonts/bootstrap-icons.woff') format('woff'),
+  url('fonts/bootstrap-icons.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* imports */
+@import "../../../node_modules/bootstrap/scss/bootstrap";
+@import "../../../node_modules/bootstrap-icons/font/bootstrap-icons";
+
+html, body {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  background: url('../img/keycloak-bg.png') no-repeat center center fixed, rgba($amethyst, 0.5);
+  background-blend-mode: multiply;
+  background-size: cover;
+}
+
+#kc-header-wrapper {
+  display: none;
+}
+
+.login-pf-page-header {
+  @extend .text-center;
+  @extend .h1;
+  @extend .text-light;
+}
+
+.login-pf-page {
+  @extend .container;
+  @extend .align-self-center;
+}
+
+.card-pf {
+  @extend .card;
+  border: none;
+  width: 50%;
+  height: auto;
+  margin: auto;
+}
+
+.login-pf-header {
+  @extend .card-header;
+  background-color: $primary;
+  color: $white;
+}
+
+#kc-page-title {
+  @extend .card-title;
+  @extend .h3;
+}
+
+#kc-content {
+  @extend .card-body;
+}
+
+.pf-c-form-control {
+  @extend .form-control;
+}
+
+.pf-c-button {
+  @extend .btn;
+}
+
+.pf-c-button.pf-m-primary {
+  @extend .btn-primary;
+}
+
+#kc-social-providers {
+  h2 {
+    @extend .h4;
+  }
+
+  ul {
+    list-style-type: none;
+    padding: 0;
+  }
+}
+
+.kc-social-item {
+  @extend .btn;
+  @extend .btn-primary;
+  @extend .mb-3;
+  @extend .w-100;
+  @extend .border-0;
+  display: flex;
+  justify-content: flex-start;
+
+  .fa {
+    @extend .bi;
+    @extend .me-2;
+  }
+}
+
+#social-facebook {
+  @extend .kc-social-item;
+  background-color: $facebook;
+
+  .fa-facebook {
+    @extend .bi-facebook;
+  }
+}
+
+#social-github {
+  @extend .kc-social-item;
+  background-color: $github;
+
+  .fa-github {
+    @extend .bi-github;
+  }
+}
+
+#social-google {
+  @extend .kc-social-item;
+  background-color: $google;
+
+  .fa-google {
+    @extend .bi-google;
+  }
+}
+
+#social-twitter {
+  @extend .kc-social-item;
+  background-color: $twitter;
+
+  .fa-twitter {
+    @extend .bi-twitter;
+  }
+}

nx.json

@@ -5,12 +5,20 @@
   },
   "targetDefaults": {
     "build": {
-      "dependsOn": ["^build"],
-      "inputs": ["production", "^production"],
+      "dependsOn": [
+        "^build"
+      ],
+      "inputs": [
+        "production",
+        "^production"
+      ],
       "cache": true
     },
     "e2e": {
-      "inputs": ["default", "^production"],
+      "inputs": [
+        "default",
+        "^production"
+      ],
       "cache": true
     },
     "lint": {
@@ -26,7 +34,11 @@
     },
     "@nx/jest:jest": {
       "cache": true,
-      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
+      "inputs": [
+        "default",
+        "^production",
+        "{workspaceRoot}/jest.preset.js"
+      ],
       "options": {
         "passWithNoTests": true
       },
@@ -39,7 +51,10 @@
     }
   },
   "namedInputs": {
-    "default": ["{projectRoot}/**/*", "sharedGlobals"],
+    "default": [
+      "{projectRoot}/**/*",
+      "sharedGlobals"
+    ],
     "production": [
       "default",
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
@@ -63,6 +78,7 @@
     },
     "@nx/angular:component": {
       "style": "scss"
-    }
+    },
+    "@gitopslovers/nx-sass:library": {}
   }
 }

package.json

@@ -10,7 +10,8 @@
     "test:frontend": "nx test frontend",
     "test:backend": "nx test backend",
     "lint:frontend": "nx lint frontend",
-    "lint:backend": "nx lint backend"
+    "lint:backend": "nx lint backend",
+    "build:keycloak": "nx build keycloak"
   },
   "private": true,
   "packageManager": "pnpm@8.15.8",
@@ -24,6 +25,7 @@
     "@angular/cli": "~17.3.7",
     "@angular/compiler-cli": "~17.3.9",
     "@angular/language-service": "~17.3.9",
+    "@gitopslovers/nx-sass": "^1.5.1",
     "@nestjs/schematics": "10.1.1",
     "@nestjs/testing": "10.3.7",
     "@nx/angular": "19.0.4",
@@ -59,7 +61,11 @@
     "jest-preset-angular": "14.0.3",
     "mongodb-memory-server": "^9.2.0",
     "nx": "19.0.4",
+    "nx-stylelint": "17.1.4",
     "prettier": "^3.2.5",
+    "sass": "1.71.0",
+    "stylelint": "16.2.1",
+    "stylelint-config-standard-scss": "13.0.0",
     "ts-jest": "29.1.2",
     "ts-node": "10.9.2",
     "typescript": "5.4.3"