xiaobai-review/frontend/login/page.js

(function bootLoginPortal(global) {
  "use strict";

  const THEME_KEY = "xiaobaiTheme";
  const api = global.XiaobaiAPI;
  const card = document.querySelector("#loginCard");
  const themeButton = document.querySelector("#loginThemeToggle");
  const state = {
    view: "first",
    mode: "login",
    accounts: [],
    currentUserId: null,
    loading: false,
    confirmingId: null,
    error: "",
    username: "",
    password: "",
  };

  function escapeHtml(value) {
    return String(value ?? "").replace(/[&<>"']/g, (ch) => (
      { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[ch]
    ));
  }

  function preferredTheme() {
    try {
      const stored = global.localStorage.getItem(THEME_KEY);
      if (stored === "dark" || stored === "light") return stored;
    } catch (_error) {
      // Fall through to the system preference.
    }
    return global.matchMedia && global.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";
  }

  function applyTheme(theme, persist) {
    const normalized = theme === "dark" ? "dark" : "light";
    document.documentElement.dataset.theme = normalized;
    document.documentElement.style.colorScheme = normalized;
    themeButton.textContent = normalized === "dark" ? "☀ 日间" : "🌙 夜间";
    themeButton.setAttribute("aria-label", normalized === "dark" ? "切换到日间模式" : "切换到夜间模式");
    if (persist) {
      try {
        global.localStorage.setItem(THEME_KEY, normalized);
      } catch (_error) {
        // Theme still applies for the current page when storage is unavailable.
      }
    }
  }

  function setError(message) {
    state.error = message || "";
  }

  function formatLastUsed(value) {
    if (!value) return "";
    const parsed = new Date(value);
    if (Number.isNaN(parsed.getTime())) return "";
    const now = new Date();
    const hh = String(parsed.getHours()).padStart(2, "0");
    const mm = String(parsed.getMinutes()).padStart(2, "0");
    if (parsed.toDateString() === now.toDateString()) return `今天 ${hh}:${mm}`;
    const yesterday = new Date(now);
    yesterday.setDate(now.getDate() - 1);
    if (parsed.toDateString() === yesterday.toDateString()) return `昨天 ${hh}:${mm}`;
    return `${parsed.getMonth() + 1}月${parsed.getDate()}日`;
  }

  function chipsFor(account, current) {
    const chips = [];
    if (current) chips.push('<span class="login-chip login-chip-current">当前</span>');
    if (account.role === "admin") chips.push('<span class="login-chip">管理员</span>');
    if (account.membership?.subscribed) chips.push('<span class="login-chip login-chip-member">会员</span>');
    else if (account.role !== "admin") chips.push('<span class="login-chip">普通用户</span>');
    return chips.join("");
  }

  function enterApp() {
    const next = new URLSearchParams(global.location.search).get("next");
    global.location.replace(next && next.startsWith("/") ? next : "/");
  }

  function formMarkup(options) {
    const registering = state.mode === "register";
    const submitLabel = options.submitLabel
      || (state.loading ? "正在登录..." : registering ? "注册并进入" : options.add ? "添加并进入" : "登录");
    const lead = options.lead;
    const hint = options.hint;
    const invalid = state.error ? " is-invalid" : "";
    return [
      options.back
        ? '<button class="login-back" type="button" data-login-action="picker">返回账号列表</button>'
        : "",
      `<h2 class="login-card-title">${escapeHtml(options.title)}</h2>`,
      `<p class="login-card-lead">${escapeHtml(lead)}</p>`,
      '<div class="login-tabs" role="tablist">',
      `<button class="login-tab${state.mode === "login" ? " is-active" : ""}" type="button" data-auth-mode="login">登录</button>`,
      `<button class="login-tab${state.mode === "register" ? " is-active" : ""}" type="button" data-auth-mode="register">注册</button>`,
      "</div>",
      '<form class="login-form" id="loginForm">',
      `<label class="form-field"><span>账号名</span><input id="loginUsername" type="text" minlength="3" maxlength="30" autocomplete="username" placeholder="请输入账号名" value="${escapeHtml(state.username)}" required></label>`,
      `<label class="form-field"><span>密码</span><input id="loginPassword" class="${invalid.trim()}" type="password" minlength="8" maxlength="128" autocomplete="${registering ? "new-password" : "current-password"}" placeholder="请输入密码" value="${escapeHtml(state.password)}" required></label>`,
      `<label class="form-field" id="loginConfirmField"${registering ? "" : " hidden"}><span>确认密码</span><input id="loginPasswordConfirm" type="password" minlength="8" maxlength="128" autocomplete="new-password"${registering ? " required" : ""}></label>`,
      state.error ? `<p class="login-error">${escapeHtml(state.error)}</p>` : '<p class="login-error" hidden></p>',
      `<button class="button primary login-submit" type="submit"${state.loading ? " disabled" : ""}>`,
      state.loading ? '<span class="login-spinner" aria-hidden="true"></span>' : "",
      `<span>${escapeHtml(submitLabel)}</span></button>`,
      "</form>",
      `<p class="login-hint">${escapeHtml(hint)}</p>`,
    ].join("");
  }

  function accountRow(account) {
    const current = Number(account.user_id) === Number(state.currentUserId);
    const confirming = Number(state.confirmingId) === Number(account.user_id);
    const managing = state.view === "manage";
    const classes = [
      "login-account-row",
      current ? "is-current" : "",
      confirming ? "is-confirming" : "",
      !managing && !current ? "is-switchable" : "",
    ].filter(Boolean).join(" ");
    if (managing && confirming) {
      return [
        `<div class="${classes}" data-user-id="${account.user_id}">`,
        `<p class="login-confirm-copy">移除「${escapeHtml(account.username)}」的本机记录？</p>`,
        '<div class="login-confirm-actions">',
        `<button class="button danger-button" type="button" data-forget-id="${account.user_id}">移除</button>`,
        '<button class="button" type="button" data-login-action="cancel-forget">取消</button>',
        "</div></div>",
      ].join("");
    }
    const glyph = escapeHtml(String(account.username || "账").slice(0, 1));
    const tone = Number(account.user_id || 0) % 4;
    const used = formatLastUsed(account.last_used_at);
    const action = managing
      ? `<button class="login-account-remove" type="button" data-confirm-id="${account.user_id}" aria-label="移除 ${escapeHtml(account.username)}"><svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M6 2h4l.5 1H14v1H2V3h3.5L6 2zm1 4v6H6V6h1zm3 0v6H9V6h1zM3.5 5H13l-.7 8.2A1.5 1.5 0 0 1 10.81 14H5.19a1.5 1.5 0 0 1-1.49-1.8L3.5 5z"></path></svg></button>`
      : current
        ? '<span class="login-account-check" aria-hidden="true">✓</span>'
        : "";
    const switchAttr = !managing && !current ? ` data-switch-id="${account.user_id}"` : "";
    return [
      `<div class="${classes}" data-user-id="${account.user_id}"${switchAttr}>`,
      `<span class="login-avatar tone-${tone}" aria-hidden="true">${glyph}</span>`,
      '<div class="login-account-meta">',
      '<div class="login-account-name">',
      `<strong>${escapeHtml(account.username)}</strong>`,
      chipsFor(account, current),
      "</div>",
      used ? `<span class="login-account-used">上次登录 ${escapeHtml(used)}</span>` : "",
      "</div>",
      action,
      "</div>",
    ].join("");
  }

  function pickerMarkup() {
    const count = state.accounts.length;
    const managing = state.view === "manage";
    return [
      `<h2 class="login-card-title">${managing ? "管理账号记录" : "选择账号"}</h2>`,
      `<p class="login-card-lead">${managing
        ? "移除只删除这台电脑上的登录记录，不会注销账号"
        : `这台电脑已记录 ${count} 个账号，点选即可进入，无需再次输入密码。`}</p>`,
      managing
        ? '<div class="login-manage-toolbar"><p class="login-manage-hint">点击右侧图标移除对应记录</p><button class="login-manage-done" type="button" data-login-action="picker">完成</button></div>'
        : "",
      `<div class="login-account-list">${state.accounts.map(accountRow).join("")}</div>`,
      managing
        ? ""
        : '<button class="login-add" type="button" data-login-action="add">＋ 添加账号</button>',
      managing
        ? ""
        : '<button class="login-manage" type="button" data-login-action="manage">管理已记录的账号</button>',
      state.error ? `<p class="login-error">${escapeHtml(state.error)}</p>` : "",
      managing
        ? '<p class="login-privacy"><span class="login-lock" aria-hidden="true">🔒</span>移除后再次登录该账号需重新输入密码</p>'
        : '<p class="login-privacy"><span class="login-lock" aria-hidden="true">🔒</span>账号记录仅保存在这台电脑的浏览器中</p>',
    ].join("");
  }

  function render() {
    card.classList.toggle("is-loading", state.loading);
    if (state.view === "first" || state.view === "add") {
      card.innerHTML = formMarkup({
        title: state.view === "add" ? "添加账号" : "欢迎回来",
        lead: state.view === "add" ? "登录另一个账号，添加后可随时一键切换" : "登录后进入你的复盘空间",
        hint: state.view === "add"
          ? "添加后账号会保存在这台电脑，方便随时切换。"
          : "密码连续输错 5 次将锁定 10 分钟。还没有账号？切换到「注册」创建。",
        add: state.view === "add",
        back: state.view === "add",
      });
    } else {
      card.innerHTML = pickerMarkup();
    }
    bindCard();
  }

  function bindCard() {
    card.querySelectorAll("[data-auth-mode]").forEach((button) => {
      button.addEventListener("click", () => {
        state.mode = button.dataset.authMode === "register" ? "register" : "login";
        setError("");
        render();
      });
    });
    card.querySelectorAll("[data-login-action]").forEach((button) => {
      button.addEventListener("click", () => {
        const action = button.dataset.loginAction;
        if (action === "picker") {
          state.view = state.accounts.length ? "picker" : "first";
          state.confirmingId = null;
        } else if (action === "add") {
          state.view = "add";
          state.mode = "login";
        } else if (action === "manage") {
          state.view = "manage";
        } else if (action === "cancel-forget") {
          state.confirmingId = null;
        }
        setError("");
        render();
      });
    });
    card.querySelectorAll("[data-switch-id]").forEach((button) => {
      button.addEventListener("click", () => switchAccount(Number(button.dataset.switchId)));
    });
    card.querySelectorAll("[data-confirm-id]").forEach((button) => {
      button.addEventListener("click", (event) => {
        event.stopPropagation();
        state.confirmingId = Number(button.dataset.confirmId);
        render();
      });
    });
    card.querySelectorAll("[data-forget-id]").forEach((button) => {
      button.addEventListener("click", () => forgetAccount(Number(button.dataset.forgetId)));
    });
    const form = card.querySelector("#loginForm");
    if (form) form.addEventListener("submit", submitCredentials);
  }

  async function loadAccounts() {
    const payload = await api.request("/api/auth/accounts");
    state.accounts = payload.accounts || [];
    state.currentUserId = payload.current_user_id ?? null;
    const params = new URLSearchParams(global.location.search);
    if (params.get("mode") === "register") state.mode = "register";
    if (params.get("notice")) setError(params.get("notice"));
    if (state.accounts.length) state.view = "picker";
    else state.view = "first";
  }

  async function submitCredentials(event) {
    event.preventDefault();
    const username = document.querySelector("#loginUsername").value.trim();
    const password = document.querySelector("#loginPassword").value;
    state.username = username;
    state.password = password;
    if (state.mode === "register" && password !== document.querySelector("#loginPasswordConfirm").value) {
      setError("两次输入的密码不一致。");
      render();
      return;
    }
    state.loading = true;
    setError("");
    render();
    try {
      await api.request(`/api/auth/${state.mode}`, "POST", { username, password });
      enterApp();
    } catch (error) {
      state.loading = false;
      setError(error.message || "账号操作失败");
      render();
    }
  }

  async function switchAccount(userId) {
    state.loading = true;
    setError("");
    render();
    try {
      await api.request("/api/auth/switch", "POST", { user_id: userId });
      enterApp();
    } catch (error) {
      state.loading = false;
      setError(error.message || "该账号需重新验证");
      render();
    }
  }

  async function forgetAccount(userId) {
    try {
      await api.request("/api/auth/forget", "POST", { user_id: userId });
      state.accounts = state.accounts.filter((item) => Number(item.user_id) !== Number(userId));
      state.confirmingId = null;
      if (!state.accounts.length) state.view = "first";
      setError("");
      render();
    } catch (error) {
      setError(error.message || "移除失败");
      render();
    }
  }

  themeButton.addEventListener("click", () => {
    applyTheme(document.documentElement.dataset.theme === "dark" ? "light" : "dark", true);
  });
  applyTheme(preferredTheme(), false);

  loadAccounts()
    .then(render)
    .catch((error) => {
      setError(error.message || "无法连接本地服务");
      state.view = "first";
      render();
    });
})(window);