byceps/blueprints/admin/api/templates/admin/api/index.html
{% extends 'layout/admin/base.html' %}
{% from 'macros/admin.html' import render_extra_in_heading %}
{% from 'macros/icons.html' import render_icon %}
{% from 'macros/misc.html' import render_tag %}
{% from 'macros/user.html' import render_user_avatar_and_name %}
{% set current_page = 'api_admin' %}
{% set page_title = _('API') %}
{% block head %}
<style>
code {
background-color: #eeeeee;
border-radius: 5px;
font-family: monospace;
font-size: 0.75rem !important;
padding: 0 0.125rem;
}
</style>
{%- endblock %}
{% block body %}
<h1>{{ page_title }}</h1>
<div class="row row--space-between">
<div>
<h2>{{ _('API Tokens') }} {{ render_extra_in_heading(api_tokens|length) }}</h2>
</div>
<div class="column--align-bottom">
<div class="button-row button-row--right">
<a class="button" href="{{ url_for('.create_api_token_form') }}">{{ render_icon('add') }} <span>{{ _('Create API token') }}</span></a>
</div>
</div>
</div>
{%- if api_tokens %}
{%- for api_token in api_tokens|sort(attribute='created_at', reverse=True) %}
<div class="box box--marked {{ 'color-danger' if api_token.suspended else 'color-success' }}">
<div class="row row--space-between">
<div>
{{ render_tag(_('suspended'), class='color-danger') if api_token.suspended else render_tag(_('enabled'), class='color-success') }}
</div>
<div>
<div class="button-row button-row--compact button-row--right">
{%- if api_token.suspended %}
<a class="button button--compact" href="{{ url_for('.unsuspend_api_token', api_token_id=api_token.id) }}" data-action="unsuspend-api-token" title="{{ _('Unsuspend API token') }}">{{ render_icon('enabled') }}</a>
{%- else %}
<a class="button button--compact" href="{{ url_for('.suspend_api_token', api_token_id=api_token.id) }}" data-action="suspend-api-token" title="{{ _('Suspend API token') }}">{{ render_icon('disabled') }}</a>
{%- endif %}
<a class="button button--compact" href="{{ url_for('.delete_api_token', api_token_id=api_token.id) }}" data-action="delete-api-token" title="{{ _('Delete API token') }}">{{ render_icon('delete') }}</a>
</div>
</div>
</div>
<div class="row row--space-between mt">
<div class="column--grow">
<div class="row">
<div style="flex-basis: 50%;">
<div class="data-label">{{ _('Description') }}</div>
<div class="data-value">{{ api_token.description|fallback }}</div>
</div>
<div style="flex-basis: 50%;">
<div class="row">
<div style="flex-basis: 50%;">
<div class="data-label">{{ _('Created at') }}</div>
<div class="data-value">{{ api_token.created_at|datetimeformat }}</div>
</div>
<div style="flex-basis: 50%;">
<div class="data-label">{{ _('Created by') }}</div>
<div class="data-value">{{ render_user_avatar_and_name(users_by_id[api_token.creator_id], size=20) }}</div>
</div>
</div>
</div>
</div>
<div class="row mt">
<div style="flex-basis: 50%;">
<div class="data-label">{{ _('Permissions') }}</div>
<div class="data-value">
<details>
<summary>{{ api_token.permissions|length }} {{ _('permissions') }}</summary>
<ul style="margin: 0.5rem 0 0 0; padding-left: 1rem;">
{%- for permission_id in api_token.permissions|sort %}
<li>{{ permission_id }}</li>
{%- endfor %}
</ul>
</details>
</div>
</div>
<div style="flex-basis: 50%;">
<div class="data-label">{{ _('Token') }}</div>
<div class="data-value">
<details>
<summary>{{ _('Reveal') }}</summary>
<div class="nowrap">
<code>{{ api_token.token|fallback }}</code>
<input id="token-field-{{ api_token.id }}" value="{{ api_token.token }}" style="position: fixed; top: -1000px;" readonly>
<button id="token-copy-trigger-{{ api_token.id }}" data-field-id="token-field-{{ api_token.id }}" class="button button--compact" title="{{ _('Copy to clipboard') }}">{{ render_icon('clipboard') }}</button>
</div>
</details>
</div>
</div>
</div>
</div>
</div>
</div>
{%- endfor %}
{%- else %}
<div class="box">
<div class="dimmed-box centered">{{ _('No API tokens defined.') }}</div>
</div>
{%- endif %}
{%- endblock %}
{% block scripts %}
<script>
{%- for api_token in api_tokens %}
enableCopyToClipboard('token-copy-trigger-{{ api_token.id }}');
{%- endfor %}
onDomReady(() => {
confirmed_post_on_click_then_reload('[data-action="suspend-api-token"]', '{{ _('Suspend API token?') }}');
confirmed_post_on_click_then_reload('[data-action="unsuspend-api-token"]', '{{ _('Unsuspend API token?') }}');
confirmed_delete_on_click_then_reload('[data-action="delete-api-token"]', '{{ _('Delete API token?') }}');
});
</script>
{% endblock %}