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

实现通过邮件自助重置密码功能： - 新增发送密码重置邮件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>
2025-12-11 21:58:49 +08:00
parent de8edcb3a6
commit 93375b612f
5 changed files with 691 additions and 4 deletions
--- a/templates/email/reset_password.html
+++ b/templates/email/reset_password.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body style="margin: 0; padding: 0; font-family: 'Microsoft YaHei', Arial, sans-serif; background-color: #f5f5f5;">
+    <table width="100%" cellpadding="0" cellspacing="0" style="background-color: #f5f5f5; padding: 30px 0;">
+        <tr>
+            <td align="center">
+                <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
+                    <!-- 头部 -->
+                    <tr>
+                        <td style="background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); padding: 30px; border-radius: 10px 10px 0 0; text-align: center;">
+                            <h1 style="color: #ffffff; margin: 0; font-size: 24px;">知识管理平台</h1>
+                            <p style="color: rgba(255,255,255,0.9); margin: 10px 0 0 0; font-size: 14px;">密码重置验证</p>
+                        </td>
+                    </tr>
+
+                    <!-- 内容 -->
+                    <tr>
+                        <td style="padding: 40px 30px;">
+                            <p style="color: #333; font-size: 16px; margin: 0 0 20px 0;">
+                                您好，<strong>{{ username }}</strong>！
+                            </p>
+                            <p style="color: #666; font-size: 14px; line-height: 1.8; margin: 0 0 25px 0;">
+                                我们收到了您的密码重置请求。请点击下方按钮重置您的密码。
+                            </p>
+
+                            <!-- 重置按钮 -->
+                            <table width="100%" cellpadding="0" cellspacing="0">
+                                <tr>
+                                    <td align="center" style="padding: 20px 0;">
+                                        <a href="{{ reset_url }}" style="display: inline-block; background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); color: #ffffff; text-decoration: none; padding: 15px 40px; border-radius: 30px; font-size: 16px; font-weight: bold;">
+                                            重置密码
+                                        </a>
+                                    </td>
+                                </tr>
+                            </table>
+
+                            <p style="color: #999; font-size: 12px; line-height: 1.8; margin: 25px 0 0 0;">
+                                如果按钮无法点击，请复制以下链接到浏览器打开：
+                            </p>
+                            <p style="color: #e74c3c; font-size: 12px; word-break: break-all; background: #fff5f5; padding: 15px; border-radius: 5px; margin: 10px 0;">
+                                {{ reset_url }}
+                            </p>
+
+                            <div style="background: #fff3e0; border-left: 4px solid #ff9800; padding: 15px; margin: 25px 0; border-radius: 0 5px 5px 0;">
+                                <p style="color: #e65100; font-size: 13px; margin: 0;">
+                                    <strong>注意：</strong>此链接有效期为 30 分钟，过期后需要重新申请。
+                                </p>
+                            </div>
+
+                            <p style="color: #999; font-size: 13px; margin: 20px 0 0 0;">
+                                如果您没有申请过密码重置，请忽略此邮件，您的密码不会被修改。
+                            </p>
+                        </td>
+                    </tr>
+
+                    <!-- 底部 -->
+                    <tr>
+                        <td style="background: #f8f9fa; padding: 20px 30px; border-radius: 0 0 10px 10px; text-align: center;">
+                            <p style="color: #999; font-size: 12px; margin: 0;">
+                                此邮件由系统自动发送，请勿直接回复。
+                            </p>
+                            <p style="color: #ccc; font-size: 11px; margin: 10px 0 0 0;">
+                                &copy; 知识管理平台
+                            </p>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+</body>
+</html>
--- a/templates/login.html
+++ b/templates/login.html
@@ -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();
--- a/templates/reset_password.html
+++ b/templates/reset_password.html
@@ -0,0 +1,266 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>重置密码 - 知识管理平台</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Microsoft YaHei', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .card {
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+            padding: 40px;
+            text-align: center;
+            max-width: 450px;
+            width: 100%;
+        }
+        .icon {
+            width: 80px;
+            height: 80px;
+            background: linear-gradient(135deg, #e74c3c, #c0392b);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 25px;
+        }
+        .icon svg {
+            width: 40px;
+            height: 40px;
+            fill: white;
+        }
+        h1 {
+            color: #333;
+            font-size: 24px;
+            margin-bottom: 10px;
+        }
+        p {
+            color: #666;
+            font-size: 14px;
+            line-height: 1.6;
+            margin-bottom: 25px;
+        }
+        .form-group {
+            margin-bottom: 20px;
+            text-align: left;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #333;
+            font-weight: bold;
+            font-size: 14px;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 12px 15px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 14px;
+            transition: border-color 0.3s;
+        }
+        .form-group input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        .form-group small {
+            color: #999;
+            font-size: 12px;
+            margin-top: 5px;
+            display: block;
+        }
+        .btn {
+            width: 100%;
+            padding: 14px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 30px;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+        }
+        .btn:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .message {
+            padding: 12px 15px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            font-size: 14px;
+            display: none;
+        }
+        .message.error {
+            background: #ffe6e6;
+            color: #d63031;
+            border: 1px solid #ffcdd2;
+        }
+        .message.success {
+            background: #e6ffe6;
+            color: #27ae60;
+            border: 1px solid #c8e6c9;
+        }
+        .back-link {
+            margin-top: 20px;
+        }
+        .back-link a {
+            color: #667eea;
+            text-decoration: none;
+            font-size: 14px;
+        }
+        .back-link a:hover {
+            text-decoration: underline;
+        }
+        .expired {
+            display: none;
+        }
+        .expired .icon {
+            background: linear-gradient(135deg, #95a5a6, #7f8c8d);
+        }
+        @media (max-width: 480px) {
+            body { padding: 12px; }
+            .card { padding: 30px 20px; }
+            h1 { font-size: 20px; }
+        }
+    </style>
+</head>
+<body>
+    <div class="card" id="resetForm">
+        <div class="icon">
+            <svg viewBox="0 0 24 24">
+                <path d="M12.65 10C11.83 7.67 9.61 6 7 6c-3.31 0-6 2.69-6 6s2.69 6 6 6c2.61 0 4.83-1.67 5.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
+            </svg>
+        </div>
+        <h1>重置密码</h1>
+        <p>请输入您的新密码</p>
+
+        <div id="errorMessage" class="message error"></div>
+        <div id="successMessage" class="message success"></div>
+
+        <form onsubmit="handleResetPassword(event)">
+            <div class="form-group">
+                <label for="newPassword">新密码</label>
+                <input type="password" id="newPassword" placeholder="请输入新密码" required minlength="8">
+                <small>至少8位，包含字母和数字</small>
+            </div>
+            <div class="form-group">
+                <label for="confirmPassword">确认密码</label>
+                <input type="password" id="confirmPassword" placeholder="请再次输入新密码" required>
+            </div>
+            <button type="submit" class="btn" id="submitBtn">确认重置</button>
+        </form>
+
+        <div class="back-link">
+            <a href="/login">返回登录</a>
+        </div>
+    </div>
+
+    <div class="card expired" id="expiredCard">
+        <div class="icon">
+            <svg viewBox="0 0 24 24">
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+            </svg>
+        </div>
+        <h1>链接已失效</h1>
+        <p>{{ error_message }}</p>
+        <div class="back-link">
+            <a href="/login">返回登录</a>
+        </div>
+    </div>
+
+    <script>
+        const token = '{{ token }}';
+        const isValid = {{ 'true' if valid else 'false' }};
+
+        if (!isValid) {
+            document.getElementById('resetForm').style.display = 'none';
+            document.getElementById('expiredCard').style.display = 'block';
+        }
+
+        async function handleResetPassword(event) {
+            event.preventDefault();
+
+            const newPassword = document.getElementById('newPassword').value;
+            const confirmPassword = document.getElementById('confirmPassword').value;
+            const errorDiv = document.getElementById('errorMessage');
+            const successDiv = document.getElementById('successMessage');
+            const submitBtn = document.getElementById('submitBtn');
+
+            errorDiv.style.display = 'none';
+            successDiv.style.display = 'none';
+
+            // 验证密码
+            if (newPassword.length < 8) {
+                errorDiv.textContent = '密码长度至少8位';
+                errorDiv.style.display = 'block';
+                return;
+            }
+
+            if (!/[a-zA-Z]/.test(newPassword) || !/\d/.test(newPassword)) {
+                errorDiv.textContent = '密码必须包含字母和数字';
+                errorDiv.style.display = 'block';
+                return;
+            }
+
+            if (newPassword !== confirmPassword) {
+                errorDiv.textContent = '两次输入的密码不一致';
+                errorDiv.style.display = 'block';
+                return;
+            }
+
+            submitBtn.disabled = true;
+            submitBtn.textContent = '处理中...';
+
+            try {
+                const response = await fetch('/api/reset-password-confirm', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ token, new_password: newPassword })
+                });
+
+                const data = await response.json();
+
+                if (response.ok) {
+                    successDiv.textContent = '密码重置成功！3秒后跳转到登录页面...';
+                    successDiv.style.display = 'block';
+                    setTimeout(() => {
+                        window.location.href = '/login';
+                    }, 3000);
+                } else {
+                    errorDiv.textContent = data.error || '重置失败';
+                    errorDiv.style.display = 'block';
+                    submitBtn.disabled = false;
+                    submitBtn.textContent = '确认重置';
+                }
+            } catch (error) {
+                errorDiv.textContent = '网络错误，请稍后重试';
+                errorDiv.style.display = 'block';
+                submitBtn.disabled = false;
+                submitBtn.textContent = '确认重置';
+            }
+        }
+    </script>
+</body>
+</html>