OrgTJWater/pipeline-lifetime
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): add password reset flow

Browse Source 
Add admin-generated reset links, reset UI, timezone-aware expiry display, and registration captcha coverage.
This commit is contained in:
jiang
2026-07-06 17:55:10 +08:00
parent 2fdbaa8876
commit c7ee2adb82
14 changed files with 1307 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/admin.html
+112 -3
View File
@@ -8,7 +8,7 @@
<div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
<div>
<h1 class="text-3xl font-extrabold tracking-tight sm:text-4xl">管理台</h1>
<p class="mt-2 text-sm text-textSub">管理系统注册状态，查看所有用户的上传文件和预测结果。</p>
<p class="mt-2 text-sm text-textSub">管理系统注册状态、密码重置链接，查看所有用户的上传文件和预测结果。</p>
</div>
<a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-secondary">
<span class="material-symbols-outlined text-lg">arrow_back</span>
@@ -38,7 +38,62 @@
</div>
</section>
<section class="flex min-h-[760px] flex-col overflow-hidden rounded-lg border border-line bg-white shadow-panel">
<section class="mb-6 rounded-lg border border-line bg-white p-5 shadow-panel">
<div class="mb-4 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
<div>
<h2 class="text-lg font-extrabold tracking-tight">用户密码重置</h2>
<p class="mt-1 text-sm text-textSub">为普通用户生成一次性重置链接，旧链接会自动失效。</p>
</div>
<span class="text-sm text-textSub">共 {{ password_reset_users|length }} 位普通用户</span>
</div>
<div id="resetLinkPanel" class="mb-4 hidden rounded-lg border border-blue-200 bg-blue-50 p-4">
<div class="mb-2 flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
<div class="text-sm font-extrabold text-textMain">已生成重置链接</div>
<div id="resetLinkExpires" class="text-xs font-semibold text-textSub"></div>
</div>
<div class="flex flex-col gap-3 sm:flex-row">
<input id="resetLinkValue" class="min-w-0 flex-1 rounded-md border border-blue-200 bg-white px-3 py-2 text-sm text-textMain" readonly>
<button id="resetLinkCopy" type="button" class="ui-btn ui-btn-sm ui-btn-secondary">
<span class="material-symbols-outlined text-lg">content_copy</span>
复制
</button>
</div>
</div>
<div class="overflow-x-auto rounded-lg border border-line">
<table class="min-w-full text-sm">
<thead class="bg-slate-50 text-xs font-bold uppercase tracking-[0.12em] text-textSub">
<tr>
<th class="px-4 py-3 text-left">用户</th>
<th class="px-4 py-3 text-left">创建时间</th>
<th class="px-4 py-3 text-left">操作</th>
</tr>
</thead>
<tbody class="divide-y divide-line">
{% for user in password_reset_users %}
<tr class="hover:bg-slate-50">
<td class="px-4 py-3 font-semibold">{{ user.username }}</td>
<td class="px-4 py-3 text-textSub">{{ user.created_at.strftime('%Y-%m-%d %H:%M:%S') if user.created_at else '-' }}</td>
<td class="px-4 py-3">
<form method="post" action="{{ url_for('main.create_password_reset_link', user_id=user.id) }}" data-reset-link-form class="inline-flex">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<button type="submit" class="ui-btn ui-btn-sm ui-btn-secondary">
<span class="material-symbols-outlined text-lg">link</span>
生成重置链接
</button>
</form>
</td>
</tr>
{% else %}
<tr>
<td colspan="3" class="px-4 py-8 text-center text-textSub">暂无普通用户</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</section>
<section class="flex h-[710px] flex-col overflow-hidden rounded-lg border border-line bg-white shadow-panel">
<div class="border-b border-line px-5 py-4">
<div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
<h2 class="text-lg font-extrabold">上传记录</h2>
@@ -47,7 +102,7 @@
{% endif %}
</div>
</div>
<div class="flex-1 overflow-x-auto">
<div class="min-h-0 flex-1 overflow-auto">
<table class="min-w-full text-sm">
<thead class="bg-slate-50 text-xs font-bold uppercase tracking-[0.12em] text-textSub">
<tr>
@@ -125,5 +180,59 @@
}
});
})();
(() => {
const panel = document.getElementById('resetLinkPanel');
const value = document.getElementById('resetLinkValue');
const expires = document.getElementById('resetLinkExpires');
const copy = document.getElementById('resetLinkCopy');
if (!panel || !value || !expires || !copy) return;
document.querySelectorAll('[data-reset-link-form]').forEach((form) => {
const submit = form.querySelector('button[type="submit"]');
const submitText = submit?.lastChild;
form.addEventListener('submit', async (event) => {
event.preventDefault();
if (submit) submit.disabled = true;
if (submitText) submitText.textContent = '生成中';
try {
const response = await fetch(form.action, {
method: 'POST',
body: new FormData(form),
headers: { 'X-Requested-With': 'XMLHttpRequest' },
});
const data = await response.json();
if (!response.ok) {
window.showAppNotification?.(data.error || '生成失败，请刷新页面后重试。', 'error', '生成失败');
return;
}
value.value = data.reset_url;
expires.textContent = `有效期至 ${data.expires_at}`;
panel.classList.remove('hidden');
window.showAppNotification?.(data.message, 'info');
} catch (error) {
window.showAppNotification?.('请求失败，请检查后端服务是否正常。', 'error', '生成失败');
} finally {
if (submit) submit.disabled = false;
if (submitText) submitText.textContent = '生成重置链接';
}
});
});
copy.addEventListener('click', async () => {
value.select();
try {
await navigator.clipboard.writeText(value.value);
} catch (error) {
document.execCommand('copy');
}
window.showAppNotification?.('重置链接已复制', 'info');
});
})();
</script>
{% endblock %}
templates/history.html
+9 -9
View File
@@ -16,7 +16,7 @@
</a>
</div>
<section class="flex h-[1152px] flex-col rounded-lg border border-line bg-white shadow-panel">
<section class="flex h-[900px] min-w-0 flex-col overflow-hidden rounded-lg border border-line bg-white shadow-panel">
<div class="border-b border-line px-5 py-4">
<div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
<h2 class="text-lg font-extrabold">上传记录</h2>
@@ -25,23 +25,23 @@
{% endif %}
</div>
</div>
<div class="h-[1040px] shrink-0 divide-y divide-line overflow-y-auto">
<div class="min-h-0 min-w-0 flex-1 divide-y divide-line overflow-y-auto">
{% for record in records %}
<div class="flex min-h-[104px] flex-col gap-4 p-5 md:flex-row md:items-center md:justify-between">
<div class="min-w-0">
<div class="truncate font-bold">{{ record.original_filename }}</div>
<div class="mt-1 flex flex-wrap items-center gap-2 text-sm text-textSub">
<div class="grid min-h-[76px] min-w-0 gap-3 px-4 py-3 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
<div class="min-w-0 overflow-hidden">
<div class="truncate text-sm font-bold">{{ record.original_filename }}</div>
<div class="mt-1 flex flex-wrap items-center gap-2 text-xs text-textSub">
<span>{{ record.upload_time.strftime('%Y-%m-%d %H:%M:%S') }}</span>
<span class="hidden sm:inline">·</span>
<span>记录 #{{ record.id }}</span>
</div>
</div>
<div class="flex flex-wrap gap-2">
<a class="ui-btn ui-btn-sm ui-btn-secondary" href="{{ url_for('main.download_file', record_id=record.id, file_type='original') }}">
<div class="grid min-w-0 grid-cols-1 gap-2 sm:grid-cols-2 md:flex md:w-auto md:flex-nowrap">
<a class="ui-btn ui-btn-compact ui-btn-secondary w-full px-3 md:w-auto" href="{{ url_for('main.download_file', record_id=record.id, file_type='original') }}">
<span class="material-symbols-outlined text-lg">description</span>
原始文件
</a>
<a class="ui-btn ui-btn-sm ui-btn-primary" href="{{ url_for('main.download_file', record_id=record.id, file_type='prediction') }}">
<a class="ui-btn ui-btn-compact ui-btn-primary w-full px-3 md:w-auto" href="{{ url_for('main.download_file', record_id=record.id, file_type='prediction') }}">
<span class="material-symbols-outlined text-lg">download</span>
预测结果
</a>
templates/login.html
+20 -3
View File
@@ -150,7 +150,7 @@
<span class="material-symbols-outlined text-[28px]">water_drop</span>
<span>供水管道健康评估系统</span>
</div>
<h2 class="text-center text-[44px] lg:text-[40px] font-extrabold tracking-tight mb-10">系统门户</h2>
<h2 class="text-center text-[44px] lg:text-[40px] font-extrabold tracking-tight {{ 'mb-7' if mode == 'register' else 'mb-10' }}">系统门户</h2>
<div class="flex items-center gap-8 text-[13px] font-semibold border-b border-slate-200 mb-7">
<a href="{{ url_for('main.login') }}" class="border-b-2 py-3 {{ 'text-primary border-primary' if mode == 'login' else 'text-slate-500 border-transparent' }}">登录</a>
@@ -171,7 +171,7 @@
<div>
<div class="flex items-center justify-between mb-2">
<label class="block text-[11px] tracking-[0.18em] uppercase text-slate-500">密码</label>
<span class="text-[12px] text-primary font-semibold">找回密码</span>
<button id="forgotPasswordBtn" type="button" class="text-[12px] font-semibold text-primary transition hover:text-primaryDeep">找回密码</button>
</div>
<div class="relative">
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-lg">lock</span>
@@ -207,7 +207,7 @@
</button>
</form>
{% else %}
<form method="post" action="{{ url_for('main.register') }}" class="space-y-5" novalidate data-auth-form>
<form method="post" action="{{ url_for('main.register') }}" class="space-y-4" novalidate data-auth-form>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div>
<label class="block text-[11px] tracking-[0.18em] uppercase text-slate-500 mb-2">用户名</label>
@@ -226,6 +226,19 @@
</button>
</div>
</div>
<div>
<label class="block text-[11px] tracking-[0.18em] uppercase text-slate-500 mb-2">验证码</label>
<div class="grid grid-cols-[1fr_92px_44px] gap-3 items-center">
<div class="relative">
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-lg">verified_user</span>
<input name="captcha" required data-field-label="验证码" {{ 'disabled' if not allow_registration }} class="w-full pl-11 pr-4 py-3.5 rounded-xl bg-[#eceff3] border border-transparent focus:border-primary focus:ring-0 disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-400" placeholder="请输入验证码" />
</div>
<div class="rounded-xl bg-blueSoft text-textMain border border-blue-100 h-[50px] flex items-center justify-center font-black tracking-[0.18em] italic">{{ captcha }}</div>
<a href="{{ url_for('main.register') }}" class="ui-btn ui-btn-field ui-btn-secondary px-0 {{ 'pointer-events-none opacity-50' if not allow_registration }}" aria-label="刷新验证码" aria-disabled="{{ 'true' if not allow_registration else 'false' }}">
<span class="material-symbols-outlined">refresh</span>
</a>
</div>
</div>
<button {{ 'disabled' if not allow_registration }} class="ui-btn ui-btn-lg ui-btn-primary w-full mt-2">
注册
<span class="material-symbols-outlined text-lg">person_add</span>
@@ -410,6 +423,10 @@
toggle.setAttribute('aria-pressed', shouldShow ? 'true' : 'false');
});
});
document.getElementById('forgotPasswordBtn')?.addEventListener('click', () => {
showAppNotification('请联系管理员获取一次性重置链接后设置新密码。', 'info', '密码重置');
});
})();
</script>
</body>
templates/password_reset.html
+623
View File
@@ -0,0 +1,623 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>重置密码 | 供水管道健康评估系统</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ url_for('static', filename='css/app.css') }}" rel="stylesheet" />
<style>
.reset-page {
min-height: 100vh;
display: grid;
grid-template-columns: minmax(360px, .82fr) minmax(420px, 1fr);
background: #f3f5f8;
color: #0f172a;
}
.reset-aside {
display: flex;
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
padding: 56px 64px;
background:
radial-gradient(circle at 1px 1px, rgba(255,255,255,.20) 1px, transparent 0) 0 0 / 34px 34px,
#0f766e;
color: #fff;
}
.reset-brand {
display: flex;
align-items: center;
gap: 12px;
font-size: 18px;
font-weight: 800;
}
.reset-aside-main {
max-width: 460px;
}
.reset-kicker {
margin-bottom: 14px;
color: rgba(255,255,255,.72);
font-size: 12px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
.reset-aside h1 {
margin: 0;
font-size: 46px;
line-height: 1.18;
font-weight: 900;
letter-spacing: 0;
}
.reset-aside p {
margin: 22px 0 0;
max-width: 420px;
color: rgba(255,255,255,.78);
font-size: 15px;
line-height: 1.8;
}
.reset-meta {
display: grid;
gap: 12px;
margin-top: 32px;
}
.reset-meta-item {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,.82);
font-size: 13px;
font-weight: 700;
}
.reset-aside-foot {
color: rgba(255,255,255,.58);
font-size: 12px;
}
.reset-panel {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
padding: 48px 28px;
background: #fff;
}
.reset-card {
width: 100%;
max-width: 420px;
}
.reset-mobile-brand {
display: none;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 28px;
color: #0f766e;
font-size: 18px;
font-weight: 900;
}
.reset-icon {
display: inline-flex;
width: 54px;
height: 54px;
align-items: center;
justify-content: center;
border-radius: 14px;
background: #ccfbf1;
color: #0f766e;
}
.reset-card h2 {
margin: 18px 0 8px;
font-size: 34px;
line-height: 1.2;
font-weight: 900;
letter-spacing: 0;
}
.reset-copy {
margin: 0;
color: #64748b;
font-size: 14px;
line-height: 1.75;
}
.reset-copy strong {
color: #0f172a;
font-weight: 900;
}
.auth-input-error {
border-color: #dc2626 !important;
background: #fff7f7 !important;
box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}
.auth-alert {
pointer-events: none;
opacity: 0;
transform: translateY(.5rem);
}
.auth-alert::before {
content: '';
position: absolute;
left: 24px;
top: -7px;
width: 14px;
height: 14px;
transform: rotate(45deg);
border-left: 1px solid currentColor;
border-top: 1px solid currentColor;
background: #fff;
color: #bfdbfe;
}
.auth-alert.is-error::before {
color: #fecaca;
}
.auth-alert.is-visible {
pointer-events: auto;
opacity: 1;
transform: translateY(0);
}
.reset-form {
margin-top: 28px;
display: grid;
gap: 20px;
}
.reset-field label {
display: block;
margin-bottom: 8px;
color: #64748b;
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.reset-input-wrap {
position: relative;
}
.reset-input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 20px;
}
.reset-input {
width: 100%;
box-sizing: border-box;
border: 1px solid transparent;
border-radius: 12px;
background: #eceff3;
padding: 14px 48px 14px 44px;
color: #0f172a;
font-size: 16px;
line-height: 1.35;
outline: none;
transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.reset-input:focus {
border-color: #0f766e;
background: #fff;
box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}
.password-toggle {
position: absolute;
right: 12px;
top: 50%;
display: inline-flex;
width: 32px;
height: 32px;
transform: translateY(-50%);
align-items: center;
justify-content: center;
border: 0;
border-radius: 8px;
background: transparent;
color: #64748b;
padding: 0;
transition: background-color .15s ease, color .15s ease;
}
.password-toggle:hover {
background: rgba(148, 163, 184, .16);
color: #0f766e;
}
.password-toggle:focus-visible {
outline: 2px solid #0f766e;
outline-offset: 2px;
}
.password-toggle .material-symbols-outlined {
font-size: 20px;
line-height: 1;
}
.reset-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-top: 4px;
}
.reset-expiry {
color: #64748b;
font-size: 12px;
line-height: 1.5;
}
.reset-submit {
display: inline-flex;
min-width: 154px;
height: 48px;
align-items: center;
justify-content: center;
gap: 8px;
border: 0;
border-radius: 8px;
background: #0f766e;
color: #fff;
padding: 0 20px;
font-size: 14px;
font-weight: 800;
white-space: nowrap;
box-shadow: 0 16px 30px rgba(15, 118, 110, .20);
transition: background-color .15s ease, box-shadow .15s ease;
}
.reset-submit:hover {
background: #115e59;
box-shadow: 0 12px 24px rgba(15, 118, 110, .20);
}
.reset-submit:focus-visible {
outline: 2px solid #0f766e;
outline-offset: 3px;
}
.reset-login {
display: inline-flex;
width: fit-content;
height: 48px;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 28px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background: #fff;
color: #334155;
padding: 0 18px;
font-size: 14px;
font-weight: 800;
text-decoration: none;
transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.reset-login:hover {
border-color: #0f766e;
color: #0f766e;
background: #f8fafc;
}
@media (max-width: 900px) {
.reset-page {
display: block;
background: #fff;
}
.reset-aside {
display: none;
}
.reset-panel {
min-height: 100vh;
padding: 32px 22px;
}
.reset-mobile-brand {
display: flex;
}
.reset-card h2 {
font-size: 30px;
}
.reset-actions {
align-items: stretch;
flex-direction: column-reverse;
}
.reset-submit {
width: 100%;
}
.reset-expiry {
text-align: center;
}
}
@media (min-width: 1280px) {
.auth-alert {
transform: translateX(.75rem);
}
.auth-alert::before {
left: -7px;
top: var(--auth-alert-arrow-top, 44px);
border: 0;
border-left: 1px solid currentColor;
border-bottom: 1px solid currentColor;
}
.auth-alert.is-visible {
transform: translateX(0);
}
}
</style>
</head>
<body>
{% with flashed_messages = get_flashed_messages(with_categories=true) %}
<script>
window.__flashMessages = {{ flashed_messages|tojson }};
</script>
<div class="sr-only" aria-hidden="true">
{% for category, message in flashed_messages %}{{ message }}{% endfor %}
</div>
<main class="reset-page">
<aside class="reset-aside" aria-label="系统信息">
<div class="reset-brand">
<span class="material-symbols-outlined">water_drop</span>
<span>供水管道健康评估系统</span>
</div>
<div class="reset-aside-main">
<div class="reset-kicker">Password reset</div>
<h1>为账号设置新的访问密码</h1>
<p>使用管理员生成的一次性链接完成密码更新。提交成功后，旧链接会立即失效。</p>
<div class="reset-meta" aria-hidden="true">
<div class="reset-meta-item">
<span class="material-symbols-outlined">link_off</span>
<span>一次性链接</span>
</div>
<div class="reset-meta-item">
<span class="material-symbols-outlined">encrypted</span>
<span>密码本地加密存储</span>
</div>
</div>
</div>
<div class="reset-aside-foot">© {{ now_year() }} 供水管道健康评估系统</div>
</aside>
<section class="reset-panel">
<div id="authCard" class="reset-card relative">
<div id="alertBox" class="auth-alert fixed left-7 right-7 top-6 z-50 hidden rounded-lg border bg-white p-3.5 shadow-[0_18px_45px_rgba(15,23,42,.16)] transition-all duration-200 ease-out sm:left-12 sm:right-12 xl:left-auto xl:right-auto xl:w-[320px]" role="status" aria-live="polite">
<div class="flex items-start gap-3">
<span id="alertIconWrap" class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
<span id="alertIcon" class="material-symbols-outlined text-lg">priority_high</span>
</span>
<div class="min-w-0 flex-1 pt-0.5">
<div id="alertTitle" class="text-sm font-extrabold text-textMain"></div>
<div id="alertMessage" class="mt-1 text-sm leading-5 text-textSub"></div>
</div>
<button id="alertClose" class="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-slate-400 transition hover:bg-slate-100 hover:text-slate-700" type="button" aria-label="关闭通知">
<span class="material-symbols-outlined text-base">close</span>
</button>
</div>
</div>
<div class="reset-mobile-brand">
<span class="material-symbols-outlined">water_drop</span>
<span>供水管道健康评估系统</span>
</div>
<div class="reset-icon">
<span class="material-symbols-outlined text-[28px]">lock_reset</span>
</div>
<h2>重置密码</h2>
<p class="reset-copy">
{% if token_available %}
为账号 <strong>{{ reset_token.user.username }}</strong> 设置新密码。
{% else %}
当前链接不可用，请联系管理员重新生成一次性重置链接。
{% endif %}
</p>
{% if token_available %}
<form method="post" action="{{ url_for('main.password_reset', token=token) }}" class="reset-form" novalidate data-auth-form>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
<div class="reset-field">
<label for="resetPassword">新密码</label>
<div class="reset-input-wrap">
<span class="material-symbols-outlined reset-input-icon">lock</span>
<input id="resetPassword" name="password" type="password" minlength="6" required class="reset-input" placeholder="请输入至少 6 位密码" />
<button class="password-toggle" type="button" data-password-toggle="resetPassword" aria-label="显示密码" aria-pressed="false">
<span class="material-symbols-outlined" aria-hidden="true">visibility</span>
</button>
</div>
</div>
<div class="reset-field">
<label for="resetPasswordConfirm">确认密码</label>
<div class="reset-input-wrap">
<span class="material-symbols-outlined reset-input-icon">lock</span>
<input id="resetPasswordConfirm" name="password_confirm" type="password" minlength="6" required class="reset-input" placeholder="请再次输入新密码" />
<button class="password-toggle" type="button" data-password-toggle="resetPasswordConfirm" aria-label="显示密码" aria-pressed="false">
<span class="material-symbols-outlined" aria-hidden="true">visibility</span>
</button>
</div>
</div>
<div class="reset-actions">
<div class="reset-expiry">链接有效期至<br>{{ format_datetime(reset_token.expires_at) }}</div>
<button class="reset-submit" type="submit">
<span class="material-symbols-outlined text-lg">check</span>
保存新密码
</button>
</div>
</form>
{% else %}
<a href="{{ url_for('main.login') }}" class="reset-login">
<span class="material-symbols-outlined text-lg">arrow_back</span>
返回登录
</a>
{% endif %}
</div>
</section>
</main>
{% endwith %}
<script>
(() => {
const alertBox = document.getElementById('alertBox');
const alertIconWrap = document.getElementById('alertIconWrap');
const alertIcon = document.getElementById('alertIcon');
const alertTitle = document.getElementById('alertTitle');
const alertMessage = document.getElementById('alertMessage');
const alertClose = document.getElementById('alertClose');
const authCard = document.getElementById('authCard');
let alertTimer = null;
let alertHideTimer = null;
let alertAnchor = null;
function hideAlert() {
clearTimeout(alertTimer);
clearTimeout(alertHideTimer);
if (!alertBox) return;
alertBox.classList.remove('is-visible');
alertHideTimer = setTimeout(() => {
alertBox.classList.add('hidden');
}, 200);
}
function positionAlert(anchor) {
if (!alertBox || !authCard) return;
const cardRect = authCard.getBoundingClientRect();
const anchorRect = anchor?.getBoundingClientRect();
const useSidePopover = window.matchMedia('(min-width: 1280px)').matches;
if (!useSidePopover) {
alertBox.style.left = '';
alertBox.style.right = '';
alertBox.style.top = '';
alertBox.style.setProperty('--auth-alert-arrow-top', '28px');
return;
}
const width = 320;
const gap = 18;
const viewportPadding = 16;
const desiredLeft = cardRect.right + gap;
const left = Math.min(desiredLeft, window.innerWidth - width - viewportPadding);
const targetCenter = anchorRect ? anchorRect.top + (anchorRect.height / 2) : cardRect.top + 116;
const top = Math.max(viewportPadding, Math.min(targetCenter - 42, window.innerHeight - 140));
const arrowTop = Math.max(22, Math.min(targetCenter - top - 7, 92));
alertBox.style.left = `${left}px`;
alertBox.style.right = 'auto';
alertBox.style.top = `${top}px`;
alertBox.style.setProperty('--auth-alert-arrow-top', `${arrowTop}px`);
}
function showAppNotification(message, type = 'info', title, anchor) {
if (!alertBox || !alertIconWrap || !alertIcon || !alertTitle || !alertMessage) return;
clearTimeout(alertTimer);
clearTimeout(alertHideTimer);
alertAnchor = anchor || null;
positionAlert(anchor);
alertBox.classList.remove('hidden', 'border-red-200', 'border-blue-200', 'is-error');
alertIconWrap.classList.remove('bg-dangerSoft', 'text-dangerText', 'bg-blueSoft', 'text-primary');
if (type === 'error') {
alertBox.classList.add('border-red-200', 'is-error');
alertIconWrap.classList.add('bg-dangerSoft', 'text-dangerText');
alertIcon.textContent = 'priority_high';
alertTitle.textContent = title || '操作未完成';
} else {
alertBox.classList.add('border-blue-200');
alertIconWrap.classList.add('bg-blueSoft', 'text-primary');
alertIcon.textContent = 'info';
alertTitle.textContent = title || '提示';
}
alertMessage.textContent = message;
requestAnimationFrame(() => {
alertBox.classList.add('is-visible');
});
alertTimer = setTimeout(hideAlert, 10000);
}
if (alertClose) {
alertClose.addEventListener('click', hideAlert);
}
window.addEventListener('resize', () => {
if (alertBox && alertBox.classList.contains('is-visible')) {
positionAlert(alertAnchor);
}
});
function markFieldError(field) {
if (!field) return;
field.classList.add('auth-input-error');
field.setAttribute('aria-invalid', 'true');
}
function clearFieldError(field) {
field.classList.remove('auth-input-error');
field.removeAttribute('aria-invalid');
}
function clearFormErrors(form) {
form.querySelectorAll('.auth-input-error').forEach(clearFieldError);
}
function fieldForServerMessage(message) {
const activeForm = document.querySelector('[data-auth-form]');
if (!activeForm) return null;
if (message.includes('两次')) return activeForm.querySelector('input[name="password_confirm"]');
if (message.includes('密码')) return activeForm.querySelector('input[name="password"]');
return null;
}
const flashedMessages = window.__flashMessages || [];
if (flashedMessages.length) {
const [category, message] = flashedMessages[flashedMessages.length - 1];
const serverField = category === 'error' ? fieldForServerMessage(message) : null;
showAppNotification(message, category === 'error' ? 'error' : 'info', undefined, serverField);
if (category === 'error') {
markFieldError(serverField);
}
}
document.querySelectorAll('[data-auth-form]').forEach((form) => {
form.querySelectorAll('input').forEach((field) => {
field.addEventListener('input', () => clearFieldError(field));
});
form.addEventListener('submit', (event) => {
clearFormErrors(form);
const fields = Array.from(form.querySelectorAll('input[required]:not(:disabled)'));
const emptyField = fields.find((field) => !field.value.trim());
if (emptyField) {
event.preventDefault();
showAppNotification('密码不能为空', 'error', undefined, emptyField);
markFieldError(emptyField);
emptyField.focus();
return;
}
const shortPassword = fields.find((field) => {
const minLength = Number(field.getAttribute('minlength'));
return minLength > 0 && field.value.length < minLength;
});
if (shortPassword) {
event.preventDefault();
const minLength = shortPassword.getAttribute('minlength');
showAppNotification(`密码至少需要 ${minLength} 位`, 'error', undefined, shortPassword);
markFieldError(shortPassword);
shortPassword.focus();
return;
}
const password = form.querySelector('input[name="password"]');
const passwordConfirm = form.querySelector('input[name="password_confirm"]');
if (password && passwordConfirm && password.value !== passwordConfirm.value) {
event.preventDefault();
showAppNotification('两次输入的密码不一致', 'error', undefined, passwordConfirm);
markFieldError(passwordConfirm);
passwordConfirm.focus();
}
});
});
document.querySelectorAll('[data-password-toggle]').forEach((toggle) => {
const input = document.getElementById(toggle.dataset.passwordToggle);
const icon = toggle.querySelector('.material-symbols-outlined');
if (!input || !icon) return;
toggle.addEventListener('click', () => {
const shouldShow = input.type === 'password';
input.type = shouldShow ? 'text' : 'password';
icon.textContent = shouldShow ? 'visibility_off' : 'visibility';
toggle.setAttribute('aria-label', shouldShow ? '隐藏密码' : '显示密码');
toggle.setAttribute('aria-pressed', shouldShow ? 'true' : 'false');
});
});
})();
</script>
</body>
</html>