npm install missing resources

src/account/Template.tsx

@@ -17,9 +17,11 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
     const { isReady } = usePrepareTemplate({
         "doFetchDefaultThemeResources": doUseDefaultCss,
-        url,
+        "styles": [
-        "stylesCommon": ["node_modules/patternfly/dist/css/patternfly.min.css", "node_modules/patternfly/dist/css/patternfly-additions.min.css"],
+            `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
-        "styles": ["css/account.css"],
+            `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
+            `${url.resourcesPath}/css/account.css`
+        ],
         "htmlClassName": undefined,
         "bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass"))
     });

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

@@ -4,6 +4,8 @@ import { downloadAndUnzip } from "./tools/downloadAndUnzip";
 import { promptKeycloakVersion } from "./promptKeycloakVersion";
 import { getLogger } from "./tools/logger";
 import { readBuildOptions } from "./keycloakify/BuildOptions";
+import * as child_process from "child_process";
+import * as fs from "fs";
 
 export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: string; destDirPath: string; isSilent: boolean }) {
     const { keycloakVersion, destDirPath } = params;
@@ -17,6 +19,67 @@ export async function downloadBuiltinKeycloakTheme(params: { keycloakVersion: st
             })
         )
     );
+
+    install_common_node_modules: {
+        const commonResourcesDirPath = pathJoin(destDirPath, "keycloak", "common", "resources");
+
+        if (!fs.existsSync(commonResourcesDirPath)) {
+            break install_common_node_modules;
+        }
+
+        if (!fs.existsSync(pathJoin(commonResourcesDirPath, "package.json"))) {
+            break install_common_node_modules;
+        }
+
+        if (fs.existsSync(pathJoin(commonResourcesDirPath, "node_modules"))) {
+            break install_common_node_modules;
+        }
+
+        console.log("npm install --omit=dev start", { keycloakVersion });
+
+        const start = Date.now();
+
+        child_process.execSync("npm install --omit=dev", {
+            "cwd": commonResourcesDirPath,
+            "stdio": "ignore"
+        });
+
+        console.log("npm install --omit=dev end", { keycloakVersion, "time": Date.now() - start });
+    }
+
+    install_and_move_to_common_resources_generated_in_keycloak_v2: {
+        const accountV2DirSrcDirPath = pathJoin(destDirPath, "keycloak.v2", "account", "src");
+
+        if (!fs.existsSync(accountV2DirSrcDirPath)) {
+            break install_and_move_to_common_resources_generated_in_keycloak_v2;
+        }
+
+        console.log("npm install start", { keycloakVersion });
+        const startInstall = Date.now();
+
+        child_process.execSync("npm install", { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
+
+        console.log("npm install end", { keycloakVersion, "time": Date.now() - startInstall });
+
+        const packageJsonFilePath = pathJoin(accountV2DirSrcDirPath, "package.json");
+
+        const packageJsonRaw = fs.readFileSync(packageJsonFilePath);
+
+        const parsedPackageJson = JSON.parse(packageJsonRaw.toString("utf8"));
+
+        parsedPackageJson.scripts.build = parsedPackageJson.scripts.build.replace("npm run check-types", "true").replace("npm run babel", "true");
+
+        fs.writeFileSync(packageJsonFilePath, Buffer.from(JSON.stringify(parsedPackageJson, null, 2), "utf8"));
+
+        console.log("npm run build start", { keycloakVersion });
+        const start = Date.now();
+
+        child_process.execSync("npm run build", { "cwd": accountV2DirSrcDirPath, "stdio": "ignore" });
+
+        console.log("npm run build end", { keycloakVersion, "time": Date.now() - start });
+
+        fs.writeFileSync(packageJsonFilePath, packageJsonRaw);
+    }
 }
 
 async function main() {

src/lib/usePrepareTemplate.ts

@@ -1,21 +1,15 @@
 import { useReducer, useEffect } from "react";
 import { headInsert } from "keycloakify/tools/headInsert";
-import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { clsx } from "keycloakify/tools/clsx";
 
 export function usePrepareTemplate(params: {
     doFetchDefaultThemeResources: boolean;
-    stylesCommon?: string[];
     styles?: string[];
     scripts?: string[];
-    url: {
-        resourcesCommonPath: string;
-        resourcesPath: string;
-    };
     htmlClassName: string | undefined;
     bodyClassName: string | undefined;
 }) {
-    const { doFetchDefaultThemeResources, stylesCommon = [], styles = [], url, scripts = [], htmlClassName, bodyClassName } = params;
+    const { doFetchDefaultThemeResources, styles = [], scripts = [], htmlClassName, bodyClassName } = params;
 
     const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources);
 
@@ -31,23 +25,18 @@ export function usePrepareTemplate(params: {
         (async () => {
             const prLoadedArray: Promise<void>[] = [];
 
-            [
+            styles.reverse().forEach(href => {
-                ...stylesCommon.map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
+                const { prLoaded, remove } = headInsert({
-                ...styles.map(relativePath => pathJoin(url.resourcesPath, relativePath))
+                    "type": "css",
-            ]
+                    "position": "prepend",
-                .reverse()
+                    href
-                .forEach(href => {
-                    const { prLoaded, remove } = headInsert({
-                        "type": "css",
-                        "position": "prepend",
-                        href
-                    });
-
-                    removeArray.push(remove);
-
-                    prLoadedArray.push(prLoaded);
                 });
 
+                removeArray.push(remove);
+
+                prLoadedArray.push(prLoaded);
+            });
+
             await Promise.all(prLoadedArray);
 
             if (isUnmounted) {
@@ -57,10 +46,10 @@ export function usePrepareTemplate(params: {
             setReady();
         })();
 
-        scripts.forEach(relativePath => {
+        scripts.forEach(src => {
             const { remove } = headInsert({
                 "type": "javascript",
-                "src": pathJoin(url.resourcesPath, relativePath)
+                src
             });
 
             removeArray.push(remove);

src/login/Template.tsx

@@ -31,13 +31,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
     const { isReady } = usePrepareTemplate({
         "doFetchDefaultThemeResources": doUseDefaultCss,
-        url,
+        "styles": [
-        "stylesCommon": [
+            `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
-            "node_modules/patternfly/dist/css/patternfly.min.css",
+            `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
-            "node_modules/patternfly/dist/css/patternfly-additions.min.css",
+            `${url.resourcesCommonPath}/lib/zocial/zocial.css`,
-            "lib/zocial/zocial.css"
+            `${url.resourcesPath}/css/login.css`
         ],
-        "styles": ["css/login.css"],
         "htmlClassName": getClassName("kcHtmlClass"),
         "bodyClassName": undefined
     });

src/login/pages/LoginOtp.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from "react";
 import { headInsert } from "keycloakify/tools/headInsert";
-import { pathJoin } from "keycloakify/bin/tools/pathJoin";
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import { useGetClassName } from "keycloakify/login/lib/useGetClassName";
@@ -24,7 +23,7 @@ export default function LoginOtp(props: PageProps<Extract<KcContext, { pageId: "
 
         const { prLoaded, remove } = headInsert({
             "type": "javascript",
-            "src": pathJoin(kcContext.url.resourcesCommonPath, "node_modules/jquery/dist/jquery.min.js")
+            "src": `${kcContext.url.resourcesCommonPath}/node_modules/jquery/dist/jquery.min.js`
         });
 
         (async () => {