github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-09-16 02:52:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6424 from overleaf/jpa-multi-submit-async-form

Browse source 
[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
Show stats Download patch file Download diff file Expand all files Collapse all files

53
services/web/app/views/user/passwordReset.pug
View file

@ -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

53
services/web/app/views/user/reconfirm.pug
View file

@ -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

8
services/web/frontend/js/features/form-helpers/hydrate-form.js
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'))
}
})
}

15
services/web/frontend/js/features/multi-submit/index.js
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.
})