squid_ui/templates/clients.html

<!-- templates/clients.html -->
{% extends "base.html" %}

{% block title %}用户管理 - Squid代理用户管理系统{% endblock %}

{% block content %}
    <h1>用户管理</h1>

    <div class="header-actions">
        <button id="createUserBtn" class="btn-primary">+ 添加新用户</button>
    </div>

    <table>
        <tr>
            <th>用户名</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        {% for user in users %}
        <tr>
            <td>{{ user.name }}</td>
            <td>{{ "启用" if user.is_active else "禁用" }}</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>

    <!-- 分页导航 -->
    <div class="pagination">
        {% if page > 1 %}
            <a href="{{ url_for('clients', page=page-1) }}">&laquo; 上一页</a>
        {% endif %}

        {% for p in range(1, total_pages + 1) %}
            {% if p == page %}
                <span class="current">{{ p }}</span>
            {% else %}
                <a href="{{ url_for('clients', page=p) }}">{{ p }}</a>
            {% endif %}
        {% endfor %}

        {% if page < total_pages %}
            <a href="{{ url_for('clients', page=page+1) }}">下一页 &raquo;</a>
        {% endif %}
    </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>
{% endblock %}

{% block scripts %}
    <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 = '/';
                    });
                }
            });
        });
        // 增加导航按钮事件
        document.getElementById('logoutBtn').addEventListener('click', function() {
            if(confirm('确定要退出系统吗？')) {
                fetch('/logout').then(() => {
                    window.location.href = '/';
                });
            }
        });
    </script>
{% endblock %}