179 lines
8.0 KiB
HTML
179 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>修改密码 - 车主信息查询系统</title>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Font Awesome -->
|
|
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
|
<!-- 配置Tailwind自定义颜色和字体 -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#2563eb',
|
|
secondary: '#f3f4f6',
|
|
'primary-light': '#dbeafe',
|
|
'primary-dark': '#1d4ed8',
|
|
'table-header': '#f9fafb',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<!-- 自定义工具类 -->
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.card-shadow {
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
|
|
}
|
|
.input-focus {
|
|
@apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.3s ease-out forwards;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-secondary min-h-screen font-sans">
|
|
{% include 'header.html' %}
|
|
|
|
<!-- 主要内容区域 -->
|
|
<main class="container mx-auto px-4 pt-24 pb-12">
|
|
<!-- 返回按钮 -->
|
|
<div class="mb-6 flex justify-end">
|
|
<a href="{{ url_for('query') }}" class="inline-flex items-center text-primary hover:text-primary-dark transition-colors">
|
|
<i class="fa fa-arrow-left mr-2"></i> 返回主页面
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 修改密码表单 -->
|
|
<div class="max-w-md mx-auto bg-white rounded-lg shadow-xl p-8 animate-fade-in">
|
|
<div class="text-center mb-6">
|
|
<div class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i class="fa fa-key text-primary text-2xl"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-800">修改密码</h2>
|
|
<p class="text-gray-500 mt-2">请填写以下信息以修改您的密码</p>
|
|
</div>
|
|
|
|
<!-- 错误信息显示区域 -->
|
|
{% if error %}
|
|
<div class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start animate-fade-in">
|
|
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
|
|
<span>{{ error }}</span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- 表单 -->
|
|
<form id="changePasswordForm" method="POST" class="space-y-4">
|
|
<div class="mb-4">
|
|
<label for="old_password" class="block text-gray-700 text-sm font-medium mb-2">旧密码</label>
|
|
<div class="relative">
|
|
<input type="password" id="old_password" name="old_password" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入旧密码" required>
|
|
<button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 transition-colors" onclick="togglePasswordVisibility('old_password', this)">
|
|
<i class="fa fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="new_password" class="block text-gray-700 text-sm font-medium mb-2">新密码</label>
|
|
<div class="relative">
|
|
<input type="password" id="new_password" name="new_password" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请输入新密码" required>
|
|
<button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 transition-colors" onclick="togglePasswordVisibility('new_password', this)">
|
|
<i class="fa fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mt-1">密码长度至少8位，包含字母和数字</p>
|
|
</div>
|
|
<div class="mb-6">
|
|
<label for="confirm_password" class="block text-gray-700 text-sm font-medium mb-2">确认新密码</label>
|
|
<div class="relative">
|
|
<input type="password" id="confirm_password" name="confirm_password" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus transition-colors" placeholder="请再次输入新密码" required>
|
|
<button type="button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 transition-colors" onclick="togglePasswordVisibility('confirm_password', this)">
|
|
<i class="fa fa-eye"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex space-x-3">
|
|
<button type="submit" class="flex-1 bg-primary hover:bg-primary-dark text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
|
|
确认修改
|
|
</button>
|
|
<button type="button" onclick="window.location.href='{{ url_for('query') }}'" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
|
|
取消
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</main>
|
|
|
|
{% include 'footer.html' %}
|
|
|
|
<!-- JavaScript -->
|
|
<script>
|
|
// 密码可见性切换
|
|
function togglePasswordVisibility(inputId, button) {
|
|
const input = document.getElementById(inputId);
|
|
const icon = button.querySelector('i');
|
|
if (input.type === 'password') {
|
|
input.type = 'text';
|
|
icon.classList.remove('fa-eye');
|
|
icon.classList.add('fa-eye-slash');
|
|
} else {
|
|
input.type = 'password';
|
|
icon.classList.remove('fa-eye-slash');
|
|
icon.classList.add('fa-eye');
|
|
}
|
|
}
|
|
|
|
// 表单提交处理
|
|
document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
|
|
e.preventDefault(); // 阻止默认提交
|
|
|
|
const newPassword = document.getElementById('new_password').value;
|
|
const confirmPassword = document.getElementById('confirm_password').value;
|
|
const oldPassword = document.getElementById('old_password').value;
|
|
|
|
// 前端验证
|
|
if (!oldPassword) {
|
|
alert('请输入旧密码');
|
|
return;
|
|
}
|
|
|
|
if (newPassword.length < 8 || !/[a-zA-Z]/.test(newPassword) || !/[0-9]/.test(newPassword)) {
|
|
alert('新密码长度至少8位，且必须包含字母和数字');
|
|
return;
|
|
}
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
alert('两次输入的新密码不一致');
|
|
return;
|
|
}
|
|
|
|
// 提交表单
|
|
this.submit();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |