Bump version

docs: add giorgoslytos as a contributor for code

.all-contributorsrc

@@ -213,6 +213,33 @@
       "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"
+      ]
+    },
+    {
+      "login": "giorgoslytos",
+      "name": "giorgoslytos",
+      "avatar_url": "https://avatars.githubusercontent.com/u/50946162?v=4",
+      "profile": "https://github.com/giorgoslytos",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -112,6 +112,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <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>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/giorgoslytos"><img src="https://avatars.githubusercontent.com/u/50946162?v=4?s=100" width="100px;" alt="giorgoslytos"/><br /><sub><b>giorgoslytos</b></sub></a><br /><a href="https://github.com/keycloakify/keycloakify/commits?author=giorgoslytos" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>
@@ -123,7 +126,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).
 
@@ -256,79 +259,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.6",
+    "version": "9.3.1",
     "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("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/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/keycloakify.ts

@@ -75,7 +75,7 @@ export async function main() {
             Buffer.from(
                 [
                     `- The ${jarFilePath} is to be used in Keycloak 23 and up.  `,
-                    `- The ${retrocompatJarFilePath} is to be used in Keycloak 21 and below.`,
+                    `- 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"

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/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",
@@ -93,7 +94,7 @@ export const { useGetClassName } = createUseClassName<ClassKey>({
         "kcAuthenticatorWebAuthnPasswordlessClass": "fa fa-key list-view-pf-icon-lg",
 
         //css classes for the OTP Login Form
-        "kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select",
+        "kcSelectOTPListClass": "card-pf card-pf-view card-pf-view-select card-pf-view-single-select col-xs-12",
         "kcSelectOTPListItemClass": "card-pf-body card-pf-top-element",
         "kcAuthenticatorOtpCircleClass": "fa fa-mobile card-pf-icon-circle",
         "kcSelectOTPItemHeadingClass": "card-pf-title text-center",

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/LoginOtp.tsx

@@ -1,5 +1,3 @@
-import { useEffect } from "react";
-import { headInsert } from "keycloakify/tools/headInsert";
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
@@ -18,105 +16,77 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
 
     const { msg, msgStr } = i18n;
 
-    useEffect(() => {
-        let isCleanedUp = false;
-
-        const { prLoaded, remove } = headInsert({
-            "type": "javascript",
-            "src": `${kcContext.url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
-        });
-
-        (async () => {
-            await prLoaded;
-
-            if (isCleanedUp) {
-                return;
-            }
-
-            evaluateInlineScript();
-        })();
-
-        return () => {
-            isCleanedUp = true;
-            remove();
-        };
-    }, []);
-
     return (
-        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
-            <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
-                {otpLogin.userOtpCredentials.length > 1 && (
-                    <div className={getClassName("kcFormGroupClass")}>
-                        <div className={getClassName("kcInputWrapperClass")}>
-                            {otpLogin.userOtpCredentials.map(otpCredential => (
-                                <div key={otpCredential.id} className={getClassName("kcSelectOTPListClass")}>
-                                    <input type="hidden" value="${otpCredential.id}" />
-                                    <div className={getClassName("kcSelectOTPListItemClass")}>
-                                        <span className={getClassName("kcAuthenticatorOtpCircleClass")} />
-                                        <h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
+        <>
+            <style>
+                {`
+                input[type="radio"]:checked~label.kcSelectOTPListClass{
+                    border: 2px solid #39a5dc;
+                }`}
+            </style>
+            <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} headerNode={msg("doLogIn")}>
+                <form id="kc-otp-login-form" className={getClassName("kcFormClass")} action={url.loginAction} method="post">
+                    {otpLogin.userOtpCredentials.length > 1 && (
+                        <div className={getClassName("kcFormGroupClass")}>
+                            <div className={getClassName("kcInputWrapperClass")}>
+                                {otpLogin.userOtpCredentials.map((otpCredential, index) => (
+                                    <div key={otpCredential.id}>
+                                        <input
+                                            id={`kc-otp-credential-${index}`}
+                                            name="selectedCredentialId"
+                                            type="radio"
+                                            value={otpCredential.id}
+                                            style={{ display: "none" }}
+                                        />
+                                        <label
+                                            htmlFor={`kc-otp-credential-${index}`}
+                                            key={otpCredential.id}
+                                            className={getClassName("kcSelectOTPListClass")}
+                                        >
+                                            <div className={getClassName("kcSelectOTPListItemClass")}>
+                                                <span className={getClassName("kcAuthenticatorOtpCircleClass")} />
+                                                <h2 className={getClassName("kcSelectOTPItemHeadingClass")}>{otpCredential.userLabel}</h2>
+                                            </div>
+                                        </label>
                                     </div>
-                                </div>
-                            ))}
+                                ))}
+                            </div>
+                        </div>
+                    )}
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div className={getClassName("kcLabelWrapperClass")}>
+                            <label htmlFor="otp" className={getClassName("kcLabelClass")}>
+                                {msg("loginOtpOneTime")}
+                            </label>
+                        </div>
+
+                        <div className={getClassName("kcInputWrapperClass")}>
+                            <input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
                         </div>
                     </div>
-                )}
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div className={getClassName("kcLabelWrapperClass")}>
-                        <label htmlFor="otp" className={getClassName("kcLabelClass")}>
-                            {msg("loginOtpOneTime")}
-                        </label>
-                    </div>
 
-                    <div className={getClassName("kcInputWrapperClass")}>
-                        <input id="otp" name="otp" autoComplete="off" type="text" className={getClassName("kcInputClass")} autoFocus />
-                    </div>
-                </div>
+                    <div className={getClassName("kcFormGroupClass")}>
+                        <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
+                            <div className={getClassName("kcFormOptionsWrapperClass")} />
+                        </div>
 
-                <div className={getClassName("kcFormGroupClass")}>
-                    <div id="kc-form-options" className={getClassName("kcFormOptionsClass")}>
-                        <div className={getClassName("kcFormOptionsWrapperClass")} />
+                        <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
+                            <input
+                                className={clsx(
+                                    getClassName("kcButtonClass"),
+                                    getClassName("kcButtonPrimaryClass"),
+                                    getClassName("kcButtonBlockClass"),
+                                    getClassName("kcButtonLargeClass")
+                                )}
+                                name="login"
+                                id="kc-login"
+                                type="submit"
+                                value={msgStr("doLogIn")}
+                            />
+                        </div>
                     </div>
-
-                    <div id="kc-form-buttons" className={getClassName("kcFormButtonsClass")}>
-                        <input
-                            className={clsx(
-                                getClassName("kcButtonClass"),
-                                getClassName("kcButtonPrimaryClass"),
-                                getClassName("kcButtonBlockClass"),
-                                getClassName("kcButtonLargeClass")
-                            )}
-                            name="login"
-                            id="kc-login"
-                            type="submit"
-                            value={msgStr("doLogIn")}
-                        />
-                    </div>
-                </div>
-            </form>
-        </Template>
+                </form>
+            </Template>
+        </>
     );
 }
-
-declare const $: any;
-
-function evaluateInlineScript() {
-    $(document).ready(function () {
-        // Card Single Select
-        $(".card-pf-view-single-select").click(function (this: any) {
-            if ($(this).hasClass("active")) {
-                $(this).removeClass("active");
-                $(this).children().removeAttr("name");
-            } else {
-                $(".card-pf-view-single-select").removeClass("active");
-                $(".card-pf-view-single-select").children().removeAttr("name");
-                $(this).addClass("active");
-                $(this).children().attr("name", "selectedCredentialId");
-            }
-        });
-
-        var defaultCred = $(".card-pf-view-single-select")[0];
-        if (defaultCred) {
-            defaultCred.click();
-        }
-    });
-}

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;