From ae51e57c75c06cdf225ec5ba57079c6b7811ace2 Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Thu, 5 Jun 2025 13:06:02 +0200
Subject: [PATCH] Migrate user email confirmation page to Bootstrap 5 (#26026)

GitOrigin-RevId: 8e12b19fb941c0adfeaa16089bfe229e8816ad8d
---
 services/web/app/views/user/confirm_email.pug | 97 +++++++++----------
 1 file changed, 47 insertions(+), 50 deletions(-)

diff --git a/services/web/app/views/user/confirm_email.pug b/services/web/app/views/user/confirm_email.pug
index 37c04880b1..13e911f386 100644
--- a/services/web/app/views/user/confirm_email.pug
+++ b/services/web/app/views/user/confirm_email.pug
@@ -1,60 +1,57 @@
 extends ../layout-marketing
-
-block vars
-	- bootstrap5PageStatus = 'disabled'
+include ../_mixins/notification
 
 block content
 	main.content.content-alt#main-content
 		.container
 			.row
-				.col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3
+				.col-lg-8.offset-lg-2.col-xl-6.offset-xl-3
 					.card
-						.page-header(data-ol-hide-on-error-message="confirm-email-wrong-user")
-							h1 #{translate("confirm_email")}
-						form(
-							method="POST"
-							action="/logout"
-							id="logoutForm"
-						)
-							input(type="hidden", name="_csrf", value=csrfToken)
-							input(type="hidden", name="redirect", value=currentUrlWithQueryParams)
-						form(
-							data-ol-async-form,
-							data-ol-auto-submit,
-							name="confirmEmailForm"
-							action="/user/emails/confirm",
-							method="POST",
-							id="confirmEmailForm",
-						)
-							input(type="hidden", name="_csrf", value=csrfToken)
-							input(type="hidden", name="token", value=token)
+						.card-body
+							.page-header(data-ol-hide-on-error-message="confirm-email-wrong-user")
+								h1 #{translate("confirm_email")}
+							form(
+								method="POST"
+								action="/logout"
+								id="logoutForm"
+							)
+								input(type="hidden", name="_csrf", value=csrfToken)
+								input(type="hidden", name="redirect", value=currentUrlWithQueryParams)
+							form(
+								data-ol-async-form,
+								data-ol-auto-submit,
+								name="confirmEmailForm"
+								action="/user/emails/confirm",
+								method="POST",
+								id="confirmEmailForm",
+							)
+								input(type="hidden", name="_csrf", value=csrfToken)
+								input(type="hidden", name="token", value=token)
+
+								div(data-ol-not-sent)
+									+formMessages()
+									div(data-ol-custom-form-message="confirm-email-wrong-user" hidden)
+										h1.h3 #{translate("we_cant_confirm_this_email")}
+										p !{translate("to_confirm_email_address_you_must_be_logged_in_with_the_requesting_account")}
+										p !{translate("you_are_currently_logged_in_as", {email: getUserEmail()})}
+										.actions
+											button.btn-primary.btn.w-100(
+												form="logoutForm"
+											) #{translate('log_in_with_a_different_account')}
 
-							div(data-ol-not-sent)
-								+formMessages()
-								div(data-ol-custom-form-message="confirm-email-wrong-user" hidden)
-									h1.h3 #{translate("we_cant_confirm_this_email")}
-									p !{translate("to_confirm_email_address_you_must_be_logged_in_with_the_requesting_account")}
-									p !{translate("you_are_currently_logged_in_as", {email: getUserEmail()})}
 									.actions
-										button.btn-primary.btn.btn-block(
-											form="logoutForm"
-										) #{translate('log_in_with_a_different_account')}
+										button.btn-primary.btn.w-100(
+											type='submit',
+											data-ol-disabled-inflight
+											data-ol-hide-on-error-message="confirm-email-wrong-user"
+										)
+											span(data-ol-inflight="idle")
+												| #{translate('confirm')}
+											span(hidden data-ol-inflight="pending")
+												span(role='status').spinner-border.spinner-border-sm.mx-2
 
-								.actions
-									button.btn-primary.btn.btn-block(
-										type='submit',
-										data-ol-disabled-inflight
-										data-ol-hide-on-error-message="confirm-email-wrong-user"
-									)
-										span(data-ol-inflight="idle")
-											| #{translate('confirm')}
-										span(hidden data-ol-inflight="pending")
-											i.fa.fa-fw.fa-spin.fa-spinner(aria-hidden="true")
-											| &nbsp;#{translate('confirming')}… 
-
-							div(hidden data-ol-sent)
-								.alert.alert-success
-									| #{translate('thank_you_email_confirmed')}
-								div.text-center
-									a.btn.btn-primary(href="/user/settings")
-										| #{translate('go_to_account_settings')}
+								div(hidden data-ol-sent)
+									+notification({ariaLive: 'polite', type: 'success', className: 'mb-3', content: translate("thank_you_email_confirmed")})
+									div.text-center
+										a.btn.btn-primary(href="/user/settings")
+											| #{translate('go_to_account_settings')}