602 lines
27 KiB
HTML
602 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="light">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Webhook Catcher</title>
|
|
<script src="https://unpkg.com/htmx.org@1.9.3"></script>
|
|
<script src="https://unpkg.com/hyperscript.org@0.9.9"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet" />
|
|
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/relativeTime.js"></script>
|
|
|
|
<link rel="stylesheet" href="/static/css/ui.css?v=2026-01-13">
|
|
|
|
</head>
|
|
<body class="min-h-screen bg-gray-100 dark:bg-gray-900">
|
|
<div id="admin-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center">
|
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl max-w-md w-full mx-4">
|
|
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white">Admin Authentication Required</h3>
|
|
<p class="text-gray-600 dark:text-gray-300 mb-4">This operation requires admin privileges. Please enter your admin token:</p>
|
|
<input
|
|
type="password"
|
|
id="admin-token-input"
|
|
placeholder="Enter admin token..."
|
|
class="w-full px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white mb-4 focus:ring-2 focus:ring-blue-500 outline-none">
|
|
<div class="flex gap-2 justify-end">
|
|
<button
|
|
onclick="cancelAdminModal()"
|
|
class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-600 transition">
|
|
Cancel
|
|
</button>
|
|
<button
|
|
onclick="submitAdminToken()"
|
|
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sticky-header">
|
|
<div class="max-w-6xl mx-auto flex justify-between items-center">
|
|
<div class="flex items-center gap-4">
|
|
<h1 class="text-4xl font-bold text-blue-600">Webhook Catcher 🚀</h1>
|
|
<a href="/logs/view" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">📋 Logs</a>
|
|
<span id="admin-status" class="px-2 py-1 text-xs rounded hidden">
|
|
🔒 Admin Protected
|
|
</span>
|
|
</div>
|
|
<button onclick="toggleDarkMode()" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-lg transition-colors flex items-center gap-2">
|
|
<span class="dark:hidden">🌙</span>
|
|
<span class="hidden dark:inline">☀️</span>
|
|
<span class="dark:hidden">Dark</span>
|
|
<span class="hidden dark:inline">Light</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-6xl mx-auto p-8">
|
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8">
|
|
<h2 class="text-xl font-semibold mb-4">🚀 Webhook Catcher Status</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div class="text-sm text-gray-600 dark:text-gray-300 mb-1">Webhook URL</div>
|
|
<code class="text-sm bg-gray-100 dark:bg-gray-600 p-1 rounded block truncate" id="webhook-url-display"></code>
|
|
</div>
|
|
<div class="p-4 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
|
<div class="text-sm text-gray-600 dark:text-gray-300 mb-1">Total Received</div>
|
|
<span id="total-count" class="text-lg font-bold text-blue-600 dark:text-blue-400">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8">
|
|
<h2 class="text-xl font-semibold mb-4">📥 Your Webhook URL</h2>
|
|
<div class="flex items-center gap-2">
|
|
<code class="bg-gray-100 dark:bg-gray-700 p-3 rounded flex-1 text-sm" id="webhook-url"></code>
|
|
<button onclick="copyWebhookUrl()" class="px-4 py-3 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
|
|
📋 Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8">
|
|
<details class="group">
|
|
<summary class="text-xl font-semibold mb-4 cursor-pointer hover:text-blue-600 transition-colors">
|
|
📚 Quick Start Guide
|
|
</summary>
|
|
<div class="mt-4 space-y-4">
|
|
<h3 class="text-lg font-medium">Test with cURL</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
|
|
<h4 class="text-sm font-medium mb-2">PowerShell/Terminal:</h4>
|
|
<pre class="text-sm overflow-x-auto"><code>curl -X POST <span id="curl-url-powershell"></span>/webhook -H "Content-Type: application/json" -d "{\"event\": \"test\", \"message\": \"Hello World!\"}"</code></pre>
|
|
<button onclick="copyCurlCommand('powershell')" class="mt-2 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
|
|
📋 Copy Command
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-medium mt-6">Common Use Cases</h3>
|
|
<ul class="list-disc pl-5 space-y-2 text-gray-700 dark:text-gray-300">
|
|
<li>GitHub repository events and CI/CD pipelines</li>
|
|
<li>Discord/Slack bot development and testing</li>
|
|
<li>Payment processing (Stripe, PayPal) notifications</li>
|
|
<li>IoT device updates and monitoring</li>
|
|
</ul>
|
|
|
|
<h3 class="text-lg font-medium mt-6">How to Use</h3>
|
|
<ol class="list-decimal pl-5 space-y-2 text-gray-700 dark:text-gray-300">
|
|
<li>Copy your webhook URL from above</li>
|
|
<li>Add it to your service (GitHub, Discord, Stripe, etc.)</li>
|
|
<li>Send webhooks and view them in real-time below</li>
|
|
<li>Use search, replay, or export features as needed</li>
|
|
</ol>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8">
|
|
<h2 class="text-xl font-semibold mb-4">🧪 Test Your Setup</h2>
|
|
<div class="mb-4">
|
|
<textarea
|
|
id="test-payload"
|
|
class="w-full p-3 border rounded-lg dark:bg-gray-700 dark:border-gray-600"
|
|
rows="4"
|
|
placeholder='{"event": "test", "message": "Hello World!", "timestamp": "2025-01-31T12:00:00Z"}'
|
|
></textarea>
|
|
</div>
|
|
<button
|
|
onclick="sendTestWebhook()"
|
|
class="px-6 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
|
|
🚀 Send Test Webhook
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4 mb-6">
|
|
<div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center">
|
|
<h2 class="text-xl font-semibold">📋 Webhook Logs</h2>
|
|
<input
|
|
type="search"
|
|
name="search"
|
|
placeholder="🔍 Search logs..."
|
|
class="px-3 py-2 border rounded-lg dark:bg-gray-700 dark:border-gray-600"
|
|
hx-get="/logs"
|
|
hx-trigger="keyup changed delay:500ms"
|
|
hx-target="#logs">
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<a href="/export?format=json" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
|
|
📥 JSON
|
|
</a>
|
|
<a href="/export?format=csv" class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">
|
|
📥 CSV
|
|
</a>
|
|
<button
|
|
onclick="clearLogsWithModal()"
|
|
class="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition">
|
|
🗑️ Clear
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="log-count text-sm text-gray-600 dark:text-gray-400 mb-2">Loading logs...</div>
|
|
|
|
<div id="logs"
|
|
class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden"
|
|
hx-get="/logs"
|
|
hx-trigger="load, every 5s">
|
|
<div class="p-8 text-center text-gray-500 dark:text-gray-400">
|
|
<div class="animate-spin h-8 w-8 mx-auto mb-4">
|
|
<svg class="text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
<p>Loading webhooks...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
dayjs.extend(window.dayjs_plugin_relativeTime);
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const webhookUrl = document.getElementById('webhook-url');
|
|
const curlUrl = document.getElementById('curl-url');
|
|
if (webhookUrl) webhookUrl.textContent = window.location.origin + '/webhook';
|
|
if (curlUrl) curlUrl.textContent = window.location.origin;
|
|
|
|
const baseUrl = window.location.origin;
|
|
['unix', 'windows', 'powershell'].forEach(type => {
|
|
const el = document.getElementById(`curl-url-${type}`);
|
|
if (el) el.textContent = baseUrl;
|
|
});
|
|
|
|
const webhookUrlDisplay = document.getElementById('webhook-url-display');
|
|
if (webhookUrlDisplay) {
|
|
webhookUrlDisplay.textContent = window.location.origin + '/webhook';
|
|
}
|
|
|
|
loadConfigStatus();
|
|
|
|
setInterval(loadConfigStatus, 30000);
|
|
});
|
|
|
|
function copyWebhookUrl() {
|
|
const url = window.location.origin + '/webhook';
|
|
navigator.clipboard.writeText(url);
|
|
const btn = event.target;
|
|
btn.innerText = '✅ Copied!';
|
|
setTimeout(() => btn.innerText = '📋 Copy', 2000);
|
|
}
|
|
|
|
function formatJSON(str) {
|
|
try {
|
|
return JSON.stringify(JSON.parse(str), null, 2);
|
|
} catch {
|
|
return str;
|
|
}
|
|
}
|
|
|
|
async function executeAdminOperation(operation, operationName) {
|
|
try {
|
|
let result = await operation();
|
|
return result;
|
|
} catch (error) {
|
|
console.log(`Operation ${operationName} failed:`, error);
|
|
|
|
const is401 = error.status === 401 ||
|
|
(error.response && error.response.status === 401) ||
|
|
(error.message && error.message.includes('401')) ||
|
|
(error.message && error.message.includes('Admin token required'));
|
|
|
|
if (is401) {
|
|
console.log('401 detected, showing admin modal');
|
|
return new Promise((resolve, reject) => {
|
|
pendingAdminOperation = async () => {
|
|
try {
|
|
console.log('Retrying operation with token:', currentAdminToken ? 'provided' : 'missing');
|
|
const result = await operation(currentAdminToken);
|
|
resolve(result);
|
|
} catch (retryError) {
|
|
console.log('Retry failed:', retryError);
|
|
const isRetry401 = retryError.status === 401 ||
|
|
(retryError.response && retryError.response.status === 401) ||
|
|
(retryError.message && retryError.message.includes('401')) ||
|
|
(retryError.message && retryError.message.includes('Admin token required'));
|
|
|
|
if (isRetry401) {
|
|
alert('❌ Invalid admin token. Please try again.');
|
|
currentAdminToken = null;
|
|
showAdminModal(pendingAdminOperation);
|
|
} else {
|
|
alert(`❌ ${operationName} failed: ${retryError.message}`);
|
|
reject(retryError);
|
|
}
|
|
}
|
|
};
|
|
showAdminModal(pendingAdminOperation);
|
|
});
|
|
} else {
|
|
throw error;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function replayWebhook(btn) {
|
|
if (!btn) return;
|
|
|
|
const targetUrl = btn.previousElementSibling?.value?.trim();
|
|
const webhookId = btn.closest('.webhook-item')?.dataset?.id;
|
|
|
|
if (!targetUrl) {
|
|
alert('Please enter a target URL');
|
|
return;
|
|
}
|
|
|
|
if (!webhookId) {
|
|
console.error('No webhook ID found');
|
|
return;
|
|
}
|
|
|
|
console.log(`Attempting to replay webhook ${webhookId} to ${targetUrl}`);
|
|
|
|
btn.innerHTML = '⏳ Sending...';
|
|
btn.disabled = true;
|
|
|
|
try {
|
|
await executeAdminOperation(async (token) => {
|
|
console.log('Executing replay operation, token provided:', !!token);
|
|
|
|
const headers = {
|
|
'Content-Type': 'application/json'
|
|
};
|
|
if (token) {
|
|
headers['X-Admin-Token'] = token;
|
|
console.log('Added admin token to headers');
|
|
}
|
|
|
|
const response = await fetch(`/replay/${webhookId}?target_url=${encodeURIComponent(targetUrl)}`, {
|
|
method: 'POST',
|
|
headers: headers
|
|
});
|
|
|
|
console.log('Replay response status:', response.status);
|
|
|
|
if (!response.ok) {
|
|
let errorMessage = `HTTP ${response.status}`;
|
|
try {
|
|
const errorData = await response.json();
|
|
errorMessage = errorData.detail || errorMessage;
|
|
} catch (e) {
|
|
errorMessage = response.statusText || errorMessage;
|
|
}
|
|
|
|
const err = new Error(errorMessage);
|
|
err.status = response.status;
|
|
err.response = response;
|
|
|
|
console.log('Throwing error with status:', err.status);
|
|
throw err;
|
|
}
|
|
|
|
return await response.json();
|
|
}, 'Replay webhook');
|
|
|
|
console.log('Replay successful');
|
|
btn.innerHTML = '✅ Sent!';
|
|
btn.className = 'px-4 py-2 bg-green-500 text-white rounded';
|
|
|
|
} catch (error) {
|
|
console.error('Final replay error:', error);
|
|
if (!error.status || error.status !== 401) {
|
|
btn.innerHTML = '❌ Failed!';
|
|
btn.className = 'px-4 py-2 bg-red-500 text-white rounded';
|
|
alert(`Replay failed: ${error.message}`);
|
|
}
|
|
}
|
|
|
|
setTimeout(() => {
|
|
btn.disabled = false;
|
|
btn.innerHTML = '🔄 Replay';
|
|
btn.className = 'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition';
|
|
}, 2000);
|
|
}
|
|
|
|
async function sendTestWebhook() {
|
|
const textarea = document.getElementById('test-payload');
|
|
let payload = textarea.value.trim();
|
|
|
|
try {
|
|
if (!payload) {
|
|
payload = '{}';
|
|
}
|
|
|
|
JSON.parse(payload);
|
|
|
|
const response = await fetch('/test', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: payload
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (!response.ok) {
|
|
throw new Error(result.detail || 'Failed to send webhook');
|
|
}
|
|
|
|
alert(`✅ Test webhook sent!\nStatus: ${result.response_status}\nURL: ${result.url}`);
|
|
|
|
} catch (error) {
|
|
if (error instanceof SyntaxError) {
|
|
alert('❌ Invalid JSON format. Example: {"event": "test", "message": "Hello"}');
|
|
} else {
|
|
alert(`❌ ${error.message || 'Failed to send test webhook'}`);
|
|
}
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
function highlightSearch(text, search) {
|
|
if (!search) return text;
|
|
const regex = new RegExp(`(${search})`, 'gi');
|
|
return text.replace(regex, '<span class="highlight">$1</span>');
|
|
}
|
|
|
|
function formatRelativeTime(timestamp) {
|
|
return dayjs(timestamp).fromNow();
|
|
}
|
|
|
|
function toggleDarkMode() {
|
|
const html = document.documentElement;
|
|
const isDark = html.classList.toggle('dark');
|
|
localStorage.setItem('darkMode', isDark);
|
|
|
|
const currentScroll = window.scrollY;
|
|
requestAnimationFrame(() => window.scrollTo(0, currentScroll));
|
|
}
|
|
|
|
async function loadConfigStatus() {
|
|
try {
|
|
const response = await fetch('/config');
|
|
const config = await response.json();
|
|
|
|
document.getElementById('total-count').textContent = config.total_webhooks;
|
|
|
|
const adminStatus = document.getElementById('admin-status');
|
|
if (config.admin_protection_enabled) {
|
|
adminStatus.classList.remove('hidden');
|
|
adminStatus.classList.add('bg-yellow-100', 'text-yellow-800', 'dark:bg-yellow-900', 'dark:text-yellow-200');
|
|
} else {
|
|
adminStatus.classList.add('hidden');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load config:', error);
|
|
document.getElementById('total-count').textContent = '0';
|
|
}
|
|
}
|
|
|
|
if (localStorage.getItem('darkMode') === null) {
|
|
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
document.documentElement.classList.add('dark');
|
|
localStorage.setItem('darkMode', 'true');
|
|
}
|
|
} else if (localStorage.getItem('darkMode') === 'true') {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
|
if (localStorage.getItem('darkMode') === null) {
|
|
document.documentElement.classList.toggle('dark', e.matches);
|
|
}
|
|
});
|
|
|
|
function getDefaultReplayUrl() {
|
|
return `${window.location.origin}/webhook`;
|
|
}
|
|
|
|
document.addEventListener('htmx:afterSwap', function(event) {
|
|
const target = event.detail.target;
|
|
if (!target) return;
|
|
|
|
const logCount = document.querySelector('.log-count');
|
|
const webhookItems = target.querySelectorAll('.webhook-item');
|
|
if (logCount && webhookItems) {
|
|
const total = webhookItems.length;
|
|
logCount.textContent = `Showing ${total} log${total !== 1 ? 's' : ''}`;
|
|
}
|
|
|
|
target.querySelectorAll('input[type="url"]').forEach(input => {
|
|
if (!input.value) {
|
|
input.value = window.location.origin + '/webhook';
|
|
}
|
|
});
|
|
|
|
const searchTerm = document.querySelector('input[name="search"]')?.value;
|
|
target.querySelectorAll('pre code').forEach((el) => {
|
|
let content = el.textContent;
|
|
try {
|
|
content = JSON.stringify(JSON.parse(content), null, 2);
|
|
} catch (e) {
|
|
// JSON parsing failed - display as-is (may be invalid JSON or plain text)
|
|
}
|
|
el.textContent = content;
|
|
if (searchTerm) {
|
|
el.innerHTML = highlightSearch(content, searchTerm);
|
|
}
|
|
try {
|
|
Prism.highlightElement(el);
|
|
} catch (e) {
|
|
console.error('Prism highlighting error:', e);
|
|
}
|
|
});
|
|
});
|
|
|
|
function copyCurlCommand(type) {
|
|
const baseUrl = window.location.origin;
|
|
const curlCmd = `curl -X POST ${baseUrl}/webhook -H "Content-Type: application/json" -d "{\\"event\\": \\"test\\", \\"message\\": \\"Hello World\\"}"`;
|
|
|
|
navigator.clipboard.writeText(curlCmd);
|
|
const btn = event.target;
|
|
btn.innerText = '✅ Copied!';
|
|
setTimeout(() => btn.innerText = '📋 Copy Command', 2000);
|
|
}
|
|
|
|
let currentAdminToken = null;
|
|
let pendingAdminOperation = null;
|
|
|
|
function showAdminModal(operation) {
|
|
pendingAdminOperation = operation;
|
|
document.getElementById('admin-modal').classList.remove('hidden');
|
|
document.getElementById('admin-token-input').focus();
|
|
}
|
|
|
|
function cancelAdminModal() {
|
|
document.getElementById('admin-modal').classList.add('hidden');
|
|
document.getElementById('admin-token-input').value = '';
|
|
pendingAdminOperation = null;
|
|
currentAdminToken = null;
|
|
}
|
|
|
|
function submitAdminToken() {
|
|
const token = document.getElementById('admin-token-input').value.trim();
|
|
if (!token) {
|
|
alert('Please enter a token');
|
|
return;
|
|
}
|
|
|
|
currentAdminToken = token;
|
|
document.getElementById('admin-modal').classList.add('hidden');
|
|
document.getElementById('admin-token-input').value = '';
|
|
|
|
if (pendingAdminOperation) {
|
|
pendingAdminOperation();
|
|
pendingAdminOperation = null;
|
|
}
|
|
}
|
|
|
|
async function clearLogsWithModal() {
|
|
const confirmed = confirm('Are you sure you want to clear all webhook logs? This action cannot be undone.');
|
|
if (!confirmed) return;
|
|
|
|
try {
|
|
console.log('Attempting to clear logs');
|
|
|
|
const response = await fetch('/clear', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' }
|
|
});
|
|
|
|
console.log('Clear response status:', response.status);
|
|
|
|
if (response.status === 401) {
|
|
console.log('Got 401, showing admin modal for clear');
|
|
showAdminModal(async () => {
|
|
console.log('Retrying clear with admin token');
|
|
try {
|
|
const retryResponse = await fetch('/clear', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Admin-Token': currentAdminToken
|
|
}
|
|
});
|
|
|
|
if (retryResponse.ok) {
|
|
alert('✅ Logs cleared successfully!');
|
|
document.getElementById('logs').innerHTML = `
|
|
<div class="p-8 text-center text-gray-500 dark:text-gray-400">
|
|
<div class="text-6xl mb-4">📭</div>
|
|
<h3 class="text-xl font-bold mb-2">No webhooks yet</h3>
|
|
<p>Send a test webhook to get started!</p>
|
|
</div>
|
|
`;
|
|
loadConfigStatus();
|
|
} else {
|
|
alert('❌ Clear failed - invalid admin token');
|
|
}
|
|
} catch (retryError) {
|
|
alert('❌ Clear failed: ' + retryError.message);
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (response.ok) {
|
|
alert('✅ Logs cleared successfully!');
|
|
document.getElementById('logs').innerHTML = `
|
|
<div class="p-8 text-center text-gray-500 dark:text-gray-400">
|
|
<div class="text-6xl mb-4">📭</div>
|
|
<h3 class="text-xl font-bold mb-2">No webhooks yet</h3>
|
|
<p>Send a test webhook to get started!</p>
|
|
</div>
|
|
`;
|
|
loadConfigStatus();
|
|
} else {
|
|
alert('❌ Clear failed: HTTP ' + response.status);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Clear error:', error);
|
|
alert('❌ Network error: ' + error.message);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && !document.getElementById('admin-modal').classList.contains('hidden')) {
|
|
cancelAdminModal();
|
|
}
|
|
if (e.key === 'Enter' && !document.getElementById('admin-modal').classList.contains('hidden')) {
|
|
submitAdminToken();
|
|
}
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|