feat: Add shutdown button in TopActions (#633) @Larsluph

src/components/Navbar/TopActions.vue

@@ -70,6 +70,16 @@
       </template>
       <span>{{ $t('navbar.topActions.openSettings') }}</span>
     </v-tooltip>
+    <v-tooltip bottom open-delay="400">
+      <template #activator="{ on }">
+        <v-btn :text="!mobile" small fab color="grey--text" class="mr-0 ml-0" :aria-label="$t('navbar.topActions.shutdownApp')" v-on="on" @click="shutdownApplication">
+          <v-icon color="grey">
+            {{ mdiPower }}
+          </v-icon>
+        </v-btn>
+      </template>
+      <span>{{ $t('navbar.topActions.shutdownApp') }}</span>
+    </v-tooltip>
   </div>
 </template>
 
@@ -77,7 +87,7 @@
 import { General } from '@/mixins'
 import { mapState } from 'vuex'
 import qbit from '@/services/qbit'
-import { mdiSort, mdiCog, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiSearchWeb, mdiDelete, mdiPlus, mdiPlay, mdiPause, mdiRss } from '@mdi/js'
+import { mdiSort, mdiCog, mdiCheckboxBlankOutline, mdiCheckboxMarked, mdiSearchWeb, mdiDelete, mdiPlus, mdiPlay, mdiPause, mdiRss, mdiPower } from '@mdi/js'
 
 export default {
   name: 'TopActions',
@@ -86,16 +96,17 @@ export default {
   data() {
     return {
       fab: false,
-      mdiSort,
-      mdiPlus,
-      mdiSearchWeb,
-      mdiRss,
-      mdiPlay,
-      mdiPause,
-      mdiDelete,
-      mdiCog,
+      mdiCheckboxBlankOutline,
       mdiCheckboxMarked,
-      mdiCheckboxBlankOutline
+      mdiCog,
+      mdiDelete,
+      mdiPause,
+      mdiPlay,
+      mdiPlus,
+      mdiPower,
+      mdiRss,
+      mdiSearchWeb,
+      mdiSort
     }
   },
   computed: {
@@ -121,6 +132,16 @@ export default {
     },
     goToSettings() {
       if (this.$route.name !== 'settings') this.$router.push({ name: 'settings' })
+    },
+    async shutdownApplication() {
+      if (!await qbit.shutdownApp()) {
+        this.$toast.error(this.$t('toast.shutdownError').toString())
+        return
+      }
+
+      this.$store.state.authenticated = false
+      await this.$router.push({name: 'login'})
+      this.$toast.success(this.$t("toast.shutdownSuccess").toString())
     }
   }
 }

src/lang/en.json

@@ -87,7 +87,8 @@
       "removeSelected": "Remove selected torrents",
       "openSettings": "Open settings",
       "searchNew": "Search new torrent",
-      "rssArticles": "View RSS feed articles"
+      "rssArticles":  "View RSS feed articles",
+      "shutdownApp": "Shutdown Application"
     },
     "sessionStats": {
       "tooltip": "Since the last time qBittorrent was restarted"
@@ -480,7 +481,9 @@
     "copySuccess": "Text copied!",
     "copyNotSupported": "Unable to copy, clipboard API unavailable on this browser",
     "pasteSuccess": "Text pasted!",
-    "pasteNotSupported": "Unable to paste, clipboard API unavailable on this browser"
+    "pasteNotSupported": "Unable to paste, clipboard API unavailable on this browser",
+    "shutdownSuccess": "qBittorrent was shutdown successfully!",
+    "shutdownError": "Unable to shutdown app. Make sure qBittorrent is running!"
   },
   "rightClick": {
     "resume": "resume",

src/services/qbit.ts

@@ -498,6 +498,12 @@ export class QBitApi {
       offset
     })
   }
+
+  async shutdownApp(): Promise<boolean> {
+    return this.axios.post("/app/shutdown")
+    .then(() => true)
+    .catch(() => false)
+  }
 }
 
 export const Qbit = new QBitApi()