Add $root.username

This commit is contained in:
Louis Lam 2022-04-19 19:40:28 +08:00
parent 17d4003e5c
commit cb55e23718
3 changed files with 16 additions and 18 deletions

View File

@ -4,7 +4,7 @@
<!-- Change Password --> <!-- Change Password -->
<template v-if="!settings.disableAuth"> <template v-if="!settings.disableAuth">
<p> <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> <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> </p>
@ -269,7 +269,6 @@ export default {
data() { data() {
return { return {
username: "",
invalidPassword: false, invalidPassword: false,
password: { password: {
currentPassword: "", currentPassword: "",
@ -297,10 +296,6 @@ export default {
}, },
}, },
mounted() {
this.loadUsername();
},
methods: { methods: {
savePassword() { savePassword() {
if (this.password.newPassword !== this.password.repeatNewPassword) { 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() { disableAuth() {
this.settings.disableAuth = true; this.settings.disableAuth = true;

View File

@ -34,11 +34,11 @@
<li v-if="$root.loggedIn" class="nav-item"> <li v-if="$root.loggedIn" class="nav-item">
<div class="dropdown dropdown-profile-pic"> <div class="dropdown dropdown-profile-pic">
<div type="button" class="nav-link" data-bs-toggle="dropdown"> <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" /> <font-awesome-icon icon="angle-down" />
</div> </div>
<ul class="dropdown-menu"> <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><hr class="dropdown-divider"></li>
<li> <li>
<router-link to="/settings" class="dropdown-item" :class="{ active: $route.path.includes('settings') }"> <router-link to="/settings" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">

View File

@ -28,6 +28,7 @@ export default {
connectCount: 0, connectCount: 0,
initedSocketIO: false, initedSocketIO: false,
}, },
username: null,
remember: (localStorage.remember !== "0"), 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. 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, loggedIn: false,
@ -102,6 +103,7 @@ export default {
socket.on("autoLogin", (monitorID, data) => { socket.on("autoLogin", (monitorID, data) => {
this.loggedIn = true; this.loggedIn = true;
this.username = "No Auth";
this.storage().token = "autoLogin"; this.storage().token = "autoLogin";
this.allowLoginDialog = false; this.allowLoginDialog = false;
}); });
@ -233,7 +235,6 @@ export default {
if (token !== "autoLogin") { if (token !== "autoLogin") {
this.loginByToken(token); this.loginByToken(token);
} else { } else {
// Timeout if it is not actually auto login // Timeout if it is not actually auto login
setTimeout(() => { setTimeout(() => {
if (! this.loggedIn) { if (! this.loggedIn) {
@ -241,7 +242,6 @@ export default {
this.$root.storage().removeItem("token"); this.$root.storage().removeItem("token");
} }
}, 5000); }, 5000);
} }
} else { } else {
this.allowLoginDialog = true; this.allowLoginDialog = true;
@ -305,6 +305,7 @@ export default {
this.storage().token = res.token; this.storage().token = res.token;
this.socket.token = res.token; this.socket.token = res.token;
this.loggedIn = true; this.loggedIn = true;
this.username = this.getJWTPayload()?.username;
// Trigger Chrome Save Password // Trigger Chrome Save Password
history.pushState({}, ""); history.pushState({}, "");
@ -322,6 +323,7 @@ export default {
this.logout(); this.logout();
} else { } else {
this.loggedIn = true; this.loggedIn = true;
this.username = this.getJWTPayload()?.username;
} }
}); });
}, },
@ -331,6 +333,7 @@ export default {
this.storage().removeItem("token"); this.storage().removeItem("token");
this.socket.token = null; this.socket.token = null;
this.loggedIn = false; this.loggedIn = false;
this.username = null;
this.clearData(); this.clearData();
}, },
@ -398,6 +401,14 @@ export default {
computed: { computed: {
usernameFirstChar() {
if (typeof this.username == "string" && this.username.length >= 1) {
return this.username.charAt(0).toUpperCase();
} else {
return "🐻";
}
},
lastHeartbeatList() { lastHeartbeatList() {
let result = {}; let result = {};