From 8d03e03d4dab90be0f00d6f8ad0bae504ce0b38b Mon Sep 17 00:00:00 2001 From: Jakob Ackermann Date: Thu, 16 Sep 2021 10:45:19 +0200 Subject: [PATCH] Merge pull request #5052 from overleaf/jpa-refactor-form-helper [web] refactor form helper GitOrigin-RevId: c04929fd3e62a6222ed335f99e8413592cbdd134 --- services/web/app/views/user/confirm_email.pug | 6 ++--- services/web/app/views/user/login.pug | 6 ++--- services/web/app/views/user/logout.pug | 6 ++--- services/web/app/views/user/passwordReset.pug | 6 ++--- services/web/app/views/user/reconfirm.pug | 6 ++--- .../js/features/form-helpers/hydrate-form.js | 23 ++++++++----------- 6 files changed, 25 insertions(+), 28 deletions(-) diff --git a/services/web/app/views/user/confirm_email.pug b/services/web/app/views/user/confirm_email.pug index 526e9496fb..e1ee547ec8 100644 --- a/services/web/app/views/user/confirm_email.pug +++ b/services/web/app/views/user/confirm_email.pug @@ -9,7 +9,7 @@ block content .page-header h1 #{translate("confirm_email")} form( - data-ol-form, + data-ol-async-form, data-ol-auto-submit, name="confirmEmailForm" action="/user/emails/confirm", @@ -27,9 +27,9 @@ block content type='submit', data-ol-disabled-inflight ) - span(data-ol-not-inflight-text) + span(data-ol-inflight="idle") | #{translate('confirm')} - span(hidden data-ol-inflight-text) + span(hidden data-ol-inflight="pending") i.fa.fa-fw.fa-spin.fa-spinner(aria-hidden="true") |  #{translate('confirming')}… diff --git a/services/web/app/views/user/login.pug b/services/web/app/views/user/login.pug index 182cfd2253..73ad79a8c5 100644 --- a/services/web/app/views/user/login.pug +++ b/services/web/app/views/user/login.pug @@ -11,7 +11,7 @@ block content .card .page-header h1 #{translate("log_in")} - form(data-ol-form, name="loginForm", action='/login', method="POST") + form(data-ol-async-form, name="loginForm", action='/login', method="POST") input(name='_csrf', type='hidden', value=csrfToken) div(data-ol-form-messages) .form-group @@ -34,6 +34,6 @@ block content type='submit', data-ol-disabled-inflight ) - span(data-ol-not-inflight-text) #{translate("login")} - span(hidden data-ol-inflight-text) #{translate("logging_in")}… + span(data-ol-inflight="idle") #{translate("login")} + span(hidden data-ol-inflight="pending") #{translate("logging_in")}… a.pull-right(href='/user/password/reset') #{translate("forgot_your_password")}? diff --git a/services/web/app/views/user/logout.pug b/services/web/app/views/user/logout.pug index a04451b458..1375142526 100644 --- a/services/web/app/views/user/logout.pug +++ b/services/web/app/views/user/logout.pug @@ -10,7 +10,7 @@ block content .login-register-header h1.login-register-header-heading #{translate("log_out")} form.login-register-form( - data-ol-form, + data-ol-async-form, name="logoutForm", action='/logout', method="POST" @@ -23,5 +23,5 @@ block content data-ol-disabled-inflight, type='submit' ) - span(data-ol-not-inflight-text aria-label=translate('log_out')) #{translate('log_out')} - span(hidden data-ol-inflight-text aria-label=translate("logging_out")) #{translate('logging_out')}… + span(data-ol-inflight="idle" aria-label=translate('log_out')) #{translate('log_out')} + span(hidden data-ol-inflight="pending" aria-label=translate("logging_out")) #{translate('logging_out')}… diff --git a/services/web/app/views/user/passwordReset.pug b/services/web/app/views/user/passwordReset.pug index 679888df1b..2748e9c530 100644 --- a/services/web/app/views/user/passwordReset.pug +++ b/services/web/app/views/user/passwordReset.pug @@ -26,7 +26,7 @@ block content h1 #{translate("password_reset")} .messageArea form( - data-ol-form + data-ol-async-form name="passwordResetForm" action="/user/password/reset", method="POST", @@ -53,9 +53,9 @@ block content data-ol-disabled-inflight, aria-label=translate('request_password_reset_to_reconfirm') ) - span(data-ol-not-inflight-text) + span(data-ol-inflight="idle") | #{translate("request_password_reset")} - span(hidden data-ol-inflight-text) + span(hidden data-ol-inflight="pending") | #{translate("requesting_password_reset")}… .row diff --git a/services/web/app/views/user/reconfirm.pug b/services/web/app/views/user/reconfirm.pug index b3129ee321..11b3d94e06 100644 --- a/services/web/app/views/user/reconfirm.pug +++ b/services/web/app/views/user/reconfirm.pug @@ -25,7 +25,7 @@ block content a(href=`mailto:${settings.adminEmail}`, ng-non-bindable) #{settings.adminEmail} | . form( - data-ol-form + data-ol-async-form name="reconfirmAccountForm" action="/user/reconfirm", method="POST", @@ -53,9 +53,9 @@ block content data-ol-disabled-inflight, aria-label=translate('request_password_reset_to_reconfirm') ) - span(data-ol-not-inflight-text) + span(data-ol-inflight="idle") | #{translate('request_password_reset_to_reconfirm')} - span(hidden data-ol-inflight-text) + span(hidden data-ol-inflight="pending") | #{translate('request_password_reset_to_reconfirm')}… .row .col-sm-12.col-md-6.col-md-offset-3 diff --git a/services/web/frontend/js/features/form-helpers/hydrate-form.js b/services/web/frontend/js/features/form-helpers/hydrate-form.js index 2ae7ce9a48..14e34b0a74 100644 --- a/services/web/frontend/js/features/form-helpers/hydrate-form.js +++ b/services/web/frontend/js/features/form-helpers/hydrate-form.js @@ -16,11 +16,8 @@ function formSubmitHelper(formEl) { formEl.addEventListener('submit', async e => { e.preventDefault() - formEl.dispatchEvent(new Event('inflight')) + formEl.dispatchEvent(new Event('pending')) - // We currently only have capacity to show 1 error, so this is probably - // unnecessary but I've used a similar data structure in the past and it was - // nice to be able to handle multiple (e.g. validation) errors at once const messageBag = [] try { @@ -29,8 +26,7 @@ function formSubmitHelper(formEl) { const data = await sendFormRequest(formEl, captchaResponse) formEl.dispatchEvent(new Event('sent')) - // Handle redirects. From poking around, this still appears to be the - // "correct" way of handling redirects with fetch + // Handle redirects if (data.redir) { window.location = data.redir return @@ -54,10 +50,9 @@ function formSubmitHelper(formEl) { text, }) } finally { - // Possibly this could be wired up through events too? showMessages(formEl, messageBag) - formEl.dispatchEvent(new Event('not-inflight')) + formEl.dispatchEvent(new Event('idle')) } }) if (formEl.hasAttribute('data-ol-auto-submit')) { @@ -123,15 +118,15 @@ function showMessages(formEl, messageBag) { function formInflightHelper(el) { const disabledEl = el.querySelector('[data-ol-disabled-inflight]') - const showWhenNotInflightEl = el.querySelector('[data-ol-not-inflight-text]') - const showWhenInflightEl = el.querySelector('[data-ol-inflight-text]') + const showWhenNotInflightEl = el.querySelector('[data-ol-inflight="idle"]') + const showWhenInflightEl = el.querySelector('[data-ol-inflight="pending"]') - el.addEventListener('inflight', () => { + el.addEventListener('pending', () => { disabledEl.disabled = true toggleDisplay(showWhenNotInflightEl, showWhenInflightEl) }) - el.addEventListener('not-inflight', () => { + el.addEventListener('idle', () => { disabledEl.disabled = false toggleDisplay(showWhenInflightEl, showWhenNotInflightEl) }) @@ -167,4 +162,6 @@ export function hydrateForm(el) { }) } -document.querySelectorAll(`[data-ol-form]`).forEach(form => hydrateForm(form)) +document + .querySelectorAll(`[data-ol-async-form]`) + .forEach(form => hydrateForm(form))