Update:Add switch server/user button in side drawer and change button text on account page. Update logout to disconnect #628

components/app/SideDrawer.vue

@@ -11,7 +11,11 @@
 
       <div class="w-full overflow-y-auto">
         <template v-for="item in navItems">
-          <nuxt-link :to="item.to" :key="item.text" class="w-full hover:bg-bg hover:bg-opacity-60 flex items-center py-3 px-6 text-gray-300" :class="currentRoutePath.startsWith(item.to) ? 'bg-bg bg-opacity-60' : ''">
+          <button v-if="item.action" :key="item.text" class="w-full hover:bg-bg hover:bg-opacity-60 flex items-center py-3 px-6 text-gray-300" @click="clickAction(item.action)">
+            <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
+            <p class="pl-4">{{ item.text }}</p>
+          </button>
+          <nuxt-link v-else :to="item.to" :key="item.text" class="w-full hover:bg-bg hover:bg-opacity-60 flex items-center py-3 px-6 text-gray-300" :class="currentRoutePath.startsWith(item.to) ? 'bg-bg bg-opacity-60' : ''">
             <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
             <p class="pl-4">{{ item.text }}</p>
           </nuxt-link>
@@ -24,9 +28,9 @@
         <div class="flex items-center">
           <p class="text-xs">{{ $config.version }}</p>
           <div class="flex-grow" />
-          <div v-if="user" class="flex items-center" @click="logout">
+          <div v-if="user" class="flex items-center" @click="disconnect">
-            <p class="text-xs pr-2">Logout</p>
+            <p class="text-xs pr-2">Disconnect</p>
-            <span class="material-icons text-sm">logout</span>
+            <i class="material-icons text-sm -mb-0.5">cloud_off</i>
           </div>
         </div>
       </div>
@@ -126,6 +130,15 @@ export default {
         text: 'Settings',
         to: '/settings'
       })
+
+      if (this.serverConnectionConfig) {
+        items.push({
+          icon: 'login',
+          text: 'Switch Server/User',
+          action: 'logout'
+        })
+      }
+
       return items
     },
     currentRoutePath() {
@@ -133,11 +146,17 @@ export default {
     }
   },
   methods: {
+    async clickAction(action) {
+      await this.$hapticsImpact()
+      if (action === 'logout') {
+        await this.logout()
+        this.$router.push('/connect')
+      }
+    },
     clickBackground() {
       this.show = false
     },
     async logout() {
-      await this.$hapticsImpact()
       if (this.user) {
         await this.$nativeHttp.post('/logout').catch((error) => {
           console.error('Failed to logout', error)
@@ -148,7 +167,17 @@ export default {
       await this.$db.logout()
       this.$localStore.removeLastLibraryId()
       this.$store.commit('user/logout')
-      this.$router.push('/connect')
+      this.$store.commit('libraries/setCurrentLibrary', null)
+    },
+    async disconnect() {
+      await this.$hapticsImpact()
+      await this.logout()
+
+      if (this.$route.name !== 'bookshelf') {
+        this.$router.replace('/bookshelf')
+      } else {
+        location.reload()
+      }
     },
     touchstart(e) {
       this.touchEvent = new TouchEvent(e)

components/bookshelf/LazyBookshelf.vue

@@ -332,6 +332,12 @@ export default {
     },
     async init() {
       if (this.isFirstInit) return
+      if (!this.user) {
+        // Offline support not available
+        await this.resetEntities()
+        this.$eventBus.$emit('bookshelf-total-entities', 0)
+        return
+      }
 
       this.localLibraryItems = await this.$db.getLocalLibraryItems(this.currentLibraryMediaType)
       console.log('Local library items loaded for lazy bookshelf', this.localLibraryItems.length)

pages/account.vue

@@ -4,7 +4,7 @@
 
     <ui-text-input-with-label :value="username" label="Username" disabled class="my-2" />
 
-    <ui-btn color="primary flex items-center justify-between gap-2 ml-auto text-base mt-8" @click="logout">Logout<span class="material-icons" style="font-size: 1.1rem">logout</span></ui-btn>
+    <ui-btn color="primary flex items-center justify-between gap-2 ml-auto text-base mt-8" @click="logout">Switch Server/User<span class="material-icons" style="font-size: 1.1rem">logout</span></ui-btn>
 
     <div class="flex justify-end items-center m-4 gap-3 right-0 bottom-0 absolute">
       <p class="text-smtext-yellow-400 text-right">Report bugs, request features, provide feedback, and contribute on <a class="underline" href="https://github.com/advplyr/audiobookshelf-app" target="_blank">GitHub</a></p>
@@ -58,6 +58,7 @@ export default {
       await this.$db.logout()
       this.$localStore.removeLastLibraryId()
       this.$store.commit('user/logout')
+      this.$store.commit('libraries/setCurrentLibrary', null)
       this.$router.push('/connect')
     }
   },

pages/bookshelf/authors.vue

@@ -26,6 +26,9 @@ export default {
   },
   methods: {
     async init() {
+      if (!this.currentLibraryId) {
+        return
+      }
       this.loadedLibraryId = this.currentLibraryId
       this.authors = await this.$axios
         .$get(`/api/libraries/${this.currentLibraryId}/authors`)