[web] migrate secondary confirm email page to bootstrap 5 (#23452)

GitOrigin-RevId: 39ff8856d40033df802a3d811c53d12f94e7d0ed

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

@@ -421,6 +421,10 @@ async function confirmSecondaryEmailPage(req, res) {
     return res.redirect(redirectURL)
   }
 
+  // Populates splitTestVariants with a value for the split test name and allows
+  // Pug to read it
+  await SplitTestHandler.promises.getAssignment(req, res, 'misc-b2c-pages-bs5')
+
   AnalyticsManager.recordEventForUserInBackground(
     userId,
     'confirm-secondary-email-page-displayed'

services/web/app/views/user/confirmSecondaryEmail.pug

@@ -3,6 +3,8 @@ extends ../layout-marketing
 block vars
 	- var suppressNavbar = true
 	- var suppressSkipToContent = true
+	- bootstrap5PageStatus = 'enabled'
+	- bootstrap5PageSplitTest = 'misc-b2c-pages-bs5'
 
 block entrypointVar
 	- entrypoint = 'pages/user/confirm-secondary-email'

services/web/frontend/stylesheets/bootstrap-5/pages/all.scss

@@ -44,5 +44,6 @@
 @import 'login';
 @import 'register';
 @import 'onboarding-confirm-email';
+@import 'secondary-confirm-email';
 @import 'admin/admin';
 @import 'admin/project-url-lookup';

services/web/frontend/stylesheets/bootstrap-5/pages/secondary-confirm-email.scss

@@ -0,0 +1,27 @@
+#confirm-secondary-email {
+  .confirm-email-form .confirm-email-form-inner {
+    margin: auto;
+    max-width: 480px;
+
+    .notification {
+      margin-bottom: var(--spacing-05);
+    }
+
+    .text-danger {
+      display: flex;
+      gap: var(--spacing-03);
+      padding: var(--spacing-02);
+    }
+
+    .form-label {
+      font-weight: normal;
+    }
+
+    .form-actions {
+      margin-top: var(--spacing-07);
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-05);
+    }
+  }
+}