From 011e719fdfaf465452834a775d722aea36c1c928 Mon Sep 17 00:00:00 2001 From: Jakob Ackermann Date: Tue, 21 Sep 2021 15:47:09 +0200 Subject: [PATCH] Merge pull request #5125 from overleaf/jpa-portal-de-ng [web] de-ng portals page GitOrigin-RevId: 2460c51fb0f81be758c5804e66803a98b614b304 --- .../src/Features/User/UserEmailsController.js | 2 +- .../reconfirm_affiliation-marketing.pug | 61 +++++++++++++++++++ .../js/features/form-helpers/hydrate-form.js | 38 +++++++----- .../js/features/link-helpers/slow-link.js | 10 +++ services/web/frontend/js/marketing.js | 1 + 5 files changed, 96 insertions(+), 16 deletions(-) create mode 100644 services/web/app/views/_mixins/reconfirm_affiliation-marketing.pug create mode 100644 services/web/frontend/js/features/link-helpers/slow-link.js diff --git a/services/web/app/src/Features/User/UserEmailsController.js b/services/web/app/src/Features/User/UserEmailsController.js index cff626fb0d..5538911e3a 100644 --- a/services/web/app/src/Features/User/UserEmailsController.js +++ b/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) } ) }) diff --git a/services/web/app/views/_mixins/reconfirm_affiliation-marketing.pug b/services/web/app/views/_mixins/reconfirm_affiliation-marketing.pug new file mode 100644 index 0000000000..de3fa283fd --- /dev/null +++ b/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')} diff --git a/services/web/frontend/js/features/form-helpers/hydrate-form.js b/services/web/frontend/js/features/form-helpers/hydrate-form.js index 14e34b0a74..831dc54c54 100644 --- a/services/web/frontend/js/features/form-helpers/hydrate-form.js +++ b/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 => { diff --git a/services/web/frontend/js/features/link-helpers/slow-link.js b/services/web/frontend/js/features/link-helpers/slow-link.js new file mode 100644 index 0000000000..501a6ce796 --- /dev/null +++ b/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) diff --git a/services/web/frontend/js/marketing.js b/services/web/frontend/js/marketing.js index b079a5dc33..957410d7a8 100644 --- a/services/web/frontend/js/marketing.js +++ b/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'