github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05: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=(showCaptcha ? '' : false),
captcha-action-name=(showCaptcha ? "passwordReset" : false), captcha-action-name=(showCaptcha ? "passwordReset" : false),
) )
+formMessages() div(data-ol-not-sent)
+formMessages()
input(type="hidden", name="_csrf", value=csrfToken)
.form-group input(type="hidden", name="_csrf", value=csrfToken)
label(for='email') #{translate("please_enter_email")} .form-group
input.form-control#email( label(for='email') #{translate("please_enter_email")}
aria-label="email" input.form-control#email(
type='email', aria-label="email"
name='email', type='email',
placeholder='email@example.com', name='email',
required, placeholder='email@example.com',
autocomplete="username", required,
autofocus 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 span #{translate('password_reset_email_sent')}
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")}…
.row .row
.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4 .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=(showCaptcha ? '' : false),
captcha-action-name=(showCaptcha ? "passwordReset" : false) captcha-action-name=(showCaptcha ? "passwordReset" : false)
) )
+formMessages() div(data-ol-not-sent)
+formMessages()
input(type="hidden", name="_csrf", value=csrfToken)
.form-group input(type="hidden", name="_csrf", value=csrfToken)
label(for='email') #{translate("please_enter_email")} .form-group
input.form-control( label(for='email') #{translate("please_enter_email")}
aria-label="email" input.form-control(
type='email', aria-label="email"
name='email', type='email',
placeholder='email@example.com', name='email',
required, placeholder='email@example.com',
autofocus required,
value=email 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 span #{translate('password_reset_email_sent')}
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')}…
.row .row
.col-sm-12.col-md-6.col-md-offset-3 .col-sm-12.col-md-6.col-md-offset-3
if showCaptcha 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, text: data.message.text || data.message,
}) })
} }
// Let the user re-submit the form.
formEl.dispatchEvent(new Event('idle'))
} catch (error) { } catch (error) {
let text = error.message let text = error.message
if (error instanceof FetchError) { if (error instanceof FetchError) {
@ -50,10 +53,11 @@ function formSubmitHelper(formEl) {
key: error.data?.message?.key, key: error.data?.message?.key,
text, text,
}) })
// Let the user re-submit the form.
formEl.dispatchEvent(new Event('idle'))
} finally { } finally {
showMessages(formEl, messageBag) 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 => { document.querySelectorAll('[data-ol-multi-submit]').forEach(el => {
function onSubmit() {
el.querySelectorAll('[data-ol-disabled-inflight]').forEach(disableElement)
}
function setup(childEl) { 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-regular-form]').forEach(setup)
el.querySelectorAll('[data-ol-slow-link]').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.
}) })