quantum-ai/templates/core/webhook_test.html

{% extends 'base.html' %}
{% load static %}

{% block title %}Simple Webhook Test{% endblock %}

{% block extra_css %}
<style>
    .test-page {
        background: var(--gradient-hero);
        min-height: calc(100vh - 80px);
        padding: clamp(20px, 5vw, 40px);
    }
    
    .test-container {
        max-width: 900px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 16px;
        padding: 30px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(20px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .test-title {
        font-size: 28px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }
    
    .webhook-url {
        background: #f8fafc;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        padding: 15px;
        margin: 20px 0;
        font-family: 'Courier New', monospace;
        font-size: 14px;
        word-break: break-all;
        position: relative;
    }
    
    .copy-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        background: var(--primary-blue);
        color: white;
        border: none;
        border-radius: 4px;
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;
    }
    
    .test-buttons {
        display: flex;
        gap: 15px;
        margin: 25px 0;
        flex-wrap: wrap;
    }
    
    .test-btn {
        flex: 1;
        min-width: 150px;
        padding: 12px 20px;
        border: 2px solid var(--primary-blue);
        background: transparent;
        color: var(--primary-blue);
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .test-btn:hover {
        background: var(--primary-blue);
        color: white;
        transform: translateY(-1px);
    }
    
    .test-btn.primary {
        background: var(--primary-blue);
        color: white;
    }
    
    .test-btn.primary:hover {
        background: var(--primary-dark);
    }
    
    .logs-container {
        background: #1a1a1a;
        color: #00ff00;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        line-height: 1.5;
        max-height: 400px;
        overflow-y: auto;
        position: relative;
    }
    
    .log-entry {
        margin: 3px 0;
        padding: 2px 0;
    }
    
    .log-timestamp {
        color: #888;
        margin-right: 10px;
    }
    
    .log-method {
        color: #74c0fc;
        font-weight: bold;
        margin-right: 10px;
    }
    
    .log-success {
        color: #00ff00;
    }
    
    .log-error {
        color: #ff6b6b;
    }
    
    .log-info {
        color: #74c0fc;
    }
    
    .log-warning {
        color: #ffd43b;
    }
    
    .status-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8fafc;
        border-radius: 8px;
        padding: 15px;
        margin: 20px 0;
        font-size: 14px;
    }
    
    .status-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    .status-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #e74c3c;
        animation: pulse 2s infinite;
    }
    
    .status-dot.active {
        background: #27ae60;
    }
    
    @keyframes pulse {
        0% { opacity: 1; }
        50% { opacity: 0.5; }
        100% { opacity: 1; }
    }
    
    .info-section {
        background: #e3f2fd;
        border-radius: 8px;
        padding: 15px;
        margin: 20px 0;
        font-size: 14px;
        line-height: 1.6;
    }
    
    .clear-logs {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #444;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 5px 10px;
        font-size: 11px;
        cursor: pointer;
    }
    
    .clear-logs:hover {
        background: #666;
    }
</style>
{% endblock %}

{% block content %}
<div class="test-page">
    <div class="test-container">
        <h1 class="test-title">
            🧪 Simple Webhook Test
            <div class="status-dot" id="statusDot"></div>
        </h1>
        
        <div class="info-section">
            <strong>💡 How to use:</strong><br>
            1. Copy the webhook URL below<br>
            2. Use it in Stripe dashboard or any webhook testing tool<br>
            3. Send test webhooks and watch the logs below<br>
            4. This endpoint accepts any HTTP method and logs all details
        </div>
        
        <div class="webhook-url">
            <strong>Webhook Test URL:</strong><br>
            <span id="webhookUrl">https://netcop.up.railway.app/simple-webhook-test/</span>
            <button class="copy-btn" onclick="copyWebhookUrl()">📋 Copy</button>
        </div>
        
        <div class="status-bar">
            <div class="status-item">
                <div class="status-dot active" id="endpointStatus"></div>
                <span>Endpoint: Active</span>
            </div>
            <div class="status-item">
                <div class="status-dot" id="webhookStatus"></div>
                <span id="webhookStatusText">Waiting for webhooks...</span>
            </div>
            <div class="status-item">
                <span>Logs: <span id="logCount">0</span></span>
            </div>
        </div>
        
        <div class="test-buttons">
            <button class="test-btn primary" onclick="sendTestWebhook()">📡 Send Test Webhook</button>
            <button class="test-btn" onclick="refreshLogs()">🔄 Refresh Logs</button>
            <button class="test-btn" onclick="clearLogs()">🗑️ Clear Logs</button>
            <button class="test-btn" onclick="exportLogs()">💾 Export Logs</button>
        </div>
        
        <div class="logs-container" id="logsContainer">
            <button class="clear-logs" onclick="clearLogs()">Clear</button>
            <div class="log-entry log-info">
                <span class="log-timestamp">[INIT]</span> Webhook test endpoint initialized
            </div>
            <div class="log-entry log-success">
                <span class="log-timestamp">[READY]</span> Listening for webhook events...
            </div>
        </div>
    </div>
</div>

<script>
    let pollingInterval = null;
    let logCount = 0;
    
    // Initialize
    document.addEventListener('DOMContentLoaded', function() {
        startPolling();
        updateWebhookUrl();
        logMessage('System ready for webhook testing', 'success');
    });
    
    function updateWebhookUrl() {
        const protocol = window.location.protocol;
        const host = window.location.host;
        const url = `${protocol}//${host}/simple-webhook-test/`;
        document.getElementById('webhookUrl').textContent = url;
    }
    
    function copyWebhookUrl() {
        const url = document.getElementById('webhookUrl').textContent;
        navigator.clipboard.writeText(url).then(() => {
            logMessage('Webhook URL copied to clipboard', 'success');
        });
    }
    
    function sendTestWebhook() {
        const url = document.getElementById('webhookUrl').textContent;
        logMessage('Sending test POST request to webhook endpoint...', 'info');
        
        fetch('/simple-webhook-test/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-Test-Header': 'webhook-test'
            },
            body: JSON.stringify({
                test: true,
                timestamp: new Date().toISOString(),
                source: 'webhook-test-page'
            })
        })
        .then(response => response.text())
        .then(data => {
            logMessage(`Test webhook sent successfully: ${data}`, 'success');
            updateWebhookStatus(true);
        })
        .catch(error => {
            logMessage(`Test webhook failed: ${error.message}`, 'error');
        });
    }
    
    function refreshLogs() {
        logMessage('Refreshing webhook logs...', 'info');
        
        fetch('/webhook-logs/')
        .then(response => response.json())
        .then(data => {
            displayLogs(data.logs);
            logMessage(`Logs refreshed - ${data.logs.length} entries`, 'success');
        })
        .catch(error => {
            logMessage(`Failed to refresh logs: ${error.message}`, 'error');
        });
    }
    
    function displayLogs(logs) {
        const container = document.getElementById('logsContainer');
        
        // Keep the clear button and initial messages
        const existingContent = container.innerHTML.split('<div class="log-entry')[0];
        container.innerHTML = existingContent;
        
        if (logs.length === 0) {
            const entry = document.createElement('div');
            entry.className = 'log-entry log-info';
            entry.innerHTML = '<span class="log-timestamp">[INFO]</span> No webhook events received yet';
            container.appendChild(entry);
        } else {
            logs.forEach(log => {
                const entry = document.createElement('div');
                entry.className = 'log-entry log-success';
                
                const bodyPreview = log.body ? 
                    (log.body.length > 100 ? log.body.substring(0, 100) + '...' : log.body) : 
                    'no body';
                
                entry.innerHTML = `
                    <span class="log-timestamp">[${log.timestamp}]</span>
                    <span class="log-method">${log.method}</span>
                    ${log.content_type} - Body: ${bodyPreview}
                `;
                container.appendChild(entry);
            });
            
            updateWebhookStatus(true);
        }
        
        // Update log count
        logCount = logs.length;
        document.getElementById('logCount').textContent = logCount;
        
        // Scroll to bottom
        container.scrollTop = container.scrollHeight;
    }
    
    function clearLogs() {
        const container = document.getElementById('logsContainer');
        
        // Reset to initial state
        container.innerHTML = `
            <button class="clear-logs" onclick="clearLogs()">Clear</button>
            <div class="log-entry log-info">
                <span class="log-timestamp">[INIT]</span> Webhook test endpoint initialized
            </div>
            <div class="log-entry log-success">
                <span class="log-timestamp">[READY]</span> Listening for webhook events...
            </div>
        `;
        
        logCount = 0;
        document.getElementById('logCount').textContent = logCount;
        updateWebhookStatus(false);
        
        logMessage('Logs cleared', 'info');
    }
    
    function exportLogs() {
        fetch('/webhook-logs/')
        .then(response => response.json())
        .then(data => {
            const blob = new Blob([JSON.stringify(data.logs, null, 2)], {
                type: 'application/json'
            });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = `webhook-logs-${new Date().toISOString().split('T')[0]}.json`;
            a.click();
            URL.revokeObjectURL(url);
            
            logMessage('Logs exported successfully', 'success');
        })
        .catch(error => {
            logMessage(`Export failed: ${error.message}`, 'error');
        });
    }
    
    function startPolling() {
        // Poll for new logs every 3 seconds
        pollingInterval = setInterval(refreshLogs, 3000);
    }
    
    function updateWebhookStatus(received) {
        const statusDot = document.getElementById('webhookStatus');
        const statusText = document.getElementById('webhookStatusText');
        
        if (received) {
            statusDot.classList.add('active');
            statusText.textContent = 'Webhooks received!';
        } else {
            statusDot.classList.remove('active');
            statusText.textContent = 'Waiting for webhooks...';
        }
    }
    
    function logMessage(message, type = 'info') {
        const container = document.getElementById('logsContainer');
        const timestamp = new Date().toLocaleTimeString();
        
        const entry = document.createElement('div');
        entry.className = `log-entry log-${type}`;
        entry.innerHTML = `<span class="log-timestamp">[${timestamp}]</span> ${message}`;
        
        container.appendChild(entry);
        container.scrollTop = container.scrollHeight;
        
        // Keep only last 100 entries
        while (container.children.length > 102) { // +2 for clear button and initial messages
            container.removeChild(container.children[1]); // Skip clear button
        }
    }
    
    // Cleanup on page unload
    window.addEventListener('beforeunload', function() {
        if (pollingInterval) {
            clearInterval(pollingInterval);
        }
    });
</script>
{% endblock %}