{% extends "base_content.html" %}
{% block title %}{{ entity }} - API Tokens{% endblock %}
{% block page_content %}
<div class="max-w-screen-xl mx-auto">
<div class="breadcrumbs mb-4">
<a href="/{{ entity }}" class="hover:underline">{{ entity }}</a> /
<span class="font-semibold">API Tokens</span>
</div>
{% if tokens | length == 0 %}
<p class="text-muted-foreground">No active API tokens found.</p>
{% else %}
<div class="overflow-x-auto">
<table class="uk-table uk-table-striped uk-table-small">
<thead>
<tr>
<th>Short token</th>
<th>Scope</th>
<th>Permission</th>
<th>App</th>
<th>Created</th>
<th>Expires</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="tokens-table">
{% for token in tokens %}
<tr id="token-row-{{ token.short_token }}">
<td><code class="text-sm">{{ token.short_token }}</code></td>
<td>{{ token.scoped_database | default(value="(all databases)") }}</td>
<td>{{ token.permission_level | default(value="(full access)") }}</td>
<td>{{ token.app_name | default(value="") }}</td>
<td>{{ token.created_at | default(value="") }}</td>
<td>{{ token.expires_at | default(value="(never)") }}</td>
<td>
<button
type="button"
class="uk-btn uk-btn-danger uk-btn-sm"
onclick="confirmRevokeToken('{{ token.short_token }}')">
Revoke
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
<div id="revoke-token-modal" class="uk-flex-top" data-uk-modal>
<div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
<h2 class="uk-modal-title">Revoke token</h2>
<p class="mt-1">Are you sure you want to revoke token <code id="revoke-token-id"></code>?</p>
<p class="uk-text-muted text-sm mt-2">This token will no longer be able to access the API.</p>
<p class="uk-text-right mt-4">
<button class="uk-btn uk-btn-default uk-modal-close" type="button">Cancel</button>
<button
class="uk-btn uk-btn-destructive"
id="confirm-revoke-btn"
type="button"
onclick="revokeToken()">
Revoke token
</button>
</p>
</div>
</div>
<script>
let revokeTokenShortToken = '';
function confirmRevokeToken(shortToken) {
revokeTokenShortToken = shortToken;
document.getElementById('revoke-token-id').textContent = shortToken;
UIkit.modal('#revoke-token-modal').show();
}
function revokeToken() {
const shortToken = revokeTokenShortToken;
const targetRow = document.getElementById('token-row-' + shortToken);
fetch('/settings/tokens/' + shortToken, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (response.ok) {
return response.text();
}
throw new Error('Failed to revoke token');
})
.then(html => {
targetRow.outerHTML = html;
UIkit.modal('#revoke-token-modal').hide();
})
.catch(error => {
console.error('Error revoking token:', error);
UIkit.modal('#revoke-token-modal').hide();
});
}
</script>
</div>
{% endblock %}