github-user-test.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub 用户管理系统测试</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .test-result { margin: 10px 0; padding: 10px; border-radius: 5px; }
        .test-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .test-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .test-info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1>🧪 GitHub 用户管理系统测试</h1>
        <p class="text-muted">此页面测试新的基于GitHub的用户数据同步功能</p>
        
        <div id="test-results"></div>
        
        <div class="mt-4">
            <h3>🔧 测试操作</h3>
            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5>📊 加载GitHub用户数据</h5>
                        </div>
                        <div class="card-body">
                            <button class="btn btn-primary" onclick="testLoadUsers()">测试从GitHub加载用户</button>
                            <div id="load-users-result" class="mt-2"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <h5>✅ 登录状态检查</h5>
                        </div>
                        <div class="card-body">
                            <button class="btn btn-success" onclick="checkLoginStatus()">检查当前登录状态</button>
                            <div id="login-status-result" class="mt-2"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-3">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5>🔐 测试用户注册功能</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <input type="text" class="form-control" id="test-username" placeholder="测试用户名">
                                </div>
                                <div class="col-md-4">
                                    <input type="password" class="form-control" id="test-password" placeholder="测试密码">
                                </div>
                                <div class="col-md-4">
                                    <button class="btn btn-warning" onclick="testRegister()">测试注册</button>
                                </div>
                            </div>
                            <div id="register-result" class="mt-2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="mt-4">
            <h3>📋 系统说明</h3>
            <div class="alert alert-info">
                <h5>🔄 新的GitHub用户管理特性：</h5>
                <ul>
                    <li><strong>实时同步：</strong> 每次登录都从GitHub仓库加载最新用户数据</li>
                    <li><strong>数据持久化：</strong> 用户数据存储在 <code>system/users.json</code> 文件中</li>
                    <li><strong>多实例同步：</strong> 多个部署实例间自动共享用户数据</li>
                    <li><strong>安全性：</strong> 密码使用 PHP password_hash() 加密存储</li>
                    <li><strong>无缝迁移：</strong> 保持与原有环境变量用户系统的兼容性</li>
                </ul>
            </div>
        </div>
    </div>

    <script>
        function showResult(elementId, message, type = 'info') {
            const element = document.getElementById(elementId);
            element.innerHTML = `<div class="test-result test-${type}">${message}</div>`;
        }

        async function testLoadUsers() {
            showResult('load-users-result', '正在测试从GitHub加载用户数据...', 'info');
            
            try {
                const response = await fetch('user-manager.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'action=get_user_list'
                });
                
                const result = await response.json();
                
                if (result.success) {
                    let message = `✅ 成功从GitHub加载 ${result.users.length} 个用户<br>`;
                    result.users.forEach(user => {
                        message += `　- ${user.username} (${user.created})<br>`;
                    });
                    showResult('load-users-result', message, 'success');
                } else {
                    showResult('load-users-result', `❌ 加载失败: ${result.message}`, 'error');
                }
            } catch (error) {
                showResult('load-users-result', `❌ 网络错误: ${error.message}`, 'error');
            }
        }

        async function checkLoginStatus() {
            showResult('login-status-result', '正在检查登录状态...', 'info');
            
            try {
                const response = await fetch('user-manager.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'action=check_login'
                });
                
                const result = await response.json();
                
                if (result.logged_in) {
                    showResult('login-status-result', `✅ 已登录用户: ${result.username}`, 'success');
                } else {
                    showResult('login-status-result', '❌ 当前未登录', 'info');
                }
            } catch (error) {
                showResult('login-status-result', `❌ 检查失败: ${error.message}`, 'error');
            }
        }

        async function testRegister() {
            const username = document.getElementById('test-username').value;
            const password = document.getElementById('test-password').value;
            
            if (!username || !password) {
                showResult('register-result', '❌ 请填写用户名和密码', 'error');
                return;
            }
            
            showResult('register-result', '正在测试注册功能...', 'info');
            
            try {
                const response = await fetch('user-manager.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `action=register&username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&email=test@example.com`
                });
                
                const result = await response.json();
                
                if (result.success) {
                    showResult('register-result', `✅ 注册成功: ${result.message}`, 'success');
                } else {
                    showResult('register-result', `❌ 注册失败: ${result.message}`, 'error');
                }
            } catch (error) {
                showResult('register-result', `❌ 网络错误: ${error.message}`, 'error');
            }
        }

        // 页面加载时自动检查登录状态
        window.onload = function() {
            checkLoginStatus();
        };
    </script>
</body>
</html>