diff options
Diffstat (limited to 'src/main')
| -rw-r--r-- | src/main/kotlin/dev/dnpm/etl/processor/security/UserRole.kt | 3 | ||||
| -rw-r--r-- | src/main/resources/static/style.css | 75 | ||||
| -rw-r--r-- | src/main/resources/templates/configs/userroles.html | 7 | ||||
| -rw-r--r-- | src/main/resources/templates/fragments.html | 24 |
4 files changed, 86 insertions, 23 deletions
diff --git a/src/main/kotlin/dev/dnpm/etl/processor/security/UserRole.kt b/src/main/kotlin/dev/dnpm/etl/processor/security/UserRole.kt index 4de31f5..a1d45c8 100644 --- a/src/main/kotlin/dev/dnpm/etl/processor/security/UserRole.kt +++ b/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> { diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css index 0dd5820..0844e0b 100644 --- a/src/main/resources/static/style.css +++ b/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; diff --git a/src/main/resources/templates/configs/userroles.html b/src/main/resources/templates/configs/userroles.html index 23cc5f2..f5e4586 100644 --- a/src/main/resources/templates/configs/userroles.html +++ b/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> diff --git a/src/main/resources/templates/fragments.html b/src/main/resources/templates/fragments.html index bfa36a2..467a483 100644 --- a/src/main/resources/templates/fragments.html +++ b/src/main/resources/templates/fragments.html @@ -7,10 +7,12 @@ <body> <div th:fragment="nav"> <nav> - <a class="nav-home" th:href="@{/}"> - <img th:src="@{/icon.svg}" alt="Icon" /> - <span>ETL-Processor</span> - </a> + <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> - <span sec:authentication="name">?</span> + <div class="user-icon"> + <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> - - <a th:href="@{/logout}">Abmelden</a> + <a class="btn btn-red" th:href="@{/logout}">Abmelden</a> </li> </ul> </nav> |