[web] Migrate 4 simple user pages to BS5 (#25947)

* Migrate email-preferences.pug to BS5

https://www.dev-overleaf.com/user/email-preferences

* Migrate sessions.pug to BS5

https://www.dev-overleaf.com/user/sessions

* Migrate one_time_login.pug to BS5

https://www.dev-overleaf.com/read-only/one-time-login

* Fix positions in back-to-btns mixin

* Migrate accountSuspended.pug to BS5

https://www.dev-overleaf.com/account-suspended

* Set max-width of 400px in account-suspended page

* Fix column widths in sessions.pug

GitOrigin-RevId: 8ec6100fb230cf532049fcc9aba7c00def20ea0e

services/web/app/views/_mixins/back_to_btns.pug

@@ -1,4 +1,4 @@
 mixin back-to-btns(settingsAnchor)
-	a.btn.btn-secondary(href=`/user/settings${settingsAnchor ? '#' + settingsAnchor : '' }`) #{translate('back_to_account_settings')}
-	| 
-	a.btn.btn-secondary(href='/project') #{translate('back_to_your_projects')}
+	.d-flex.gap-3
+		a.btn.btn-secondary(href=`/user/settings${settingsAnchor ? '#' + settingsAnchor : '' }`) #{translate('back_to_account_settings')}
+		a.btn.btn-secondary(href='/project') #{translate('back_to_your_projects')}

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

@@ -4,12 +4,12 @@ block vars
 	- var suppressNavbar = true
 	- var suppressFooter = true
 	- metadata.robotsNoindexNofollow = true
-	- bootstrap5PageStatus = 'disabled'
 
 block content
 	main.content.content-alt#main-content
 		.container-custom-sm.mx-auto
 			.card
-				h3 #{translate('your_account_is_suspended')}
-				p #{translate('sorry_this_account_has_been_suspended')}
-				p !{translate('please_contact_us_if_you_think_this_is_in_error', {}, [{name: 'a', attrs: {href: `mailto:${settings.adminEmail}`}}])}
+				.card-body
+					h3 #{translate('your_account_is_suspended')}
+					p #{translate('sorry_this_account_has_been_suspended')}
+					p !{translate('please_contact_us_if_you_think_this_is_in_error', {}, [{name: 'a', attrs: {href: `mailto:${settings.adminEmail}`}}])}

services/web/app/views/user/email-preferences.pug

@@ -1,49 +1,47 @@
 extends ../layout-marketing
 include ../_mixins/back_to_btns
 
-block vars
-	- bootstrap5PageStatus = 'disabled'
-
 block content
 	main.content.content-alt#main-content
 		.container
 			.row
-				.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
+				.col-lg-10.offset-lg-1.col-xl-8.offset-xl-2
 					.card
-						.page-header
-							h1 #{translate("newsletter_info_title")}
-
-						p #{translate("newsletter_info_summary")}
-
-						- var submitAction
-						if subscribed
-							- submitAction = '/user/newsletter/unsubscribe'
-							p !{translate("newsletter_info_subscribed", {}, ['strong'])}
-						else
-							- submitAction = '/user/newsletter/subscribe'
-							p !{translate("newsletter_info_unsubscribed", {}, ['strong'])}
-
-						form(
-							data-ol-async-form
-							data-ol-reload-on-success
-							name="newsletterForm"
-							action=submitAction
-							method="POST"
-						)
-							input(name='_csrf', type='hidden', value=csrfToken)
-							+formMessages()
-							p.actions.text-center
-								if subscribed
-									button.btn-danger.btn(type='submit', data-ol-disabled-inflight)
-										span(data-ol-inflight="idle") #{translate("unsubscribe")}
-										span(hidden data-ol-inflight="pending") #{translate("saving")}…
-								else
-									button.btn-primary.btn(type='submit', data-ol-disabled-inflight)
-										span(data-ol-inflight="idle") #{translate("subscribe")}
-										span(hidden data-ol-inflight="pending") #{translate("saving")}…
-
-						if subscribed
-							p #{translate("newsletter_info_note")}
-
-						.page-separator
-						+back-to-btns()
+						.card-body
+							.page-header
+								h1 #{translate("newsletter_info_title")}
+	
+							p #{translate("newsletter_info_summary")}
+	
+							- var submitAction
+							if subscribed
+								- submitAction = '/user/newsletter/unsubscribe'
+								p !{translate("newsletter_info_subscribed", {}, ['strong'])}
+							else
+								- submitAction = '/user/newsletter/subscribe'
+								p !{translate("newsletter_info_unsubscribed", {}, ['strong'])}
+	
+							form(
+								data-ol-async-form
+								data-ol-reload-on-success
+								name="newsletterForm"
+								action=submitAction
+								method="POST"
+							)
+								input(name='_csrf', type='hidden', value=csrfToken)
+								+formMessages()
+								p.actions.text-center
+									if subscribed
+										button.btn-danger.btn(type='submit', data-ol-disabled-inflight)
+											span(data-ol-inflight="idle") #{translate("unsubscribe")}
+											span(hidden data-ol-inflight="pending") #{translate("saving")}…
+									else
+										button.btn-primary.btn(type='submit', data-ol-disabled-inflight)
+											span(data-ol-inflight="idle") #{translate("subscribe")}
+											span(hidden data-ol-inflight="pending") #{translate("saving")}…
+	
+							if subscribed
+								p #{translate("newsletter_info_note")}
+	
+							.page-separator
+							+back-to-btns()

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

@@ -1,20 +1,18 @@
 extends ../layout-marketing
 
-block vars
-	- bootstrap5PageStatus = 'disabled'
-
 block content
 	main.content.content-alt#main-content
 		.container
 			.row
-				.col-md-6.col-md-offset-3.col-lg-4.col-lg-offset-4
+				.col-lg-6.offset-lg-3.col-xl-4.offset-xl-4
 					.card
-						.page-header
-							h1 We're back!
-						p Overleaf is now running normally.
-						p
-							| Please
-							|
-							a(href="/login") log in
-							|
-							| to continue working on your projects.
+						.card-body
+							.page-header
+								h1 We're back!
+							p Overleaf is now running normally.
+							p
+								| Please
+								|
+								a(href="/login") log in
+								|
+								| to continue working on your projects.

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

@@ -1,72 +1,70 @@
 extends ../layout-marketing
 
-block vars
-	- bootstrap5PageStatus = 'disabled'
-
 block content
 	main.content.content-alt#main-content
 		.container
 			.row
-				.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
+				.col-lg-10.offset-lg-1.col-xl-8.offset-xl-2
 					.card.clear-user-sessions
-						.page-header
-							h1  #{translate("your_sessions")}
-
-						if currentSession.ip_address && currentSession.session_created
-							h3 #{translate("current_session")}
-							div
-								table.table.table-striped
-									thead
-										tr
-											th #{translate("ip_address")}
-											th #{translate("session_created_at")}
-										tr
-											td #{currentSession.ip_address}
-											td #{moment(currentSession.session_created).utc().format('Do MMM YYYY, h:mm a')} UTC
-
-						h3 #{translate("other_sessions")}
-						div
-							p.small
-								| !{translate("clear_sessions_description")}
-
-						form(
-							data-ol-async-form
-							action='/user/sessions/clear'
-							method='POST'
-						)
-							input(name='_csrf' type='hidden' value=csrfToken)
-							div(data-ol-not-sent)
-								if sessions.length == 0
-									p.text-center
-										| #{translate("no_other_sessions")}
-
-								if sessions.length > 0
+						.card-body
+							.page-header
+								h1  #{translate("your_sessions")}
+	
+							if currentSession.ip_address && currentSession.session_created
+								h3 #{translate("current_session")}
+								div
 									table.table.table-striped
 										thead
 											tr
 												th #{translate("ip_address")}
 												th #{translate("session_created_at")}
-										for session in sessions
 											tr
-												td #{session.ip_address}
-												td #{moment(session.session_created).utc().format('Do MMM YYYY, h:mm a')} UTC
-
-									p.actions
-										.text-center
-											button.btn.btn-lg.btn-primary(
-												type="submit"
-												data-ol-disable-inflight
-											)
-												span(data-ol-inflight="idle") #{translate('clear_sessions')}
-												span(hidden data-ol-inflight="pending") #{translate("processing")}…
-
-							div(hidden data-ol-sent)
-								p.text-center
-									| #{translate("no_other_sessions")}
-
-								p.text-success.text-center
-									| #{translate('clear_sessions_success')}
-						.page-separator
-						a.btn.btn-secondary(href='/user/settings') #{translate('back_to_account_settings')}
-						| 
-						a.btn.btn-secondary(href='/project') #{translate('back_to_your_projects')}
+												td #{currentSession.ip_address}
+												td #{moment(currentSession.session_created).utc().format('Do MMM YYYY, h:mm a')} UTC
+	
+							h3 #{translate("other_sessions")}
+							div
+								p.small
+									| !{translate("clear_sessions_description")}
+	
+							form(
+								data-ol-async-form
+								action='/user/sessions/clear'
+								method='POST'
+							)
+								input(name='_csrf' type='hidden' value=csrfToken)
+								div(data-ol-not-sent)
+									if sessions.length == 0
+										p.text-center
+											| #{translate("no_other_sessions")}
+	
+									if sessions.length > 0
+										table.table.table-striped
+											thead
+												tr
+													th #{translate("ip_address")}
+													th #{translate("session_created_at")}
+											for session in sessions
+												tr
+													td #{session.ip_address}
+													td #{moment(session.session_created).utc().format('Do MMM YYYY, h:mm a')} UTC
+	
+										p.actions
+											.text-center
+												button.btn.btn-lg.btn-primary(
+													type="submit"
+													data-ol-disable-inflight
+												)
+													span(data-ol-inflight="idle") #{translate('clear_sessions')}
+													span(hidden data-ol-inflight="pending") #{translate("processing")}…
+	
+								div(hidden data-ol-sent)
+									p.text-center
+										| #{translate("no_other_sessions")}
+	
+									p.text-success.text-center
+										| #{translate('clear_sessions_success')}
+							.page-separator
+							.d-flex.gap-3
+								a.btn.btn-secondary(href='/user/settings') #{translate('back_to_account_settings')}
+								a.btn.btn-secondary(href='/project') #{translate('back_to_your_projects')}

services/web/frontend/stylesheets/bootstrap-5/base/layout.scss

@@ -87,3 +87,7 @@ hr {
     text-decoration: none;
   }
 }
+
+.container-custom-sm {
+  max-width: 400px;
+}