copy API keys; CSS refinements

This commit is contained in:
Reid 'arrdem' McKenzie 2023-05-28 23:54:13 -06:00
parent 2ccdd48d63
commit 02b40b3cc4
11 changed files with 127 additions and 90 deletions

View file

@ -29,6 +29,10 @@
div {
margin-right: 10px;
}
.controls {
margin-left: auto;
display: flex;
}
}
// Hide the header name if we're on a mobile device
@ -41,3 +45,23 @@
label {
margin-right: 10px;
}
.mb-1 {
margin-bottom: 10px;
}
.mb-2 {
margin-bottom: 20px;
}
@media (max-width: 760px) {
.file, .printer, .key, .job {
flex-direction: column;
margin-bottom: 10px;
.controls {
margin-right: auto;
margin-left: unset;
}
}
}

View file

@ -156,6 +156,7 @@ $stripe_padding: ($stripe_thickness / 4);
}
*/
#menu-toggle:checked ~ .menu > li:last-child {
padding-bottom: 1em;
border-bottom: 1px solid #444;
}
//}

View file

@ -29,6 +29,7 @@
<li><a class="twelve columns button slide" href="/user/login">Log in</a></li>
<li><a class="twelve columns button slide" href="/user/register">Register</a></li>
{% else %}
<li><a class="twelve columns button slide" href="/">Overview</a></li>
<li><a class="twelve columns button slide" href="/jobs">Jobs</a></li>
<li><a class="twelve columns button slide" href="/files">Files</a></li>
{% if ctx.is_admin %}

View file

@ -1,10 +1,10 @@
{% extends "base.html.j2" %}
{% block content %}
<div class="row twelve columns">
<div class="row twelve columns mb-2">
{% include "files_list.html.j2" %}
</div>
<div class="row twelve columns">
<div class="row twelve columns mb-2">
<h2>Upload a file</h2>
<form method="post" action="/files" enctype="multipart/form-data">
<input type="hidden" name="action" value="upload" />

View file

@ -1,5 +1,4 @@
{% import "macros.html.j2" as macros %}
<div class="files">
<h2>Files</h2>
{% with files = ctx.db.list_files(uid=ctx.uid) %}
{% if files %}
@ -18,4 +17,3 @@
You don't have any files. Upload something!
{% endif %}
{% endwith %}
</div>

View file

@ -1,11 +1,11 @@
{% extends "base.html.j2" %}
{% block content %}
<div class="row twelve columns">
<div class="row twelve columns mb-2">
{% include "jobs_list.html.j2" %}
</div>
{% if ctx.uid %}
<div class="row twelve columns">
<div class="row twelve columns mb-2">
{% include "files_list.html.j2" %}
</div>
{% endif %}

View file

@ -1,5 +1,9 @@
{% extends "base.html.j2" %}
{% block content %}
<div class="row twelve columns mb-2">
{% include "jobs_list.html.j2" %}
</div>
<div class="row twelve columns mb-2">
{% include "jobs_history.html.j2" %}
</div>
{% endblock %}

View file

@ -1,5 +1,4 @@
{% import "macros.html.j2" as macros %}
<div class="history">
<h2>Job history</h2>
{% with jobs = ctx.db.list_job_history(uid=ctx.uid) %}
{% if jobs %}
@ -32,4 +31,3 @@
<p>No job history to display.</p>
{% endif %}
{% endwith %}
</div>

View file

@ -1,5 +1,4 @@
{% import "macros.html.j2" as macros %}
<div class="queue">
<h2>Job queue</h2>
{% with jobs = ctx.db.list_job_queue(uid=ctx.uid) %}
{% if jobs %}
@ -32,4 +31,3 @@
No pending tasks. {% if ctx.uid %}Start something!{% endif %}
{% endif %}
{% endwith %}
</div>

View file

@ -1,6 +1,6 @@
{% extends "base.html.j2" %}
{% block content %}
<div class="twelve columns">
<div class="row twelve columns mb-1">
{% include "printers_list.html.j2" %}
</div>
{% endblock %}

View file

@ -13,6 +13,10 @@
<span class="key-expiration u-ml-auto">{{ 'Expires in ' if exp else ''}}{{ exp - datetime.now() if exp else 'Never expires' }}</span>
</div>
<div class="controls u-flex u-ml-auto">
<form class="inline" method="none" class="ml-auto">
<input type="hidden" name="key" value="{{ id }}" id="key{{ loop.index }}">
<input type="button" value="Copy" onclick="copyKey('#key{{loop.index}}');" />
</form>
<form class="inline" method="post" class="ml-auto">
<input type="hidden" name="action" value="revoke">
<input type="hidden" name="id" value="{{ id }}">
@ -50,4 +54,13 @@
</div>
</form>
</div>
<script type="text/javascript">
function copyKey(keySelector) {
console.log("Hook fired");
let copyEl = document.querySelector(keySelector);
console.log(copyEl);
let copyValue = copyEl.value;
navigator.clipboard.writeText(copyValue)
};
</script>
{% endblock %}