diff --git a/app/javascript/submission_form/i18n.js b/app/javascript/submission_form/i18n.js
index 3db90855..ab1e0685 100644
--- a/app/javascript/submission_form/i18n.js
+++ b/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 }
diff --git a/app/javascript/submission_form/phone_step.vue b/app/javascript/submission_form/phone_step.vue
index 844eca00..c6c320e4 100644
--- a/app/javascript/submission_form/phone_step.vue
+++ b/app/javascript/submission_form/phone_step.vue
@@ -52,7 +52,14 @@
>
{{ t('change_phone_number') }}
+
+ {{ t('wait_countdown_seconds').replace('{countdown}', resendCodeCountdown) }}
+
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(() => {
- alert(this.t('verification_code_has_been_resent'))
+ this.interval = setInterval(() => {
+ 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
}
})
},