208 lines
9.5 KiB
HTML
208 lines
9.5 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>
|
|
<!-- 引入Layui CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/layui.css') }}">
|
|
<!-- 引入Font Awesome -->
|
|
<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
|
|
<!-- 引入自定义CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
|
|
|
|
<!-- 引入Layui JS -->
|
|
<script src="{{ url_for('static', filename='layui.js') }}"></script>
|
|
<script>
|
|
layui.use(['layer', 'form', 'element'], function(){
|
|
var layer = layui.layer;
|
|
var form = layui.form;
|
|
var element = layui.element;
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<!-- 引入统一的顶部导航栏 -->
|
|
{% include 'header.html' %}
|
|
|
|
<!-- 主要内容区域 -->
|
|
<div class="content-container">
|
|
<div class="content-wrapper">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="fa fa-key"></i> 修改密码
|
|
<a href="{{ url_for('query') }}" class="layui-btn layui-btn-xs layui-btn-primary" style="float: right;">
|
|
<i class="fa fa-arrow-left"></i> 返回主页面
|
|
</a>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- 消息提示区域 -->
|
|
{% if error %}
|
|
<div class="layui-bg-red message-box">
|
|
<i class="fa fa-exclamation-circle"></i> {{ error }}
|
|
</div>
|
|
{% endif %}
|
|
{% if success %}
|
|
<div class="layui-bg-green message-box">
|
|
<i class="fa fa-check-circle"></i> {{ success }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="layui-text" style="text-align: center; margin-bottom: 20px;">
|
|
<div style="width: 80px; height: 80px; background-color: #f2f2f2; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
|
|
<i class="fa fa-key" style="font-size: 40px; color: #009688;"></i>
|
|
</div>
|
|
<p style="color: #666;">请填写以下信息以修改您的密码</p>
|
|
</div>
|
|
|
|
<!-- 表单 - 使用Layui样式 -->
|
|
<form class="layui-form" id="changePasswordForm" action="/change_password_page" method="POST" style="max-width: 500px; margin: 0 auto;">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">旧密码</label>
|
|
<div class="layui-input-block">
|
|
<input type="password" id="old_password" name="old_password" class="layui-input" placeholder="请输入旧密码" required>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">新密码</label>
|
|
<div class="layui-input-block">
|
|
<input type="password" id="new_password" name="new_password" class="layui-input" placeholder="请输入新密码" required>
|
|
</div>
|
|
<div class="layui-form-mid layui-word-aux">密码长度至少8位，包含字母和数字</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">确认新密码</label>
|
|
<div class="layui-input-block">
|
|
<input type="password" id="confirm_password" name="confirm_password" class="layui-input" placeholder="请再次输入新密码" required>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button type="submit" class="layui-btn" lay-submit>
|
|
<i class="fa fa-save mr-1"></i> 确认修改
|
|
</button>
|
|
<button type="button" onclick="window.location.href='{{ url_for('query') }}'" class="layui-btn layui-btn-primary">
|
|
<i class="fa fa-times mr-1"></i> 取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 页脚 -->
|
|
{% include 'footer.html' %}
|
|
|
|
<!-- JavaScript -->
|
|
<script>
|
|
layui.use(['form', 'layer'], function() {
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
|
|
// 密码可见性切换功能
|
|
function togglePasswordVisibility(inputId) {
|
|
var input = document.getElementById(inputId);
|
|
var icon = document.getElementById(inputId + '_icon');
|
|
|
|
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');
|
|
}
|
|
}
|
|
|
|
// 为输入框添加密码可见性切换图标
|
|
function addPasswordToggleIcons() {
|
|
var passwordInputs = document.querySelectorAll('input[type="password"]');
|
|
passwordInputs.forEach(function(input) {
|
|
var parent = input.parentElement;
|
|
var toggleBtn = document.createElement('i');
|
|
toggleBtn.id = input.id + '_icon';
|
|
toggleBtn.className = 'fa fa-eye layui-icon layui-input-icon-right password-toggle-icon';
|
|
toggleBtn.style.position = 'absolute';
|
|
toggleBtn.style.right = '10px';
|
|
toggleBtn.style.top = '50%';
|
|
toggleBtn.style.transform = 'translateY(-50%)';
|
|
toggleBtn.style.cursor = 'pointer';
|
|
toggleBtn.style.color = '#999';
|
|
|
|
// 为容器添加相对定位
|
|
parent.style.position = 'relative';
|
|
|
|
// 添加点击事件
|
|
toggleBtn.addEventListener('click', function() {
|
|
togglePasswordVisibility(input.id);
|
|
});
|
|
|
|
// 检查是否已存在图标
|
|
if (!document.getElementById(input.id + '_icon')) {
|
|
parent.appendChild(toggleBtn);
|
|
// 为输入框添加右侧内边距，防止文字被图标遮挡
|
|
input.style.paddingRight = '30px';
|
|
}
|
|
});
|
|
}
|
|
|
|
// 表单验证
|
|
form.verify({
|
|
password: [
|
|
/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/,
|
|
'密码长度至少8位，且必须包含字母和数字'
|
|
]
|
|
});
|
|
|
|
// 表单提交处理
|
|
form.on('submit(changePasswordForm)', function(data) {
|
|
const newPassword = document.getElementById('new_password').value;
|
|
const confirmPassword = document.getElementById('confirm_password').value;
|
|
const oldPassword = document.getElementById('old_password').value;
|
|
|
|
// 前端验证
|
|
if (!oldPassword) {
|
|
layer.msg('请输入旧密码', {icon: 5});
|
|
return false;
|
|
}
|
|
|
|
if (newPassword.length < 8 || !/[a-zA-Z]/.test(newPassword) || !/[0-9]/.test(newPassword)) {
|
|
layer.msg('新密码长度至少8位，且必须包含字母和数字', {icon: 5});
|
|
return false;
|
|
}
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
layer.msg('两次输入的新密码不一致', {icon: 5});
|
|
return false;
|
|
}
|
|
|
|
// 提交表单前的视觉反馈
|
|
const submitButton = document.querySelector('button[type="submit"]');
|
|
const originalText = submitButton.innerHTML;
|
|
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 提交中...';
|
|
|
|
// 延迟提交以显示加载状态
|
|
setTimeout(() => {
|
|
document.getElementById('changePasswordForm').submit();
|
|
}, 500);
|
|
|
|
return false;
|
|
});
|
|
|
|
// 页面加载完成后执行
|
|
window.onload = function() {
|
|
// 添加密码可见性切换图标
|
|
addPasswordToggleIcons();
|
|
|
|
// 重新渲染表单
|
|
form.render();
|
|
};
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |