@chatcode/cco-better-sidebar 0.18.0-rc.4 → 0.18.0-rc.5

package/src/login-page-script.ts

@@ -0,0 +1,107 @@
+/** Standalone sign-in recovery; each document starts once and always keeps a usable reopen action. */
+export const CHATCODE_LOGIN_PAGE_SCRIPT = String.raw`
+(() => {
+  const message = document.getElementById('message');
+  const button = document.getElementById('login');
+  const fallback = document.getElementById('login-fallback');
+  const link = document.getElementById('login-link');
+  const current = new URL(location.href);
+  const returnTo = (() => {
+    const value = current.searchParams.get('return');
+    if (!value || !value.startsWith('/') || value.startsWith('//')) return '/';
+    const target = new URL(value, location.origin);
+    return target.origin === location.origin ? target.pathname + target.search + target.hash : '/';
+  })();
+  let busy = false, checking = false, attempted = false, recheck = false, attempt, popup;
+  const call = async name => {
+    const response = await fetch('/sidebar/api/' + name, {
+      method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}',
+    });
+    const data = await response.json();
+    if (!response.ok || !data.ok) throw new Error('操作失败');
+    return data.value;
+  };
+  const showMessage = (text, error = false) => {
+    message.textContent = text;
+    message.classList.toggle('error', error);
+  };
+  async function login() {
+    if (busy) return;
+    attempted = true;
+    busy = true;
+    button.disabled = true;
+    button.textContent = '正在打开登录页…';
+    let tab = null;
+    try { tab = window.open('', '_blank'); if (tab) tab.opener = null; } catch {}
+    try {
+      if (!attempt) {
+        const started = await call('chatcode.start');
+        const url = new URL(started.url);
+        if (!['http:', 'https:'].includes(url.protocol) || typeof started.sessionId !== 'string') throw new Error('登录地址无效');
+        attempt = { sessionId: started.sessionId, url: url.href };
+      }
+      link.href = attempt.url;
+      link.textContent = attempt.url;
+      fallback.hidden = false;
+      if (tab && !tab.closed) {
+        try { tab.location.href = attempt.url; popup = tab; } catch { try { tab.close(); } catch {} }
+      }
+      showMessage('请在登录页完成登录；若网页已关闭，可随时重新打开。');
+    } catch {
+      try { if (tab) tab.close(); } catch {}
+      showMessage('登录页打开失败，请重试。', true);
+    } finally {
+      busy = false;
+      button.disabled = false;
+      button.textContent = attempt ? '重新打开登录页' : '去登录';
+    }
+  }
+  async function status() {
+    if (checking || busy) return;
+    checking = true;
+    const observedAttempt = attempt, observedStarted = attempted;
+    try {
+      const state = await call('chatcode.status');
+      if (busy || attempt !== observedAttempt || attempted !== observedStarted) return;
+      if (state.available && state.validation === 'valid' && !state.expired) {
+        try { if (popup) popup.close(); window.focus(); } catch {}
+        location.replace(returnTo);
+        return;
+      }
+      if (!state.available) {
+        recheck = true;
+        button.textContent = '重新检测';
+        showMessage('登录服务暂不可用，请稍后重试。', true);
+        return;
+      }
+      if (state.configured && state.validation === 'unavailable') {
+        recheck = true;
+        button.textContent = '重新检测';
+        showMessage('暂时无法验证已有账号，请检查网络后重新检测。', true);
+        return;
+      }
+      recheck = false;
+      button.textContent = attempt ? '重新打开登录页' : '去登录';
+      if (attempt && (state.login?.sessionId !== attempt.sessionId || state.login.state !== 'pending')) {
+        attempt = undefined;
+        fallback.hidden = true;
+        link.removeAttribute('href');
+        link.textContent = '';
+        button.textContent = '去登录';
+        showMessage('登录请求已失效，请重新登录。');
+      }
+      if (!attempted) await login();
+    } catch {
+      recheck = true;
+      button.textContent = '重新检测';
+      showMessage('无法读取登录状态，请稍后重试。', true);
+    } finally {
+      checking = false;
+      if (!busy) button.disabled = false;
+    }
+  }
+  button.addEventListener('click', () => { void (recheck ? status() : login()); });
+  void status();
+  setInterval(() => { void status(); }, 2000);
+})();
+`

package/src/login-route.ts

@@ -2,14 +2,17 @@ import { readFile } from 'node:fs/promises'
 import { dirname, join } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import type { Context, SidebarHttpRequest, SidebarHttpResponse } from './context-types.ts'
+import { CHATCODE_LOGIN_PAGE_SCRIPT } from './login-page-script.ts'
 
 const assetPath = join(dirname(fileURLToPath(import.meta.url)), '..', 'assets', 'logo.svg')
 
-function page(logo: string): string {
+/** Render the standalone login gate with one automatic attempt and persistent manual recovery. */
+export function renderChatcodeLoginPage(logo: string): string {
   return `<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>请登录 ChatCode</title><style>
 *{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;display:grid;place-items:center;font-family:Inter,"Microsoft YaHei",system-ui,sans-serif;color:#172b4d;background:radial-gradient(circle at 18% 18%,#e5edff 0,transparent 30rem),linear-gradient(135deg,#edf2fb,#dfe8f7)}.card{width:min(490px,calc(100vw - 40px));padding:34px 44px 36px;border:1px solid #dce4ef;border-radius:18px;background:#fff;box-shadow:0 20px 48px rgba(36,62,103,.18),0 2px 8px rgba(36,62,103,.06)}.brand{display:flex;align-items:center;justify-content:center;gap:12px;padding-bottom:27px;border-bottom:1px solid #edf0f5}.brand img{width:34px;height:34px}.brand strong{font-size:22px;letter-spacing:-.02em}.content{padding-top:40px;text-align:center}.content h1{margin:0;font-size:28px;line-height:1.3;font-weight:650}.content p{min-height:24px;margin:12px 0 30px;color:#71809a;font-size:14px;line-height:1.7}.action{width:100%;min-height:46px;border:0;border-radius:8px;background:#9B0B09;color:#fff;font:600 15px/1 Inter,"Microsoft YaHei",sans-serif;cursor:pointer;box-shadow:0 8px 18px rgba(155,11,9,.25);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.action:hover:not(:disabled){transform:translateY(-2px);background:#b20d0a;box-shadow:0 12px 24px rgba(155,11,9,.38)}.action:focus-visible{outline:3px solid #f0b7b5;outline-offset:3px}.action:disabled{cursor:default;opacity:.7}.error{color:#b42318}@media(max-width:480px){.card{padding:30px 26px}.content{padding-top:32px}}
-</style></head><body><main class="card"><div class="brand"><img src="data:image/svg+xml;base64,${logo}" alt=""><strong>ChatCode</strong></div><section class="content"><h1>请登录 ChatCode</h1><p id="message">请登录后继续使用。</p><button id="login" class="action" type="button">去登录</button></section></main><script>
-const message=document.getElementById('message'),button=document.getElementById('login');const current=new URL(location.href);const returnTo=(()=>{const v=current.searchParams.get('return');return v&&v.startsWith('/')&&!v.startsWith('//')?v:'/'} )();const call=async(name,body={})=>{const r=await fetch('/sidebar/api/'+name,{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify(body)});const d=await r.json();if(!r.ok||!d.ok)throw new Error(d.error?.message||'操作失败');return d.value};let waiting=false;async function status(){try{const s=await call('chatcode.status');if(s.available&&s.validation==='valid'&&!s.expired){location.replace(returnTo);return}if(waiting)message.textContent='正在等待浏览器完成登录…'}catch{message.textContent='无法读取登录状态，请稍后重试。';message.classList.add('error')}}async function login(){const tab=window.open('','_blank');button.disabled=true;button.textContent='正在打开登录页…';message.classList.remove('error');try{const s=await call('chatcode.start');waiting=true;if(tab&&!tab.closed){tab.opener=null;tab.location.href=s.url;message.textContent='请在新打开的浏览器窗口完成登录…'}else{message.innerHTML='浏览器拦截了登录窗口，请 <a href="'+s.url+'" target="_blank" rel="noopener noreferrer">打开登录页</a> 后完成登录。'}}catch{try{tab&&tab.close()}catch{}button.disabled=false;button.textContent='去登录';message.textContent='登录页打开失败，请重试。';message.classList.add('error')}}button.addEventListener('click',login);status();setInterval(status,2000);
+.login-fallback{margin:18px 0 0;color:#71809a;font-size:12px;line-height:1.7;overflow-wrap:anywhere}.login-fallback a{display:block;margin-top:4px;color:#315da8;text-underline-offset:3px}
+</style></head><body><main class="card"><div class="brand"><img src="data:image/svg+xml;base64,${logo}" alt=""><strong>ChatCode</strong></div><section class="content"><h1>请登录 ChatCode</h1><p id="message" aria-live="polite">正在检查登录状态…</p><button id="login" class="action" type="button" disabled>正在检查登录状态…</button><div id="login-fallback" class="login-fallback" hidden>若登录网页已关闭或未弹出，可再次访问：<a id="login-link" target="_blank" rel="noopener noreferrer"></a></div></section></main><script>
+${CHATCODE_LOGIN_PAGE_SCRIPT}
 </script></body></html>`
 }
 
@@ -20,7 +23,7 @@ export function registerLoginRoute(ctx: Context, fence: (req: SidebarHttpRequest
     try {
       const logo = (await readFile(assetPath)).toString('base64')
       res.writeHead(200, { 'content-type': 'text/html; charset=utf-8', 'cache-control': 'no-store', 'content-security-policy': "default-src 'self'; img-src 'self' data:; style-src 'unsafe-inline'; script-src 'unsafe-inline'" })
-      res.end(req.method === 'HEAD' ? undefined : page(logo))
+      res.end(req.method === 'HEAD' ? undefined : renderChatcodeLoginPage(logo))
     } catch { res.writeHead(500); res.end('login page unavailable') }
   } })
 }