Bump version

docs: add Moulyy as a contributor for code

.all-contributorsrc

@@ -186,6 +186,51 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "xgp",
+      "name": "Garth",
+      "avatar_url": "https://avatars.githubusercontent.com/u/244253?v=4",
+      "profile": "https://github.com/xgp",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "BlackVoid",
+      "name": "Felix Gustavsson",
+      "avatar_url": "https://avatars.githubusercontent.com/u/673720?v=4",
+      "profile": "https://github.com/BlackVoid",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "msiemens",
+      "name": "Markus Siemens",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1873922?v=4",
+      "profile": "https://m-siemens.de/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "law108000",
+      "name": "Rlok",
+      "avatar_url": "https://avatars.githubusercontent.com/u/8112024?v=4",
+      "profile": "https://github.com/law108000",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Moulyy",
+      "name": "Moulyy",
+      "avatar_url": "https://avatars.githubusercontent.com/u/115405804?v=4",
+      "profile": "https://github.com/Moulyy",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -107,6 +107,13 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/zavoloklom"><img src="https://avatars.githubusercontent.com/u/4151869?v=4?s=100" width="100px;" alt="Sergey Kupletsky"/><br /><sub><b>Sergey Kupletsky</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=zavoloklom" title="Tests">⚠️</a> <a href="https://github.com/keycloakify/keycloakify/commits?author=zavoloklom" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/rome-user"><img src="https://avatars.githubusercontent.com/u/114131048?v=4?s=100" width="100px;" alt="rome-user"/><br /><sub><b>rome-user</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=rome-user" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/celinepelletier"><img src="https://avatars.githubusercontent.com/u/82821620?v=4?s=100" width="100px;" alt="Céline Pelletier"/><br /><sub><b>Céline Pelletier</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=celinepelletier" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/xgp"><img src="https://avatars.githubusercontent.com/u/244253?v=4?s=100" width="100px;" alt="Garth"/><br /><sub><b>Garth</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=xgp" title="Code">💻</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/BlackVoid"><img src="https://avatars.githubusercontent.com/u/673720?v=4?s=100" width="100px;" alt="Felix Gustavsson"/><br /><sub><b>Felix Gustavsson</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=BlackVoid" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://m-siemens.de/"><img src="https://avatars.githubusercontent.com/u/1873922?v=4?s=100" width="100px;" alt="Markus Siemens"/><br /><sub><b>Markus Siemens</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=msiemens" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/law108000"><img src="https://avatars.githubusercontent.com/u/8112024?v=4?s=100" width="100px;" alt="Rlok"/><br /><sub><b>Rlok</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=law108000" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Moulyy"><img src="https://avatars.githubusercontent.com/u/115405804?v=4?s=100" width="100px;" alt="Moulyy"/><br /><sub><b>Moulyy</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=Moulyy" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>
@@ -118,7 +125,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 
 # Changelog highlights
 
-## v9.0
+## 9.0
 
 Bring back support for account themes in Keycloak v23 and up! [See issue](https://github.com/keycloakify/keycloakify/issues/389).
 
@@ -251,79 +258,79 @@ Checkout [the migration guide](https://docs.keycloakify.dev/v5-to-v6)
 
 Fix `login-verify-email.ftl` page. [Before](https://user-images.githubusercontent.com/6702424/177436014-0bad22c4-5bfb-45bb-8fc9-dad65143cd0c.png) - [After](https://user-images.githubusercontent.com/6702424/177435797-ec5d7db3-84cf-49cb-8efc-3427a81f744e.png)
 
-## v5.6.0
+## 5.6.0
 
 Add support for `login-config-totp.ftl` page [#127](https://github.com/keycloakify/keycloakify/pull/127).
 
-## v5.3.0
+## 5.3.0
 
 Rename `keycloak_theme_email` to `keycloak_email`.  
 If you already had a `keycloak_theme_email` you should rename it `keycloak_email`.
 
-## v5.0.0
+## 5.0.0
 
 [Migration guide](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63)  
 New i18n system.  
 Import of terms and services have changed. [See example](https://github.com/garronej/keycloakify-demo-app/blob/a5b6a50f24bc25e082931f5ad9ebf47492acd12a/src/index.tsx#L46-L63).
 
-## v4.10.0
+## 4.10.0
 
 Add `login-idp-link-email.ftl` page [See PR](https://github.com/keycloakify/keycloakify/pull/92).
 
-## v4.8.0
+## 4.8.0
 
 [Email template customization.](#email-template-customization)
 
-## v4.7.4
+## 4.7.4
 
 **M1 Mac** support (for testing locally with a dockerized Keycloak).
 
-## v4.7.2
+## 4.7.2
 
 > WARNING: This is broken.  
 > Testing with local Keycloak container working with M1 Mac. Thanks to [@eduardosanzb](https://github.com/keycloakify/keycloakify/issues/43#issuecomment-975699658).  
 > Be aware: When running M1s you are testing with Keycloak v15 else the local container spun will be a Keycloak v16.1.0.
 
-## v4.7.0
+## 4.7.0
 
 Register with user profile enabled: Out of the box `options` validator support.  
 [Example](https://user-images.githubusercontent.com/6702424/158911163-81e6bbe8-feb0-4dc8-abff-de199d7a678e.mov)
 
-## v4.6.0
+## 4.6.0
 
 `tss-react` and `powerhooks` are no longer peer dependencies of `keycloakify`.
 After updating Keycloakify you can remove `tss-react` and `powerhooks` from your dependencies if you don't use them explicitly.
 
-## v4.5.3
+## 4.5.3
 
 There is a new recommended way to setup highly customized theme. See [here](https://github.com/garronej/keycloakify-demo-app/blob/look_and_feel/src/KcApp/KcApp.tsx).  
 Unlike with [the previous recommended method](https://github.com/garronej/keycloakify-demo-app/blob/a51660578bea15fb3e506b8a2b78e1056c6d68bb/src/KcApp/KcApp.tsx),
 with this new method your theme wont break on minor Keycloakify update.
 
-## v4.3.0
+## 4.3.0
 
 Feature [`login-update-password.ftl`](https://user-images.githubusercontent.com/6702424/147517600-6191cf72-93dd-437b-a35c-47180142063e.png).  
 Every time a page is added it's a breaking change for non CSS-only theme.  
 Change [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L17) and [this](https://github.com/garronej/keycloakify-demo-app/blob/df664c13c77ce3c53ac7df0622d94d04e76d3f9f/src/KcApp/KcApp.tsx#L37) to update.
 
-## v4
+## 4
 
 -   Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳
 -   Improvements (and breaking changes in `import { useKcMessage } from "keycloakify"`.
 
-## v3
+## 3
 
 No breaking changes except that `@emotion/react`, [`tss-react`](https://www.npmjs.com/package/tss-react) and [`powerhooks`](https://www.npmjs.com/package/powerhooks) are now `peerDependencies` instead of being just dependencies.  
 It's important to avoid problem when using `keycloakify` alongside [`mui`](https://mui.com) and
 [when passing params from the app to the login page](https://github.com/keycloakify/keycloakify#implement-context-persistence-optional).
 
-## v2.5
+## 2.5
 
 -   Feature [Use advanced message](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/i18n/useKcMessage.tsx#L53-L66)
     and [`messagesPerFields`](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/lib/getKcContext/KcContextBase.ts#L70-L75) (implementation [here](https://github.com/keycloakify/keycloakify/blob/59f106bf9e210b63b190826da2bf5f75fc8b7644/src/bin/build-keycloak-theme/generateFtl/common.ftl#L130-L189))
 -   Test container now uses Keycloak version `15.0.2`.
 
-## v2
+## 2
 
 -   It's now possible to implement custom `.ftl` pages.
 -   Support for Keycloak plugins that introduce non standard ftl values.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "9.0.0",
+    "version": "9.3.0",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",

scripts/generate-i18n-messages.ts

@@ -17,7 +17,7 @@ const isSilent = true;
 const logger = getLogger({ isSilent });
 
 async function main() {
-    const keycloakVersion = "21.0.1";
+    const keycloakVersion = "23.0.4";
 
     const tmpDirPath = pathJoin(getProjectRoot(), "tmp_xImOef9dOd44");
 

src/account/pages/PageProps.ts

@@ -1,9 +1,9 @@
-import type { LazyExoticComponent } from "react";
 import type { I18n } from "keycloakify/account/i18n";
 import type { TemplateProps, ClassKey } from "keycloakify/account/TemplateProps";
+import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
 
 export type PageProps<KcContext, I18nExtended extends I18n> = {
-    Template: LazyExoticComponent<(props: TemplateProps<any, any>) => JSX.Element | null>;
+    Template: LazyOrNot<(props: TemplateProps<any, any>) => JSX.Element | null>;
     kcContext: KcContext;
     i18n: I18nExtended;
     doUseDefaultCss: boolean;

src/bin/download-builtin-keycloak-theme.ts

@@ -27,6 +27,51 @@ export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: st
         "preCacheTransform": {
             "actionCacheId": "npm install and build",
             "action": async ({ destDirPath }) => {
+                fix_account_css: {
+                    const accountCssFilePath = pathJoin(destDirPath, "keycloak", "account", "resources", "css", "account.css");
+
+                    if (!fs.existsSync(accountCssFilePath)) {
+                        break fix_account_css;
+                    }
+
+                    fs.writeFileSync(
+                        accountCssFilePath,
+                        Buffer.from(fs.readFileSync(accountCssFilePath).toString("utf8").replace("top: -34px;", "top: -34px !important;"), "utf8")
+                    );
+                }
+
+                fix_account_topt: {
+                    const totpFtlFilePath = pathJoin(destDirPath, "base", "account", "totp.ftl");
+
+                    if (!fs.existsSync(totpFtlFilePath)) {
+                        break fix_account_topt;
+                    }
+
+                    fs.writeFileSync(
+                        totpFtlFilePath,
+                        Buffer.from(
+                            fs
+                                .readFileSync(totpFtlFilePath)
+                                .toString("utf8")
+                                .replace(
+                                    [
+                                        "                <#list totp.policy.supportedApplications as app>",
+                                        "                    <li>${app}</li>",
+                                        "                </#list>"
+                                    ].join("\n"),
+                                    [
+                                        "                <#if totp.policy.supportedApplications?has_content>",
+                                        "                    <#list totp.policy.supportedApplications as app>",
+                                        "                        <li>${app}</li>",
+                                        "                    </#list>",
+                                        "                </#if>"
+                                    ].join("\n")
+                                ),
+                            "utf8"
+                        )
+                    );
+                }
+
                 install_common_node_modules: {
                     const commonResourcesDirPath = pathJoin(destDirPath, "keycloak", "common", "resources");
 
@@ -55,7 +100,18 @@ export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: st
                         break install_and_move_to_common_resources_generated_in_keycloak_v2;
                     }
 
-                    child_process.execSync("npm install", { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
+                    const packageManager = fs.existsSync(pathJoin(accountV2DirSrcDirPath, "pnpm-lock.yaml")) ? "pnpm" : "npm";
+
+                    if (packageManager === "pnpm") {
+                        try {
+                            child_process.execSync(`which pnpm`);
+                        } catch {
+                            console.log(`Installing pnpm globally`);
+                            child_process.execSync(`npm install -g pnpm`);
+                        }
+                    }
+
+                    child_process.execSync(`${packageManager} install`, { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
 
                     const packageJsonFilePath = pathJoin(accountV2DirSrcDirPath, "package.json");
 
@@ -64,12 +120,12 @@ export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: st
                     const parsedPackageJson = JSON.parse(packageJsonRaw.toString("utf8"));
 
                     parsedPackageJson.scripts.build = parsedPackageJson.scripts.build
-                        .replace("npm run check-types", "true")
+                        .replace(`${packageManager} run check-types`, "true")
-                        .replace("npm run babel", "true");
+                        .replace(`${packageManager} run babel`, "true");
 
                     fs.writeFileSync(packageJsonFilePath, Buffer.from(JSON.stringify(parsedPackageJson, null, 2), "utf8"));
 
-                    child_process.execSync("npm run build", { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
+                    child_process.execSync(`${packageManager} run build`, { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
 
                     fs.writeFileSync(packageJsonFilePath, packageJsonRaw);
 

src/bin/keycloakify/generateJavaStackFiles/bringInAccountV1.ts

@@ -38,7 +38,21 @@ export async function bringInAccountV1(params: { buildOptions: BuildOptionsLike
 
     const commonResourceFilePaths = [
         "node_modules/patternfly/dist/css/patternfly.min.css",
-        "node_modules/patternfly/dist/css/patternfly-additions.min.css"
+        "node_modules/patternfly/dist/css/patternfly-additions.min.css",
+        ...[
+            "OpenSans-Light-webfont.woff2",
+            "OpenSans-Regular-webfont.woff2",
+            "OpenSans-Bold-webfont.woff2",
+            "OpenSans-Semibold-webfont.woff2",
+            "OpenSans-Bold-webfont.woff",
+            "OpenSans-Light-webfont.woff",
+            "OpenSans-Regular-webfont.woff",
+            "OpenSans-Semibold-webfont.woff",
+            "OpenSans-Regular-webfont.ttf",
+            "OpenSans-Light-webfont.ttf",
+            "OpenSans-Semibold-webfont.ttf",
+            "OpenSans-Bold-webfont.ttf"
+        ].map(path => `node_modules/patternfly/dist/fonts/${path}`)
     ];
 
     for (const relativeFilePath of commonResourceFilePaths.map(path => pathJoin(...path.split("/")))) {
@@ -49,7 +63,7 @@ export async function bringInAccountV1(params: { buildOptions: BuildOptionsLike
         fs.cpSync(pathJoin(builtinKeycloakThemeTmpDirPath, "keycloak", "common", "resources", relativeFilePath), destFilePath);
     }
 
-    const resourceFilePaths = ["css/account.css"];
+    const resourceFilePaths = ["css/account.css", "img/icon-sidebar-active.png", "img/logo.png"];
 
     for (const relativeFilePath of resourceFilePaths.map(path => pathJoin(...path.split("/")))) {
         const destFilePath = pathJoin(accountV1DirPath, "resources", relativeFilePath);
@@ -69,7 +83,7 @@ export async function bringInAccountV1(params: { buildOptions: BuildOptionsLike
                 "",
                 "locales=ar,ca,cs,da,de,en,es,fr,fi,hu,it,ja,lt,nl,no,pl,pt-BR,ru,sk,sv,tr,zh-CN",
                 "",
-                "styles=" + [...resourceFilePaths, ...commonResourceFilePaths.map(path => `resources_common/${path}`)].join(" "),
+                "styles=" + [...resourceFilePaths, ...commonResourceFilePaths.map(path => `resources-common/${path}`)].join(" "),
                 "",
                 "##### css classes for form buttons",
                 "# main class used for all buttons",

src/bin/keycloakify/generateJavaStackFiles/generateJavaStackFiles.ts

@@ -13,6 +13,7 @@ export type BuildOptionsLike = {
     cacheDirPath: string;
     keycloakifyBuildDirPath: string;
     themeNames: string[];
+    doBuildRetrocompatAccountTheme: boolean;
 };
 
 {
@@ -114,7 +115,7 @@ export async function generateJavaStackFiles(params: {
                                             .filter(([, isImplemented]) => isImplemented)
                                             .map(([themeType]) => themeType)
                                     },
-                                    ...(!implementedThemeTypes.account
+                                    ...(!implementedThemeTypes.account || !buildOptions.doBuildRetrocompatAccountTheme
                                         ? []
                                         : [
                                               {

src/bin/keycloakify/generateStartKeycloakTestingContainer.ts

@@ -30,6 +30,7 @@ export function generateStartKeycloakTestingContainer(params: { jarFilePath: str
         Buffer.from(
             [
                 "#!/usr/bin/env bash",
+                `# If you want to test with Keycloak version prior to 23 use the retrocompat-${pathBasename(jarFilePath)}`,
                 "",
                 `docker rm ${containerName} || true`,
                 "",

src/bin/keycloakify/keycloakify.ts

@@ -1,6 +1,6 @@
 import { generateTheme } from "./generateTheme";
 import { generateJavaStackFiles } from "./generateJavaStackFiles";
-import { join as pathJoin, relative as pathRelative, basename as pathBasename, sep as pathSep } from "path";
+import { join as pathJoin, relative as pathRelative, basename as pathBasename, dirname as pathDirname, sep as pathSep } from "path";
 import * as child_process from "child_process";
 import { generateStartKeycloakTestingContainer } from "./generateStartKeycloakTestingContainer";
 import * as fs from "fs";
@@ -64,6 +64,23 @@ export async function main() {
 
     if (buildOptions.doCreateJar) {
         child_process.execSync("mvn clean install", { "cwd": buildOptions.keycloakifyBuildDirPath });
+
+        const jarDirPath = pathDirname(jarFilePath);
+        const retrocompatJarFilePath = pathJoin(jarDirPath, "retrocompat-" + pathBasename(jarFilePath));
+
+        fs.renameSync(pathJoin(jarDirPath, "original-" + pathBasename(jarFilePath)), retrocompatJarFilePath);
+
+        fs.writeFileSync(
+            pathJoin(jarDirPath, "README.md"),
+            Buffer.from(
+                [
+                    `- The ${jarFilePath} is to be used in Keycloak 23 and up.  `,
+                    `- The ${retrocompatJarFilePath} is to be used in Keycloak 22 and below.`,
+                    `  Note that Keycloak 22 is only supported for login and email theme but not for account themes.  `
+                ].join("\n"),
+                "utf8"
+            )
+        );
     }
 
     const containerKeycloakVersion = "23.0.0";

src/bin/keycloakify/replacers/replaceImportsInCssCode.ts

@@ -16,7 +16,7 @@ export function replaceImportsInCssCode(params: { cssCode: string }): {
 
     const cssGlobalsToDefine: Record<string, string> = {};
 
-    new Set(cssCode.match(/url\(["']?\/[^/][^)"']+["']?\)[^;}]*/g) ?? []).forEach(
+    new Set(cssCode.match(/url\(["']?\/[^/][^)"']+["']?\)[^;}]*?/g) ?? []).forEach(
         match => (cssGlobalsToDefine["url" + crypto.createHash("sha256").update(match).digest("hex").substring(0, 15)] = match)
     );
 

src/bin/promptKeycloakVersion.ts

@@ -1,6 +1,7 @@
 import { getLatestsSemVersionedTagFactory } from "./tools/octokit-addons/getLatestsSemVersionedTag";
 import { Octokit } from "@octokit/rest";
 import cliSelect from "cli-select";
+import { lastKeycloakVersionWithAccountV1 } from "./constants";
 
 export async function promptKeycloakVersion() {
     const { getLatestsSemVersionedTag } = (() => {
@@ -26,6 +27,7 @@ export async function promptKeycloakVersion() {
             "owner": "keycloak",
             "repo": "keycloak"
         }).then(arr => arr.map(({ tag }) => tag))),
+        lastKeycloakVersionWithAccountV1,
         "11.0.3"
     ];
 

src/login/Template.tsx

@@ -45,6 +45,8 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
         return null;
     }
 
+    document.title = i18n.msgStr("loginTitle", kcContext.realm.displayName);
+
     return (
         <div className={getClassName("kcLoginClass")}>
             <div id="kc-header" className={getClassName("kcHeaderClass")}>

src/login/TemplateProps.ts

@@ -95,4 +95,5 @@ export type ClassKey =
     | "kcAuthenticatorOtpCircleClass"
     | "kcSelectOTPItemHeadingClass"
     | "kcFormOptionsWrapperClass"
-    | "kcFormButtonsWrapperClass";
+    | "kcFormButtonsWrapperClass"
+    | "kcInputGroup";

src/login/kcContext/KcContext.ts

@@ -82,6 +82,7 @@ export declare namespace KcContext {
             clientId: string;
             name?: string;
             description?: string;
+            attributes: Record<string, string>;
         };
         isAppInitiatedAction: boolean;
         messagesPerField: {

src/login/kcContext/kcContextMocks.ts

@@ -234,7 +234,8 @@ export const kcContextCommonMock: KcContext.Common = {
         "showTryAnotherWayLink": false
     },
     "client": {
-        "clientId": "myApp"
+        "clientId": "myApp",
+        "attributes": {}
     },
     "scripts": [],
     "isAppInitiatedAction": false
@@ -314,7 +315,8 @@ export const kcContextMocks = [
         "actionUri": "#",
         "client": {
             "clientId": "myApp",
-            "baseUrl": "#"
+            "baseUrl": "#",
+            "attributes": {}
         }
     }),
     id<KcContext.Error>({
@@ -322,7 +324,8 @@ export const kcContextMocks = [
         "pageId": "error.ftl",
         "client": {
             "clientId": "myApp",
-            "baseUrl": "#"
+            "baseUrl": "#",
+            "attributes": {}
         },
         "message": {
             "type": "error",
@@ -496,7 +499,8 @@ export const kcContextMocks = [
         },
         "client": {
             "clientId": "myApp",
-            "baseUrl": "#"
+            "baseUrl": "#",
+            "attributes": {}
         },
         "logoutConfirm": { "code": "123", skipLink: false }
     }),

src/login/lib/useGetClassName.ts

@@ -67,6 +67,7 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
 
         // css classes for input
         "kcInputLargeClass": "input-lg",
+        "kcInputGroup": "pf-c-input-group",
 
         // css classes for form accessability
         "kcSrOnlyClass": "sr-only",

src/login/pages/Login.tsx

@@ -37,22 +37,18 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
     return (
         <Template
             {...{ kcContext, i18n, doUseDefaultCss, classes }}
-            displayInfo={social.displayInfo}
+            displayInfo={realm.password && realm.registrationAllowed && !registrationDisabled}
             displayWide={realm.password && social.providers !== undefined}
             headerNode={msg("doLogIn")}
             infoNode={
-                realm.password &&
+                <div id="kc-registration">
-                realm.registrationAllowed &&
+                    <span>
-                !registrationDisabled && (
+                        {msg("noAccount")}
-                    <div id="kc-registration">
+                        <a tabIndex={6} href={url.registrationUrl}>
-                        <span>
+                            {msg("doRegister")}
-                            {msg("noAccount")}
+                        </a>
-                            <a tabIndex={6} href={url.registrationUrl}>
+                    </span>
-                                {msg("doRegister")}
+                </div>
-                            </a>
-                        </span>
-                    </div>
-                )
             }
         >
             <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>

src/login/pages/LoginDeviceVerifyUserCode.tsx

@@ -1,12 +1,11 @@
 import { clsx } from "keycloakify/tools/clsx";
-import Template from "../Template";
 import { I18n } from "../i18n";
 import { KcContext } from "../kcContext";
-import { useGetClassName } from "../lib/useGetClassName";
+import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 import { PageProps } from "./PageProps";
 
 export default function LoginOauthGrant(props: PageProps<Extract<KcContext, { pageId: "login-oauth2-device-verify-user-code.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, classes } = props;
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
     const { url } = kcContext;
 
     const { msg, msgStr } = i18n;

src/login/pages/LoginOauthGrant.tsx

@@ -2,11 +2,10 @@ import { clsx } from "keycloakify/tools/clsx";
 import { PageProps } from "./PageProps";
 import { KcContext } from "../kcContext";
 import { I18n } from "../i18n";
-import Template from "../Template";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
 
 export default function LoginOauthGrant(props: PageProps<Extract<KcContext, { pageId: "login-oauth-grant.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, classes } = props;
+    const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
     const { url, oauth, client } = kcContext;
 
     const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;

src/login/pages/PageProps.ts

@@ -1,9 +1,9 @@
-import type { LazyExoticComponent } from "react";
 import type { I18n } from "keycloakify/login/i18n";
 import { type TemplateProps, type ClassKey } from "keycloakify/login/TemplateProps";
+import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
 
 export type PageProps<KcContext, I18nExtended extends I18n> = {
-    Template: LazyExoticComponent<(props: TemplateProps<any, any>) => JSX.Element | null>;
+    Template: LazyOrNot<(props: TemplateProps<any, any>) => JSX.Element | null>;
     kcContext: KcContext;
     i18n: I18nExtended;
     doUseDefaultCss: boolean;

src/tools/LazyOrNot.ts

@@ -0,0 +1,3 @@
+import type { LazyExoticComponent, ComponentType } from "react";
+
+export type LazyOrNot<Component extends ComponentType<any>> = LazyExoticComponent<Component> | Component;

test/bin/readStaticResourcesUsage.spec.ts

@@ -67,9 +67,6 @@ describe("Ensure it's able to extract used Keycloak resources", () => {
              `
         });
 
-        console.log(paths);
-        console.log(expectedPaths);
-
         expect(same(paths, expectedPaths)).toBe(true);
     });
 

test/bin/replaceImportFromStatic.spec.ts

@@ -124,7 +124,7 @@ describe("bin/css-transforms", () => {
                 }
     
                 .my-div2 {
-                    background: url(/logo192.png) no-repeat center center;
+                    background: url(/logo192.png) repeat center center;
                 }
     
                 .my-div {
@@ -135,11 +135,11 @@ describe("bin/css-transforms", () => {
 
         const fixedCssCodeExpected = `
             .my-div {
-                background: var(--url1f9ef5a892c104c);
+                background: var(--urla882a969fd39473) no-repeat center center;
             }
     
             .my-div2 {
-                background: var(--url1f9ef5a892c104c);
+                background: var(--urla882a969fd39473) repeat center center;
             }
     
             .my-div {
@@ -150,7 +150,7 @@ describe("bin/css-transforms", () => {
         expect(isSameCode(fixedCssCode, fixedCssCodeExpected)).toBe(true);
 
         const cssGlobalsToDefineExpected = {
-            "url1f9ef5a892c104c": "url(/logo192.png) no-repeat center center",
+            "urla882a969fd39473": "url(/logo192.png)",
             "urldd75cab58377c19": "url(/static/media/something.svg)"
         };
 
@@ -165,7 +165,7 @@ describe("bin/css-transforms", () => {
 
         const cssCodeToPrependInHeadExpected = `
             :root {
-                --url1f9ef5a892c104c: url(\${url.resourcesPath}/build/logo192.png) no-repeat center center;
+                --urla882a969fd39473: url(\${url.resourcesPath}/build/logo192.png);
                 --urldd75cab58377c19: url(\${url.resourcesPath}/build/static/media/something.svg);
             }
         `;
@@ -191,11 +191,11 @@ describe("bin/css-transforms", () => {
 
         const fixedCssCodeExpected = `
             .my-div {
-                background: var(--urlf8277cddaa2be78);
+                background: var(--url749a3139386b2c8) no-repeat center center;
             }
     
             .my-div2 {
-                background: var(--urlf8277cddaa2be78);
+                background: var(--url749a3139386b2c8) no-repeat center center;
             }
     
             .my-div {
@@ -206,7 +206,7 @@ describe("bin/css-transforms", () => {
         expect(isSameCode(fixedCssCode, fixedCssCodeExpected)).toBe(true);
 
         const cssGlobalsToDefineExpected = {
-            "urlf8277cddaa2be78": "url(/x/y/z/logo192.png) no-repeat center center",
+            "url749a3139386b2c8": "url(/x/y/z/logo192.png)",
             "url8bdc0887b97ac9a": "url(/x/y/z/static/media/something.svg)"
         };
 
@@ -221,7 +221,7 @@ describe("bin/css-transforms", () => {
 
         const cssCodeToPrependInHeadExpected = `
             :root {
-                --urlf8277cddaa2be78: url(\${url.resourcesPath}/build/logo192.png) no-repeat center center;
+                --url749a3139386b2c8: url(\${url.resourcesPath}/build/logo192.png);
                 --url8bdc0887b97ac9a: url(\${url.resourcesPath}/build/static/media/something.svg);
             }
         `;