Add $root.username

src/components/settings/Security.vue

@@ -4,7 +4,7 @@
             <!-- Change Password -->
             <template v-if="!settings.disableAuth">
                 <p>
-                    {{ $t("Current User") }}: <strong>{{ username }}</strong>
+                    {{ $t("Current User") }}: <strong>{{ $root.username }}</strong>
                     <button v-if="! settings.disableAuth" id="logout-btn" class="btn btn-danger ms-4 me-2 mb-2" @click="$root.logout">{{ $t("Logout") }}</button>
                 </p>
 
@@ -269,7 +269,6 @@ export default {
 
     data() {
         return {
-            username: "",
             invalidPassword: false,
             password: {
                 currentPassword: "",
@@ -297,10 +296,6 @@ export default {
         },
     },
 
-    mounted() {
-        this.loadUsername();
-    },
-
     methods: {
         savePassword() {
             if (this.password.newPassword !== this.password.repeatNewPassword) {
@@ -319,14 +314,6 @@ export default {
             }
         },
 
-        loadUsername() {
-            const jwtPayload = this.$root.getJWTPayload();
-
-            if (jwtPayload) {
-                this.username = jwtPayload.username;
-            }
-        },
-
         disableAuth() {
             this.settings.disableAuth = true;
 

src/layouts/Layout.vue

@@ -34,11 +34,11 @@
                 <li v-if="$root.loggedIn" class="nav-item">
                     <div class="dropdown dropdown-profile-pic">
                         <div type="button" class="nav-link" data-bs-toggle="dropdown">
-                            <div class="profile-pic">L</div>
+                            <div class="profile-pic">{{ $root.usernameFirstChar }}</div>
                             <font-awesome-icon icon="angle-down" />
                         </div>
                         <ul class="dropdown-menu">
-                            <li><span class="dropdown-item-text">Signed in as <strong>louislamlouislam</strong></span></li>
+                            <li><span class="dropdown-item-text">Signed in as <strong>{{ $root.username }}</strong></span></li>
                             <li><hr class="dropdown-divider"></li>
                             <li>
                                 <router-link to="/settings" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">

src/mixins/socket.js

@@ -28,6 +28,7 @@ export default {
                 connectCount: 0,
                 initedSocketIO: false,
             },
+            username: null,
             remember: (localStorage.remember !== "0"),
             allowLoginDialog: false,        // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
             loggedIn: false,
@@ -102,6 +103,7 @@ export default {
 
             socket.on("autoLogin", (monitorID, data) => {
                 this.loggedIn = true;
+                this.username = "No Auth";
                 this.storage().token = "autoLogin";
                 this.allowLoginDialog = false;
             });
@@ -233,7 +235,6 @@ export default {
                     if (token !== "autoLogin") {
                         this.loginByToken(token);
                     } else {
-
                         // Timeout if it is not actually auto login
                         setTimeout(() => {
                             if (! this.loggedIn) {
@@ -241,7 +242,6 @@ export default {
                                 this.$root.storage().removeItem("token");
                             }
                         }, 5000);
-
                     }
                 } else {
                     this.allowLoginDialog = true;
@@ -305,6 +305,7 @@ export default {
                     this.storage().token = res.token;
                     this.socket.token = res.token;
                     this.loggedIn = true;
+                    this.username = this.getJWTPayload()?.username;
 
                     // Trigger Chrome Save Password
                     history.pushState({}, "");
@@ -322,6 +323,7 @@ export default {
                     this.logout();
                 } else {
                     this.loggedIn = true;
+                    this.username = this.getJWTPayload()?.username;
                 }
             });
         },
@@ -331,6 +333,7 @@ export default {
             this.storage().removeItem("token");
             this.socket.token = null;
             this.loggedIn = false;
+            this.username = null;
             this.clearData();
         },
 
@@ -398,6 +401,14 @@ export default {
 
     computed: {
 
+        usernameFirstChar() {
+            if (typeof this.username == "string" && this.username.length >= 1) {
+                return this.username.charAt(0).toUpperCase();
+            } else {
+                return "🐻";
+            }
+        },
+
         lastHeartbeatList() {
             let result = {};