From 983382f1f13c1d4101f8f27144afdc1d3056a020 Mon Sep 17 00:00:00 2001 From: Tim Down <158919+timdown@users.noreply.github.com> Date: Tue, 18 Nov 2025 10:57:52 +0000 Subject: [PATCH] Initial implementation of unified access registration first page (#29559) * Initial implementation of registration first page * CSS tweaks from review * Suppress skip-to-content link * Fix formatting * Make logo and footer bottom margin always appear in CIAM register page * Fix font size and margin of card footer text * Pug fixes from linter * Fixes from merge of main * Use translation string GitOrigin-RevId: 0486532112d81462a008206e3f1a97c409d39a6a --- services/web/.vscode/settings.json | 5 +- services/web/app/views/_mixins/ciam.pug | 27 ++++++ services/web/app/views/_mixins/recaptcha.pug | 6 +- .../app/views/_mixins/terms_of_service.pug | 5 +- .../stylesheets/abstracts/mixins.scss | 12 +++ .../web/frontend/stylesheets/ciam/all.scss | 1 + .../stylesheets/ciam/ciam-layout.scss | 86 ++++++++++++++----- .../stylesheets/ciam/ciam-register.scss | 24 ++++++ .../stylesheets/ciam/ds-design-system.scss | 3 + .../stylesheets/pages/editor/ide.scss | 5 +- .../stylesheets/pages/login-register.scss | 1 + .../pages/project-list-ds-nav.scss | 6 +- services/web/locales/en.json | 2 + .../img/digital-science/digital-science.svg | 1 + 14 files changed, 147 insertions(+), 37 deletions(-) create mode 100644 services/web/app/views/_mixins/ciam.pug create mode 100644 services/web/frontend/stylesheets/ciam/ciam-register.scss create mode 100644 services/web/frontend/stylesheets/ciam/ds-design-system.scss create mode 100644 services/web/public/img/digital-science/digital-science.svg diff --git a/services/web/.vscode/settings.json b/services/web/.vscode/settings.json index f3af5f569f..133731e8b3 100644 --- a/services/web/.vscode/settings.json +++ b/services/web/.vscode/settings.json @@ -3,8 +3,5 @@ "node_modules": true, "data": true }, - "cSpell.words": [ - "docstore", - "Tpds" - ] + "cSpell.words": ["docstore", "Tpds"] } diff --git a/services/web/app/views/_mixins/ciam.pug b/services/web/app/views/_mixins/ciam.pug new file mode 100644 index 0000000000..87de19e546 --- /dev/null +++ b/services/web/app/views/_mixins/ciam.pug @@ -0,0 +1,27 @@ +include terms_of_service +include recaptcha + +mixin ciamLogo + a.brand.overleaf-ds-logo(href='/' aria-label='Overleaf') + +mixin ciamCardSeparator + hr.ciam-card-separator + +mixin ciamCardFooter + .ciam-card-footer + +ciamCardSeparator + .ciam-footer-ds-logo + img( + src=buildImgPath('digital-science/digital-science.svg') + alt='Digital Science' + ) + p + | !{translate('advancing_research_with', { linkOverleaf: 'https://www.overleaf.com', linkPapers: 'https://www.papersapp.com/', linkDS: 'https://www.digital-science.com/products/' })} + +mixin ciamTermsOfServiceAgreement + p + +termsOfServiceAgreementContent + +mixin ciamRecaptchaConditions + p + +recaptchaConditionsContent diff --git a/services/web/app/views/_mixins/recaptcha.pug b/services/web/app/views/_mixins/recaptcha.pug index ec5604c825..2b4865d29f 100644 --- a/services/web/app/views/_mixins/recaptcha.pug +++ b/services/web/app/views/_mixins/recaptcha.pug @@ -1,2 +1,6 @@ +mixin recaptchaConditionsContent + | !{translate("recaptcha_conditions", {}, [{}, {name: 'a', attrs: {href: 'https://policies.google.com/privacy', rel: 'noopener noreferrer', target: '_blank'}}, {name: 'a', attrs: {href: 'https://policies.google.com/terms', rel: 'noopener noreferrer', target: '_blank'}}])} + mixin recaptchaConditions - .recaptcha-branding !{translate("recaptcha_conditions", {}, [{}, {name: 'a', attrs: {href: 'https://policies.google.com/privacy', rel: 'noopener noreferrer', target: '_blank'}}, {name: 'a', attrs: {href: 'https://policies.google.com/terms', rel: 'noopener noreferrer', target: '_blank'}}])} + .recaptcha-branding + +recaptchaConditionsContent diff --git a/services/web/app/views/_mixins/terms_of_service.pug b/services/web/app/views/_mixins/terms_of_service.pug index b0b5aaf81d..4ae30508e3 100644 --- a/services/web/app/views/_mixins/terms_of_service.pug +++ b/services/web/app/views/_mixins/terms_of_service.pug @@ -1,3 +1,6 @@ +mixin termsOfServiceAgreementContent + | !{translate("by_registering_you_agree_to_our_terms_of_service", {}, [{name: 'a', attrs: {href: '/legal#Terms', target: '_blank'}}, {name: 'a', attrs: {href: '/legal#Privacy', target: '_blank'}}])} + mixin termsOfServiceAgreement .tos-agreement-notice - | !{translate("by_registering_you_agree_to_our_terms_of_service", {}, [{name: 'a', attrs: {href: '/legal#Terms', target: '_blank'}}, {name: 'a', attrs: {href: '/legal#Privacy', target: '_blank'}}])} + +termsOfServiceAgreementContent diff --git a/services/web/frontend/stylesheets/abstracts/mixins.scss b/services/web/frontend/stylesheets/abstracts/mixins.scss index 1a1080491d..6f39fd32e3 100644 --- a/services/web/frontend/stylesheets/abstracts/mixins.scss +++ b/services/web/frontend/stylesheets/abstracts/mixins.scss @@ -230,3 +230,15 @@ background-color: $input-disabled-bg; border-color: $input-disabled-border-color; } + +@mixin full-viewport-height { + height: 100vh; /* for backwards compatibility */ + height: 100dvh; /* needed for mobile devices */ +} + +@mixin full-height-stacked-page { + @include full-viewport-height; + + display: flex; + flex-direction: column; +} diff --git a/services/web/frontend/stylesheets/ciam/all.scss b/services/web/frontend/stylesheets/ciam/all.scss index d210b6d1df..b7b99a457d 100644 --- a/services/web/frontend/stylesheets/ciam/all.scss +++ b/services/web/frontend/stylesheets/ciam/all.scss @@ -1,3 +1,4 @@ @import '../ds/all'; // DS design system styles @import 'ciam-layout'; @import 'ciam-variables'; +@import 'ciam-register'; diff --git a/services/web/frontend/stylesheets/ciam/ciam-layout.scss b/services/web/frontend/stylesheets/ciam/ciam-layout.scss index 05e044eb70..856583d904 100644 --- a/services/web/frontend/stylesheets/ciam/ciam-layout.scss +++ b/services/web/frontend/stylesheets/ciam/ciam-layout.scss @@ -1,23 +1,23 @@ -.ciam-layout { - padding: var(--ds-spacing-350); - display: flex; - min-height: 100vh; - flex-direction: column; +.overleaf-ds-logo { + background-image: url('../../../frontend/js/shared/svgs/overleaf-a-ds-solution-mallard.svg'); +} - @include ds-body-md-regular; +.ciam-layout { + @include full-height-stacked-page; } .ciam-enabled { + @include ds-body-md-regular; + font-family: var(--ds-font-family-sans), sans-serif; - color: var(--ds-color-text-primary); - font-size: var(--ds-font-size-400); - line-height: 1.5; .ciam-container { flex: 1 1 auto; + padding: var(--ds-spacing-350); } .brand { + flex-shrink: 0; background-repeat: no-repeat; background-position: center center; background-size: contain; @@ -33,15 +33,22 @@ h1 { @include ds-heading-sm-semibold; + + padding-bottom: var(--ds-spacing-200); + margin: 0; } .ciam-card { + display: flex; + flex-direction: column; + gap: var(--ds-spacing-400); + background-color: var(--bg-light-primary); box-shadow: 0 4px 6px -4px rgb(0 0 0 / 10%), 0 1px 29px -3px rgb(0 0 0 / 16%); padding: var(--ds-spacing-800) var(--ds-spacing-400); border-radius: var(--ds-border-radius-400); - max-width: 460px; + max-width: 464px; margin: var(--ds-spacing-400) auto; @include media-breakpoint-up(sm) { @@ -49,22 +56,55 @@ } } - footer { + .ciam-disclaimers p { + @include ds-body-sm-regular; + + padding-bottom: var(--ds-spacing-250); + margin: 0; + } + + .ciam-card-separator { + margin: var(--ds-spacing-500) 0; + height: 0; + border-top: solid 1px var(--ds-grey-20); + } + + .ciam-card-footer { display: flex; - gap: var(--ds-spacing-600); - text-transform: uppercase; - justify-content: center; - margin: var(--ds-spacing-350) auto; - - @include media-breakpoint-up(sm) { - margin: var(--ds-spacing-350) var(--ds-spacing-800); - justify-content: start; - } - - a { - text-decoration: none; + flex-direction: column; + gap: var(--ds-spacing-250); + p { @include ds-body-sm-regular; + + margin-bottom: 0; + } + } + + .ciam-footer-ds-logo { + text-align: center; + padding: var(--ds-spacing-200) 0; + } + + footer { + .footer-links { + display: flex; + gap: var(--ds-spacing-600); + justify-content: center; + padding: var(--ds-spacing-350) 0; + margin: 0 auto var(--spacing-15) auto; + + @include media-breakpoint-up(sm) { + margin-left: var(--ds-spacing-800); + margin-right: var(--ds-spacing-800); + justify-content: start; + } + + a { + text-decoration: none; + + @include ds-body-sm-regular; + } } } } diff --git a/services/web/frontend/stylesheets/ciam/ciam-register.scss b/services/web/frontend/stylesheets/ciam/ciam-register.scss new file mode 100644 index 0000000000..932acc7fe8 --- /dev/null +++ b/services/web/frontend/stylesheets/ciam/ciam-register.scss @@ -0,0 +1,24 @@ +@import 'ds-design-system'; + +.ciam-register-container { + @include full-viewport-height; + + display: flex; + min-height: 100%; + flex-direction: column; +} + +.ciam-register-columns { + display: flex; + flex-grow: 1; +} + +.ciam-register-login-link { + text-align: center; + margin: var(--ds-spacing-200) 0; +} + +.ciam-work-uni-sso { + padding-top: var(--ds-spacing-200); + margin-bottom: var(--ds-spacing-400); +} diff --git a/services/web/frontend/stylesheets/ciam/ds-design-system.scss b/services/web/frontend/stylesheets/ciam/ds-design-system.scss new file mode 100644 index 0000000000..5aaa178be0 --- /dev/null +++ b/services/web/frontend/stylesheets/ciam/ds-design-system.scss @@ -0,0 +1,3 @@ +:root { + --ds-grey-20: #e7e9ee; +} diff --git a/services/web/frontend/stylesheets/pages/editor/ide.scss b/services/web/frontend/stylesheets/pages/editor/ide.scss index d6e598ea18..a047aa27cf 100644 --- a/services/web/frontend/stylesheets/pages/editor/ide.scss +++ b/services/web/frontend/stylesheets/pages/editor/ide.scss @@ -20,10 +20,7 @@ $editor-toggler-bg-dark-color: color.adjust( } #ide-root { - display: flex; - flex-direction: column; - height: 100vh; /* for backwards compatibility */ - height: 100dvh; /* needed for mobile devices */ + @include full-height-stacked-page; .global-alerts { position: absolute; diff --git a/services/web/frontend/stylesheets/pages/login-register.scss b/services/web/frontend/stylesheets/pages/login-register.scss index 77771806a3..d871d98331 100644 --- a/services/web/frontend/stylesheets/pages/login-register.scss +++ b/services/web/frontend/stylesheets/pages/login-register.scss @@ -4,6 +4,7 @@ line-height: 1; position: relative; font-size: var(--font-size-02); + text-align: center; &::before { content: ''; diff --git a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss index acabfdf7e8..a3acaad9d1 100644 --- a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss +++ b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss @@ -17,10 +17,8 @@ body { } .project-ds-nav-page { - display: flex; - flex-direction: column; - height: 100vh; - height: 100dvh; + @include full-height-stacked-page; + color: var(--content-secondary); // NOTE-AC: This code can be eliminated when we remove sidebar-navigation-ui-update diff --git a/services/web/locales/en.json b/services/web/locales/en.json index beceded20a..e79c4e2cd2 100644 --- a/services/web/locales/en.json +++ b/services/web/locales/en.json @@ -129,6 +129,7 @@ "administration_and_security": "Administration and security", "advanced_reference_search": "Advanced <0>reference search", "advanced_reference_search_mode": "Advanced reference search", + "advancing_research_with": "Advancing research with Overleaf, Papers, and more", "after_that_well_bill_you_x_total_y_subtotal_z_tax_annually_on_date_unless_you_cancel": "After that, we’ll bill you __totalAmount__ (__subtotalAmount__ + __taxAmount__ tax) annually on __date__, unless you cancel.", "aggregate_changed": "Changed", "aggregate_to": "to", @@ -471,6 +472,7 @@ "create_new_subscription": "Create new subscription", "create_new_tag": "Create new tag", "create_project_in_github": "Create a GitHub repository", + "create_your_account": "Create your account", "created": "Created", "created_at": "Created at", "creating": "Creating", diff --git a/services/web/public/img/digital-science/digital-science.svg b/services/web/public/img/digital-science/digital-science.svg new file mode 100644 index 0000000000..f9c164da97 --- /dev/null +++ b/services/web/public/img/digital-science/digital-science.svg @@ -0,0 +1 @@ + \ No newline at end of file