Confirmation prompts (replace browser confirmation prompts)

website/client/src/components/tasks/task.vue

@@ -1,8 +1,9 @@
 <template>
-  <div
-    class="task-wrapper"
-    draggable
-  >
+  <div>
+    <div
+      class="task-wrapper"
+      draggable
+    >
     <div
       class="task transition"
       :class="[{
@@ -418,6 +419,8 @@
         :group="group"
       />
     </div>
+    </div>
+    <deleteTaskConfirmModal />
   </div>
 </template>
 
@@ -937,11 +940,13 @@ import scoreTask from '@/mixins/scoreTask';
 import sync from '@/mixins/sync';
 import approvalFooter from './approvalFooter';
 import MenuDropdown from '../ui/customMenuDropdown';
+import deleteTaskConfirmModal from './deleteTaskConfirmModal.vue';
 
 export default {
   components: {
     approvalFooter,
     MenuDropdown,
+    deleteTaskConfirmModal,
   },
   directives: {
     markdown: markdownDirective,
@@ -1177,9 +1182,15 @@ export default {
     moveToBottom () {
       this.$emit('moveTo', this.task, 'bottom');
     },
-    destroy () {
+    async destroy () {
       const type = this.$t(this.task.type);
-      if (!window.confirm(this.$t('sureDeleteType', { type }))) return; // eslint-disable-line no-alert
+      const confirmed = await new Promise(resolve => {
+        this.$root.$emit('habitica:delete-task-confirm', {
+          message: this.$t('sureDeleteType', { type }),
+          resolve,
+        });
+      });
+      if (!confirmed) return;
       this.destroyTask(this.task);
       this.$emit('taskDestroyed', this.task);
     },