keycloakify 10.1.0-rc.0 → 10.1.0

package/src/login/Template.useStylesAndScripts.ts

@@ -0,0 +1,94 @@
+import { useEffect } from "react";
+import { assert } from "keycloakify/tools/assert";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { useInsertLinkTags } from "keycloakify/tools/useInsertLinkTags";
+import { KcContext } from "keycloakify/login/KcContext/KcContext";
+
+export type KcContextLike = {
+    url: {
+        resourcesCommonPath: string;
+        resourcesPath: string;
+        ssoLoginInOtherTabsUrl: string;
+    };
+    locale?: {
+        currentLanguageTag: string;
+    };
+    scripts: string[];
+};
+
+assert<keyof KcContextLike extends keyof KcContext ? true : false>();
+assert<KcContext extends KcContextLike ? true : false>();
+
+export function useStylesAndScripts(params: {
+    kcContext: KcContextLike;
+    doUseDefaultCss: boolean;
+}) {
+    const { kcContext, doUseDefaultCss } = params;
+
+    const { url, locale, scripts } = kcContext;
+
+    useEffect(() => {
+        const { currentLanguageTag } = locale ?? {};
+
+        if (currentLanguageTag === undefined) {
+            return;
+        }
+
+        const html = document.querySelector("html");
+        assert(html !== null);
+        html.lang = currentLanguageTag;
+    }, []);
+
+    const { areAllStyleSheetsLoaded } = useInsertLinkTags({
+        componentOrHookName: "Template",
+        hrefs: !doUseDefaultCss
+            ? []
+            : [
+                  `${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/pficon/pficon.css`,
+                  `${url.resourcesPath}/css/login.css`
+              ]
+    });
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "Template",
+        scriptTags: [
+            {
+                type: "importmap",
+                textContent: JSON.stringify({
+                    imports: {
+                        rfc4648: `${url.resourcesCommonPath}/node_modules/rfc4648/lib/rfc4648.js`
+                    }
+                })
+            },
+            {
+                type: "module",
+                src: `${url.resourcesPath}/js/menu-button-links.js`
+            },
+            ...scripts.map(src => ({
+                type: "text/javascript" as const,
+                src
+            })),
+            {
+                type: "module",
+                textContent: `
+                    import { checkCookiesAndSetTimer } from "${url.resourcesPath}/js/authChecker.js";
+
+                    checkCookiesAndSetTimer(
+                        "${url.ssoLoginInOtherTabsUrl}"
+                    );
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (areAllStyleSheetsLoaded) {
+            insertScriptTags();
+        }
+    }, [areAllStyleSheetsLoaded]);
+
+    return { isReadyToRender: areAllStyleSheetsLoaded };
+}

package/src/login/pages/Login.tsx

@@ -43,7 +43,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
             }
             socialProvidersNode={
                 <>
-                    {realm.password && social.providers !== undefined && social.providers.length !== 0 && (
+                    {realm.password && social?.providers !== undefined && social.providers.length !== 0 && (
                         <div id="kc-social-providers" className={kcClsx("kcFormSocialAccountSectionClass")}>
                             <hr />
                             <h2>{msg("identity-provider-login-label")}</h2>

package/src/login/pages/LoginIdpLinkConfirmOverride.tsx

@@ -3,7 +3,6 @@ import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
-// NOTE: Added with Keycloak 25
 export default function LoginIdpLinkConfirmOverride(props: PageProps<Extract<KcContext, { pageId: "login-idp-link-confirm-override.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 

package/src/login/pages/LoginPasskeysConditionalAuthenticate.tsx

@@ -1,33 +1,17 @@
-import { useEffect, Fragment } from "react";
+import { Fragment } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
-import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { getKcClsx } from "keycloakify/login/lib/kcClsx";
-import { assert } from "keycloakify/tools/assert";
+import { useScript } from "keycloakify/login/pages/LoginPasskeysConditionalAuthenticate.useScript";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
-// NOTE: From Keycloak 25.0.4
 export default function LoginPasskeysConditionalAuthenticate(
     props: PageProps<Extract<KcContext, { pageId: "login-passkeys-conditional-authenticate.ftl" }>, I18n>
 ) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const {
-        messagesPerField,
-        login,
-        url,
-        usernameHidden,
-        shouldDisplayAuthenticators,
-        authenticators,
-        registrationDisabled,
-        realm,
-        isUserIdentified,
-        challenge,
-        userVerification,
-        rpId,
-        createTimeout
-    } = kcContext;
+    const { messagesPerField, login, url, usernameHidden, shouldDisplayAuthenticators, authenticators, registrationDisabled, realm } = kcContext;
 
     const { msg, msgStr, advancedMsg } = i18n;
 
@@ -36,46 +20,9 @@ export default function LoginPasskeysConditionalAuthenticate(
         classes
     });
 
-    const { insertScriptTags } = useInsertScriptTags({
-        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
-        scriptTags: [
-            {
-                type: "module",
-                textContent: `
-                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
-                    import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
+    const authButtonId = "authenticateWebAuthnButton";
 
-                    const authButton = document.getElementById('authenticateWebAuthnButton');
-                    const input = {
-                        isUserIdentified : ${isUserIdentified},
-                        challenge : '${challenge}',
-                        userVerification : '${userVerification}',
-                        rpId : '${rpId}',
-                        createTimeout : ${createTimeout},
-                        errmsg : "${msgStr("webauthn-unsupported-browser-text")}"
-                    };
-                    authButton.addEventListener("click", () => {
-                        authenticateByWebAuthn(input);
-                    });
-
-                    const args = {
-                        isUserIdentified : ${isUserIdentified},
-                        challenge : '${challenge}',
-                        userVerification : '${userVerification}',
-                        rpId : '${rpId}',
-                        createTimeout : ${createTimeout},
-                        errmsg : "${msgStr("passkey-unsupported-browser-text")}"
-                    };
-
-                    document.addEventListener("DOMContentLoaded", (event) => initAuthenticate(args));
-                `
-            }
-        ]
-    });
-
-    useEffect(() => {
-        insertScriptTags();
-    }, []);
+    useScript({ authButtonId, kcContext, i18n });
 
     return (
         <Template
@@ -213,29 +160,7 @@ export default function LoginPasskeysConditionalAuthenticate(
                                 )}
                                 <div id="kc-form-passkey-button" className={kcClsx("kcFormButtonsClass")} style={{ display: "none" }}>
                                     <input
-                                        id="authenticateWebAuthnButton"
-                                        type="button"
-                                        onClick={() => {
-                                            assert("doAuthenticate" in window);
-                                            assert(typeof window.doAuthenticate === "function");
-                                            window.doAuthenticate(
-                                                [],
-                                                rpId,
-                                                challenge,
-                                                typeof isUserIdentified === "boolean" ? isUserIdentified : isUserIdentified === "true",
-                                                createTimeout,
-                                                userVerification,
-                                                msgStr("passkey-unsupported-browser-text")
-                                            );
-                                        }}
-                                        autoFocus
-                                        value={msgStr("passkey-doAuthenticate")}
-                                        className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonBlockClass", "kcButtonLargeClass")}
-                                    />
-                                </div>
-                                <div id="kc-form-passkey-button" className={kcClsx("kcFormButtonsClass")} style={{ display: "none" }}>
-                                    <input
-                                        id="authenticateWebAuthnButton"
+                                        id={authButtonId}
                                         type="button"
                                         autoFocus
                                         value={msgStr("passkey-doAuthenticate")}

package/src/login/pages/LoginPasskeysConditionalAuthenticate.useScript.tsx

@@ -0,0 +1,72 @@
+import { useEffect } from "react";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { assert } from "keycloakify/tools/assert";
+import { KcContext } from "keycloakify/login/KcContext/KcContext";
+
+type KcContextLike = {
+    url: {
+        resourcesPath: string;
+    };
+    isUserIdentified: boolean | "true" | "false";
+    challenge: string;
+    userVerification: string;
+    rpId: string;
+    createTimeout: number | string;
+};
+
+assert<keyof KcContextLike extends keyof KcContext.LoginPasskeysConditionalAuthenticate ? true : false>();
+assert<KcContext.LoginPasskeysConditionalAuthenticate extends KcContextLike ? true : false>();
+
+type I18nLike = {
+    msgStr: (key: "webauthn-unsupported-browser-text" | "passkey-unsupported-browser-text") => string;
+    isFetchingTranslations: boolean;
+};
+
+export function useScript(params: { authButtonId: string; kcContext: KcContextLike; i18n: I18nLike }) {
+    const { authButtonId, kcContext, i18n } = params;
+
+    const { url, isUserIdentified, challenge, userVerification, rpId, createTimeout } = kcContext;
+
+    const { msgStr, isFetchingTranslations } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
+        scriptTags: [
+            {
+                type: "module",
+                textContent: () => `
+                    import { authenticateByWebAuthn } from "${url.resourcesPath}/js/webauthnAuthenticate.js";
+                    import { initAuthenticate } from "${url.resourcesPath}/js/passkeysConditionalAuth.js";
+
+                    const authButton = document.getElementById("${authButtonId}");
+                    const input = {
+                        isUserIdentified : ${isUserIdentified},
+                        challenge : ${JSON.stringify(challenge)},
+                        userVerification : ${JSON.stringify(userVerification)},
+                        rpId : ${JSON.stringify(rpId)},
+                        createTimeout : ${createTimeout}
+                    };
+                    authButton.addEventListener("click", () => {
+                        authenticateByWebAuthn({
+                            ...input,
+                            errmsg : ${JSON.stringify(msgStr("webauthn-unsupported-browser-text"))}
+                        });
+                    });
+
+                    initAuthenticate({
+                        ...input,
+                        errmsg : ${JSON.stringify(msgStr("passkey-unsupported-browser-text"))}
+                    });
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        insertScriptTags();
+    }, [isFetchingTranslations]);
+}

package/src/login/pages/LoginRecoveryAuthnCodeConfig.tsx

@@ -1,7 +1,6 @@
-import { useEffect } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import { getKcClsx, type KcClsx } from "keycloakify/login/lib/kcClsx";
-import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { useScript } from "keycloakify/login/pages/LoginRecoveryAuthnCodeConfig.useScript";
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
@@ -18,130 +17,9 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
 
     const { msg, msgStr } = i18n;
 
-    const { insertScriptTags } = useInsertScriptTags({
-        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
-        scriptTags: [
-            {
-                type: "text/javascript",
-                textContent: `
+    const olRecoveryCodesListId = "kc-recovery-codes-list";
 
-                    /* copy recovery codes  */
-                    function copyRecoveryCodes() {
-                        var tmpTextarea = document.createElement("textarea");
-                        var codes = document.getElementById("kc-recovery-codes-list").getElementsByTagName("li");
-                        for (i = 0; i < codes.length; i++) {
-                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\\n";
-                        }
-                        document.body.appendChild(tmpTextarea);
-                        tmpTextarea.select();
-                        document.execCommand("copy");
-                        document.body.removeChild(tmpTextarea);
-                    }
-
-                    var copyButton = document.getElementById("copyRecoveryCodes");
-                    copyButton && copyButton.addEventListener("click", function () {
-                        copyRecoveryCodes();
-                    });
-
-                    /* download recovery codes  */
-                    function formatCurrentDateTime() {
-                        var dt = new Date();
-                        var options = {
-                            month: 'long',
-                            day: 'numeric',
-                            year: 'numeric',
-                            hour: 'numeric',
-                            minute: 'numeric',
-                            timeZoneName: 'short'
-                        };
-
-                        return dt.toLocaleString('en-US', options);
-                    }
-
-                    function parseRecoveryCodeList() {
-                        var recoveryCodes = document.querySelectorAll(".kc-recovery-codes-list li");
-                        var recoveryCodeList = "";
-
-                        for (var i = 0; i < recoveryCodes.length; i++) {
-                            var recoveryCodeLiElement = recoveryCodes[i].innerText;
-                            recoveryCodeList += recoveryCodeLiElement + "\\r\\n";
-                        }
-
-                        return recoveryCodeList;
-                    }
-
-                    function buildDownloadContent() {
-                        var recoveryCodeList = parseRecoveryCodeList();
-                        var dt = new Date();
-                        var options = {
-                            month: 'long',
-                            day: 'numeric',
-                            year: 'numeric',
-                            hour: 'numeric',
-                            minute: 'numeric',
-                            timeZoneName: 'short'
-                        };
-
-                        return fileBodyContent =
-                            "${msgStr("recovery-codes-download-file-header")}\\n\\n" +
-                            recoveryCodeList + "\\n" +
-                            "${msgStr("recovery-codes-download-file-description")}\\n\\n" +
-                            "${msgStr("recovery-codes-download-file-date")} " + formatCurrentDateTime();
-                    }
-
-                    function setUpDownloadLinkAndDownload(filename, text) {
-                        var el = document.createElement('a');
-                        el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
-                        el.setAttribute('download', filename);
-                        el.style.display = 'none';
-                        document.body.appendChild(el);
-                        el.click();
-                        document.body.removeChild(el);
-                    }
-
-                    function downloadRecoveryCodes() {
-                        setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
-                    }
-
-                    var downloadButton = document.getElementById("downloadRecoveryCodes");
-                    downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
-
-                    /* print recovery codes */
-                    function buildPrintContent() {
-                        var recoveryCodeListHTML = document.getElementById('kc-recovery-codes-list').innerHTML;
-                        var styles =
-                            \`@page { size: auto;  margin-top: 0; }
-                            body { width: 480px; }
-                            div { list-style-type: none; font-family: monospace }
-                            p:first-of-type { margin-top: 48px }\`;
-
-                        return printFileContent =
-                            "<html><style>" + styles + "</style><body>" +
-                            "<title>kc-download-recovery-codes</title>" +
-                            "<p>${msgStr("recovery-codes-download-file-header")}</p>" +
-                            "<div>" + recoveryCodeListHTML + "</div>" +
-                            "<p>${msgStr("recovery-codes-download-file-description")}</p>" +
-                            "<p>${msgStr("recovery-codes-download-file-date")} " + formatCurrentDateTime() + "</p>" +
-                            "</body></html>";
-                    }
-
-                    function printRecoveryCodes() {
-                        var w = window.open();
-                        w.document.write(buildPrintContent());
-                        w.print();
-                        w.close();
-                    }
-
-                    var printButton = document.getElementById("printRecoveryCodes");
-                    printButton && printButton.addEventListener("click", printRecoveryCodes);
-                `
-            }
-        ]
-    });
-
-    useEffect(() => {
-        insertScriptTags();
-    }, []);
+    useScript({ olRecoveryCodesListId, i18n });
 
     return (
         <Template
@@ -164,7 +42,7 @@ export default function LoginRecoveryAuthnCodeConfig(props: PageProps<Extract<Kc
                 </div>
             </div>
 
-            <ol id="kc-recovery-codes-list" className={kcClsx("kcRecoveryCodesList")}>
+            <ol id={olRecoveryCodesListId} className={kcClsx("kcRecoveryCodesList")}>
                 {recoveryAuthnCodesConfigBean.generatedRecoveryAuthnCodesList.map((code, index) => (
                     <li key={index}>
                         <span>{index + 1}:</span> {code.slice(0, 4)}-{code.slice(4, 8)}-{code.slice(8)}

package/src/login/pages/LoginRecoveryAuthnCodeConfig.useScript.tsx

@@ -0,0 +1,142 @@
+import { useEffect } from "react";
+import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+
+type I18nLike = {
+    msgStr: (key: "recovery-codes-download-file-header" | "recovery-codes-download-file-description" | "recovery-codes-download-file-date") => string;
+    isFetchingTranslations: boolean;
+};
+
+export function useScript(params: { olRecoveryCodesListId: string; i18n: I18nLike }) {
+    const { olRecoveryCodesListId, i18n } = params;
+
+    const { msgStr, isFetchingTranslations } = i18n;
+
+    const { insertScriptTags } = useInsertScriptTags({
+        componentOrHookName: "LoginRecoveryAuthnCodeConfig",
+        scriptTags: [
+            {
+                type: "text/javascript",
+                textContent: () => `
+
+                    /* copy recovery codes  */
+                    function copyRecoveryCodes() {
+                        var tmpTextarea = document.createElement("textarea");
+                        var codes = document.querySelectorAll("#${olRecoveryCodesListId} li");
+                        for (i = 0; i < codes.length; i++) {
+                            tmpTextarea.value = tmpTextarea.value + codes[i].innerText + "\\n";
+                        }
+                        document.body.appendChild(tmpTextarea);
+                        tmpTextarea.select();
+                        document.execCommand("copy");
+                        document.body.removeChild(tmpTextarea);
+                    }
+
+                    var copyButton = document.getElementById("copyRecoveryCodes");
+                    copyButton && copyButton.addEventListener("click", function () {
+                        copyRecoveryCodes();
+                    });
+
+                    /* download recovery codes  */
+                    function formatCurrentDateTime() {
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return dt.toLocaleString('en-US', options);
+                    }
+
+                    function parseRecoveryCodeList() {
+                        var recoveryCodes = document.querySelectorAll("#${olRecoveryCodesListId} li");
+                        var recoveryCodeList = "";
+
+                        for (var i = 0; i < recoveryCodes.length; i++) {
+                            var recoveryCodeLiElement = recoveryCodes[i].innerText;
+                            recoveryCodeList += recoveryCodeLiElement + "\\r\\n";
+                        }
+
+                        return recoveryCodeList;
+                    }
+
+                    function buildDownloadContent() {
+                        var recoveryCodeList = parseRecoveryCodeList();
+                        var dt = new Date();
+                        var options = {
+                            month: 'long',
+                            day: 'numeric',
+                            year: 'numeric',
+                            hour: 'numeric',
+                            minute: 'numeric',
+                            timeZoneName: 'short'
+                        };
+
+                        return fileBodyContent =
+                            ${JSON.stringify(msgStr("recovery-codes-download-file-header"))} + "\\n\\n" +
+                            recoveryCodeList + "\\n" +
+                            ${JSON.stringify(msgStr("recovery-codes-download-file-description"))} + "\\n\\n" +
+                            ${JSON.stringify(msgStr("recovery-codes-download-file-date"))} + " " + formatCurrentDateTime();
+                    }
+
+                    function setUpDownloadLinkAndDownload(filename, text) {
+                        var el = document.createElement('a');
+                        el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
+                        el.setAttribute('download', filename);
+                        el.style.display = 'none';
+                        document.body.appendChild(el);
+                        el.click();
+                        document.body.removeChild(el);
+                    }
+
+                    function downloadRecoveryCodes() {
+                        setUpDownloadLinkAndDownload('kc-download-recovery-codes.txt', buildDownloadContent());
+                    }
+
+                    var downloadButton = document.getElementById("downloadRecoveryCodes");
+                    downloadButton && downloadButton.addEventListener("click", downloadRecoveryCodes);
+
+                    /* print recovery codes */
+                    function buildPrintContent() {
+                        var recoveryCodeListHTML = document.getElementById('${olRecoveryCodesListId}').innerHTML;
+                        var styles =
+                            \`@page { size: auto;  margin-top: 0; }
+                            body { width: 480px; }
+                            div { list-style-type: none; font-family: monospace }
+                            p:first-of-type { margin-top: 48px }\`;
+
+                        return printFileContent =
+                            "<html><style>" + styles + "</style><body>" +
+                            "<title>kc-download-recovery-codes</title>" +
+                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-header"))} + "</p>" +
+                            "<div>" + recoveryCodeListHTML + "</div>" +
+                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-description"))} + "</p>" +
+                            "<p>" + ${JSON.stringify(msgStr("recovery-codes-download-file-date"))} + " " + formatCurrentDateTime() + "</p>" +
+                            "</body></html>";
+                    }
+
+                    function printRecoveryCodes() {
+                        var w = window.open();
+                        w.document.write(buildPrintContent());
+                        w.print();
+                        w.close();
+                    }
+
+                    var printButton = document.getElementById("printRecoveryCodes");
+                    printButton && printButton.addEventListener("click", printRecoveryCodes);
+                `
+            }
+        ]
+    });
+
+    useEffect(() => {
+        if (isFetchingTranslations) {
+            return;
+        }
+
+        insertScriptTags();
+    }, [isFetchingTranslations]);
+}

package/src/login/pages/LoginUsername.tsx

@@ -40,7 +40,7 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
             headerNode={msg("doLogIn")}
             socialProvidersNode={
                 <>
-                    {realm.password && social.providers !== undefined && social.providers.length !== 0 && (
+                    {realm.password && social?.providers !== undefined && social.providers.length !== 0 && (
                         <div id="kc-social-providers" className={kcClsx("kcFormSocialAccountSectionClass")}>
                             <hr />
                             <h2>{msg("identity-provider-login-label")}</h2>