didadmin/docuseal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add countdown for resend code

Browse Source
This commit is contained in:
Alex Turchyn
2024-12-17 22:53:12 +02:00
committed by Pete Matsyburka
parent 333a758688
commit 20d09f6dff
2 changed files with 68 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/submission_form/i18n.js
+24 -12
View File
@@ -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
+44 -7
View File
@@ -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().finally(() => {
alert(this.t('verification_code_has_been_resent'))
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.isResendLoading = false
})
this.interval = setInterval(() => {
this.resendCodeCountdown--
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
}
})
},