Update prepare template for Keycloak 24

src/account/Template.tsx

@@ -16,12 +16,14 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
     const { locale, url, features, realm, message, referrer } = kcContext;
 
     const { isReady } = usePrepareTemplate({
-        "doFetchDefaultThemeResources": doUseDefaultCss,
+        "styles": !doUseDefaultCss
-        "styles": [
+            ? []
+            : [
                   `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
                   `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
                   `${url.resourcesPath}/css/account.css`
               ],
+        "scripts": [],
         "htmlClassName": getClassName("kcHtmlClass"),
         "bodyClassName": clsx("admin-console", "user", getClassName("kcBodyClass")),
         "htmlLangProperty": locale?.currentLanguageTag,

src/lib/usePrepareTemplate.ts

@@ -4,17 +4,27 @@ import { clsx } from "keycloakify/tools/clsx";
 import { assert } from "tsafe/assert";
 
 export function usePrepareTemplate(params: {
-    doFetchDefaultThemeResources: boolean;
+    styles: string[];
-    styles?: string[];
+    scripts: {
-    scripts?: string[];
+        isModule: boolean;
+        source:
+            | {
+                  type: "url";
+                  src: string;
+              }
+            | {
+                  type: "inline";
+                  code: string;
+              };
+    }[];
     htmlClassName: string | undefined;
     bodyClassName: string | undefined;
-    htmlLangProperty?: string | undefined;
+    htmlLangProperty: string | undefined;
-    documentTitle?: string;
+    documentTitle: string | undefined;
 }) {
-    const { doFetchDefaultThemeResources, styles = [], scripts = [], htmlClassName, bodyClassName, htmlLangProperty, documentTitle } = params;
+    const { styles, scripts, htmlClassName, bodyClassName, htmlLangProperty, documentTitle } = params;
 
-    const [isReady, setReady] = useReducer(() => true, !doFetchDefaultThemeResources);
+    const [isReady, setReady] = useReducer(() => true, styles.length === 0 && scripts.length === 0);
 
     useEffect(() => {
         if (htmlLangProperty === undefined) {
@@ -35,10 +45,6 @@ export function usePrepareTemplate(params: {
     }, [documentTitle]);
 
     useEffect(() => {
-        if (!doFetchDefaultThemeResources) {
-            return;
-        }
-
         let isUnmounted = false;
 
         const removeArray: (() => void)[] = [];
@@ -64,10 +70,10 @@ export function usePrepareTemplate(params: {
             setReady();
         })();
 
-        scripts.forEach(src => {
+        scripts.forEach(script => {
             const { remove } = headInsert({
                 "type": "javascript",
-                src
+                ...script
             });
 
             removeArray.push(remove);

src/login/Template.tsx

@@ -27,16 +27,46 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
 
     const { msg, changeLocale, labelBySupportedLanguageTag, currentLanguageTag } = i18n;
 
-    const { realm, locale, auth, url, message, isAppInitiatedAction } = kcContext;
+    const { realm, locale, auth, url, message, isAppInitiatedAction, authenticationSession } = kcContext;
 
     const { isReady } = usePrepareTemplate({
-        "doFetchDefaultThemeResources": doUseDefaultCss,
+        "styles": !doUseDefaultCss
-        "styles": [
+            ? []
+            : [
+                  `${url.resourcesCommonPath}/node_modules/@patternfly/patternfly/patternfly.min.css`,
                   `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly.min.css`,
                   `${url.resourcesCommonPath}/node_modules/patternfly/dist/css/patternfly-additions.min.css`,
-            `${url.resourcesCommonPath}/lib/zocial/zocial.css`,
+                  `${url.resourcesCommonPath}/lib/pficon/pficon.css`,
                   `${url.resourcesPath}/css/login.css`
               ],
+        "scripts": [
+            {
+                "isModule": true,
+                "source": {
+                    "type": "url",
+                    "src": `${url.resourcesPath}/js/menu-button-links.js`
+                }
+            },
+            ...(authenticationSession === undefined
+                ? []
+                : [
+                      {
+                          "isModule": true,
+                          "source": {
+                              "type": "inline" as const,
+                              "code": [
+                                  `import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";`,
+                                  ``,
+                                  `checkCookiesAndSetTimer(`,
+                                  `  "${authenticationSession.authSessionId}",`,
+                                  `  "${authenticationSession.tabId}",`,
+                                  `  "${url.ssoLoginInOtherTabsUrl}"`,
+                                  `);`
+                              ].join("\n")
+                          }
+                      }
+                  ])
+        ],
         "htmlClassName": getClassName("kcHtmlClass"),
         "bodyClassName": getClassName("kcBodyClass"),
         "htmlLangProperty": locale?.currentLanguageTag,

src/login/kcContext/KcContext.ts

@@ -50,6 +50,7 @@ export declare namespace KcContext {
             resourcesCommonPath: string;
             loginRestartFlowUrl: string;
             loginUrl: string;
+            ssoLoginInOtherTabsUrl: string;
         };
         realm: {
             name: string;
@@ -117,6 +118,11 @@ export declare namespace KcContext {
             exists: (fieldName: string) => boolean;
         };
         properties: Record<string, string | undefined>;
+        authenticationSession?: {
+            authSessionId: string;
+            tabId: string;
+            ssoLoginInOtherTabsUrl: string;
+        };
     };
 
     export type SamlPostForm = Common & {

src/login/kcContext/kcContextMocks.ts

@@ -112,7 +112,8 @@ export const kcContextCommonMock: KcContext.Common = {
         resourcesPath,
         "resourcesCommonPath": `${resourcesPath}/${resources_common}`,
         "loginRestartFlowUrl": "/auth/realms/myrealm/login-actions/restart?client_id=account&tab_id=HoAx28ja4xg",
-        "loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg"
+        "loginUrl": "/auth/realms/myrealm/login-actions/authenticate?client_id=account&tab_id=HoAx28ja4xg",
+        "ssoLoginInOtherTabsUrl": "/auth/realms/myrealm/login-actions/switch?client_id=account&tab_id=HoAx28ja4xg"
     },
     "realm": {
         "name": "myrealm",

src/tools/headInsert.ts

@@ -10,8 +10,17 @@ export function headInsert(
           }
         | {
               type: "javascript";
+              isModule: boolean;
+              source:
+                  | {
+                        type: "url";
                         src: string;
                     }
+                  | {
+                        type: "inline";
+                        code: string;
+                    };
+          }
 ): { remove: () => void; prLoaded: Promise<void> } {
     const htmlElement = document.createElement(
         (() => {
@@ -35,14 +44,19 @@ export function headInsert(
                 case "css":
                     return {
                         "href": params.href,
-                        "type": "text/css",
+                        "rel": "stylesheet"
-                        "rel": "stylesheet",
-                        "media": "screen,print"
                     };
                 case "javascript":
                     return {
-                        "src": params.src,
+                        ...(() => {
-                        "type": "text/javascript"
+                            switch (params.source.type) {
+                                case "inline":
+                                    return { "textContent": params.source.code };
+                                case "url":
+                                    return { "src": params.source.src };
+                            }
+                        })(),
+                        "type": params.isModule ? "module" : "text/javascript"
                     };
             }
         })()