dsh-webui-oauth 0.7.6 → 0.7.8

package/CHANGELOG.md

@@ -2,6 +2,73 @@
 
 本文件记录每个版本的**用户可见**变更。破坏性变更与升级动作单独标注。
 
+## 0.7.8
+
+SSO 复验改为**新窗口 + 等待状态**；设置页做了一轮视觉打磨。
+
+### 调整：SSO 验证另开窗口，设置页显示「等待验证」
+
+- 弹窗里的「使用 SSO 验证」不再整页跳转，改为 `window.open` 打开独立窗口
+  （`/dsh-webui-oauth/oidc/reauth?popup=1`）；设置页保持打开并显示
+  「等待验证…请在打开的窗口中完成 SSO 登录」；
+- 复验回调（仍走统一的 `/oidc/callback`）在弹窗模式下返回一个
+  **自我关闭的 HTML 页**：`postMessage({type:'dsh-wua-reauth'})` 通知设置页，
+  随后 `window.close()`，不把整个应用加载进小窗口；
+- 设置页同时监听 message 并每 2 秒轮询 `status.reauthActive` 兜底；
+  验证成功后弹窗内即可直接保存；
+- 弹窗被浏览器拦截时自动回退为整页跳转（原行为）。
+
+### 视觉打磨
+
+- 卡片：更大圆角、轻投影、hover 边框高亮、标题前品牌色竖条；
+- 输入框/下拉：统一 36px 高度、聚焦光环、hover 边框；
+- 按钮：主按钮填充色 + 阴影、ghost 描边、active 微下沉、disabled 降透明度；
+- 提示条：成功/错误/警告统一为左侧色条 + 浅色底；
+- 审计列表：行内 hover、圆角、等宽时间；
+- 弹窗：背景模糊、入场动画、更大圆角；
+- 窄屏（≤640px）单列布局。
+
+### 测试
+
+- `oidc-bind` 新增 5 项：弹窗复验回调返回 HTML、通知 opener、自我关闭、
+  会话标记生效；
+- **新增 `test/lifecycle.test.mjs`（19 项）**：从零凭据首次启动 → setup token
+  初始化 → 密码登录 → 改配置/TTL → 禁用 → 重新启用 → 退出，完整生命周期；
+- 全量 23 个测试文件、623 项断言通过。
+
+## 0.7.7
+
+设置页再收敛：移除冗余密码框、保存按钮移到顶部、SSO 复验改为会话级。
+
+### 调整：账号卡片不再有「当前密码」输入框
+
+保存/禁用已经统一走验证弹窗，账号卡片里的「当前密码」输入框是冗余的，已移除。
+禁用认证改为与保存一致的流程：顶部按钮 → 弹窗验证（密码或 SSO）。
+
+### 调整：「保存设置」从右下角悬浮改为顶部卡片按钮
+
+- 移除右下角悬浮的「保存设置」按钮；
+- 保存按钮放到「概览」卡片的操作区（与退出登录、禁用认证并列）；
+- 首次初始化（未启用认证）直接保存，无需验证；
+- 已启用时点击弹窗验证：当前密码，或 SSO 验证。
+
+### 调整：SSO 复验改为**会话级**，不再签发独立令牌
+
+- 复验回调仍走统一的 `/dsh-webui-oauth/oidc/callback`；
+- 发起复验时把当前会话 token 记进 OIDC state（服务端）；
+- 回调校验 sub 通过后，直接给该会话写 `reauthAt = now`（2 分钟有效），
+  **不再生成令牌、也不再往 URL 里放令牌**；
+- `configure` / `disable` / `oidc/unbind` 通过 `sessionReauthOk(req)` 判断；
+  成功后清除 `reauthAt`（一次性）；
+- `status` 回显 `reauthActive`，前端据此显示「已通过 SSO 验证」；
+- 回调回执只保留 `oidcreauth=1` 状态标记。
+
+### 测试
+
+- `test/oidc-bind.test.mjs` 的复验用例改为会话级断言（回调只带状态标记、
+  同会话无密码保存成功、复验不可重放）；
+- 全量 22 个测试文件、599 项断言通过。
+
 ## 0.7.6
 
 把 DeepSeek 登录回调输入**合并进官方「等待登录」对话框**，不再单独占一个悬浮入口。

package/index.js

@@ -2155,6 +2155,20 @@ const OIDC_CALLBACK_PATH = '/dsh-webui-oauth/oidc/callback'
 // 登录入口。ssoOnly 开启时改走 SSO 入口——两者都是公开白名单路径。
 const LOGIN_PATH = '/dsh-webui-oauth/login'
 const SSO_LOGIN_PATH = '/dsh-webui-oauth/oidc/login'
+
+// SSO 复验弹窗的回调页：只负责通知 opener 并自我关闭，不加载整个应用。
+const REAUTH_POPUP_HTML = `<!doctype html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>验证成功</title>
+<style>
+  html,body{height:100%;margin:0}
+  body{display:flex;align-items:center;justify-content:center;font:14px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;background:#0b0b0c;color:#e8e8e8}
+  .box{text-align:center;opacity:.92}
+</style></head>
+<body><div class="box"><p>验证成功，正在返回设置页…</p><p style="font-size:12px;opacity:.6">如果窗口没有自动关闭，请手动关闭。</p></div>
+<script>
+try { if (window.opener) window.opener.postMessage({ type: 'dsh-wua-reauth', ok: true }, location.origin); } catch (e) {}
+setTimeout(function () { try { window.close(); } catch (e) {} }, 400);
+</script></body></html>`
 // 授权请求状态（state / nonce / PKCE verifier）的存活时间。三次握手应在分钟内
 // 完成，10 分钟足够覆盖用户在 IdP 侧慢慢登录的情形，又限制了被滥用的窗口。
 const OIDC_STATE_TTL_MS = 10 * 60 * 1000
@@ -2691,6 +2705,31 @@ export async function apply(ctx) {
 
   const SESSION_TTL_MS = SESSION_BROWSER_TTL_MS
 
+  /** 取当前请求对应的会话记录（不做续期），无效/过期返回 null。 */
+  function sessionOf(req) {
+    const token = cookieOf(req, COOKIE_NAME)
+    if (!token) return null
+    const s = sessions.get(token)
+    if (!s) return null
+    if (s.expiresAt <= Date.now()) {
+      sessions.delete(token)
+      return null
+    }
+    return s
+  }
+
+  /** 该会话是否在 2 分钟内通过过 SSO 复验。 */
+  function sessionReauthOk(req) {
+    const s = sessionOf(req)
+    return !!(s && typeof s.reauthAt === 'number' && Date.now() - s.reauthAt < REAUTH_WINDOW_MS)
+  }
+
+  /** 复验是一次性的：敏感操作成功后清掉时间戳。 */
+  function clearSessionReauth(req) {
+    const s = sessionOf(req)
+    if (s) delete s.reauthAt
+  }
+
   function createSession(username, ttl) {
     const token = randomBytes(24).toString('hex')
     const ttlMs = ttl > 0 ? ttl * 3600 * 1000 : SESSION_TTL_MS
@@ -2832,30 +2871,20 @@ export async function apply(ctx) {
   // 必须在后台定时器使用 purge 之前定义。
   const oidcStateStore = makeOidcStateStore()
 
-  // 敏感操作（保存配置 / 禁用 / 解绑）的 SSO 复验令牌：
-  // 一次性、2 分钟。密码被禁用（仅允许 SSO）时，用户仍可用 SSO 完成二次验证。
-  const reauthTokens = new Map()
-  const REAUTH_TTL_MS = 2 * 60 * 1000
-  const mintReauthToken = (username) => {
-    const token = randomBytes(16).toString('hex')
-    reauthTokens.set(token, { username, expiresAt: Date.now() + REAUTH_TTL_MS })
-    return token
-  }
-  const consumeReauthToken = (token) => {
-    if (typeof token !== 'string' || !token) return null
-    const rec = reauthTokens.get(token)
-    if (!rec) return null
-    reauthTokens.delete(token)
-    if (rec.expiresAt <= Date.now()) return null
-    return rec
-  }
+  // SSO 复验通过后，直接在**当前会话**上记一个时间戳（2 分钟有效），
+  // 不再签发独立令牌、也不经过 URL 传递。敏感操作直接检查会话。
+  const REAUTH_WINDOW_MS = 2 * 60 * 1000
   const purgeExpiredOidcStates = oidcStateStore.purge
 
   // 后台任务：过期会话清理 + enabled 状态刷新
   const bgTimer = setInterval(async () => {
     const now = Date.now()
-    for (const [k, s] of sessions.live) if (s.expiresAt <= now) sessions.delete(k)
-    for (const [k, v] of reauthTokens) if (v.expiresAt <= now) reauthTokens.delete(k)
+    for (const [k, s] of sessions.live) {
+      if (s.expiresAt <= now || (typeof s.reauthAt === 'number' && now - s.reauthAt >= REAUTH_WINDOW_MS)) {
+        if (s.expiresAt <= now) sessions.delete(k)
+        else delete s.reauthAt
+      }
+    }
     purgeExpiredOidcStates()
     try {
       const creds = await readCredentials(ctx)
@@ -3124,6 +3153,8 @@ export async function apply(ctx) {
           sessionsPersisted: sessions.ok,
           // 远程访问信任（可选）：是否已注入 ownsHost。
           remoteTrust: remoteTrustFlag,
+          // 当前会话是否在 2 分钟内通过过 SSO 复验（保存/禁用/解绑可直接进行）。
+          reauthActive: sessionReauthOk(req),
           // 核心兜底席位形态（handler | resource | absent | unknown）：核心升级后
           // 如果这里变成 unknown，文档请求会 404 —— 排查时先看这个字段。
           fallback: fallbackShape(ctx.webServer),
@@ -3243,8 +3274,8 @@ export async function apply(ctx) {
           }
         }
         if (wasEnabled) {
-          // 支持 SSO 复验令牌（「仅允许 SSO」时密码登录入口不可用）
-          const reauthOk = !!consumeReauthToken(body.reauthToken)
+          // 支持 SSO 复验（「仅允许 SSO」时密码登录入口不可用）：复验结果记在会话上
+          const reauthOk = sessionReauthOk(req)
           const curValid = reauthOk || (current && typeof creds.hash === 'string' && await verifyPassword(current, creds.hash))
           if (!curValid) {
             await auditLog(ctx, 'configure_failure', { username, ip: meta.ip, ua: meta.ua, detail: '当前密码不正确' })
@@ -3383,6 +3414,7 @@ export async function apply(ctx) {
         if (!keepPassword) detailParts.push('密码已修改')
         if (body.ttl !== undefined) detailParts.push('有效期已修改')
         await auditLog(ctx, 'configure_success', { username, ip: meta.ip, ua: meta.ua, detail: detailParts.length ? detailParts.join('，') : null })
+        clearSessionReauth(req)
         sendJson(res, 200, { ok: true })
       } catch (e) {
         sendJson(res, 500, { error: e && e.message ? e.message : String(e) })
@@ -3412,7 +3444,7 @@ export async function apply(ctx) {
           sendJson(res, 200, { ok: true })
           return
         }
-        const reauthOk = !!consumeReauthToken(body.reauthToken)
+        const reauthOk = sessionReauthOk(req)
         const curValid = reauthOk || (current && typeof creds.hash === 'string' && await verifyPassword(current, creds.hash))
         if (!curValid) {
           await auditLog(ctx, 'disable_failure', { username: creds.username, ip: meta.ip, ua: meta.ua, detail: '当前密码不正确' })
@@ -3498,7 +3530,16 @@ export async function apply(ctx) {
     const state = oidcRandom(24)
     const nonce = oidcRandom(24)
     const verifier = oidcRandom(32)
-    oidcStateStore.put(state, { nonce, verifier, redirectUri, purpose })
+    // 复验要绑定到发起它的浏览器的**会话**：回调时直接把 reauthAt 记在该会话上，
+    // 不再签发独立令牌、也不把令牌放进 URL。
+    const sessionToken = purpose === 'reauth' ? cookieOf(req, COOKIE_NAME) : null
+    // 复验可以由设置页的弹窗发起（popup=1）：回调时回一个"验证成功，请关闭窗口"
+    // 的小页面，而不是把整个应用加载进弹窗。
+    let popup = false
+    try {
+      popup = purpose === 'reauth' && new URL(req.url || '/', 'http://x').searchParams.get('popup') === '1'
+    } catch (e) { popup = false }
+    oidcStateStore.put(state, { nonce, verifier, redirectUri, purpose, sessionToken, popup })
     const authUrl = new URL(disc.metadata.authorization_endpoint)
     authUrl.searchParams.set('response_type', 'code')
     authUrl.searchParams.set('client_id', o.clientId)
@@ -3629,7 +3670,7 @@ export async function apply(ctx) {
         const creds = await readCredentials(ctx)
         const meta = requestMeta(req)
         const current = String(body.current || '')
-        const reauthOk = !!consumeReauthToken(body.reauthToken)
+        const reauthOk = sessionReauthOk(req)
         const curValid = reauthOk || (current && creds && typeof creds.hash === 'string' && await verifyPassword(current, creds.hash))
         if (!curValid) {
           await auditLog(ctx, 'oidc_unbind_failure', { username: creds && creds.username ? creds.username : null, ip: meta.ip, ua: meta.ua, detail: '当前密码不正确' })
@@ -3662,6 +3703,7 @@ export async function apply(ctx) {
         await writeCredentials(ctx, next)
         await refreshSsoOnly(next)
         await auditLog(ctx, 'oidc_unbind_success', { username: creds.username, ip: meta.ip, ua: meta.ua })
+        clearSessionReauth(req)
         sendJson(res, 200, { ok: true, bound: false })
       } catch (e) {
         sendJson(res, 500, { error: e && e.message ? e.message : String(e) })
@@ -3793,9 +3835,27 @@ export async function apply(ctx) {
             redirectBackToApp(ctx, req, res, 'oidcerr=sub-mismatch', clearStateCookie)
             return
           }
-          const token = mintReauthToken(rawSub)
+          // 把复验结果记到发起登录的那个会话上（2 分钟内有效）。
+          const target = st.sessionToken ? sessions.get(st.sessionToken) : null
+          if (!target || target.expiresAt <= Date.now()) {
+            await auditLog(ctx, 'oidc_login_failure', { username: auditName, ip: meta.ip, ua: meta.ua, detail: '复验时会话已失效' })
+            redirectBackToApp(ctx, req, res, 'oidcerr=session-expired', clearStateCookie)
+            return
+          }
+          target.reauthAt = Date.now()
           await auditLog(ctx, 'oidc_reauth_success', { username: auditName, ip: meta.ip, ua: meta.ua })
-          redirectBackToApp(ctx, req, res, 'oidcreauth=' + token, clearStateCookie)
+          // 弹窗发起：回一个自我关闭的页面，避免把整个应用加载进小窗口。
+          if (st.popup) {
+            res.writeHead(200, {
+              'content-type': 'text/html; charset=utf-8',
+              'cache-control': 'no-store',
+              'x-content-type-options': 'nosniff',
+              'set-cookie': clearStateCookie['Set-Cookie'],
+            })
+            res.end(REAUTH_POPUP_HTML)
+            return
+          }
+          redirectBackToApp(ctx, req, res, 'oidcreauth=1', clearStateCookie)
           return
         }
 

package/lib/client.js

@@ -9,51 +9,54 @@ window.__ModuleLoader__.load({
 		const inject = ['slots'];
 
 		const CSS = [
-			'.wua-section { display: flex; flex-direction: column; gap: 16px; max-width: 760px; padding: 4px 2px; }',
-			'.wua-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid var(--dsw-alias-border-l1, #e5e5e5); border-radius: 10px; background: var(--dsw-alias-bg-layer-2, #fff); }',
-			'.wua-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }',
-			'.wua-card-title { margin: 0; font-size: 14px; font-weight: 600; color: var(--dsw-alias-label-primary, #222); }',
+			'.wua-section { display: flex; flex-direction: column; gap: 18px; max-width: 820px; padding: 4px 2px 24px; color: var(--dsw-alias-label-primary, #222); }',
+			'.wua-card { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border: 1px solid var(--dsw-alias-border-l1, #e5e5e5); border-radius: 14px; background: var(--dsw-alias-bg-layer-2, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.045); transition: border-color .18s ease, box-shadow .18s ease; }',
+			'.wua-card:hover { border-color: color-mix(in srgb, var(--dsw-alias-brand-primary, #4a7cf7) 28%, var(--dsw-alias-border-l1, #e5e5e5)); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 34px rgba(0,0,0,.07); }',
+			'.wua-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }',
+			'.wua-card-title { position: relative; margin: 0; padding-left: 10px; font-size: 14.5px; font-weight: 650; letter-spacing: .01em; color: var(--dsw-alias-label-primary, #222); }',
+			'.wua-card-title::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 14px; border-radius: 2px; transform: translateY(-50%); background: var(--dsw-alias-brand-primary, #4a7cf7); }',
 			'.wua-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }',
-			'.wua-badge { font-size: 11px; line-height: 1.6; padding: 1px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }',
-			'.wua-badge.ok { color: var(--dsw-alias-state-success-primary, #1a7f37); background: color-mix(in srgb, var(--dsw-alias-state-success-primary, #1a7f37) 10%, transparent); border-color: color-mix(in srgb, var(--dsw-alias-state-success-primary, #1a7f37) 32%, transparent); }',
-			'.wua-badge.warn { color: var(--dsw-alias-state-warn-primary, #9a6700); background: color-mix(in srgb, var(--dsw-alias-state-warn-primary, #9a6700) 10%, transparent); border-color: color-mix(in srgb, var(--dsw-alias-state-warn-primary, #9a6700) 32%, transparent); }',
-			'.wua-badge.muted { color: var(--dsw-alias-label-tertiary, #777); background: color-mix(in srgb, var(--dsw-alias-label-tertiary, #777) 8%, transparent); border-color: color-mix(in srgb, var(--dsw-alias-label-tertiary, #777) 22%, transparent); }',
-			'.wua-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }',
+			'.wua-badge { font-size: 11px; line-height: 1.7; padding: 1px 9px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; font-weight: 500; }',
+			'.wua-badge.ok { color: var(--dsw-alias-state-success-primary, #1a7f37); background: color-mix(in srgb, var(--dsw-alias-state-success-primary, #1a7f37) 10%, transparent); border-color: color-mix(in srgb, var(--dsw-alias-state-success-primary, #1a7f37) 28%, transparent); }',
+			'.wua-badge.warn { color: var(--dsw-alias-state-warn-primary, #9a6700); background: color-mix(in srgb, var(--dsw-alias-state-warn-primary, #9a6700) 10%, transparent); border-color: color-mix(in srgb, var(--dsw-alias-state-warn-primary, #9a6700) 28%, transparent); }',
+			'.wua-badge.muted { color: var(--dsw-alias-label-tertiary, #777); background: color-mix(in srgb, var(--dsw-alias-label-tertiary, #777) 8%, transparent); border-color: color-mix(in srgb, var(--dsw-alias-label-tertiary, #777) 20%, transparent); }',
+			'.wua-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }',
+			'.wua-row { display: flex; flex-direction: column; gap: 6px; min-width: 0; }',
+			'.wua-label { font-size: 12.5px; font-weight: 500; color: var(--dsw-alias-label-secondary, #666); }',
+			'.wua-input, .wua-select { box-sizing: border-box; width: 100%; height: 36px; padding: 0 11px; font-size: 13px; color: var(--dsw-alias-label-primary, #222); background: var(--dsw-alias-bg-layer-1, #fff); border: 1px solid var(--dsw-alias-border-l1, #d9d9d9); border-radius: 9px; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }',
+			'.wua-input:hover, .wua-select:hover { border-color: var(--dsw-alias-border-l2, #b8b8b8); }',
+			'.wua-input:focus, .wua-select:focus { border-color: var(--dsw-alias-brand-primary, #4a7cf7); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary, #4a7cf7) 18%, transparent); }',
+			'.wua-input:-webkit-autofill, .wua-input:-webkit-autofill:hover, .wua-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--dsw-alias-label-primary, #222); -webkit-box-shadow: 0 0 0 1000px var(--dsw-alias-bg-layer-1, #fff) inset; box-shadow: 0 0 0 1000px var(--dsw-alias-bg-layer-1, #fff) inset; caret-color: var(--dsw-alias-label-primary, #222); transition: background-color 999999s ease-in-out 0s; }',
+			'.wua-input::placeholder { color: var(--dsw-alias-label-tertiary, #999); }',
+			'.wua-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font-size: 13px; font-weight: 500; line-height: 1.2; cursor: pointer; color: #fff; background: var(--dsw-alias-brand-primary, #4a7cf7); border: 1px solid transparent; border-radius: 9px; transition: filter .15s ease, transform .06s ease, box-shadow .15s ease; box-shadow: 0 2px 8px color-mix(in srgb, var(--dsw-alias-brand-primary, #4a7cf7) 26%, transparent); }',
+			'.wua-btn:hover:not(:disabled) { filter: brightness(1.06); }',
+			'.wua-btn:active:not(:disabled) { transform: translateY(1px); }',
+			'.wua-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }',
+			'.wua-btn.ghost { color: var(--dsw-alias-label-primary, #333); background: transparent; border-color: var(--dsw-alias-border-l1, #d0d0d0); box-shadow: none; }',
+			'.wua-btn.ghost:hover:not(:disabled) { border-color: var(--dsw-alias-border-l2, #999); background: color-mix(in srgb, var(--dsw-alias-label-primary, #333) 5%, transparent); }',
+			'.wua-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }',
 			'.wua-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }',
-			'.wua-sep { height: 1px; background: var(--dsw-alias-border-l1, #e5e5e5); margin: 2px 0; }',
+			'.wua-sep { height: 1px; background: linear-gradient(90deg, transparent, var(--dsw-alias-border-l1, #e5e5e5), transparent); margin: 2px 0; }',
 			'.wua-kv { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }',
-			'.wua-float { position: fixed; right: 24px; bottom: 24px; z-index: 9999; width: min(440px, calc(100vw - 48px)); display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--dsw-alias-border-l2, #999); border-radius: 12px; background: var(--dsw-alias-bg-layer-1, #fff); box-shadow: 0 18px 48px rgba(0, 0, 0, .22); }',
-			'.wua-float-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }',
-			'.wua-float-title { font-size: 13px; font-weight: 600; color: var(--dsw-alias-label-primary, #222); }',
-			'.wua-inline-relay { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--dsw-alias-border-l1, #d9d9d9); }',
-			'.wua-save-fab { position: fixed; right: 24px; bottom: 24px; z-index: 9997; padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer; color: #fff; background: var(--dsw-alias-brand-primary, #4a7cf7); border: none; border-radius: 999px; box-shadow: 0 12px 30px rgba(74, 124, 247, .38); }',
-			'.wua-save-fab:disabled { opacity: .55; cursor: default; }',
-			'.wua-modal-mask { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .45); }',
-			'.wua-modal { width: min(420px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 12px; background: var(--dsw-alias-bg-layer-1, #fff); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }',
-			'.wua-intro { margin: 0; font-size: 13px; line-height: 1.6; color: var(--dsw-alias-label-secondary, #888); }',
-			'.wua-row { display: flex; flex-direction: column; gap: 5px; }',
-			'.wua-label { font-size: 12px; color: var(--dsw-alias-label-secondary, #888); }',
-			'.wua-input { box-sizing: border-box; width: 100%; padding: 7px 9px; font-size: 13px; color: var(--dsw-alias-label-primary, #222); background: var(--dsw-alias-bg-layer-2, #fff); border: 1px solid var(--dsw-alias-border-l1, #ccc); border-radius: 4px; outline: none; }',
-			'.wua-input:focus { border-color: var(--dsw-alias-brand-primary, #4a7cf7); }',
-			'/* 深色模式下浏览器自动填充会把输入框刷成白色/黄色：inset 大阴影 + text-fill-color 回压为当前主题输入底色 */',
-			'.wua-input:-webkit-autofill, .wua-input:-webkit-autofill:hover, .wua-input:-webkit-autofill:focus { -webkit-text-fill-color: var(--dsw-alias-label-primary, #222); -webkit-box-shadow: 0 0 0 1000px var(--dsw-alias-bg-layer-2, #fff) inset; box-shadow: 0 0 0 1000px var(--dsw-alias-bg-layer-2, #fff) inset; caret-color: var(--dsw-alias-label-primary, #222); transition: background-color 999999s ease-in-out 0s; }',
-			'.wua-input::placeholder { color: var(--dsw-alias-label-secondary, #888); }',
-			'.wua-select { box-sizing: border-box; width: 100%; padding: 7px 9px; font-size: 13px; color: var(--dsw-alias-label-primary, #222); background: var(--dsw-alias-bg-layer-2, #fff); border: 1px solid var(--dsw-alias-border-l1, #ccc); border-radius: 4px; outline: none; }',
-			'.wua-btn { align-self: flex-start; padding: 7px 18px; font-size: 13px; cursor: pointer; color: var(--dsw-alias-label-primary, #222); background: var(--dsw-alias-bg-layer-1, #fff); border: 1px solid var(--dsw-alias-border-l2, #999); border-radius: 4px; }',
-			'.wua-btn:hover:not(:disabled) { border-color: var(--dsw-alias-label-secondary, #555); }',
-			'.wua-btn:disabled { opacity: 0.55; cursor: default; }',
-			'.wua-btn.ghost { background: transparent; border-color: var(--dsw-alias-border-l1, #ccc); }',
-			'.wua-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }',
-			'.wua-msg { margin: 0; font-size: 12px; color: var(--dsw-alias-state-success-primary, #1a7f37); }',
-			'.wua-err { margin: 0; font-size: 12px; color: var(--dsw-alias-state-error-primary, #d1242f); }',
-			'.wua-warn { margin: 0; padding: 10px 12px; font-size: 12px; line-height: 1.6; color: var(--dsw-alias-state-warn-primary, #9a6700); background: color-mix(in srgb, var(--dsw-alias-state-warn-primary, #9a6700) 10%, transparent); border: 1px solid var(--dsw-alias-state-warn-primary, #9a6700); border-radius: 4px; }',
-			'.wua-hint { margin: 0; font-size: 12px; line-height: 1.6; color: var(--dsw-alias-label-secondary, #888); border-top: 1px solid var(--dsw-alias-border-l1, #e5e5e5); padding-top: 10px; }',
-			'.wua-audit { display: flex; flex-direction: column; gap: 4px; }',
-			'.wua-audit-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; font-size: 12px; line-height: 1.6; }',
-			'.wua-audit-time { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--dsw-alias-label-secondary, #888); }',
-			'.wua-audit-event { color: var(--dsw-alias-label-primary, #222); }',
+			'.wua-intro { margin: 0; font-size: 13px; line-height: 1.65; color: var(--dsw-alias-label-secondary, #666); }',
+			'.wua-msg, .wua-err, .wua-warn { margin: 0; padding: 9px 12px; font-size: 12.5px; line-height: 1.6; border-radius: 9px; border-left: 3px solid transparent; }',
+			'.wua-msg { color: var(--dsw-alias-state-success-primary, #1a7f37); background: color-mix(in srgb, var(--dsw-alias-state-success-primary, #1a7f37) 9%, transparent); border-left-color: var(--dsw-alias-state-success-primary, #1a7f37); }',
+			'.wua-err { color: var(--dsw-alias-state-error-primary, #d1242f); background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #d1242f) 9%, transparent); border-left-color: var(--dsw-alias-state-error-primary, #d1242f); }',
+			'.wua-warn { color: var(--dsw-alias-state-warn-primary, #9a6700); background: color-mix(in srgb, var(--dsw-alias-state-warn-primary, #9a6700) 9%, transparent); border-left-color: var(--dsw-alias-state-warn-primary, #9a6700); }',
+			'.wua-hint { margin: 0; padding-top: 10px; font-size: 12px; line-height: 1.65; color: var(--dsw-alias-label-secondary, #777); border-top: 1px solid var(--dsw-alias-border-l1, #eee); }',
+			'.wua-audit { display: flex; flex-direction: column; gap: 2px; }',
+			'.wua-audit-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; padding: 6px 8px; font-size: 12px; line-height: 1.55; border-radius: 8px; transition: background .12s ease; }',
+			'.wua-audit-row:hover { background: color-mix(in srgb, var(--dsw-alias-label-primary, #222) 4%, transparent); }',
+			'.wua-audit-time { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--dsw-alias-label-tertiary, #999); }',
+			'.wua-audit-event { color: var(--dsw-alias-label-primary, #222); font-weight: 500; }',
 			'.wua-audit-user { color: var(--dsw-alias-state-business-primary, #4176e6); }',
 			'.wua-audit-ip { color: var(--dsw-alias-label-tertiary, #999); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }',
+			'.wua-inline-relay { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--dsw-alias-brand-primary, #4a7cf7) 35%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--dsw-alias-brand-primary, #4a7cf7) 5%, transparent); }',
+			'.wua-modal-mask { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); animation: wua-fade .16s ease; }',
+			'.wua-modal { width: min(440px, 100%); display: flex; flex-direction: column; gap: 13px; padding: 22px 24px; border: 1px solid var(--dsw-alias-border-l1, #e5e5e5); border-radius: 16px; background: var(--dsw-alias-bg-layer-1, #fff); box-shadow: 0 28px 70px rgba(0,0,0,.35); animation: wua-pop .18s cubic-bezier(.2,.9,.3,1.2); }',
+			'@keyframes wua-fade { from { opacity: 0 } to { opacity: 1 } }',
+			'@keyframes wua-pop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }',
+			'@media (max-width: 640px) { .wua-card { padding: 14px 15px; } .wua-grid { grid-template-columns: 1fr; } .wua-modal { padding: 18px; } }',
 		].join('\n');
 
 		function apply(ctx) {
@@ -250,7 +253,7 @@ window.__ModuleLoader__.load({
 				const [username, setUsername] = react.useState('');
 				const [password, setPassword] = react.useState('');
 				const [confirm, setConfirm] = react.useState('');
-				const [current, setCurrent] = react.useState('');
+
 				const [ttl, setTtl] = react.useState('12');
 				const [msg, setMsg] = react.useState(null);
 				const [busy, setBusy] = react.useState(false);
@@ -279,8 +282,9 @@ window.__ModuleLoader__.load({
 				const [saveOpen, setSaveOpen] = react.useState(false);
 				const [savePw, setSavePw] = react.useState('');
 				const [saveErr, setSaveErr] = react.useState('');
-				const [reauthToken, setReauthToken] = react.useState(null);
-				const [reauthExp, setReauthExp] = react.useState(0);
+				const [verifyAction, setVerifyAction] = react.useState('save');
+				// SSO 复验走独立弹窗：设置页保持打开并显示「等待验证」。
+				const [reauthWaiting, setReauthWaiting] = react.useState(false);
 				// 远程访问信任开关。
 				const [remoteTrustBusy, setRemoteTrustBusy] = react.useState(false);
 				const [remoteTrustMsg, setRemoteTrustMsg] = react.useState(null);
@@ -334,19 +338,35 @@ window.__ModuleLoader__.load({
 				// 读取 OIDC 回调带回来的回执。绑定/登录结束后浏览器会被 302 回应用，
 				// 结果通过 query 传递（oidcbound=1 / oidcerr=...）：因为是整页跳转，
 				// 组件重新挂载时才知道刚才发生了什么。
-				// 从 sessionStorage 恢复 SSO 复验令牌（2 分钟内有效）。
+				// 复验弹窗通过 postMessage 通知；同时轮询 status 兜底（弹窗被拦截/关不掉）。
 				react.useEffect(() => {
-					try {
-						const raw = sessionStorage.getItem('dsh_wua_reauth')
-						if (!raw) return
-						const v = JSON.parse(raw)
-						if (v && typeof v.token === 'string' && v.exp > Date.now()) {
-							setReauthToken(v.token)
-							setReauthExp(v.exp)
+					if (typeof window === 'undefined' || typeof window.addEventListener !== 'function') return;
+					const onMessage = (e) => {
+						if (e.origin !== location.origin) return;
+						if (e.data && e.data.type === 'dsh-wua-reauth' && e.data.ok) {
+							setReauthWaiting(false);
+							api('/dsh-webui-oauth/status').then((s) => {
+								if (s && !s.error) setStatus(s);
+							}).catch(() => {});
 						}
-					} catch (e) { /* ignore */ }
+					};
+					window.addEventListener('message', onMessage);
+					return () => window.removeEventListener('message', onMessage);
 				}, []);
 
+				react.useEffect(() => {
+					if (!reauthWaiting) return;
+					const timer = setInterval(() => {
+						api('/dsh-webui-oauth/status').then((s) => {
+							if (s && s.reauthActive) {
+								setReauthWaiting(false);
+								setStatus(s);
+							}
+						}).catch(() => {});
+					}, 2000);
+					return () => clearInterval(timer);
+				}, [reauthWaiting]);
+
 				react.useEffect(() => {
 					let qs = ''
 					try { qs = String((location && location.search) || '') } catch (e) { qs = '' }
@@ -357,10 +377,7 @@ window.__ModuleLoader__.load({
 					const reauth = p.get('oidcreauth')
 					if (bound === null && err === null && reauth === null) return
 					if (reauth !== null) {
-						try { sessionStorage.setItem('dsh_wua_reauth', JSON.stringify({ token: reauth, exp: Date.now() + 120000 })) } catch (e) { /* ignore */ }
-						setReauthToken(reauth)
-						setReauthExp(Date.now() + 120000)
-						setBindMsg({ kind: 'ok', text: 'SSO 验证成功（2 分钟内有效）。请回到设置页点击「保存设置」。' })
+						setBindMsg({ kind: 'ok', text: 'SSO 验证成功（2 分钟内有效）。请点击「保存设置」继续。' })
 					} else if (bound !== null) {
 						setBindMsg({ kind: 'ok', text: 'OIDC 身份绑定成功。此后只有该身份可通过 SSO 登录。' })
 					} else {
@@ -409,7 +426,7 @@ window.__ModuleLoader__.load({
 						setMsg({ kind: 'err', text: '两次输入的密码不一致' });
 						return;
 					}
-					if (enabled && !credentials.current && !credentials.reauthToken) {
+					if (enabled && !credentials.current && !reauthValid) {
 						setSaveErr('修改认证信息需要验证：请输入当前密码，或使用 SSO 验证。');
 						return;
 					}
@@ -432,7 +449,6 @@ window.__ModuleLoader__.load({
 						username: name,
 						password,
 						current: credentials.current || '',
-						reauthToken: credentials.reauthToken || undefined,
 						ttl: Number(ttl),
 						oidc: oidcPayload,
 					}).then((r) => {
@@ -445,13 +461,9 @@ window.__ModuleLoader__.load({
 							}
 							setPassword('');
 							setConfirm('');
-							setCurrent('');
 							setSaveOpen(false);
 							setSavePw('');
 							setSaveErr('');
-							setReauthToken(null);
-							setReauthExp(0);
-							try { sessionStorage.removeItem('dsh_wua_reauth') } catch (e) { /* ignore */ }
 							api('/dsh-webui-oauth/status').then((s) => {
 								if (s && !s.error) setStatus(s);
 							});
@@ -484,23 +496,27 @@ window.__ModuleLoader__.load({
 					});
 				};
 
-				const onDisable = () => {
+				const doDisable = (auth) => {
 					if (busy) return;
-					if (!current) {
-						setMsg({ kind: 'err', text: '请输入当前密码以禁用认证' });
+					const credentials = auth || {};
+					if (!credentials.current && !reauthValid) {
+						setSaveErr('禁用认证需要验证：请输入当前密码，或使用 SSO 验证。');
 						return;
 					}
 					setBusy(true);
 					setMsg(null);
-					api('/dsh-webui-oauth/disable', { current }).then((r) => {
+					api('/dsh-webui-oauth/disable', { current: credentials.current || '' }).then((r) => {
 						setBusy(false);
 						if (r && r.ok) {
 							setMsg({ kind: 'ok', text: '已禁用认证，所有会话已注销。刷新页面后不再要求登录。' });
-							setCurrent('');
+							setSaveOpen(false);
+							setSavePw('');
+							setSaveErr('');
 							api('/dsh-webui-oauth/status').then((s) => {
 								if (s && !s.error) setStatus(s);
 							}).catch(() => {});
 						} else {
+							setSaveErr('当前密码不正确');
 							setMsg({ kind: 'err', text: '当前密码不正确' });
 						}
 					}).catch(() => {
@@ -563,7 +579,22 @@ window.__ModuleLoader__.load({
 
 				const enabled = Boolean(status && status.enabled);
 				const remoteTrust = Boolean(status && status.remoteTrust);
-				const reauthValid = Boolean(reauthToken && Date.now() < reauthExp);
+				const reauthValid = Boolean(status && status.reauthActive);
+
+				// 顶部「保存设置」/「禁用认证」：需要验证时统一打开弹窗（密码或 SSO）。
+				const onSaveClick = () => {
+					if (!enabled || reauthValid) { onSave({}); return; }
+					setVerifyAction('save');
+					setSaveErr('');
+					setSaveOpen(true);
+				};
+				const onDisableClick = () => {
+					if (!enabled) return;
+					if (reauthValid) { doDisable({}); return; }
+					setVerifyAction('disable');
+					setSaveErr('');
+					setSaveOpen(true);
+				};
 				const intro = status === null
 					? '正在读取认证状态…'
 					: (enabled
@@ -647,8 +678,9 @@ window.__ModuleLoader__.load({
 						patchWarn ? react.createElement('p', { className: 'wua-warn' }, patchWarn) : null,
 						persistNote ? react.createElement('p', { className: 'wua-warn' }, persistNote) : null,
 						react.createElement('div', { className: 'wua-actions' },
+							react.createElement('button', { className: 'wua-btn', disabled: busy || status === null, onClick: onSaveClick }, busy ? '保存中…' : '保存设置'),
 							enabled ? react.createElement('button', { className: 'wua-btn ghost', disabled: busy || status === null, onClick: onLogout }, '退出登录') : null,
-							enabled ? react.createElement('button', { className: 'wua-btn ghost', disabled: busy || status === null, onClick: onDisable }, '禁用认证') : null,
+							enabled ? react.createElement('button', { className: 'wua-btn ghost', disabled: busy || status === null, onClick: onDisableClick }, '禁用认证') : null,
 						),
 					]),
 					card('账号与密码', [], [
@@ -678,10 +710,6 @@ window.__ModuleLoader__.load({
 								react.createElement('input', { className: 'wua-input', type: 'password', value: confirm, onChange: (e) => setConfirm(e.target.value) }),
 							),
 						),
-						enabled ? react.createElement('div', { className: 'wua-row' },
-							react.createElement('label', { className: 'wua-label' }, '当前密码（修改或禁用认证需验证）'),
-							react.createElement('input', { className: 'wua-input', type: 'password', value: current, onChange: (e) => setCurrent(e.target.value) }),
-						) : null,
 						msg ? react.createElement('div', { className: msg.kind === 'ok' ? 'wua-msg' : 'wua-err' }, msg.text) : null,
 					]),
 					card('OIDC 单点登录', [
@@ -807,40 +835,42 @@ window.__ModuleLoader__.load({
 									)),
 								)),
 					]),
-					react.createElement('button', {
-						className: 'wua-save-fab',
-						disabled: busy || status === null,
-						onClick: () => {
-							if (!enabled) { onSave({}); return; }
-							if (reauthValid) { onSave({ reauthToken }); return; }
-							setSaveErr('');
-							setSaveOpen(true);
-						},
-					}, busy ? '保存中…' : '保存设置'),
 					saveOpen ? react.createElement('div', { className: 'wua-modal-mask' },
 						react.createElement('div', { className: 'wua-modal' },
-							react.createElement('h4', { className: 'wua-card-title' }, '验证后保存'),
+							react.createElement('h4', { className: 'wua-card-title' }, verifyAction === 'disable' ? '验证后禁用' : '验证后保存'),
 							react.createElement('p', { className: 'wua-hint', style: { borderTop: 'none', paddingTop: 0 } },
 								reauthValid
-									? '已通过 SSO 验证（2 分钟内有效），可直接保存。'
-									: '修改认证配置需要验证当前身份：输入当前密码，或使用 SSO 验证。'),
+									? '已通过 SSO 验证（2 分钟内有效），可直接继续。'
+									: reauthWaiting
+										? '等待验证…请在打开的窗口中完成 SSO 登录，本页会保持打开。'
+										: '该操作需要验证当前身份：输入当前密码，或使用 SSO 验证。'),
 							reauthValid ? null : react.createElement('div', { className: 'wua-row' },
 								react.createElement('label', { className: 'wua-label' }, '当前密码'),
 								react.createElement('input', { className: 'wua-input', type: 'password', value: savePw, autoComplete: 'current-password', onChange: (e) => setSavePw(e.target.value) }),
 							),
 							saveErr ? react.createElement('p', { className: 'wua-err' }, saveErr) : null,
 							react.createElement('div', { className: 'wua-actions' },
-								react.createElement('button', { className: 'wua-btn', disabled: busy, onClick: () => {
-									if (reauthValid) { onSave({ reauthToken }); return; }
-									if (!savePw) { setSaveErr('请输入当前密码'); return; }
-									onSave({ current: savePw });
-								} }, busy ? '保存中…' : '验证并保存'),
+								react.createElement('button', { className: 'wua-btn', disabled: busy || reauthWaiting, onClick: () => {
+									if (!reauthValid && !savePw) { setSaveErr('请输入当前密码'); return; }
+									const auth = reauthValid ? {} : { current: savePw };
+									if (verifyAction === 'disable') doDisable(auth); else onSave(auth);
+								} }, busy ? '处理中…' : (verifyAction === 'disable' ? '验证并禁用' : '验证并保存')),
 								react.createElement('button', { className: 'wua-btn ghost', disabled: busy, onClick: () => setSaveOpen(false) }, '取消'),
 							),
 							(status && status.oidc && status.oidc.enabled && status.oidc.bound)
-								? react.createElement('button', { className: 'wua-btn ghost', disabled: busy, onClick: () => {
-									location.href = '/dsh-webui-oauth/oidc/reauth?base=' + encodeURIComponent(location.origin || '');
-								} }, '使用 SSO 验证')
+								? react.createElement('button', {
+									className: 'wua-btn ghost',
+									disabled: busy,
+									onClick: () => {
+										const url = '/dsh-webui-oauth/oidc/reauth?base=' + encodeURIComponent(location.origin || '') + '&popup=1';
+										const win = window.open(url, 'dsh-wua-reauth', 'width=520,height=720');
+										if (!win) { location.href = url; return; }
+										setReauthWaiting(true);
+									},
+								}, reauthWaiting ? '重新打开 SSO 验证窗口' : '使用 SSO 验证（新窗口）')
+								: null,
+							reauthWaiting
+								? react.createElement('p', { className: 'wua-msg' }, '等待验证…')
 								: null,
 						),
 					) : null,

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "dsh-webui-oauth",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "type": "module",
   "main": "index.js",
   "scripts": {
-    "test": "node test/redirect-scheme.test.mjs && node test/proxy-host.test.mjs && node test/trusted-origin.test.mjs && node test/oidc.test.mjs && node test/oidc-state-ttl.test.mjs && node test/set-cookie-multi.test.mjs && node test/oidc-integration.test.mjs && node test/oidc-config-store.test.mjs && node test/adopt-data-dir.test.mjs && node test/oidc-ec.test.mjs && node test/jwks-refresh.test.mjs && node test/oidc-bind.test.mjs && node test/client-bundle-id.test.mjs && node test/client-prefill.test.mjs && node test/displace-original.test.mjs && node test/oidc-redirect-matrix.test.mjs && node test/gate-default-deny.test.mjs && node test/fallback-shape.test.mjs && node test/desktop-marker.test.mjs && node test/audit-null.test.mjs && node test/remote-trust.test.mjs && node test/oauth-relay.test.mjs"
+    "test": "node test/redirect-scheme.test.mjs && node test/proxy-host.test.mjs && node test/trusted-origin.test.mjs && node test/oidc.test.mjs && node test/oidc-state-ttl.test.mjs && node test/set-cookie-multi.test.mjs && node test/oidc-integration.test.mjs && node test/oidc-config-store.test.mjs && node test/adopt-data-dir.test.mjs && node test/oidc-ec.test.mjs && node test/jwks-refresh.test.mjs && node test/oidc-bind.test.mjs && node test/client-bundle-id.test.mjs && node test/client-prefill.test.mjs && node test/displace-original.test.mjs && node test/oidc-redirect-matrix.test.mjs && node test/gate-default-deny.test.mjs && node test/fallback-shape.test.mjs && node test/desktop-marker.test.mjs && node test/audit-null.test.mjs && node test/remote-trust.test.mjs && node test/oauth-relay.test.mjs && node test/lifecycle.test.mjs"
   },
   "exports": {
     ".": "./index.js",