Merge pull request #5190 from overleaf/jpa-sso-oauth-de-ng

[web] de-ng sso/oauth/institutional account linking pages

GitOrigin-RevId: 50718cefff68142431aa411cb4f8644a3d8ab93f

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

@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import { FetchError, postJSON } from '../../infrastructure/fetch-json'
 import { validateCaptchaV2 } from './captcha'
 import inputValidator from './input-validator'
+import { disableElement, enableElement } from '../utils/disableElement'
 
 // Form helper(s) to handle:
 // - Attaching to the relevant form elements
@@ -122,16 +123,12 @@ export function inflightHelper(el) {
   const showWhenInflight = el.querySelectorAll('[data-ol-inflight="pending"]')
 
   el.addEventListener('pending', () => {
-    disabledInflight.forEach(el => {
-      el.disabled = true
-    })
+    disabledInflight.forEach(disableElement)
     toggleDisplay(showWhenNotInflight, showWhenInflight)
   })
 
   el.addEventListener('idle', () => {
-    disabledInflight.forEach(el => {
-      el.disabled = false
-    })
+    disabledInflight.forEach(enableElement)
     toggleDisplay(showWhenInflight, showWhenNotInflight)
   })
 }
@@ -146,6 +143,17 @@ function formSentHelper(el) {
   })
 }
 
+function formValidationHelper(el) {
+  el.querySelectorAll('input').forEach(inputEl => {
+    if (
+      inputEl.willValidate &&
+      !inputEl.hasAttribute('data-ol-no-custom-form-validation-messages')
+    ) {
+      inputValidator(inputEl)
+    }
+  })
+}
+
 export function toggleDisplay(hide, show) {
   hide.forEach(el => {
     el.hidden = true
@@ -155,21 +163,22 @@ export function toggleDisplay(hide, show) {
   })
 }
 
-export function hydrateForm(el) {
+function hydrateAsyncForm(el) {
   formSubmitHelper(el)
   inflightHelper(el)
   formSentHelper(el)
+  formValidationHelper(el)
+}
 
-  el.querySelectorAll('input').forEach(inputEl => {
-    if (
-      inputEl.willValidate &&
-      !inputEl.hasAttribute('data-ol-no-custom-form-validation-messages')
-    ) {
-      inputValidator(inputEl)
-    }
+function hydrateRegularForm(el) {
+  inflightHelper(el)
+  formValidationHelper(el)
+
+  el.addEventListener('submit', () => {
+    el.dispatchEvent(new Event('pending'))
   })
 }
 
-document
-  .querySelectorAll(`[data-ol-async-form]`)
-  .forEach(form => hydrateForm(form))
+document.querySelectorAll(`[data-ol-async-form]`).forEach(hydrateAsyncForm)
+
+document.querySelectorAll(`[data-ol-regular-form]`).forEach(hydrateRegularForm)

services/web/frontend/js/features/link-helpers/slow-link.js

@@ -1,8 +1,13 @@
 import { inflightHelper } from '../form-helpers/hydrate-form'
+import { disableElement } from '../utils/disableElement'
 
 function setup(el) {
+  // Make the element discoverable for multi-submit.
+  el.setAttribute('data-ol-disabled-inflight', '')
+
   inflightHelper(el)
   el.addEventListener('click', function () {
+    disableElement(el)
     el.dispatchEvent(new Event('pending'))
   })
 }

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

@@ -0,0 +1,14 @@
+import { disableElement } 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)
+  }
+  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.
+})

services/web/frontend/js/features/utils/disableElement.js

@@ -0,0 +1,9 @@
+export function disableElement(el) {
+  el.setAttribute('disabled', '')
+  el.setAttribute('aria-disabled', 'true')
+}
+
+export function enableElement(el) {
+  el.removeAttribute('disabled')
+  el.removeAttribute('aria-disabled')
+}

services/web/frontend/js/marketing.js

@@ -5,5 +5,6 @@ import './features/form-helpers/hydrate-form'
 import './features/link-helpers/slow-link'
 import './features/contact-form'
 import './features/event-tracking'
+import './features/multi-submit'
 
 $('[data-ol-lang-selector-tooltip]').tooltip({ trigger: 'hover' })