1105 lines
54 KiB
HTML
1105 lines
54 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 CSS -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: '#1890ff',
|
|
secondary: '#f0f2f5',
|
|
success: '#52c41a',
|
|
warning: '#faad14',
|
|
error: '#f5222d',
|
|
info: '#8c8c8c',
|
|
'primary-light': '#e6f7ff',
|
|
'table-header': '#fafafa'
|
|
},
|
|
fontFamily: {
|
|
sans: ['Microsoft YaHei', 'Arial', '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;
|
|
}
|
|
.table-hover {
|
|
@apply hover:bg-primary-light/30 transition-colors duration-150;
|
|
}
|
|
.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">
|
|
<!-- 顶部导航栏 -->
|
|
<header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-10">
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa fa-car text-primary text-2xl"></i>
|
|
<h1 class="text-xl font-bold text-gray-800">车主信息查询系统</h1>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<!-- 用户下拉菜单 -->
|
|
<div class="relative group">
|
|
<div class="flex items-center cursor-pointer hover:text-primary transition-colors">
|
|
<span class="text-gray-600">欢迎 <strong>{{ session.department }}</strong> <strong>{{ session.name }}</strong></span>
|
|
<i class="fa fa-chevron-down ml-2 text-xs transition-transform duration-300 group-hover:rotate-180"></i>
|
|
</div>
|
|
<!-- 下拉菜单 -->
|
|
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top-right scale-95 group-hover:scale-100 z-20">
|
|
<div class="py-1">
|
|
<a href="#" onclick="showChangePasswordModal()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
|
|
<i class="fa fa-key mr-2"></i> 修改密码
|
|
</a>
|
|
<a href="{{ url_for('user.users_management') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors bg-primary/10">
|
|
<i class="fa fa-users mr-2"></i> 用户管理
|
|
</a>
|
|
<a href="#" onclick="showUserProfileModal()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
|
|
<i class="fa fa-user mr-2"></i> 个人信息
|
|
</a>
|
|
<a href="#" onclick="showLoginInfoModal()" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
|
|
<i class="fa fa-sign-in mr-2"></i> 后台登录信息
|
|
</a>
|
|
<div class="border-t border-gray-200 my-1"></div>
|
|
<a href="{{ url_for('user.logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-primary hover:text-white transition-colors">
|
|
<i class="fa fa-sign-out mr-2"></i> 退出
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="container mx-auto px-4 pt-24 pb-12">
|
|
<!-- 页面标题 -->
|
|
<div class="mb-6">
|
|
<h2 class="text-2xl font-bold text-gray-800">用户管理</h2>
|
|
<p class="text-gray-500 mt-1">管理系统用户、审核登录权限、修改部门信息和初始化密码</p>
|
|
</div>
|
|
|
|
<!-- 搜索框 -->
|
|
<div class="bg-white rounded-lg shadow-sm p-4 mb-6">
|
|
<div class="flex flex-col md:flex-row gap-4">
|
|
<div class="flex-1">
|
|
<div class="relative">
|
|
<input type="text" id="searchUsername" placeholder="输入用户名搜索"
|
|
class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md input-focus">
|
|
<i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col md:flex-row gap-2">
|
|
<select id="filterDepartment" class="w-full md:w-auto px-4 py-2 border border-gray-300 rounded-md input-focus">
|
|
<option value="">所有部门</option>
|
|
{% for dept in departments %}
|
|
<option value="{{ dept }}">{{ dept }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<select id="filterStatus" class="w-full md:w-auto px-4 py-2 border border-gray-300 rounded-md input-focus">
|
|
<option value="">所有状态</option>
|
|
<option value="active">已启用</option>
|
|
<option value="inactive">已禁用</option>
|
|
</select>
|
|
<button onclick="searchUsers()" class="w-full md:w-auto bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-colors">
|
|
<i class="fa fa-search mr-1"></i> 搜索
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 消息提示区域 -->
|
|
<div id="messageContainer" class="mb-6 hidden">
|
|
<div id="successMessage" class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-center hidden">
|
|
<i class="fa fa-check-circle mr-2"></i>
|
|
<span></span>
|
|
</div>
|
|
<div id="errorMessage" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-center hidden">
|
|
<i class="fa fa-exclamation-circle mr-2"></i>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户列表表格 -->
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-table-header">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="usersTableBody" class="bg-white divide-y divide-gray-200">
|
|
<!-- 用户数据将通过JavaScript动态加载 -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- 分页控制 -->
|
|
<div class="px-6 py-3 flex items-center justify-between border-t border-gray-200">
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-700">
|
|
显示 <span id="startItem">1</span> 至 <span id="endItem">10</span> 条，共 <span id="totalItems">0</span> 条记录
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
<button id="prevPage" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<span class="sr-only">上一页</span>
|
|
<i class="fa fa-chevron-left"></i>
|
|
</button>
|
|
<button id="nextPage" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<span class="sr-only">下一页</span>
|
|
<i class="fa fa-chevron-right"></i>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 修改部门信息弹窗 -->
|
|
<div id="editDepartmentModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden transform transition-all animate-fade-in">
|
|
<div class="bg-primary text-white p-4 flex justify-between items-center">
|
|
<h3 class="text-lg font-medium">修改部门信息</h3>
|
|
<button onclick="closeEditDepartmentModal()" class="text-white hover:text-gray-200 transition-colors">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<input type="hidden" id="editUserId">
|
|
<input type="hidden" id="editUsername">
|
|
|
|
<div class="mb-4">
|
|
<label for="editUserName" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
|
|
<input type="text" id="editUserName" readonly class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 cursor-not-allowed">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="editUserRealName" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
|
|
<input type="text" id="editUserRealName" readonly class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 cursor-not-allowed">
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label for="editUserDepartment" class="block text-sm font-medium text-gray-700 mb-1">部门</label>
|
|
<select id="editUserDepartment" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
|
|
{% for dept in departments %}
|
|
<option value="{{ dept }}">{{ dept }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex space-x-4">
|
|
<button onclick="saveDepartmentChanges()" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
|
|
保存修改
|
|
</button>
|
|
<button onclick="closeEditDepartmentModal()" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 初始化密码弹窗 -->
|
|
<div id="resetPasswordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden transform transition-all animate-fade-in">
|
|
<div class="bg-primary text-white p-4 flex justify-between items-center">
|
|
<h3 class="text-lg font-medium">初始化密码</h3>
|
|
<button onclick="closeResetPasswordModal()" class="text-white hover:text-gray-200 transition-colors">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<input type="hidden" id="resetUserId">
|
|
<input type="hidden" id="resetUsername">
|
|
|
|
<div class="mb-6">
|
|
<p class="text-gray-700 mb-2">确定要初始化用户 <span id="resetUserNameDisplay" class="font-medium"></span> 的密码吗？</p>
|
|
<p class="text-gray-500 text-sm">初始化后，密码将重置为默认值：<code class="bg-gray-100 px-1 py-0.5 rounded">default123</code></p>
|
|
</div>
|
|
|
|
<div class="flex space-x-4">
|
|
<button onclick="confirmResetPassword()" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
|
|
确定初始化
|
|
</button>
|
|
<button onclick="closeResetPasswordModal()" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 修改密码弹窗 -->
|
|
<div id="changePasswordModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden transform transition-all animate-fade-in">
|
|
<div class="bg-primary text-white p-4 flex justify-between items-center">
|
|
<h3 class="text-lg font-medium">修改密码</h3>
|
|
<button onclick="closeChangePasswordModal()" class="text-white hover:text-gray-200 transition-colors">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<!-- 错误信息显示区域 -->
|
|
<div id="changePasswordError" class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start hidden">
|
|
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
|
|
<span id="errorChangePasswordMessage"></span>
|
|
</div>
|
|
|
|
<!-- 成功信息显示区域 -->
|
|
<div id="changePasswordSuccess" class="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-start hidden">
|
|
<i class="fa fa-check-circle mt-1 mr-3"></i>
|
|
<span id="successChangePasswordMessage"></span>
|
|
</div>
|
|
|
|
<form id="changePasswordForm">
|
|
<div class="mb-4">
|
|
<label for="old_password" class="block text-sm font-medium text-gray-700 mb-1">当前密码</label>
|
|
<input type="password" id="old_password" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="new_password" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
|
|
<input type="password" id="new_password" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
|
|
<input type="password" id="confirm_password" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
|
|
</div>
|
|
|
|
<div class="flex space-x-4">
|
|
<button type="submit" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
|
|
保存修改
|
|
</button>
|
|
<button type="button" onclick="closeChangePasswordModal()" 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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 个人信息弹窗 -->
|
|
<div id="userProfileModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden transform transition-all animate-fade-in">
|
|
<div class="bg-primary text-white p-4 flex justify-between items-center">
|
|
<h3 class="text-lg font-medium">个人信息</h3>
|
|
<button onclick="closeUserProfileModal()" class="text-white hover:text-gray-200 transition-colors">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<!-- 错误信息显示区域 -->
|
|
<div id="userProfileError" class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start hidden">
|
|
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
|
|
<span id="errorUserProfileMessage"></span>
|
|
</div>
|
|
|
|
<!-- 成功信息显示区域 -->
|
|
<div id="userProfileSuccess" class="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-start hidden">
|
|
<i class="fa fa-check-circle mt-1 mr-3"></i>
|
|
<span id="successUserProfileMessage"></span>
|
|
</div>
|
|
|
|
<form id="userProfileForm">
|
|
<div class="mb-4">
|
|
<label for="profile_username" class="block text-sm font-medium text-gray-700 mb-1">用户名</label>
|
|
<input type="text" id="profile_username" readonly class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 cursor-not-allowed">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="profile_name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
|
|
<input type="text" id="profile_name" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label for="profile_phone" class="block text-sm font-medium text-gray-700 mb-1">电话</label>
|
|
<input type="text" id="profile_phone" class="w-full px-3 py-2 border border-gray-300 rounded-md input-focus">
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label for="profile_department" class="block text-sm font-medium text-gray-700 mb-1">部门</label>
|
|
<input type="text" id="profile_department" readonly class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 cursor-not-allowed">
|
|
</div>
|
|
|
|
<div class="flex space-x-4">
|
|
<button type="submit" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
|
|
保存修改
|
|
</button>
|
|
<button type="button" onclick="closeUserProfileModal()" 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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 后台登录信息弹窗 -->
|
|
<div id="loginInfoModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden transform transition-all animate-fade-in">
|
|
<div class="bg-primary text-white p-4 flex justify-between items-center">
|
|
<h3 class="text-lg font-medium">后台登录信息</h3>
|
|
<button onclick="closeLoginInfoModal()" class="text-white hover:text-gray-200 transition-colors">
|
|
<i class="fa fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<!-- 错误信息显示区域 -->
|
|
<div id="loginInfoError" class="mb-4 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md flex items-start hidden">
|
|
<i class="fa fa-exclamation-circle mt-1 mr-3"></i>
|
|
<span id="errorLoginInfoMessage"></span>
|
|
</div>
|
|
|
|
<!-- 成功信息显示区域 -->
|
|
<div id="loginInfoSuccess" class="mb-4 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-md flex items-start hidden">
|
|
<i class="fa fa-check-circle mt-1 mr-3"></i>
|
|
<span id="successLoginInfoMessage"></span>
|
|
</div>
|
|
|
|
<form id="loginInfoForm">
|
|
<div class="bg-gray-50 p-4 rounded-md">
|
|
<div class="grid grid-cols-1 gap-2 text-sm">
|
|
<div class="text-gray-500 mb-1">登录用户名：</div>
|
|
<input type="text" id="loginUsername" value="{{ session.username }}"
|
|
{% if session.username != 'admin' %}readonly{% endif %}
|
|
class="w-full px-3 py-2 border rounded-md text-gray-800 input-focus"
|
|
{% if session.username != 'admin' %}style="background-color: #f3f4f6; cursor: not-allowed;"{% endif %}>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 p-4 rounded-md">
|
|
<div class="grid grid-cols-1 gap-2 text-sm">
|
|
<div class="text-gray-500 mb-1">用户密码：</div>
|
|
<input type="password" id="loginPassword" value="" placeholder="{% if session.username == 'admin' %}输入新密码或保持为空不修改{% else %}只读，无法修改{% endif %}"
|
|
{% if session.username != 'admin' %}readonly{% endif %}
|
|
class="w-full px-3 py-2 border rounded-md text-gray-800 input-focus"
|
|
{% if session.username != 'admin' %}style="background-color: #f3f4f6; cursor: not-allowed;"{% endif %}>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 p-4 rounded-md">
|
|
<div class="grid grid-cols-1 gap-2 text-sm">
|
|
<div class="text-gray-500 mb-1">OTP码：</div>
|
|
<input type="text" id="loginOtpCode" value="{{ session.otp_code if 'otp_code' in session else '' }}"
|
|
class="w-full px-3 py-2 border rounded-md text-gray-800 input-focus">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mt-6 flex space-x-4">
|
|
<button type="button" onclick="saveLoginInfo()" class="flex-1 bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md transition-colors shadow-sm hover:shadow">
|
|
保存修改
|
|
</button>
|
|
<button type="button" onclick="closeLoginInfoModal()" class="flex-1 border border-gray-300 text-gray-700 hover:bg-gray-50 py-2 px-4 rounded-md transition-colors">
|
|
取消
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 用户管理相关JavaScript -->
|
|
<script>
|
|
// 当前页码和每页显示数量
|
|
let currentPage = 1;
|
|
const pageSize = 10;
|
|
let totalUsers = 0;
|
|
let usersData = [];
|
|
|
|
// 页面加载完成后初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadUsers();
|
|
|
|
// 绑定修改密码表单提交事件
|
|
document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
changePassword();
|
|
});
|
|
|
|
// 绑定个人信息表单提交事件
|
|
document.getElementById('userProfileForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
updateUserProfile();
|
|
});
|
|
|
|
// 绑定搜索按钮点击事件
|
|
document.getElementById('searchUsername').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
searchUsers();
|
|
}
|
|
});
|
|
|
|
// 绑定分页按钮点击事件
|
|
document.getElementById('prevPage').addEventListener('click', function() {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
renderUsersTable();
|
|
}
|
|
});
|
|
|
|
document.getElementById('nextPage').addEventListener('click', function() {
|
|
if (currentPage < Math.ceil(totalUsers / pageSize)) {
|
|
currentPage++;
|
|
renderUsersTable();
|
|
}
|
|
});
|
|
});
|
|
|
|
// 加载用户列表
|
|
function loadUsers() {
|
|
fetch('{{ url_for('user.get_users') }}')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
usersData = data.users;
|
|
totalUsers = usersData.length;
|
|
renderUsersTable();
|
|
} else {
|
|
showError('加载用户列表失败：' + (data.error || '未知错误'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('加载用户列表时发生错误:', error);
|
|
showError('网络错误，请稍后重试');
|
|
});
|
|
}
|
|
|
|
// 渲染用户表格
|
|
function renderUsersTable() {
|
|
const tableBody = document.getElementById('usersTableBody');
|
|
tableBody.innerHTML = '';
|
|
|
|
// 计算当前页的用户数据
|
|
const startIndex = (currentPage - 1) * pageSize;
|
|
const endIndex = Math.min(startIndex + pageSize, totalUsers);
|
|
const currentUsers = usersData.slice(startIndex, endIndex);
|
|
|
|
// 更新分页信息
|
|
document.getElementById('startItem').textContent = startIndex + 1;
|
|
document.getElementById('endItem').textContent = endIndex;
|
|
document.getElementById('totalItems').textContent = totalUsers;
|
|
|
|
// 更新分页按钮状态
|
|
document.getElementById('prevPage').disabled = currentPage === 1;
|
|
document.getElementById('nextPage').disabled = currentPage === Math.ceil(totalUsers / pageSize);
|
|
|
|
// 渲染用户行
|
|
currentUsers.forEach(user => {
|
|
const row = document.createElement('tr');
|
|
row.className = 'table-hover';
|
|
|
|
// 状态样式
|
|
const statusClass = user.status === 'active' ? 'bg-success/10 text-success' : 'bg-error/10 text-error';
|
|
const statusText = user.status === 'active' ? '已启用' : '已禁用';
|
|
|
|
row.innerHTML = `
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${user.username}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${user.name}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">${user.department}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}">
|
|
${statusText}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|
<button onclick="toggleUserStatus(${user.id}, '${user.username}', '${user.status}')"
|
|
class="text-primary hover:text-primary/80 mr-3">
|
|
${user.status === 'active' ? '禁用' : '启用'}
|
|
</button>
|
|
<button onclick="showEditDepartmentModal(${user.id}, '${user.username}', '${user.name}', '${user.department}')"
|
|
class="text-primary hover:text-primary/80 mr-3">
|
|
修改部门
|
|
</button>
|
|
<button onclick="showResetPasswordModal(${user.id}, '${user.username}')"
|
|
class="text-primary hover:text-primary/80">
|
|
初始化密码
|
|
</button>
|
|
</td>
|
|
`;
|
|
|
|
tableBody.appendChild(row);
|
|
});
|
|
|
|
// 如果没有数据，显示空状态
|
|
if (totalUsers === 0) {
|
|
const emptyRow = document.createElement('tr');
|
|
emptyRow.innerHTML = `
|
|
<td colspan="5" class="px-6 py-10 text-center text-gray-500">
|
|
<i class="fa fa-user-circle-o text-4xl mb-2 opacity-30"></i>
|
|
<p>暂无用户数据</p>
|
|
</td>
|
|
`;
|
|
tableBody.appendChild(emptyRow);
|
|
}
|
|
}
|
|
|
|
// 搜索用户
|
|
function searchUsers() {
|
|
const searchUsername = document.getElementById('searchUsername').value.toLowerCase().trim();
|
|
const filterDepartment = document.getElementById('filterDepartment').value;
|
|
const filterStatus = document.getElementById('filterStatus').value;
|
|
|
|
fetch('{{ url_for('user.get_users') }}')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// 应用过滤条件
|
|
usersData = data.users.filter(user => {
|
|
const matchesUsername = user.username.toLowerCase().includes(searchUsername);
|
|
const matchesDepartment = !filterDepartment || user.department === filterDepartment;
|
|
const matchesStatus = !filterStatus || user.status === filterStatus;
|
|
return matchesUsername && matchesDepartment && matchesStatus;
|
|
});
|
|
|
|
totalUsers = usersData.length;
|
|
currentPage = 1; // 重置到第一页
|
|
renderUsersTable();
|
|
} else {
|
|
showError('搜索用户失败：' + (data.error || '未知错误'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('搜索用户时发生错误:', error);
|
|
showError('网络错误，请稍后重试');
|
|
});
|
|
}
|
|
|
|
// 切换用户状态
|
|
function toggleUserStatus(userId, username, currentStatus) {
|
|
const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
|
|
const confirmMessage = `确定要${newStatus === 'active' ? '启用' : '禁用'}用户 ${username} 吗？`;
|
|
|
|
if (confirm(confirmMessage)) {
|
|
fetch('{{ url_for('user.update_user_status') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
user_id: userId,
|
|
status: newStatus
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showSuccess(data.message || '用户状态更新成功');
|
|
loadUsers(); // 重新加载用户列表
|
|
} else {
|
|
showError(data.error || '用户状态更新失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('更新用户状态时发生错误:', error);
|
|
showError('网络错误，请稍后重试');
|
|
});
|
|
}
|
|
}
|
|
|
|
// 显示修改部门弹窗
|
|
function showEditDepartmentModal(userId, username, name, department) {
|
|
document.getElementById('editUserId').value = userId;
|
|
document.getElementById('editUsername').value = username;
|
|
document.getElementById('editUserName').value = username;
|
|
document.getElementById('editUserRealName').value = name;
|
|
|
|
// 设置当前部门
|
|
const departmentSelect = document.getElementById('editUserDepartment');
|
|
for (let i = 0; i < departmentSelect.options.length; i++) {
|
|
if (departmentSelect.options[i].value === department) {
|
|
departmentSelect.selectedIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
|
|
document.getElementById('editDepartmentModal').classList.remove('hidden');
|
|
}
|
|
|
|
// 关闭修改部门弹窗
|
|
function closeEditDepartmentModal() {
|
|
document.getElementById('editDepartmentModal').classList.add('hidden');
|
|
}
|
|
|
|
// 保存部门修改
|
|
function saveDepartmentChanges() {
|
|
const userId = document.getElementById('editUserId').value;
|
|
const username = document.getElementById('editUsername').value;
|
|
const newDepartment = document.getElementById('editUserDepartment').value;
|
|
|
|
fetch('{{ url_for('user.update_user_department') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
user_id: userId,
|
|
department: newDepartment
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showSuccess(data.message || '部门信息更新成功');
|
|
closeEditDepartmentModal();
|
|
loadUsers(); // 重新加载用户列表
|
|
} else {
|
|
showError(data.error || '部门信息更新失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('更新部门信息时发生错误:', error);
|
|
showError('网络错误，请稍后重试');
|
|
});
|
|
}
|
|
|
|
// 显示初始化密码弹窗
|
|
function showResetPasswordModal(userId, username) {
|
|
document.getElementById('resetUserId').value = userId;
|
|
document.getElementById('resetUsername').value = username;
|
|
document.getElementById('resetUserNameDisplay').textContent = username;
|
|
|
|
document.getElementById('resetPasswordModal').classList.remove('hidden');
|
|
}
|
|
|
|
// 关闭初始化密码弹窗
|
|
function closeResetPasswordModal() {
|
|
document.getElementById('resetPasswordModal').classList.add('hidden');
|
|
}
|
|
|
|
// 确认初始化密码
|
|
function confirmResetPassword() {
|
|
const userId = document.getElementById('resetUserId').value;
|
|
const username = document.getElementById('resetUsername').value;
|
|
|
|
fetch('{{ url_for('user.reset_user_password') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
user_id: userId,
|
|
username: username
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
showSuccess(data.message || '密码初始化成功');
|
|
closeResetPasswordModal();
|
|
} else {
|
|
showError(data.error || '密码初始化失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('初始化密码时发生错误:', error);
|
|
showError('网络错误，请稍后重试');
|
|
});
|
|
}
|
|
|
|
// 显示成功消息
|
|
function showSuccess(message) {
|
|
const messageContainer = document.getElementById('messageContainer');
|
|
const successMessage = document.getElementById('successMessage');
|
|
const errorMessage = document.getElementById('errorMessage');
|
|
|
|
successMessage.querySelector('span').textContent = message;
|
|
successMessage.classList.remove('hidden');
|
|
errorMessage.classList.add('hidden');
|
|
messageContainer.classList.remove('hidden');
|
|
|
|
// 5秒后自动隐藏
|
|
setTimeout(() => {
|
|
successMessage.classList.add('hidden');
|
|
messageContainer.classList.add('hidden');
|
|
}, 5000);
|
|
}
|
|
|
|
// 显示错误消息
|
|
function showError(message) {
|
|
const messageContainer = document.getElementById('messageContainer');
|
|
const successMessage = document.getElementById('successMessage');
|
|
const errorMessage = document.getElementById('errorMessage');
|
|
|
|
errorMessage.querySelector('span').textContent = message;
|
|
errorMessage.classList.remove('hidden');
|
|
successMessage.classList.add('hidden');
|
|
messageContainer.classList.remove('hidden');
|
|
|
|
// 5秒后自动隐藏
|
|
setTimeout(() => {
|
|
errorMessage.classList.add('hidden');
|
|
messageContainer.classList.add('hidden');
|
|
}, 5000);
|
|
}
|
|
|
|
// 修改密码相关函数
|
|
function showChangePasswordModal() {
|
|
document.getElementById('changePasswordModal').classList.remove('hidden');
|
|
document.getElementById('old_password').focus();
|
|
}
|
|
|
|
function closeChangePasswordModal() {
|
|
document.getElementById('changePasswordModal').classList.add('hidden');
|
|
// 重置表单
|
|
document.getElementById('changePasswordForm').reset();
|
|
}
|
|
|
|
function changePassword() {
|
|
// 获取表单数据
|
|
const oldPassword = document.getElementById('old_password').value;
|
|
const newPassword = document.getElementById('new_password').value;
|
|
const confirmPassword = document.getElementById('confirm_password').value;
|
|
|
|
// 隐藏之前的消息
|
|
document.getElementById('changePasswordError').classList.add('hidden');
|
|
document.getElementById('changePasswordSuccess').classList.add('hidden');
|
|
|
|
// 前端验证
|
|
if (!oldPassword || !newPassword || !confirmPassword) {
|
|
showChangePasswordError('请填写所有必填字段');
|
|
return;
|
|
}
|
|
|
|
if (newPassword !== confirmPassword) {
|
|
showChangePasswordError('两次输入的新密码不一致');
|
|
return;
|
|
}
|
|
|
|
// 异步提交修改
|
|
fetch('{{ url_for('user.change_password') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: new URLSearchParams({
|
|
'old_password': oldPassword,
|
|
'new_password': newPassword,
|
|
'confirm_password': confirmPassword
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// 修改成功
|
|
showChangePasswordSuccess(data.message || '修改密码成功，请重新登录');
|
|
|
|
// 3秒后跳转登录页
|
|
setTimeout(() => {
|
|
window.location.href = '{{ url_for('user.login') }}';
|
|
}, 3000);
|
|
} else {
|
|
// 显示错误信息
|
|
showChangePasswordError(data.error || '修改密码失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('修改密码时发生错误:', error);
|
|
showChangePasswordError('网络错误，请稍后重试');
|
|
});
|
|
}
|
|
|
|
function showChangePasswordError(message) {
|
|
const errorContainer = document.getElementById('changePasswordError');
|
|
const errorMessage = document.getElementById('errorChangePasswordMessage');
|
|
errorMessage.textContent = message;
|
|
errorContainer.classList.remove('hidden');
|
|
document.getElementById('changePasswordSuccess').classList.add('hidden');
|
|
// 滚动到错误信息
|
|
errorContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
function showChangePasswordSuccess(message) {
|
|
const successContainer = document.getElementById('changePasswordSuccess');
|
|
const successMessage = document.getElementById('successChangePasswordMessage');
|
|
successMessage.textContent = message;
|
|
successContainer.classList.remove('hidden');
|
|
document.getElementById('changePasswordError').classList.add('hidden');
|
|
// 滚动到成功信息
|
|
successContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
// 个人信息相关函数
|
|
function showUserProfileModal() {
|
|
// 获取个人信息
|
|
fetch('{{ url_for('user.get_user_profile') }}')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const user = data.user;
|
|
document.getElementById('profile_username').value = user.username;
|
|
document.getElementById('profile_name').value = user.name;
|
|
document.getElementById('profile_phone').value = user.phone;
|
|
document.getElementById('profile_department').value = user.department;
|
|
|
|
document.getElementById('userProfileModal').classList.remove('hidden');
|
|
} else {
|
|
// 显示错误信息
|
|
alert('获取个人信息失败：' + (data.error || '未知错误'));
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('获取个人信息时发生错误:', error);
|
|
alert('网络错误，请稍后重试');
|
|
});
|
|
}
|
|
|
|
function closeUserProfileModal() {
|
|
document.getElementById('userProfileModal').classList.add('hidden');
|
|
// 隐藏之前的消息
|
|
document.getElementById('userProfileError').classList.add('hidden');
|
|
document.getElementById('userProfileSuccess').classList.add('hidden');
|
|
}
|
|
|
|
function updateUserProfile() {
|
|
// 获取表单数据
|
|
const name = document.getElementById('profile_name').value.trim();
|
|
const phone = document.getElementById('profile_phone').value.trim();
|
|
|
|
// 隐藏之前的消息
|
|
document.getElementById('userProfileError').classList.add('hidden');
|
|
document.getElementById('userProfileSuccess').classList.add('hidden');
|
|
|
|
// 前端验证
|
|
if (!name || !phone) {
|
|
showUserProfileError('请填写所有必填字段');
|
|
return;
|
|
}
|
|
|
|
// 异步提交修改
|
|
fetch('{{ url_for('user.update_user_profile') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: new URLSearchParams({
|
|
'name': name,
|
|
'phone': phone
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// 更新成功
|
|
showUserProfileSuccess(data.message || '个人信息更新成功');
|
|
|
|
// 3秒后关闭弹窗
|
|
setTimeout(() => {
|
|
closeUserProfileModal();
|
|
// 刷新页面以更新会话信息
|
|
location.reload();
|
|
}, 1500);
|
|
} else {
|
|
// 显示错误信息
|
|
showUserProfileError(data.error || '个人信息更新失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('更新个人信息时发生错误:', error);
|
|
showUserProfileError('网络错误，请稍后重试');
|
|
});
|
|
}
|
|
|
|
function showUserProfileError(message) {
|
|
const errorContainer = document.getElementById('userProfileError');
|
|
const errorMessage = document.getElementById('errorUserProfileMessage');
|
|
errorMessage.textContent = message;
|
|
errorContainer.classList.remove('hidden');
|
|
document.getElementById('userProfileSuccess').classList.add('hidden');
|
|
// 滚动到错误信息
|
|
errorContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
function showUserProfileSuccess(message) {
|
|
const successContainer = document.getElementById('userProfileSuccess');
|
|
const successMessage = document.getElementById('successUserProfileMessage');
|
|
successMessage.textContent = message;
|
|
successContainer.classList.remove('hidden');
|
|
document.getElementById('userProfileError').classList.add('hidden');
|
|
// 滚动到成功信息
|
|
successContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
// 后台登录信息相关函数
|
|
function showLoginInfoModal() {
|
|
document.getElementById('loginInfoModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeLoginInfoModal() {
|
|
document.getElementById('loginInfoModal').classList.add('hidden');
|
|
// 隐藏之前的消息
|
|
document.getElementById('loginInfoError').classList.add('hidden');
|
|
document.getElementById('loginInfoSuccess').classList.add('hidden');
|
|
}
|
|
|
|
function saveLoginInfo() {
|
|
// 获取表单数据
|
|
const username = document.getElementById('loginUsername').value.trim();
|
|
const password = document.getElementById('loginPassword').value;
|
|
const otpCode = document.getElementById('loginOtpCode').value.trim();
|
|
|
|
// 隐藏之前的消息
|
|
document.getElementById('loginInfoError').classList.add('hidden');
|
|
document.getElementById('loginInfoSuccess').classList.add('hidden');
|
|
|
|
// 前端验证
|
|
if (!otpCode) {
|
|
showLoginInfoError('OTP码不能为空');
|
|
return;
|
|
}
|
|
|
|
if (otpCode.length !== 6) {
|
|
showLoginInfoError('OTP码长度必须是6位');
|
|
return;
|
|
}
|
|
|
|
// 如果是admin用户修改密码，需要验证密码非空
|
|
{% if session.username == 'admin' %}
|
|
if (password === '') {
|
|
showLoginInfoError('密码不能为空');
|
|
return;
|
|
}
|
|
{% endif %}
|
|
|
|
// 构建请求数据
|
|
const data = {
|
|
username: username,
|
|
otp_code: otpCode
|
|
};
|
|
|
|
// 如果admin用户提供了新密码，添加到请求数据中
|
|
{% if session.username == 'admin' %}
|
|
if (password) {
|
|
data.password = password;
|
|
}
|
|
{% endif %}
|
|
|
|
// 异步提交修改
|
|
fetch('{{ url_for('user.update_login_info') }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
// 更新成功
|
|
showLoginInfoSuccess(data.message || '登录信息更新成功');
|
|
// 更新session中的OTP码
|
|
{% if 'session' in globals %}
|
|
session['otp_code'] = otpCode;
|
|
{% endif %}
|
|
|
|
// 3秒后关闭弹窗
|
|
setTimeout(() => {
|
|
closeLoginInfoModal();
|
|
}, 1500);
|
|
} else {
|
|
// 显示服务器返回的错误信息
|
|
showLoginInfoError(data.error || '登录信息更新失败');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('更新登录信息时发生错误:', error);
|
|
showLoginInfoError('网络错误，请稍后重试');
|
|
});
|
|
}
|
|
|
|
function showLoginInfoError(message) {
|
|
const errorContainer = document.getElementById('loginInfoError');
|
|
const errorMessage = document.getElementById('errorLoginInfoMessage');
|
|
errorMessage.textContent = message;
|
|
errorContainer.classList.remove('hidden');
|
|
document.getElementById('loginInfoSuccess').classList.add('hidden');
|
|
// 滚动到错误信息
|
|
errorContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
function showLoginInfoSuccess(message) {
|
|
const successContainer = document.getElementById('loginInfoSuccess');
|
|
const successMessage = document.getElementById('successLoginInfoMessage');
|
|
successMessage.textContent = message;
|
|
successContainer.classList.remove('hidden');
|
|
document.getElementById('loginInfoError').classList.add('hidden');
|
|
// 滚动到成功信息
|
|
successContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
|
|
// 点击弹窗外部关闭弹窗
|
|
document.getElementById('editDepartmentModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeEditDepartmentModal();
|
|
}
|
|
});
|
|
|
|
document.getElementById('resetPasswordModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeResetPasswordModal();
|
|
}
|
|
});
|
|
|
|
document.getElementById('changePasswordModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeChangePasswordModal();
|
|
}
|
|
});
|
|
|
|
document.getElementById('userProfileModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeUserProfileModal();
|
|
}
|
|
});
|
|
|
|
document.getElementById('loginInfoModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeLoginInfoModal();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |