enh: Replace confirm dialog for deletion with modal

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>

src/components/AppNavigationForm.vue

@@ -72,12 +72,23 @@
 				{{ t('forms', 'Copy form') }}
 			</NcActionButton>
 			<NcActionSeparator />
-			<NcActionButton :close-after-click="true" @click="onDeleteForm">
+			<NcActionButton :close-after-click="true" @click="showModal">
 				<template #icon>
 					<IconDelete :size="20" />
 				</template>
 				{{ t('forms', 'Delete form') }}
 			</NcActionButton>
+			<NcModal v-if="modal"
+				@close="closeModal">
+				<div class="modal__content">
+					<h2>{{ t('forms', 'Delete form') }}</h2>
+					<p>{{ t('forms', 'Are you sure you want to delete {title}?', { title: formTitle }) }}</p>
+					<NcButton type="error"
+						@click="onDeleteForm">
+						{{ t('forms', 'Delete form') }}
+					</NcButton>
+				</div>
+			</NcModal>
 		</template>
 	</NcListItem>
 </template>
@@ -88,7 +99,9 @@ import { showError } from '@nextcloud/dialogs'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionRouter from '@nextcloud/vue/dist/Components/NcActionRouter.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
+import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import axios from '@nextcloud/axios'
 import moment from '@nextcloud/moment'
@@ -117,8 +130,10 @@ export default {
 		NcActionButton,
 		NcActionRouter,
 		NcActionSeparator,
+		NcButton,
 		NcListItem,
 		NcLoadingIcon,
+		NcModal,
 	},
 
 	props: {
@@ -135,6 +150,7 @@ export default {
 	data() {
 		return {
 			loading: false,
+			modal: false,
 		}
 	},
 
@@ -232,6 +248,21 @@ export default {
 				this.loading = false
 			}
 		},
+
+		showModal() {
+			this.modal = true
+		},
+
+		closeModal() {
+			this.modal = false
+		},
 	},
 }
 </script>
+
+<style scoped>
+.modal__content {
+	margin: 50px;
+	text-align: center;
+}
+</style>