Merge pull request #50 from CCC-MF/issue_49

Administrative Rechte für OIDC-Benutzer

src/main/kotlin/dev/dnpm/etl/processor/security/UserRole.kt

@@ -34,7 +34,8 @@ data class UserRole(
 
 enum class Role(val value: String) {
     GUEST("guest"),
-    USER("user")
+    USER("user"),
+    ADMIN("admin")
 }
 
 interface UserRoleRepository : CrudRepository<UserRole, Long> {

src/main/resources/static/style.css

@@ -40,7 +40,7 @@ body {
 
 nav {
     margin: 0 auto;
-    padding: 2em 0;
+    padding: 1em 0;
 
     line-height: 1.5rem;
     max-width: 1140px;
@@ -48,18 +48,18 @@ nav {
     border-bottom: 1px solid var(--table-border);
 }
 
-nav > a.nav-home {
+nav a.nav-home {
     float: left;
 
     color: var(--text);
     line-height: 1.5em;
     text-decoration: none;
 
-    font-size: 1.5em;
+    font-size: 2em;
     font-weight: bold;
 }
 
-nav > a.nav-home > img {
+nav a.nav-home > img {
     width: 1.5em;
     vertical-align: middle;
 }
@@ -80,6 +80,57 @@ nav > ul > li.login {
     margin: 0 0 0 1em;
     padding: 0 0 0 2em;
     border-left: 1px solid var(--table-border);
+    line-height: 3.5em;
+}
+
+nav > ul > li.login a {
+    text-decoration: none;
+    text-transform: none;
+    padding: 1em;
+}
+
+nav .login .user-name {
+    font-weight: bold;
+}
+
+nav > ul > li.login > span {
+    display: inline-block;
+    margin: 0 .5em;
+}
+
+nav > ul > li.login .user-icon {
+    flex-direction: column;
+    display: inline flex;
+    vertical-align: middle;
+    inline-size: 4em;
+}
+
+nav > ul > li.login .user-icon img {
+    margin: 0 0 -1em 0;
+    width: 80%;
+    align-self: center;
+}
+
+nav > ul > li.login .user-icon span {
+    padding: 0 .6em;
+    color: white;
+    font-size: .8em;
+    font-weight: bold;
+    border-radius: 4px;
+    line-height: normal;
+    text-align: center;
+}
+
+nav > ul > li.login .user-icon span.guest {
+    background: darkslategray;
+}
+
+nav > ul > li.login .user-icon span.user {
+    background: darkgreen;
+}
+
+nav > ul > li.login .user-icon span.admin {
+    background: darkred;
 }
 
 nav li a {
@@ -89,10 +140,6 @@ nav li a {
     font-weight: 700;
 }
 
-nav li.login a {
-    color: var(--bg-red);
-}
-
 nav li a:hover {
     text-decoration: underline;
 }
@@ -449,7 +496,7 @@ td.clipboard.clipped {
 }
 
 .btn.btn-red:hover, .btn.btn-red:active {
-    background: darkred !important;
+    background: darkred;
 }
 
 .btn.btn-blue {
@@ -458,7 +505,7 @@ td.clipboard.clipped {
 }
 
 .btn.btn-blue:hover, .btn.btn-blue:active {
-    background: darkslategray !important;
+    background: darkslategray;
 }
 
 .btn.btn-delete:before {
@@ -466,6 +513,14 @@ td.clipboard.clipped {
     padding: .2rem;
 }
 
+button:disabled,
+.btn:disabled {
+    background: slategray !important;
+    color: lightgray;
+    filter: none;
+    cursor: default;
+}
+
 input.inline {
     border: none;
     font-size: 1.1rem;

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

@@ -21,16 +21,17 @@
                     <td>
                         <div class="userrole-form">
                             <form th:hx-put="@{/configs/userroles/{id}(id=${userRole.id})}" hx-target="#userroles">
-                                <select name="role">
+                                <select name="role" th:disabled="${#authorization.authentication.getName() == userRole.username}">
                                     <option th:selected="${userRole.role.value == 'guest'}" value="GUEST">Gast</option>
                                     <option th:selected="${userRole.role.value == 'user'}" value="USER">Benutzer</option>
+                                    <option th:selected="${userRole.role.value == 'admin'}" value="ADMIN">Administrator</option>
                                 </select>
-                                <button class="btn btn-blue">Übernehmen</button>
+                                <button class="btn btn-blue" th:disabled="${#authorization.authentication.getName() == userRole.username}">Ü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>
+                        <button class="btn btn-red" th:hx-delete="@{/configs/userroles/{id}(id=${userRole.id})}" hx-target="#userroles" th:disabled="${#authorization.authentication.getName() == userRole.username}">Löschen</button>
                     </td>
                 </tr>
             </tbody>

src/main/resources/templates/fragments.html

@@ -7,10 +7,12 @@
 <body>
     <div th:fragment="nav">
         <nav>
+            <span>
                 <a class="nav-home" th:href="@{/}">
                     <img th:src="@{/icon.svg}" alt="Icon" />
                     <span>ETL-Processor</span>
                 </a>
+            </span>
             <ul>
                 <li><a th:href="@{/}">Übersicht</a></li>
                 <li><a th:href="@{/statistics}">Statistiken</a></li>
@@ -18,15 +20,19 @@
                     <a th:href="@{/configs}">Konfiguration</a>
                 </li>
                 <li class="login" sec:authorize="not isAuthenticated()">
-                    <a th:href="@{/login}">Login</a>
+                    <a class="btn btn-blue" th:href="@{/login}">Login</a>
                 </li>
                 <li class="login" sec:authorize="isAuthenticated()">
                     <span>
-                        <span>👤</span>
+                        <div class="user-icon">
-                        <span sec:authentication="name">?</span>
+                            <img th:src="@{user.svg}" alt="User-Image">
+                            <span sec:authorize="hasRole('ADMIN')" class="user-role admin">Admin</span>
+                            <span sec:authorize="hasRole('USER')" class="user-role user">User</span>
+                            <span sec:authorize="hasRole('GUEST')" class="user-role guest">Guest</span>
+                        </div>
+                        <span class="user-name" sec:authentication="name">?</span>
                     </span>
-                    &nbsp;
+                    <a class="btn btn-red" th:href="@{/logout}">Abmelden</a>
-                    <a th:href="@{/logout}">Abmelden</a>
                 </li>
             </ul>
         </nav>