LogiFlow/test_task_update.html

<!DOCTYPE html>
<html>
<head>
    <title>Test Task Update - Production Debug</title>
    <style>
        body { font-family: monospace; padding: 20px; }
        .log { margin: 10px 0; padding: 10px; background: #f5f5f5; }
        .error { background: #ffe6e6; }
        .success { background: #e6ffe6; }
        button { padding: 10px; margin: 5px; }
        textarea, input { width: 100%; margin: 5px 0; }
    </style>
</head>
<body>
    <h1>Test Task Update - Production Debug</h1>
    
    <div>
        <h3>1. D'abord, connectez-vous manuellement sur LogiFlow</h3>
        <p>Ouvrez <a href="https://logiflow.ffnancy.fr" target="_blank">LogiFlow</a> dans un autre onglet et connectez-vous avec vos vrais identifiants.</p>
    </div>

    <div>
        <h3>2. Test de l'endpoint problématique</h3>
        <label>Task ID à tester:</label>
        <input type="number" id="taskId" value="99" />
        
        <label>JSON des données à envoyer:</label>
        <textarea id="taskData" rows="10">{
  "title": "Test Debug",
  "description": "Test de debug depuis le script",
  "priority": "medium",
  "status": "pending",
  "assignedTo": "admin",
  "startDate": "2025-08-20",
  "dueDate": null
}</textarea>

        <button onclick="testTaskUpdate()">Test Task Update (PUT)</button>
        <button onclick="clearLogs()">Clear Logs</button>
    </div>

    <div id="logs"></div>

    <script>
        function log(message, type = 'info') {
            const logs = document.getElementById('logs');
            const div = document.createElement('div');
            div.className = `log ${type}`;
            div.innerHTML = `[${new Date().toLocaleTimeString()}] ${message}`;
            logs.insertBefore(div, logs.firstChild);
        }

        function clearLogs() {
            document.getElementById('logs').innerHTML = '';
        }

        async function testTaskUpdate() {
            const taskId = document.getElementById('taskId').value;
            const taskData = document.getElementById('taskData').value;
            
            log(`Testing task update for ID: ${taskId}`);
            
            try {
                // Parse JSON data
                const data = JSON.parse(taskData);
                log(`Parsed data: ${JSON.stringify(data, null, 2)}`);
                
                // Test the problematic endpoint
                const response = await fetch(`/api/tasks/${taskId}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    credentials: 'same-origin', // Important pour envoyer les cookies de session
                    body: taskData
                });
                
                log(`Response status: ${response.status} ${response.statusText}`);
                
                if (response.ok) {
                    const result = await response.json();
                    log(`Success! Response: ${JSON.stringify(result, null, 2)}`, 'success');
                } else {
                    const error = await response.text();
                    log(`Error response: ${error}`, 'error');
                    
                    // Additional debug info
                    log(`Response headers: ${JSON.stringify([...response.headers.entries()])}`, 'error');
                }
                
            } catch (error) {
                log(`JavaScript error: ${error.message}`, 'error');
                log(`Stack trace: ${error.stack}`, 'error');
            }
        }

        // Test connectivity on load
        window.onload = function() {
            log('Script loaded. Please login to LogiFlow first!');
            
            // Test if we can reach the API
            fetch('/api/user')
                .then(response => {
                    if (response.status === 401) {
                        log('Not authenticated - please login first', 'error');
                    } else if (response.ok) {
                        log('Authenticated successfully', 'success');
                        return response.json();
                    } else {
                        log(`Unexpected status: ${response.status}`, 'error');
                    }
                })
                .then(user => {
                    if (user) {
                        log(`Logged in as: ${user.username} (${user.role})`, 'success');
                    }
                })
                .catch(error => {
                    log(`Connection test failed: ${error.message}`, 'error');
                });
        };
    </script>
</body>
</html>