Add T22: login/register UI on live.html and dance.html

Reuses the existing nickname-modal/.nickname-box comic-panel look (a new .auth-error line and a plain-text auth-link-btn are the only new CSS) rather than inventing a second visual language. A "登录" topbar button opens the modal (email/password, toggle between login/ register, cancel); once logged in it becomes "<nickname or email prefix> · 退出". Entirely optional, same as T19-T21 designed it: the modal's only trigger is that one button, nothing forces it open, and free browsing/ voting keeps working on the plain viewer_uid cookie exactly as before. Manually verified end to end against the real running server (Chrome): register auto-logs in, an existing viewer_nickname cookie bound onto the new account and shown in the button, logout reverts the UI. auth-ui.test.js is a structural check (id/getElementById consistency, all four /api/auth/* endpoints wired, modal starts hidden) since no DOM/browser tooling is available to `node --test` here to render the pages for a full interaction test. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011Deddn3sM3oQnmvqWSMb4y

Add T22: login/register UI on live.html and dance.html
Reuses the existing nickname-modal/.nickname-box comic-panel look (a new .auth-error line and a plain-text auth-link-btn are the only new CSS) rather than inventing a second visual language. A "登录" topbar button opens the modal (email/password, toggle between login/ register, cancel); once logged in it becomes "<nickname or email prefix> · 退出". Entirely optional, same as T19-T21 designed it: the modal's only trigger is that one button, nothing forces it open, and free browsing/ voting keeps working on the plain viewer_uid cookie exactly as before. Manually verified end to end against the real running server (Chrome): register auto-logs in, an existing viewer_nickname cookie bound onto the new account and shown in the button, logout reverts the UI. auth-ui.test.js is a structural check (id/getElementById consistency, all four /api/auth/* endpoints wired, modal starts hidden) since no DOM/browser tooling is available to `node --test` here to render the pages for a full interaction test. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011Deddn3sM3oQnmvqWSMb4y
yibo
1 parent 3ef2f7b0
Showing 4 changed files with 250 additions and 0 deletions
auth-ui.test.js
dance.html
live.css
live.html
+// Structural check for T22's login/register UI in live.html and dance.html
+// (dev-plan-3.md). No browser/DOM tooling is available to `node --test`
+// here, so this can't render the pages — but it catches the easy mistake
+// in this style of plain-HTML+inline-JS codebase: an element id renamed in
+// the markup without updating the matching getElementById() call, which
+// would otherwise fail silently in a real browser (getElementById returns
+// null, then the first click throws and nothing visibly explains why).
+// The actual end-to-end behavior (register/login/logout, nickname binding
+// from an existing viewer_uid cookie) was verified manually in a real
+// browser against the running server; see the session notes.
+const test = require("node:test");
+const assert = require("node:assert/strict");
+const fs = require("node:fs");
+const path = require("node:path");
+
+const AUTH_IDS = ["authBtn", "authModal", "authTitle", "authEmail", "authPassword", "authError", "authSubmitBtn", "authToggleBtn", "authCloseBtn"];
+// register/login share one call site (`` `/api/auth/${authMode}` ``, authMode
+// is "register" or "login"), so check for that template plus the two literal
+// endpoints separately, rather than four literal path strings.
+const AUTH_ENDPOINTS = ["/api/auth/${authMode}", "/api/auth/logout", "/api/auth/me"];
+
+for (const page of ["live.html", "dance.html"]) {
+  test(`${page}: every auth element id used in the script is actually declared in the markup`, () => {
+    const html = fs.readFileSync(path.join(__dirname, page), "utf8");
+    for (const id of AUTH_IDS) {
+      assert.match(html, new RegExp(`id="${id}"`), `markup is missing id="${id}"`);
+      assert.match(html, new RegExp(`getElementById\\("${id}"\\)`), `script never looks up #${id}`);
+    }
+  });
+
+  test(`${page}: wires up all four auth endpoints`, () => {
+    const html = fs.readFileSync(path.join(__dirname, page), "utf8");
+    for (const endpoint of AUTH_ENDPOINTS) {
+      assert.ok(html.includes(endpoint), `script never calls ${endpoint}`);
+    }
+  });
+
+  test(`${page}: the auth modal is hidden by default (must not force a login gate)`, () => {
+    const html = fs.readFileSync(path.join(__dirname, page), "utf8");
+    assert.match(html, /<div class="nickname-modal" id="authModal" hidden>/, "authModal must start hidden — logging in is optional, never a forced gate");
+  });
+}
@@ -20,6 +20,7 @@
     <div class="spacer"></div>
     <div class="watching" id="watchingCount" hidden></div>
     <button class="topbar-pill" id="muteBtn">🔇 静音</button>
+    <button class="topbar-pill" id="authBtn">登录</button>
     <a class="topbar-pill" href="live.html">AI 短剧频道 →</a>
   </header>
  
@@ -79,6 +80,19 @@
   </div>
 </div>
  
+<!-- 登录完全可选，不阻塞免费模式一的任何现有流程（dev-plan-3.md T22） -->
+<div class="nickname-modal" id="authModal" hidden>
+  <div class="nickname-box">
+    <div class="nickname-title" id="authTitle">登录</div>
+    <input type="email" id="authEmail" placeholder="邮箱" />
+    <input type="password" id="authPassword" placeholder="密码（至少8位）" />
+    <div class="auth-error" id="authError" hidden></div>
+    <button id="authSubmitBtn">登录</button>
+    <button class="auth-link-btn" id="authToggleBtn">没有账号？去注册</button>
+    <button class="auth-link-btn" id="authCloseBtn">取消</button>
+  </div>
+</div>
+
 <script>
 let wardrobe = [];
 let leftTab = "wardrobe";
@@ -169,6 +183,88 @@ function ensureIdentity() {
   });
 }
  
+// ---- account login (dev-plan-3.md T19-T22) — entirely optional. Free
+// wardrobe picks/voting keep using the plain viewer_uid cookie above
+// exactly as before; logging in just also ties that identity to an
+// account server-side (T21) and, on login, re-syncs viewer_uid/
+// viewer_nickname onto this browser so switching devices or clearing
+// cookies doesn't silently start a fresh anonymous identity.
+const authBtn = document.getElementById("authBtn");
+const authModal = document.getElementById("authModal");
+const authTitle = document.getElementById("authTitle");
+const authEmail = document.getElementById("authEmail");
+const authPassword = document.getElementById("authPassword");
+const authError = document.getElementById("authError");
+const authSubmitBtn = document.getElementById("authSubmitBtn");
+const authToggleBtn = document.getElementById("authToggleBtn");
+const authCloseBtn = document.getElementById("authCloseBtn");
+let authMode = "login";
+
+function renderAuthButton(user) {
+  authBtn.textContent = user ? `${user.nickname || user.email.split("@")[0]} · 退出` : "登录";
+  authBtn.dataset.loggedIn = user ? "1" : "";
+}
+
+async function refreshAuthState() {
+  try {
+    const res = await fetch("/api/auth/me");
+    if (res.ok) {
+      renderAuthButton(await res.json());
+      return;
+    }
+  } catch {}
+  renderAuthButton(null);
+}
+
+function openAuthModal(mode) {
+  authMode = mode;
+  authTitle.textContent = mode === "login" ? "登录" : "注册";
+  authSubmitBtn.textContent = mode === "login" ? "登录" : "注册";
+  authToggleBtn.textContent = mode === "login" ? "没有账号？去注册" : "已有账号？去登录";
+  authError.hidden = true;
+  authEmail.value = "";
+  authPassword.value = "";
+  authModal.hidden = false;
+  authEmail.focus();
+}
+
+authBtn.addEventListener("click", async () => {
+  if (authBtn.dataset.loggedIn) {
+    await fetch("/api/auth/logout", { method: "POST" });
+    await refreshAuthState();
+    return;
+  }
+  openAuthModal("login");
+});
+authToggleBtn.addEventListener("click", () => openAuthModal(authMode === "login" ? "register" : "login"));
+authCloseBtn.addEventListener("click", () => {
+  authModal.hidden = true;
+});
+async function submitAuth() {
+  const email = authEmail.value.trim();
+  const password = authPassword.value;
+  authError.hidden = true;
+  const res = await fetch(`/api/auth/${authMode}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, password }),
+  });
+  const body = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    authError.textContent = body.error || "出错了，请重试";
+    authError.hidden = false;
+    return;
+  }
+  authModal.hidden = true;
+  await refreshAuthState();
+}
+authSubmitBtn.addEventListener("click", submitAuth);
+authPassword.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") submitAuth();
+});
+
+refreshAuthState();
+
 muteBtn.addEventListener("click", () => {
   player.muted = !player.muted;
   muteBtn.textContent = player.muted ? "🔇 静音" : "🔈 有声";
@@ -445,6 +445,21 @@ body {
 }
 .nickname-box button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
  
+/* ---- account login modal (dev-plan-3.md T22) — reuses .nickname-modal/
+   .nickname-box, just two extra bits: an error line and a plain-text
+   toggle/cancel button instead of the full comic-box button look. ---- */
+.auth-error { color: #c0392b; font: bold 13px Tahoma, sans-serif; }
+.nickname-box button.auth-link-btn {
+  background: none;
+  border: none;
+  box-shadow: none;
+  text-decoration: underline;
+  padding: 0;
+  font: bold 13px Tahoma, sans-serif;
+  cursor: pointer;
+}
+.nickname-box button.auth-link-btn:active { transform: none; }
+
 /* ---- mobile sub-tabs (live mode only) ---- */
 .mobile-subtabs {
   display: none;
@@ -22,6 +22,7 @@
     <div class="watching" id="watchingCount" hidden></div>
     <button class="topbar-pill" id="chatToggleBtn">✕ 聊天</button>
     <button class="topbar-pill" id="muteBtn">🔈 有声</button>
+    <button class="topbar-pill" id="authBtn">登录</button>
     <a class="topbar-pill" href="dance.html">换装跳舞 →</a>
   </header>
  
@@ -83,6 +84,19 @@
   </div>
 </div>
  
+<!-- 登录完全可选，不阻塞免费模式一的任何现有流程（dev-plan-3.md T22） -->
+<div class="nickname-modal" id="authModal" hidden>
+  <div class="nickname-box">
+    <div class="nickname-title" id="authTitle">登录</div>
+    <input type="email" id="authEmail" placeholder="邮箱" />
+    <input type="password" id="authPassword" placeholder="密码（至少8位）" />
+    <div class="auth-error" id="authError" hidden></div>
+    <button id="authSubmitBtn">登录</button>
+    <button class="auth-link-btn" id="authToggleBtn">没有账号？去注册</button>
+    <button class="auth-link-btn" id="authCloseBtn">取消</button>
+  </div>
+</div>
+
 <script>
 let mode = "live";
 let clips = []; // browse mode: full list
@@ -247,6 +261,89 @@ chatInput.addEventListener(&quot;focus&quot;, () =&gt; ensureIdentity());
  
 updateNicknameLabel();
  
+// ---- account login (dev-plan-3.md T19-T22) — entirely optional. Free
+// chat/voting keeps using the plain viewer_uid cookie above exactly as
+// before; logging in just also ties that identity to an account
+// server-side (T21) and, on login, re-syncs viewer_uid/viewer_nickname
+// onto this browser so switching devices or clearing cookies doesn't
+// silently start a fresh anonymous identity.
+const authBtn = document.getElementById("authBtn");
+const authModal = document.getElementById("authModal");
+const authTitle = document.getElementById("authTitle");
+const authEmail = document.getElementById("authEmail");
+const authPassword = document.getElementById("authPassword");
+const authError = document.getElementById("authError");
+const authSubmitBtn = document.getElementById("authSubmitBtn");
+const authToggleBtn = document.getElementById("authToggleBtn");
+const authCloseBtn = document.getElementById("authCloseBtn");
+let authMode = "login";
+
+function renderAuthButton(user) {
+  authBtn.textContent = user ? `${user.nickname || user.email.split("@")[0]} · 退出` : "登录";
+  authBtn.dataset.loggedIn = user ? "1" : "";
+}
+
+async function refreshAuthState() {
+  try {
+    const res = await fetch("/api/auth/me");
+    if (res.ok) {
+      renderAuthButton(await res.json());
+      updateNicknameLabel(); // login may have just re-synced viewer_uid/nickname
+      return;
+    }
+  } catch {}
+  renderAuthButton(null);
+}
+
+function openAuthModal(mode) {
+  authMode = mode;
+  authTitle.textContent = mode === "login" ? "登录" : "注册";
+  authSubmitBtn.textContent = mode === "login" ? "登录" : "注册";
+  authToggleBtn.textContent = mode === "login" ? "没有账号？去注册" : "已有账号？去登录";
+  authError.hidden = true;
+  authEmail.value = "";
+  authPassword.value = "";
+  authModal.hidden = false;
+  authEmail.focus();
+}
+
+authBtn.addEventListener("click", async () => {
+  if (authBtn.dataset.loggedIn) {
+    await fetch("/api/auth/logout", { method: "POST" });
+    await refreshAuthState();
+    return;
+  }
+  openAuthModal("login");
+});
+authToggleBtn.addEventListener("click", () => openAuthModal(authMode === "login" ? "register" : "login"));
+authCloseBtn.addEventListener("click", () => {
+  authModal.hidden = true;
+});
+async function submitAuth() {
+  const email = authEmail.value.trim();
+  const password = authPassword.value;
+  authError.hidden = true;
+  const res = await fetch(`/api/auth/${authMode}`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, password }),
+  });
+  const body = await res.json().catch(() => ({}));
+  if (!res.ok) {
+    authError.textContent = body.error || "出错了，请重试";
+    authError.hidden = false;
+    return;
+  }
+  authModal.hidden = true;
+  await refreshAuthState();
+}
+authSubmitBtn.addEventListener("click", submitAuth);
+authPassword.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") submitAuth();
+});
+
+refreshAuthState();
+
 function renderBrowseList() {
   if (clips.length === 0) {
     clipList.innerHTML = `<div class="section-head">片段列表</div><div class="empty-hint">片段库为空</div>`;