From 2f932cb2bb9add10014181d978331efcf61d30f5 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 3 Aug 2023 01:51:10 +0200 Subject: [PATCH] Add client-side timeout on resend confirmation button (#26300) --- app/javascript/packs/sign_up.js | 26 ++++++++++++++++++++++++++ app/views/auth/setup/show.html.haml | 2 +- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/app/javascript/packs/sign_up.js b/app/javascript/packs/sign_up.js index 9aae9c11b..cf9c83777 100644 --- a/app/javascript/packs/sign_up.js +++ b/app/javascript/packs/sign_up.js @@ -13,4 +13,30 @@ ready(() => { console.error(error); }); }, 5000); + + document.querySelectorAll('.timer-button').forEach(button => { + let counter = 30; + + const container = document.createElement('span'); + + const updateCounter = () => { + container.innerText = ` (${counter})`; + }; + + updateCounter(); + + const countdown = setInterval(() => { + counter--; + + if (counter === 0) { + button.disabled = false; + button.removeChild(container); + clearInterval(countdown); + } else { + updateCounter(); + } + }, 1000); + + button.appendChild(container); + }); }); diff --git a/app/views/auth/setup/show.html.haml b/app/views/auth/setup/show.html.haml index 64deca334..97c826d70 100644 --- a/app/views/auth/setup/show.html.haml +++ b/app/views/auth/setup/show.html.haml @@ -19,6 +19,6 @@ = f.input :email, required: true, hint: false, input_html: { 'aria-label': t('simple_form.labels.defaults.email'), autocomplete: 'off' } .actions - = f.submit t('auth.resend_confirmation'), class: 'button' + = f.button :button, t('auth.resend_confirmation'), type: :submit, class: 'button timer-button', disabled: true .form-footer= render 'auth/shared/links'