keys.js

// /account/keys. Project-namespaced key admin.
// Loads projects, renders tabs, loads keys per active project, create + revoke.
(function () {
  let currentProject = 'default';

  function esc(s) {
    return String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({
      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
    }[c]));
  }

  function fmtDate(iso) {
    if (!iso) return ',';
    try { return new Date(iso).toISOString().slice(0, 10); } catch { return iso; }
  }

  function normalizeProject(name) {
    return String(name || 'default').trim().toLowerCase().replace(/[^a-z0-9_-]/g, '-').slice(0, 30) || 'default';
  }

  function attachCopy(scope) {
    (scope || document).querySelectorAll('[data-copy]').forEach((btn) => {
      if (btn.__nipBound) return;
      btn.__nipBound = true;
      btn.addEventListener('click', async () => {
        const target = document.querySelector(btn.dataset.copy);
        if (!target) return;
        try {
          await navigator.clipboard.writeText(target.textContent.trim());
          const orig = btn.textContent;
          btn.textContent = 'Copied';
          setTimeout(() => (btn.textContent = orig), 1400);
        } catch {
          btn.textContent = 'Copy failed';
        }
      });
    });
  }

  const tabsRow = document.getElementById('projects-tabs-row');
  const newProjBtn = document.getElementById('projects-new');
  const list = document.getElementById('keys-list');
  const form = document.getElementById('keys-create-form');
  const labelEl = document.getElementById('keys-label');
  const freshBox = document.getElementById('keys-just-created');
  const freshVal = document.getElementById('keys-fresh-value');
  const createInProj = document.getElementById('create-in-project');

  function setActiveProject(name) {
    currentProject = name;
    createInProj.textContent = name;
    tabsRow.querySelectorAll('[data-project]').forEach((el) => {
      el.classList.toggle('is-active', el.dataset.project === name);
    });
    loadKeys(name);
  }

  async function loadProjects() {
    try {
      const r = await fetch('/api/projects', { credentials: 'same-origin' });
      if (r.status === 401) {
        window.location.href = '/?error=signin_required';
        return;
      }
      const data = await r.json();
      renderTabs(data.projects || [{ name: 'default', key_count: 0 }]);
    } catch {
      renderTabs([{ name: 'default', key_count: 0 }]);
    }
  }

  function renderTabs(projects) {
    // include currentProject even if no keys yet (just created)
    if (!projects.find((p) => p.name === currentProject)) {
      projects.push({ name: currentProject, key_count: 0 });
    }
    tabsRow.innerHTML = projects.map((p) => `
      <button type="button" class="acct-projects-tab${p.name === currentProject ? ' is-active' : ''}" data-project="${esc(p.name)}">
        <span class="acct-projects-tab-name">${esc(p.name)}</span>
        <span class="acct-projects-tab-count">${p.key_count}</span>
      </button>
    `).join('');
    tabsRow.querySelectorAll('[data-project]').forEach((el) => {
      el.addEventListener('click', () => setActiveProject(el.dataset.project));
    });
    createInProj.textContent = currentProject;
  }

  async function loadKeys(project) {
    list.innerHTML = '<p class="acct-keys-empty">Loading…</p>';
    try {
      const r = await fetch(`/api/keys?project=${encodeURIComponent(project)}`, { credentials: 'same-origin' });
      if (r.status === 401) {
        window.location.href = '/?error=signin_required';
        return;
      }
      const data = await r.json();
      if (!data.keys || data.keys.length === 0) {
        list.innerHTML = `<p class="acct-keys-empty">No keys in <strong>${esc(project)}</strong> yet. Generate one above.</p>`;
        return;
      }
      list.innerHTML = data.keys.map(renderKey).join('');
      attachCopy(list);
      list.querySelectorAll('[data-revoke]').forEach((btn) => {
        btn.addEventListener('click', () => revokeKey(btn.dataset.revoke));
      });
    } catch {
      list.innerHTML = '<p class="acct-keys-empty">Failed to load. Refresh.</p>';
    }
  }

  function renderKey(k) {
    const safe = `kid-${esc(k.id).replace(/[^a-z0-9]/gi, '')}`;
    return `<div class="acct-key-card">
      <div class="acct-key-head">
        <p class="acct-key-kicker">${esc(k.label || 'unnamed').toUpperCase()}</p>
        <span class="acct-key-status">active</span>
      </div>
      <div class="acct-key-row">
        <code id="${safe}">${esc(k.key)}</code>
        <button class="acct-btn" data-copy="#${safe}">Copy</button>
        <button class="acct-btn acct-btn-danger" data-revoke="${esc(k.id)}">Revoke</button>
      </div>
      <p class="acct-key-meta">Created ${fmtDate(k.created_at)}${k.last_used_at ? ` · last used ${fmtDate(k.last_used_at)}` : ' · never used'}</p>
    </div>`;
  }

  async function revokeKey(id) {
    if (!confirm('Revoke this key? Any service using it will start failing.')) return;
    try {
      const r = await fetch(`/api/keys?id=${encodeURIComponent(id)}`, {
        method: 'DELETE',
        credentials: 'same-origin',
      });
      if (!r.ok) {
        const d = await r.json().catch(() => ({}));
        alert('Revoke failed: ' + (d.error || r.statusText));
        return;
      }
      await loadProjects();
      await loadKeys(currentProject);
    } catch {
      alert('Network error. Try again.');
    }
  }

  newProjBtn.addEventListener('click', () => {
    const raw = prompt('New project name (a-z, 0-9, dash, underscore. Max 30 chars):');
    if (!raw) return;
    const name = normalizeProject(raw);
    if (!name) return;
    // virtual tab. Switches focus; actually created when first key is generated
    if (!Array.from(tabsRow.querySelectorAll('[data-project]')).find((b) => b.dataset.project === name)) {
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'acct-projects-tab';
      btn.dataset.project = name;
      btn.innerHTML = `<span class="acct-projects-tab-name">${esc(name)}</span><span class="acct-projects-tab-count">0</span>`;
      btn.addEventListener('click', () => setActiveProject(name));
      tabsRow.appendChild(btn);
    }
    setActiveProject(name);
  });

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const label = (labelEl.value || '').trim() || 'unnamed';
    const btn = form.querySelector('button[type="submit"]');
    const orig = btn.textContent;
    btn.disabled = true; btn.textContent = 'Generating…';
    try {
      const r = await fetch('/api/keys', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({ label, project: currentProject }),
      });
      const data = await r.json();
      if (!r.ok) {
        alert(data.error === 'max_keys_reached'
          ? `You have reached the ${data.limit}-key limit across all projects. Revoke an unused key first.`
          : 'Failed to create key: ' + (data.error || r.statusText));
        return;
      }
      freshVal.textContent = data.key;
      freshBox.hidden = false;
      labelEl.value = '';
      attachCopy(freshBox);
      await loadProjects();
      await loadKeys(currentProject);
    } catch {
      alert('Network error. Try again.');
    } finally {
      btn.disabled = false; btn.textContent = orig;
    }
  });

  loadProjects().then(() => loadKeys(currentProject));
})();