From e0d80f2f27c54805a50f6ac2e05673212470cbd6 Mon Sep 17 00:00:00 2001 From: Jakob Ackermann Date: Tue, 25 Jan 2022 10:14:17 +0000 Subject: [PATCH] Merge pull request #6424 from overleaf/jpa-multi-submit-async-form [web] add support for async-form inside a multi-submit page GitOrigin-RevId: 801363aeacc6c10411aceaf2c09a5e4b3b90fcf7 --- services/web/app/views/user/passwordReset.pug | 53 +++++++++++-------- services/web/app/views/user/reconfirm.pug | 53 +++++++++++-------- .../js/features/form-helpers/hydrate-form.js | 8 ++- .../js/features/multi-submit/index.js | 15 +++--- 4 files changed, 74 insertions(+), 55 deletions(-) diff --git a/services/web/app/views/user/passwordReset.pug b/services/web/app/views/user/passwordReset.pug index fbb2281d13..315ebc33eb 100644 --- a/services/web/app/views/user/passwordReset.pug +++ b/services/web/app/views/user/passwordReset.pug @@ -30,30 +30,37 @@ block content captcha=(showCaptcha ? '' : false), captcha-action-name=(showCaptcha ? "passwordReset" : false), ) - +formMessages() - - input(type="hidden", name="_csrf", value=csrfToken) - .form-group - label(for='email') #{translate("please_enter_email")} - input.form-control#email( - aria-label="email" - type='email', - name='email', - placeholder='email@example.com', - required, - autocomplete="username", - autofocus + div(data-ol-not-sent) + +formMessages() + + input(type="hidden", name="_csrf", value=csrfToken) + .form-group + label(for='email') #{translate("please_enter_email")} + input.form-control#email( + aria-label="email" + type='email', + name='email', + placeholder='email@example.com', + required, + autocomplete="username", + autofocus + ) + .actions + button.btn.btn-primary( + type='submit', + data-ol-disabled-inflight, + aria-label=translate('request_password_reset_to_reconfirm') + ) + span(data-ol-inflight="idle") + | #{translate("request_password_reset")} + span(hidden data-ol-inflight="pending") + | #{translate("requesting_password_reset")}… + div(hidden data-ol-sent) + div.alert.alert-success( + role="alert" + aria-live="polite" ) - .actions - button.btn.btn-primary( - type='submit', - data-ol-disabled-inflight, - aria-label=translate('request_password_reset_to_reconfirm') - ) - span(data-ol-inflight="idle") - | #{translate("request_password_reset")} - span(hidden data-ol-inflight="pending") - | #{translate("requesting_password_reset")}… + span #{translate('password_reset_email_sent')} .row .col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4 diff --git a/services/web/app/views/user/reconfirm.pug b/services/web/app/views/user/reconfirm.pug index 3f0844464d..f2e723a488 100644 --- a/services/web/app/views/user/reconfirm.pug +++ b/services/web/app/views/user/reconfirm.pug @@ -33,30 +33,37 @@ block content captcha=(showCaptcha ? '' : false), captcha-action-name=(showCaptcha ? "passwordReset" : false) ) - +formMessages() - - input(type="hidden", name="_csrf", value=csrfToken) - .form-group - label(for='email') #{translate("please_enter_email")} - input.form-control( - aria-label="email" - type='email', - name='email', - placeholder='email@example.com', - required, - autofocus - value=email + div(data-ol-not-sent) + +formMessages() + + input(type="hidden", name="_csrf", value=csrfToken) + .form-group + label(for='email') #{translate("please_enter_email")} + input.form-control( + aria-label="email" + type='email', + name='email', + placeholder='email@example.com', + required, + autofocus + value=email + ) + .actions + button.btn.btn-primary( + type='submit', + data-ol-disabled-inflight, + aria-label=translate('request_password_reset_to_reconfirm') + ) + span(data-ol-inflight="idle") + | #{translate('request_password_reset_to_reconfirm')} + span(hidden data-ol-inflight="pending") + | #{translate('request_password_reset_to_reconfirm')}… + div(hidden data-ol-sent) + div.alert.alert-success( + role="alert" + aria-live="polite" ) - .actions - button.btn.btn-primary( - type='submit', - data-ol-disabled-inflight, - aria-label=translate('request_password_reset_to_reconfirm') - ) - span(data-ol-inflight="idle") - | #{translate('request_password_reset_to_reconfirm')} - span(hidden data-ol-inflight="pending") - | #{translate('request_password_reset_to_reconfirm')}… + span #{translate('password_reset_email_sent')} .row .col-sm-12.col-md-6.col-md-offset-3 if showCaptcha 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 33ea70273a..3fb8d48058 100644 --- a/services/web/frontend/js/features/form-helpers/hydrate-form.js +++ b/services/web/frontend/js/features/form-helpers/hydrate-form.js @@ -40,6 +40,9 @@ function formSubmitHelper(formEl) { text: data.message.text || data.message, }) } + + // Let the user re-submit the form. + formEl.dispatchEvent(new Event('idle')) } catch (error) { let text = error.message if (error instanceof FetchError) { @@ -50,10 +53,11 @@ function formSubmitHelper(formEl) { key: error.data?.message?.key, text, }) + + // Let the user re-submit the form. + formEl.dispatchEvent(new Event('idle')) } finally { showMessages(formEl, messageBag) - - formEl.dispatchEvent(new Event('idle')) } }) } diff --git a/services/web/frontend/js/features/multi-submit/index.js b/services/web/frontend/js/features/multi-submit/index.js index 039acc8aa4..ad37ccd0b7 100644 --- a/services/web/frontend/js/features/multi-submit/index.js +++ b/services/web/frontend/js/features/multi-submit/index.js @@ -1,14 +1,15 @@ -import { disableElement } from '../utils/disableElement' +import { disableElement, enableElement } from '../utils/disableElement' document.querySelectorAll('[data-ol-multi-submit]').forEach(el => { - function onSubmit() { - el.querySelectorAll('[data-ol-disabled-inflight]').forEach(disableElement) - } function setup(childEl) { - childEl.addEventListener('pending', onSubmit) + childEl.addEventListener('pending', () => { + el.querySelectorAll('[data-ol-disabled-inflight]').forEach(disableElement) + }) + childEl.addEventListener('idle', () => { + el.querySelectorAll('[data-ol-disabled-inflight]').forEach(enableElement) + }) } + el.querySelectorAll('[data-ol-async-form]').forEach(setup) el.querySelectorAll('[data-ol-regular-form]').forEach(setup) el.querySelectorAll('[data-ol-slow-link]').forEach(setup) - // NOTE: data-ol-async-form is not added explicitly as of now. - // Managing the return to idle is tricky and we can look into that later. })