2019-11-28 22:14:55 +00:00
{% extends 'default.html' %}
{% block title %}
API Key
{% endblock %}
2019-12-29 09:56:27 +00:00
{% set active_page = "api_key" %}
2019-11-28 22:14:55 +00:00
{% block head %}
{% endblock %}
{% block default_content %}
< div class = "row" >
2020-04-05 17:59:48 +00:00
< div class = "col" >
2020-05-03 08:47:29 +00:00
< h1 class = "h3" > API Key
< a class = "ml-3 text-info" style = "font-size: 12px" data-toggle = "collapse" href = "#howtouse" role = "button"
aria-expanded="false" aria-controls="collapseExample">
2020-05-27 17:23:33 +00:00
What is this? < i class = "fe fe-chevrons-down" > < / i >
2020-05-03 08:47:29 +00:00
< / a >
< / h1 >
2019-11-28 22:14:55 +00:00
2020-05-03 08:47:29 +00:00
< div class = "alert alert-primary collapse" id = "howtouse" role = "alert" >
2020-05-27 17:23:33 +00:00
An API key is primarily used by the SimpleLogin browser extensions but can also be used by < a href = "https://app.simplelogin.io/developer/" target = "_blank" > developer apps< i class = "fe fe-external-link" > < / i > < / a > .
< br > < br > You can install the official SimpleLogin browser extensions through the following links:
2019-11-30 18:13:03 +00:00
< a href = "https://chrome.google.com/webstore/detail/simplelogin-extension/dphilobhebphkdjbpfohgikllaljmgbn"
2020-05-27 17:23:33 +00:00
target="_blank">Chrome< i class = "fe fe-external-link" > < / i > < / a > ,
< a href = "https://addons.mozilla.org/en-GB/firefox/addon/simplelogin/"
target="_blank">Firefox< i class = "fe fe-external-link" > < / i > < / a > &
< a href = "https://apps.apple.com/us/app/simplelogin/id1494051017?mt=12&fbclid=IwAR0M0nnEKgoieMkmx91TSXrtcScj7GouqRxGgXeJz2un_5ydhIKlbAI79Io"
target="_blank">Safari< i class = "fe fe-external-link" > < / i > < / a >
2019-11-30 18:13:03 +00:00
< br >
< span class = "text-danger" >
2020-05-27 17:23:33 +00:00
⚠️ API Keys should be kept secret and treated like passwords, they can be used to gain access to your account.
2019-11-30 18:13:03 +00:00
< / span >
2020-01-20 10:16:04 +00:00
< / div >
2019-11-28 22:14:55 +00:00
2020-05-03 08:48:21 +00:00
< div class = "row" >
{% for api_key in api_keys %}
< div class = "col-12 col-lg-6" >
< div class = "card" >
< 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" >
2020-02-19 16:45:08 +00:00
< span class = "input-group-text" >
< i class = "fe fe-eye toggle-api-key" data-show = "off" data-secret = "{{ api_key.code }}"
>< / i >
< / span >
2020-05-03 08:48:21 +00:00
< / 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 < 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 22:14:55 +00:00
Delete
< / span >
2020-05-03 08:48:21 +00:00
< / form >
< / div >
< / div >
2019-11-28 22:14:55 +00:00
< / div >
< / div >
< / div >
2020-05-03 08:48:21 +00:00
{% endfor %}
< / div >
2019-11-28 22:14:55 +00:00
< form method = "post" >
{{ new_api_key_form.csrf_token }}
< input type = "hidden" name = "form-name" value = "create" >
2020-05-27 17:23:33 +00:00
< h2 class = "h4" > New API Key< / h2 >
2019-11-28 22:14:55 +00:00
2020-05-27 17:23:33 +00:00
{{ new_api_key_form.name(class="form-control", placeholder="Chrome") }}
2019-11-28 22:14:55 +00:00
{{ render_field_errors(new_api_key_form.name) }}
2020-05-03 08:48:21 +00:00
< div class = "small-text" > Name of the api key, e.g. where it will be used.< / div >
2019-11-28 22:16:35 +00:00
< button class = "btn btn-lg btn-success mt-2" > Create< / button >
2019-11-28 22:14:55 +00:00
< / form >
< / div >
< / div >
{% endblock %}
{% block script %}
< script >
$(".delete-api-key").on("click", function (e) {
2020-04-30 20:37:39 +00: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 22:14:55 +00:00
},
2020-04-30 20:37:39 +00:00
callback: function (result) {
if (result) {
that.closest("form").submit();
}
2019-11-28 22:14:55 +00:00
}
2020-04-30 20:37:39 +00:00
})
2019-11-28 22:14:55 +00:00
});
2020-02-19 16:45:08 +00: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 22:14:55 +00:00
< / script >
2020-05-27 17:23:33 +00:00
{% endblock %}