Ask for confirmation when stopping an app

dashboard/src/views/AppConfigureView.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import { ref, onMounted, onBeforeUnmount, computed, useTemplateRef } from 'vue';
-import { Button, ButtonGroup, SingleSelect } from 'pankow';
+import { Button, ButtonGroup, SingleSelect, InputDialog } from 'pankow';
 import PostInstallDialog from '../components/PostInstallDialog.vue';
 import SftpInfoDialog from '../components/SftpInfoDialog.vue';
 import Access from '../components/app/Access.vue';
@@ -45,6 +45,7 @@ const hasEmail = ref(false);
 const busyStopTask = ref(false);
 const postInstallDialog = useTemplateRef('postInstallDialog');
 const sftpInfoDialog = useTemplateRef('sftpInfoDialog');
+const inputDialog = useTemplateRef('inputDialog');
 
 const isAppStopped = computed(() => {
   return appsModel.isStopped(app.value);
@@ -57,11 +58,22 @@ function onSetView(newView) {
 
 const toggleRunStateBusy = ref(false);
 async function onToggleRunState() {
-  toggleRunStateBusy.value = true;
   if (isAppStopped.value) {
+    toggleRunStateBusy.value = true;
     const [error] = await appsModel.start(app.value.id);
     if (error) return console.error(error);
   } else {
+    const confirmed = await inputDialog.value.confirm({
+      message: t('app.stopDialog.title', { app: app.value.label || app.value.fqdn }),
+      confirmStyle: 'danger',
+      confirmLabel: t('main.dialog.yes'),
+      rejectLabel: t('main.dialog.no'),
+      rejectStyle: 'secondary',
+    });
+
+    if (!confirmed) return;
+
+    toggleRunStateBusy.value = true;
     const [error] = await appsModel.stop(app.value.id);
     if (error) return console.error(error);
   }
@@ -198,6 +210,7 @@ onBeforeUnmount(() => {
   <div class="configure-outer">
     <PostInstallDialog ref="postInstallDialog"/>
     <SftpInfoDialog ref="sftpInfoDialog"/>
+    <InputDialog ref="inputDialog"/>
 
     <div class="configure-inner" v-if="!busy">
       <div class="titlebar">