From 02b40b3cc4671362d23cf1055abca39037ee49c5 Mon Sep 17 00:00:00 2001
From: Reid 'arrdem' McKenzie <me@arrdem.com>
Date: Sun, 28 May 2023 23:54:13 -0600
Subject: [PATCH] copy API keys; CSS refinements

---
 .../python/tentacles/static/css/style.scss    | 24 +++++++
 .../tentacles/static/css/tirefire/_nav.scss   |  1 +
 .../python/tentacles/templates/base.html.j2   |  1 +
 .../python/tentacles/templates/files.html.j2  |  4 +-
 .../tentacles/templates/files_list.html.j2    | 36 +++++------
 .../python/tentacles/templates/index.html.j2  |  4 +-
 .../python/tentacles/templates/jobs.html.j2   |  8 ++-
 .../tentacles/templates/jobs_history.html.j2  | 62 +++++++++----------
 .../tentacles/templates/jobs_list.html.j2     | 62 +++++++++----------
 .../tentacles/templates/printers.html.j2      |  2 +-
 .../python/tentacles/templates/user.html.j2   | 13 ++++
 11 files changed, 127 insertions(+), 90 deletions(-)

diff --git a/projects/tentacles/src/python/tentacles/static/css/style.scss b/projects/tentacles/src/python/tentacles/static/css/style.scss
index a48c0ab..526b184 100644
--- a/projects/tentacles/src/python/tentacles/static/css/style.scss
+++ b/projects/tentacles/src/python/tentacles/static/css/style.scss
@@ -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;
+    }
+  }
+}
diff --git a/projects/tentacles/src/python/tentacles/static/css/tirefire/_nav.scss b/projects/tentacles/src/python/tentacles/static/css/tirefire/_nav.scss
index 8a573bc..f372fad 100644
--- a/projects/tentacles/src/python/tentacles/static/css/tirefire/_nav.scss
+++ b/projects/tentacles/src/python/tentacles/static/css/tirefire/_nav.scss
@@ -156,6 +156,7 @@ $stripe_padding: ($stripe_thickness / 4);
   }
   */
   #menu-toggle:checked ~ .menu > li:last-child {
+    padding-bottom: 1em;
     border-bottom: 1px solid #444;
   }
 //}
diff --git a/projects/tentacles/src/python/tentacles/templates/base.html.j2 b/projects/tentacles/src/python/tentacles/templates/base.html.j2
index ba6f328..f5ddd14 100644
--- a/projects/tentacles/src/python/tentacles/templates/base.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/base.html.j2
@@ -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 %}
diff --git a/projects/tentacles/src/python/tentacles/templates/files.html.j2 b/projects/tentacles/src/python/tentacles/templates/files.html.j2
index 4d3a2ac..20d88dc 100644
--- a/projects/tentacles/src/python/tentacles/templates/files.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/files.html.j2
@@ -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" />
diff --git a/projects/tentacles/src/python/tentacles/templates/files_list.html.j2 b/projects/tentacles/src/python/tentacles/templates/files_list.html.j2
index 9d66cff..daed823 100644
--- a/projects/tentacles/src/python/tentacles/templates/files_list.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/files_list.html.j2
@@ -1,21 +1,19 @@
 {% import "macros.html.j2" as macros %}
-<div class="files">
-  <h2>Files</h2>
-  {% with files = ctx.db.list_files(uid=ctx.uid) %}
-    {% if files %}
-      {% for file in files %}
-        <div class="file row u-flex">
-          <div class="details six columns">
-            <span class="file-name">{{ file.filename }}</span>
-          </div>
-          <div class="controls u-flex u-ml-auto">
-            {{ macros.start_job(file.id) }}
-            {{ macros.delete_file(file.id) }}
-          </div>
-        </div>
-      {% endfor %}
-    {% else %}
-      You don't have any files. Upload something!
-    {% endif %}
-  {% endwith %}
+<h2>Files</h2>
+{% with files = ctx.db.list_files(uid=ctx.uid) %}
+{% if files %}
+{% for file in files %}
+<div class="file row u-flex">
+  <div class="details six columns">
+    <span class="file-name">{{ file.filename }}</span>
+  </div>
+  <div class="controls u-flex u-ml-auto">
+    {{ macros.start_job(file.id) }}
+    {{ macros.delete_file(file.id) }}
+  </div>
 </div>
+{% endfor %}
+{% else %}
+  You don't have any files. Upload something!
+{% endif %}
+{% endwith %}
diff --git a/projects/tentacles/src/python/tentacles/templates/index.html.j2 b/projects/tentacles/src/python/tentacles/templates/index.html.j2
index 5f3263d..4331eb5 100644
--- a/projects/tentacles/src/python/tentacles/templates/index.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/index.html.j2
@@ -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 %}
diff --git a/projects/tentacles/src/python/tentacles/templates/jobs.html.j2 b/projects/tentacles/src/python/tentacles/templates/jobs.html.j2
index ad0330e..63ce65d 100644
--- a/projects/tentacles/src/python/tentacles/templates/jobs.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/jobs.html.j2
@@ -1,5 +1,9 @@
 {% extends "base.html.j2" %}
 {% block content %}
-{% include "jobs_list.html.j2" %}
-{% include "jobs_history.html.j2" %}
+<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 %}
diff --git a/projects/tentacles/src/python/tentacles/templates/jobs_history.html.j2 b/projects/tentacles/src/python/tentacles/templates/jobs_history.html.j2
index 37c2dac..da94862 100644
--- a/projects/tentacles/src/python/tentacles/templates/jobs_history.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/jobs_history.html.j2
@@ -1,35 +1,33 @@
 {% 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 %}
-  {% for job in jobs %}
-    <div class="job row u-flex">
-      <div class="details six columns u-flex">
-        <div class="job-status u-flex">
-          <label for="state">Job</label>
-          <div class="dot {{ macros.job_state(job) }}" style="--dot-size: 1em;"> </div>
-          <span name="state">{{ macros.job_state(job) }}</span>
-        </div>
-        {% if job.printer_id %}
-        <div class="job-printer u-flex">
-          <label for="printer">Printer</label>
-          <span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span>
-        </div>
-        {% endif %}
-        <div class="job-filename u-flex">
-          <label for="filename">File</label>
-          <span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span>
-        </div>
-      </div>
-      <div class="controls u-flex u-ml-auto">
-        {{ macros.duplicate_job(job.id) }}
-        {{ macros.delete_job(job.id) }}
-      </div>
+<h2>Job history</h2>
+{% with jobs = ctx.db.list_job_history(uid=ctx.uid) %}
+{% if jobs %}
+{% for job in jobs %}
+<div class="job row u-flex">
+  <div class="details six columns u-flex">
+    <div class="job-status u-flex">
+      <label for="state">Job</label>
+      <div class="dot {{ macros.job_state(job) }}" style="--dot-size: 1em;"> </div>
+      <span name="state">{{ macros.job_state(job) }}</span>
     </div>
-  {% endfor %}
-  {% else %}
-    <p>No job history to display.</p>
-  {% endif %}
-  {% endwith %}
+    {% if job.printer_id %}
+    <div class="job-printer u-flex">
+      <label for="printer">Printer</label>
+      <span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span>
+    </div>
+    {% endif %}
+    <div class="job-filename u-flex">
+      <label for="filename">File</label>
+      <span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span>
+    </div>
+    </div>
+  <div class="controls u-flex u-ml-auto">
+    {{ macros.duplicate_job(job.id) }}
+    {{ macros.delete_job(job.id) }}
+  </div>
 </div>
+{% endfor %}
+{% else %}
+  <p>No job history to display.</p>
+{% endif %}
+{% endwith %}
diff --git a/projects/tentacles/src/python/tentacles/templates/jobs_list.html.j2 b/projects/tentacles/src/python/tentacles/templates/jobs_list.html.j2
index f2c110c..65be7d0 100644
--- a/projects/tentacles/src/python/tentacles/templates/jobs_list.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/jobs_list.html.j2
@@ -1,35 +1,33 @@
 {% 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 %}
-  {% for job in jobs %}
-    <div class="job row u-flex">
-      <div class="details six columns u-flex">
-        <div class="job-status u-flex">
-          <label for="state">Job</label>
-          <div class="dot {{ macros.job_state(job) }} {{ 'dot--basic' if not job.state else '' }}" style="--dot-size: 1em;"> </div>
-          <span name="state">{{ macros.job_state(job) }}</span>
-        </div>
-        {% if job.printer_id %}
-          <div class="job-printer u-flex">
-            <label for="printer">Printer</label>
-            <span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span>
-          </div>
-        {% endif %}
-        <div class="job-filename u-flex">
-          <label for="filename">File</label>
-          <span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span>
-        </div>
-      </div>
-      <div class="controls u-flex u-ml-auto">
-        {{ macros.duplicate_job(job.id) }}
-        {{ macros.cancel_job(job.id) }}
-      </div>
+<h2>Job queue</h2>
+{% with jobs = ctx.db.list_job_queue(uid=ctx.uid) %}
+{% if jobs %}
+{% for job in jobs %}
+<div class="job row u-flex">
+  <div class="details six columns u-flex">
+    <div class="job-status u-flex">
+      <label for="state">Job</label>
+      <div class="dot {{ macros.job_state(job) }} {{ 'dot--basic' if not job.state else '' }}" style="--dot-size: 1em;"> </div>
+      <span name="state">{{ macros.job_state(job) }}</span>
     </div>
-  {% endfor %}
-  {% else %}
-    No pending tasks. {% if ctx.uid %}Start something!{% endif %}
-  {% endif %}
-  {% endwith %}
+    {% if job.printer_id %}
+    <div class="job-printer u-flex">
+      <label for="printer">Printer</label>
+      <span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span>
+    </div>
+    {% endif %}
+    <div class="job-filename u-flex">
+      <label for="filename">File</label>
+      <span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span>
+    </div>
+  </div>
+  <div class="controls u-flex u-ml-auto">
+    {{ macros.duplicate_job(job.id) }}
+    {{ macros.cancel_job(job.id) }}
+  </div>
 </div>
+{% endfor %}
+{% else %}
+  No pending tasks. {% if ctx.uid %}Start something!{% endif %}
+{% endif %}
+{% endwith %}
diff --git a/projects/tentacles/src/python/tentacles/templates/printers.html.j2 b/projects/tentacles/src/python/tentacles/templates/printers.html.j2
index 048332d..80bbd12 100644
--- a/projects/tentacles/src/python/tentacles/templates/printers.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/printers.html.j2
@@ -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 %}
diff --git a/projects/tentacles/src/python/tentacles/templates/user.html.j2 b/projects/tentacles/src/python/tentacles/templates/user.html.j2
index 28c8998..709dbce 100644
--- a/projects/tentacles/src/python/tentacles/templates/user.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/user.html.j2
@@ -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 %}