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>
This commit is contained in:
95
app.py
95
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
|
||||
|
||||
160
email_service.py
160
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:
|
||||
|
||||
76
templates/email/reset_password.html
Normal file
76
templates/email/reset_password.html
Normal file
@@ -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;">
|
||||
© 知识管理平台
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</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();
|
||||
|
||||
266
templates/reset_password.html
Normal file
266
templates/reset_password.html
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user