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

55 lines
1.8 KiB
HTML
Raw Normal View History

{% extends "default.html" %}
{% block title %}API Key{% endblock %}
{% set active_page = "api_key" %}
{% block default_content %}
<div class="card">
<div class="card-body">
<h1 class="h3">New API Key {{ api_key.name }} is created</h1>
<div class="alert alert-warning">For security reasons, API Key is only visible when it is created.</div>
<div class="input-group mb-2">
<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>
<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>
{% endblock %}
{% block script %}
<script>
$(".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 %}