feat: add config page for user role assignment

src/main/resources/static/style.css

@@ -202,6 +202,17 @@ form.samplecode-input input:focus-visible {
     background: none;
 }
 
+.userrole-form form {
+    margin: 0;
+    padding: 0;
+
+    border: none;
+    border-radius: 0;
+    background: none;
+
+    text-align: inherit;
+}
+
 .login-form form *,
 .token-form form * {
     padding: 0.5em;
@@ -210,7 +221,8 @@ form.samplecode-input input:focus-visible {
 }
 
 .login-form form hr,
-.token-form form hr {
+.token-form form hr,
+.userrole-form form hr {
     padding: 0;
     width: 100%;
 }
@@ -224,6 +236,14 @@ form.samplecode-input input:focus-visible {
     border: none;
 }
 
+.userrole-form form select {
+    padding: 0.5em;
+    border: none;
+    border-radius: 3px;
+    line-height: 1.2rem;
+    font-size: 0.8rem;
+}
+
 .border {
     padding: 1.5em;
     border: 1px solid var(--table-border);
@@ -527,6 +547,10 @@ input.inline:focus-visible {
     color: var(--bg-green);
 }
 
+.notification.notice {
+    color: var(--bg-yellow);
+}
+
 .notification.error {
     color: var(--bg-red);
 }

src/main/resources/templates/configs.html

@@ -40,6 +40,9 @@
         <section th:insert="~{configs/tokens.html}">
         </section>
 
+        <section th:insert="~{configs/userroles.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>

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

@@ -0,0 +1,39 @@
+<div th:if="${not userRolesEnabled}">
+    <h2><span>⛔</span> Benutzerberechtigungen</h2>
+    <p>Die Verwendung von rollenbasierten Benutzerberechtigungen ist nicht aktiviert.</p>
+</div>
+
+<div id="userroles" th:if="${userRolesEnabled}">
+    <h2><span>✅</span> Benutzerberechtigungen</h2>
+    <div class="border">
+        <div th:if="${userRoles.isEmpty()}">Noch keine Benutzerberechtigungen vorhanden.</div>
+        <table th:if="${not userRoles.isEmpty()}">
+            <thead>
+                <tr>
+                    <th>Benutzername</th>
+                    <th>Rolle</th>
+                    <th></th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr th:each="userRole : ${userRoles}">
+                    <td>[[ ${userRole.username} ]]</td>
+                    <td>
+                        <div class="userrole-form">
+                            <form th:hx-put="@{/configs/userroles/{id}(id=${userRole.id})}" hx-target="#userroles">
+                                <select name="role">
+                                    <option th:selected="${userRole.role.value == 'guest'}" value="GUEST">Gast</option>
+                                    <option th:selected="${userRole.role.value == 'user'}" value="USER">Benutzer</option>
+                                </select>
+                                <button class="btn btn-blue">Übernehmen</button>
+                            </form>
+                        </div>
+                    </td>
+                    <td>
+                        <button class="btn btn-red" th:hx-delete="@{/configs/userroles/{id}(id=${userRole.id})}" hx-target="#userroles">Löschen</button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>

src/main/resources/templates/login.html

@@ -11,6 +11,7 @@
         <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 notice" th:if="${param.expired}">Sitzung abgelaufen oder von einem Administrator beendet.</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="" />