Make logout button reactive, improve dropdown menu css

This commit is contained in:
Louis Lam 2022-04-20 22:39:07 +08:00
parent a391576285
commit 07c0801ad5
4 changed files with 8 additions and 4 deletions

View File

@ -321,6 +321,8 @@ export default {
// Set it to empty if done // Set it to empty if done
this.saveSettings(() => { this.saveSettings(() => {
this.password.currentPassword = ""; this.password.currentPassword = "";
this.$root.username = null;
this.$root.socket.token = "autoLogin";
}, this.password.currentPassword); }, this.password.currentPassword);
}, },

View File

@ -50,7 +50,7 @@
<font-awesome-icon icon="cog" /> {{ $t("Settings") }} <font-awesome-icon icon="cog" /> {{ $t("Settings") }}
</router-link> </router-link>
</li> </li>
<li v-if="$root.loggedIn && $root.storage().token !== 'autoLogin'"> <li v-if="$root.loggedIn && $root.socket.token !== 'autoLogin'">
<button class="dropdown-item" @click="$root.logout"> <button class="dropdown-item" @click="$root.logout">
<font-awesome-icon icon="sign-out-alt" /> <font-awesome-icon icon="sign-out-alt" />
{{ $t("Logout") }} {{ $t("Logout") }}
@ -235,8 +235,10 @@ main {
.dropdown-menu { .dropdown-menu {
transition: all 0.2s; transition: all 0.2s;
padding-left: 0; padding-left: 0;
padding-bottom: 0;
margin-top: 8px !important; margin-top: 8px !important;
border-radius: 20px; border-radius: 16px;
overflow: hidden;
.dropdown-divider { .dropdown-divider {
margin: 0; margin: 0;

View File

@ -103,8 +103,8 @@ 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.socket.token = "autoLogin";
this.allowLoginDialog = false; this.allowLoginDialog = false;
}); });

View File

@ -18,7 +18,7 @@
</router-link> </router-link>
<!-- Logout Button --> <!-- Logout Button -->
<a v-if="$root.isMobile && $root.loggedIn && $root.storage().token !== 'autoLogin'" class="logout" @click.prevent="$root.logout"> <a v-if="$root.isMobile && $root.loggedIn && $root.socket.token !== 'autoLogin'" class="logout" @click.prevent="$root.logout">
<div class="menu-item"> <div class="menu-item">
<font-awesome-icon icon="sign-out-alt" /> <font-awesome-icon icon="sign-out-alt" />
{{ $t("Logout") }} {{ $t("Logout") }}