Add delete status confirm modal

src/components/extra_buttons/extra_buttons.js

@@ -1,4 +1,5 @@
 import Popover from '../popover/popover.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisH,
@@ -25,15 +26,35 @@ library.add(
 )
 
 const ExtraButtons = {
-  props: [ 'status' ],
+  props: ['status'],
-  components: { Popover },
+  components: {
+    Popover,
+    ConfirmModal
+  },
+  data () {
+    return {
+      expanded: false,
+      showingDeleteDialog: false
+    }
+  },
   methods: {
     deleteStatus () {
-      const confirmed = window.confirm(this.$t('status.delete_confirm'))
+      if (this.shouldConfirmDelete) {
-      if (confirmed) {
+        this.showDeleteStatusConfirmDialog()
-        this.$store.dispatch('deleteStatus', { id: this.status.id })
+      } else {
+        this.doDeleteStatus()
       }
     },
+    doDeleteStatus () {
+      this.$store.dispatch('deleteStatus', { id: this.status.id })
+      hideDeleteStatusConfirmDialog()
+    },
+    showDeleteStatusConfirmDialog () {
+      this.showingDeleteDialog = true
+    },
+    hideDeleteStatusConfirmDialog () {
+      this.showingDeleteDialog = false
+    },
     pinStatus () {
       this.$store.dispatch('pinStatus', this.status.id)
         .then(() => this.$emit('onSuccess'))
@@ -91,6 +112,9 @@ const ExtraButtons = {
     },
     statusLink () {
       return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
+    },
+    shouldConfirmDelete () {
+      return this.$store.getters.mergedConfig.modalOnDelete
     }
   }
 }

src/components/extra_buttons/extra_buttons.vue

@@ -125,6 +125,16 @@
           icon="ellipsis-h"
         />
       </button>
+      <ConfirmModal
+        :showing="showingDeleteDialog"
+        :title="$t('status.delete_confirm_title')"
+        :cancel-text="$t('status.delete_confirm_cancel_button')"
+        :confirm-text="$t('status.delete_confirm_accept_button')"
+        @cancelled="hideDeleteStatusConfirmDialog"
+        @accepted="doDeleteStatus"
+      >
+        {{ $t('status.delete_confirm') }}
+      </ConfirmModal>
     </template>
   </Popover>
 </template>

src/modules/config.js

@@ -81,6 +81,12 @@ export const defaultState = {
   minimalScopesMode: undefined, // instance default
   // This hides statuses filtered via a word filter
   hideFilteredStatuses: undefined, // instance default
+  modalOnRepeat: undefined, // instance default
+  modalOnUnfollow: undefined, // instance default
+  modalOnBlock: undefined, // instance default
+  modalOnMute: undefined, // instance default
+  modalOnDelete: undefined, // instance default
+  modalOnLogout: undefined, // instance default
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,

src/modules/instance.js

@@ -38,6 +38,12 @@ const defaultState = {
   hideSiteName: false,
   hideUserStats: false,
   muteBotStatuses: false,
+  modalOnRepeat: false,
+  modalOnUnfollow: false,
+  modalOnBlock: true,
+  modalOnMute: false,
+  modalOnDelete: true,
+  modalOnLogout: true,
   loginMethod: 'password',
   logo: '/static/logo.svg',
   logoMargin: '.2em',