Jared Vititoe
ce95e555d5
- Replace style.display with .is-hidden classList in ApiKeysView, CustomFieldsView, RecurringTicketsView - Convert boot overlay fade-out from style.opacity to .boot-overlay--fade-out CSS class - Add .boot-overlay--fade-out rule to dashboard.css Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
239 lines
11 KiB
PHP
239 lines
11 KiB
PHP
<?php
|
|
// Admin view for managing API keys
|
|
// Receives $apiKeys from controller
|
|
require_once __DIR__ . '/../../middleware/SecurityHeadersMiddleware.php';
|
|
require_once __DIR__ . '/../../middleware/CsrfMiddleware.php';
|
|
$nonce = SecurityHeadersMiddleware::getNonce();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>API Keys - Admin</title>
|
|
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
|
|
<link rel="stylesheet" href="/assets/css/base.css">
|
|
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260320">
|
|
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260320">
|
|
<script nonce="<?php echo $nonce; ?>" src="/assets/js/base.js"></script>
|
|
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/utils.js?v=20260320"></script>
|
|
<script nonce="<?php echo $nonce; ?>">
|
|
window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="user-header">
|
|
<div class="user-header-left">
|
|
<a href="/" class="back-link">[ ← DASHBOARD ]</a>
|
|
<span class="admin-page-title">Admin: API Keys</span>
|
|
</div>
|
|
<div class="user-header-right">
|
|
<?php if (isset($GLOBALS['currentUser'])): ?>
|
|
<span class="user-name">[ <?php echo htmlspecialchars(strtoupper($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username'])); ?> ]</span>
|
|
<span class="admin-badge">[ ADMIN ]</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ascii-frame-outer admin-container">
|
|
<span class="bottom-left-corner">╚</span>
|
|
<span class="bottom-right-corner">╝</span>
|
|
|
|
<div class="ascii-section-header">API Key Management</div>
|
|
<div class="ascii-content">
|
|
<!-- Generate New Key Form -->
|
|
<div class="ascii-frame-inner">
|
|
<h3 class="admin-section-title">Generate New API Key</h3>
|
|
<form id="generateKeyForm" class="admin-form-row">
|
|
<div class="admin-form-field">
|
|
<label class="admin-label" for="keyName">Key Name *</label>
|
|
<input type="text" id="keyName" required placeholder="e.g., CI/CD Pipeline" class="admin-input">
|
|
</div>
|
|
<div class="admin-form-field">
|
|
<label class="admin-label" for="expiresIn">Expires In</label>
|
|
<select id="expiresIn" class="admin-input">
|
|
<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>
|
|
<div>
|
|
<button type="submit" class="btn">GENERATE KEY</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- New Key Display (hidden by default) -->
|
|
<div id="newKeyDisplay" class="ascii-frame-inner key-generated-alert is-hidden">
|
|
<h3 class="admin-section-title">New API Key Generated</h3>
|
|
<p class="text-danger text-sm mb-1">
|
|
Copy this key now. You won't be able to see it again!
|
|
</p>
|
|
<div class="admin-form-row">
|
|
<input type="text" id="newKeyValue" readonly class="admin-input">
|
|
<button data-action="copy-api-key" class="btn" title="Copy to clipboard">COPY</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Existing Keys Table -->
|
|
<div class="ascii-frame-inner">
|
|
<h3 class="admin-section-title">Existing API Keys</h3>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Key Prefix</th>
|
|
<th>Created By</th>
|
|
<th>Created At</th>
|
|
<th>Expires At</th>
|
|
<th>Last Used</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if (empty($apiKeys)): ?>
|
|
<tr>
|
|
<td colspan="8" class="empty-state">No API keys found. Generate one above.</td>
|
|
</tr>
|
|
<?php else: ?>
|
|
<?php foreach ($apiKeys as $key): ?>
|
|
<tr id="key-row-<?php echo $key['api_key_id']; ?>">
|
|
<td><?php echo htmlspecialchars($key['key_name']); ?></td>
|
|
<td class="mono">
|
|
<code><?php echo htmlspecialchars($key['key_prefix']); ?>...</code>
|
|
</td>
|
|
<td><?php echo htmlspecialchars($key['display_name'] ?? $key['username'] ?? 'Unknown'); ?></td>
|
|
<td class="nowrap"><?php echo date('Y-m-d H:i', strtotime($key['created_at'])); ?></td>
|
|
<td class="nowrap">
|
|
<?php if ($key['expires_at']): ?>
|
|
<?php $expired = strtotime($key['expires_at']) < time(); ?>
|
|
<span class="<?php echo $expired ? 'text-danger' : ''; ?>">
|
|
<?php echo date('Y-m-d', strtotime($key['expires_at'])); ?>
|
|
<?php if ($expired): ?> (Expired)<?php endif; ?>
|
|
</span>
|
|
<?php else: ?>
|
|
<span class="text-cyan">Never</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td class="nowrap">
|
|
<?php echo $key['last_used'] ? date('Y-m-d H:i', strtotime($key['last_used'])) : 'Never'; ?>
|
|
</td>
|
|
<td>
|
|
<?php if ($key['is_active']): ?>
|
|
<span class="text-open">Active</span>
|
|
<?php else: ?>
|
|
<span class="text-closed">Revoked</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
<td>
|
|
<?php if ($key['is_active']): ?>
|
|
<button data-action="revoke-key" data-id="<?php echo $key['api_key_id']; ?>" class="btn btn-secondary btn-small">
|
|
REVOKE
|
|
</button>
|
|
<?php else: ?>
|
|
<span class="text-muted">-</span>
|
|
<?php endif; ?>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Usage Info -->
|
|
<div class="ascii-frame-inner">
|
|
<h3 class="admin-section-title">API Usage</h3>
|
|
<p>Include the API key in your requests using the Authorization header:</p>
|
|
<pre class="admin-code-block"><code>Authorization: Bearer YOUR_API_KEY</code></pre>
|
|
<p class="text-muted text-sm">
|
|
API keys provide programmatic access to create and manage tickets. Keep your keys secure and rotate them regularly.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script nonce="<?php echo $nonce; ?>">
|
|
// Event delegation for data-action handlers
|
|
document.addEventListener('click', function(event) {
|
|
const target = event.target.closest('[data-action]');
|
|
if (!target) return;
|
|
|
|
const action = target.dataset.action;
|
|
switch (action) {
|
|
case 'copy-api-key':
|
|
copyApiKey();
|
|
break;
|
|
case 'revoke-key':
|
|
revokeKey(target.dataset.id);
|
|
break;
|
|
}
|
|
});
|
|
|
|
document.getElementById('generateKeyForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const keyName = document.getElementById('keyName').value.trim();
|
|
const expiresIn = document.getElementById('expiresIn').value;
|
|
|
|
if (!keyName) {
|
|
lt.toast.error('Please enter a key name');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = await lt.api.post('/api/generate_api_key.php', {
|
|
key_name: keyName,
|
|
expires_in_days: expiresIn || null
|
|
});
|
|
|
|
if (data.success) {
|
|
// Show the new key
|
|
document.getElementById('newKeyValue').value = data.api_key;
|
|
document.getElementById('newKeyDisplay').classList.remove('is-hidden');
|
|
document.getElementById('keyName').value = '';
|
|
|
|
lt.toast.success('API key generated successfully');
|
|
|
|
// Reload page after 5 seconds to show new key in table
|
|
setTimeout(() => location.reload(), 5000);
|
|
} else {
|
|
lt.toast.error(data.error || 'Failed to generate API key');
|
|
}
|
|
} catch (error) {
|
|
lt.toast.error('Error generating API key: ' + error.message);
|
|
}
|
|
});
|
|
|
|
function copyApiKey() {
|
|
const keyInput = document.getElementById('newKeyValue');
|
|
keyInput.select();
|
|
document.execCommand('copy');
|
|
lt.toast.success('API key copied to clipboard');
|
|
}
|
|
|
|
function revokeKey(keyId) {
|
|
showConfirmModal('Revoke API Key', 'Are you sure you want to revoke this API key? This action cannot be undone.', 'error', function() {
|
|
lt.api.post('/api/revoke_api_key.php', { key_id: keyId })
|
|
.then(data => {
|
|
if (data.success) {
|
|
lt.toast.success('API key revoked successfully');
|
|
location.reload();
|
|
} else {
|
|
lt.toast.error(data.error || 'Failed to revoke API key');
|
|
}
|
|
})
|
|
.catch(error => {
|
|
lt.toast.error('Error revoking API key: ' + error.message);
|
|
});
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|