Add confirmation for blocking

src/components/account_actions/account_actions.js

@@ -1,5 +1,6 @@
 import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisV
@@ -14,13 +15,22 @@ const AccountActions = {
     'user', 'relationship'
   ],
   data () {
-    return { }
+    return {
+      showingConfirmBlock: false
+    }
   },
   components: {
     ProgressButton,
-    Popover
+    Popover,
+    ConfirmModal
   },
   methods: {
+    showConfirmBlock () {
+      this.showingConfirmBlock = true
+    },
+    hideConfirmBlock () {
+      this.showingConfirmBlock = false
+    },
     showRepeats () {
       this.$store.dispatch('showReblogs', this.user.id)
     },
@@ -28,7 +38,15 @@ const AccountActions = {
       this.$store.dispatch('hideReblogs', this.user.id)
     },
     blockUser () {
+      if (!this.shouldConfirmBlock) {
+        this.doBlockUser()
+      } else {
+        this.showConfirmBlock()
+      }
+    },
+    doBlockUser () {
       this.$store.dispatch('blockUser', this.user.id)
+      this.hideConfirmBlock()
     },
     unblockUser () {
       this.$store.dispatch('unblockUser', this.user.id)
@@ -36,6 +54,14 @@ const AccountActions = {
     reportUser () {
       this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
     }
+  },
+  computed: {
+    shouldConfirmBlock () {
+      return this.$store.getters.mergedConfig.modalOnBlock
+    },
+    ...mapState({
+      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
+    })
   }
 }
 

src/components/account_actions/account_actions.vue

@@ -59,6 +59,24 @@
         </button>
       </template>
     </Popover>
+    <confirm-modal
+      :showing="showingConfirmBlock"
+      :title="$t('user_card.block_confirm_title')"
+      :confirm-text="$t('user_card.block_confirm_accept_button')"
+      :cancel-text="$t('user_card.block_confirm_cancel_button')"
+      @accepted="doBlockUser"
+      @cancelled="hideConfirmBlock"
+    >
+      <i18n
+        path="user_card.block_confirm"
+        tag="span"
+      >
+        <span
+          place="user"
+          v-text="user.screen_name_ui"
+        />
+      </i18n>
+    </confirm-modal>
   </div>
 </template>