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

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",

services/web/public/img/digital-science/digital-science.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="103" height="29" fill="none"><g fill="#383838" clip-path="url(#a)"><path d="M28.143 15.424h-5.31V.285h5.222c5.267 0 8.008 3.05 8.008 7.548s-2.807 7.593-7.92 7.593v-.002m-.199-12.222h-1.36v9.304h1.36c2.678 0 4.344-1.405 4.344-4.652s-1.777-4.652-4.344-4.652M38.392 15.424V.285h3.753v15.141h-3.753v-.002M51.91 15.71c-4.806 0-7.46-3.16-7.46-7.834C44.45 3.202 47.324 0 51.996 0c1.867 0 3.423.44 4.63 1.12l-.504 3.268c-1.142-.724-2.48-1.295-4.038-1.295-2.612 0-3.883 1.931-3.883 4.763s1.316 4.848 3.927 4.848a4.26 4.26 0 0 0 2.04-.482V9.524h-2.633l-.44-2.787h6.343v7.372c-1.581 1.03-3.446 1.6-5.53 1.6h.001M60.053 15.424V.285h3.752v15.141h-3.752v-.002M73.878 3.467v11.959h-3.774V3.467h-4.279V.285h11.981l.527 3.182h-4.455M82.393.219h4.126l5.266 14.744-3.773.614-1.12-3.292h-5.266l-1.008 3.138h-3.664L82.394.219m.132 9.127h3.423l-1.69-5.267-1.733 5.267M93.455 15.424V.285h3.751v11.892h4.652l.506 3.247h-8.909M25.963 28.152c-1.268 0-2.517-.383-3.365-.846l.181-.926c.887.504 2.034.926 3.281.926 1.412 0 2.338-.625 2.338-1.73 0-.989-.584-1.491-2.618-2.057-1.994-.543-2.9-1.228-2.9-2.678 0-1.449 1.25-2.496 3.122-2.496 1.068 0 2.015.261 2.779.644l-.16.906c-.867-.443-1.752-.684-2.66-.684-1.49 0-2.155.706-2.155 1.57 0 .865.564 1.332 2.256 1.793 2.157.585 3.264 1.33 3.264 2.92 0 1.713-1.39 2.66-3.363 2.66v-.002M35.392 28.193c-2.316 0-4.168-1.813-4.168-4.933s1.873-4.934 4.23-4.934c1.187 0 2.234.422 3.062 1.048l-.183.967c-.947-.807-1.832-1.188-2.92-1.188-2.014 0-3.202 1.672-3.202 4.109 0 2.436 1.149 4.108 3.283 4.108 1.027 0 1.976-.363 2.962-1.209l.121.886c-.865.726-1.912 1.148-3.182 1.148l-.003-.002M40.877 27.992v-9.466h.928v9.466h-.928M48.478 28.193c-2.497 0-4.17-1.852-4.17-4.933 0-3.081 1.733-4.934 4.03-4.934 2.416 0 3.625 2.114 3.625 4.732v.202h-6.685c0 2.416 1.127 4.108 3.241 4.108 1.149 0 2.357-.603 3.283-1.45l.14.888c-.866.784-2.114 1.39-3.464 1.39v-.003m-3.161-5.72h5.66c-.06-1.852-.988-3.362-2.639-3.362-1.793 0-2.821 1.389-3.021 3.363M60.813 27.992v-6.586c0-1.43-.685-2.215-2.035-2.215-1.048 0-2.135.605-3.324 1.712v7.089h-.947v-9.466h.685l.241 1.43c1.149-1.006 2.196-1.63 3.446-1.63 1.954 0 2.879 1.107 2.879 3.001v6.666h-.945v-.001M68.355 28.193c-2.318 0-4.17-1.813-4.17-4.933s1.873-4.934 4.23-4.934c1.187 0 2.235.422 3.06 1.048l-.181.967c-.945-.807-1.834-1.188-2.919-1.188-2.013 0-3.202 1.672-3.202 4.109 0 2.436 1.148 4.108 3.28 4.108 1.028 0 1.976-.363 2.962-1.209l.121.886c-.866.726-1.913 1.148-3.181 1.148v-.002M77.335 28.193c-2.497 0-4.17-1.852-4.17-4.933 0-3.081 1.733-4.934 4.028-4.934 2.418 0 3.625 2.114 3.625 4.732v.202h-6.686c0 2.416 1.126 4.108 3.242 4.108 1.147 0 2.357-.603 3.283-1.45l.14.888c-.866.784-2.114 1.39-3.464 1.39l.002-.003m-3.162-5.72h5.66c-.061-1.852-.987-3.362-2.64-3.362-1.793 0-2.818 1.389-3.021 3.363h.001M20.18 4.173h-3.477V7.65h3.478V4.173M12.395.285H8.919v3.478h3.476V.285ZM16.284.285h-3.477v3.476h3.477V.285ZM20.18.284h-3.477v3.478h3.478V.284ZM12.395 4.173H8.919V7.65h3.476V4.173M16.284 4.173h-3.477V7.65h3.477V4.173M16.284 8.06h-3.477v3.476h3.477V8.062M20.18 8.06h-3.477v3.478h3.478V8.061M16.284 11.948h-3.477v3.478h3.477v-3.478M20.18 11.948h-3.477v3.478h3.478v-3.478M8.233 6.152h-2.51v2.512h2.51V6.152"/><path d="M5.735 7.4h-2.51v2.51h2.51V7.4M5.005 11.65h-2.51v2.51h2.51v-2.51M7.649 13.514H5.14v2.51H7.65v-2.51M9.247 10.79h-2.51v2.51h2.51v-2.51M13.405 10.108h-3.12v3.12h3.12v-3.12M8.499 18.863H5.66V21.7H8.5v-2.837"/><path d="M6.725 20.995H5.347v1.377h1.378v-1.377M18.381 19.294h-1.494v1.494h1.494v-1.494M14.112 16.06H11.6v2.513h2.512V16.06M8.092 1.546h-2.51v2.51h2.51v-2.51M14.112 18.672H12.55v1.563h1.562v-1.563M11.424 18.88H9.529v1.895h1.895V18.88M18.217 22.88h-1.894v1.894h1.893v-1.893M10.733 25.06H9.187v1.547h1.546v-1.546M1.755 11.257H0v1.753h1.755v-1.753"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h102.363v28.194H0z"/></clipPath></defs></svg>