tinker_tickets/views/admin/ApiKeysView.php

<?php
require_once __DIR__ . '/../../middleware/SecurityHeadersMiddleware.php';
require_once __DIR__ . '/../../middleware/CsrfMiddleware.php';
$nonce       = SecurityHeadersMiddleware::getNonce();
$pageTitle   = 'API Keys';
$activeNav   = 'admin-api-keys';
$pageStyles  = ['/assets/css/dashboard.css?v=20260327'];
$pageScripts = [];
include __DIR__ . '/../../views/layout_header.php';
?>

<div class="lt-page-header">
  <div class="lt-flex lt-flex-gap-sm lt-flex-align-center">
    <a href="/" class="lt-btn lt-btn-ghost lt-btn-sm">&larr; Dashboard</a>
    <span class="lt-text-muted lt-text-xs">/</span>
    <span class="lt-text-muted lt-text-xs">Admin: API Keys</span>
  </div>
</div>

<!-- Generate new key -->
<div class="lt-frame lt-mb-md">
  <span class="lt-frame-bl">╚</span><span class="lt-frame-br">╝</span>
  <div class="lt-section-header">Generate New API Key</div>
  <div class="lt-section-body">
    <form id="generateKeyForm" class="lt-flex lt-flex-wrap lt-flex-gap-sm lt-flex-align-end">
      <div class="lt-form-group" style="flex:2;margin:0">
        <label class="lt-label" for="keyName">Key Name *</label>
        <input type="text" id="keyName" required class="lt-input" placeholder="e.g., CI/CD Pipeline">
      </div>
      <div class="lt-form-group" style="flex:1;margin:0">
        <label class="lt-label" for="expiresIn">Expires In</label>
        <select id="expiresIn" class="lt-select">
          <option value="">Never</option>
          <option value="30">30 days</option>
          <option value="90">90 days</option>
          <option value="180">180 days</option>
          <option value="365">1 year</option>
        </select>
      </div>
      <button type="submit" class="lt-btn lt-btn-primary" style="margin-bottom:0">GENERATE KEY</button>
    </form>

    <!-- New key display (hidden by default) -->
    <div id="newKeyDisplay" class="lt-frame-inner lt-mt-sm is-hidden">
      <div class="lt-subsection-header lt-text-amber">&#x26A0; Copy this key now — you won't see it again!</div>
      <div class="lt-flex lt-flex-gap-sm lt-mt-sm">
        <input type="text" id="newKeyValue" readonly class="lt-input" style="flex:1;font-family:monospace">
        <button type="button" class="lt-btn lt-btn-sm" data-action="copy-api-key">COPY</button>
      </div>
    </div>
  </div>
</div>

<!-- Existing keys -->
<div class="lt-frame lt-mb-md">
  <span class="lt-frame-bl">╚</span><span class="lt-frame-br">╝</span>
  <div class="lt-section-header">Existing API Keys</div>
  <div class="lt-section-body">
    <div class="lt-table-wrap">
      <table class="lt-table lt-table-responsive" aria-label="API keys">
        <thead>
          <tr>
            <th scope="col">Name</th>
            <th scope="col">Key Prefix</th>
            <th scope="col">Created By</th>
            <th scope="col">Created</th>
            <th scope="col">Expires</th>
            <th scope="col">Last Used</th>
            <th scope="col">Status</th>
            <th scope="col">Actions</th>
          </tr>
        </thead>
        <tbody>
          <?php if (empty($apiKeys)): ?>
            <tr><td colspan="8" class="lt-empty">No API keys found. Generate one above.</td></tr>
          <?php else: foreach ($apiKeys as $key): ?>
            <?php $expired = $key['expires_at'] && strtotime($key['expires_at']) < time(); ?>
            <tr id="key-row-<?= $key['api_key_id'] ?>">
              <td data-label="Name"><strong><?= htmlspecialchars($key['key_name']) ?></strong></td>
              <td data-label="Prefix" class="lt-text-xs"><code><?= htmlspecialchars($key['key_prefix']) ?>&hellip;</code></td>
              <td data-label="Created By" class="lt-text-xs"><?= htmlspecialchars($key['display_name'] ?? $key['username'] ?? 'Unknown') ?></td>
              <td data-label="Created" class="lt-text-xs lt-text-muted"><?= date('Y-m-d H:i', strtotime($key['created_at'])) ?></td>
              <td data-label="Expires" class="lt-text-xs <?= $expired ? 'lt-text-danger' : 'lt-text-cyan' ?>">
                <?= $key['expires_at'] ? date('Y-m-d', strtotime($key['expires_at'])) . ($expired ? ' (Expired)' : '') : 'Never' ?>
              </td>
              <td data-label="Last Used" class="lt-text-xs lt-text-muted">
                <?= $key['last_used'] ? date('Y-m-d H:i', strtotime($key['last_used'])) : 'Never' ?>
              </td>
              <td data-label="Status">
                <?php if ($key['is_active']): ?>
                  <span class="lt-status lt-status-open">Active</span>
                <?php else: ?>
                  <span class="lt-status lt-status-closed">Revoked</span>
                <?php endif ?>
              </td>
              <td data-label="Actions">
                <?php if ($key['is_active']): ?>
                  <button type="button" class="lt-btn lt-btn-sm lt-btn-danger"
                          data-action="revoke-key" data-id="<?= $key['api_key_id'] ?>">REVOKE</button>
                <?php else: ?>
                  <span class="lt-text-muted lt-text-xs">—</span>
                <?php endif ?>
              </td>
            </tr>
          <?php endforeach; endif ?>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- API usage -->
<div class="lt-frame">
  <span class="lt-frame-bl">╚</span><span class="lt-frame-br">╝</span>
  <div class="lt-section-header">API Usage</div>
  <div class="lt-section-body">
    <p class="lt-text-sm lt-text-muted">Include the API key in your requests using the Authorization header:</p>
    <pre class="lt-text-xs lt-text-cyan" style="border:1px solid rgba(0,255,65,0.2);padding:0.5rem;overflow-x:auto"><code>Authorization: Bearer YOUR_API_KEY</code></pre>
    <p class="lt-text-xs lt-text-muted">API keys provide programmatic access to create and manage tickets. Keep keys secure and rotate them regularly.</p>
  </div>
</div>

<script nonce="<?= $nonce ?>">
document.addEventListener('click', function (e) {
    var target = e.target.closest('[data-action]');
    if (!target) return;
    switch (target.getAttribute('data-action')) {
        case 'copy-api-key': copyApiKey();                                     break;
        case 'revoke-key':   revokeKey(target.getAttribute('data-id'));         break;
    }
});

document.getElementById('generateKeyForm').addEventListener('submit', function (e) {
    e.preventDefault();
    var keyName   = document.getElementById('keyName').value.trim();
    var expiresIn = document.getElementById('expiresIn').value;
    if (!keyName) { lt.toast.error('Please enter a key name'); return; }
    lt.api.post('/api/generate_api_key.php', { key_name: keyName, expires_in_days: expiresIn || null })
        .then(function (data) {
            if (data.success) {
                document.getElementById('newKeyValue').value = data.api_key;
                document.getElementById('newKeyDisplay').classList.remove('is-hidden');
                document.getElementById('keyName').value = '';
                lt.toast.success('API key generated!');
                setTimeout(function () { location.reload(); }, 5000);
            } else {
                lt.toast.error(data.error || 'Failed to generate API key');
            }
        }).catch(function (err) { lt.toast.error('Error: ' + err.message); });
});

function copyApiKey() {
    var input = document.getElementById('newKeyValue');
    input.select();
    document.execCommand('copy');
    lt.toast.success('Copied to clipboard!');
}

function revokeKey(keyId) {
    showConfirmModal('Revoke API Key', 'Revoke this API key? This cannot be undone.', 'error', function () {
        lt.api.post('/api/revoke_api_key.php', { key_id: keyId })
            .then(function (data) {
                if (data.success) { lt.toast.success('API key revoked'); location.reload(); }
                else lt.toast.error(data.error || 'Failed to revoke');
            }).catch(function (err) { lt.toast.error('Error: ' + err.message); });
    });
}

if (window.lt) lt.keys.initDefaults();
</script>

<?php include __DIR__ . '/../../views/layout_footer.php'; ?>