237899745/zsglpt
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加邮件功能第三阶段 - 密码重置

Browse Source 
实现通过邮件自助重置密码功能：
- 新增发送密码重置邮件API (/api/forgot-password)
- 新增密码重置页面路由 (/reset-password/<token>)
- 新增确认密码重置API (/api/reset-password-confirm)

新增文件：
- templates/email/reset_password.html - 密码重置邮件模板
- templates/reset_password.html - 密码重置页面

修改文件：
- email_service.py - 添加密码重置相关函数
  - send_password_reset_email()
  - verify_password_reset_token()
  - confirm_password_reset()
- app.py - 添加密码重置相关API
- templates/login.html - 忘记密码支持两种方式：
  - 启用邮件功能：通过邮件自助重置
  - 未启用邮件：提交申请等待管理员审核

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
yuyx
2025-12-11 21:58:49 +08:00
parent 648cf0adf0
commit 0c0a5a7770
5 changed files with 691 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
templates/login.html
View File

@@ -200,10 +200,23 @@
</div>
<div id="forgotPasswordModal" class="modal-overlay" onclick="if(event.target===this)closeForgotPassword()">
<div class="modal">
<div class="modal-header"><h2>重置密码</h2><p>填写信息后等待管理员审核</p></div>
<div class="modal-header"><h2>重置密码</h2><p id="resetModalDesc">填写信息后等待管理员审核</p></div>
<div class="modal-body">
<div id="modalErrorMessage" class="message error"></div>
<div id="modalSuccessMessage" class="message success"></div>
<!-- 邮件重置方式（启用邮件功能时显示） -->
<form id="emailResetForm" onsubmit="handleEmailReset(event)" style="display: none;">
<div class="form-group"><label>邮箱</label><input type="email" id="emailResetEmail" placeholder="请输入注册邮箱" required></div>
<div class="form-group">
<label>验证码</label>
<div class="captcha-row">
<input type="text" id="emailResetCaptcha" placeholder="请输入验证码" required>
<img id="emailResetCaptchaImage" src="" alt="验证码" style="height: 36px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;" onclick="refreshEmailResetCaptcha()" title="点击刷新">
<button type="button" class="captcha-refresh" onclick="refreshEmailResetCaptcha()">🔄</button>
</div>
</div>
</form>
<!-- 管理员审核方式（未启用邮件功能时显示） -->
<form id="resetPasswordForm" onsubmit="handleResetPassword(event)">
<div class="form-group"><label>用户名</label><input type="text" id="resetUsername" placeholder="请输入用户名" required></div>
<div class="form-group"><label>邮箱（可选）</label><input type="email" id="resetEmail" placeholder="用于验证身份"></div>
@@ -212,7 +225,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn-secondary" onclick="closeForgotPassword()">取消</button>
<button type="button" class="btn-primary" onclick="document.getElementById('resetPasswordForm').dispatchEvent(new Event('submit'))">提交申请</button>
<button type="button" class="btn-primary" id="resetSubmitBtn" onclick="submitResetForm()">提交申请</button>
</div>
</div>
</div>
@@ -244,13 +257,16 @@
<script>
let captchaSession = '';
let resendCaptchaSession = '';
let emailResetCaptchaSession = '';
let needCaptcha = false;
let emailEnabled = false;
// 页面加载时检查邮箱验证是否启用
window.onload = async function() {
try {
const resp = await fetch('/api/email/verify-status');
const data = await resp.json();
emailEnabled = data.email_enabled;
if (data.register_verify_enabled) {
document.getElementById('resendVerifyLink').style.display = 'inline';
}
@@ -277,8 +293,40 @@
else { errorDiv.textContent = data.error || '登录失败'; errorDiv.style.display = 'block'; if (data.need_captcha) { needCaptcha = true; document.getElementById('captchaGroup').style.display = 'block'; await generateCaptcha(); } }
} catch (error) { errorDiv.textContent = '网络错误'; errorDiv.style.display = 'block'; }
}
function showForgotPassword(event) { event.preventDefault(); document.getElementById('forgotPasswordModal').classList.add('active'); }
function closeForgotPassword() { document.getElementById('forgotPasswordModal').classList.remove('active'); document.getElementById('resetPasswordForm').reset(); document.getElementById('modalErrorMessage').style.display = 'none'; document.getElementById('modalSuccessMessage').style.display = 'none'; }
async function showForgotPassword(event) {
event.preventDefault();
document.getElementById('forgotPasswordModal').classList.add('active');
document.getElementById('modalErrorMessage').style.display = 'none';
document.getElementById('modalSuccessMessage').style.display = 'none';
// 根据邮件功能状态切换显示
if (emailEnabled) {
document.getElementById('emailResetForm').style.display = 'block';
document.getElementById('resetPasswordForm').style.display = 'none';
document.getElementById('resetModalDesc').textContent = '输入注册邮箱，我们将发送重置链接';
document.getElementById('resetSubmitBtn').textContent = '发送重置邮件';
await generateEmailResetCaptcha();
} else {
document.getElementById('emailResetForm').style.display = 'none';
document.getElementById('resetPasswordForm').style.display = 'block';
document.getElementById('resetModalDesc').textContent = '填写信息后等待管理员审核';
document.getElementById('resetSubmitBtn').textContent = '提交申请';
}
}
function closeForgotPassword() {
document.getElementById('forgotPasswordModal').classList.remove('active');
document.getElementById('resetPasswordForm').reset();
document.getElementById('emailResetForm').reset();
document.getElementById('modalErrorMessage').style.display = 'none';
document.getElementById('modalSuccessMessage').style.display = 'none';
}
function submitResetForm() {
if (emailEnabled) {
document.getElementById('emailResetForm').dispatchEvent(new Event('submit'));
} else {
document.getElementById('resetPasswordForm').dispatchEvent(new Event('submit'));
}
}
async function handleResetPassword(event) {
event.preventDefault();
const username = document.getElementById('resetUsername').value.trim();
@@ -300,6 +348,48 @@
async function generateCaptcha() { try { const response = await fetch('/api/generate_captcha', { method: 'POST', headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.session_id && data.captcha_image) { captchaSession = data.session_id; document.getElementById('captchaImage').src = data.captcha_image; } } catch (error) { console.error('生成验证码失败:', error); } }
async function refreshCaptcha() { await generateCaptcha(); document.getElementById('captcha').value = ''; }
// 邮件方式重置密码相关函数
async function generateEmailResetCaptcha() {
try {
const response = await fetch('/api/generate_captcha', { method: 'POST', headers: { 'Content-Type': 'application/json' } });
const data = await response.json();
if (data.session_id && data.captcha_image) {
emailResetCaptchaSession = data.session_id;
document.getElementById('emailResetCaptchaImage').src = data.captcha_image;
}
} catch (error) { console.error('生成验证码失败:', error); }
}
async function refreshEmailResetCaptcha() { await generateEmailResetCaptcha(); document.getElementById('emailResetCaptcha').value = ''; }
async function handleEmailReset(event) {
event.preventDefault();
const email = document.getElementById('emailResetEmail').value.trim();
const captcha = document.getElementById('emailResetCaptcha').value.trim();
const errorDiv = document.getElementById('modalErrorMessage');
const successDiv = document.getElementById('modalSuccessMessage');
errorDiv.style.display = 'none'; successDiv.style.display = 'none';
if (!email) { errorDiv.textContent = '请输入邮箱'; errorDiv.style.display = 'block'; return; }
if (!captcha) { errorDiv.textContent = '请输入验证码'; errorDiv.style.display = 'block'; return; }
try {
const response = await fetch('/api/forgot-password', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, captcha_session: emailResetCaptchaSession, captcha })
});
const data = await response.json();
if (response.ok) {
successDiv.innerHTML = data.message + '<br><small style="color: #666;">请检查您的邮箱（包括垃圾邮件文件夹）</small>';
successDiv.style.display = 'block';
setTimeout(closeForgotPassword, 3000);
} else {
errorDiv.textContent = data.error || '发送失败';
errorDiv.style.display = 'block';
await refreshEmailResetCaptcha();
}
} catch (error) { errorDiv.textContent = '网络错误'; errorDiv.style.display = 'block'; }
}
// 重发验证邮件相关函数
async function showResendVerify(event) {
event.preventDefault();