carom-link 1.0.0

package/public/app.js

@@ -0,0 +1,519 @@
+/**
+ * carom Dashboard — Client-side JavaScript
+ */
+
+const API_BASE = window.location.origin + '/api';
+
+// ── State ──
+let apiKey = localStorage.getItem('carom-api-key') || '';
+
+// ── DOM Elements ──
+const apiKeyInput = document.getElementById('apiKeyInput');
+const apiKeyToggle = document.getElementById('apiKeyToggle');
+const statusBadge = document.getElementById('statusBadge');
+const statusText = statusBadge.querySelector('.status-text');
+
+// ── Init ──
+document.addEventListener('DOMContentLoaded', () => {
+  apiKeyInput.value = apiKey;
+  setupTabs();
+  setupApiKey();
+  setupCreateForm();
+  setupRulesForm();
+  setupTestForm();
+  setupBotPageForm();
+  setupStatsModal();
+  loadLinks();
+  checkConnection();
+});
+
+// ── API Helper ──
+async function api(method, path, body) {
+  const headers = { 'Content-Type': 'application/json' };
+  if (apiKey) headers['x-api-key'] = apiKey;
+
+  const opts = { method, headers };
+  if (body) opts.body = JSON.stringify(body);
+
+  const res = await fetch(API_BASE + path, opts);
+  const data = await res.json();
+
+  if (!res.ok) {
+    throw new Error(data.error || `HTTP ${res.status}`);
+  }
+
+  return data;
+}
+
+// ── Connection Check ──
+async function checkConnection() {
+  try {
+    await fetch(window.location.origin + '/health');
+    statusBadge.className = 'status-badge connected';
+    statusText.textContent = 'Connected';
+  } catch {
+    statusBadge.className = 'status-badge error';
+    statusText.textContent = 'Disconnected';
+  }
+}
+
+// ── Tabs ──
+function setupTabs() {
+  const navBtns = document.querySelectorAll('.nav-btn');
+  navBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      navBtns.forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+
+      document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
+      document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
+
+      // Load data when switching tabs
+      if (btn.dataset.tab === 'links') loadLinks();
+      if (btn.dataset.tab === 'rules') loadRules();
+      if (btn.dataset.tab === 'botpage') loadBotPageSettings();
+    });
+  });
+}
+
+// ── API Key ──
+function setupApiKey() {
+  apiKeyInput.addEventListener('change', () => {
+    apiKey = apiKeyInput.value;
+    localStorage.setItem('carom-api-key', apiKey);
+    toast('API key saved', 'success');
+    loadLinks();
+  });
+
+  apiKeyToggle.addEventListener('click', () => {
+    apiKeyInput.type = apiKeyInput.type === 'password' ? 'text' : 'password';
+  });
+}
+
+// ── Links ──
+async function loadLinks() {
+  const tbody = document.getElementById('linksBody');
+  try {
+    const data = await api('GET', '/links?all=true');
+    if (!data.links || data.links.length === 0) {
+      tbody.innerHTML = '<tr><td colspan="7" class="empty-state">No links yet. Create one!</td></tr>';
+      return;
+    }
+
+    tbody.innerHTML = data.links.map(link => `
+      <tr>
+        <td class="cell-slug">${esc(link.slug)}</td>
+        <td class="cell-url" title="${esc(link.destination_url)}">${esc(link.destination_url)}</td>
+        <td class="cell-count human">${link.human_clicks || 0}</td>
+        <td class="cell-count bot">${link.bot_clicks || 0}</td>
+        <td>${formatDate(link.created_at)}</td>
+        <td>${link.active ? '<span class="badge badge-active">Active</span>' : '<span class="badge badge-inactive">Inactive</span>'}</td>
+        <td>
+          <button class="btn-secondary btn-sm" onclick="viewStats('${esc(link.slug)}')">📊 Stats</button>
+          <button class="btn-ghost btn-sm" onclick="copyLink('${esc(link.shortUrl)}')">📋</button>
+          ${link.active ? `<button class="btn-danger btn-sm" onclick="deleteLink('${link.id}')">✕</button>` : ''}
+        </td>
+      </tr>
+    `).join('');
+  } catch (err) {
+    tbody.innerHTML = `<tr><td colspan="7" class="empty-state">Error: ${esc(err.message)}</td></tr>`;
+  }
+}
+
+document.getElementById('refreshLinks').addEventListener('click', loadLinks);
+
+// ── Create Link ──
+function setupCreateForm() {
+  document.getElementById('createForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const btn = document.getElementById('createBtn');
+    btn.disabled = true;
+    btn.textContent = 'Creating...';
+
+    try {
+      const body = {
+        url: document.getElementById('urlInput').value,
+      };
+      const slug = document.getElementById('slugInput').value;
+      if (slug) body.slug = slug;
+      const expires = document.getElementById('expiresInput').value;
+      if (expires) body.expiresAt = new Date(expires).toISOString();
+
+      const data = await api('POST', '/links', body);
+
+      const resultDiv = document.getElementById('createResult');
+      const resultUrl = document.getElementById('resultUrl');
+      resultUrl.textContent = data.shortUrl;
+      resultDiv.classList.remove('hidden');
+
+      document.getElementById('urlInput').value = '';
+      document.getElementById('slugInput').value = '';
+      document.getElementById('expiresInput').value = '';
+
+      toast('Link created!', 'success');
+    } catch (err) {
+      toast(err.message, 'error');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = 'Create Short Link';
+    }
+  });
+
+  document.getElementById('copyBtn').addEventListener('click', () => {
+    const url = document.getElementById('resultUrl').textContent;
+    copyToClipboard(url);
+  });
+}
+
+// ── Rules ──
+async function loadRules() {
+  const tbody = document.getElementById('rulesBody');
+  try {
+    const data = await api('GET', '/rules');
+    if (!data.rules || data.rules.length === 0) {
+      tbody.innerHTML = '<tr><td colspan="6" class="empty-state">No custom rules. Add one above.</td></tr>';
+      return;
+    }
+
+    tbody.innerHTML = data.rules.map(rule => `
+      <tr>
+        <td>${rule.id}</td>
+        <td><span class="badge badge-active">${esc(rule.type)}</span></td>
+        <td class="cell-slug">${esc(rule.pattern)}</td>
+        <td class="cell-count">+${rule.weight}</td>
+        <td>${formatDate(rule.created_at)}</td>
+        <td>
+          <button class="btn-danger btn-sm" onclick="deleteRule(${rule.id})">✕ Remove</button>
+        </td>
+      </tr>
+    `).join('');
+  } catch (err) {
+    tbody.innerHTML = `<tr><td colspan="6" class="empty-state">Error: ${esc(err.message)}</td></tr>`;
+  }
+}
+
+document.getElementById('refreshRules').addEventListener('click', loadRules);
+
+function setupRulesForm() {
+  document.getElementById('addRuleForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    try {
+      await api('POST', '/rules', {
+        type: document.getElementById('ruleType').value,
+        pattern: document.getElementById('rulePattern').value,
+        weight: parseInt(document.getElementById('ruleWeight').value, 10) || 30,
+      });
+
+      document.getElementById('rulePattern').value = '';
+      loadRules();
+      toast('Rule added', 'success');
+    } catch (err) {
+      toast(err.message, 'error');
+    }
+  });
+}
+
+// ── UA Tester ──
+function setupTestForm() {
+  document.getElementById('testForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    try {
+      const userAgent = document.getElementById('testUa').value;
+      const data = await api('POST', '/rules/test', { userAgent });
+
+      const resultDiv = document.getElementById('testResult');
+      resultDiv.classList.remove('hidden');
+
+      const classEl = document.getElementById('testClassification');
+      classEl.textContent = data.classification === 'bot' ? '🛡 BOT DETECTED' :
+        data.classification === 'suspicious' ? '⚠ SUSPICIOUS' : '👤 HUMAN';
+      classEl.className = 'test-classification ' + data.classification;
+
+      document.getElementById('testScore').textContent = `Score: ${data.score} / 40`;
+
+      const signalsEl = document.getElementById('testSignals');
+      signalsEl.innerHTML = data.signals.map(s => `
+        <div class="signal-item">
+          <span class="signal-weight">${s.weight > 0 ? '+' + s.weight : ''}</span>
+          <span class="signal-name">${esc(s.name)}</span>
+          <span class="signal-detail">${esc(s.detail)}</span>
+        </div>
+      `).join('');
+    } catch (err) {
+      toast(err.message, 'error');
+    }
+  });
+}
+
+// ── Bot Page Editor ──
+async function loadBotPageSettings() {
+  try {
+    const data = await api('GET', '/config/safe-page');
+    document.getElementById('bpBrand').value = data.brand || '';
+    document.getElementById('bpTitle').value = data.title || '';
+    document.getElementById('bpDescription').value = data.description || '';
+    renderBotPagePreview(data.brand, data.title, data.description);
+  } catch (err) {
+    toast('Failed to load bot page settings: ' + err.message, 'error');
+  }
+}
+
+function renderBotPagePreview(brand, title, description) {
+  const safeBrand = esc(brand || 'Website');
+  const safeTitle = esc(title || 'Welcome');
+  const safeDesc = esc(description || 'Visit our website for more information.');
+  const year = new Date().getFullYear();
+
+  const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${safeTitle} | ${safeBrand}</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: #f8f9fa;
+      color: #333;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .container { text-align: center; padding: 2rem; max-width: 480px; }
+    .brand { font-size: 1.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 1rem; }
+    .message { font-size: 1rem; color: #666; line-height: 1.6; }
+    .footer { margin-top: 2rem; font-size: 0.8rem; color: #999; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="brand">${safeBrand}</div>
+    <p class="message">${safeDesc}</p>
+    <div class="footer">&copy; ${year} ${safeBrand}</div>
+  </div>
+</body>
+</html>`;
+
+  const iframe = document.getElementById('botPagePreview');
+  iframe.srcdoc = html;
+}
+
+function setupBotPageForm() {
+  // Live preview on input
+  const brandEl = document.getElementById('bpBrand');
+  const titleEl = document.getElementById('bpTitle');
+  const descEl = document.getElementById('bpDescription');
+
+  const updatePreview = () => {
+    renderBotPagePreview(brandEl.value, titleEl.value, descEl.value);
+  };
+
+  brandEl.addEventListener('input', updatePreview);
+  titleEl.addEventListener('input', updatePreview);
+  descEl.addEventListener('input', updatePreview);
+
+  // Refresh preview button
+  document.getElementById('refreshPreview').addEventListener('click', updatePreview);
+
+  // Save form
+  document.getElementById('botPageForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const btn = document.getElementById('saveBotPage');
+    btn.disabled = true;
+    btn.textContent = 'Saving...';
+
+    try {
+      const data = await api('PUT', '/config/safe-page', {
+        brand: brandEl.value,
+        title: titleEl.value,
+        description: descEl.value,
+      });
+
+      const statusEl = document.getElementById('botPageStatus');
+      statusEl.classList.remove('hidden');
+      statusEl.textContent = '✓ ' + (data.message || 'Settings saved. Changes are live immediately.');
+      statusEl.style.borderColor = 'var(--green)';
+      statusEl.style.background = 'var(--green-dim)';
+      statusEl.style.color = 'var(--green)';
+
+      toast('Bot page settings saved', 'success');
+
+      setTimeout(() => statusEl.classList.add('hidden'), 4000);
+    } catch (err) {
+      toast('Failed to save: ' + err.message, 'error');
+    } finally {
+      btn.disabled = false;
+      btn.textContent = '💾 Save Changes';
+    }
+  });
+}
+
+// ── Stats Modal ──
+function setupStatsModal() {
+  document.getElementById('closeStats').addEventListener('click', () => {
+    document.getElementById('statsModal').classList.add('hidden');
+  });
+
+  document.getElementById('statsModal').addEventListener('click', (e) => {
+    if (e.target === e.currentTarget) {
+      e.currentTarget.classList.add('hidden');
+    }
+  });
+}
+
+window.viewStats = async function(slug) {
+  const modal = document.getElementById('statsModal');
+  const title = document.getElementById('statsTitle');
+  const body = document.getElementById('statsBody');
+
+  title.textContent = `Stats: /${slug}`;
+  body.innerHTML = 'Loading...';
+  modal.classList.remove('hidden');
+
+  try {
+    const data = await api('GET', `/links/${slug}/stats`);
+    const s = data.stats;
+
+    body.innerHTML = `
+      <div class="stat-grid">
+        <div class="stat-card">
+          <div class="stat-value">${s.totals.total || 0}</div>
+          <div class="stat-label">Total</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value green">${s.totals.human || 0}</div>
+          <div class="stat-label">Human</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value red">${s.totals.bot || 0}</div>
+          <div class="stat-label">Bot</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value yellow">${s.totals.suspicious || 0}</div>
+          <div class="stat-label">Suspicious</div>
+        </div>
+      </div>
+
+      <h3 style="margin-bottom: 0.5rem; font-size: 0.9rem;">Timeline</h3>
+      <div class="stat-grid" style="grid-template-columns: repeat(3, 1fr); margin-bottom: 1.25rem;">
+        <div class="stat-card">
+          <div class="stat-value">${s.timeline.last24h}</div>
+          <div class="stat-label">Last 24h</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">${s.timeline.last7d}</div>
+          <div class="stat-label">Last 7d</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">${s.timeline.last30d}</div>
+          <div class="stat-label">Last 30d</div>
+        </div>
+      </div>
+
+      ${s.topUserAgents.length > 0 ? `
+        <h3 style="margin-bottom: 0.5rem; font-size: 0.9rem;">Top User Agents</h3>
+        <div class="table-container" style="margin-bottom: 1rem;">
+          <table class="data-table">
+            <thead><tr><th>User Agent</th><th>Type</th><th>Count</th></tr></thead>
+            <tbody>
+              ${s.topUserAgents.map(ua => `
+                <tr>
+                  <td class="cell-url" style="max-width: 280px;">${esc(ua.user_agent || '(empty)')}</td>
+                  <td>${classificationBadge(ua.classification)}</td>
+                  <td class="cell-count">${ua.count}</td>
+                </tr>
+              `).join('')}
+            </tbody>
+          </table>
+        </div>
+      ` : ''}
+    `;
+  } catch (err) {
+    body.innerHTML = `<p style="color: var(--red);">Error: ${esc(err.message)}</p>`;
+  }
+};
+
+// ── Global Actions ──
+window.copyLink = function(url) {
+  copyToClipboard(url);
+};
+
+window.deleteLink = async function(id) {
+  if (!confirm('Deactivate this link?')) return;
+  try {
+    await api('DELETE', `/links/${id}`);
+    toast('Link deactivated', 'success');
+    loadLinks();
+  } catch (err) {
+    toast(err.message, 'error');
+  }
+};
+
+window.deleteRule = async function(id) {
+  if (!confirm('Remove this rule?')) return;
+  try {
+    await api('DELETE', `/rules/${id}`);
+    toast('Rule removed', 'success');
+    loadRules();
+  } catch (err) {
+    toast(err.message, 'error');
+  }
+};
+
+// ── Utilities ──
+function esc(str) {
+  const div = document.createElement('div');
+  div.textContent = str || '';
+  return div.innerHTML;
+}
+
+function formatDate(dateStr) {
+  if (!dateStr) return '—';
+  try {
+    const d = new Date(dateStr + 'Z');
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' }) +
+      ' ' + d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return dateStr;
+  }
+}
+
+function classificationBadge(c) {
+  switch (c) {
+    case 'human': return '<span class="badge badge-active">👤 Human</span>';
+    case 'bot': return '<span class="badge" style="background: var(--red-dim); color: var(--red);">🛡 Bot</span>';
+    case 'suspicious': return '<span class="badge" style="background: var(--yellow-dim); color: var(--yellow);">⚠ Suspicious</span>';
+    default: return `<span class="badge badge-inactive">${esc(c)}</span>`;
+  }
+}
+
+async function copyToClipboard(text) {
+  try {
+    await navigator.clipboard.writeText(text);
+    toast('Copied!', 'success');
+  } catch {
+    // Fallback
+    const input = document.createElement('input');
+    input.value = text;
+    document.body.appendChild(input);
+    input.select();
+    document.execCommand('copy');
+    document.body.removeChild(input);
+    toast('Copied!', 'success');
+  }
+}
+
+function toast(message, type = 'info') {
+  const el = document.createElement('div');
+  el.className = `toast ${type}`;
+  el.textContent = message;
+  document.body.appendChild(el);
+  setTimeout(() => {
+    el.style.opacity = '0';
+    el.style.transform = 'translateY(20px)';
+    el.style.transition = 'all 300ms ease';
+    setTimeout(() => el.remove(), 300);
+  }, 2500);
+}