jowelin/zjpb.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: v3.1 - 用户密码管理和邮箱验证功能

Browse Source 
新增功能：
1. 修改密码功能
   - 用户可以修改自己的密码
   - 需要验证旧密码
   - 新密码至少6位且不能与旧密码相同

2. 邮箱绑定功能
   - 用户可以绑定/修改邮箱
   - 邮箱格式验证和唯一性检查
   - 修改邮箱后需要重新验证

3. 邮箱验证功能
   - 发送验证邮件（24小时有效）
   - 点击邮件链接完成验证
   - 验证状态显示

技术实现：
- 新增4个数据库字段（email_verified等）
- 封装邮件发送工具（utils/email_sender.py）
- 新增5个API接口
- 新增修改密码页面
- 集成邮箱管理到个人中心

文件变更：
- 修改：app.py, models.py, base_new.html, profile.html
- 新增：change_password.html, email_sender.py, migrate_email_verification.py
- 文档：server-update.md, SERVER_RESTART_GUIDE.md

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jowe
2026-02-07 23:26:02 +08:00
parent 1be1f35568
commit c61969dfc9
9 changed files with 1242 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
templates/user/change_password.html Normal file
View File

@@ -0,0 +1,290 @@
{% extends 'base_new.html' %}
{% block title %}修改密码 - ZJPB{% endblock %}
{% block extra_css %}
<style>
.change-password-container {
max-width: 500px;
margin: 48px auto;
padding: 0 20px;
}
.password-card {
background: var(--bg-white);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 32px;
}
.card-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
color: var(--text-primary);
}
.card-subtitle {
font-size: 14px;
color: var(--text-secondary);
margin-bottom: 32px;
}
.form-group {
margin-bottom: 24px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.password-input-wrapper {
position: relative;
}
.form-input {
width: 100%;
padding: 12px 40px 12px 16px;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 14px;
transition: all 0.2s;
}
.form-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}
.toggle-password {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--text-secondary);
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-password:hover {
color: var(--primary-color);
}
.btn-primary {
width: 100%;
padding: 12px;
background: var(--primary-color);
color: white;
border: none;
border-radius: var(--radius-md);
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}
.btn-primary:disabled {
background: var(--border-color);
cursor: not-allowed;
transform: none;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
margin-bottom: 24px;
transition: color 0.2s;
}
.back-link:hover {
color: var(--primary-color);
}
.alert {
padding: 12px 16px;
border-radius: var(--radius-md);
margin-bottom: 24px;
font-size: 14px;
display: none;
}
.alert-success {
background: #d1fae5;
color: #065f46;
border: 1px solid #6ee7b7;
}
.alert-error {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
}
</style>
{% endblock %}
{% block content %}
<div class="change-password-container">
<a href="{{ url_for('user_profile') }}" class="back-link">
<span class="material-symbols-outlined" style="font-size: 18px;">arrow_back</span>
返回个人中心
</a>
<div class="password-card">
<h1 class="card-title">修改密码</h1>
<p class="card-subtitle">为了您的账户安全，请定期修改密码</p>
<div id="alert" class="alert"></div>
<form id="changePasswordForm">
<div class="form-group">
<label class="form-label" for="old_password">旧密码</label>
<div class="password-input-wrapper">
<input type="password" id="old_password" name="old_password" class="form-input" required>
<button type="button" class="toggle-password" onclick="togglePassword('old_password')">
<span class="material-symbols-outlined" style="font-size: 20px;">visibility</span>
</button>
</div>
</div>
<div class="form-group">
<label class="form-label" for="new_password">新密码</label>
<div class="password-input-wrapper">
<input type="password" id="new_password" name="new_password" class="form-input" required minlength="6">
<button type="button" class="toggle-password" onclick="togglePassword('new_password')">
<span class="material-symbols-outlined" style="font-size: 20px;">visibility</span>
</button>
</div>
<small style="color: var(--text-secondary); font-size: 12px; margin-top: 4px; display: block;">至少6个字符</small>
</div>
<div class="form-group">
<label class="form-label" for="confirm_password">确认新密码</label>
<div class="password-input-wrapper">
<input type="password" id="confirm_password" name="confirm_password" class="form-input" required minlength="6">
<button type="button" class="toggle-password" onclick="togglePassword('confirm_password')">
<span class="material-symbols-outlined" style="font-size: 20px;">visibility</span>
</button>
</div>
</div>
<button type="submit" class="btn-primary" id="submitBtn">
修改密码
</button>
</form>
</div>
</div>
<script>
// 密码可见性切换
function togglePassword(inputId) {
const input = document.getElementById(inputId);
const button = input.nextElementSibling;
const icon = button.querySelector('.material-symbols-outlined');
if (input.type === 'password') {
input.type = 'text';
icon.textContent = 'visibility_off';
} else {
input.type = 'password';
icon.textContent = 'visibility';
}
}
// 显示提示消息
function showAlert(message, type) {
const alert = document.getElementById('alert');
alert.textContent = message;
alert.className = `alert alert-${type}`;
alert.style.display = 'block';
// 3秒后自动隐藏
setTimeout(() => {
alert.style.display = 'none';
}, 3000);
}
// 表单提交
document.getElementById('changePasswordForm').addEventListener('submit', async (e) => {
e.preventDefault();
const submitBtn = document.getElementById('submitBtn');
const oldPassword = document.getElementById('old_password').value;
const newPassword = document.getElementById('new_password').value;
const confirmPassword = document.getElementById('confirm_password').value;
// 前端验证
if (newPassword !== confirmPassword) {
showAlert('两次输入的新密码不一致', 'error');
return;
}
if (newPassword.length < 6) {
showAlert('新密码长度至少6位', 'error');
return;
}
if (oldPassword === newPassword) {
showAlert('新密码不能与旧密码相同', 'error');
return;
}
// 禁用按钮
submitBtn.disabled = true;
submitBtn.textContent = '修改中...';
try {
const response = await fetch('/api/user/change-password', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
old_password: oldPassword,
new_password: newPassword,
confirm_password: confirmPassword
})
});
const data = await response.json();
if (data.success) {
showAlert(data.message, 'success');
// 清空表单
document.getElementById('changePasswordForm').reset();
// 2秒后跳转到个人中心
setTimeout(() => {
window.location.href = '{{ url_for("user_profile") }}';
}, 2000);
} else {
showAlert(data.message, 'error');
submitBtn.disabled = false;
submitBtn.textContent = '修改密码';
}
} catch (error) {
showAlert('网络错误，请稍后重试', 'error');
submitBtn.disabled = false;
submitBtn.textContent = '修改密码';
}
});
</script>
{% endblock %}

184
templates/user/profile.html
View File

@@ -193,6 +193,7 @@
<ul class="nav-menu">
<li><a href="/user/profile" class="active">👤 个人资料</a></li>
<li><a href="/user/collections">⭐ 我的收藏</a></li>
<li><a href="/user/change-password">🔒 修改密码</a></li>
</ul>
</div>
@@ -213,6 +214,47 @@
</div>
</div>
<!-- 邮箱管理 -->
<div class="recent-section" style="margin-bottom: 32px;">
<h2>邮箱管理</h2>
<div style="background: white; padding: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-md);">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;">
<div>
<div style="font-size: 14px; color: var(--text-secondary); margin-bottom: 4px;">当前邮箱</div>
<div style="font-size: 16px; font-weight: 600;" id="currentEmail">
{{ current_user.email or '未绑定' }}
</div>
</div>
{% if current_user.email %}
<div>
{% if current_user.email_verified %}
<span style="display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: #d1fae5; color: #065f46; border-radius: 12px; font-size: 12px;">
<span class="material-symbols-outlined" style="font-size: 16px;">check_circle</span>
已验证
</span>
{% else %}
<span style="display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; background: #fef3c7; color: #92400e; border-radius: 12px; font-size: 12px;">
<span class="material-symbols-outlined" style="font-size: 16px;">warning</span>
未验证
</span>
{% endif %}
</div>
{% endif %}
</div>
<div style="display: flex; gap: 12px;">
<button onclick="showEmailModal()" style="padding: 8px 16px; background: var(--primary-blue); color: white; border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 14px;">
{{ '修改邮箱' if current_user.email else '绑定邮箱' }}
</button>
{% if current_user.email and not current_user.email_verified %}
<button onclick="sendVerifyEmail()" id="verifyBtn" style="padding: 8px 16px; background: #f59e0b; color: white; border: none; border-radius: var(--radius-md); cursor: pointer; font-size: 14px;">
发送验证邮件
</button>
{% endif %}
</div>
</div>
</div>
<!-- 最近收藏 -->
<div class="recent-section">
<h2>最近收藏</h2>
@@ -242,4 +284,146 @@
</div>
</div>
</div>
<!-- 邮箱管理弹窗 -->
<div id="emailModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
<div style="background: white; border-radius: var(--radius-lg); padding: 32px; max-width: 500px; width: 90%;">
<h2 style="font-size: 20px; font-weight: 700; margin-bottom: 24px;">{{ '修改邮箱' if current_user.email else '绑定邮箱' }}</h2>
<div id="emailAlert" style="display: none; padding: 12px; border-radius: var(--radius-md); margin-bottom: 16px; font-size: 14px;"></div>
<div style="margin-bottom: 20px;">
<label style="display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px;">邮箱地址</label>
<input type="email" id="emailInput" placeholder="请输入邮箱地址" style="width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); font-size: 14px;">
</div>
<div style="display: flex; gap: 12px; justify-content: flex-end;">
<button onclick="hideEmailModal()" style="padding: 10px 20px; background: transparent; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer;">
取消
</button>
<button onclick="updateEmail()" id="emailSubmitBtn" style="padding: 10px 20px; background: var(--primary-blue); color: white; border: none; border-radius: var(--radius-md); cursor: pointer;">
确定
</button>
</div>
</div>
</div>
<script>
// 显示邮箱弹窗
function showEmailModal() {
const modal = document.getElementById('emailModal');
const input = document.getElementById('emailInput');
input.value = '{{ current_user.email or "" }}';
modal.style.display = 'flex';
}
// 隐藏邮箱弹窗
function hideEmailModal() {
const modal = document.getElementById('emailModal');
modal.style.display = 'none';
document.getElementById('emailAlert').style.display = 'none';
}
// 显示弹窗提示
function showEmailAlert(message, type) {
const alert = document.getElementById('emailAlert');
alert.textContent = message;
alert.style.display = 'block';
if (type === 'success') {
alert.style.background = '#d1fae5';
alert.style.color = '#065f46';
alert.style.border = '1px solid #6ee7b7';
} else {
alert.style.background = '#fee2e2';
alert.style.color = '#991b1b';
alert.style.border = '1px solid #fca5a5';
}
}
// 更新邮箱
async function updateEmail() {
const email = document.getElementById('emailInput').value.trim();
const submitBtn = document.getElementById('emailSubmitBtn');
if (!email) {
showEmailAlert('请输入邮箱地址', 'error');
return;
}
// 验证邮箱格式
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
showEmailAlert('邮箱格式不正确', 'error');
return;
}
submitBtn.disabled = true;
submitBtn.textContent = '提交中...';
try {
const response = await fetch('/api/user/email', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email: email })
});
const data = await response.json();
if (data.success) {
showEmailAlert(data.message, 'success');
setTimeout(() => {
location.reload();
}, 1500);
} else {
showEmailAlert(data.message, 'error');
submitBtn.disabled = false;
submitBtn.textContent = '确定';
}
} catch (error) {
showEmailAlert('网络错误，请稍后重试', 'error');
submitBtn.disabled = false;
submitBtn.textContent = '确定';
}
}
// 发送验证邮件
async function sendVerifyEmail() {
const btn = document.getElementById('verifyBtn');
btn.disabled = true;
btn.textContent = '发送中...';
try {
const response = await fetch('/api/user/send-verify-email', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
});
const data = await response.json();
if (data.success) {
alert(data.message);
} else {
alert(data.message);
btn.disabled = false;
btn.textContent = '发送验证邮件';
}
} catch (error) {
alert('网络错误，请稍后重试');
btn.disabled = false;
btn.textContent = '发送验证邮件';
}
}
// 点击弹窗外部关闭
document.getElementById('emailModal').addEventListener('click', function(e) {
if (e.target === this) {
hideEmailModal();
}
});
</script>
{% endblock %}