Show logged in username and hide logout when not logged in

spring-boot-admin-server-ui/src/main/frontend/assets/css/base.scss

@@ -53,13 +53,8 @@ body {
   border-color: transparent;
 }
 
-//navbar color fixes
-.navbar-item .button.is-icon {
-  color: $navbar-item-color;
-  &:hover {
-    color: $navbar-item-hover-color;
-  }
-
+.navbar-link::after {
+  border-color: currentColor;
 }
 
 .navbar .badge {

spring-boot-admin-server-ui/src/main/frontend/index.html

@@ -32,7 +32,8 @@
 
 <script th:inline="javascript">
     var SBA = {
-        uiSettings: /*[[${uiSettings}]]*/ {}
+        uiSettings: /*[[${uiSettings}]]*/ {},
+        user: /*[[${user}]]*/ null
     }
 </script>
 <script lang="javascript" src="assets/js/vendors.js" defer></script>

spring-boot-admin-server-ui/src/main/frontend/utils/fontawesome.js

@@ -20,6 +20,8 @@ import faGitter from '@fortawesome/fontawesome-free-brands/faGitter';
 import faStackOverflow from '@fortawesome/fontawesome-free-brands/faStackOverflow';
 import farTimesCircle from '@fortawesome/fontawesome-free-regular/faTimesCircle';
 import faBan from '@fortawesome/fontawesome-free-solid/faBan';
+import faBell from '@fortawesome/fontawesome-free-solid/faBell';
+import faBellSlash from '@fortawesome/fontawesome-free-solid/faBellSlash';
 import faBook from '@fortawesome/fontawesome-free-solid/faBook';
 import faCheck from '@fortawesome/fontawesome-free-solid/faCheck';
 import faDownload from '@fortawesome/fontawesome-free-solid/faDownload';
@@ -33,13 +35,12 @@ import faStepBackward from '@fortawesome/fontawesome-free-solid/faStepBackward';
 import faStepForward from '@fortawesome/fontawesome-free-solid/faStepForward';
 import faTimesCircle from '@fortawesome/fontawesome-free-solid/faTimesCircle';
 import faTrash from '@fortawesome/fontawesome-free-solid/faTrash';
-import faBell from '@fortawesome/fontawesome-free-solid/faBell';
-import faBellSlash from '@fortawesome/fontawesome-free-solid/faBellSlash';
+import faUserCircle from '@fortawesome/fontawesome-free-solid/faUserCircle';
 import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
 
 //solid
 fontawesome.library.add(faTrash, faDownload, faStepForward, faStepBackward, faCheck, faQuestionCircle, faBan, faTimesCircle, faMinusCircle, faExclamation,
-  faBook, faSignOutAlt, faExclamationTriangle, faPencilAlt, faBell, faBellSlash);
+  faBook, faSignOutAlt, faExclamationTriangle, faPencilAlt, faBell, faBellSlash, faUserCircle);
 //regular
 fontawesome.library.add(farTimesCircle);
 //brands

spring-boot-admin-server-ui/src/main/frontend/views/shell/navbar.vue

@@ -33,12 +33,19 @@
             <component :is="view.handle" :applications="applications" :error="error"/>
           </router-link>
 
-          <div class="navbar-item">
-            <form action="logout" method="post">
-              <button class="button is-icon" type="submit" value="logout">
-                Logout&nbsp;<font-awesome-icon icon="sign-out-alt" size="lg"/>
-              </button>
-            </form>
+          <div class="navbar-item has-dropdown is-hoverable" v-if="userName">
+            <a class="navbar-link">
+              <font-awesome-icon icon="user-circle" size="lg"/>&nbsp;<span v-text="userName"/>
+            </a>
+            <div class="navbar-dropdown">
+              <a class="navbar-item">
+                <form action="logout" method="post">
+                  <button class="button is-icon" type="submit" value="logout">
+                    <font-awesome-icon icon="sign-out-alt"/>&nbsp;Log out
+                  </button>
+                </form>
+              </a>
+            </div>
           </div>
         </div>
       </div>
@@ -50,7 +57,8 @@
   export default {
     data: () => ({
       showMenu: false,
-      brand: '<img src="assets/img/icon-spring-boot-admin.svg"><span>Spring Boot Admin</span>'
+      brand: '<img src="assets/img/icon-spring-boot-admin.svg"><span>Spring Boot Admin</span>',
+      userName: null
     }),
     props: {
       views: {
@@ -68,8 +76,14 @@
     },
     created() {
       /* global SBA */
-      if (SBA && SBA.uiSettings) {
-        this.brand = SBA.uiSettings.brand || this.brand;
+      if (SBA) {
+        if (SBA.uiSettings) {
+          this.brand = SBA.uiSettings.brand || this.brand;
+        }
+
+        if (SBA.user) {
+          this.userName = SBA.user.name;
+        }
       }
     },
     mounted() {

spring-boot-admin-server-ui/src/main/java/de/codecentric/boot/admin/server/ui/web/UiController.java

@@ -18,6 +18,7 @@ package de.codecentric.boot.admin.server.ui.web;
 
 import de.codecentric.boot.admin.server.web.AdminController;
 
+import java.security.Principal;
 import java.util.HashMap;
 import java.util.Map;
 import org.springframework.http.MediaType;
@@ -46,6 +47,11 @@ public class UiController {
         return uiSettings;
     }
 
+    @ModelAttribute(value = "user", binding = false)
+    public Principal getUiSettings(Principal principal) {
+        return principal;
+    }
+
     @GetMapping(path = "/", produces = MediaType.TEXT_HTML_VALUE)
     public String index() {
         return "index";