From e0966e55c8b5ba97b4880e07d1d08d7382427e98 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Wed, 20 Apr 2022 15:01:13 +0800
Subject: [PATCH 1/3] Fix: Handle disabled auth in user dropdown

---
 src/layouts/Layout.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 293409a0..e7ec16b9 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -38,7 +38,10 @@
                             <font-awesome-icon icon="angle-down" />
                         </div>
                         <ul class="dropdown-menu">
-                            <li><span class="dropdown-item-text">Signed in as <strong>{{ $root.username }}</strong></span></li>
+                            <li>
+                                <span v-if="$root.username != null" class="dropdown-item-text">Signed in as <strong>{{ $root.username }}</strong></span>
+                                <span v-if="$root.username == null" class="dropdown-item-text">Auth Disabled.</span>
+                            </li>
                             <li><hr class="dropdown-divider"></li>
                             <li>
                                 <router-link to="/settings" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">

From a39157628581c84b3c4186674e13a09696f7f64f Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Wed, 20 Apr 2022 15:09:31 +0800
Subject: [PATCH 2/3] Chore: Add translation

---
 src/languages/en.js    | 2 ++
 src/layouts/Layout.vue | 6 ++++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index bd119747..ab73ce35 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -462,4 +462,6 @@ export default {
     "Footer Text": "Footer Text",
     "Show Powered By": "Show Powered By",
     "Domain Names": "Domain Names",
+    signedInDisp: "Signed in as {0}",
+    signedInDispDisabled: "Auth Disabled.",
 };
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index e7ec16b9..2a00924e 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -39,8 +39,10 @@
                         </div>
                         <ul class="dropdown-menu">
                             <li>
-                                <span v-if="$root.username != null" class="dropdown-item-text">Signed in as <strong>{{ $root.username }}</strong></span>
-                                <span v-if="$root.username == null" class="dropdown-item-text">Auth Disabled.</span>
+                                <i18n-t v-if="$root.username != null" tag="span" keypath="signedInDisp" class="dropdown-item-text">
+                                    <strong>{{ $root.username }}</strong>
+                                </i18n-t>
+                                <span v-if="$root.username == null" class="dropdown-item-text">{{ $t("signedInDispDisabled") }}</span>
                             </li>
                             <li><hr class="dropdown-divider"></li>
                             <li>

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 3/3] 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 a72b0727..87bb745a 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 2a00924e..7f9598bf 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 d034337c..c54b573f 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 4f01572e..11d3a1be 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") }}