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

[web] refactor form helper

GitOrigin-RevId: c04929fd3e62a6222ed335f99e8413592cbdd134

services/web/app/views/user/confirm_email.pug

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

services/web/app/views/user/login.pug

@@ -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(data-ol-inflight="idle") #{translate("login")}
-									span(hidden data-ol-inflight-text) #{translate("logging_in")}…
+									span(hidden data-ol-inflight="pending") #{translate("logging_in")}…
 								a.pull-right(href='/user/password/reset') #{translate("forgot_your_password")}?

services/web/app/views/user/logout.pug

@@ -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(data-ol-inflight="idle" aria-label=translate('log_out')) #{translate('log_out')}
-							span(hidden data-ol-inflight-text aria-label=translate("logging_out")) #{translate('logging_out')}…
+							span(hidden data-ol-inflight="pending" aria-label=translate("logging_out")) #{translate('logging_out')}…

services/web/app/views/user/passwordReset.pug

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

services/web/app/views/user/reconfirm.pug

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

services/web/frontend/js/features/form-helpers/hydrate-form.js

@@ -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
+      // Handle redirects
-      // "correct" way of handling redirects with fetch
       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 showWhenNotInflightEl = el.querySelector('[data-ol-inflight="idle"]')
-  const showWhenInflightEl = el.querySelector('[data-ol-inflight-text]')
+  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))