github-test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitHub Configuration Test</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 20px auto; padding: 20px; }
        .config-section { background: #f8f9fa; padding: 20px; margin: 20px 0; border-radius: 8px; }
        .success { color: #28a745; }
        .error { color: #dc3545; }
        .warning { color: #ffc107; }
        .info { color: #17a2b8; }
        .token-input { width: 100%; padding: 8px; margin: 5px 0; font-family: monospace; }
        .btn { padding: 10px 20px; margin: 5px; border: none; border-radius: 4px; cursor: pointer; }
        .btn-primary { background: #007bff; color: white; }
        .btn-success { background: #28a745; color: white; }
        pre { background: #f1f1f1; padding: 10px; border-radius: 4px; overflow-x: auto; }
    </style>
</head>
<body>
    <h1>🔧 GitHub Configuration & Test</h1>
    
    <div class="config-section">
        <h2>1. GitHub Token Configuration</h2>
        <p>Enter your GitHub Personal Access Token below:</p>
        <input type="password" id="github-token" class="token-input" placeholder="ghp_your_token_here">
        <br>
        <button class="btn btn-primary" onclick="testGitHubConnection()">Test GitHub Connection</button>
        <button class="btn btn-success" onclick="saveToken()">Save Token to .env</button>
        
        <div id="token-result"></div>
        
        <h3>How to get GitHub Token:</h3>
        <ol>
            <li>Go to <a href="https://github.com/settings/tokens" target="_blank">GitHub Settings → Developer settings → Personal access tokens</a></li>
            <li>Click "Generate new token" → "Generate new token (classic)"</li>
            <li>Give it a name like "VvvebJs"</li>
            <li>Select scopes: <strong>repo</strong> (full repository access)</li>
            <li>Click "Generate token"</li>
            <li>Copy the token and paste it above</li>
        </ol>
    </div>
    
    <div class="config-section">
        <h2>2. Repository Configuration</h2>
        <p><strong>Repository:</strong> CaPaCaptain/VvvebJs_huggingface_db_01</p>
        <p><strong>Branch:</strong> main</p>
        <p><strong>Path:</strong> pages/</p>
        <button class="btn btn-primary" onclick="testRepoAccess()">Test Repository Access</button>
        <div id="repo-result"></div>
    </div>
    
    <div class="config-section">
        <h2>3. File Operations Test</h2>
        <button class="btn btn-primary" onclick="testFileList()">Test File List</button>
        <button class="btn btn-primary" onclick="testFileSave()">Test File Save</button>
        <div id="file-result"></div>
    </div>
    
    <div class="config-section">
        <h2>4. Debug Information</h2>
        <button class="btn btn-primary" onclick="getDebugInfo()">Get Debug Info</button>
        <div id="debug-result"></div>
    </div>

    <script>
        async function testGitHubConnection() {
            const token = document.getElementById('github-token').value;
            const resultDiv = document.getElementById('token-result');
            
            if (!token) {
                resultDiv.innerHTML = '<p class="error">❌ Please enter a GitHub token</p>';
                return;
            }
            
            resultDiv.innerHTML = '<p class="info">🔄 Testing GitHub connection...</p>';
            
            try {
                const response = await fetch('https://api.github.com/user', {
                    headers: {
                        'Authorization': `token ${token}`,
                        'User-Agent': 'VvvebJs-Test'
                    }
                });
                
                if (response.ok) {
                    const user = await response.json();
                    resultDiv.innerHTML = `
                        <p class="success">✅ GitHub connection successful!</p>
                        <p>User: ${user.login} (${user.name || 'No name'})</p>
                        <p>API Rate Limit: ${response.headers.get('x-ratelimit-remaining')}/${response.headers.get('x-ratelimit-limit')}</p>
                    `;
                } else {
                    const error = await response.json();
                    resultDiv.innerHTML = `
                        <p class="error">❌ GitHub connection failed!</p>
                        <p>Status: ${response.status}</p>
                        <p>Error: ${error.message || 'Unknown error'}</p>
                    `;
                }
            } catch (error) {
                resultDiv.innerHTML = `<p class="error">❌ Network error: ${error.message}</p>`;
            }
        }
        
        async function testRepoAccess() {
            const token = document.getElementById('github-token').value;
            const resultDiv = document.getElementById('repo-result');
            
            if (!token) {
                resultDiv.innerHTML = '<p class="error">❌ Please enter a GitHub token first</p>';
                return;
            }
            
            resultDiv.innerHTML = '<p class="info">🔄 Testing repository access...</p>';
            
            try {
                const response = await fetch('https://api.github.com/repos/CaPaCaptain/VvvebJs_huggingface_db_01', {
                    headers: {
                        'Authorization': `token ${token}`,
                        'User-Agent': 'VvvebJs-Test'
                    }
                });
                
                if (response.ok) {
                    const repo = await response.json();
                    resultDiv.innerHTML = `
                        <p class="success">✅ Repository access successful!</p>
                        <p>Repository: ${repo.full_name}</p>
                        <p>Default Branch: ${repo.default_branch}</p>
                        <p>Private: ${repo.private ? 'Yes' : 'No'}</p>
                        <p>Permissions: ${JSON.stringify(repo.permissions || {})}</p>
                    `;
                } else {
                    const error = await response.json();
                    resultDiv.innerHTML = `
                        <p class="error">❌ Repository access failed!</p>
                        <p>Status: ${response.status}</p>
                        <p>Error: ${error.message || 'Unknown error'}</p>
                    `;
                }
            } catch (error) {
                resultDiv.innerHTML = `<p class="error">❌ Network error: ${error.message}</p>`;
            }
        }
        
        async function testFileList() {
            const resultDiv = document.getElementById('file-result');
            resultDiv.innerHTML = '<p class="info">🔄 Testing file list...</p>';
            
            try {
                const response = await fetch('save.php?action=listFiles');
                const data = await response.json();
                
                resultDiv.innerHTML = `
                    <h3>File List Result:</h3>
                    <pre>${JSON.stringify(data, null, 2)}</pre>
                `;
            } catch (error) {
                resultDiv.innerHTML = `<p class="error">❌ Error: ${error.message}</p>`;
            }
        }
        
        async function testFileSave() {
            const resultDiv = document.getElementById('file-result');
            resultDiv.innerHTML = '<p class="info">🔄 Testing file save...</p>';
            
            const testHtml = `<!DOCTYPE html>
<html>
<head><title>Test Page</title></head>
<body><h1>Test Page Created at ${new Date().toISOString()}</h1></body>
</html>`;
            
            try {
                const formData = new FormData();
                formData.append('html', testHtml);
                formData.append('file', 'test-page.html');
                
                const response = await fetch('save.php', {
                    method: 'POST',
                    body: formData
                });
                
                const result = await response.text();
                resultDiv.innerHTML = `
                    <h3>File Save Result:</h3>
                    <pre>${result}</pre>
                `;
            } catch (error) {
                resultDiv.innerHTML = `<p class="error">❌ Error: ${error.message}</p>`;
            }
        }
        
        async function getDebugInfo() {
            const resultDiv = document.getElementById('debug-result');
            resultDiv.innerHTML = '<p class="info">🔄 Getting debug info...</p>';
            
            try {
                const response = await fetch('save.php?action=checkAuth');
                const data = await response.json();
                
                resultDiv.innerHTML = `
                    <h3>Current Status:</h3>
                    <pre>${JSON.stringify(data, null, 2)}</pre>
                `;
            } catch (error) {
                resultDiv.innerHTML = `<p class="error">❌ Error: ${error.message}</p>`;
            }
        }
        
        async function saveToken() {
            const token = document.getElementById('github-token').value;
            const resultDiv = document.getElementById('token-result');
            
            if (!token) {
                resultDiv.innerHTML = '<p class="error">❌ Please enter a GitHub token</p>';
                return;
            }
            
            // This would require a separate PHP endpoint to update the .env file
            resultDiv.innerHTML = `
                <p class="warning">⚠️ Manual Configuration Required</p>
                <p>Please manually update your .env file with:</p>
                <pre>GITHUB_TOKEN=${token}</pre>
                <p>Or use the configuration interface in config.php</p>
            `;
        }
    </script>
</body>
</html>