Merge pull request #5125 from overleaf/jpa-portal-de-ng

[web] de-ng portals page

GitOrigin-RevId: 2460c51fb0f81be758c5804e66803a98b614b304

services/web/app/src/Features/User/UserEmailsController.js

@@ -107,7 +107,7 @@ function sendReconfirmation(req, res, next) {
         if (error) {
           return next(error)
         }
-        res.sendStatus(200)
+        res.sendStatus(204)
       }
     )
   })

services/web/app/views/_mixins/reconfirm_affiliation-marketing.pug

@@ -0,0 +1,61 @@
+mixin reconfirmAffiliationNotification-marketing(userEmail, location)
+	form(
+		data-ol-async-form
+		action='/user/emails/send-reconfirmation'
+	)
+		input(name="_csrf" type="hidden" value=csrfToken)
+		input(name="email" type="hidden" value=userEmail.email)
+		div(data-ol-form-messages)
+
+		.reconfirm-notification
+			div(data-ol-not-sent style="width:100%;")
+				i.fa.fa-warning
+
+				- var ssoEnabled = userEmail.affiliation && userEmail.affiliation.institution && userEmail.affiliation.institution.ssoEnabled
+				if ssoEnabled
+					- var institutionId = userEmail.affiliation && userEmail.affiliation.institution && userEmail.affiliation.institution.id
+					a.btn-reconfirm.btn.btn-sm.btn-info(
+						data-ol-slow-link
+						href=`${settings.saml.ukamf.initPath}?university_id=${institutionId}&reconfirm=${location}`
+					)
+						span(data-ol-inflight="idle") #{translate("confirm_affiliation")}
+						span(hidden data-ol-inflight="pending") #{translate("pending")}…
+
+				else
+					button.btn-reconfirm.btn.btn-sm.btn-info(
+						type="submit"
+						data-ol-disabled-inflight
+					)
+						span(data-ol-inflight="idle") #{translate("confirm_affiliation")}
+						span(hidden data-ol-inflight="pending") #{translate("pending")}…
+
+				| !{translate("are_you_still_at", {institutionName: userEmail.affiliation.institution.name}, ['strong'])} 
+
+				if location == '/user/settings'
+					| !{translate('please_reconfirm_institutional_email', {}, [{ name: 'span' }])}
+					if userEmail.default
+						span  #{translate('need_to_add_new_primary_before_remove')}
+				else
+					| !{translate("please_reconfirm_institutional_email", {}, [{name: 'a', attrs: {href: '/user/settings?remove=' + userEmail.email}}])}
+
+				|  
+				a(href="/learn/how-to/Institutional_Email_Reconfirmation") #{translate("learn_more")}
+
+			div(hidden data-ol-sent)
+				| !{translate("please_check_your_inbox_to_confirm", {institutionName: userEmail.affiliation.institution.name}, ['strong'])}
+				|  
+				button.btn-inline-link(
+					type="submit"
+					data-ol-disabled-inflight
+				)
+					span(data-ol-inflight="idle") #{translate('resend_confirmation_email')}
+					span(hidden data-ol-inflight="pending") #{translate("pending")}…
+
+mixin reconfirmedAffiliationNotification-marketing(userEmail)
+	.alert.alert-info
+		.reconfirm-notification
+			div(style="width:100%;")
+				//- extra div for flex styling
+				| !{translate("your_affiliation_is_confirmed", {institutionName: userEmail.affiliation.institution.name}, ['strong'])}
+				|
+				| #{translate('thank_you_exclamation')}

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

@@ -116,40 +116,48 @@ function showMessages(formEl, messageBag) {
   })
 }
 
-function formInflightHelper(el) {
-  const disabledEl = el.querySelector('[data-ol-disabled-inflight]')
-  const showWhenNotInflightEl = el.querySelector('[data-ol-inflight="idle"]')
-  const showWhenInflightEl = el.querySelector('[data-ol-inflight="pending"]')
+export function inflightHelper(el) {
+  const disabledInflight = el.querySelectorAll('[data-ol-disabled-inflight]')
+  const showWhenNotInflight = el.querySelectorAll('[data-ol-inflight="idle"]')
+  const showWhenInflight = el.querySelectorAll('[data-ol-inflight="pending"]')
 
   el.addEventListener('pending', () => {
-    disabledEl.disabled = true
-    toggleDisplay(showWhenNotInflightEl, showWhenInflightEl)
+    disabledInflight.forEach(el => {
+      el.disabled = true
+    })
+    toggleDisplay(showWhenNotInflight, showWhenInflight)
   })
 
   el.addEventListener('idle', () => {
-    disabledEl.disabled = false
-    toggleDisplay(showWhenInflightEl, showWhenNotInflightEl)
+    disabledInflight.forEach(el => {
+      el.disabled = false
+    })
+    toggleDisplay(showWhenInflight, showWhenNotInflight)
   })
 }
 
 function formSentHelper(el) {
-  const showWhenPending = el.querySelector('[data-ol-not-sent]')
-  const showWhenDone = el.querySelector('[data-ol-sent]')
-  if (!showWhenDone) return
+  const showWhenPending = el.querySelectorAll('[data-ol-not-sent]')
+  const showWhenDone = el.querySelectorAll('[data-ol-sent]')
+  if (showWhenDone.length === 0) return
 
   el.addEventListener('sent', () => {
     toggleDisplay(showWhenPending, showWhenDone)
   })
 }
 
-function toggleDisplay(hideEl, showEl) {
-  hideEl.setAttribute('hidden', '')
-  showEl.removeAttribute('hidden')
+function toggleDisplay(hide, show) {
+  hide.forEach(el => {
+    el.hidden = true
+  })
+  show.forEach(el => {
+    el.hidden = false
+  })
 }
 
 export function hydrateForm(el) {
   formSubmitHelper(el)
-  formInflightHelper(el)
+  inflightHelper(el)
   formSentHelper(el)
 
   el.querySelectorAll('input').forEach(inputEl => {

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

@@ -0,0 +1,10 @@
+import { inflightHelper } from '../form-helpers/hydrate-form'
+
+function setup(el) {
+  inflightHelper(el)
+  el.addEventListener('click', function () {
+    el.dispatchEvent(new Event('pending'))
+  })
+}
+
+document.querySelectorAll('[data-ol-slow-link]').forEach(setup)

services/web/frontend/js/marketing.js

@@ -2,6 +2,7 @@ import './utils/webpack-public-path'
 import 'jquery'
 import 'bootstrap'
 import './features/form-helpers/hydrate-form'
+import './features/link-helpers/slow-link'
 import './features/contact-form'
 import './features/event-tracking'