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

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

@@ -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
-								)
-							.actions
-								button.btn.btn-primary(
-									type='submit',
-									data-ol-disabled-inflight,
-									aria-label=translate('request_password_reset_to_reconfirm')
+							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"
 								)
-									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

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

@@ -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
-								)
-							.actions
-								button.btn.btn-primary(
-									type='submit',
-									data-ol-disabled-inflight,
-									aria-label=translate('request_password_reset_to_reconfirm')
+							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"
 								)
-									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

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

@@ -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,
       })
-    } finally {
-      showMessages(formEl, messageBag)
 
+      // Let the user re-submit the form.
       formEl.dispatchEvent(new Event('idle'))
+    } finally {
+      showMessages(formEl, messageBag)
     }
   })
 }

services/web/frontend/js/features/multi-submit/index.js

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