add countdown for resend code

app/javascript/submission_form/i18n.js

@@ -93,7 +93,8 @@ const en = {
   reupload: 'Reupload',
   upload: 'Upload',
   files: 'Files',
-  signature_is_too_small_please_redraw: 'Signature is too small. Please redraw.'
+  signature_is_too_small_please_redraw: 'Signature is too small. Please redraw.',
+  wait_countdown_seconds: 'Wait {countdown} seconds'
 }
 
 const es = {
@@ -190,7 +191,8 @@ const es = {
   reupload: 'Volver a subir',
   upload: 'Subir',
   files: 'Archivos',
-  signature_is_too_small_please_redraw: 'La firma es demasiado pequeña. Por favor, dibújala de nuevo.'
+  signature_is_too_small_please_redraw: 'La firma es demasiado pequeña. Por favor, dibújala de nuevo.',
+  wait_countdown_seconds: 'Espera {countdown} segundos'
 }
 
 const it = {
@@ -287,7 +289,8 @@ const it = {
   reupload: 'Ricarica',
   upload: 'Carica',
   files: 'File',
-  signature_is_too_small_please_redraw: 'La firma è troppo piccola. Ridisegnala per favore.'
+  signature_is_too_small_please_redraw: 'La firma è troppo piccola. Ridisegnala per favore.',
+  wait_countdown_seconds: 'Attendi {countdown} secondi'
 }
 
 const de = {
@@ -384,7 +387,8 @@ const de = {
   reupload: 'Erneut hochladen',
   upload: 'Hochladen',
   files: 'Dateien',
-  signature_is_too_small_please_redraw: 'Die Unterschrift ist zu klein. Bitte erneut zeichnen.'
+  signature_is_too_small_please_redraw: 'Die Unterschrift ist zu klein. Bitte erneut zeichnen.',
+  wait_countdown_seconds: 'Warte {countdown} Sekunden'
 }
 
 const fr = {
@@ -481,7 +485,8 @@ const fr = {
   reupload: 'Recharger',
   upload: 'Télécharger',
   files: 'Fichiers',
-  signature_is_too_small_please_redraw: 'La signature est trop petite. Veuillez la redessiner.'
+  signature_is_too_small_please_redraw: 'La signature est trop petite. Veuillez la redessiner.',
+  wait_countdown_seconds: 'Attendez {countdown} secondes'
 }
 
 const pl = {
@@ -675,7 +680,8 @@ const uk = {
   reupload: 'Перезавантажити',
   upload: 'Завантажити',
   files: 'Файли',
-  signature_is_too_small_please_redraw: 'Підпис занадто малий. Будь ласка, перемалюйте його.'
+  signature_is_too_small_please_redraw: 'Підпис занадто малий. Будь ласка, перемалюйте його.',
+  wait_countdown_seconds: 'Зачекайте {countdown} секунд'
 }
 
 const cs = {
@@ -772,7 +778,8 @@ const cs = {
   reupload: 'Znovu nahrát',
   upload: 'Nahrát',
   files: 'Soubory',
-  signature_is_too_small_please_redraw: 'Podpis je příliš malý. Prosím, překreslete ho.'
+  signature_is_too_small_please_redraw: 'Podpis je příliš malý. Prosím, překreslete ho.',
+  wait_countdown_seconds: 'Počkejte {countdown} sekund'
 }
 
 const pt = {
@@ -869,7 +876,8 @@ const pt = {
   reupload: 'Reenviar',
   upload: 'Carregar',
   files: 'Arquivos',
-  signature_is_too_small_please_redraw: 'A assinatura é muito pequena. Por favor, redesenhe-a.'
+  signature_is_too_small_please_redraw: 'A assinatura é muito pequena. Por favor, redesenhe-a.',
+  wait_countdown_seconds: 'Aguarde {countdown} segundos'
 }
 
 const he = {
@@ -967,7 +975,8 @@ const he = {
   reupload: 'העלה שוב',
   upload: 'העלאה',
   files: 'קבצים',
-  signature_is_too_small_please_redraw: 'החתימה קטנה מדי. אנא צייר מחדש.'
+  signature_is_too_small_please_redraw: 'החתימה קטנה מדי. אנא צייר מחדש.',
+  wait_countdown_seconds: 'המתן {countdown} שניות'
 }
 
 const nl = {
@@ -1065,7 +1074,8 @@ const nl = {
   reupload: 'Opnieuw uploaden',
   upload: 'Uploaden',
   files: 'Bestanden',
-  signature_is_too_small_please_redraw: 'De handtekening is te klein. Teken deze opnieuw, alstublieft.'
+  signature_is_too_small_please_redraw: 'De handtekening is te klein. Teken deze opnieuw, alstublieft.',
+  wait_countdown_seconds: 'Wacht {countdown} seconden'
 }
 
 const ar = {
@@ -1162,7 +1172,8 @@ const ar = {
   reupload: 'إعادة التحميل',
   upload: 'تحميل',
   files: 'الملفات',
-  signature_is_too_small_please_redraw: 'التوقيع صغير جدًا. يرجى إعادة الرسم.'
+  signature_is_too_small_please_redraw: 'التوقيع صغير جدًا. يرجى إعادة الرسم.',
+  wait_countdown_seconds: 'انتظر {countdown} ثانية'
 }
 
 const ko = {
@@ -1258,7 +1269,8 @@ const ko = {
   reupload: '다시 업로드',
   upload: '업로드',
   files: '파일',
-  signature_is_too_small_please_redraw: '서명이 너무 작습니다. 다시 그려주세요.'
+  signature_is_too_small_please_redraw: '서명이 너무 작습니다. 다시 그려주세요.',
+  wait_countdown_seconds: '{countdown}초 기다리세요'
 }
 
 const i18n = { en, es, it, de, fr, pl, uk, cs, pt, he, nl, ar, ko }

app/javascript/submission_form/phone_step.vue

@@ -52,7 +52,14 @@
           >
             {{ t('change_phone_number') }}
           </a>
+          <span
+            v-if="resendCodeCountdown > 0"
+            class="link"
+          >
+            {{ t('wait_countdown_seconds').replace('{countdown}', resendCodeCountdown) }}
+          </span>
           <a
+            v-else
             href="#"
             class="link"
             @click.prevent="resendCode"
@@ -173,6 +180,8 @@ export default {
   data () {
     return {
       isCodeSent: false,
+      codeSentAt: null,
+      resendCodeCountdown: 0,
       isResendLoading: false,
       phoneValue: this.modelValue || this.defaultValue || '',
       selectedCountry: {}
@@ -220,6 +229,11 @@ export default {
       this.selectedCountry = this.countries.find((country) => country.tz.includes(tz)) || this.countries[0]
     }
   },
+  beforeUnmount () {
+    if (this.interval) {
+      clearInterval(this.interval)
+    }
+  },
   methods: {
     emitSubmit: throttle(function (e) {
       this.$emit('submit')
@@ -246,13 +260,28 @@ export default {
       }
     },
     resendCode () {
-      this.isResendLoading = true
+      if (this.codeSentAt && Date.now() - this.codeSentAt < 15000) {
+        this.startResendCodeCountdown()
+      } else {
+        this.isResendLoading = true
+
+        this.sendVerificationCode().then(() => {
+          alert(this.t('verification_code_has_been_resent'))
+        }).finally(() => {
+          this.isResendLoading = false
+        })
+      }
+    },
+    startResendCodeCountdown () {
+      this.resendCodeCountdown = 15 - parseInt((Date.now() - this.codeSentAt) / 1000)
 
-      this.sendVerificationCode().finally(() => {
+      this.interval = setInterval(() => {
-        alert(this.t('verification_code_has_been_resent'))
+        this.resendCodeCountdown--
 
-        this.isResendLoading = false
+        if (this.resendCodeCountdown <= 0) {
-      })
+          clearInterval(this.interval)
+        }
+      }, 1000)
     },
     sendVerificationCode () {
       return fetch(this.baseUrl + '/api/send_phone_verification_code', {
@@ -264,12 +293,20 @@ export default {
         }),
         headers: { 'Content-Type': 'application/json' }
       }).then(async (resp) => {
-        if (resp.status === 422) {
+        if ([422, 429].includes(resp.status)) {
           const data = await resp.json()
 
-          alert(this.t('number_phone_is_invalid').replace('{number}', this.fullInternationalPhoneValue))
+          if (resp.status === 422) {
+            alert(this.t('number_phone_is_invalid').replace('{number}', this.fullInternationalPhoneValue))
+          } else if (resp.status === 429) {
+            alert(data.error)
+          }
 
           return Promise.reject(new Error(data.error))
+        } else if (resp.ok) {
+          this.codeSentAt = Date.now()
+
+          return resp
         }
       })
     },