From 90eba221d45b20c97b94b75f3873568333824093 Mon Sep 17 00:00:00 2001
From: "tao.chen" <93983997+taochen-ct@users.noreply.github.com>
Date: Mon, 13 Jul 2026 14:08:16 +0800
Subject: [PATCH] =?UTF-8?q?admin:=20token=20=E8=BE=93=E5=85=A5=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E5=BC=B9=E7=AA=97=E6=A8=A1=E5=BC=8F=20(modal)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

把 header 内嵌的 token 输入框 + Save 按钮拆掉，改用原生 <dialog>
弹窗。三种触发场景: 首访无 token 自动弹、API 401 自动弹 (清旧 token
后弹带错误信息)、用户主动点 Set Token 按钮弹。无有效 token 时阻止
Escape 关闭 (cancel 事件 preventDefault), 防止误操作丢失输入。
localStorage 键名 adminToken 不变, 零迁移成本。401 路径在 api()
内部清 token + 弹窗 + 记录 pendingRetry 闭包, 用户保存新 token 后
自动重试失败请求。

设计取舍:
  - 选原生 <dialog> 而非自造 div + JS, 自带 modal/背板/焦点陷阱/a11y
  - 选 <form> + preventDefault 而非 method='dialog', 避免自动关闭
  - CSS 全部复用现有 dark theme 变量, 0 视觉割裂
  - 0 新依赖 (纯 HTML5 + 原生 JS)

验证:
  - go build / go vet / go test 全部通过
  - 端到端 curl 确认新元素嵌入、旧元素删除、401/200 路径正常
  - router_test.go 无回归 (HTML 改动不涉及 Go)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 internal/admin/web/cluster.html | 113 ++++++++++++++++++++++++++++----
 1 file changed, 101 insertions(+), 12 deletions(-)
diff --git a/internal/admin/web/cluster.html b/internal/admin/web/cluster.html
index b17c95c..f6b13d5 100644
--- a/internal/admin/web/cluster.html
+++ b/internal/admin/web/cluster.html
@@ -91,15 +91,29 @@
     .form-actions { display: flex; gap: .5rem; margin-top: 1rem; }
     .bool { flex-direction: row; align-items: center; gap: .5rem; }
     .bool input { width: auto; }
+    dialog.modal {
+      border: 1px solid var(--border);
+      background: var(--panel);
+      color: var(--text);
+      border-radius: 6px;
+      padding: 1.5rem;
+      min-width: 360px;
+      max-width: 90vw;
+    }
+    dialog.modal::backdrop { background: rgba(0, 0, 0, .65); }
+    dialog.modal h2 { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--accent); }
+    dialog.modal form { display: flex; flex-direction: column; gap: .75rem; }
+    dialog.modal label { color: var(--muted); font-size: .9rem; }
+    dialog.modal input { width: 100%; }
+    .modal-error { color: var(--danger); font-size: .9rem; margin: 0; }
+    .modal-actions { display: flex; gap: .5rem; justify-content: flex-end; }
   </style>
 </head>
 <body>
   <header>
     <h1>spark-mcp-go Admin</h1>
     <div class='auth'>
-      <label for='token'>Token</label>
-      <input id='token' type='password' placeholder='Bearer token' autocomplete='off'>
-      <button id='save-token'>Save</button>
+      <button id='set-token' class='secondary'>Set Token</button>
       <button id='logout' class='danger'>Logout</button>
     </div>
   </header>
@@ -199,12 +213,25 @@
     </section>
   </main>
 
+  <dialog id='token-modal' class='modal'>
+    <h2>Admin Token Required</h2>
+    <p id='modal-error' class='modal-error hidden'></p>
+    <form id='token-form'>
+      <label for='modal-token'>Bearer token</label>
+      <input id='modal-token' type='password' autocomplete='off' required>
+      <div class='modal-actions'>
+        <button type='submit' id='modal-save'>Save</button>
+        <button type='button' id='modal-cancel' class='secondary hidden'>Cancel</button>
+      </div>
+    </form>
+  </dialog>
+
   <script>
     const $ = (sel) => document.querySelector(sel);
     const API = '/admin';
 
-    const tokenInput = $('#token');
-    tokenInput.value = localStorage.getItem('adminToken') || '';
+    let pendingRetry = null;
+    let cancelBlocker = null;
 
     function headers() {
       return {
@@ -219,11 +246,67 @@
       el.classList.toggle('hidden', !msg);
     }
 
+    function showModalError(msg) {
+      const el = $('#modal-error');
+      el.textContent = msg || '';
+      el.classList.toggle('hidden', !msg);
+    }
+
+    function openTokenModal(opts = {}) {
+      const dialog = $('#token-modal');
+      const cancelBtn = $('#modal-cancel');
+      showModalError(opts.error || '');
+      cancelBtn.classList.toggle('hidden', !opts.allowCancel);
+      if (cancelBlocker) {
+        dialog.removeEventListener('cancel', cancelBlocker);
+        cancelBlocker = null;
+      }
+      if (!opts.allowCancel) {
+        cancelBlocker = (e) => e.preventDefault();
+        dialog.addEventListener('cancel', cancelBlocker);
+      }
+      dialog.showModal();
+      $('#modal-token').focus();
+    }
+
+    function closeTokenModal() {
+      const dialog = $('#token-modal');
+      showModalError('');
+      if (cancelBlocker) {
+        dialog.removeEventListener('cancel', cancelBlocker);
+        cancelBlocker = null;
+      }
+      dialog.close();
+      $('#modal-token').value = '';
+    }
+
+    function saveTokenFromModal(e) {
+      e.preventDefault();
+      localStorage.setItem('adminToken', $('#modal-token').value.trim());
+      closeTokenModal();
+      if (pendingRetry) {
+        const fn = pendingRetry;
+        pendingRetry = null;
+        fn();
+      } else {
+        loadClusters();
+      }
+    }
+
     async function api(method, path, body) {
       const opts = { method, headers: headers() };
       if (body !== undefined) opts.body = JSON.stringify(body);
       const res = await fetch(API + path, opts);
       if (!res.ok) {
+        if (res.status === 401) {
+          localStorage.removeItem('adminToken');
+          pendingRetry = () => api(method, path, body);
+          openTokenModal({
+            error: 'Token rejected by server (401). Enter a valid token.',
+            allowCancel: false
+          });
+          throw new Error('401 Unauthorized');
+        }
         let detail = res.statusText;
         try {
           const j = await res.json();
@@ -368,16 +451,18 @@
     $('#refresh').addEventListener('click', loadClusters);
     $('#btn-cancel').addEventListener('click', hideForm);
 
-    $('#save-token').addEventListener('click', () => {
-      localStorage.setItem('adminToken', tokenInput.value.trim());
-      loadClusters();
-    });
+    $('#set-token').addEventListener('click', () => openTokenModal({ allowCancel: true }));
     $('#logout').addEventListener('click', () => {
       localStorage.removeItem('adminToken');
-      tokenInput.value = '';
-      showError('Token cleared; reload the page after supplying a new token.');
+      openTokenModal({
+        error: 'Token cleared. Enter a new token to continue.',
+        allowCancel: false
+      });
     });
 
+    $('#token-form').addEventListener('submit', saveTokenFromModal);
+    $('#modal-cancel').addEventListener('click', closeTokenModal);
+
     $('#cluster-form').addEventListener('submit', async (e) => {
       e.preventDefault();
       showError('');
@@ -395,7 +480,11 @@
       }
     });
 
-    loadClusters();
+    if (!localStorage.getItem('adminToken')) {
+      openTokenModal({ allowCancel: false });
+    } else {
+      loadClusters();
+    }
   </script>
 </body>
 </html>
