181 lines
7.1 KiB
HTML
181 lines
7.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="container">
|
|
<h1>Squid代理用户管理系统</h1>
|
|
|
|
<div class="header-actions">
|
|
<button id="createUserBtn" class="btn-primary">+ 添加新用户</button>
|
|
<button id="logoutBtn" class="btn-danger">退出系统</button>
|
|
</div>
|
|
|
|
<table>
|
|
<tr>
|
|
<th>用户名</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
{% for user in users %}
|
|
<tr>
|
|
<td>{{ user.name }}</td>
|
|
<td>
|
|
<div class="actions">
|
|
<label class="switch">
|
|
<input type="checkbox" {% if user.is_active %}checked{% endif %} data-username="{{ user.name }}">
|
|
<span class="slider"></span>
|
|
</label>
|
|
<button class="btn-primary edit-btn">编辑</button>
|
|
<button class="btn-danger delete-btn">删除</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
|
|
<footer>
|
|
由 Flask 重构 - 基于原项目 <a href="https://github.com/ckazi" target="_blank">ckazi</a>
|
|
</footer>
|
|
</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 username = this.dataset.username;
|
|
fetch(`/toggle/${username}`, { method: 'POST' });
|
|
});
|
|
});
|
|
|
|
// 删除用户
|
|
document.querySelectorAll('.delete-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
if(confirm('确定要删除这个用户吗？此操作不可撤销！')) {
|
|
const username = this.closest('tr').querySelector('td').textContent;
|
|
fetch(`/delete/${username}`, { method: 'POST' })
|
|
.then(() => location.reload());
|
|
}
|
|
});
|
|
});
|
|
|
|
// 编辑用户
|
|
document.querySelectorAll('.edit-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const username = this.closest('tr').querySelector('td').textContent;
|
|
document.getElementById('editUsername').value = username;
|
|
document.getElementById('editPassword').value = '';
|
|
document.getElementById('editModal').style.display = 'flex';
|
|
});
|
|
});
|
|
|
|
// 保存编辑
|
|
document.getElementById('saveBtn').addEventListener('click', function() {
|
|
const username = document.getElementById('editUsername').value;
|
|
const password = document.getElementById('editPassword').value;
|
|
|
|
if(!password) {
|
|
alert('密码不能为空！');
|
|
return;
|
|
}
|
|
|
|
fetch('/save_user', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password })
|
|
}).then(response => {
|
|
if(response.ok) location.reload();
|
|
});
|
|
});
|
|
|
|
// 关闭编辑模态框
|
|
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('/create_user', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password })
|
|
}).then(response => {
|
|
if(response.ok) {
|
|
location.reload();
|
|
} else {
|
|
response.json().then(data => 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';
|
|
});
|
|
|
|
// 退出系统
|
|
document.getElementById('logoutBtn').addEventListener('click', function() {
|
|
if(confirm('确定要退出系统吗？')) {
|
|
fetch('/logout').then(() => {
|
|
window.location.href = '/';
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |