Bump version

docs: add Moulyy as a contributor for code

.all-contributorsrc

@@ -204,6 +204,33 @@
       "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

@@ -111,6 +111,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </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>
@@ -122,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).
 
@@ -255,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.1.2",
+    "version": "9.1.11",
     "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

@@ -55,7 +55,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 +75,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("npm run babel", "true");
+                        .replace(`${packageManager} run check-types`, "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/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

@@ -65,9 +65,21 @@ export async function main() {
     if (buildOptions.doCreateJar) {
         child_process.execSync("mvn clean install", { "cwd": buildOptions.keycloakifyBuildDirPath });
 
-        fs.renameSync(
-            pathJoin(pathDirname(jarFilePath), "original-" + pathBasename(jarFilePath)),
-            pathJoin(pathDirname(jarFilePath), "retrocompat-" + pathBasename(jarFilePath))
+        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 21 and below.`,
+                    `  Note that Keycloak 22 is only supported for login and email theme but not for account themes.  `
+                ].join("\n"),
+                "utf8"
+            )
         );
     }
 

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/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/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 &&
-                realm.registrationAllowed &&
-                !registrationDisabled && (
-                    <div id="kc-registration">
-                        <span>
-                            {msg("noAccount")}
-                            <a tabIndex={6} href={url.registrationUrl}>
-                                {msg("doRegister")}
-                            </a>
-                        </span>
-                    </div>
-                )
+                <div id="kc-registration">
+                    <span>
+                        {msg("noAccount")}
+                        <a tabIndex={6} href={url.registrationUrl}>
+                            {msg("doRegister")}
+                        </a>
+                    </span>
+                </div>
             }
         >
             <div id="kc-form" className={clsx(realm.password && social.providers !== undefined && getClassName("kcContentWrapperClass"))}>

src/login/pages/LoginDeviceVerifyUserCode.tsx

@@ -1,7 +1,7 @@
 import { clsx } from "keycloakify/tools/clsx";
 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>) {

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);
             }
         `;