feat: add email-based authentication
This commit is contained in:
@@ -0,0 +1 @@
|
||||
<form method="post" class="space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><label class="block text-sm font-semibold">邮箱<input name="email" type="email" required class="mt-1 w-full rounded-lg border border-line px-3 py-2" autocomplete="email"></label><label class="block text-sm font-semibold">密码<a class="float-right text-primary" href="{{ url_for('main.forgot_password') }}">找回密码</a><input name="password" type="password" required class="mt-1 w-full rounded-lg border border-line px-3 py-2" autocomplete="current-password"></label><label class="block text-sm font-semibold">图形验证码<div class="mt-1 flex gap-2"><input name="captcha" required class="min-w-0 flex-1 rounded-lg border border-line px-3 py-2"><span class="rounded-lg bg-blueSoft px-3 py-2 font-bold tracking-widest">{{ captcha }}</span><a class="rounded-lg border border-line px-2 py-2" href="{{ url_for('main.login') }}">↻</a></div></label><label class="flex gap-2 text-sm text-textSub"><input type="checkbox" name="remember">保持登录状态</label><button class="ui-btn ui-btn-lg ui-btn-primary w-full">登录</button></form>
|
||||
@@ -0,0 +1 @@
|
||||
<form method="post" class="space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><label class="block text-sm font-semibold">显示名<input name="username" required {{ 'disabled' if not allow_registration }} class="mt-1 w-full rounded-lg border border-line px-3 py-2"></label><label class="block text-sm font-semibold">邮箱<input name="email" type="email" required {{ 'disabled' if not allow_registration }} class="mt-1 w-full rounded-lg border border-line px-3 py-2" autocomplete="email"></label><label class="block text-sm font-semibold">密码（12 至 128 位）<input name="password" type="password" minlength="12" required {{ 'disabled' if not allow_registration }} class="mt-1 w-full rounded-lg border border-line px-3 py-2" autocomplete="new-password"></label><label class="block text-sm font-semibold">图形验证码<div class="mt-1 flex gap-2"><input name="captcha" required {{ 'disabled' if not allow_registration }} class="min-w-0 flex-1 rounded-lg border border-line px-3 py-2"><span class="rounded-lg bg-blueSoft px-3 py-2 font-bold tracking-widest">{{ captcha }}</span><a class="rounded-lg border border-line px-2 py-2" href="{{ url_for('main.register') }}">↻</a></div></label>{% if not allow_registration %}<p class="text-sm text-dangerText">当前未开放自助注册，请联系管理员。</p>{% endif %}<button {{ 'disabled' if not allow_registration }} class="ui-btn ui-btn-lg ui-btn-primary w-full">发送邮箱验证码</button></form>
|
||||
@@ -0,0 +1,12 @@
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<section class="mx-auto max-w-xl rounded-xl border border-line bg-white p-6 shadow-panel">
|
||||
<h1 class="text-2xl font-extrabold">账户安全</h1>
|
||||
<p class="mt-2 text-sm text-textSub">登录邮箱：{{ current_user.email }}</p>
|
||||
{% with messages=get_flashed_messages(with_categories=true) %}{% for c,m in messages %}<p class="mt-3 text-sm text-dangerText">{{ m }}</p>{% endfor %}{% endwith %}
|
||||
<form method="post" class="mt-6 space-y-3"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input name="current_password" type="password" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="当前密码"><button class="ui-btn ui-btn-primary">发送修改密码验证码</button></form>
|
||||
<form method="post" class="mt-6 space-y-3 border-t border-line pt-5"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input type="hidden" name="action" value="change_email"><input name="current_password" type="password" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="当前密码"><input name="new_email" type="email" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="新邮箱"><button class="ui-btn ui-btn-secondary">验证并更换邮箱</button></form>
|
||||
<form method="post" class="mt-6 border-t border-line pt-5"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input type="hidden" name="action" value="revoke_devices"><button class="ui-btn ui-btn-secondary">撤销所有受信设备</button></form>
|
||||
{% if session.get('password_change_verified') %}<form method="post" action="{{ url_for('main.change_password') }}" class="mt-6 space-y-3 border-t border-line pt-5"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input name="password" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="新密码"><input name="password_confirm" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="确认新密码"><button class="ui-btn ui-btn-primary">更新密码</button></form>{% endif %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
+35
-208
@@ -2,237 +2,64 @@
|
||||
{% from "_pagination.html" import render_pagination %}
|
||||
|
||||
{% set active_page = "admin" %}
|
||||
{% block title %}管理台 | 供水管道健康评估系统{% endblock %}
|
||||
{% block title %}管理台{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<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>
|
||||
</div>
|
||||
<a href="{{ url_for('main.home') }}" class="ui-btn ui-btn-secondary">
|
||||
<span class="material-symbols-outlined text-lg">arrow_back</span>
|
||||
返回主页
|
||||
</a>
|
||||
<div>
|
||||
<h1 class="text-3xl font-extrabold">管理台</h1>
|
||||
<p class="mt-2 text-sm text-textSub">管理注册状态、密码重置和所有预测记录。</p>
|
||||
</div>
|
||||
|
||||
<section class="mb-6 rounded-lg border border-line bg-white p-5 shadow-panel">
|
||||
<div class="flex flex-col gap-4 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">
|
||||
当前状态：<span id="registrationStatus" class="font-bold {{ 'text-successText' if registration_allowed else 'text-slate-600' }}">{{ '已开放' if registration_allowed else '已关闭' }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<form id="registrationForm" method="post" action="{{ url_for('main.update_registration_setting') }}" class="flex items-center gap-3">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<label class="inline-flex items-center gap-2 text-sm font-semibold text-slate-600">
|
||||
<input id="registrationToggle" type="checkbox" name="allow_registration" class="rounded border-slate-300 text-primary focus:ring-primary" {{ 'checked' if registration_allowed }}>
|
||||
允许自助注册
|
||||
</label>
|
||||
<button id="registrationSubmit" type="submit" class="ui-btn ui-btn-sm ui-btn-primary">
|
||||
<span class="material-symbols-outlined text-lg">save</span>
|
||||
<span id="registrationSubmitText">保存</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<section class="mt-6 rounded-xl border border-line bg-white p-5 shadow-panel">
|
||||
<h2 class="font-extrabold">用户注册</h2>
|
||||
<form method="post" action="{{ url_for('main.update_registration_setting') }}" class="mt-3 flex items-center gap-3">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<label class="text-sm">
|
||||
<input type="checkbox" name="allow_registration" {{ 'checked' if registration_allowed }}>
|
||||
允许自助注册
|
||||
</label>
|
||||
<button class="ui-btn ui-btn-sm ui-btn-primary">保存</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<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">
|
||||
<section class="mt-6 rounded-xl border border-line bg-white p-5 shadow-panel">
|
||||
<h2 class="font-extrabold">用户密码重置</h2>
|
||||
<p class="mt-1 text-sm text-textSub">向用户已验证邮箱发送重置通知。</p>
|
||||
<div class="mt-4 overflow-x-auto">
|
||||
<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>
|
||||
<thead>
|
||||
<tr class="border-b border-line text-left">
|
||||
<th class="p-2">显示名</th><th class="p-2">邮箱</th><th class="p-2">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-line">
|
||||
<tbody>
|
||||
{% 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">{{ format_datetime(user.created_at) }}</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">
|
||||
<tr class="border-b border-line">
|
||||
<td class="p-2">{{ user.username }}</td>
|
||||
<td class="p-2">{{ user.email or '未设置' }}</td>
|
||||
<td class="p-2">
|
||||
{% if user.email %}
|
||||
<form method="post" action="{{ url_for('main.admin_password_reset', user_id=user.id) }}">
|
||||
<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>
|
||||
<button class="ui-btn ui-btn-sm ui-btn-secondary">发送重置通知</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</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>
|
||||
{% if pagination.total %}
|
||||
<span class="text-sm text-textSub">共 {{ pagination.total }} 条</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-h-0 flex-1 overflow-auto">
|
||||
<section class="mt-6 rounded-xl border border-line bg-white p-5 shadow-panel">
|
||||
<h2 class="font-extrabold">上传记录</h2>
|
||||
<div class="mt-4 overflow-x-auto">
|
||||
<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-5 py-4 text-left">用户</th>
|
||||
<th class="px-5 py-4 text-left">原始文件</th>
|
||||
<th class="px-5 py-4 text-left">上传时间</th>
|
||||
<th class="px-5 py-4 text-left">下载</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-line">
|
||||
{% for record in records %}
|
||||
<tr class="hover:bg-slate-50">
|
||||
<td class="px-5 py-4 font-semibold">{{ record.user.username }}</td>
|
||||
<td class="max-w-[420px] truncate px-5 py-4">{{ record.original_filename }}</td>
|
||||
<td class="px-5 py-4 text-textSub">{{ format_datetime(record.upload_time) }}</td>
|
||||
<td class="px-5 py-4">
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<a class="font-bold text-primary" href="{{ url_for('main.download_file', record_id=record.id, file_type='original') }}">原始文件</a>
|
||||
<a class="font-bold text-primary" href="{{ url_for('main.download_file', record_id=record.id, file_type='prediction') }}">预测结果</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="4" class="px-5 py-12 text-center text-textSub">暂无上传记录</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<thead><tr class="border-b border-line text-left"><th class="p-2">用户</th><th class="p-2">文件</th><th class="p-2">时间</th></tr></thead>
|
||||
<tbody>{% for record in records %}<tr class="border-b border-line"><td class="p-2">{{ record.user.username }}</td><td class="p-2">{{ record.original_filename }}</td><td class="p-2">{{ format_datetime(record.upload_time) }}</td></tr>{% endfor %}</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{ render_pagination(pagination, 'main.admin_dashboard') }}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
(() => {
|
||||
const form = document.getElementById('registrationForm');
|
||||
const toggle = document.getElementById('registrationToggle');
|
||||
const status = document.getElementById('registrationStatus');
|
||||
const submit = document.getElementById('registrationSubmit');
|
||||
const submitText = document.getElementById('registrationSubmitText');
|
||||
|
||||
if (!form || !toggle || !status || !submit || !submitText) return;
|
||||
|
||||
form.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
submit.disabled = true;
|
||||
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;
|
||||
}
|
||||
|
||||
toggle.checked = Boolean(data.registration_allowed);
|
||||
status.textContent = data.status_label;
|
||||
status.classList.toggle('text-successText', data.registration_allowed);
|
||||
status.classList.toggle('text-slate-600', !data.registration_allowed);
|
||||
window.showAppNotification?.(data.message, 'info');
|
||||
} catch (error) {
|
||||
window.showAppNotification?.('请求失败，请检查后端服务是否正常。', 'error', '保存失败');
|
||||
} finally {
|
||||
submit.disabled = false;
|
||||
submitText.textContent = '保存';
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
(() => {
|
||||
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 %}
|
||||
|
||||
+3
-2
@@ -20,11 +20,12 @@
|
||||
<a href="{{ url_for('main.result_page') }}" class="flex h-full items-center px-3 {{ 'text-primary border-b-2 border-primary' if active_page == 'result' else 'text-slate-500 border-b-2 border-transparent hover:text-primary' }}">结果</a>
|
||||
<a href="{{ url_for('main.history_page') }}" class="flex h-full items-center px-3 {{ 'text-primary border-b-2 border-primary' if active_page == 'history' else 'text-slate-500 border-b-2 border-transparent hover:text-primary' }}">历史</a>
|
||||
<a href="{{ url_for('main.reference_page') }}" class="flex h-full items-center px-3 {{ 'text-primary border-b-2 border-primary' if active_page == 'reference' else 'text-slate-500 border-b-2 border-transparent hover:text-primary' }}">文档</a>
|
||||
<a href="{{ url_for('main.account_security') }}" class="flex h-full items-center px-3 text-slate-500 border-b-2 border-transparent hover:text-primary">安全</a>
|
||||
{% if current_user.is_admin %}
|
||||
<a href="{{ url_for('main.admin_dashboard') }}" class="flex h-full items-center px-3 {{ 'text-primary border-b-2 border-primary' if active_page == 'admin' else 'text-slate-500 border-b-2 border-transparent hover:text-primary' }}">管理</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
<div class="flex items-center gap-3">
|
||||
{% if current_user.is_authenticated %}<div class="flex items-center gap-3">
|
||||
<div class="hidden sm:flex items-center gap-2 text-sm font-semibold text-slate-600">
|
||||
<div class="h-8 w-8 rounded-full bg-primary text-white flex items-center justify-center text-xs">{{ current_user.username[:1]|upper }}</div>
|
||||
<span class="max-w-[120px] truncate">{{ current_user.username }}</span>
|
||||
@@ -33,7 +34,7 @@
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
<button class="ui-btn ui-btn-sm ui-btn-secondary font-semibold text-slate-600" type="submit">退出</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="md:hidden border-t border-line bg-white">
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
{% extends "base.html" %}{% block content %}<section class="mx-auto max-w-md rounded-xl border border-line bg-white p-6 shadow-panel"><h1 class="text-2xl font-extrabold">找回密码</h1><p class="mt-2 text-sm text-textSub">输入邮箱后，如账户存在会收到验证码。</p><form method="post" class="mt-5 space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input name="email" type="email" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="邮箱"><button class="ui-btn ui-btn-primary w-full">发送验证码</button></form></section>{% endblock %}
|
||||
+11
-447
@@ -1,454 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ '注册' if mode == 'register' else '登录' }} | 供水管道健康评估系统</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>
|
||||
.password-toggle {
|
||||
position: absolute;
|
||||
right: .75rem;
|
||||
top: 50%;
|
||||
display: inline-flex;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transform: translateY(-50%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
border-radius: .5rem;
|
||||
background: transparent;
|
||||
color: #64748b;
|
||||
padding: 0;
|
||||
transition: background-color .15s ease, color .15s ease;
|
||||
}
|
||||
.password-toggle:hover {
|
||||
background: rgba(148, 163, 184, .16);
|
||||
color: #005EB8;
|
||||
}
|
||||
.password-toggle:focus-visible {
|
||||
outline: 2px solid #005EB8;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.password-toggle:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .45;
|
||||
}
|
||||
.password-toggle .material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
}
|
||||
.auth-input-error {
|
||||
border-color: #dc2626 !important;
|
||||
background: #fff7f7 !important;
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
|
||||
}
|
||||
.captcha-token {
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.dot-grid {
|
||||
background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,.30) 1.2px, transparent 0);
|
||||
background-size: 42px 42px;
|
||||
}
|
||||
.panel-frame {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
.gradient-board {
|
||||
background: linear-gradient(180deg, #2455a3 0%, #123e7d 100%);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
@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>
|
||||
<link href="{{ url_for('static', filename='css/app.css') }}" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-page min-h-screen text-textMain">
|
||||
{% set page_notice = "当前未开放自助注册。系统仅支持管理员分配账号，请联系管理员完成账号开通后再登录。" if mode == 'register' and not allow_registration else none %}
|
||||
{% with flashed_messages = get_flashed_messages(with_categories=true) %}
|
||||
<script>
|
||||
window.__flashMessages = {{ flashed_messages|tojson }};
|
||||
window.__pageNotice = {{ page_notice|tojson }};
|
||||
</script>
|
||||
<div class="sr-only" aria-hidden="true">
|
||||
{% for category, message in flashed_messages %}{{ message }}{% endfor %}
|
||||
{% if page_notice %}{{ page_notice }}{% endif %}
|
||||
</div>
|
||||
{% endwith %}
|
||||
|
||||
<div class="min-h-screen grid lg:grid-cols-[1.4fr_1fr]">
|
||||
<section class="gradient-board hidden lg:flex flex-col justify-between px-16 py-14 text-white">
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="mb-8 flex items-center gap-3 text-[26px] font-extrabold tracking-tight text-white">
|
||||
<span class="material-symbols-outlined text-[32px]">water_drop</span>
|
||||
<span>供水管道健康评估系统</span>
|
||||
</div>
|
||||
<h1 class="text-[52px] leading-[1.5] font-extrabold tracking-tight">
|
||||
供水管道健康状态与<br>
|
||||
剩余寿命评估系统<br>
|
||||
</h1>
|
||||
<p class="mt-6 text-white/75 text-[15px] max-w-[440px] leading-7">上传管网数据，自动生成健康状态评估、剩余寿命预测与电子表格报告。</p>
|
||||
</div>
|
||||
<div class="text-white/50 text-[12px]">© {{ now_year() }} 供水管道健康评估系统</div>
|
||||
<body class="min-h-screen bg-page text-textMain">
|
||||
<main class="mx-auto flex min-h-screen max-w-md items-center px-5">
|
||||
<section class="w-full rounded-2xl border border-line bg-white p-7 shadow-panel">
|
||||
<header class="mb-7 text-center"><span class="material-symbols-outlined text-4xl text-primary">water_drop</span><h1 class="mt-2 text-2xl font-extrabold">供水管道健康评估系统</h1><p class="mt-2 text-sm text-textSub">{{ '使用邮箱创建账号' if mode == 'register' else '使用邮箱安全登录' }}</p></header>
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}{% for category, message in messages %}<p class="mb-4 rounded-lg p-3 text-sm {{ 'bg-dangerSoft text-dangerText' if category == 'error' else 'bg-blueSoft text-primary' }}">{{ message }}</p>{% endfor %}{% endwith %}
|
||||
<nav class="mb-5 flex gap-5 border-b border-line text-sm font-bold"><a class="pb-3 {{ 'border-b-2 border-primary text-primary' if mode == 'login' else 'text-textSub' }}" href="{{ url_for('main.login') }}">登录</a><a class="pb-3 {{ 'border-b-2 border-primary text-primary' if mode == 'register' else 'text-textSub' }}" href="{{ url_for('main.register') }}">注册</a></nav>
|
||||
{% if mode == 'login' %}{% include "_login_form.html" %}{% else %}{% include "_register_form.html" %}{% endif %}
|
||||
</section>
|
||||
|
||||
<section id="authPanel" class="relative bg-white flex flex-col justify-between min-h-screen">
|
||||
<div class="flex-1 flex items-center px-7 sm:px-12 md:px-14 py-12">
|
||||
<div id="authCard" class="relative w-full max-w-[360px] min-h-[620px] mx-auto">
|
||||
<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="mb-8 flex items-center justify-center gap-2 text-center text-[18px] font-extrabold text-primary lg:hidden">
|
||||
<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-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>
|
||||
<a href="{{ url_for('main.register') }}" class="border-b-2 py-3 {{ 'text-primary border-primary' if mode == 'register' else 'text-slate-500 border-transparent' }}">注册</a>
|
||||
</div>
|
||||
|
||||
{% if mode == 'login' %}
|
||||
<form method="post" action="{{ url_for('main.login') }}" class="space-y-5" 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>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-lg">person</span>
|
||||
<input name="username" required data-field-label="用户名" class="w-full pl-11 pr-4 py-3.5 rounded-xl bg-[#eceff3] border border-transparent focus:border-primary focus:ring-0" placeholder="请输入用户名" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label class="block text-[11px] tracking-[0.18em] uppercase text-slate-500">密码</label>
|
||||
<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>
|
||||
<input id="loginPassword" name="password" type="password" required data-field-label="密码" class="w-full pl-11 pr-12 py-3.5 rounded-xl bg-[#eceff3] border border-transparent focus:border-primary focus:ring-0" placeholder="请输入密码" />
|
||||
<button class="password-toggle" type="button" data-password-toggle="loginPassword" aria-label="显示密码" aria-pressed="false">
|
||||
<span class="material-symbols-outlined" aria-hidden="true">visibility</span>
|
||||
</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="验证码" class="w-full pl-11 pr-4 py-3.5 rounded-xl bg-[#eceff3] border border-transparent focus:border-primary focus:ring-0" placeholder="请输入验证码" />
|
||||
</div>
|
||||
<div class="captcha-token rounded-xl bg-blueSoft text-textMain border border-blue-100 h-[50px] flex items-center justify-center font-black tracking-[0.18em] italic" aria-label="验证码" data-captcha-token>{{ captcha }}</div>
|
||||
<a href="{{ url_for('main.login') }}" class="ui-btn ui-btn-field ui-btn-secondary px-0" aria-label="刷新验证码">
|
||||
<span class="material-symbols-outlined">refresh</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="inline-flex items-center gap-2 text-sm text-slate-500">
|
||||
<input type="checkbox" name="remember" class="rounded border-slate-300 text-primary focus:ring-primary" />
|
||||
保持登录状态 24 小时
|
||||
</label>
|
||||
|
||||
<button class="ui-btn ui-btn-lg ui-btn-primary w-full mt-2">
|
||||
登录
|
||||
<span class="material-symbols-outlined text-lg">arrow_forward</span>
|
||||
</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<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>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-lg">badge</span>
|
||||
<input name="username" 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>
|
||||
<div>
|
||||
<label class="block text-[11px] tracking-[0.18em] uppercase text-slate-500 mb-2">密码</label>
|
||||
<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>
|
||||
<input id="registerPassword" name="password" type="password" minlength="6" required data-field-label="密码" {{ 'disabled' if not allow_registration }} class="w-full pl-11 pr-12 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="请输入至少 6 位密码" />
|
||||
<button class="password-toggle" type="button" data-password-toggle="registerPassword" aria-label="显示密码" aria-pressed="false" {{ 'disabled' if not allow_registration }}>
|
||||
<span class="material-symbols-outlined" aria-hidden="true">visibility</span>
|
||||
</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="captcha-token rounded-xl bg-blueSoft text-textMain border border-blue-100 h-[50px] flex items-center justify-center font-black tracking-[0.18em] italic" aria-label="验证码" data-captcha-token>{{ 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>
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
<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="captcha"]');
|
||||
if (message.includes('密码')) return activeForm.querySelector('input[name="password"]');
|
||||
if (message.includes('用户名')) return activeForm.querySelector('input[name="username"]');
|
||||
return null;
|
||||
}
|
||||
|
||||
const flashedMessages = window.__flashMessages || [];
|
||||
const pageNotice = window.__pageNotice;
|
||||
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);
|
||||
}
|
||||
} else if (pageNotice) {
|
||||
showAppNotification(pageNotice);
|
||||
}
|
||||
|
||||
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();
|
||||
const label = emptyField.dataset.fieldLabel || '必填项';
|
||||
showAppNotification(`${label}不能为空`, '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();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
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');
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-captcha-token]').forEach((token) => {
|
||||
token.addEventListener('contextmenu', (event) => event.preventDefault());
|
||||
token.addEventListener('selectstart', (event) => event.preventDefault());
|
||||
});
|
||||
|
||||
document.addEventListener('copy', (event) => {
|
||||
const selection = window.getSelection();
|
||||
if (!selection || selection.rangeCount === 0) return;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
const includesCaptcha = Array.from(document.querySelectorAll('[data-captcha-token]')).some((token) => {
|
||||
return range.intersectsNode(token);
|
||||
});
|
||||
if (includesCaptcha) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('forgotPasswordBtn')?.addEventListener('click', () => {
|
||||
showAppNotification('请联系管理员获取一次性重置链接后设置新密码。', 'info', '密码重置');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
{% extends "base.html" %}{% block content %}<section class="mx-auto max-w-md rounded-xl border border-line bg-white p-6 shadow-panel"><h1 class="text-2xl font-extrabold">{{ title }}</h1>{% with messages=get_flashed_messages(with_categories=true) %}{% for c,m in messages %}<p class="mt-3 text-sm text-dangerText">{{ m }}</p>{% endfor %}{% endwith %}<form method="post" action="{{ action }}" class="mt-5 space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><input name="password" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="新密码（12 至 128 位）"><input name="password_confirm" type="password" minlength="12" required class="w-full rounded-lg border border-line px-3 py-2" placeholder="再次输入新密码"><button class="ui-btn ui-btn-primary w-full">保存密码</button></form></section>{% endblock %}
|
||||
@@ -0,0 +1 @@
|
||||
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>{{ title }}</title><link href="{{ url_for('static', filename='css/app.css') }}" rel="stylesheet"></head><body class="min-h-screen bg-page"><main class="mx-auto flex min-h-screen max-w-md items-center px-5"><section class="w-full rounded-2xl border border-line bg-white p-7 shadow-panel"><h1 class="text-2xl font-extrabold">{{ title }}</h1><p class="mt-2 text-sm text-textSub">验证码已发送至 {{ email }}，10 分钟内有效。</p>{% with messages=get_flashed_messages(with_categories=true) %}{% for c,m in messages %}<p class="mt-4 text-sm text-dangerText">{{ m }}</p>{% endfor %}{% endwith %}<form method="post" class="mt-6 space-y-4"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><label class="block text-sm font-semibold">6 位验证码<input name="code" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" required autofocus class="mt-1 w-full rounded-lg border border-line px-3 py-2 text-center text-xl tracking-[.5em]"></label><button class="ui-btn ui-btn-primary w-full">验证</button></form><form method="post" action="{{ url_for('main.resend_code', purpose=purpose) }}" class="mt-3"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}"><button class="text-sm font-semibold text-primary">重新发送验证码</button></form></section></main></body></html>
|
||||
Reference in New Issue
Block a user