From 07c0801ad526b3f40480b0be10418e1274b5a312 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Wed, 20 Apr 2022 22:39:07 +0800
Subject: [PATCH] Make logout button reactive, improve dropdown menu css

---
 src/components/settings/Security.vue | 2 ++
 src/layouts/Layout.vue               | 6 ++++--
 src/mixins/socket.js                 | 2 +-
 src/pages/Settings.vue               | 2 +-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/settings/Security.vue b/src/components/settings/Security.vue
index a72b07274..87bb745a1 100644
--- a/src/components/settings/Security.vue
+++ b/src/components/settings/Security.vue
@@ -321,6 +321,8 @@ export default {
             // Set it to empty if done
             this.saveSettings(() => {
                 this.password.currentPassword = "";
+                this.$root.username = null;
+                this.$root.socket.token = "autoLogin";
             }, this.password.currentPassword);
         },
 
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 2a00924e2..7f9598bfb 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -50,7 +50,7 @@
                                     <font-awesome-icon icon="cog" /> {{ $t("Settings") }}
                                 </router-link>
                             </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">
                                     <font-awesome-icon icon="sign-out-alt" />
                                     {{ $t("Logout") }}
@@ -235,8 +235,10 @@ main {
     .dropdown-menu {
         transition: all 0.2s;
         padding-left: 0;
+        padding-bottom: 0;
         margin-top: 8px !important;
-        border-radius: 20px;
+        border-radius: 16px;
+        overflow: hidden;
 
         .dropdown-divider {
             margin: 0;
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index d034337c3..c54b573f3 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -103,8 +103,8 @@ export default {
 
             socket.on("autoLogin", (monitorID, data) => {
                 this.loggedIn = true;
-                this.username = "No Auth";
                 this.storage().token = "autoLogin";
+                this.socket.token = "autoLogin";
                 this.allowLoginDialog = false;
             });
 
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 4f01572e8..11d3a1be3 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -18,7 +18,7 @@
                     </router-link>
 
                     <!-- 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">
                             <font-awesome-icon icon="sign-out-alt" />
                             {{ $t("Logout") }}