refactor(webui): use confirmation-dialog for server stop

komga-webui/src/components/dialogs/ServerStopDialog.vue

@@ -1,88 +0,0 @@
-<template>
-  <div>
-    <v-dialog v-model="modal"
-              max-width="450"
-    >
-      <v-card>
-        <v-card-title>{{ $t('dialog.server_stop.dialog_title') }}</v-card-title>
-
-        <v-card-text>
-          <v-container fluid>
-            <v-row>
-              <v-col>{{ $t('dialog.server_stop.confirmation_message') }}</v-col>
-            </v-row>
-          </v-container>
-        </v-card-text>
-
-        <v-card-actions>
-          <v-spacer/>
-          <v-btn text @click="dialogCancel">{{ $t('dialog.server_stop.button_cancel') }}</v-btn>
-          <v-btn text color="error" @click="dialogConfirm">{{ $t('dialog.server_stop.button_confirm') }}</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <v-snackbar
-      v-model="snackbar"
-      bottom
-      color="error"
-    >
-      {{ snackText }}
-      <v-btn
-        text
-        @click="snackbar = false"
-      >{{ $t('common.close') }}
-      </v-btn>
-    </v-snackbar>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-
-export default Vue.extend({
-  name: 'CollectionDeleteDialog',
-  data: () => {
-    return {
-      snackbar: false,
-      snackText: '',
-      modal: false,
-    }
-  },
-  props: {
-    value: Boolean,
-  },
-  watch: {
-    value(val) {
-      this.modal = val
-    },
-    modal(val) {
-      !val && this.dialogCancel()
-    },
-  },
-  methods: {
-    dialogCancel() {
-      this.$emit('input', false)
-    },
-    dialogConfirm() {
-      this.stopServer()
-      this.$emit('input', false)
-    },
-    showSnack(message: string) {
-      this.snackText = message
-      this.snackbar = true
-    },
-    async stopServer() {
-      try {
-        await this.$actuator.shutdown()
-      } catch (e) {
-        this.showSnack(e.message)
-      }
-    },
-  },
-})
-</script>
-
-<style scoped>
-
-</style>

komga-webui/src/views/SettingsServer.vue

@@ -10,20 +10,55 @@
         >{{ $t('server.server_management.button_shutdown') }}</v-btn>
       </v-col>
     </v-row>
-    <server-stop-dialog v-model="modalStopServer"></server-stop-dialog>
+
+    <confirmation-dialog
+      v-model="modalStopServer"
+      :title="$t('dialog.server_stop.dialog_title')"
+      :body="$t('dialog.server_stop.confirmation_message')"
+      :button-confirm="$t('dialog.server_stop.button_confirm')"
+      button-confirm-color="error"
+    />
+
+    <v-snackbar
+      v-model="snackbar"
+      bottom
+      color="error"
+    >
+      {{ snackText }}
+      <v-btn
+        text
+        @click="snackbar = false"
+      >{{ $t('common.close') }}
+      </v-btn>
+    </v-snackbar>
   </v-container>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
-import ServerStopDialog from "@/components/dialogs/ServerStopDialog.vue";
+import ConfirmationDialog from "@/components/dialogs/ConfirmationDialog.vue";
 
 export default Vue.extend({
   name: 'SettingsServer',
-  components: {ServerStopDialog},
+  components: {ConfirmationDialog},
   data: () => ({
     modalStopServer: false,
+    snackbar: false,
+    snackText: '',
   }),
+  methods: {
+    showSnack(message: string) {
+      this.snackText = message
+      this.snackbar = true
+    },
+    async stopServer() {
+      try {
+        await this.$actuator.shutdown()
+      } catch (e) {
+        this.showSnack(e.message)
+      }
+    },
+  },
 })
 </script>