c61969dfc9
新增功能： 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>
430 lines
14 KiB
HTML
430 lines
14 KiB
HTML
{% extends 'base_new.html' %}
|
|
|
|
{% block title %}个人中心 - ZJPB{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.profile-container {
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr;
|
|
gap: 32px;
|
|
margin-top: 32px;
|
|
}
|
|
|
|
/* 侧边栏 */
|
|
.sidebar-card {
|
|
background: var(--bg-white);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-lg);
|
|
padding: 24px;
|
|
align-self: flex-start;
|
|
position: sticky;
|
|
top: 88px;
|
|
}
|
|
|
|
.profile-avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
margin: 0 auto 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
|
|
color: white;
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.profile-username {
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.profile-bio {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.nav-menu {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-menu a {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
border-radius: var(--radius-md);
|
|
color: var(--text-primary);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.nav-menu a:hover {
|
|
background: var(--bg-page);
|
|
}
|
|
|
|
.nav-menu a.active {
|
|
background: rgba(14, 165, 233, 0.1);
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
/* 主内容区 */
|
|
.main-card {
|
|
background: var(--bg-white);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-lg);
|
|
padding: 32px;
|
|
}
|
|
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 20px;
|
|
background: var(--bg-page);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: var(--primary-blue);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.recent-section h2 {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.collection-item {
|
|
display: flex;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-md);
|
|
margin-bottom: 12px;
|
|
text-decoration: none;
|
|
color: var(--text-primary);
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.collection-item:hover {
|
|
border-color: var(--primary-blue);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.collection-logo {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: var(--radius-md);
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.collection-info h3 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.collection-info p {
|
|
font-size: 13px;
|
|
color: var(--text-secondary);
|
|
margin: 0;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.empty-state-icon {
|
|
font-size: 64px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
@media (max-width: 968px) {
|
|
.profile-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sidebar-card {
|
|
position: static;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="main-content">
|
|
<div class="profile-container">
|
|
<!-- 侧边栏 -->
|
|
<div class="sidebar-card">
|
|
<div class="profile-avatar">
|
|
{{ current_user.username[0].upper() }}
|
|
</div>
|
|
<div class="profile-username">{{ current_user.username }}</div>
|
|
<div class="profile-bio">{{ current_user.bio or '这个人很懒，什么都没写' }}</div>
|
|
|
|
<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>
|
|
|
|
<!-- 主内容区 -->
|
|
<div>
|
|
<div class="main-card">
|
|
<h1 style="font-size: 24px; font-weight: 700; margin-bottom: 24px;">个人中心</h1>
|
|
|
|
<!-- 统计卡片 -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-value">{{ collections_count }}</div>
|
|
<div class="stat-label">收藏数</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-value">{{ folders_count }}</div>
|
|
<div class="stat-label">文件夹数</div>
|
|
</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>
|
|
{% if recent_collections %}
|
|
{% for collection in recent_collections %}
|
|
<a href="/site/{{ collection.site.code }}" class="collection-item">
|
|
{% if collection.site.logo %}
|
|
<img src="{{ collection.site.logo }}" alt="{{ collection.site.name }}" class="collection-logo">
|
|
{% else %}
|
|
<div class="collection-logo" style="background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);"></div>
|
|
{% endif %}
|
|
<div class="collection-info">
|
|
<h3>{{ collection.site.name }}</h3>
|
|
<p>{{ collection.site.short_desc or collection.site.description }}</p>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<div class="empty-state-icon">📦</div>
|
|
<p>还没有收藏任何工具</p>
|
|
<p style="margin-top: 8px;"><a href="/" style="color: var(--primary-blue);">去首页逛逛</a></p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</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 %}
|