perf : Add shutdown confirmation modal + moved to NavbarActions (#655) @Larsluph

src/components/Modals/ConfirmShutdownModal.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-dialog v-model="dialog" scrollable max-width="750px" :content-class="isPhone ? 'rounded-0' : 'rounded-form'" :fullscreen="isPhone">
+    <v-card>
+      <v-card-title class="pa-0">
+        <v-toolbar-title class="ma-4 primarytext--text">
+          <h3>{{ $t('modals.shutdown.title') }}</h3>
+        </v-toolbar-title>
+      </v-card-title>
+      <v-card-text>
+        <v-container>
+          <v-row>
+            <v-col>
+              <span>{{ $t('modals.shutdown.content') }}</span>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card-text>
+      <v-divider />
+      <v-card-actions class="justify-end">
+        <v-spacer />
+        <v-btn class="accent white--text elevation-0 px-4" @click="shutdownApplication">
+          {{ $t('yes') }}
+        </v-btn>
+        <v-btn class="error white--text elevation-0 px-4" @click="close">
+          {{ $t('no') }}
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+import Modal from "../../mixins/Modal";
+import {FullScreenModal} from "@/mixins";
+import qbit from "@/services/qbit";
+
+export default defineComponent({
+  name: 'ConfirmShutdownModal',
+  mixins: [Modal, FullScreenModal],
+  methods: {
+    close() {
+      this.dialog = false
+    },
+    async shutdownApplication() {
+      if (!await qbit.shutdownApp()) {
+        this.$toast.error(this.$t('toast.shutdownError').toString())
+      }
+      else {
+        this.$store.state.authenticated = false
+        await this.$router.push({name: 'login'})
+        this.$toast.success(this.$t("toast.shutdownSuccess").toString())
+      }
+
+      this.close()
+    }
+  }
+})
+</script>

src/components/Navbar/NavbarActions.vue

@@ -39,25 +39,40 @@
         <span>{{ theme }}</span>
       </v-tooltip>
     </v-col>
+    <v-col>
+      <v-tooltip top>
+        <template #activator="{ on }">
+          <v-btn text tile block v-on="on" @click="createModal('ConfirmShutdownModal')">
+            <v-icon :class="commonStyle">
+              {{ mdiPower }}
+            </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ $t('shutdownApp') }}</span>
+      </v-tooltip>
+    </v-col>
   </v-row>
 </template>
 
 <script>
 import qbit from '@/services/qbit'
 import { mapGetters, mapState } from 'vuex'
-import { mdiBrightness4, mdiSpeedometerSlow, mdiBrightness7, mdiSpeedometer, mdiExitToApp, mdiBell, mdiBellOff } from '@mdi/js'
+import { mdiBrightness4, mdiSpeedometerSlow, mdiBrightness7, mdiSpeedometer, mdiPower, mdiExitToApp, mdiBell, mdiBellOff } from '@mdi/js'
 import ConnectionStatus from './ConnectionStatus.vue'
+import {General} from "@/mixins"
 
 export default {
   name: 'BottomActions',
   components: {
     ConnectionStatus
   },
+  mixins: [General],
   data: () => ({
     commonStyle: 'white--text',
     mdiBrightness4,
     mdiBrightness7,
     mdiSpeedometer,
+    mdiPower,
     mdiExitToApp,
     mdiSpeedometerSlow,
     mdiBell,
@@ -65,16 +80,13 @@ export default {
   }),
   computed: {
     ...mapState(['webuiSettings']),
-    ...mapGetters(['isDarkMode', 'getWebuiSettings', 'getStatus', 'getAlarm']),
+    ...mapGetters(['isDarkMode', 'getWebuiSettings', 'getStatus']),
     webuiSettings() {
       return this.getWebuiSettings()
     },
     theme() {
       return this.isDarkMode() ? this.$t('navbar.action.dark') : this.$t('navbar.action.light')
     },
-    alarm() {
-      return this.getAlarm()
-    },
     status() {
       return this.getStatus()
     },

src/components/Navbar/TopActions.vue

@@ -70,16 +70,6 @@
       </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>
 
@@ -132,16 +122,6 @@ 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

@@ -26,6 +26,7 @@
   "errored": "Errored",
   "login": "Login in",
   "logout": "Log out",
+  "shutdownApp": "Shutdown Application",
   "download": "Download",
   "downloaded": "Downloaded",
   "upload": "Upload",
@@ -46,6 +47,8 @@
   "rule": "Rule",
   "then": "Then",
   "of": "of",
+  "yes": "yes",
+  "no": "no",
   "dashboard": {
     "tooltips": {
       "toggleSearch": "Toggle Search Filter",
@@ -87,8 +90,7 @@
       "removeSelected": "Remove selected torrents",
       "openSettings": "Open settings",
       "searchNew": "Search new torrent",
-      "rssArticles":  "View RSS feed articles",
-      "shutdownApp": "Shutdown Application"
+      "rssArticles":  "View RSS feed articles"
     },
     "sessionStats": {
       "tooltip": "Since the last time qBittorrent was restarted"
@@ -467,6 +469,10 @@
     },
     "delete": {
       "check": "Also delete files from storage"
+    },
+    "shutdown": {
+      "title": "Shutdown qBittorrent",
+      "content": "Do you really want to shutdown qBittorrent?"
     }
   },
   "toast": {

src/lang/fr.json

@@ -26,6 +26,7 @@
   "errored": "Erreur",
   "login": "Se Connecter",
   "logout": "Se Déconnecter",
+  "shutdownApp": "Eteindre l'Appli",
   "download": "Téléchargement",
   "downloaded": "Téléchargé",
   "upload": "Téléversement",
@@ -43,6 +44,8 @@
   "feed": "Flux",
   "rule": "Règles",
   "then": "Alors",
+  "yes": "oui",
+  "no": "non",
   "dashboard": {
     "tooltips": {
       "toggleSearch": "Rechercher un torrent",
@@ -455,6 +458,10 @@
     },
     "delete": {
       "check": "Supprimer également les fichiers du disque"
+    },
+    "shutdown": {
+      "title": "Eteindre qBittorrent",
+      "content": "Voulez-vous vraiment éteindre qBittorrent ?"
     }
   },
   "toast": {