施工(HEL-226): 实现登录门户与本机免密切换账号
用设备 Cookie 和授权表记住本机已验证账号，登录页按确认样图做成门户，不再把密码写进浏览器。 Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
总工
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
8a5e78f022
commit
f0a1adf52f
@@ -0,0 +1,273 @@
|
||||
(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: "",
|
||||
};
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? "").replace(/[&<>"']/g, (ch) => (
|
||||
{ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[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 membershipLabel(account) {
|
||||
if (account.role === "admin") return account.membership?.subscribed ? "管理员 · 会员" : "管理员";
|
||||
return account.membership?.subscribed ? "会员" : "普通用户";
|
||||
}
|
||||
|
||||
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 ? "添加并进入" : "登录");
|
||||
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(options.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" required></label>',
|
||||
`<label class="form-field"><span>密码</span><input id="loginPassword" type="password" minlength="8" maxlength="128" autocomplete="${registering ? "new-password" : "current-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">密码连续输错 5 次将锁定 10 分钟。还没有账号？切换到「注册」创建。</p>',
|
||||
].join("");
|
||||
}
|
||||
|
||||
function accountRow(account) {
|
||||
const current = Number(account.user_id) === Number(state.currentUserId);
|
||||
const confirming = Number(state.confirmingId) === Number(account.user_id);
|
||||
const classes = `login-account-row${current ? " is-current" : ""}${confirming ? " is-confirming" : ""}`;
|
||||
if (state.view === "manage" && 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 action = state.view === "manage"
|
||||
? `<button class="login-account-remove" type="button" data-confirm-id="${account.user_id}">移除</button>`
|
||||
: current
|
||||
? '<span class="login-account-check" aria-hidden="true">✓</span>'
|
||||
: `<button class="login-account-enter" type="button" data-switch-id="${account.user_id}">进入</button>`;
|
||||
return [
|
||||
`<div class="${classes}" data-user-id="${account.user_id}">`,
|
||||
'<div class="login-account-meta">',
|
||||
`<strong>${escapeHtml(account.username)}</strong>`,
|
||||
`<span>${escapeHtml(membershipLabel(account))}${current ? " · 当前" : ""}</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">这台电脑已记录 ${count} 个账号，可直接进入，无需再次输入密码。</p>`,
|
||||
managing
|
||||
? '<button class="login-manage" type="button" data-login-action="picker">完成</button>'
|
||||
: "",
|
||||
`<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>` : "",
|
||||
'<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: "登录后进入你的复盘空间",
|
||||
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", () => {
|
||||
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;
|
||||
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);
|
||||
Reference in New Issue
Block a user