keycloakify 9.3.0-rc.0 → 9.3.1

package/login/lib/useGetClassName.js

@@ -81,7 +81,7 @@ export const { useGetClassName } = createUseClassName({
         "kcAuthenticatorWebAuthnClass": "fa fa-key list-view-pf-icon-lg",
         "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",

package/login/lib/useGetClassName.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGetClassName.js","sourceRoot":"","sources":["../../src/login/lib/useGetClassName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,EAAE,eAAe,EAAE,GAAG,kBAAkB,CAAW;IAC5D,gBAAgB,EAAE;QACd,aAAa,EAAE,SAAS;QACxB,aAAa,EAAE,UAAU;QACzB,cAAc,EAAE,eAAe;QAC/B,uBAAuB,EAAE,KAAK;QAC9B,eAAe,EAAE,sBAAsB;QACvC,sBAAsB,EAAE,SAAS;QACjC,iBAAiB,EAAE,SAAS;QAC5B,wBAAwB,EAAE,mBAAmB;QAC7C,0BAA0B,EAAE,yBAAyB;QACrD,iCAAiC,EAAE,oBAAoB;QACvD,mBAAmB,EAAE,iBAAiB;QACtC,sBAAsB,EAAE,SAAS;QACjC,qBAAqB,EAAE,8BAA8B;QACrD,uBAAuB,EAAE,kCAAkC;QAC3D,uBAAuB,EAAE,kBAAkB;QAC3C,oBAAoB,EAAE,oBAAoB;QAC1C,iBAAiB,EAAE,2BAA2B;QAC9C,kBAAkB,EAAE,YAAY;QAChC,qBAAqB,EAAE,yCAAyC;QAChE,eAAe,EAAE,iBAAiB;QAClC,wBAAwB,EAAE,SAAS;QAEnC,aAAa,EAAE,gBAAgB;QAC/B,kBAAkB,EAAE,iBAAiB;QACrC,gBAAgB,EAAE,4EAA4E;QAC9F,qBAAqB,EAAE,WAAW;QAClC,eAAe,EAAE,oBAAoB;QACrC,uBAAuB,EAAE,8BAA8B;QAEvD,iBAAiB,EAAE,6EAA6E;QAChG,8BAA8B,EAAE,mDAAmD;QACnF,oCAAoC,EAAE,4BAA4B;QAClE,kCAAkC,EAAE,sBAAsB;QAC1D,mBAAmB,EAAE,mBAAmB;QACxC,uBAAuB,EAAE,mBAAmB;QAE5C,aAAa,EAAE,iBAAiB;QAChC,uBAAuB,EAAE,WAAW;QACpC,cAAc,EAAE,eAAe;QAC/B,cAAc,EAAE,cAAc;QAC9B,0BAA0B,EAAE,6DAA6D;QACzF,qBAAqB,EAAE,yCAAyC;QAChE,2BAA2B,EAAE,SAAS;QACtC,oBAAoB,EAAE,yCAAyC;QAC/D,oBAAoB,EAAE,yCAAyC;QAC/D,oBAAoB,EAAE,mBAAmB;QACzC,iBAAiB,EAAE,cAAc;QAEjC,iBAAiB,EAAE,8CAA8C;QAEjE,wBAAwB;QACxB,mBAAmB,EAAE,kBAAkB;QAEvC,+DAA+D;QAC/D,eAAe,EAAE,KAAK;QACtB,0HAA0H;QAC1H,sBAAsB,EAAE,aAAa;QACrC,sBAAsB,EAAE,aAAa;QACrC,sCAAsC;QACtC,oBAAoB,EAAE,QAAQ;QAC9B,oBAAoB,EAAE,WAAW;QAEjC,wBAAwB;QACxB,mBAAmB,EAAE,UAAU;QAC/B,cAAc,EAAE,kBAAkB;QAElC,qCAAqC;QACrC,eAAe,EAAE,SAAS;QAE1B,4CAA4C;QAC5C,uBAAuB,EAAE,yBAAyB;QAClD,2BAA2B,EAAE,sCAAsC;QACnE,+BAA+B,EAAE,4BAA4B;QAC7D,uCAAuC,EAAE,uCAAuC;QAChF,+BAA+B,EAAE,uCAAuC;QACxE,2BAA2B,EAAE,2BAA2B;QACxD,+BAA+B,EAAE,wBAAwB;QACzD,+BAA+B,EAAE,mBAAmB;QACpD,+BAA+B,EAAE,mBAAmB;QACpD,sCAAsC,EAAE,0BAA0B;QAClE,kCAAkC,EAAE,yBAAyB;QAC7D,mCAAmC,EAAE,sBAAsB;QAE3D,qCAAqC;QACrC,6BAA6B,EAAE,yBAAyB;QACxD,8BAA8B,EAAE,mCAAmC;QACnE,yBAAyB,EAAE,mCAAmC;QAC9D,8BAA8B,EAAE,gCAAgC;QAChE,0CAA0C,EAAE,gCAAgC;QAE5E,oCAAoC;QACpC,sBAAsB,EAAE,qEAAqE;QAC7F,0BAA0B,EAAE,kCAAkC;QAC9D,+BAA+B,EAAE,kCAAkC;QACnE,6BAA6B,EAAE,2BAA2B;QAC1D,2BAA2B,EAAE,SAAS;KACzC;CACJ,CAAC,CAAC"}
+{"version":3,"file":"useGetClassName.js","sourceRoot":"","sources":["../../src/login/lib/useGetClassName.ts"],"names":[],"mappings":"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"}

package/login/pages/LoginOtp.js

@@ -1,6 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
-import { headInsert } from "../../tools/headInsert";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { clsx } from "../../tools/clsx";
 import { useGetClassName } from "../../login/lib/useGetClassName";
 export default function LoginOtp(props) {
@@ -11,45 +9,9 @@ export default function LoginOtp(props) {
     });
     const { otpLogin, url } = kcContext;
     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 (_jsx(Template, Object.assign({}, { kcContext, i18n, doUseDefaultCss, classes }, { headerNode: msg("doLogIn") }, { children: _jsxs("form", Object.assign({ id: "kc-otp-login-form", className: getClassName("kcFormClass"), action: url.loginAction, method: "post" }, { children: [otpLogin.userOtpCredentials.length > 1 && (_jsx("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: otpLogin.userOtpCredentials.map(otpCredential => (_jsxs("div", Object.assign({ className: getClassName("kcSelectOTPListClass") }, { children: [_jsx("input", { type: "hidden", value: "${otpCredential.id}" }), _jsxs("div", Object.assign({ className: getClassName("kcSelectOTPListItemClass") }, { children: [_jsx("span", { className: getClassName("kcAuthenticatorOtpCircleClass") }), _jsx("h2", Object.assign({ className: getClassName("kcSelectOTPItemHeadingClass") }, { children: otpCredential.userLabel }))] }))] }), otpCredential.id))) })) }))), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ className: getClassName("kcLabelWrapperClass") }, { children: _jsx("label", Object.assign({ htmlFor: "otp", className: getClassName("kcLabelClass") }, { children: msg("loginOtpOneTime") })) })), _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: _jsx("input", { id: "otp", name: "otp", autoComplete: "off", type: "text", className: getClassName("kcInputClass"), autoFocus: true }) }))] })), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ id: "kc-form-options", className: getClassName("kcFormOptionsClass") }, { children: _jsx("div", { className: getClassName("kcFormOptionsWrapperClass") }) })), _jsx("div", Object.assign({ id: "kc-form-buttons", className: getClassName("kcFormButtonsClass") }, { children: _jsx("input", { className: clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonBlockClass"), getClassName("kcButtonLargeClass")), name: "login", id: "kc-login", type: "submit", value: msgStr("doLogIn") }) }))] }))] })) })));
-}
-function evaluateInlineScript() {
-    $(document).ready(function () {
-        // Card Single Select
-        $(".card-pf-view-single-select").click(function () {
-            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();
-        }
-    });
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+                input[type="radio"]:checked~label.kcSelectOTPListClass{
+                    border: 2px solid #39a5dc;
+                }` }), _jsx(Template, Object.assign({}, { kcContext, i18n, doUseDefaultCss, classes }, { headerNode: msg("doLogIn") }, { children: _jsxs("form", Object.assign({ id: "kc-otp-login-form", className: getClassName("kcFormClass"), action: url.loginAction, method: "post" }, { children: [otpLogin.userOtpCredentials.length > 1 && (_jsx("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: otpLogin.userOtpCredentials.map((otpCredential, index) => (_jsxs("div", { children: [_jsx("input", { id: `kc-otp-credential-${index}`, name: "selectedCredentialId", type: "radio", value: otpCredential.id, style: { display: "none" } }), _jsx("label", Object.assign({ htmlFor: `kc-otp-credential-${index}`, className: getClassName("kcSelectOTPListClass") }, { children: _jsxs("div", Object.assign({ className: getClassName("kcSelectOTPListItemClass") }, { children: [_jsx("span", { className: getClassName("kcAuthenticatorOtpCircleClass") }), _jsx("h2", Object.assign({ className: getClassName("kcSelectOTPItemHeadingClass") }, { children: otpCredential.userLabel }))] })) }), otpCredential.id)] }, otpCredential.id))) })) }))), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ className: getClassName("kcLabelWrapperClass") }, { children: _jsx("label", Object.assign({ htmlFor: "otp", className: getClassName("kcLabelClass") }, { children: msg("loginOtpOneTime") })) })), _jsx("div", Object.assign({ className: getClassName("kcInputWrapperClass") }, { children: _jsx("input", { id: "otp", name: "otp", autoComplete: "off", type: "text", className: getClassName("kcInputClass"), autoFocus: true }) }))] })), _jsxs("div", Object.assign({ className: getClassName("kcFormGroupClass") }, { children: [_jsx("div", Object.assign({ id: "kc-form-options", className: getClassName("kcFormOptionsClass") }, { children: _jsx("div", { className: getClassName("kcFormOptionsWrapperClass") }) })), _jsx("div", Object.assign({ id: "kc-form-buttons", className: getClassName("kcFormButtonsClass") }, { children: _jsx("input", { className: clsx(getClassName("kcButtonClass"), getClassName("kcButtonPrimaryClass"), getClassName("kcButtonBlockClass"), getClassName("kcButtonLargeClass")), name: "login", id: "kc-login", type: "submit", value: msgStr("doLogIn") }) }))] }))] })) }))] }));
 }
 //# sourceMappingURL=LoginOtp.js.map

package/login/pages/LoginOtp.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoginOtp.js","sourceRoot":"","sources":["../../src/login/pages/LoginOtp.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"LoginOtp.js","sourceRoot":"","sources":["../../src/login/pages/LoginOtp.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "9.3.0-rc.0",
+    "version": "9.3.1",
     "description": "Create Keycloak themes using React",
     "repository": {
         "type": "git",
@@ -212,9 +212,6 @@
         "src/tools/useConst.ts",
         "src/tools/useConstCallback.ts",
         "src/tsconfig.json",
-        "src/vite-plugin/index.ts",
-        "src/vite-plugin/tsconfig.json",
-        "src/vite-plugin/vite-plugin.ts",
         "account/Fallback.d.ts",
         "account/Fallback.js",
         "account/Fallback.js.map",
@@ -895,9 +892,6 @@
         "src/tools/useConst.ts",
         "src/tools/useConstCallback.ts",
         "src/tsconfig.json",
-        "src/vite-plugin/index.ts",
-        "src/vite-plugin/tsconfig.json",
-        "src/vite-plugin/vite-plugin.ts",
         "tools/AndByDiscriminatingKey.d.ts",
         "tools/AndByDiscriminatingKey.js",
         "tools/AndByDiscriminatingKey.js.map",
@@ -945,14 +939,7 @@
         "tools/useConst.js.map",
         "tools/useConstCallback.d.ts",
         "tools/useConstCallback.js",
-        "tools/useConstCallback.js.map",
-        "vite-plugin/index.d.ts",
-        "vite-plugin/index.js",
-        "vite-plugin/index.js.map",
-        "vite-plugin/tsconfig.tsbuildinfo",
-        "vite-plugin/vite-plugin.d.ts",
-        "vite-plugin/vite-plugin.js",
-        "vite-plugin/vite-plugin.js.map"
+        "tools/useConstCallback.js.map"
     ],
     "keywords": [
         "bluehats",
@@ -1006,8 +993,7 @@
         "tss-react": "^4.8.2",
         "typescript": "^4.9.1-beta",
         "vitest": "^0.29.8",
-        "zod-to-json-schema": "^3.20.4",
-        "vite": "^5.0.12"
+        "zod-to-json-schema": "^3.20.4"
     },
     "dependencies": {
         "@babel/generator": "^7.22.9",

package/src/bin/constants.ts

@@ -3,6 +3,7 @@ export const resources_common = "resources-common";
 export const lastKeycloakVersionWithAccountV1 = "21.1.2";
 
 export const themeTypes = ["login", "account"] as const;
+export const retrocompatPostfix = "_retrocompat";
 export const accountV1 = "account-v1";
 
 export type ThemeType = (typeof themeTypes)[number];

package/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");
 

package/src/bin/keycloakify/BuildOptions.ts

@@ -3,7 +3,6 @@ import { getParsedPackageJson } from "./parsedPackageJson";
 import { join as pathJoin } from "path";
 import parseArgv from "minimist";
 import { getAbsoluteAndInOsFormatPath } from "../tools/getAbsoluteAndInOsFormatPath";
-import * as fs from "fs";
 
 /** Consolidated build option gathered form CLI arguments and config in package.json */
 export type BuildOptions = {
@@ -16,6 +15,7 @@ export type BuildOptions = {
     doCreateJar: boolean;
     loginThemeResourcesFromKeycloakVersion: string;
     reactAppRootDirPath: string;
+    /** Directory of your built react project. Defaults to {cwd}/build */
     reactAppBuildDirPath: string;
     /** Directory that keycloakify outputs to. Defaults to {cwd}/build_keycloak */
     keycloakifyBuildDirPath: string;
@@ -24,6 +24,7 @@ export type BuildOptions = {
     /** If your app is hosted under a subpath, it's the case in CRA if you have "homepage": "https://example.com/my-app" in your package.json
      * In this case the urlPathname will be "/my-app/" */
     urlPathname: string | undefined;
+    doBuildRetrocompatAccountTheme: boolean;
 };
 
 export function readBuildOptions(params: { reactAppRootDirPath: string; processArgv: string[] }): BuildOptions {
@@ -106,17 +107,7 @@ export function readBuildOptions(params: { reactAppRootDirPath: string; processA
                 });
             }
 
-            for (const name of ["build", "dist"]) {
-                const out = pathJoin(reactAppRootDirPath, name);
-
-                if (!fs.existsSync(out)) {
-                    continue;
-                }
-
-                return out;
-            }
-
-            throw new Error("Please use the reactAppBuildDirPath option to specify the build directory of your react app");
+            return pathJoin(reactAppRootDirPath, "build");
         })(),
         "keycloakifyBuildDirPath": (() => {
             const { keycloakifyBuildDirPath } = parsedPackageJson.keycloakify ?? {};
@@ -160,6 +151,7 @@ export function readBuildOptions(params: { reactAppRootDirPath: string; processA
 
             const out = url.pathname.replace(/([^/])$/, "$1/");
             return out === "/" ? undefined : out;
-        })()
+        })(),
+        "doBuildRetrocompatAccountTheme": parsedPackageJson.keycloakify?.doBuildRetrocompatAccountTheme ?? true
     };
 }

package/src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -37,7 +37,7 @@ export function generateFtlFilesCodeFactory(params: {
 
             assert(jsCode !== null);
 
-            const { fixedJsCode } = replaceImportsFromStaticInJsCode({ jsCode, "bundler": "vite" });
+            const { fixedJsCode } = replaceImportsFromStaticInJsCode({ jsCode });
 
             $(element).text(fixedJsCode);
         });

package/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",

package/src/bin/keycloakify/generateJavaStackFiles/generateJavaStackFiles.ts

@@ -3,7 +3,7 @@ import { join as pathJoin, dirname as pathDirname } from "path";
 import { assert } from "tsafe/assert";
 import { Reflect } from "tsafe/Reflect";
 import type { BuildOptions } from "../BuildOptions";
-import { type ThemeType, accountV1 } from "../../constants";
+import { type ThemeType, retrocompatPostfix, accountV1 } from "../../constants";
 import { bringInAccountV1 } from "./bringInAccountV1";
 
 export type BuildOptionsLike = {
@@ -13,6 +13,7 @@ export type BuildOptionsLike = {
     cacheDirPath: string;
     keycloakifyBuildDirPath: string;
     themeNames: string[];
+    doBuildRetrocompatAccountTheme: boolean;
 };
 
 {
@@ -113,7 +114,15 @@ export async function generateJavaStackFiles(params: {
                                         "types": Object.entries(implementedThemeTypes)
                                             .filter(([, isImplemented]) => isImplemented)
                                             .map(([themeType]) => themeType)
-                                    }
+                                    },
+                                    ...(!implementedThemeTypes.account || !buildOptions.doBuildRetrocompatAccountTheme
+                                        ? []
+                                        : [
+                                              {
+                                                  "name": `${themeName}${retrocompatPostfix}`,
+                                                  "types": ["account"]
+                                              }
+                                          ])
                                 ])
                                 .flat()
                         ]

package/src/bin/keycloakify/generateTheme/generateTheme.ts

@@ -1,10 +1,10 @@
 import { transformCodebase } from "../../tools/transformCodebase";
 import * as fs from "fs";
-import { join as pathJoin, resolve as pathResolve } from "path";
+import { join as pathJoin, basename as pathBasename, resolve as pathResolve } from "path";
 import { replaceImportsFromStaticInJsCode } from "../replacers/replaceImportsFromStaticInJsCode";
 import { replaceImportsInCssCode } from "../replacers/replaceImportsInCssCode";
 import { generateFtlFilesCodeFactory, loginThemePageIds, accountThemePageIds } from "../generateFtl";
-import { themeTypes, type ThemeType, lastKeycloakVersionWithAccountV1, keycloak_resources, accountV1 } from "../../constants";
+import { themeTypes, type ThemeType, lastKeycloakVersionWithAccountV1, keycloak_resources, retrocompatPostfix, accountV1 } from "../../constants";
 import { isInside } from "../../tools/isInside";
 import type { BuildOptions } from "../BuildOptions";
 import { assert, type Equals } from "tsafe/assert";
@@ -22,6 +22,7 @@ export type BuildOptionsLike = {
     keycloakifyBuildDirPath: string;
     reactAppBuildDirPath: string;
     cacheDirPath: string;
+    doBuildRetrocompatAccountTheme: boolean;
 };
 
 assert<BuildOptions extends BuildOptionsLike ? true : false>();
@@ -35,9 +36,17 @@ export async function generateTheme(params: {
 }): Promise<void> {
     const { themeName, themeSrcDirPath, keycloakifySrcDirPath, buildOptions, keycloakifyVersion } = params;
 
-    const getThemeTypeDirPath = (params: { themeType: ThemeType | "email" }) => {
-        const { themeType } = params;
-        return pathJoin(buildOptions.keycloakifyBuildDirPath, "src", "main", "resources", "theme", themeName, themeType);
+    const getThemeTypeDirPath = (params: { themeType: ThemeType | "email"; isRetrocompat?: true }) => {
+        const { themeType, isRetrocompat = false } = params;
+        return pathJoin(
+            buildOptions.keycloakifyBuildDirPath,
+            "src",
+            "main",
+            "resources",
+            "theme",
+            `${themeName}${isRetrocompat ? retrocompatPostfix : ""}`,
+            themeType
+        );
     };
 
     let allCssGlobalsToDefine: Record<string, string> = {};
@@ -93,8 +102,7 @@ export async function generateTheme(params: {
 
                     if (/\.js?$/i.test(filePath)) {
                         const { fixedJsCode } = replaceImportsFromStaticInJsCode({
-                            "jsCode": sourceCode.toString("utf8"),
-                            "bundler": "vite"
+                            "jsCode": sourceCode.toString("utf8")
                         });
 
                         return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
@@ -193,6 +201,22 @@ export async function generateTheme(params: {
                 "utf8"
             )
         );
+
+        if (themeType === "account" && buildOptions.doBuildRetrocompatAccountTheme) {
+            transformCodebase({
+                "srcDirPath": themeTypeDirPath,
+                "destDirPath": getThemeTypeDirPath({ themeType, "isRetrocompat": true }),
+                "transformSourceCode": ({ filePath, sourceCode }) => {
+                    if (pathBasename(filePath) === "theme.properties") {
+                        return {
+                            "modifiedSourceCode": Buffer.from(sourceCode.toString("utf8").replace(`parent=${accountV1}`, "parent=keycloak"), "utf8")
+                        };
+                    }
+
+                    return { "modifiedSourceCode": sourceCode };
+                }
+            });
+        }
     }
 
     email: {

package/src/bin/keycloakify/replacers/replaceImportsFromStaticInJsCode.ts

@@ -1,32 +1,18 @@
 import { ftlValuesGlobalName } from "../ftlValuesGlobalName";
 
-export function replaceImportsFromStaticInJsCode(params: { jsCode: string; bundler: "vite" | "webpack" }): { fixedJsCode: string } {
-    const { jsCode } = params;
-
-    const { fixedJsCode } = (() => {
-        switch (params.bundler) {
-            case "vite":
-                return replaceImportsFromStaticInJsCode_vite({ jsCode });
-            case "webpack":
-                return replaceImportsFromStaticInJsCode_webpack({ jsCode });
-        }
-    })();
-
-    return { fixedJsCode };
-}
-
-export function replaceImportsFromStaticInJsCode_vite(params: { jsCode: string }): { fixedJsCode: string } {
-    const { jsCode } = params;
+export function replaceImportsFromStaticInJsCode(params: { jsCode: string }): { fixedJsCode: string } {
+    /* 
+	NOTE:
 
-    const fixedJsCode = jsCode.replace(
-        /\.viteFileDeps = \[(.*)\]/g,
-        (...args) => `.viteFileDeps = [${args[1]}].map(viteFileDep => window.kcContext.url.resourcesPath.substring(1) + "/build/" + viteFileDep)`
-    );
+	When we have urlOrigin defined it means that 
+	we are building with --external-assets
+	so we have to make sur that the fixed js code will run 
+	inside and outside keycloak.
 
-    return { fixedJsCode };
-}
+	When urlOrigin isn't defined we can assume the fixedJsCode
+	will always run in keycloak context.
+	*/
 
-export function replaceImportsFromStaticInJsCode_webpack(params: { jsCode: string }): { fixedJsCode: string } {
     const { jsCode } = params;
 
     const getReplaceArgs = (language: "js" | "css"): Parameters<typeof String.prototype.replace> => [

package/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"
     ];
 

package/src/login/lib/useGetClassName.ts

@@ -94,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",