app-MAIL-temp/app/dashboard/templates/dashboard/api_key.html

{% extends 'default.html' %}

{% block title %}
  API Key
{% endblock %}

{% set active_page = "api_key" %}

{% block head %}
{% endblock %}

{% block default_content %}
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <h1 class="h3"> API Key </h1>

      <div class="alert alert-primary" role="alert">
        The API Key is used on the SimpleLogin Chrome/Firefox/Safari extension. <br>
        You can install the Chrome extension on
        <a href="https://chrome.google.com/webstore/detail/simplelogin-extension/dphilobhebphkdjbpfohgikllaljmgbn"
           target="_blank">Chrome Store<i class="fe fe-external-link"></i></a>,
          Firefox add-on on <a href="https://addons.mozilla.org/en-GB/firefox/addon/simplelogin/" target="_blank">Firefox<i
              class="fe fe-external-link"></i></a>
          and Safari extension on <a
              href="https://apps.apple.com/us/app/simplelogin/id1494051017?mt=12&fbclid=IwAR0M0nnEKgoieMkmx91TSXrtcScj7GouqRxGgXeJz2un_5ydhIKlbAI79Io"
              target="_blank">AppStore<i class="fe fe-external-link"></i></a>
        <br>
        Please copy and paste the API key below into the extension to get started. <br>
        <span class="text-danger">
          ⚠️Your API Keys are secret and should be treated as passwords.
        </span>
      </div>

      {% for api_key in api_keys %}
        <div class="card" style="max-width: 50rem">
          <div class="card-body">
            <h5 class="card-title">{{ api_key.name }}</h5>
            <h6 class="card-subtitle mb-2 text-muted">
              {% if api_key.last_used %}
                Last used: {{ api_key.last_used | dt }} <br>
                Used: {{ api_key.times }} times.
              {% else %}
                Never used
              {% endif %}
            </h6>

            <input class="form-control w-100" id="apikey-{{ api_key.id }}" readonly value="**********">
            <br>

            <div class="row">
              <div class="col">
                <button class="clipboard btn btn-primary" data-clipboard-action="copy"
                        data-clipboard-text="{{ api_key.code }}"
                        data-clipboard-target="#apikey-{{ api_key.id }}">
                  Copy &nbsp; &nbsp; <i class="fe fe-clipboard"></i>
                </button>
              </div>

              <div class="col">
                <form method="post">
                  <input type="hidden" name="form-name" value="delete">
                  <input type="hidden" name="api-key-id" value="{{ api_key.id }}">
                  <span class="card-link btn btn-link float-right delete-api-key">
                    Delete
                  </span>
                </form>
              </div>
            </div>

          </div>
        </div>
      {% endfor %}

      <hr>

      <form method="post">
        {{ new_api_key_form.csrf_token }}
        <input type="hidden" name="form-name" value="create">

        <label class="form-label">Api Key Name</label>
        <small>Name of the api key, e.g. where it will be used.</small>

        {{ new_api_key_form.name(class="form-control", placeholder="Chrome, Firefox") }}
        {{ render_field_errors(new_api_key_form.name) }}
        <button class="btn btn-lg btn-success mt-2">Create</button>
      </form>


    </div>

  </div>
{% endblock %}

{% block script %}
  <script>
    $(".delete-api-key").on("click", function (e) {
      notie.confirm({
        text: "If this api key is currently in use, you need to replace it with another api key, " +
          " please confirm.",
        cancelCallback: () => {
          // nothing to do
        },
        submitCallback: () => {
          $(this).closest("form").submit();
        }
      });
    });
  </script>
{% endblock %}