72 lines
3.3 KiB
HTML
72 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="mb-6 flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-white">API Keys</h1>
|
|
<p class="text-gray-400 mt-2">Manage access keys for all agents.</p>
|
|
</div>
|
|
<a href="/dashboard" class="text-gray-400 hover:text-white">← Back to Dashboard</a>
|
|
</div>
|
|
|
|
<div class="bg-gray-800 rounded-lg shadow border border-gray-700 p-6">
|
|
<div id="alert-box" class="hidden mb-4 p-4 rounded-md text-sm"></div>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-700">
|
|
<thead>
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Agent</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">API Key</th>
|
|
<th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Last Used</th>
|
|
<th class="px-4 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-700">
|
|
{% for key in keys %}
|
|
<tr class="hover:bg-gray-750 transition" id="row-{{ key.agent_name }}">
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm font-bold text-nyora">{{ key.agent_name }}</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-300 font-mono" id="key-{{ key.agent_name }}">{{ key.api_key }}</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">{{ key.last_used or 'Never' }}</td>
|
|
<td class="px-4 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<button onclick="rotateKey('{{ key.agent_name }}')" class="text-yellow-500 hover:text-yellow-400">Rotate</button>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const alertBox = document.getElementById('alert-box');
|
|
|
|
function showAlert(message, isError=false) {
|
|
alertBox.textContent = message;
|
|
alertBox.className = `mb-4 p-4 rounded-md text-sm font-medium ${isError ? 'bg-red-900 text-red-200 border border-red-700' : 'bg-green-900 text-green-200 border border-green-700'}`;
|
|
alertBox.classList.remove('hidden');
|
|
setTimeout(() => { alertBox.classList.add('hidden'); }, 4000);
|
|
}
|
|
|
|
async function rotateKey(agent) {
|
|
if (!confirm(`Are you sure you want to rotate the key for ${agent}? This will immediately revoke the old key.`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/keys/rotate/${agent}`, {
|
|
method: 'POST'
|
|
});
|
|
const data = await response.json();
|
|
if (response.ok) {
|
|
document.getElementById(`key-${agent}`).textContent = data.new_key;
|
|
showAlert(`Key for ${agent} rotated successfully.`);
|
|
} else {
|
|
showAlert(`Error rotating key: ${data.detail}`, true);
|
|
}
|
|
} catch(e) {
|
|
showAlert("Network error.", true);
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|