feat #29: add initial support for mtbfile api tokens

2 files changed, 27 insertions, 4 deletions

diff --git a/src/main/resources/static/scripts.js b/src/main/resources/static/scripts.js
index 73ad71b..fdd3f52 100644
--- a/src/main/resources/static/scripts.js
+++ b/src/main/resources/static/scripts.js
@@ -4,14 +4,17 @@ const dateFormat = new Intl.DateTimeFormat('de-DE', dateFormatOptions);
 const dateTimeFormatOptions = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: 'numeric', second: 'numeric' };
 const dateTimeFormat = new Intl.DateTimeFormat('de-DE', dateTimeFormatOptions);
 
-window.addEventListener('load', () => {
+const formatTimeElements = () => {
     Array.from(document.getElementsByTagName('time')).forEach((timeTag) => {
         let date = Date.parse(timeTag.getAttribute('datetime'));
         if (! isNaN(date)) {
             timeTag.innerText = dateTimeFormat.format(date);
         }
     });
-});
+};
+
+window.addEventListener('load', formatTimeElements);
+window.addEventListener('htmx:afterRequest', formatTimeElements);
 
 function drawPieChart(url, elemId, title, data) {
     if (data) {
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index e2bf65a..3249aad 100644
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@@ -202,13 +202,15 @@ form.samplecode-input input:focus-visible {
     background: none;
 }
 
-.login-form form * {
+.login-form form *,
+.token-form form * {
     padding: 0.5em;
     border: 1px solid var(--table-border);
     border-radius: 3px;
 }
 
-.login-form button {
+.login-form button,
+.token-form button {
     margin: 1em 0;
     background: var(--bg-blue);
     color: white;
@@ -535,4 +537,22 @@ a.reload {
     font-size: .6em;
     align-content: center;
     justify-content: center;
+}
+
+.new-token {
+    padding: 1em;
+    background: var(--bg-green-op);
+}
+
+.new-token > pre {
+    margin: 0;
+    border: 1px solid var(--bg-green);
+    padding: .5em;
+    width: max-content;
+    display: inline-block;
+}
+
+.no-token {
+    padding: 1em;
+    background: var(--bg-red-op);
 }
\ No newline at end of file