README.md

@@ -3,9 +3,9 @@
 
 ## Development setup
 
-To start a dev keycloak instance that can show the theme, you need to do the following:
+To start a Dev Keycloak instance that can show the pub.solar 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.
+1. Go into Keycloak's [Administration Console](https://auth.pub.solar/admin), 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:
   ```
@@ -16,10 +16,12 @@ To start a dev keycloak instance that can show the theme, you need to do the fol
     -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
+    quay.io/keycloak/keycloak:21.1.1 \
+    start-dev --import-realm --features="declarative-user-profile"
   ```
 
 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.
+4. Connect to the local Keycloak instance at http://localhost:8080 and open the Administration Console. Login with username: `admin`, password: `admin`.
+
+5. To view the theme in action, open http://localhost:8080/realms/pub.solar/account

account/account.ftl

@@ -40,13 +40,13 @@
     </div>
 
     <div class="ps-form-group ${messagesPerField.printIfExists('firstName','has-error')}">
-      <label for="firstName" class="ps-form-group--label">${msg("firstName")} <span class="required">*</span></label>
+      <label for="firstName" class="ps-form-group--label">${msg("firstName")}</label>
 
       <input type="text" class="ps-input" id="firstName" name="firstName" value="${(account.firstName!'')}"/>
     </div>
 
     <div class="ps-form-group ${messagesPerField.printIfExists('lastName','has-error')}">
-      <label for="lastName" class="ps-form-group--label">${msg("lastName")} <span class="required">*</span></label>
+      <label for="lastName" class="ps-form-group--label">${msg("lastName")}</label>
 
       <input type="text" class="ps-input" id="lastName" name="lastName" value="${(account.lastName!'')}"/>
     </div>

common/resources/node_modules/jquery/LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright OpenJS Foundation and other contributors, https://openjsf.org/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

common/resources/node_modules/jquery/bower.json

@@ -0,0 +1,14 @@
+{
+  "name": "jquery",
+  "main": "dist/jquery.js",
+  "license": "MIT",
+  "ignore": [
+    "package.json"
+  ],
+  "keywords": [
+    "jquery",
+    "javascript",
+    "browser",
+    "library"
+  ]
+}

common/resources/node_modules/jquery/external/sizzle/LICENSE.txt

@@ -0,0 +1,36 @@
+Copyright JS Foundation and other contributors, https://js.foundation/
+
+This software consists of voluntary contributions made by many
+individuals. For exact contribution history, see the revision history
+available at https://github.com/jquery/sizzle
+
+The following license applies to all parts of this software except as
+documented below:
+
+====
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+====
+
+All files located in the node_modules and external directories are
+externally maintained libraries used by this software which have their
+own licenses; we recommend you read them, as their terms may differ from
+the terms above.

flake.lock

@@ -2,19 +2,17 @@
   "nodes": {
     "devshell": {
       "inputs": {
-        "flake-utils": [
-          "flake-utils"
-        ],
         "nixpkgs": [
           "nixpkgs"
-        ]
+        ],
+        "systems": "systems"
       },
       "locked": {
-        "lastModified": 1667210711,
-        "narHash": "sha256-IoErjXZAkzYWHEpQqwu/DeRNJGFdR7X2OGbkhMqMrpw=",
+        "lastModified": 1688380630,
+        "narHash": "sha256-8ilApWVb1mAi4439zS3iFeIT0ODlbrifm/fegWwgHjA=",
         "owner": "numtide",
         "repo": "devshell",
-        "rev": "96a9dd12b8a447840cc246e17a47b81a4268bba7",
+        "rev": "f9238ec3d75cefbb2b42a44948c4e8fb1ae9a205",
         "type": "github"
       },
       "original": {
@@ -24,12 +22,15 @@
       }
     },
     "flake-utils": {
+      "inputs": {
+        "systems": "systems_2"
+      },
       "locked": {
-        "lastModified": 1667395993,
-        "narHash": "sha256-nuEHfE/LcWyuSWnS8t12N1wc105Qtau+/OdUAjtQ0rA=",
+        "lastModified": 1689068808,
+        "narHash": "sha256-6ixXo3wt24N/melDWjq70UuHQLxGV8jZvooRanIHXw0=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "5aed5285a952e0b949eb3ba02c12fa4fcfef535f",
+        "rev": "919d646de7be200f3bf08cb76ae1f09402b6f9b4",
         "type": "github"
       },
       "original": {
@@ -40,11 +41,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1669411043,
-        "narHash": "sha256-LfPd3+EY+jaIHTRIEOUtHXuanxm59YKgUacmSzaqMLc=",
+        "lastModified": 1689282004,
+        "narHash": "sha256-VNhuyb10c9SV+3hZOlxwJwzEGytZ31gN9w4nPCnNvdI=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "5dc7114b7b256d217fe7752f1614be2514e61bb8",
+        "rev": "e74e68449c385db82de3170288a28cd0f608544f",
         "type": "github"
       },
       "original": {
@@ -60,6 +61,36 @@
         "flake-utils": "flake-utils",
         "nixpkgs": "nixpkgs"
       }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    },
+    "systems_2": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
     }
   },
   "root": "root",

flake.nix

@@ -7,7 +7,6 @@
     flake-utils.url = "github:numtide/flake-utils";
 
     devshell.url = "github:numtide/devshell";
-    devshell.inputs.flake-utils.follows = "flake-utils";
     devshell.inputs.nixpkgs.follows = "nixpkgs";
   };
 
@@ -24,7 +23,7 @@
       inherit self nixpkgs;
       name = "keycloak-theme-pub-solar";
       overlay = ./overlay.nix;
-      preOverlays = [ devshell.overlay ];
+      preOverlays = [ devshell.overlays.default ];
       shell = { pkgs }:
       let
         google-font-downloader = with pkgs; writeShellScriptBin "google-font-downloader" ''

login/select-authenticator.ftl

@@ -21,7 +21,7 @@
                             <i class="${properties['${authenticationSelection.iconCssClass}']!authenticationSelection.iconCssClass} ${properties.kcSelectAuthListItemIconPropertyClass!}"></i>
                         </div>
                         <div class="${properties.kcSelectAuthListItemBodyClass!}">
-                            <div class="${properties.kcSelectAuthListItemHeadingClass!}">
+                            <div class="${properties.kcSelectAuthListItemHeadingClass!} ${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}">
                                 ${msg('${authenticationSelection.displayName}')}
                             </div>
                             <div class="${properties.kcSelectAuthListItemDescriptionClass!}">

login/theme.properties

@@ -14,3 +14,5 @@ kcLabelClass=ps-form-group--label
 kcInputErrorMessageClass=ps-form-group--error
 
 kcInputClass=ps-input
+
+kcWebAuthnKeyIcon=pficon pficon-key