@auth-link/web 1.1.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2.0.0 — 2026-11-13
+
+- Use the responsive minimal layout for every JavaScript, React and Vue binding/verification dialog.
+- **Breaking:** remove the variant option/prop, modal.setVariant() and DialogVariant type. Remove these from integrations when upgrading from 1.x.
+- Remove split/compact layouts and their CSS; keep the existing minimal layout, language switching and verification behavior.
+
+
 ## 1.1.0 — 2026-11-13
 
 - Add openPasscode, createPasscodeClient and React/Vue AuthLinkPasscode components for direct six-digit rotating-code verification.

package/README.md

@@ -4,6 +4,10 @@
 
 ## English
 
+### Upgrading from 1.x
+
+All dialogs now use the minimal layout. Remove the variant option/prop, modal.setVariant() calls and DialogVariant type imports. Language switching and verification callbacks are unchanged.
+
 ### Direct rotating-code verification
 
 The app directly displays a six-digit rotating code. No per-action approval, authorization requestId, businessId or polling is required. First-time enrollment still scans a QR and verifies the phone; entering its current code on the website completes binding.
@@ -11,7 +15,7 @@ The app directly displays a six-digit rotating code. No per-action approval, aut
 The CMS backend must reserve one immutable pending action per session before opening the prompt. Another tab cannot replace it. Obtain the user from the server session and check CSRF and business permissions. Verify the passcode on the server and atomically commit verificationId with the saved operation before returning success. onVerified only updates the UI.
 
 ```sh
-npm install @auth-link/web@^1.1.0
+npm install @auth-link/web@^2.0.0
 ```
 
 ```ts
@@ -19,31 +23,31 @@ import { openPasscode, createPasscodeClient } from '@auth-link/web';
 import '@auth-link/web/styles.css';
 const client = createPasscodeClient({ baseUrl: '/api', csrfToken: () => csrfToken });
 const modal = openPasscode({
-  client, expiresAt: pending.expiresAt, locale: 'zh-CN', variant: 'B',
+  client, expiresAt: pending.expiresAt, locale: 'zh-CN',
   // First-time enrollment only:
   // bindingQr: pending.bindingQr, authLinkOrigin: 'https://api.getauthlink.com',
   onVerified: result => updateUI(result.verificationId),
 });
-// modal.setLocale('en'); modal.setVariant('C'); modal.destroy();
+// modal.setLocale('en'); modal.destroy();
 ```
 
 The default client posts only {passcode} to POST /api/auth with current CMS credentials and CSRF. To submit a form at the same time, supply your own client.verify callback and send {form,passcode} to your CMS. The CMS checks the form against its saved snapshot; never send tenant keys or passcode seeds to the browser.
 
 ### Options and callbacks
 
-Required: client.verify(passcode, signal) and expiresAt (the pending CMS action deadline). Optional: locale, variant A/B/C, bindingQr and authLinkOrigin for first enrollment only, onVerified, onError, onClose, onExpired. Success contains status, verificationId, authenticationPolicy and expiresAt; it has no requestId or businessId.
+Required: client.verify(passcode, signal) and expiresAt (the pending CMS action deadline). Optional: locale, bindingQr and authLinkOrigin for first enrollment only, onVerified, onError, onClose, onExpired. Success contains status, verificationId, authenticationPolicy and expiresAt; it has no requestId or businessId.
 
 Cookie authentication requires CSRF. Bearer authentication uses accessToken with credentials=omit. For a cross-origin CMS explicitly set allowedBackendOrigins. Bare HTTPS origins are required outside loopback development.
 
 ### React and Vue
 
-The React component takes the same options. Vue emits verified, error, close and expired. Keep client references stable. Thirteen languages remain supported; Simplified Chinese is the default. A is minimal, B is split, C is compact.
+The React component takes the same options. Vue emits verified, error, close and expired. Keep client references stable. Thirteen languages remain supported; Simplified Chinese is the default. All dialogs use one responsive minimal layout.
 
 ```tsx
 import { AuthLinkPasscode } from '@auth-link/web/react';
 // Keep client stable (for example with useMemo).
 <AuthLinkPasscode client={client} expiresAt={pending.expiresAt}
-  locale="zh-CN" variant="B" onVerified={updateUI} />
+  locale="zh-CN" onVerified={updateUI} />
 ```
 ```vue
 <script setup>
@@ -51,7 +55,7 @@ import { AuthLinkPasscode } from '@auth-link/web/vue';
 </script>
 <template>
   <AuthLinkPasscode :client="client" :expires-at="pending.expiresAt"
-    locale="zh-CN" variant="B" @verified="updateUI" />
+    locale="zh-CN" @verified="updateUI" />
 </template>
 ```
 
@@ -67,6 +71,10 @@ The older openAuthLink / Ticket / Consume workflow remains available for the ear
 
 ## 简体中文
 
+### 从 1.x 升级
+
+所有弹窗统一使用极简布局。请删除 variant 参数或组件属性、modal.setVariant() 调用和 DialogVariant 类型导入。语言切换与验证回调保持不变。
+
 ### 直接验证动态码
 
 App 直接显示六位动态码。日常验证不需要逐次批准、授权 requestId、businessId 或轮询。首次绑定仍需扫码验证设备，在网站输入 App 当前动态码后才完成绑定。
@@ -74,7 +82,7 @@ App 直接显示六位动态码。日常验证不需要逐次批准、授权 req
 打开弹窗前，CMS 后台必须为会话原子保留唯一且不可变的待办。其他标签页不能覆盖它。用户来自服务端会话，后台检查 CSRF、业务权限和原表单，验证动态码后将 verificationId 与原操作原子提交，再返回成功。onVerified 只更新界面。
 
 ```sh
-npm install @auth-link/web@^1.1.0
+npm install @auth-link/web@^2.0.0
 ```
 
 ```ts
@@ -82,31 +90,31 @@ import { openPasscode, createPasscodeClient } from '@auth-link/web';
 import '@auth-link/web/styles.css';
 const client = createPasscodeClient({ baseUrl: '/api', csrfToken: () => csrfToken });
 const modal = openPasscode({
-  client, expiresAt: pending.expiresAt, locale: 'zh-CN', variant: 'B',
+  client, expiresAt: pending.expiresAt, locale: 'zh-CN',
   // First-time enrollment only:
   // bindingQr: pending.bindingQr, authLinkOrigin: 'https://api.getauthlink.com',
   onVerified: result => updateUI(result.verificationId),
 });
-// modal.setLocale('en'); modal.setVariant('C'); modal.destroy();
+// modal.setLocale('en'); modal.destroy();
 ```
 
 默认客户端向 CMS 的 POST /api/auth 提交 {passcode}，携带当前会话与 CSRF。要随表单提交，可自行实现 client.verify，向 CMS 发送 {form,passcode}；后台核对原保存快照。租户密钥与动态码密钥不能进入浏览器。
 
 ### 选项与回调
 
-必填：client.verify(passcode, signal)、expiresAt（CMS 待办截止时间）。可选：locale、variant A/B/C、仅首次绑定使用的 bindingQr 与 authLinkOrigin、onVerified、onError、onClose、onExpired。成功结果含 status、verificationId、authenticationPolicy、expiresAt，不含 requestId 或 businessId。
+必填：client.verify(passcode, signal)、expiresAt（CMS 待办截止时间）。可选：locale、仅首次绑定使用的 bindingQr 与 authLinkOrigin、onVerified、onError、onClose、onExpired。成功结果含 status、verificationId、authenticationPolicy、expiresAt，不含 requestId 或 businessId。
 
 Cookie 模式必须配置 CSRF。Bearer 模式配置 accessToken 且 credentials=omit。跨域 CMS 必须显式配置 allowedBackendOrigins；回环开发之外使用 HTTPS。
 
 ### React 与 Vue
 
-React 组件使用相同选项，Vue 发出 verified、error、close、expired 事件。client 引用需保持稳定。支持 13 种语言，默认简体中文；A 极简、B 分栏、C 紧凑。
+React 组件使用相同选项，Vue 发出 verified、error、close、expired 事件。client 引用需保持稳定。支持 13 种语言，默认简体中文；统一使用响应式极简布局。
 
 ```tsx
 import { AuthLinkPasscode } from '@auth-link/web/react';
 // Keep client stable (for example with useMemo).
 <AuthLinkPasscode client={client} expiresAt={pending.expiresAt}
-  locale="zh-CN" variant="B" onVerified={updateUI} />
+  locale="zh-CN" onVerified={updateUI} />
 ```
 ```vue
 <script setup>
@@ -114,7 +122,7 @@ import { AuthLinkPasscode } from '@auth-link/web/vue';
 </script>
 <template>
   <AuthLinkPasscode :client="client" :expires-at="pending.expiresAt"
-    locale="zh-CN" variant="B" @verified="updateUI" />
+    locale="zh-CN" @verified="updateUI" />
 </template>
 ```
 
@@ -130,6 +138,10 @@ destroy() 中止浏览器请求并清理计时器，不触发关闭回调；clos
 
 ## 日本語
 
+### 1.x からの更新
+
+すべてのダイアログはシンプルレイアウトに統一されました。variant オプション・プロパティ、modal.setVariant() の呼び出し、DialogVariant 型のインポートを削除してください。言語切り替えと認証コールバックは変更ありません。
+
 ### 認証コードを直接検証
 
 アプリに6桁の認証コードを直接表示します。通常の検証では、毎回の承認、認証用requestId、businessId、ポーリングは不要です。初回はQRで端末を確認し、サイトで現在のコードを検証して連携を完了します。
@@ -137,7 +149,7 @@ destroy() 中止浏览器请求并清理计时器，不触发关闭回调；clos
 画面を開く前にCMSサーバーでセッションの唯一の保留中操作を原子的に確保します。別タブから上書きさせません。ユーザーはサーバーのセッションから取得し、CSRF、業務権限、元のフォームを確認します。コードを検証し、verificationIdと元の操作を原子的に確定してから成功を返します。onVerifiedは表示更新専用です。
 
 ```sh
-npm install @auth-link/web@^1.1.0
+npm install @auth-link/web@^2.0.0
 ```
 
 ```ts
@@ -145,31 +157,31 @@ import { openPasscode, createPasscodeClient } from '@auth-link/web';
 import '@auth-link/web/styles.css';
 const client = createPasscodeClient({ baseUrl: '/api', csrfToken: () => csrfToken });
 const modal = openPasscode({
-  client, expiresAt: pending.expiresAt, locale: 'zh-CN', variant: 'B',
+  client, expiresAt: pending.expiresAt, locale: 'zh-CN',
   // First-time enrollment only:
   // bindingQr: pending.bindingQr, authLinkOrigin: 'https://api.getauthlink.com',
   onVerified: result => updateUI(result.verificationId),
 });
-// modal.setLocale('en'); modal.setVariant('C'); modal.destroy();
+// modal.setLocale('en'); modal.destroy();
 ```
 
 標準クライアントは現在の認証情報とCSRFを付け、CMSのPOST /api/authへ{passcode}を送信します。フォームも送る場合はclient.verifyで{form,passcode}をCMSへ送信し、サーバーで保存済み内容と照合します。テナントキーやコード生成用秘密はブラウザーへ渡しません。
 
 ### オプションとコールバック
 
-必須はclient.verify(passcode, signal)とexpiresAt（CMS操作の期限）です。任意でlocale、variant A/B/C、初回用bindingQrとauthLinkOrigin、onVerified、onError、onClose、onExpiredを指定します。成功結果はstatus、verificationId、authenticationPolicy、expiresAtを含み、requestIdやbusinessIdは含みません。
+必須はclient.verify(passcode, signal)とexpiresAt（CMS操作の期限）です。任意でlocale、初回用bindingQrとauthLinkOrigin、onVerified、onError、onClose、onExpiredを指定します。成功結果はstatus、verificationId、authenticationPolicy、expiresAtを含み、requestIdやbusinessIdは含みません。
 
 Cookie認証ではCSRFが必須です。Bearer認証はaccessTokenとcredentials=omitを使います。別オリジンのCMSはallowedBackendOriginsを明示し、ループバック開発以外ではHTTPSを使います。
 
 ### ReactとVue
 
-Reactは同じオプションを使い、Vueはverified、error、close、expiredイベントを発行します。clientの参照を安定させてください。13言語に対応し、既定は簡体字中国語です。Aはシンプル、Bは分割、Cはコンパクト表示です。
+Reactは同じオプションを使い、Vueはverified、error、close、expiredイベントを発行します。clientの参照を安定させてください。13言語に対応し、既定は簡体字中国語です。すべてのダイアログはレスポンシブなシンプルレイアウトを使用します。
 
 ```tsx
 import { AuthLinkPasscode } from '@auth-link/web/react';
 // Keep client stable (for example with useMemo).
 <AuthLinkPasscode client={client} expiresAt={pending.expiresAt}
-  locale="zh-CN" variant="B" onVerified={updateUI} />
+  locale="zh-CN" onVerified={updateUI} />
 ```
 ```vue
 <script setup>
@@ -177,7 +189,7 @@ import { AuthLinkPasscode } from '@auth-link/web/vue';
 </script>
 <template>
   <AuthLinkPasscode :client="client" :expires-at="pending.expiresAt"
-    locale="zh-CN" variant="B" @verified="updateUI" />
+    locale="zh-CN" @verified="updateUI" />
 </template>
 ```
 

package/dist/index.js

@@ -2392,12 +2392,9 @@ function getMessages(locale) {
 
 // src/view.ts
 var node = (tag, props, ...children) => ({ tag, props, children });
-function resolveVariant(variant) {
-  return variant === "B" || variant === "C" ? variant : "A";
-}
 function widgetView(options) {
   const { snapshot: s, mode, retry, refresh } = options;
-  const locale = resolveLocale(options.locale), variant = resolveVariant(options.variant);
+  const locale = resolveLocale(options.locale);
   const l = getMessages(locale);
   const pending = s.status === "pending", hasQr = pending && (mode === "bind" || Boolean(options.showQr)) && Boolean(options.qr);
   const status = { idle: l.loading, pending: options.passcodeMode ? l.otpWaiting : l.waiting, confirmed: l.confirmed, rejected: l.rejected, expired: l.expired, error: l.error }[s.status];
@@ -2414,12 +2411,6 @@ function widgetView(options) {
     expiring ? l.expiring : status,
     ...expiring ? [node("span", { class: "authlink-expiry", "aria-hidden": "true" }, ` \xB7 ${expiryTime}`)] : []
   );
-  const cancel = () => options.close ? [node("button", {
-    type: "button",
-    class: "authlink-cancel",
-    "data-authlink-focus": "cancel",
-    onClick: options.close
-  }, l.cancel)] : [];
   const children = [node("h3", { class: "authlink-title" }, l[mode])];
   if (hasQr) children.push(node("p", { class: "authlink-subtitle" }, l.scan));
   if (pending) {
@@ -2462,9 +2453,7 @@ function widgetView(options) {
       ...s.error ? [node("p", { class: "authlink-input-error", role: "alert" }, options.passcodeMode ? s.error.message === "OTP_NOT_CONFIGURED" ? l.otpSetup : l.otpError : l.codeError)] : []
     ];
     children.push(node("div", { class: "authlink-body" }, ...qr, node("div", { class: "authlink-details" }, ...detail)));
-    if (variant === "A") children.push(node("div", { class: "authlink-footer" }, statusNode()));
-    if (variant === "B") children.push(node("div", { class: "authlink-footer" }, statusNode(), ...cancel()));
-    if (variant === "C") children.push(node("div", { class: "authlink-footer" }, statusNode(), ...cancel()));
+    children.push(node("div", { class: "authlink-footer" }, statusNode()));
   } else {
     children.push(statusNode());
     if (s.error?.message === "CONFIRMATION_CODE_LOCKED") children.push(node("p", { class: "authlink-input-error", role: "alert" }, l.codeLocked));
@@ -2485,7 +2474,6 @@ function widgetView(options) {
     lang: locale,
     class: `authlink-widget ${options.className ?? ""}`.trim(),
     "data-status": s.status,
-    "data-variant": variant,
     "data-has-qr": String(hasQr),
     "aria-label": l[mode]
   }, ...children);
@@ -2529,7 +2517,7 @@ function openAuthLink(options) {
   content.className = "authlink-modal-content";
   header.append(brand, closeButton);
   dialog.append(header, content);
-  let locale = options.locale, variant = resolveVariant(options.variant), snapshot = initialSnapshot(), closed = false;
+  let locale = options.locale, snapshot = initialSnapshot(), closed = false;
   let abort;
   let inputCode = "";
   let submitCode;
@@ -2559,7 +2547,6 @@ function openAuthLink(options) {
     const language = resolveLocale(locale), messages2 = getMessages(language);
     dialog.lang = language;
     dialog.setAttribute("aria-label", messages2[mode]);
-    dialog.dataset.variant = variant;
     dialog.dataset.mode = mode;
     dialog.dataset.hasQr = String(snapshot.status === "pending" && (mode === "bind" || Boolean(options.showQr)));
     closeButton.setAttribute("aria-label", messages2.close);
@@ -2568,7 +2555,6 @@ function openAuthLink(options) {
     const next = element(widgetView({
       mode,
       locale,
-      variant,
       snapshot,
       qr: image,
       showQr: options.showQr,
@@ -2578,8 +2564,7 @@ function openAuthLink(options) {
       },
       submitCode: (code) => submitCode?.(code) ?? Promise.resolve(),
       retry,
-      refresh: options.onRefresh,
-      close: () => dispose(true)
+      refresh: options.onRefresh
     }));
     const oldCode = content.querySelector(".authlink-code");
     const nextCode = next.querySelector(".authlink-code");
@@ -2692,10 +2677,6 @@ function openAuthLink(options) {
       locale = value;
       render();
     },
-    setVariant: (value) => {
-      variant = resolveVariant(value);
-      render();
-    },
     retry
   };
 }
@@ -2744,7 +2725,7 @@ function openPasscode(options) {
   content.className = "authlink-modal-content";
   header.append(brand, close);
   dialog.append(header, content);
-  let locale = options.locale, variant = resolveVariant(options.variant), closed = false, busy = false, code = "", error;
+  let locale = options.locale, closed = false, busy = false, code = "", error;
   const mode = options.bindingQr ? "bind" : "confirm";
   let image;
   if (options.bindingQr) {
@@ -2771,7 +2752,6 @@ function openPasscode(options) {
     if (closed) return;
     const l = getMessages(locale);
     dialog.lang = resolveLocale(locale);
-    dialog.dataset.variant = variant;
     dialog.dataset.mode = mode;
     dialog.dataset.hasQr = String(Boolean(image));
     dialog.setAttribute("aria-label", l[mode]);
@@ -2782,7 +2762,6 @@ function openPasscode(options) {
     content.replaceChildren(element(widgetView({
       mode,
       locale,
-      variant,
       passcodeMode: true,
       snapshot,
       qr: image,
@@ -2795,8 +2774,7 @@ function openPasscode(options) {
       retry: () => {
         error = void 0;
         render();
-      },
-      close: () => dispose(true)
+      }
     })));
     if (focused) content.querySelector("input")?.focus();
   };
@@ -2858,10 +2836,6 @@ function openPasscode(options) {
       locale = value;
       render();
     },
-    setVariant: (value) => {
-      variant = resolveVariant(value);
-      render();
-    },
     retry: () => {
       error = void 0;
       render();