keycloakify 11.3.7 → 11.3.9-rc.0

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

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { assert } from "keycloakify/tools/assert";
 import { KcContext } from "keycloakify/login/KcContext/KcContext";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
 
 type KcContextLike = {
     url: {
@@ -67,6 +68,12 @@ export function useScript(params: { authButtonId: string; kcContext: KcContextLi
             return;
         }
 
-        insertScriptTags();
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: authButtonId
+            });
+
+            insertScriptTags();
+        })();
     }, [isFetchingTranslations]);
 }

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

@@ -1,5 +1,6 @@
 import { useEffect } from "react";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
 
 type I18nLike = {
     msgStr: (key: "recovery-codes-download-file-header" | "recovery-codes-download-file-description" | "recovery-codes-download-file-date") => string;
@@ -137,6 +138,12 @@ export function useScript(params: { olRecoveryCodesListId: string; i18n: I18nLik
             return;
         }
 
-        insertScriptTags();
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: olRecoveryCodesListId
+            });
+
+            insertScriptTags();
+        })();
     }, [isFetchingTranslations]);
 }

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

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { assert } from "keycloakify/tools/assert";
 import { KcContext } from "keycloakify/login/KcContext/KcContext";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
 
 type KcContextLike = {
     url: {
@@ -59,6 +60,12 @@ export function useScript(params: { authButtonId: string; kcContext: KcContextLi
             return;
         }
 
-        insertScriptTags();
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: authButtonId
+            });
+
+            insertScriptTags();
+        })();
     }, [isFetchingTranslations]);
 }

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

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { useInsertScriptTags } from "keycloakify/tools/useInsertScriptTags";
 import { assert } from "keycloakify/tools/assert";
 import { KcContext } from "keycloakify/login/KcContext/KcContext";
+import { waitForElementMountedOnDom } from "keycloakify/tools/waitForElementMountedOnDom";
 
 type KcContextLike = {
     url: {
@@ -88,6 +89,12 @@ export function useScript(params: { authButtonId: string; kcContext: KcContextLi
             return;
         }
 
-        insertScriptTags();
+        (async () => {
+            await waitForElementMountedOnDom({
+                elementId: authButtonId
+            });
+
+            insertScriptTags();
+        })();
     }, [isFetchingTranslations]);
 }

package/src/tools/waitForElementMountedOnDom.ts

@@ -0,0 +1,30 @@
+export async function waitForElementMountedOnDom(params: {
+    elementId: string;
+}): Promise<void> {
+    const { elementId } = params;
+
+    const getElement = () => document.getElementById(elementId);
+
+    const element = getElement();
+
+    if (element === null) {
+        let prElementPresentInTheDom_resolve: () => void;
+        const prElementPresentInTheDom = new Promise<void>(
+            resolve => (prElementPresentInTheDom_resolve = resolve)
+        );
+
+        // Observe the dom for the element to be added
+        const observer = new MutationObserver(() => {
+            const element = getElement();
+            if (element === null) {
+                return;
+            }
+            observer.disconnect();
+            prElementPresentInTheDom_resolve();
+        });
+
+        observer.observe(document.body, { childList: true, subtree: true });
+
+        await prElementPresentInTheDom;
+    }
+}

package/tools/waitForElementMountedOnDom.d.ts

@@ -0,0 +1,3 @@
+export declare function waitForElementMountedOnDom(params: {
+    elementId: string;
+}): Promise<void>;

package/tools/waitForElementMountedOnDom.js

@@ -0,0 +1,21 @@
+export async function waitForElementMountedOnDom(params) {
+    const { elementId } = params;
+    const getElement = () => document.getElementById(elementId);
+    const element = getElement();
+    if (element === null) {
+        let prElementPresentInTheDom_resolve;
+        const prElementPresentInTheDom = new Promise(resolve => (prElementPresentInTheDom_resolve = resolve));
+        // Observe the dom for the element to be added
+        const observer = new MutationObserver(() => {
+            const element = getElement();
+            if (element === null) {
+                return;
+            }
+            observer.disconnect();
+            prElementPresentInTheDom_resolve();
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+        await prElementPresentInTheDom;
+    }
+}
+//# sourceMappingURL=waitForElementMountedOnDom.js.map

package/tools/waitForElementMountedOnDom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waitForElementMountedOnDom.js","sourceRoot":"","sources":["../src/tools/waitForElementMountedOnDom.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,KAAK,UAAU,0BAA0B,CAAC,MAEhD;IACG,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC;IAE7B,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;IAE5D,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,IAAI,OAAO,KAAK,IAAI,EAAE;QAClB,IAAI,gCAA4C,CAAC;QACjD,MAAM,wBAAwB,GAAG,IAAI,OAAO,CACxC,OAAO,CAAC,EAAE,CAAC,CAAC,gCAAgC,GAAG,OAAO,CAAC,CAC1D,CAAC;QAEF,8CAA8C;QAC9C,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACvC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;YAC7B,IAAI,OAAO,KAAK,IAAI,EAAE;gBAClB,OAAO;aACV;YACD,QAAQ,CAAC,UAAU,EAAE,CAAC;YACtB,gCAAgC,EAAE,CAAC;QACvC,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAEpE,MAAM,wBAAwB,CAAC;KAClC;AACL,CAAC"}