From fd81e17dedada691d92871be2d77794f29a3c250 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Mon, 22 Feb 2021 17:02:39 +0800
Subject: [PATCH] feat(webui): new server management screen with shutdown
 button

closes #416
---
 .../components/dialogs/ServerStopDialog.vue   | 88 +++++++++++++++++++
 komga-webui/src/locales/en.json               | 13 +++
 komga-webui/src/router.ts                     |  8 +-
 komga-webui/src/services/actuator.service.ts  | 14 ++-
 komga-webui/src/views/Settings.vue            |  1 +
 komga-webui/src/views/SettingsServer.vue      | 32 +++++++
 6 files changed, 154 insertions(+), 2 deletions(-)
 create mode 100644 komga-webui/src/components/dialogs/ServerStopDialog.vue
 create mode 100644 komga-webui/src/views/SettingsServer.vue

diff --git a/komga-webui/src/components/dialogs/ServerStopDialog.vue b/komga-webui/src/components/dialogs/ServerStopDialog.vue
new file mode 100644
index 000000000..a7a0b0ee7
--- /dev/null
+++ b/komga-webui/src/components/dialogs/ServerStopDialog.vue
@@ -0,0 +1,88 @@
+<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>
diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
index d5c9a8e52..315e676f4 100644
--- a/komga-webui/src/locales/en.json
+++ b/komga-webui/src/locales/en.json
@@ -313,6 +313,12 @@
       "field_repeat_password": "Repeat new password",
       "field_repeat_password_error": "Passwords must be identical."
     },
+    "server_stop": {
+      "button_cancel": "Cancel",
+      "button_confirm": "Stop",
+      "confirmation_message": "Are you sure you want to stop Komga?",
+      "dialog_title": "Shutdown server"
+    },
     "shortcut_help": {
       "label_description": "Description",
       "label_key": "Key"
@@ -417,6 +423,13 @@
   "searchbox": {
     "no_results": "No results"
   },
+  "server": {
+    "server_management": {
+      "button_shutdown": "Shutdown",
+      "section_title": "Server Management"
+    },
+    "tab_title": "Server"
+  },
   "server_settings": {
     "server_settings": "Server Settings"
   },
diff --git a/komga-webui/src/router.ts b/komga-webui/src/router.ts
index d53433791..a5302a8cb 100644
--- a/komga-webui/src/router.ts
+++ b/komga-webui/src/router.ts
@@ -62,7 +62,13 @@ const router = new Router({
               path: '/settings/analysis',
               name: 'settings-analysis',
               beforeEnter: adminGuard,
-              component: () => import(/* webpackChunkName: "settings-users" */ './views/SettingsMediaAnalysis.vue'),
+              component: () => import(/* webpackChunkName: "settings-analysis" */ './views/SettingsMediaAnalysis.vue'),
+            },
+            {
+              path: '/settings/server',
+              name: 'settings-server',
+              beforeEnter: adminGuard,
+              component: () => import(/* webpackChunkName: "settings-server" */ './views/SettingsServer.vue'),
             },
           ],
         },
diff --git a/komga-webui/src/services/actuator.service.ts b/komga-webui/src/services/actuator.service.ts
index f8232fe3d..0578b78da 100644
--- a/komga-webui/src/services/actuator.service.ts
+++ b/komga-webui/src/services/actuator.service.ts
@@ -1,4 +1,4 @@
-import { AxiosInstance } from 'axios'
+import {AxiosInstance} from 'axios'
 
 const API_ACTUATOR = '/actuator'
 
@@ -20,4 +20,16 @@ export default class ActuatorService {
       throw new Error(msg)
     }
   }
+
+  async shutdown () {
+    try {
+      await this.http.post(`${API_ACTUATOR}/shutdown`)
+    } catch (e) {
+      let msg = 'An error occurred while trying to shutdown server'
+      if (e.response.data.message) {
+        msg += `: ${e.response.data.message}`
+      }
+      throw new Error(msg)
+    }
+  }
 }
diff --git a/komga-webui/src/views/Settings.vue b/komga-webui/src/views/Settings.vue
index 674a75c1d..b7bb84ad4 100644
--- a/komga-webui/src/views/Settings.vue
+++ b/komga-webui/src/views/Settings.vue
@@ -3,6 +3,7 @@
     <v-tabs>
       <v-tab :to="{name: 'settings-analysis'}">{{ $t('media_analysis.media_analysis') }}</v-tab>
       <v-tab :to="{name: 'settings-users'}">{{ $t('users.users') }}</v-tab>
+      <v-tab :to="{name: 'settings-server'}">{{ $t('server.tab_title') }}</v-tab>
     </v-tabs>
     <router-view/>
   </div>
diff --git a/komga-webui/src/views/SettingsServer.vue b/komga-webui/src/views/SettingsServer.vue
new file mode 100644
index 000000000..90b6f9a77
--- /dev/null
+++ b/komga-webui/src/views/SettingsServer.vue
@@ -0,0 +1,32 @@
+<template>
+  <v-container fluid class="pa-6">
+    <v-row>
+      <v-col><span class="text-h5">{{ $t('server.server_management.section_title') }}</span></v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <v-btn @click="modalStopServer = true"
+               color="error"
+        >{{ $t('server.server_management.button_shutdown') }}</v-btn>
+      </v-col>
+    </v-row>
+    <server-stop-dialog v-model="modalStopServer"></server-stop-dialog>
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import ServerStopDialog from "@/components/dialogs/ServerStopDialog.vue";
+
+export default Vue.extend({
+  name: 'SettingsServer',
+  components: {ServerStopDialog},
+  data: () => ({
+    modalStopServer: false,
+  }),
+})
+</script>
+
+<style scoped>
+
+</style>