@authon/js 0.7.1 → 0.7.3

package/dist/index.cjs

@@ -809,6 +809,7 @@ var ModalRenderer = class {
   showError(message) {
     if (!this.shadowRoot) return;
     this.clearError();
+    this.setSubmitLoading(false);
     const errorEl = this.shadowRoot.getElementById("email-form");
     if (errorEl) {
       const errDiv = document.createElement("div");
@@ -818,6 +819,21 @@ var ModalRenderer = class {
       errorEl.appendChild(errDiv);
     }
   }
+  setSubmitLoading(loading) {
+    if (!this.shadowRoot) return;
+    const btn = this.shadowRoot.querySelector(".submit-btn");
+    if (!btn) return;
+    if (loading) {
+      btn.dataset.originalText = btn.textContent || "";
+      btn.innerHTML = '<span style="display:inline-flex;align-items:center;gap:6px"><svg width="14" height="14" viewBox="0 0 14 14" style="animation:spin 0.8s linear infinite"><circle cx="7" cy="7" r="5" fill="none" stroke="currentColor" stroke-width="2" opacity="0.3"/><path d="M7 2a5 5 0 0 1 5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>';
+      btn.disabled = true;
+      btn.style.opacity = "0.7";
+    } else {
+      btn.innerHTML = btn.dataset.originalText || "Continue";
+      btn.disabled = false;
+      btn.style.opacity = "1";
+    }
+  }
   showBanner(message, type = "error") {
     if (!this.shadowRoot) return;
     this.clearBanner();
@@ -850,6 +866,7 @@ var ModalRenderer = class {
         <p style="font-size:13px;color:var(--authon-muted);margin-bottom:20px">${email}</p>
       </div>
       <div class="email-form" id="verify-form">
+        <div id="verify-error" style="display:none;padding:8px 12px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:8px;font-size:13px;color:#ef4444;text-align:center;margin-bottom:4px"></div>
         <input type="text" id="verify-code" class="input" placeholder="000000" maxlength="6" inputmode="numeric" autocomplete="one-time-code" style="text-align:center;font-size:20px;letter-spacing:0.2em;font-family:ui-monospace,monospace" />
         <button type="button" id="verify-submit" class="submit-btn">${this.t.signIn}</button>
       </div>
@@ -864,12 +881,30 @@ var ModalRenderer = class {
     codeInput?.addEventListener("input", () => {
       codeInput.value = codeInput.value.replace(/\D/g, "").slice(0, 6);
     });
+    const verifyError = this.shadowRoot.getElementById("verify-error");
     submitBtn?.addEventListener("click", async () => {
       const code = codeInput?.value?.trim();
       if (!code || code.length < 6) return;
+      if (verifyError) {
+        verifyError.style.display = "none";
+      }
       submitBtn.textContent = "...";
       submitBtn.disabled = true;
-      await onVerify(code);
+      try {
+        await onVerify(code);
+      } catch (err) {
+        const msg = err instanceof Error ? err.message : String(err);
+        if (verifyError) {
+          verifyError.textContent = msg || "Verification failed";
+          verifyError.style.display = "block";
+        }
+        submitBtn.textContent = this.t.signIn;
+        submitBtn.disabled = false;
+        if (codeInput) {
+          codeInput.value = "";
+          codeInput.focus();
+        }
+      }
     });
     codeInput?.addEventListener("keydown", (e) => {
       if (e.key === "Enter") submitBtn?.click();
@@ -1726,6 +1761,7 @@ var ModalRenderer = class {
     if (form) {
       form.addEventListener("submit", (e) => {
         e.preventDefault();
+        this.setSubmitLoading(true);
         const formData = new FormData(form);
         this.onEmailSubmit(
           formData.get("email"),
@@ -3460,14 +3496,10 @@ var Authon = class {
           if (isSignUp) {
             this.signUpWithEmail(email, password, { turnstileToken }).then((result) => {
               if ("needsVerification" in result && result.needsVerification) {
+                this.modal?.setSubmitLoading(false);
                 this.modal?.showVerificationInput(email, async (code) => {
-                  try {
-                    await this.verifyEmail(email, code);
-                    this.modal?.close();
-                  } catch (err) {
-                    const msg = err instanceof Error ? err.message : String(err);
-                    this.modal?.showError(msg || "Verification failed");
-                  }
+                  await this.verifyEmail(email, code);
+                  this.modal?.close();
                 }, async () => {
                   await this.resendVerificationCode(email);
                 });
@@ -3476,6 +3508,7 @@ var Authon = class {
               }
             }).catch((err) => {
               this.modal?.resetTurnstile?.();
+              this.modal?.setSubmitLoading(false);
               const msg = err instanceof Error ? err.message : String(err);
               this.modal?.showError(msg || "Authentication failed");
               this.emit("error", err instanceof Error ? err : new Error(msg));
@@ -3483,14 +3516,10 @@ var Authon = class {
           } else {
             this.signInWithEmail(email, password, turnstileToken).then((result) => {
               if ("needsVerification" in result && result.needsVerification) {
+                this.modal?.setSubmitLoading(false);
                 this.modal?.showVerificationInput(email, async (code) => {
-                  try {
-                    await this.verifyEmail(email, code);
-                    this.modal?.close();
-                  } catch (err) {
-                    const msg = err instanceof Error ? err.message : String(err);
-                    this.modal?.showError(msg || "Verification failed");
-                  }
+                  await this.verifyEmail(email, code);
+                  this.modal?.close();
                 }, async () => {
                   await this.resendVerificationCode(email);
                 });
@@ -3499,6 +3528,7 @@ var Authon = class {
               }
             }).catch((err) => {
               this.modal?.resetTurnstile?.();
+              this.modal?.setSubmitLoading(false);
               const msg = err instanceof Error ? err.message : String(err);
               this.modal?.showError(msg || "Authentication failed");
               this.emit("error", err instanceof Error ? err : new Error(msg));