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

@@ -3,8 +3,5 @@
     "node_modules": true,
     "data": true
   },
-  "cSpell.words": [
-    "docstore",
-    "Tpds"
-  ]
+  "cSpell.words": ["docstore", "Tpds"]
 }

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

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

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

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;
+}

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';

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;
+    flex-direction: column;
+    gap: var(--ds-spacing-250);
 
-    @include media-breakpoint-up(sm) {
-      margin: var(--ds-spacing-350) var(--ds-spacing-800);
-      justify-content: start;
+    p {
+      @include ds-body-sm-regular;
+
+      margin-bottom: 0;
     }
+  }
 
-    a {
-      text-decoration: none;
+  .ciam-footer-ds-logo {
+    text-align: center;
+    padding: var(--ds-spacing-200) 0;
+  }
 
-      @include ds-body-sm-regular;
+  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;
+      }
     }
   }
 }

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);
+}

services/web/frontend/stylesheets/ciam/ds-design-system.scss

@@ -0,0 +1,3 @@
+:root {
+  --ds-grey-20: #e7e9ee;
+}

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;

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: '';

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

services/web/locales/en.json

@@ -129,6 +129,7 @@
   "administration_and_security": "Administration and security",
   "advanced_reference_search": "Advanced <0>reference search</0>",
   "advanced_reference_search_mode": "Advanced reference search",
+  "advancing_research_with": "Advancing research with <a href=\"__linkOverleaf__\">Overleaf</a>, <a href=\"__linkPapers__\">Papers</a>, and <a href=\"__linkDS__\">more</a>",
   "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",