Add confirmation for repeating

2 files changed, 33 insertions, 1 deletions

diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js
index 4d92b5fa..198b6c14 100644
--- a/src/components/retweet_button/retweet_button.js
+++ b/src/components/retweet_button/retweet_button.js
@@ -1,3 +1,4 @@
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faRetweet,
@@ -15,13 +16,24 @@ library.add(
 
 const RetweetButton = {
   props: ['status', 'loggedIn', 'visibility'],
+  components: {
+    ConfirmModal
+  },
   data () {
     return {
-      animated: false
+      animated: false,
+      showingConfirmDialog: false
     }
   },
   methods: {
     retweet () {
+      if (!this.status.repeated && this.shouldConfirmRepeat) {
+        this.showConfirmDialog()
+      } else {
+        this.doRetweet()
+      }
+    },
+    doRetweet () {
       if (!this.status.repeated) {
         this.$store.dispatch('retweet', { id: this.status.id })
       } else {
@@ -31,6 +43,13 @@ const RetweetButton = {
       setTimeout(() => {
         this.animated = false
       }, 500)
+      this.hideConfirmDialog()
+    },
+    showConfirmDialog () {
+      this.showingConfirmDialog = true
+    },
+    hideConfirmDialog () {
+      this.showingConfirmDialog = false
     }
   },
   computed: {
@@ -39,6 +58,9 @@ const RetweetButton = {
     },
     remoteInteractionLink () {
       return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
+    },
+    shouldConfirmRepeat () {
+      return this.mergedConfig.modalOnRepeat
     }
   }
 }
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index 7700ee0d..38d4dc3f 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -59,6 +59,16 @@
     >
       {{ status.repeat_num }}
     </span>
+    <confirm-modal
+      :showing="showingConfirmDialog"
+      :title="$t('status.repeat_confirm_title')"
+      :confirm-text="$t('status.repeat_confirm_accept_button')"
+      :cancel-text="$t('status.repeat_confirm_cancel_button')"
+      @accepted="doRetweet"
+      @cancelled="hideConfirmDialog"
+    >
+      {{ $t('status.repeat_confirm') }}
+    </confirm-modal>
   </div>
 </template>