Login appear to be working now

src/bin/build-keycloak-theme/generateKeycloakThemeResources.ts

@@ -106,7 +106,10 @@ export function generateKeycloakThemeResources(
 
     fs.writeFileSync(
         pathJoin(themeDirPath, "theme.properties"),
-        Buffer.from(`import=common/${themeName}\n`, "utf8")
+        Buffer.from([
+            `[import=common/${themeName}`,
+            "locales=ca,cs,de,en,es,fr,it,ja,lt,nl,no,pl,pt-BR,ru,sk,sv,tr,zh-CN"
+        ].join("\n"), "utf8")
     );
 
 }

src/lib/components/Template.tsx

@@ -1,5 +1,5 @@
 
-import { useState, useEffect, memo } from "react";
+import { useState, useReducer ,useEffect, memo } from "react";
 import type { ReactNode } from "react";
 import { useKcTranslation } from "../i18n/useKcTranslation";
 import { kcContext } from "../kcContext";
@@ -9,8 +9,7 @@ import { useKcLanguageTag } from "../i18n/useKcLanguageTag";
 import type { KcLanguageTag } from "../i18n/KcLanguageTag";
 import { getKcLanguageTagLabel } from "../i18n/KcLanguageTag";
 import { useCallbackFactory } from "powerhooks";
-import { appendLinkInHead } from "../tools/appendLinkInHead";
-import { appendScriptInHead } from "../tools/appendScriptInHead";
+import { appendHead } from "../tools/appendHead";
 import { join as pathJoin } from "path";
 import { useConstCallback } from "powerhooks";
 import type { KcTemplateProperties } from "./KcProperties";
@@ -69,36 +68,48 @@ export const Template = memo((props: TemplateProps) => {
         kcContext
     ));
 
+    const [isExtraCssLoaded, setExtraCssLoaded] = useReducer(() => true, false);
+
     useEffect(() => {
 
-        kcProperties.stylesCommon?.forEach(
-            relativePath =>
-                appendLinkInHead(
-                    { "href": pathJoin(url.resourcesCommonPath, relativePath) }
-                )
-        );
+        let isUnmounted = false;
 
-        kcProperties.styles?.forEach(
-            relativePath =>
-                appendLinkInHead(
-                    { "href": pathJoin(url.resourcesPath, relativePath) }
-                )
-        );
+        Promise.all(
+            [
+                ...(kcProperties.stylesCommon ?? []).map(relativePath => pathJoin(url.resourcesCommonPath, relativePath)),
+                ...(kcProperties.styles ?? []).map(relativePath => pathJoin(url.resourcesPath, relativePath))
+            ].map(href => appendHead({
+                "type": "css",
+                href
+            }))).then(() => {
+
+                if (isUnmounted) {
+                    return;
+                }
+
+                setExtraCssLoaded();
+
+            });
 
         kcProperties.scripts?.forEach(
-            relativePath =>
-                appendScriptInHead(
-                    { "src": pathJoin(url.resourcesPath, relativePath) }
-                )
+            relativePath => appendHead({
+                "type": "javascript",
+                "src": pathJoin(url.resourcesPath, relativePath)
+            })
         );
 
         document.getElementsByTagName("html")[0]
             .classList
             .add(cx(kcProperties.kcHtmlClass));
 
+        return () => { isUnmounted = true; };
 
     }, []);
 
+    if (!isExtraCssLoaded) {
+        return null;
+    }
+
     return (
         <div className={cx(kcProperties.kcLoginClass)}>
 
@@ -108,7 +119,7 @@ export const Template = memo((props: TemplateProps) => {
                 </div>
             </div>
 
-            <div className={cx("kcFormCardClass", displayWide && kcProperties.kcFormCardAccountClass)}>
+            <div className={cx(kcProperties.kcFormCardClass, displayWide && kcProperties.kcFormCardAccountClass)}>
                 <header className={cx(kcProperties.kcFormHeaderClass)}>
                     {
                         (
@@ -142,7 +153,7 @@ export const Template = memo((props: TemplateProps) => {
 
                     }
                     {
-                        (
+                        !(
                             auth !== undefined &&
                             auth.showUsername &&
                             !auth.showResetCredentials

src/lib/tools/appendHead.ts

@@ -0,0 +1,49 @@
+
+import { Deferred } from "evt/tools/Deferred";
+
+export function appendHead(
+    params: {
+        type: "css";
+        href: string;
+    } | {
+        type: "javascript";
+        src: string;
+    }
+) {
+
+    const htmlElement = document.createElement(
+        (() => {
+            switch (params.type) {
+                case "css": return "link";
+                case "javascript": return "script";
+            }
+        })()
+    );
+
+    const dLoaded = new Deferred<void>();
+
+    htmlElement.addEventListener("load", () => dLoaded.resolve());
+
+    Object.assign(
+        htmlElement,
+        (() => {
+            switch (params.type) {
+                case "css": return {
+                    "href": params.href,
+                    "type": "text/css",
+                    "rel": "stylesheet",
+                    "media": "screen,print"
+                };
+                case "javascript": return {
+                    "src": params.src,
+                    "type": "text/javascript",
+                };
+            }
+        })()
+    );
+
+    document.getElementsByTagName("head")[0].appendChild(htmlElement);
+
+    return dLoaded.pr;
+
+}

src/lib/tools/appendLinkInHead.ts

@@ -1,24 +0,0 @@
-
-export function appendLinkInHead(
-    props: {
-        href: string;
-    }
-) {
-
-    const { href } = props;
-
-    var link = document.createElement("link");
-
-    Object.assign(
-        link,
-        {
-            href,
-            "type": "text/css",
-            "rel": "stylesheet",
-            "media": "screen,print"
-        }
-    );
-
-    document.getElementsByTagName("head")[0].appendChild(link);
-
-}

src/lib/tools/appendScriptInHead.ts

@@ -1,22 +0,0 @@
-
-export function appendScriptInHead(
-    props: {
-        src: string;
-    }
-) {
-
-    const { src } = props;
-
-    var script = document.createElement("script");
-
-    Object.assign(
-        script,
-        {
-            src,
-            "type": "text/javascript",
-        }
-    );
-
-    document.getElementsByTagName("head")[0].appendChild(script);
-
-}