From dc179a29df8a74832e80b825d2bf11a2dc5d19df Mon Sep 17 00:00:00 2001 From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com> Date: Wed, 21 Jan 2026 16:05:38 +0100 Subject: [PATCH] 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 GitOrigin-RevId: e37d30f7ae7487210404e81fbedd31d210fa26ac --- .../web/app/views/beta_program/opt_in.pug | 125 +++++++++--------- .../web/app/views/user/accountSuspended.pug | 13 +- services/web/app/views/user/confirm_email.pug | 85 ++++++------ .../web/app/views/user/email-preferences.pug | 71 +++++----- .../web/app/views/user/one_time_login.pug | 27 ++-- services/web/app/views/user/register.pug | 25 ++-- services/web/app/views/user/sessions.pug | 109 +++++++-------- .../frontend/stories/page-layouts.stories.tsx | 35 ----- 8 files changed, 230 insertions(+), 260 deletions(-) diff --git a/services/web/app/views/beta_program/opt_in.pug b/services/web/app/views/beta_program/opt_in.pug index 9975692e67..a651c4f067 100644 --- a/services/web/app/views/beta_program/opt_in.pug +++ b/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 diff --git a/services/web/app/views/user/accountSuspended.pug b/services/web/app/views/user/accountSuspended.pug index 1a03beb4df..bc253afc25 100644 --- a/services/web/app/views/user/accountSuspended.pug +++ b/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}`}}])} diff --git a/services/web/app/views/user/confirm_email.pug b/services/web/app/views/user/confirm_email.pug index d783996076..b1afadc0b5 100644 --- a/services/web/app/views/user/confirm_email.pug +++ b/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')} diff --git a/services/web/app/views/user/email-preferences.pug b/services/web/app/views/user/email-preferences.pug index 2071f64705..f0213bb8da 100644 --- a/services/web/app/views/user/email-preferences.pug +++ b/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 + - 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( + 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 diff --git a/services/web/app/views/user/one_time_login.pug b/services/web/app/views/user/one_time_login.pug index e5d50c5a2d..b4c5071320 100644 --- a/services/web/app/views/user/one_time_login.pug +++ b/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. diff --git a/services/web/app/views/user/register.pug b/services/web/app/views/user/register.pug index ff53002ccb..b7e602e6e3 100644 --- a/services/web/app/views/user/register.pug +++ b/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. diff --git a/services/web/app/views/user/sessions.pug b/services/web/app/views/user/sessions.pug index 744b804687..19c8d8f120 100644 --- a/services/web/app/views/user/sessions.pug +++ b/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')} diff --git a/services/web/frontend/stories/page-layouts.stories.tsx b/services/web/frontend/stories/page-layouts.stories.tsx index 18df4004a4..501f3b7670 100644 --- a/services/web/frontend/stories/page-layouts.stories.tsx +++ b/services/web/frontend/stories/page-layouts.stories.tsx @@ -125,19 +125,6 @@ export const PostGateway = () => ( ) -export const AccountSuspended = () => ( -
-
-
-
-

Your account is suspended

-

{lorem(6)}

-
-
-
-
-) - export const Restricted = () => ( <>