Merge pull request #21 from CCC-MF/feat_18

feat #18: initial support for authentication
author: Paul-Christian Volkmer 2024-01-11 13:32:37 +0100
committer: GitHub 2024-01-11 13:32:37 +0100
commit: 21959c169859728c21c864082e1ff6464ef31c40 (patch)
tree: e5e21d21cba3f6d5845b185bce26a5d80e126b42 /src/main/resources
parent: 5579ad14534111db6954b772ccd0ea72a09e4c15 (diff)
parent: 8a11e6e85b2b2cb4f860ddca010386cb3f701f9b (diff)
6 files changed, 107 insertions, 10 deletions
diff --git a/src/main/resources/application-dev.yml b/src/main/resources/application-dev.yml
index dabe84b..d538338 100644
--- a/src/main/resources/application-dev.yml
+++ b/src/main/resources/application-dev.yml
@@ -10,6 +10,9 @@ app:
     topic: test
     response-topic: test_response
     servers: localhost:9094
+  #security:
+  #  admin-user: admin
+  #  admin-password: very-secret
 
 server:
   port: 8000
diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
index b2ba085..fee5d4c 100644
--- a/src/main/resources/static/style.css
+++ b/src/main/resources/static/style.css
@@ -74,20 +74,25 @@ nav > ul {
 nav > ul > li {
     display: inline-block;
     padding: 0 1rem;
-    border-left: 1px solid var(--table-border);
 }
 
-nav > ul > li:first-of-type {
-    border-left: none;
+nav > ul > li.login {
+    margin: 0 0 0 1em;
+    padding: 0 0 0 2em;
+    border-left: 1px solid var(--table-border);
 }
 
 nav li a {
-    color: #004a8f;
+    color: var(--bg-blue);
     text-transform: uppercase;
     text-decoration: none;
     font-weight: 700;
 }
 
+nav li.login a {
+    color: var(--bg-red);
+}
+
 nav li a:hover {
     text-decoration: underline;
 }
@@ -177,6 +182,39 @@ form.samplecode-input input:focus-visible {
     background: lightgreen;
 }
 
+.login-form {
+    width: fit-content;
+    margin: 3em auto;
+    padding: 2em 5em;
+
+    border: 1px solid var(--table-border);
+    border-radius: .5em;
+    background: white;
+}
+
+.login-form form {
+    width: 20em;
+    margin: 0 auto;
+    display: grid;
+    grid-gap: .5em;
+
+    border: none;
+    background: none;
+}
+
+.login-form form * {
+    padding: 0.5em;
+    border: 1px solid var(--table-border);
+    border-radius: 3px;
+}
+
+.login-form button {
+    margin: 1em 0;
+    background: var(--bg-blue);
+    color: white;
+    border: none;
+}
+
 .border {
     padding: 1.5em;
     border: 1px solid var(--table-border);
@@ -200,6 +238,7 @@ table {
 }
 
 .border > table {
+    padding: 0;
     border: none;
     background: transparent;
 }
@@ -272,6 +311,13 @@ td > small {
     text-align: center;
 }
 
+td.patient-id {
+    width: 32em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+}
+
 td.bg-blue, th.bg-blue,
 td.bg-green, th.bg-green,
 td.bg-yellow, th.bg-yellow,
@@ -459,4 +505,19 @@ input.inline:focus-visible {
 
 .connection-display .connection.available {
     background: var(--bg-green);
+}
+
+.notification {
+    margin: 1em;
+    padding: .5em;
+    border-radius: 3px;
+    text-align: center;
+}
+
+.notification.success {
+    color: var(--bg-green);
+}
+
+.notification.error {
+    color: var(--bg-red);
 }
 \ No newline at end of file
diff --git a/src/main/resources/templates/fragments.html b/src/main/resources/templates/fragments.html
index 677e841..7a9af2f 100644
--- a/src/main/resources/templates/fragments.html
+++ b/src/main/resources/templates/fragments.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
     <link rel="stylesheet" th:href="@{/style.css}" />
@@ -14,7 +14,15 @@
             <ul>
                 <li><a th:href="@{/}">Übersicht</a></li>
                 <li><a th:href="@{/statistics}">Statistiken</a></li>
-                <li><a th:href="@{/configs}">Konfiguration</a></li>
+                <li sec:authorize="hasRole('ADMIN')">
+                    <a th:href="@{/configs}">Konfiguration</a>
+                </li>
+                <li class="login" sec:authorize="not isAuthenticated()">
+                    <a th:href="@{/login}">Login</a>
+                </li>
+                <li class="login" sec:authorize="isAuthenticated()">
+                    <a th:href="@{/logout}">Abmelden</a>
+                </li>
             </ul>
         </nav>
     </div>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index b34804b..b1c3142 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="de" xmlns:th="http://www.thymeleaf.org">
+<html lang="de" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
     <title>ETL-Prozessor</title>
@@ -42,7 +42,8 @@
                             <a th:href="@{/report/{id}(id=${request.uuid})}">[[ ${request.uuid} ]]</a>
                         </td>
                         <td><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></td>
-                        <td>[[ ${request.patientId} ]]</td>
+                        <td class="patient-id" sec:authorize="authenticated">[[ ${request.patientId} ]]</td>
+                        <td class="patient-id" sec:authorize="not authenticated">***</td>
                     </tr>
                 </tbody>
             </table>
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
new file mode 100644
index 0000000..018122d
--- /dev/null
+++ b/src/main/resources/templates/login.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="de" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <title>ETL-Prozessor</title>
+    <link rel="stylesheet" th:href="@{/style.css}" />
+</head>
+<body>
+    <div th:replace="~{fragments.html :: nav}"></div>
+    <main>
+        <div class="login-form">
+            <h2 class="centered">Anmelden</h2>
+            <div class="centered notification error" th:if="${param.error}">Anmeldung nicht erfolgreich</div>
+            <div class="centered notification success" th:if="${param.logout}">Sie haben sich abgemeldet</div>
+            <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>
+            </form>
+        </div>
+    </main>
+</body>
+</html>
+\ No newline at end of file
diff --git a/src/main/resources/templates/report.html b/src/main/resources/templates/report.html
index 01accc4..6f89345 100644
--- a/src/main/resources/templates/report.html
+++ b/src/main/resources/templates/report.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="de" xmlns:th="http://www.thymeleaf.org">
+<html lang="de" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8">
     <title>ETL-Prozessor</title>
@@ -31,7 +31,8 @@
                     <td th:style="${request.type.value == 'delete'} ? 'color: red;'"><small>[[ ${request.type} ]]</small></td>
                     <td>[[ ${request.uuid} ]]</td>
                     <td><time th:datetime="${request.processedAt}">[[ ${request.processedAt} ]]</time></td>
-                    <td>[[ ${request.patientId} ]]</td>
+                    <td class="patient-id" sec:authorize="authenticated">[[ ${request.patientId} ]]</td>
+                    <td class="patient-id" sec:authorize="not authenticated">***</td>
                 </tr>
             </tbody>
         </table>
author	Paul-Christian Volkmer	2024-01-11 13:32:37 +0100
committer	GitHub	2024-01-11 13:32:37 +0100
commit	21959c169859728c21c864082e1ff6464ef31c40 (patch)
tree	e5e21d21cba3f6d5845b185bce26a5d80e126b42 /src/main/resources
parent	5579ad14534111db6954b772ccd0ea72a09e4c15 (diff)
parent	8a11e6e85b2b2cb4f860ddca010386cb3f701f9b (diff)