@authon/js 0.1.12 → 0.1.13

package/dist/index.d.mts

@@ -44,6 +44,7 @@ declare class Authon {
     private startOAuthFlow;
     private apiGet;
     private apiPost;
+    private parseApiError;
 }
 
 interface ProviderButtonConfig {

package/dist/index.d.ts

@@ -44,6 +44,7 @@ declare class Authon {
     private startOAuthFlow;
     private apiGet;
     private apiPost;
+    private parseApiError;
 }
 
 interface ProviderButtonConfig {

package/dist/index.js

@@ -245,20 +245,22 @@ var ModalRenderer = class {
     const subtitle = isSignUp ? "Already have an account?" : "Don't have an account?";
     const subtitleLink = isSignUp ? "Sign in" : "Sign up";
     const dark = this.isDark();
-    const providerButtons = this.enabledProviders.filter((p) => !b.hiddenProviders?.includes(p)).map((p) => {
+    const showProviders = !isSignUp;
+    const providerButtons = showProviders ? this.enabledProviders.filter((p) => !b.hiddenProviders?.includes(p)).map((p) => {
       const config = getProviderButtonConfig(p);
       const isWhiteBg = config.bgColor === "#ffffff";
       const btnBg = dark && isWhiteBg ? "#f8fafc" : config.bgColor;
       const btnBorder = isWhiteBg ? dark ? "#475569" : "#e5e7eb" : config.bgColor;
       return `<button class="provider-btn" data-provider="${p}" style="background:${btnBg};color:${config.textColor};border:1px solid ${btnBorder}">
-          <span class="provider-icon">${config.iconSvg}</span>
-          <span>${config.label}</span>
-        </button>`;
-    }).join("");
-    const divider = b.showDivider !== false && b.showEmailPassword !== false ? `<div class="divider"><span>or</span></div>` : "";
+              <span class="provider-icon">${config.iconSvg}</span>
+              <span>${config.label}</span>
+            </button>`;
+    }).join("") : "";
+    const divider = showProviders && 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" autocomplete="email" />
           <input type="password" placeholder="Password" name="password" required class="input" autocomplete="${isSignUp ? "new-password" : "current-password"}" />
+          ${isSignUp ? '<p class="password-hint">Must contain uppercase, lowercase, and a number (min 8 chars)</p>' : ""}
           <button type="submit" class="submit-btn">${isSignUp ? "Sign up" : "Sign in"}</button>
         </form>` : "";
     const footer = b.termsUrl || b.privacyUrl ? `<div class="footer">
@@ -266,11 +268,17 @@ var ModalRenderer = class {
           ${b.termsUrl && b.privacyUrl ? " \xB7 " : ""}
           ${b.privacyUrl ? `<a href="${b.privacyUrl}" target="_blank">Privacy Policy</a>` : ""}
         </div>` : "";
+    const titleHtml = isSignUp ? `<div class="title-row">
+          <button class="back-btn" id="back-btn" type="button" aria-label="Back to sign in">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
+          </button>
+          <h2 class="title">${title}</h2>
+        </div>` : `<h2 class="title">${title}</h2>`;
     return `
       ${b.logoDataUrl ? `<img src="${b.logoDataUrl}" alt="Logo" class="logo" />` : ""}
-      <h2 class="title">${title}</h2>
+      ${titleHtml}
       ${b.brandName ? `<p class="brand-name">${b.brandName}</p>` : ""}
-      <div class="providers">${providerButtons}</div>
+      ${showProviders ? `<div class="providers">${providerButtons}</div>` : ""}
       ${divider}
       ${emailForm}
       <p class="switch-view">${subtitle} <a href="#" id="switch-link">${subtitleLink}</a></p>
@@ -330,6 +338,16 @@ var ModalRenderer = class {
         transition: opacity 0.14s ease, transform 0.14s ease;
       }
       .logo { display: block; margin: 0 auto 16px; max-height: 48px; }
+      .title-row { display: flex; align-items: center; position: relative; margin-bottom: 8px; }
+      .title-row .title { flex: 1; margin-bottom: 0; }
+      .back-btn {
+        position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+        background: none; border: none; color: var(--authon-muted);
+        cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
+        transition: color 0.15s, background 0.15s;
+      }
+      .back-btn:hover { color: var(--authon-text); background: var(--authon-divider); }
+      .password-hint { font-size: 11px; color: var(--authon-dim); margin: -4px 0 2px; }
       .title { text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 8px; color: var(--authon-text); }
       .brand-name { text-align: center; font-size: 14px; color: var(--authon-muted); margin-bottom: 24px; }
       .providers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
@@ -473,6 +491,12 @@ var ModalRenderer = class {
         );
       });
     }
+    const backBtn = this.shadowRoot.getElementById("back-btn");
+    if (backBtn) {
+      backBtn.addEventListener("click", () => {
+        this.open("signIn");
+      });
+    }
     const switchLink = this.shadowRoot.getElementById("switch-link");
     if (switchLink) {
       switchLink.addEventListener("click", (e) => {
@@ -674,8 +698,7 @@ var Authon = class {
           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.modal?.showError(msg || "Authentication failed");
             this.emit("error", err instanceof Error ? err : new Error(msg));
           });
         },
@@ -795,7 +818,7 @@ var Authon = class {
       headers: { "x-api-key": this.publishableKey },
       credentials: "include"
     });
-    if (!res.ok) throw new Error(`API ${path}: ${res.status}`);
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
     return res.json();
   }
   async apiPost(path, body) {
@@ -808,9 +831,22 @@ var Authon = class {
       credentials: "include",
       body: body ? JSON.stringify(body) : void 0
     });
-    if (!res.ok) throw new Error(`API ${path}: ${res.status}`);
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
     return res.json();
   }
+  async parseApiError(res, path) {
+    try {
+      const body = await res.json();
+      if (Array.isArray(body.message) && body.message.length > 0) {
+        return body.message[0];
+      }
+      if (typeof body.message === "string" && body.message !== "Bad Request") {
+        return body.message;
+      }
+    } catch {
+    }
+    return `API ${path}: ${res.status}`;
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -218,20 +218,22 @@ var ModalRenderer = class {
     const subtitle = isSignUp ? "Already have an account?" : "Don't have an account?";
     const subtitleLink = isSignUp ? "Sign in" : "Sign up";
     const dark = this.isDark();
-    const providerButtons = this.enabledProviders.filter((p) => !b.hiddenProviders?.includes(p)).map((p) => {
+    const showProviders = !isSignUp;
+    const providerButtons = showProviders ? this.enabledProviders.filter((p) => !b.hiddenProviders?.includes(p)).map((p) => {
       const config = getProviderButtonConfig(p);
       const isWhiteBg = config.bgColor === "#ffffff";
       const btnBg = dark && isWhiteBg ? "#f8fafc" : config.bgColor;
       const btnBorder = isWhiteBg ? dark ? "#475569" : "#e5e7eb" : config.bgColor;
       return `<button class="provider-btn" data-provider="${p}" style="background:${btnBg};color:${config.textColor};border:1px solid ${btnBorder}">
-          <span class="provider-icon">${config.iconSvg}</span>
-          <span>${config.label}</span>
-        </button>`;
-    }).join("");
-    const divider = b.showDivider !== false && b.showEmailPassword !== false ? `<div class="divider"><span>or</span></div>` : "";
+              <span class="provider-icon">${config.iconSvg}</span>
+              <span>${config.label}</span>
+            </button>`;
+    }).join("") : "";
+    const divider = showProviders && 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" autocomplete="email" />
           <input type="password" placeholder="Password" name="password" required class="input" autocomplete="${isSignUp ? "new-password" : "current-password"}" />
+          ${isSignUp ? '<p class="password-hint">Must contain uppercase, lowercase, and a number (min 8 chars)</p>' : ""}
           <button type="submit" class="submit-btn">${isSignUp ? "Sign up" : "Sign in"}</button>
         </form>` : "";
     const footer = b.termsUrl || b.privacyUrl ? `<div class="footer">
@@ -239,11 +241,17 @@ var ModalRenderer = class {
           ${b.termsUrl && b.privacyUrl ? " \xB7 " : ""}
           ${b.privacyUrl ? `<a href="${b.privacyUrl}" target="_blank">Privacy Policy</a>` : ""}
         </div>` : "";
+    const titleHtml = isSignUp ? `<div class="title-row">
+          <button class="back-btn" id="back-btn" type="button" aria-label="Back to sign in">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
+          </button>
+          <h2 class="title">${title}</h2>
+        </div>` : `<h2 class="title">${title}</h2>`;
     return `
       ${b.logoDataUrl ? `<img src="${b.logoDataUrl}" alt="Logo" class="logo" />` : ""}
-      <h2 class="title">${title}</h2>
+      ${titleHtml}
       ${b.brandName ? `<p class="brand-name">${b.brandName}</p>` : ""}
-      <div class="providers">${providerButtons}</div>
+      ${showProviders ? `<div class="providers">${providerButtons}</div>` : ""}
       ${divider}
       ${emailForm}
       <p class="switch-view">${subtitle} <a href="#" id="switch-link">${subtitleLink}</a></p>
@@ -303,6 +311,16 @@ var ModalRenderer = class {
         transition: opacity 0.14s ease, transform 0.14s ease;
       }
       .logo { display: block; margin: 0 auto 16px; max-height: 48px; }
+      .title-row { display: flex; align-items: center; position: relative; margin-bottom: 8px; }
+      .title-row .title { flex: 1; margin-bottom: 0; }
+      .back-btn {
+        position: absolute; left: 0; top: 50%; transform: translateY(-50%);
+        background: none; border: none; color: var(--authon-muted);
+        cursor: pointer; padding: 4px; border-radius: 6px; display: flex; align-items: center; justify-content: center;
+        transition: color 0.15s, background 0.15s;
+      }
+      .back-btn:hover { color: var(--authon-text); background: var(--authon-divider); }
+      .password-hint { font-size: 11px; color: var(--authon-dim); margin: -4px 0 2px; }
       .title { text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 8px; color: var(--authon-text); }
       .brand-name { text-align: center; font-size: 14px; color: var(--authon-muted); margin-bottom: 24px; }
       .providers { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
@@ -446,6 +464,12 @@ var ModalRenderer = class {
         );
       });
     }
+    const backBtn = this.shadowRoot.getElementById("back-btn");
+    if (backBtn) {
+      backBtn.addEventListener("click", () => {
+        this.open("signIn");
+      });
+    }
     const switchLink = this.shadowRoot.getElementById("switch-link");
     if (switchLink) {
       switchLink.addEventListener("click", (e) => {
@@ -647,8 +671,7 @@ var Authon = class {
           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.modal?.showError(msg || "Authentication failed");
             this.emit("error", err instanceof Error ? err : new Error(msg));
           });
         },
@@ -768,7 +791,7 @@ var Authon = class {
       headers: { "x-api-key": this.publishableKey },
       credentials: "include"
     });
-    if (!res.ok) throw new Error(`API ${path}: ${res.status}`);
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
     return res.json();
   }
   async apiPost(path, body) {
@@ -781,9 +804,22 @@ var Authon = class {
       credentials: "include",
       body: body ? JSON.stringify(body) : void 0
     });
-    if (!res.ok) throw new Error(`API ${path}: ${res.status}`);
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
     return res.json();
   }
+  async parseApiError(res, path) {
+    try {
+      const body = await res.json();
+      if (Array.isArray(body.message) && body.message.length > 0) {
+        return body.message[0];
+      }
+      if (typeof body.message === "string" && body.message !== "Bad Request") {
+        return body.message;
+      }
+    } catch {
+    }
+    return `API ${path}: ${res.status}`;
+  }
 };
 export {
   Authon,

package/package.json

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