@authon/js 0.1.9 → 0.1.11

package/dist/index.js

@@ -100,6 +100,7 @@ var ModalRenderer = class {
   onProviderClick;
   onEmailSubmit;
   onClose;
+  escHandler = null;
   constructor(options) {
     this.mode = options.mode;
     this.theme = options.theme || "auto";
@@ -118,10 +119,18 @@ var ModalRenderer = class {
     this.branding = { ...DEFAULT_BRANDING, ...branding };
   }
   open(view = "signIn") {
-    this.close();
-    this.render(view);
+    if (this.shadowRoot && this.hostElement) {
+      this.shadowRoot.innerHTML = this.buildHTML(view);
+      this.attachEvents(view);
+    } else {
+      this.render(view);
+    }
   }
   close() {
+    if (this.escHandler) {
+      document.removeEventListener("keydown", this.escHandler);
+      this.escHandler = null;
+    }
     if (this.hostElement) {
       this.hostElement.remove();
       this.hostElement = null;
@@ -131,6 +140,37 @@ var ModalRenderer = class {
       this.containerElement.innerHTML = "";
     }
   }
+  showError(message) {
+    if (!this.shadowRoot) return;
+    this.clearError();
+    const errorEl = this.shadowRoot.getElementById("email-form");
+    if (errorEl) {
+      const errDiv = document.createElement("div");
+      errDiv.id = "authon-error-msg";
+      errDiv.className = "error-msg";
+      errDiv.textContent = message;
+      errorEl.appendChild(errDiv);
+    }
+  }
+  showBanner(message, type = "error") {
+    if (!this.shadowRoot) return;
+    this.clearBanner();
+    const container = this.shadowRoot.querySelector(".modal-container");
+    if (!container) return;
+    const banner = document.createElement("div");
+    banner.id = "authon-banner";
+    banner.className = type === "warning" ? "banner-warning" : "error-msg";
+    banner.textContent = message;
+    container.insertBefore(banner, container.firstChild);
+  }
+  clearBanner() {
+    if (!this.shadowRoot) return;
+    this.shadowRoot.getElementById("authon-banner")?.remove();
+  }
+  clearError() {
+    if (!this.shadowRoot) return;
+    this.shadowRoot.getElementById("authon-error-msg")?.remove();
+  }
   showLoading() {
     if (!this.shadowRoot) return;
     this.hideLoading();
@@ -182,8 +222,8 @@ var ModalRenderer = class {
     }).join("");
     const divider = b.showDivider !== false && b.showEmailPassword !== false ? `<div class="divider"><span>or</span></div>` : "";
     const emailForm = b.showEmailPassword !== false ? `<form class="email-form" id="email-form">
-          <input type="email" placeholder="Email address" name="email" required class="input" />
-          <input type="password" placeholder="Password" name="password" required class="input" />
+          <input type="email" placeholder="Email address" name="email" required class="input" autocomplete="email" />
+          <input type="password" placeholder="Password" name="password" required class="input" autocomplete="${isSignUp ? "new-password" : "current-password"}" />
           <button type="submit" class="submit-btn">${isSignUp ? "Sign up" : "Sign in"}</button>
         </form>` : "";
     const footer = b.termsUrl || b.privacyUrl ? `<div class="footer">
@@ -296,6 +336,21 @@ var ModalRenderer = class {
         font-family: var(--authon-font); transition: opacity 0.15s;
       }
       .submit-btn:hover { opacity: 0.9; }
+      .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+      .error-msg {
+        margin-top: 8px; padding: 8px 12px;
+        background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
+        border-radius: calc(var(--authon-radius) * 0.33);
+        font-size: 13px; color: #ef4444; text-align: center;
+        animation: fadeIn 0.15s ease;
+      }
+      .banner-warning {
+        margin-bottom: 16px; padding: 10px 14px;
+        background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
+        border-radius: calc(var(--authon-radius) * 0.33);
+        font-size: 13px; color: #f59e0b; text-align: center;
+        animation: fadeIn 0.15s ease;
+      }
       .switch-view { text-align: center; margin-top: 16px; font-size: 13px; color: var(--authon-muted); }
       .switch-view a { color: var(--authon-primary-start); text-decoration: none; font-weight: 500; }
       .switch-view a:hover { text-decoration: underline; }
@@ -377,14 +432,15 @@ var ModalRenderer = class {
     if (backdrop) {
       backdrop.addEventListener("click", () => this.onClose());
     }
+    if (this.escHandler) {
+      document.removeEventListener("keydown", this.escHandler);
+      this.escHandler = null;
+    }
     if (this.mode === "popup") {
-      const handler = (e) => {
-        if (e.key === "Escape") {
-          this.onClose();
-          document.removeEventListener("keydown", handler);
-        }
+      this.escHandler = (e) => {
+        if (e.key === "Escape") this.onClose();
       };
-      document.addEventListener("keydown", handler);
+      document.addEventListener("keydown", this.escHandler);
     }
   }
 };
@@ -576,11 +632,14 @@ var Authon = class {
         branding: this.branding || void 0,
         onProviderClick: (provider) => this.startOAuthFlow(provider),
         onEmailSubmit: (email, password, isSignUp) => {
-          if (isSignUp) {
-            this.signUpWithEmail(email, password).then(() => this.modal?.close());
-          } else {
-            this.signInWithEmail(email, password).then(() => this.modal?.close());
-          }
+          this.modal?.clearError();
+          const promise = isSignUp ? this.signUpWithEmail(email, password) : this.signInWithEmail(email, password);
+          promise.then(() => this.modal?.close()).catch((err) => {
+            const msg = err instanceof Error ? err.message : String(err);
+            const friendlyMsg = msg.includes("401") ? "Invalid email or password" : msg.includes("409") ? "Email already in use" : msg.includes("400") ? "Please check your input" : msg || "Authentication failed";
+            this.modal?.showError(friendlyMsg);
+            this.emit("error", err instanceof Error ? err : new Error(msg));
+          });
         },
         onClose: () => this.modal?.close()
       });
@@ -605,39 +664,51 @@ var Authon = class {
         "authon-oauth",
         `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no`
       );
+      if (!popup || popup.closed) {
+        this.modal?.hideLoading();
+        this.modal?.showBanner(
+          "Pop-up blocked. Please allow pop-ups for this site and try again.",
+          "warning"
+        );
+        this.emit("error", new Error("Popup was blocked by the browser"));
+        return;
+      }
       let callbackReceived = false;
       let cleaned = false;
       const cleanup = () => {
         if (cleaned) return;
         cleaned = true;
         window.removeEventListener("message", handler);
-        window.removeEventListener("focus", focusHandler);
+        if (pollTimer) clearInterval(pollTimer);
         if (maxTimer) clearTimeout(maxTimer);
       };
-      const focusHandler = () => {
+      const pollTimer = setInterval(() => {
         if (callbackReceived || cleaned) return;
-        setTimeout(() => {
-          if (callbackReceived || cleaned) return;
-          cleanup();
-          this.modal?.hideLoading();
-        }, 1500);
-      };
-      window.addEventListener("focus", focusHandler);
+        try {
+          if (popup.closed) {
+            setTimeout(() => {
+              if (callbackReceived || cleaned) return;
+              cleanup();
+              this.modal?.hideLoading();
+            }, 500);
+            clearInterval(pollTimer);
+          }
+        } catch {
+        }
+      }, 500);
       const maxTimer = setTimeout(() => {
         if (callbackReceived || cleaned) return;
         cleanup();
         this.modal?.hideLoading();
       }, 18e4);
-      if (!popup) {
-        cleanup();
-        this.modal?.hideLoading();
-        this.emit("error", new Error("Popup was blocked by the browser"));
-        return;
-      }
       const handler = async (e) => {
         if (e.data?.type !== "authon-oauth-callback") return;
         callbackReceived = true;
         cleanup();
+        try {
+          if (!popup.closed) popup.close();
+        } catch {
+        }
         try {
           const tokens = await this.apiPost("/v1/auth/oauth/callback", {
             code: e.data.code,
@@ -649,7 +720,9 @@ var Authon = class {
           this.emit("signedIn", tokens.user);
         } catch (err) {
           this.modal?.hideLoading();
-          this.emit("error", err instanceof Error ? err : new Error(String(err)));
+          const msg = err instanceof Error ? err.message : String(err);
+          this.modal?.showError(msg.includes("500") ? "Authentication failed. Please try again." : msg);
+          this.emit("error", err instanceof Error ? err : new Error(msg));
         }
       };
       window.addEventListener("message", handler);

package/dist/index.mjs

@@ -73,6 +73,7 @@ var ModalRenderer = class {
   onProviderClick;
   onEmailSubmit;
   onClose;
+  escHandler = null;
   constructor(options) {
     this.mode = options.mode;
     this.theme = options.theme || "auto";
@@ -91,10 +92,18 @@ var ModalRenderer = class {
     this.branding = { ...DEFAULT_BRANDING, ...branding };
   }
   open(view = "signIn") {
-    this.close();
-    this.render(view);
+    if (this.shadowRoot && this.hostElement) {
+      this.shadowRoot.innerHTML = this.buildHTML(view);
+      this.attachEvents(view);
+    } else {
+      this.render(view);
+    }
   }
   close() {
+    if (this.escHandler) {
+      document.removeEventListener("keydown", this.escHandler);
+      this.escHandler = null;
+    }
     if (this.hostElement) {
       this.hostElement.remove();
       this.hostElement = null;
@@ -104,6 +113,37 @@ var ModalRenderer = class {
       this.containerElement.innerHTML = "";
     }
   }
+  showError(message) {
+    if (!this.shadowRoot) return;
+    this.clearError();
+    const errorEl = this.shadowRoot.getElementById("email-form");
+    if (errorEl) {
+      const errDiv = document.createElement("div");
+      errDiv.id = "authon-error-msg";
+      errDiv.className = "error-msg";
+      errDiv.textContent = message;
+      errorEl.appendChild(errDiv);
+    }
+  }
+  showBanner(message, type = "error") {
+    if (!this.shadowRoot) return;
+    this.clearBanner();
+    const container = this.shadowRoot.querySelector(".modal-container");
+    if (!container) return;
+    const banner = document.createElement("div");
+    banner.id = "authon-banner";
+    banner.className = type === "warning" ? "banner-warning" : "error-msg";
+    banner.textContent = message;
+    container.insertBefore(banner, container.firstChild);
+  }
+  clearBanner() {
+    if (!this.shadowRoot) return;
+    this.shadowRoot.getElementById("authon-banner")?.remove();
+  }
+  clearError() {
+    if (!this.shadowRoot) return;
+    this.shadowRoot.getElementById("authon-error-msg")?.remove();
+  }
   showLoading() {
     if (!this.shadowRoot) return;
     this.hideLoading();
@@ -155,8 +195,8 @@ var ModalRenderer = class {
     }).join("");
     const divider = b.showDivider !== false && b.showEmailPassword !== false ? `<div class="divider"><span>or</span></div>` : "";
     const emailForm = b.showEmailPassword !== false ? `<form class="email-form" id="email-form">
-          <input type="email" placeholder="Email address" name="email" required class="input" />
-          <input type="password" placeholder="Password" name="password" required class="input" />
+          <input type="email" placeholder="Email address" name="email" required class="input" autocomplete="email" />
+          <input type="password" placeholder="Password" name="password" required class="input" autocomplete="${isSignUp ? "new-password" : "current-password"}" />
           <button type="submit" class="submit-btn">${isSignUp ? "Sign up" : "Sign in"}</button>
         </form>` : "";
     const footer = b.termsUrl || b.privacyUrl ? `<div class="footer">
@@ -269,6 +309,21 @@ var ModalRenderer = class {
         font-family: var(--authon-font); transition: opacity 0.15s;
       }
       .submit-btn:hover { opacity: 0.9; }
+      .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+      .error-msg {
+        margin-top: 8px; padding: 8px 12px;
+        background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
+        border-radius: calc(var(--authon-radius) * 0.33);
+        font-size: 13px; color: #ef4444; text-align: center;
+        animation: fadeIn 0.15s ease;
+      }
+      .banner-warning {
+        margin-bottom: 16px; padding: 10px 14px;
+        background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
+        border-radius: calc(var(--authon-radius) * 0.33);
+        font-size: 13px; color: #f59e0b; text-align: center;
+        animation: fadeIn 0.15s ease;
+      }
       .switch-view { text-align: center; margin-top: 16px; font-size: 13px; color: var(--authon-muted); }
       .switch-view a { color: var(--authon-primary-start); text-decoration: none; font-weight: 500; }
       .switch-view a:hover { text-decoration: underline; }
@@ -350,14 +405,15 @@ var ModalRenderer = class {
     if (backdrop) {
       backdrop.addEventListener("click", () => this.onClose());
     }
+    if (this.escHandler) {
+      document.removeEventListener("keydown", this.escHandler);
+      this.escHandler = null;
+    }
     if (this.mode === "popup") {
-      const handler = (e) => {
-        if (e.key === "Escape") {
-          this.onClose();
-          document.removeEventListener("keydown", handler);
-        }
+      this.escHandler = (e) => {
+        if (e.key === "Escape") this.onClose();
       };
-      document.addEventListener("keydown", handler);
+      document.addEventListener("keydown", this.escHandler);
     }
   }
 };
@@ -549,11 +605,14 @@ var Authon = class {
         branding: this.branding || void 0,
         onProviderClick: (provider) => this.startOAuthFlow(provider),
         onEmailSubmit: (email, password, isSignUp) => {
-          if (isSignUp) {
-            this.signUpWithEmail(email, password).then(() => this.modal?.close());
-          } else {
-            this.signInWithEmail(email, password).then(() => this.modal?.close());
-          }
+          this.modal?.clearError();
+          const promise = isSignUp ? this.signUpWithEmail(email, password) : this.signInWithEmail(email, password);
+          promise.then(() => this.modal?.close()).catch((err) => {
+            const msg = err instanceof Error ? err.message : String(err);
+            const friendlyMsg = msg.includes("401") ? "Invalid email or password" : msg.includes("409") ? "Email already in use" : msg.includes("400") ? "Please check your input" : msg || "Authentication failed";
+            this.modal?.showError(friendlyMsg);
+            this.emit("error", err instanceof Error ? err : new Error(msg));
+          });
         },
         onClose: () => this.modal?.close()
       });
@@ -578,39 +637,51 @@ var Authon = class {
         "authon-oauth",
         `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no`
       );
+      if (!popup || popup.closed) {
+        this.modal?.hideLoading();
+        this.modal?.showBanner(
+          "Pop-up blocked. Please allow pop-ups for this site and try again.",
+          "warning"
+        );
+        this.emit("error", new Error("Popup was blocked by the browser"));
+        return;
+      }
       let callbackReceived = false;
       let cleaned = false;
       const cleanup = () => {
         if (cleaned) return;
         cleaned = true;
         window.removeEventListener("message", handler);
-        window.removeEventListener("focus", focusHandler);
+        if (pollTimer) clearInterval(pollTimer);
         if (maxTimer) clearTimeout(maxTimer);
       };
-      const focusHandler = () => {
+      const pollTimer = setInterval(() => {
         if (callbackReceived || cleaned) return;
-        setTimeout(() => {
-          if (callbackReceived || cleaned) return;
-          cleanup();
-          this.modal?.hideLoading();
-        }, 1500);
-      };
-      window.addEventListener("focus", focusHandler);
+        try {
+          if (popup.closed) {
+            setTimeout(() => {
+              if (callbackReceived || cleaned) return;
+              cleanup();
+              this.modal?.hideLoading();
+            }, 500);
+            clearInterval(pollTimer);
+          }
+        } catch {
+        }
+      }, 500);
       const maxTimer = setTimeout(() => {
         if (callbackReceived || cleaned) return;
         cleanup();
         this.modal?.hideLoading();
       }, 18e4);
-      if (!popup) {
-        cleanup();
-        this.modal?.hideLoading();
-        this.emit("error", new Error("Popup was blocked by the browser"));
-        return;
-      }
       const handler = async (e) => {
         if (e.data?.type !== "authon-oauth-callback") return;
         callbackReceived = true;
         cleanup();
+        try {
+          if (!popup.closed) popup.close();
+        } catch {
+        }
         try {
           const tokens = await this.apiPost("/v1/auth/oauth/callback", {
             code: e.data.code,
@@ -622,7 +693,9 @@ var Authon = class {
           this.emit("signedIn", tokens.user);
         } catch (err) {
           this.modal?.hideLoading();
-          this.emit("error", err instanceof Error ? err : new Error(String(err)));
+          const msg = err instanceof Error ? err.message : String(err);
+          this.modal?.showError(msg.includes("500") ? "Authentication failed. Please try again." : msg);
+          this.emit("error", err instanceof Error ? err : new Error(msg));
         }
       };
       window.addEventListener("message", handler);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authon/js",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Authon core SDK — ShadowDOM login modal for any app",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",