feat #29: add initial support for mtbfile api tokens

src/main/resources/db/migration/mariadb/V0_2_0__Tokens.sql

@@ -0,0 +1,8 @@
+CREATE TABLE IF NOT EXISTS token
+(
+    id                  int auto_increment primary key,
+    name                varchar(255)                         not null,
+    username            varchar(255)                         not null unique,
+    password            varchar(255)                         not null,
+    created_at          datetime     default utc_timestamp() not null
+);

src/main/resources/db/migration/postgresql/V0_2_0__Tokens.sql

@@ -0,0 +1,9 @@
+CREATE TABLE IF NOT EXISTS token
+(
+    id                  serial,
+    name                varchar(255)                           not null,
+    username            varchar(255)                           not null unique,
+    password            varchar(255)                           not null,
+    created_at          timestamp with time zone default now() not null,
+    PRIMARY KEY (id)
+);

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) {

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);
 }

src/main/resources/templates/configs.html

@@ -37,6 +37,9 @@
             </table>
         </section>
 
+        <section th:insert="~{configs/tokens.html}">
+        </section>
+
         <section hx-ext="sse" th:sse-connect="@{/configs/events}">
             <div th:insert="~{configs/connectionAvailable.html}" th:hx-get="@{/configs?connectionAvailable}" hx-trigger="sse:connection-available">
             </div>
@@ -86,6 +89,7 @@
             </th:block>
         </section>
     </main>
+    <script th:src="@{/scripts.js}"></script>
     <script th:src="@{/webjars/htmx.org/dist/htmx.min.js}"></script>
     <script th:src="@{/webjars/htmx.org/dist/ext/sse.js}"></script>
 </body>

src/main/resources/templates/configs/tokens.html

@@ -0,0 +1,39 @@
+<div th:if="${not tokensEnabled}">
+    <h2><span>⛔</span> Tokens</h2>
+    <p>Die Verwendung von Tokens ist nicht aktiviert.</p>
+</div>
+
+<div id="tokens" th:if="${tokensEnabled}">
+    <h2><span>✅</span> Tokens</h2>
+    <div class="border">
+        <div th:if="${tokens.isEmpty()}">Noch keine Tokens vorhanden.</div>
+        <table th:if="${not tokens.isEmpty()}">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Erstellt</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr th:each="token : ${tokens}">
+                    <td>[[ ${token.name} ]]</td>
+                    <td><time th:datetime="${token.createdAt}">[[ ${token.createdAt} ]]</time></td>
+                    <td><button class="btn btn-red" th:hx-delete="@{/configs/tokens/{id}(id=${token.id})}" hx-target="#tokens">Löschen</button></td>
+                </tr>
+            </tbody>
+        </table>
+        <div th:if="${newTokenValue != null and success}" class="new-token">
+            Verwendung über HTTP-Basic. Bitte notieren, wird nicht erneut angezeigt: <pre>[[ ${newTokenValue} ]]</pre>
+        </div>
+        <div th:if="${success != null and not success}" class="no-token">
+            Das Token konnte nicht erzeugt werden. Versuchen Sie einen anderen Namen.
+        </div>
+        <div class="token-form">
+            <form th:hx-post="@{/configs/tokens}" hx-target="#tokens">
+                <input placeholder="Token-Name" name="name" required />
+                <button>Token Erstellen</button>
+            </form>
+        </div>
+    </div>
+</div>

src/main/resources/templates/login.html

@@ -15,7 +15,7 @@
             <form method="post" th:action="@{/login}">
                 <input type="text" id="username" name="username" class="form-control" placeholder="Username" required="" autofocus="">
                 <input type="password" id="password" name="password" class="form-control" placeholder="Password" required="">
-                <button class="" type="submit">Anmelden</button>
+                <button type="submit">Anmelden</button>
             </form>
         </div>
     </main>