byceps/byceps

View on GitHub
byceps/blueprints/admin/api/templates/admin/api/index.html

Summary

Maintainability
Test Coverage
{% 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 %}