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>

app.py

@@ -846,6 +846,101 @@ def get_email_verify_status():
         })
 
 
+# ==================== 密码重置（邮件方式）API ====================
+
+@app.route('/api/forgot-password', methods=['POST'])
+@require_ip_not_locked
+def forgot_password():
+    """发送密码重置邮件"""
+    data = request.json
+    email = data.get('email', '').strip()
+    captcha_session = data.get('captcha_session', '')
+    captcha_code = data.get('captcha', '').strip()
+
+    if not email:
+        return jsonify({"error": "请输入邮箱"}), 400
+
+    # 获取客户端IP
+    client_ip = get_client_ip()
+
+    # 检查IP限流
+    allowed, error_msg = check_ip_rate_limit(client_ip)
+    if not allowed:
+        return jsonify({"error": error_msg}), 429
+
+    # 验证验证码
+    success, message = verify_and_consume_captcha(captcha_session, captcha_code, captcha_storage, MAX_CAPTCHA_ATTEMPTS)
+    if not success:
+        is_locked = record_failed_captcha(client_ip)
+        if is_locked:
+            return jsonify({"error": "验证码错误次数过多,IP已被锁定1小时"}), 429
+        return jsonify({"error": message}), 400
+
+    # 检查邮件功能是否启用
+    email_settings = email_service.get_email_settings()
+    if not email_settings.get('enabled', False):
+        return jsonify({"error": "邮件功能未启用，请联系管理员"}), 400
+
+    # 查找用户（防止用户枚举，统一返回成功消息）
+    user = database.get_user_by_email(email)
+    if user and user.get('status') == 'approved':
+        # 发送重置邮件
+        result = email_service.send_password_reset_email(
+            email=email,
+            username=user['username'],
+            user_id=user['id']
+        )
+        if not result['success']:
+            logger.error(f"密码重置邮件发送失败: {result['error']}")
+            # 即使失败也返回统一消息，防止信息泄露
+
+    # 统一返回成功消息
+    return jsonify({
+        "success": True,
+        "message": "如果该邮箱已注册，您将收到密码重置邮件"
+    })
+
+
+@app.route('/reset-password/<token>')
+def reset_password_page(token):
+    """密码重置页面"""
+    result = email_service.verify_password_reset_token(token)
+    if result:
+        return render_template('reset_password.html', token=token, valid=True, error_message='')
+    else:
+        return render_template('reset_password.html', token=token, valid=False,
+                             error_message='重置链接无效或已过期，请重新申请密码重置')
+
+
+@app.route('/api/reset-password-confirm', methods=['POST'])
+def reset_password_confirm():
+    """确认密码重置"""
+    data = request.json
+    token = data.get('token', '').strip()
+    new_password = data.get('new_password', '').strip()
+
+    if not token or not new_password:
+        return jsonify({"error": "参数不完整"}), 400
+
+    # 验证密码强度
+    is_valid, error_msg = validate_password(new_password)
+    if not is_valid:
+        return jsonify({"error": error_msg}), 400
+
+    # 验证并消费token
+    result = email_service.confirm_password_reset(token)
+    if not result:
+        return jsonify({"error": "重置链接无效或已过期"}), 400
+
+    # 更新用户密码
+    user_id = result['user_id']
+    if database.admin_reset_user_password(user_id, new_password):
+        logger.info(f"用户密码重置成功: user_id={user_id}")
+        return jsonify({"success": True, "message": "密码重置成功"})
+    else:
+        return jsonify({"error": "密码重置失败"}), 500
+
+
 # ==================== 验证码API ====================
 import random
 from task_checkpoint import get_checkpoint_manager, TaskStage

email_service.py

@@ -1225,6 +1225,166 @@ def resend_register_verification_email(user_id: int, email: str, username: str)
     return send_register_verification_email(email, username, user_id)
 
 
+# ============ 密码重置邮件 ============
+
+def send_password_reset_email(
+    email: str,
+    username: str,
+    user_id: int,
+    base_url: str = None
+) -> Dict[str, Any]:
+    """
+    发送密码重置邮件
+
+    Args:
+        email: 用户邮箱
+        username: 用户名
+        user_id: 用户ID
+        base_url: 网站基础URL
+
+    Returns:
+        {'success': bool, 'error': str, 'token': str}
+    """
+    # 检查发送频率限制（密码重置限制5分钟）
+    if not check_rate_limit(email, EMAIL_TYPE_RESET):
+        return {
+            'success': False,
+            'error': '发送太频繁，请5分钟后再试',
+            'token': None
+        }
+
+    # 使旧的重置token失效
+    with db_pool.get_db() as conn:
+        cursor = conn.cursor()
+        cursor.execute("""
+            UPDATE email_tokens SET used = 1
+            WHERE user_id = ? AND token_type = ? AND used = 0
+        """, (user_id, EMAIL_TYPE_RESET))
+        conn.commit()
+
+    # 生成新的验证Token
+    token = generate_email_token(email, EMAIL_TYPE_RESET, user_id)
+
+    # 获取base_url
+    if not base_url:
+        settings = get_email_settings()
+        base_url = settings.get('base_url', '')
+
+    if not base_url:
+        try:
+            from app_config import Config
+            base_url = Config.BASE_URL
+        except:
+            base_url = 'http://localhost:51233'
+
+    # 生成重置链接
+    reset_url = f"{base_url.rstrip('/')}/reset-password/{token}"
+
+    # 读取邮件模板
+    template_path = os.path.join(os.path.dirname(__file__), 'templates', 'email', 'reset_password.html')
+    try:
+        with open(template_path, 'r', encoding='utf-8') as f:
+            html_template = f.read()
+    except FileNotFoundError:
+        html_template = """
+        <html>
+        <body>
+            <h1>密码重置</h1>
+            <p>您好，{{ username }}！</p>
+            <p>请点击下面的链接重置您的密码：</p>
+            <p><a href="{{ reset_url }}">{{ reset_url }}</a></p>
+            <p>此链接30分钟内有效。</p>
+        </body>
+        </html>
+        """
+
+    # 替换模板变量
+    html_body = html_template.replace('{{ username }}', username)
+    html_body = html_body.replace('{{ reset_url }}', reset_url)
+
+    # 纯文本版本
+    text_body = f"""
+您好，{username}！
+
+我们收到了您的密码重置请求。请点击下面的链接重置您的密码：
+
+{reset_url}
+
+此链接30分钟内有效。
+
+如果您没有申请过密码重置，请忽略此邮件。
+"""
+
+    # 发送邮件
+    result = send_email(
+        to_email=email,
+        subject='【知识管理平台】密码重置',
+        body=text_body,
+        html_body=html_body,
+        email_type=EMAIL_TYPE_RESET,
+        user_id=user_id
+    )
+
+    if result['success']:
+        return {'success': True, 'error': '', 'token': token}
+    else:
+        return {'success': False, 'error': result['error'], 'token': None}
+
+
+def verify_password_reset_token(token: str) -> Optional[Dict[str, Any]]:
+    """
+    验证密码重置Token（不标记为已使用）
+
+    Returns:
+        成功返回 {'user_id': int, 'email': str}，失败返回 None
+    """
+    with db_pool.get_db() as conn:
+        cursor = conn.cursor()
+        cursor.execute("""
+            SELECT id, user_id, email, expires_at, used
+            FROM email_tokens
+            WHERE token = ? AND token_type = ?
+        """, (token, EMAIL_TYPE_RESET))
+
+        row = cursor.fetchone()
+        if not row:
+            return None
+
+        token_id, user_id, email, expires_at, used = row
+
+        # 检查是否已使用
+        if used:
+            return None
+
+        # 检查是否过期
+        if datetime.strptime(expires_at, '%Y-%m-%d %H:%M:%S') < datetime.now():
+            return None
+
+        return {'user_id': user_id, 'email': email, 'token_id': token_id}
+
+
+def confirm_password_reset(token: str) -> Optional[Dict[str, Any]]:
+    """
+    确认密码重置（标记Token为已使用）
+
+    Returns:
+        成功返回 {'user_id': int, 'email': str}，失败返回 None
+    """
+    result = verify_password_reset_token(token)
+    if not result:
+        return None
+
+    # 标记为已使用
+    with db_pool.get_db() as conn:
+        cursor = conn.cursor()
+        cursor.execute("""
+            UPDATE email_tokens SET used = 1 WHERE id = ?
+        """, (result['token_id'],))
+        conn.commit()
+
+    return {'user_id': result['user_id'], 'email': result['email']}
+
+
 # ============ 异步发送队列 ============
 
 class EmailQueue:

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>

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();

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>