{% extends "base.html" %}
{% block actions %}<button class="btn btn-primary btn-sm" id="new-key"><i class="bi bi-plus-lg me-1"></i>{{ _('Create key') }}</button>{% endblock %}
{% block content %}
<div class="card fade-up"><div class="table-responsive"><table class="table table-hover mb-0 align-middle"><thead><tr><th>{{ _('name') }}</th><th>{{ _('prefix') }}</th><th class="d-none d-md-table-cell">{{ _('scopes') }}</th><th class="d-none d-lg-table-cell">{{ _('route') }}</th><th class="d-none d-lg-table-cell">{{ _('limits') }}</th><th>{{ _('last used') }}</th><th>{{ _('status') }}</th><th></th></tr></thead><tbody>
{% for k in keys %}<tr><td><strong>{{ k.name }}</strong></td><td class="num">{{ k.key_prefix }}…</td><td class="small d-none d-md-table-cell">{{ k.scopes|join(', ') }}</td><td class="small d-none d-lg-table-cell">{{ k.route_id or '-' }}</td><td class="small num d-none d-lg-table-cell">{{ k.rpm_limit or '∞' }} rpm · {{ k.rpd_limit or '∞' }} rpd{% if k.monthly_budget_cents %} · {{ k.monthly_budget_cents }}¢/mo{% endif %}{% if k.expires_at %} · exp {{ k.expires_at[:10] }}{% endif %}</td><td class="small" title="{{ k.last_used_at }}">{{ rel(k.last_used_at) }}</td><td>{% if k.enabled %}<span class="status healthy">{{ _('enabled') }}</span>{% else %}<span class="status failed">off</span>{% endif %}</td><td class="text-end text-nowrap"><div class="btn-group btn-group-sm"><button class="btn btn-outline-secondary toggle" data-id="{{ k.id }}" data-on="{{ 0 if k.enabled else 1 }}">{{ _('Disable') if k.enabled else _('Enable') }}</button><button class="btn btn-outline-secondary rotate" data-id="{{ k.id }}">{{ _('Rotate') }}</button><button class="btn btn-outline-danger revoke" data-id="{{ k.id }}">{{ _('Revoke') }}</button></div></td></tr>
{% else %}<tr><td colspan="8"><div class="empty py-4"><i class="bi bi-key"></i><h2>{{ _('No API keys.') }}</h2>{{ _('Clients authenticate with') }} <code>Authorization: Bearer ocrr_…</code></div></td></tr>{% endfor %}</tbody></table></div></div>
<dialog id="key-dlg"><h2>{{ _('Create key') }}</h2><form id="key-form">
<div class="field"><label>{{ _('name') }}</label><input name="name" required placeholder="ci-pipeline"></div>
<div class="field"><label>{{ _('scopes') }}</label><div class="d-flex gap-3"><label class="check"><input type="checkbox" name="s_read" checked>ocr:read</label><label class="check"><input type="checkbox" name="s_write" checked>ocr:write</label><label class="check"><input type="checkbox" name="s_admin">admin</label></div></div>
<div class="row-fields"><div class="field"><label>{{ _('route') }}</label><select name="route_id"><option value="">{{ _('(none)') }}</option>{% for r in routes %}<option value="{{ r.id }}">{{ r.name }}</option>{% endfor %}</select></div><div class="field"><label>RPM</label><input name="rpm_limit" type="number" value="0"></div><div class="field"><label>RPD</label><input name="rpd_limit" type="number" value="0"></div><div class="field"><label>{{ _('Budget ¢/month') }}</label><input name="monthly_budget_cents" type="number" step="0.01" value="0"></div><div class="field"><label>{{ _('Expires (ISO)') }}</label><input name="expires_at" placeholder="2027-01-01T00:00:00+00:00"></div></div>
<div class="d-flex gap-2"><button class="btn btn-primary" type="submit">{{ _('Create key') }}</button><button class="btn btn-outline-secondary" type="button" onclick="this.closest('dialog').close()">{{ _('Cancel') }}</button></div></form></dialog>
<dialog id="secret-dlg"><h2>{{ _('Copy your key now') }}</h2><p class="small text-muted">{{ _('It is stored hashed and cannot be shown again.') }}</p><pre id="secret"></pre><div class="d-flex gap-2 mt-3"><button class="btn btn-primary" id="copy-secret"><i class="bi bi-clipboard me-1"></i>{{ _('Copy') }}</button><button class="btn btn-outline-secondary" onclick="location.reload()">{{ _('Done') }}</button></div></dialog>
{% endblock %}
{% block scripts %}<script>
document.addEventListener("DOMContentLoaded", () => { const {api, toast, $, confirmDo} = OcrRoute;
$("#new-key").onclick = () => $("#key-dlg").showModal();
$("#key-form").onsubmit = async (e) => { e.preventDefault(); const f = e.target.elements; const scopes = []; if (f.s_read.checked) scopes.push("ocr:read"); if (f.s_write.checked) scopes.push("ocr:write"); if (f.s_admin.checked) scopes.push("admin"); try { const r = await api("POST", "/v1/keys", {name: f.name.value, scopes, route_id: f.route_id.value || null, rpm_limit: +f.rpm_limit.value, rpd_limit: +f.rpd_limit.value, monthly_budget_cents: +f.monthly_budget_cents.value, expires_at: f.expires_at.value}); $("#key-dlg").close(); $("#secret").textContent = r.secret; $("#secret-dlg").showModal(); } catch (err) { toast(err.message, true); } };
$("#copy-secret").onclick = () => navigator.clipboard.writeText($("#secret").textContent).then(() => toast("Copied"));
document.querySelectorAll(".toggle").forEach(b => b.onclick = async () => { try { await api("PATCH", `/v1/keys/${b.dataset.id}`, {enabled: b.dataset.on === "1"}); location.reload(); } catch (e) { toast(e.message, true); } });
document.querySelectorAll(".rotate").forEach(b => b.onclick = async () => { if (!confirmDo("Rotate this key? The old secret stops working immediately.")) return; try { const r = await api("POST", `/v1/keys/${b.dataset.id}/rotate`); $("#secret").textContent = r.secret; $("#secret-dlg").showModal(); } catch (e) { toast(e.message, true); } });
document.querySelectorAll(".revoke").forEach(b => b.onclick = async () => { if (!confirmDo("Revoke this key permanently?")) return; try { await api("DELETE", `/v1/keys/${b.dataset.id}`); location.reload(); } catch (e) { toast(e.message, true); } }); });
</script>{% endblock %}