Add confirmation for following

src/components/follow_button/follow_button.js

@@ -1,12 +1,20 @@
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate'
 export default {
   props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
+  components: {
+    ConfirmModal
+  },
   data () {
     return {
-      inProgress: false
+      inProgress: false,
+      showingConfirmUnfollow: false,
     }
   },
   computed: {
+    shouldConfirmUnfollow () {
+      return this.$store.getters.mergedConfig.modalOnUnfollow
+    },
     isPressed () {
       return this.inProgress || this.relationship.following
     },
@@ -35,6 +43,12 @@ export default {
     }
   },
   methods: {
+    showConfirmUnfollow () {
+      this.showingConfirmUnfollow = true
+    },
+    hideConfirmUnfollow () {
+      this.showingConfirmUnfollow = false
+    },
     onClick () {
       this.relationship.following || this.relationship.requested ? this.unfollow() : this.follow()
     },
@@ -45,12 +59,21 @@ export default {
       })
     },
     unfollow () {
+      if (this.shouldConfirmUnfollow) {
+        this.showConfirmUnfollow()
+      } else {
+        this.doUnfollow()
+      }
+    },
+    doUnfollow () {
       const store = this.$store
       this.inProgress = true
       requestUnfollow(this.relationship.id, store).then(() => {
         this.inProgress = false
         store.commit('removeStatus', { timeline: 'friends', userId: this.relationship.id })
       })
+
+      this.hideConfirmUnfollow()
     }
   }
 }

src/components/follow_button/follow_button.vue

@@ -1,13 +1,33 @@
 <template>
-  <button
-    class="btn button-default follow-button"
-    :class="{ toggled: isPressed }"
-    :disabled="disabled"
-    :title="title"
-    @click="onClick"
-  >
-    {{ label }}
-  </button>
+  <div>
+    <button
+      class="btn button-default follow-button"
+      :class="{ toggled: isPressed }"
+      :disabled="disabled"
+      :title="title"
+      @click="onClick"
+    >
+      {{ label }}
+    </button>
+    <confirm-modal
+      :showing="showingConfirmUnfollow"
+      :title="$t('user_card.unfollow_confirm_title')"
+      :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
+      :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
+      @accepted="doUnfollow"
+      @cancelled="hideConfirmUnfollow"
+    >
+      <i18n
+        path="user_card.unfollow_confirm"
+        tag="span"
+      >
+        <span
+          place="user"
+          v-text="user.screen_name_ui"
+        />
+      </i18n>
+    </confirm-modal>
+  </div>
 </template>
 
 <script src="./follow_button.js"></script>