diff --git a/services/web/app/src/Features/User/UserPagesController.mjs b/services/web/app/src/Features/User/UserPagesController.mjs index 55bbd136b9..c753d2bd78 100644 --- a/services/web/app/src/Features/User/UserPagesController.mjs +++ b/services/web/app/src/Features/User/UserPagesController.mjs @@ -195,6 +195,22 @@ async function accountSuspended(req, res) { }) } +async function reconfirmAccountPage(req, res) { + const pageData = { + reconfirm_email: req.session.reconfirm_email, + } + const { variant } = await SplitTestHandler.promises.getAssignment( + req, + res, + 'auth-pages-bs5' + ) + + const template = + variant === 'enabled' ? 'user/reconfirm-bs5' : 'user/reconfirm' + + res.render(template, pageData) +} + const UserPagesController = { accountSuspended: expressify(accountSuspended), @@ -239,13 +255,7 @@ const UserPagesController = { res.render('user/one_time_login') }, - renderReconfirmAccountPage(req, res) { - const pageData = { - reconfirm_email: req.session.reconfirm_email, - } - // when a user must reconfirm their account - res.render('user/reconfirm', pageData) - }, + renderReconfirmAccountPage: expressify(reconfirmAccountPage), settingsPage: expressify(settingsPage), diff --git a/services/web/app/views/user/reconfirm-bs5.pug b/services/web/app/views/user/reconfirm-bs5.pug new file mode 100644 index 0000000000..959abf26c6 --- /dev/null +++ b/services/web/app/views/user/reconfirm-bs5.pug @@ -0,0 +1,69 @@ +extends ../layout-website-redesign-bootstrap-5 +include ../_mixins/recaptcha + +block content + - var email = reconfirm_email ? reconfirm_email : "" + - var showCaptcha = settings.recaptcha && settings.recaptcha.siteKey && !(settings.recaptcha.disabled && settings.recaptcha.disabled.passwordReset) + + if showCaptcha + script(type="text/javascript", nonce=scriptNonce, src="https://www.recaptcha.net/recaptcha/api.js?render=explicit") + div( + id="recaptcha" + class="g-recaptcha" + data-sitekey=settings.recaptcha.siteKey + data-size="invisible" + data-badge="inline" + ) + + main#main-content(data-ol-captcha-retry-trigger-area="") + .container.auth-aux-container(style="max-width: 420px;") + form( + data-ol-async-form + name="reconfirmAccountForm" + action="/user/reconfirm" + method="POST" + aria-label=translate('request_reconfirmation_email') + captcha=(showCaptcha ? '' : false) + captcha-action-name=(showCaptcha ? "passwordReset" : false) + ) + h1.h5.mb-3 #{translate("reconfirm_account")} + p #{translate('reconfirm_explained')} + | + a(href=`mailto:${settings.adminEmail}`) #{settings.adminEmail} + | . + + div(data-ol-not-sent) + +formMessages() + + input(type="hidden" name="_csrf" value=csrfToken) + .form-group.mb-3 + label.form-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.w-100( + style="white-space: normal;" + 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 #{translate('password_reset_email_sent')} + + if showCaptcha + +recaptchaConditions diff --git a/services/web/locales/en.json b/services/web/locales/en.json index 6918ede1f3..01575e5c69 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -1672,6 +1672,7 @@ "recompile_from_scratch": "Recompile from scratch", "recompile_pdf": "Recompile the PDF", "reconfirm": "reconfirm", + "reconfirm_account": "Reconfirm account", "reconfirm_explained": "We need to reconfirm your account. Please request a password reset link via the form below to reconfirm your account. If you have any problems reconfirming your account, please contact us at", "reconnect": "Try again", "reconnecting": "Reconnecting",