538 lines
14 KiB
HTML
538 lines
14 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block title %}个人设置{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="content-header">
|
||
<h1>个人设置</h1>
|
||
<p>管理您的个人信息和账户设置</p>
|
||
</div>
|
||
|
||
<!-- 用户信息卡片 -->
|
||
<div class="card">
|
||
<h3 style="margin-bottom: 20px; color: var(--primary); font-size: 18px;">
|
||
<i style="margin-right: 8px;">👤</i>
|
||
用户信息
|
||
</h3>
|
||
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<span class="info-label">用户名:</span>
|
||
<span class="info-value">{{ session.username }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">权限级别:</span>
|
||
<span class="permission-badge {{ 'admin' if session.permission == 0 else 'user' }}">
|
||
{{ '管理员' if session.permission == 0 else '普通用户' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 修改密码卡片 -->
|
||
<div class="card">
|
||
<h3 style="margin-bottom: 20px; color: var(--primary); font-size: 18px;">
|
||
<i style="margin-right: 8px;">🔒</i>
|
||
修改密码
|
||
</h3>
|
||
|
||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||
{% if messages %}
|
||
{% for category, message in messages %}
|
||
<div class="alert alert-{{ 'success' if category == 'success' else 'error' }}">
|
||
{{ message }}
|
||
</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endwith %}
|
||
|
||
<form method="POST" action="{{ url_for('change_own_password') }}" class="password-form" id="passwordForm">
|
||
<div class="form-group">
|
||
<label for="old_password">当前密码:</label>
|
||
<input type="password" id="old_password" name="old_password" required class="form-input">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="new_password">新密码:</label>
|
||
<input type="password" id="new_password" name="new_password" required class="form-input" minlength="6">
|
||
<small class="form-help">密码长度至少6位</small>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="confirm_password">确认新密码:</label>
|
||
<input type="password" id="confirm_password" name="confirm_password" required class="form-input">
|
||
<small class="form-help" id="password-match-msg"></small>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary" id="submitBtn">
|
||
<i style="margin-right: 5px;">💾</i>
|
||
修改密码
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<style>
|
||
.content-header {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.content-header h1 {
|
||
color: var(--primary);
|
||
font-size: 28px;
|
||
margin-bottom: 8px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.content-header p {
|
||
color: #666;
|
||
font-size: 16px;
|
||
margin: 0;
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
gap: 15px;
|
||
}
|
||
|
||
.info-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.info-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-label {
|
||
font-weight: 500;
|
||
color: #555;
|
||
}
|
||
|
||
.info-value {
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.permission-badge {
|
||
padding: 4px 12px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.permission-badge.admin {
|
||
background: var(--accent);
|
||
color: white;
|
||
}
|
||
|
||
.permission-badge.user {
|
||
background: var(--success);
|
||
color: white;
|
||
}
|
||
|
||
.password-form {
|
||
max-width: 400px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 5px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
border: 2px solid #e1e5e9;
|
||
border-radius: var(--radius);
|
||
font-size: 14px;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.form-input:focus {
|
||
outline: none;
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
|
||
}
|
||
|
||
.form-help {
|
||
display: block;
|
||
margin-top: 5px;
|
||
font-size: 12px;
|
||
color: #666;
|
||
}
|
||
|
||
.form-actions {
|
||
margin-top: 25px;
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: var(--radius);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--primary);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--secondary);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.6;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.alert {
|
||
padding: 12px 16px;
|
||
border-radius: var(--radius);
|
||
margin-bottom: 20px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.alert-success {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
|
||
.alert-error {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.password-form {
|
||
max-width: none;
|
||
}
|
||
|
||
.info-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 5px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const newPassword = document.getElementById('new_password');
|
||
const confirmPassword = document.getElementById('confirm_password');
|
||
const submitBtn = document.getElementById('submitBtn');
|
||
const matchMsg = document.getElementById('password-match-msg');
|
||
|
||
function checkPasswordMatch() {
|
||
if (confirmPassword.value === '') {
|
||
matchMsg.textContent = '';
|
||
matchMsg.style.color = '#666';
|
||
return;
|
||
}
|
||
|
||
if (newPassword.value === confirmPassword.value) {
|
||
matchMsg.textContent = '✓ 密码匹配';
|
||
matchMsg.style.color = '#28a745';
|
||
submitBtn.disabled = false;
|
||
} else {
|
||
matchMsg.textContent = '✗ 密码不匹配';
|
||
matchMsg.style.color = '#dc3545';
|
||
submitBtn.disabled = true;
|
||
}
|
||
}
|
||
|
||
newPassword.addEventListener('input', checkPasswordMatch);
|
||
confirmPassword.addEventListener('input', checkPasswordMatch);
|
||
|
||
// 表单验证
|
||
document.getElementById('passwordForm').addEventListener('submit', function(e) {
|
||
if (newPassword.value !== confirmPassword.value) {
|
||
e.preventDefault();
|
||
alert('新密码和确认密码不匹配！');
|
||
}
|
||
|
||
if (newPassword.value.length < 6) {
|
||
e.preventDefault();
|
||
alert('密码长度至少6位！');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
{% endblock %}
|
||
|
||
.permission-admin {
|
||
background: #e3f2fd;
|
||
color: #1976d2;
|
||
}
|
||
|
||
.permission-user {
|
||
background: #f3e5f5;
|
||
color: #7b1fa2;
|
||
}
|
||
|
||
.password-form {
|
||
background: white;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 12px;
|
||
padding: 25px;
|
||
}
|
||
|
||
.password-form h3 {
|
||
color: #333;
|
||
margin-bottom: 20px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 8px;
|
||
color: #555;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-group input {
|
||
width: 100%;
|
||
padding: 12px 16px;
|
||
border: 2px solid #e9ecef;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
transition: all 0.3s ease;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.form-group input:focus {
|
||
outline: none;
|
||
border-color: #667eea;
|
||
background: white;
|
||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||
}
|
||
|
||
.btn {
|
||
width: 100%;
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: #6c757d;
|
||
color: white;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #5a6268;
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.flash-messages {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.flash-message {
|
||
padding: 12px 16px;
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.flash-error {
|
||
background: #f8d7da;
|
||
color: #721c24;
|
||
border: 1px solid #f5c6cb;
|
||
}
|
||
|
||
.flash-success {
|
||
background: #d4edda;
|
||
color: #155724;
|
||
border: 1px solid #c3e6cb;
|
||
}
|
||
|
||
.flash-info {
|
||
background: #d1ecf1;
|
||
color: #0c5460;
|
||
border: 1px solid #bee5eb;
|
||
}
|
||
|
||
.navigation-links {
|
||
text-align: center;
|
||
margin-top: 30px;
|
||
padding-top: 20px;
|
||
border-top: 1px solid #e9ecef;
|
||
}
|
||
|
||
.nav-link {
|
||
display: inline-block;
|
||
margin: 0 15px;
|
||
color: #667eea;
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
transition: color 0.3s ease;
|
||
}
|
||
|
||
.nav-link:hover {
|
||
color: #764ba2;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.profile-container {
|
||
padding: 30px 20px;
|
||
margin: 10px;
|
||
}
|
||
|
||
.profile-header h1 {
|
||
font-size: 24px;
|
||
}
|
||
|
||
.info-item {
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 5px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="profile-container">
|
||
<!-- Flash Messages -->
|
||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||
{% if messages %}
|
||
<div class="flash-messages">
|
||
{% for category, message in messages %}
|
||
<div class="flash-message flash-{{ category }}">
|
||
{{ message }}
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% endif %}
|
||
{% endwith %}
|
||
|
||
<div class="profile-header">
|
||
<h1>个人设置</h1>
|
||
<p>管理您的账户信息和密码</p>
|
||
</div>
|
||
|
||
<!-- 用户信息显示 -->
|
||
<div class="user-info">
|
||
<h3>账户信息</h3>
|
||
<div class="info-item">
|
||
<span class="info-label">用户名:</span>
|
||
<span class="info-value">{{ session.user_id }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">权限级别:</span>
|
||
<span class="permission-badge {{ 'permission-admin' if session.permission == 0 else 'permission-user' }}">
|
||
{{ '管理员' if session.permission == 0 else '普通用户' }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 修改密码表单 -->
|
||
<form method="POST" action="{{ url_for('change_own_password') }}" class="password-form" id="passwordForm">
|
||
<h3>修改密码</h3>
|
||
|
||
<div class="form-group">
|
||
<label for="old_password">当前密码:</label>
|
||
<input type="password" id="old_password" name="old_password" required>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="new_password">新密码:</label>
|
||
<input type="password" id="new_password" name="new_password" required minlength="6">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="confirm_password">确认新密码:</label>
|
||
<input type="password" id="confirm_password" name="confirm_password" required minlength="6">
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary">更新密码</button>
|
||
</form>
|
||
|
||
<!-- 导航链接 -->
|
||
<div class="navigation-links">
|
||
<a href="{{ url_for('index') }}" class="nav-link">返回首页</a>
|
||
<a href="{{ url_for('my_data') }}" class="nav-link">我的数据</a>
|
||
{% if session.permission == 0 %}
|
||
<a href="{{ url_for('user_management') }}" class="nav-link">用户管理</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 密码确认验证
|
||
document.getElementById('passwordForm').addEventListener('submit', function(e) {
|
||
const newPassword = document.getElementById('new_password').value;
|
||
const confirmPassword = document.getElementById('confirm_password').value;
|
||
|
||
if (newPassword !== confirmPassword) {
|
||
e.preventDefault();
|
||
alert('新密码和确认密码不一致，请重新输入！');
|
||
return false;
|
||
}
|
||
|
||
if (newPassword.length < 6) {
|
||
e.preventDefault();
|
||
alert('新密码长度至少6位！');
|
||
return false;
|
||
}
|
||
});
|
||
|
||
// 输入实时验证
|
||
document.getElementById('confirm_password').addEventListener('input', function() {
|
||
const newPassword = document.getElementById('new_password').value;
|
||
const confirmPassword = this.value;
|
||
|
||
if (confirmPassword && newPassword !== confirmPassword) {
|
||
this.style.borderColor = '#dc3545';
|
||
this.style.background = '#fff5f5';
|
||
} else {
|
||
this.style.borderColor = '#e9ecef';
|
||
this.style.background = '#f8f9fa';
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |