Merge pull request #22615 from overleaf/mf-reconfirm-page-migrate-bs5

[web] Migrate reconfirm account page to bootstrap 5 and website-redesign styling

GitOrigin-RevId: b65f3ad69a5914ce42dc58c21436c8616393f724

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),
 

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

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",