github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #5052 from overleaf/jpa-refactor-form-helper

Browse source 
[web] refactor form helper

GitOrigin-RevId: c04929fd3e62a6222ed335f99e8413592cbdd134
This commit is contained in:
Jakob Ackermann 2021-09-16 10:45:19 +02:00 committed by Copybot
parent 0ae8f37629
commit 8d03e03d4d
6 changed files with 25 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
services/web/app/views/user/confirm_email.pug
View file

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

6
services/web/app/views/user/login.pug
View file

@ -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")}?

6
services/web/app/views/user/logout.pug
View file

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

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

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

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

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

23
services/web/frontend/js/features/form-helpers/hydrate-form.js
View file

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