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
This commit is contained in:
Jakob Ackermann 2022-01-25 10:14:17 +00:00 committed by Copybot
parent 4c49edd89b
commit a13dee04c6
4 changed files with 74 additions and 55 deletions

View file

@ -30,6 +30,7 @@ block content
captcha=(showCaptcha ? '' : false),
captcha-action-name=(showCaptcha ? "passwordReset" : false),
)
div(data-ol-not-sent)
+formMessages()
input(type="hidden", name="_csrf", value=csrfToken)
@ -54,6 +55,12 @@ block content
| #{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"
)
span #{translate('password_reset_email_sent')}
.row
.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4

View file

@ -33,6 +33,7 @@ block content
captcha=(showCaptcha ? '' : false),
captcha-action-name=(showCaptcha ? "passwordReset" : false)
)
div(data-ol-not-sent)
+formMessages()
input(type="hidden", name="_csrf", value=csrfToken)
@ -57,6 +58,12 @@ block content
| #{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"
)
span #{translate('password_reset_email_sent')}
.row
.col-sm-12.col-md-6.col-md-offset-3
if showCaptcha

View file

@ -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'))
}
})
}

View file

@ -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.
})