Merge pull request #1524 from chakflying/fix/disable-auth-icon

Fix: Handle disabled auth in user dropdown

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);
         },
 

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.",
 };

src/layouts/Layout.vue

@@ -38,14 +38,19 @@
                             <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>
+                                <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>
                                 <router-link to="/settings" class="dropdown-item" :class="{ active: $route.path.includes('settings') }">
                                     <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") }}
@@ -230,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;

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;
             });
 

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") }}