112 lines
4.0 KiB
HTML
112 lines
4.0 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}API Keys - Whisper API Admin{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🔐 API Key Management</h1>
|
|
<div class="nav">
|
|
<a href="/admin">Dashboard</a>
|
|
<a href="/admin/keys" class="active">API Keys</a>
|
|
<a href="/admin/models">Models</a>
|
|
<a href="/admin/logout">Logout</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% if message %}
|
|
<div class="alert alert-success">
|
|
{{ message }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if new_key %}
|
|
<div class="card" style="background: #c6f6d5; border: 2px solid #48bb78;">
|
|
<h2>✨ New API Key Generated</h2>
|
|
<p>Copy this key now - it will not be shown again!</p>
|
|
<div class="api-key-display">{{ new_key }}</div>
|
|
<button onclick="copyToClipboard('{{ new_key }}')" class="btn">Copy to Clipboard</button>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="card">
|
|
<h2>Create New API Key</h2>
|
|
<form method="POST" action="/admin/keys/create">
|
|
<div class="form-group">
|
|
<label for="description">Description (optional)</label>
|
|
<input type="text" id="description" name="description" placeholder="e.g., Clawdbot Integration">
|
|
</div>
|
|
<button type="submit" class="btn btn-success">Generate New API Key</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Active API Keys</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Description</th>
|
|
<th>Created</th>
|
|
<th>Last Used</th>
|
|
<th>Usage Count</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for key in keys %}
|
|
<tr>
|
|
<td>{{ key.id }}</td>
|
|
<td>{{ key.description or '-' }}</td>
|
|
<td>{{ key.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
|
|
<td>
|
|
{% if key.last_used_at %}
|
|
{{ key.last_used_at.strftime('%Y-%m-%d %H:%M') }}
|
|
{% else %}
|
|
Never
|
|
{% endif %}
|
|
</td>
|
|
<td>{{ key.usage_count }}</td>
|
|
<td>
|
|
<span class="badge badge-{{ 'success' if key.is_active else 'danger' }}">
|
|
{{ 'Active' if key.is_active else 'Inactive' }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<form method="POST" action="/admin/keys/{{ key.id }}/toggle" style="display: inline;">
|
|
<button type="submit" class="btn" style="padding: 5px 10px; font-size: 12px;">
|
|
{{ 'Deactivate' if key.is_active else 'Activate' }}
|
|
</button>
|
|
</form>
|
|
<form method="POST" action="/admin/keys/{{ key.id }}/delete" style="display: inline; margin-left: 5px;"
|
|
onsubmit="return confirm('Are you sure you want to delete this API key?');">
|
|
<button type="submit" class="btn btn-danger" style="padding: 5px 10px; font-size: 12px;">
|
|
Delete
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
{% if not keys %}
|
|
<p style="text-align: center; color: #666; margin-top: 20px;">
|
|
No API keys found. Create one above.
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(function() {
|
|
alert('API Key copied to clipboard!');
|
|
}, function(err) {
|
|
console.error('Could not copy text: ', err);
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|