222 lines
9.1 KiB
HTML
222 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>用户管理 - Squid代理管理系统</title>
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
|
</head>
|
|
<body>
|
|
<div class="navbar">
|
|
<a href="{{ url_for('index') }}" class="nav-item">首页</a>
|
|
<a href="{{ url_for('clients') }}" class="nav-item active">用户管理</a>
|
|
<a href="{{ url_for('settings') }}" class="nav-item">系统设置</a>
|
|
<a href="{{ url_for('logout') }}" class="nav-item right">退出登录</a>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h1>用户管理</h1>
|
|
|
|
<button id="createUserBtn" class="btn-success">+ 添加新用户</button>
|
|
|
|
<table>
|
|
<tr>
|
|
<th>用户名</th>
|
|
<th>密码</th>
|
|
<th>状态</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
{% for user in users %}
|
|
<tr>
|
|
<td>{{ user['username'] }}</td>
|
|
<td class="password-cell">
|
|
<span class="password-placeholder">••••••••</span>
|
|
<span class="password-value" style="display:none">{{ user['password'] }}</span>
|
|
<button class="btn-show-password" data-user-id="{{ user['id'] }}">
|
|
<i class="eye-icon">👁️</i>
|
|
</button>
|
|
</td>
|
|
<td>
|
|
<label class="switch">
|
|
<input type="checkbox" {% if user['is_active'] %}checked{% endif %}
|
|
data-user-id="{{ user['id'] }}">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
<div class="actions">
|
|
<button class="btn-primary edit-btn" data-user-id="{{ user['id'] }}">编辑</button>
|
|
<button class="btn-danger delete-btn" data-user-id="{{ user['id'] }}">删除</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 编辑用户模态框 -->
|
|
<div id="editModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-title">编辑用户信息</div>
|
|
<div class="form-group">
|
|
<label for="editUsername">用户名</label>
|
|
<input type="text" id="editUsername" readonly>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="editPassword">新密码</label>
|
|
<input type="password" id="editPassword" placeholder="请输入新密码">
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="closeBtn" class="btn-danger">取消</button>
|
|
<button id="saveBtn" class="btn-success">保存更改</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 添加用户模态框 -->
|
|
<div id="createModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-title">添加新用户</div>
|
|
<div class="form-group">
|
|
<label for="createUsername">用户名</label>
|
|
<input type="text" id="createUsername" placeholder="请输入用户名">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="createPassword">密码</label>
|
|
<input type="password" id="createPassword" placeholder="请输入密码">
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="createCloseBtn" class="btn-danger">取消</button>
|
|
<button id="createSaveBtn" class="btn-success">确认添加</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 切换用户状态
|
|
document.querySelectorAll('input[type="checkbox"]').forEach(sw => {
|
|
sw.addEventListener('change', function() {
|
|
const userId = this.dataset.userId;
|
|
fetch(`/api/toggle_user/${userId}`, { method: 'POST' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (!data.success) {
|
|
this.checked = !this.checked;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
// 删除用户
|
|
document.querySelectorAll('.delete-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
if(confirm('确定要删除这个用户吗？此操作不可撤销！')) {
|
|
const userId = this.dataset.userId;
|
|
fetch(`/api/delete_user/${userId}`, { method: 'POST' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
location.reload();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// 显示/隐藏密码
|
|
document.querySelectorAll('.btn-show-password').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const row = this.closest('tr');
|
|
const placeholder = row.querySelector('.password-placeholder');
|
|
const password = row.querySelector('.password-value');
|
|
|
|
if (placeholder.style.display === 'none') {
|
|
placeholder.style.display = 'inline';
|
|
password.style.display = 'none';
|
|
} else {
|
|
placeholder.style.display = 'none';
|
|
password.style.display = 'inline';
|
|
}
|
|
});
|
|
});
|
|
|
|
// 编辑用户
|
|
document.querySelectorAll('.edit-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const row = this.closest('tr');
|
|
const username = row.querySelector('td').textContent;
|
|
const userId = this.dataset.userId;
|
|
|
|
document.getElementById('editUsername').value = username;
|
|
document.getElementById('editPassword').value = '';
|
|
document.getElementById('editModal').dataset.userId = userId;
|
|
document.getElementById('editModal').style.display = 'flex';
|
|
});
|
|
});
|
|
|
|
// 保存编辑
|
|
document.getElementById('saveBtn').addEventListener('click', function() {
|
|
const userId = document.getElementById('editModal').dataset.userId;
|
|
const password = document.getElementById('editPassword').value;
|
|
|
|
if(!password) {
|
|
alert('密码不能为空！');
|
|
return;
|
|
}
|
|
|
|
fetch('/api/update_user_password', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ user_id: userId, password })
|
|
}).then(response => response.json())
|
|
.then(data => {
|
|
if(data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert(data.error || '更新密码失败');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 关闭编辑模态框
|
|
document.getElementById('closeBtn').addEventListener('click', function() {
|
|
document.getElementById('editModal').style.display = 'none';
|
|
});
|
|
|
|
// 添加用户
|
|
document.getElementById('createSaveBtn').addEventListener('click', function() {
|
|
const username = document.getElementById('createUsername').value;
|
|
const password = document.getElementById('createPassword').value;
|
|
|
|
if(!username || !password) {
|
|
alert('用户名和密码不能为空！');
|
|
return;
|
|
}
|
|
|
|
fetch('/api/create_user', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password })
|
|
}).then(response => response.json())
|
|
.then(data => {
|
|
if(data.success) {
|
|
location.reload();
|
|
} else {
|
|
alert(data.error || '创建用户失败');
|
|
}
|
|
});
|
|
});
|
|
|
|
// 打开添加用户模态框
|
|
document.getElementById('createUserBtn').addEventListener('click', function() {
|
|
document.getElementById('createModal').style.display = 'flex';
|
|
});
|
|
|
|
// 关闭添加用户模态框
|
|
document.getElementById('createCloseBtn').addEventListener('click', function() {
|
|
document.getElementById('createModal').style.display = 'none';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |