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

177 lines
5.2 KiB
HTML
Raw Normal View History

2019-11-28 23:14:55 +01:00
{% extends 'default.html' %}
{% block title %}
API Key
{% endblock %}
2019-12-29 10:56:27 +01:00
{% set active_page = "api_key" %}
2019-11-28 23:14:55 +01:00
{% block head %}
{% endblock %}
{% block default_content %}
<div class="row">
2020-04-05 19:59:48 +02:00
<div class="col">
2021-05-05 18:51:15 +02:00
<h1 class="h3"> API Keys </h1>
<div class="small-text">
API keys are used by the SimpleLogin browser extensions or mobile apps.
</div>
<div class="alert alert-danger">
API Keys should be kept secret and treated like passwords, they can be used to gain access to your account.
</div>
2019-11-28 23:14:55 +01:00
<div class="row">
{% for api_key in api_keys %}
<div class="col-12 col-lg-6">
<div class="card">
<div class="card-body">
2021-09-21 11:26:05 +02:00
<h5 class="card-title">{{ api_key.name or "N/A" }}</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">
2020-02-19 17:45:08 +01:00
<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">
2019-11-28 23:14:55 +01:00
Delete
</span>
</form>
</div>
</div>
2019-11-28 23:14:55 +01:00
</div>
</div>
</div>
{% endfor %}
</div>
2019-11-28 23:14:55 +01:00
{% if api_keys|length > 0 %}
<form method="post">
<input type="hidden" name="form-name" value="delete-all">
<span class="delete btn btn-danger delete-all-api-keys">
Delete All &nbsp; &nbsp; <i class="fe fe-trash"></i>
</span>
</form>
<br>
{% endif %}
2019-11-28 23:14:55 +01:00
<form method="post">
{{ new_api_key_form.csrf_token }}
<input type="hidden" name="form-name" value="create">
2020-05-27 19:23:33 +02:00
<h2 class="h4">New API Key</h2>
2019-11-28 23:14:55 +01:00
2020-05-27 19:23:33 +02:00
{{ new_api_key_form.name(class="form-control", placeholder="Chrome") }}
2019-11-28 23:14:55 +01:00
{{ render_field_errors(new_api_key_form.name) }}
<div class="small-text">Name of the api key, e.g. where it will be used.</div>
2021-05-05 18:51:15 +02:00
<button class="btn btn-success mt-2">Create</button>
2019-11-28 23:14:55 +01:00
</form>
</div>
</div>
{% endblock %}
{% block script %}
<script>
$(".delete-api-key").on("click", function (e) {
2020-04-30 22:37:39 +02:00
let that = $(this);
bootbox.confirm({
message: "If this api key is currently in use, you need to replace it with another api key, please confirm.",
buttons: {
confirm: {
label: 'Yes, delete it',
className: 'btn-danger'
},
cancel: {
label: 'Cancel',
className: 'btn-outline-primary'
}
2019-11-28 23:14:55 +01:00
},
2020-04-30 22:37:39 +02:00
callback: function (result) {
if (result) {
that.closest("form").submit();
}
2019-11-28 23:14:55 +01:00
}
2020-04-30 22:37:39 +02:00
})
2022-01-23 19:38:54 +01:00
});
$(".delete-all-api-keys").on("click", function (e) {
let that = $(this);
bootbox.confirm({
message: "This will delete all API Keys, they will all stop working, are you sure?",
buttons: {
confirm: {
label: 'Delete All',
className: 'btn-danger'
},
cancel: {
label: 'Cancel',
className: 'btn-outline-primary'
}
},
callback: function (result) {
if (result) {
that.closest("form").submit();
}
}
})
2019-11-28 23:14:55 +01:00
});
2020-02-19 17:45:08 +01:00
$(".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");
}
});
2019-11-28 23:14:55 +01:00
</script>
2020-05-27 19:23:33 +02:00
{% endblock %}