Align beta, account, labs, notifications, and subscription support pages with website redesign (#30882)

* Move beta, account, labs, and notifications views to website-redesign layout

* Remove outdated Stories

---------

Co-authored-by: Antoine Clausse <antoine.clausse@overleaf.com>
GitOrigin-RevId: e37d30f7ae7487210404e81fbedd31d210fa26ac

services/web/app/views/beta_program/opt_in.pug

@@ -1,71 +1,72 @@
-extends ../layout-marketing
+extends ../layout-website-redesign
 include ../_mixins/back_to_btns
 
+block vars
+	- isWebsiteRedesign = true
+
 block content
-	main#main-content.content.content-alt
+	main#main-content.content
 		.container.beta-opt-in-wrapper
 			.row
 				.col-lg-10.offset-lg-1.col-xl-8.offset-xl-2
-					.card
-						.card-body
-							.page-header
-								h1
-									| #{translate("sharelatex_beta_program")}
-							.beta-opt-in
-								.container-fluid
-									.row
-										.col-lg-12
-											if user.betaProgram
-												p.text-center
-													strong #{translate("beta_program_already_participating")}.
-												p !{translate("thank_you_for_being_part_of_our_beta_program", {}, ['strong'])}.
-											else
-												p.text-center
-													strong #{translate("beta_program_not_participating")}.
-												p !{translate("beta_program_benefits", {}, ['strong'])}
+					.page-header
+						h1
+							| #{translate("sharelatex_beta_program")}
+					.beta-opt-in
+						.container-fluid
+							.row
+								.col-lg-12
+									if user.betaProgram
+										p.text-center
+											strong #{translate("beta_program_already_participating")}.
+										p !{translate("thank_you_for_being_part_of_our_beta_program", {}, ['strong'])}.
+									else
+										p.text-center
+											strong #{translate("beta_program_not_participating")}.
+										p !{translate("beta_program_benefits", {}, ['strong'])}
 
-											p #[strong How it works:]
-											ul
-												li
-													| #{translate("beta_program_badge_description")} 
-													span.beta-badge.badge.bg-beta.bg-beta(
-														aria-label=translate('beta_feature_badge')
-													)
-														span.badge-content β
-												li !{translate("you_will_be_able_to_contact_us_any_time_to_share_your_feedback", {}, ['strong'])}.
-												li !{translate("we_may_also_contact_you_from_time_to_time_by_email_with_a_survey", {}, ['strong'])}.
-												li !{translate("you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page", {}, ['strong'])}.
-											p !{translate("note_features_under_development", {}, ['strong'])}.
+									p #[strong How it works:]
+									ul
+										li
+											| #{translate("beta_program_badge_description")} 
+											span.beta-badge.badge.bg-beta.bg-beta(
+												aria-label=translate('beta_feature_badge')
+											)
+												span.badge-content β
+										li !{translate("you_will_be_able_to_contact_us_any_time_to_share_your_feedback", {}, ['strong'])}.
+										li !{translate("we_may_also_contact_you_from_time_to_time_by_email_with_a_survey", {}, ['strong'])}.
+										li !{translate("you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page", {}, ['strong'])}.
+									p !{translate("note_features_under_development", {}, ['strong'])}.
 
-									.row.text-center
-										.col-lg-12
-											if user.betaProgram
-												form(
-													data-ol-regular-form
-													method='post'
-													action='/beta/opt-out'
-													novalidate
+							.row.text-center
+								.col-lg-12
+									if user.betaProgram
+										form(
+											data-ol-regular-form
+											method='post'
+											action='/beta/opt-out'
+											novalidate
+										)
+											input(name='_csrf' type='hidden' value=csrfToken)
+											.form-group
+												a.btn.btn-primary.btn-lg(
+													href='https://forms.gle/CFEsmvZQTAwHCd3X9'
+													target='_blank'
+													rel='noopener noreferrer'
+												) #{translate("give_feedback")}
+											.form-group
+												button.btn.btn-secondary-info.btn-secondary.btn-sm(
+													type='submit'
+													data-ol-disabled-inflight
 												)
-													input(name='_csrf' type='hidden' value=csrfToken)
-													.form-group
-														a.btn.btn-primary.btn-lg(
-															href='https://forms.gle/CFEsmvZQTAwHCd3X9'
-															target='_blank'
-															rel='noopener noreferrer'
-														) #{translate("give_feedback")}
-													.form-group
-														button.btn.btn-secondary-info.btn-secondary.btn-sm(
-															type='submit'
-															data-ol-disabled-inflight
-														)
-															span(data-ol-inflight='idle') #{translate("beta_program_opt_out_action")}
-															span(hidden data-ol-inflight='pending') #{translate("processing")}…
-											else
-												form(data-ol-regular-form method='post' action='/beta/opt-in')
-													input(name='_csrf' type='hidden' value=csrfToken)
-													.form-group
-														button.btn.btn-primary(type='submit' data-ol-disabled-inflight)
-															span(data-ol-inflight='idle') #{translate("beta_program_opt_in_action")}
-															span(hidden data-ol-inflight='pending') #{translate("joining")}…
-								.page-separator
-								+back-to-btns
+													span(data-ol-inflight='idle') #{translate("beta_program_opt_out_action")}
+													span(hidden data-ol-inflight='pending') #{translate("processing")}…
+									else
+										form(data-ol-regular-form method='post' action='/beta/opt-in')
+											input(name='_csrf' type='hidden' value=csrfToken)
+											.form-group
+												button.btn.btn-primary(type='submit' data-ol-disabled-inflight)
+													span(data-ol-inflight='idle') #{translate("beta_program_opt_in_action")}
+													span(hidden data-ol-inflight='pending') #{translate("joining")}…
+					.page-separator
+					+back-to-btns

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

@@ -1,15 +1,14 @@
-extends ../layout-marketing
+extends ../layout-website-redesign
 
 block vars
 	- var suppressNavbar = true
 	- var suppressFooter = true
 	- metadata.robotsNoindexNofollow = true
+	- isWebsiteRedesign = true
 
 block content
-	main#main-content.content.content-alt
+	main#main-content.content
 		.container-custom-sm.mx-auto
-			.card
-				.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}`}}])}
+			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/confirm_email.pug

@@ -1,51 +1,52 @@
-extends ../layout-marketing
+extends ../layout-website-redesign
 include ../_mixins/notification
 
+block vars
+	- isWebsiteRedesign = true
+
 block content
-	main#main-content.content.content-alt
+	main#main-content.content
 		.container
 			.row
 				.col-lg-8.offset-lg-2.col-xl-6.offset-xl-3
-					.card
-						.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(name='_csrf' type='hidden' value=csrfToken)
-								input(name='redirect' type='hidden' value=currentUrlWithQueryParams)
-							form(
-								name='confirmEmailForm'
-								data-ol-async-form
-								data-ol-auto-submit
-								action='/user/emails/confirm'
-								method='POST'
-								id='confirmEmailForm'
-							)
-								input(name='_csrf' type='hidden' value=csrfToken)
-								input(name='token' type='hidden' value=token)
+					.page-header(data-ol-hide-on-error-message='confirm-email-wrong-user')
+						h1 #{translate("confirm_email")}
+					form(method='POST' action='/logout' id='logoutForm')
+						input(name='_csrf' type='hidden' value=csrfToken)
+						input(name='redirect' type='hidden' value=currentUrlWithQueryParams)
+					form(
+						name='confirmEmailForm'
+						data-ol-async-form
+						data-ol-auto-submit
+						action='/user/emails/confirm'
+						method='POST'
+						id='confirmEmailForm'
+					)
+						input(name='_csrf' type='hidden' value=csrfToken)
+						input(name='token' type='hidden' 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.w-100(form='logoutForm') #{translate('log_in_with_a_different_account')}
 
-									.actions
-										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.spinner-border.spinner-border-sm.mx-2(role='status')
+							.actions
+								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.spinner-border.spinner-border-sm.mx-2(role='status')
 
-								div(hidden data-ol-sent)
-									+notification({ariaLive: 'polite', type: 'success', className: 'mb-3', content: translate('thank_you_email_confirmed')})
-									.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')})
+							.text-center
+								a.btn.btn-primary(href='/user/settings')
+									| #{translate('go_to_account_settings')}

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

@@ -1,47 +1,48 @@
-extends ../layout-marketing
+extends ../layout-website-redesign
 include ../_mixins/back_to_btns
 
+block vars
+	- isWebsiteRedesign = true
+
 block content
-	main#main-content.content.content-alt
+	main#main-content.content
 		.container
 			.row
 				.col-lg-10.offset-lg-1.col-xl-8.offset-xl-2
-					.card
-						.card-body
-							.page-header
-								h1 #{translate("newsletter_info_title")}
+					.page-header
+						h1 #{translate("newsletter_info_title")}
+
+					p #{translate("newsletter_info_summary")}
 
-							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'])}
 
-							- var submitAction
+					form(
+						name='newsletterForm'
+						data-ol-async-form
+						data-ol-reload-on-success
+						action=submitAction
+						method='POST'
+					)
+						input(name='_csrf' type='hidden' value=csrfToken)
+						+formMessages
+						p.actions.text-center
 							if subscribed
-								- submitAction = '/user/newsletter/unsubscribe'
-								p !{translate("newsletter_info_subscribed", {}, ['strong'])}
+								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
-								- submitAction = '/user/newsletter/subscribe'
-								p !{translate("newsletter_info_unsubscribed", {}, ['strong'])}
+								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")}…
 
-							form(
-								name='newsletterForm'
-								data-ol-async-form
-								data-ol-reload-on-success
-								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")}
+					if subscribed
+						p #{translate("newsletter_info_note")}
 
-							.page-separator
-							+back-to-btns
+					.page-separator
+					+back-to-btns

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

@@ -1,18 +1,19 @@
-extends ../layout-marketing
+extends ../layout-website-redesign
+
+block vars
+	- isWebsiteRedesign = true
 
 block content
-	main#main-content.content.content-alt
+	main#main-content.content
 		.container
 			.row
 				.col-lg-6.offset-lg-3.col-xl-4.offset-xl-4
-					.card
-						.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.
+					.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/register.pug

@@ -1,7 +1,10 @@
-extends ../layout-marketing
+extends ../layout-website-redesign
+
+block vars
+	- isWebsiteRedesign = true
 
 block content
-	main#main-content.content.content-alt
+	main#main-content.content
 		.container
 			.row
 				.registration-message
@@ -23,13 +26,11 @@ block content
 
 			.row
 				.col-lg-8.offset-lg-2.col-xl-6.offset-xl-3
-					.card
-						.card-body
-							.page-header
-								h1 #{translate("register")}
-							p
-								| Please contact
-								|
-								strong #{settings.adminEmail}
-								|
-								| to create an account.
+					.page-header
+						h1 #{translate("register")}
+					p
+						| Please contact
+						|
+						strong #{settings.adminEmail}
+						|
+						| to create an account.

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

@@ -1,66 +1,67 @@
-extends ../layout-marketing
+extends ../layout-website-redesign
+
+block vars
+	- isWebsiteRedesign = true
 
 block content
-	main#main-content.content.content-alt
+	main#main-content.content
 		.container
 			.row
 				.col-lg-10.offset-lg-1.col-xl-8.offset-xl-2
-					.card.clear-user-sessions
-						.card-body
-							.page-header
-								h1 #{translate("your_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
+					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")}
+					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")}
+					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")}
-											each session in sessions
-												tr
-													td #{session.ip_address}
-													td #{moment(session.session_created).utc().format('Do MMM YYYY, h:mm a')} UTC
+							if sessions.length > 0
+								table.table.table-striped
+									thead
+										tr
+											th #{translate("ip_address")}
+											th #{translate("session_created_at")}
+									each 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")}…
+								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")}
+						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')}
+							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/stories/page-layouts.stories.tsx

@@ -125,19 +125,6 @@ export const PostGateway = () => (
   </>
 )
 
-export const AccountSuspended = () => (
-  <main className="content content-alt" id="main-content">
-    <div className="container-custom-sm mx-auto">
-      <div className="card">
-        <div className="card-body">
-          <h3>Your account is suspended</h3>
-          <p>{lorem(6)}</p>
-        </div>
-      </div>
-    </div>
-  </main>
-)
-
 export const Restricted = () => (
   <>
     <Nav />
@@ -158,28 +145,6 @@ export const Restricted = () => (
   </>
 )
 
-export const OneTimeLogin = () => (
-  <>
-    <Nav />
-    <main className="content content-alt" id="main-content">
-      <div className="container">
-        <div className="row">
-          <div className="col-lg-6 offset-lg-3 col-xl-4 offset-xl-4">
-            <div className="card">
-              <div className="card-body">
-                <div className="page-header">
-                  <h1>We're back!</h1>
-                </div>
-                <p>Overleaf is now running normally.</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  </>
-)
-
 export const Invite = () => (
   <main className="content content-alt" id="invite-root">
     <OLRow className="row row-spaced">