@authon/js 0.3.2 → 0.3.3

package/dist/index.js

@@ -124,6 +124,7 @@ var ModalRenderer = class {
   captchaSiteKey = "";
   turnstileWidgetId = null;
   turnstileToken = "";
+  turnstileWrapper = null;
   constructor(options) {
     this.mode = options.mode;
     this.theme = options.theme || "auto";
@@ -171,6 +172,10 @@ var ModalRenderer = class {
       this.turnstileWidgetId = null;
       this.turnstileToken = "";
     }
+    if (this.turnstileWrapper) {
+      this.turnstileWrapper.remove();
+      this.turnstileWrapper = null;
+    }
     if (this.hostElement) {
       this.hostElement.remove();
       this.hostElement = null;
@@ -452,16 +457,28 @@ var ModalRenderer = class {
   }
   renderTurnstile() {
     if (!this.captchaSiteKey || !this.shadowRoot) return;
-    const container = this.shadowRoot.getElementById("turnstile-container");
-    if (!container) return;
+    const anchor = this.shadowRoot.getElementById("turnstile-container");
+    if (!anchor) return;
     const w = window;
+    const positionWrapper = () => {
+      if (!this.turnstileWrapper || !anchor.isConnected) return;
+      const rect = anchor.getBoundingClientRect();
+      Object.assign(this.turnstileWrapper.style, {
+        position: "fixed",
+        top: `${rect.top}px`,
+        left: `${rect.left}px`,
+        width: `${rect.width}px`,
+        zIndex: "2147483647",
+        display: "flex",
+        justifyContent: "center"
+      });
+    };
     const tryRender = () => {
-      if (!w.turnstile || !container.isConnected) return;
-      const wrapper = document.createElement("div");
-      wrapper.style.display = "flex";
-      wrapper.style.justifyContent = "center";
-      document.body.appendChild(wrapper);
-      this.turnstileWidgetId = w.turnstile.render(wrapper, {
+      if (!w.turnstile || !anchor.isConnected) return;
+      this.turnstileWrapper = document.createElement("div");
+      document.body.appendChild(this.turnstileWrapper);
+      positionWrapper();
+      this.turnstileWidgetId = w.turnstile.render(this.turnstileWrapper, {
         sitekey: this.captchaSiteKey,
         callback: (token) => {
           this.turnstileToken = token;
@@ -475,7 +492,8 @@ var ModalRenderer = class {
         theme: this.isDark() ? "dark" : "light",
         size: "flexible"
       });
-      container.appendChild(wrapper);
+      window.addEventListener("scroll", positionWrapper, { passive: true });
+      window.addEventListener("resize", positionWrapper, { passive: true });
     };
     if (w.turnstile) {
       tryRender();