feat(auth): add password reset flow
Add admin-generated reset links, reset UI, timezone-aware expiry display, and registration captcha coverage.
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user