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>

            <div class="input-group">
              <input class="form-control" id="apikey-{{ api_key.id }}" readonly value="**********">
              <div class="input-group-append">
                <span class="input-group-text">
                  <i class="fe fe-eye toggle-api-key" data-show="off" data-secret="{{ api_key.code }}"
                  ></i>
                </span>
              </div>
            </div>

            <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 text-danger 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();
        }
      });
    });

    $(".toggle-api-key").on('click', function (event) {
      let that = $(this);
      let apiInput = that.parent().parent().parent().find("input");
      if (that.attr("data-show") === "off") {
        let apiKey = $(this).attr("data-secret");
        apiInput.val(apiKey);
        that.addClass("fe-eye-off");
        that.removeClass("fe-eye");
        that.attr("data-show", "on");
      } else {
        that.removeClass("fe-eye-off");
        that.addClass("fe-eye");
        apiInput.val("**********");
        that.attr("data-show", "off");
      }

    });
  </script>
{% endblock %}