Merge pull request #29900 from overleaf/td-ciam-login

Implement unified access login page

GitOrigin-RevId: 9973565099e1e88dd9d6b232d8f5c545dc73e6f7

services/web/app/views/_mixins/ciam.pug

@@ -1,42 +0,0 @@
-include terms_of_service
-include recaptcha
-
-mixin ciamLogo
-	header.ciam-logo
-		a.brand.overleaf-ds-logo(href='/')
-			span.visually-hidden Overleaf
-
-mixin ciamCardSeparator
-	hr.ciam-card-separator
-
-mixin ciamCardFooter
-	section.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
-
-mixin ciamCustomFormDangerMessage(key)
-	div(
-		class='notification ciam-notification notification-type-error'
-		hidden
-		data-ol-custom-form-message=key
-		role='alert'
-		aria-live='polite'
-	)
-		.notification-icon
-			ph-warning-circle(aria-hidden='true')
-		.notification-content.text-left
-			block

services/web/frontend/extracted-translations.json

@@ -106,6 +106,7 @@
   "address_second_line_optional": "",
   "adjust_column_width": "",
   "advanced_reference_search_mode": "",
+  "advancing_research_with": "",
   "after_that_well_bill_you_x_total_y_subtotal_z_tax_annually_on_date_unless_you_cancel": "",
   "aggregate_changed": "",
   "aggregate_to": "",

services/web/frontend/js/features/form-helpers/form-phosphor-icons.ts

@@ -1,4 +1,6 @@
-// These are used in the CIAM registration form
+// These are used in the CIAM registration and login flows
 import '@phosphor-icons/webcomponents/PhBank'
 import '@phosphor-icons/webcomponents/PhEye'
+import '@phosphor-icons/webcomponents/PhInfo'
 import '@phosphor-icons/webcomponents/PhEyeSlash'
+import '@phosphor-icons/webcomponents/PhWarningCircle'

services/web/frontend/js/features/form-helpers/hydrate-form.ts

@@ -4,6 +4,7 @@ import { canSkipCaptcha, validateCaptchaV2 } from './captcha'
 import inputValidator from './input-validator'
 import { disableElement, enableElement } from '../utils/disableElement'
 import { materialIcon as createMaterialIcon } from '@/features/utils/material-icon'
+import { ciamIcon } from '@/features/utils/ciam-icon'
 
 // Form helper(s) to handle:
 // - Attaching to the relevant form elements
@@ -343,12 +344,20 @@ function showMessagesNewStyle(
       }
 
       // create the left icon
-      const icon = createMaterialIcon(
-        message.type === 'error' ? 'error' : 'check_circle'
-      )
+      const isDsBranded = formEl.dataset.ciamForm !== undefined
       const messageIcon = document.createElement('div')
       messageIcon.className = 'notification-icon'
-      messageIcon.appendChild(icon)
+      if (
+        isDsBranded &&
+        (message.type === 'error' || message.type === 'info')
+      ) {
+        messageIcon.append(ciamIcon(message.type))
+      } else {
+        const icon = createMaterialIcon(
+          message.type === 'error' ? 'error' : 'check_circle'
+        )
+        messageIcon.appendChild(icon)
+      }
 
       // append icon first so it's on the left
       messageElContainer.appendChild(messageIcon)
@@ -379,23 +388,43 @@ function showMessagesNewStyle(
   })
 }
 
+function querySelectorAllWithSelf(el: HTMLElement, selector: string) {
+  const nodeList = el.querySelectorAll<HTMLElement>(selector)
+  return el.matches(selector) ? [el, ...nodeList] : Array.from(nodeList)
+}
+
 export function inflightHelper(el: HTMLElement) {
-  const disabledInflight = el.querySelectorAll('[data-ol-disabled-inflight]')
+  const disabledInflight = querySelectorAllWithSelf(
+    el,
+    '[data-ol-disabled-inflight]'
+  )
   const showWhenNotInflight = el.querySelectorAll<HTMLElement>(
     '[data-ol-inflight="idle"]'
   )
   const showWhenInflight = el.querySelectorAll<HTMLElement>(
     '[data-ol-inflight="pending"]'
   )
+  const spinnerInflight = querySelectorAllWithSelf(
+    el,
+    '[data-ol-spinner-inflight]'
+  )
 
   el.addEventListener('pending', () => {
     disabledInflight.forEach(disableElement)
     toggleDisplay(showWhenNotInflight, showWhenInflight)
+    spinnerInflight.forEach(loadingEl => {
+      loadingEl.setAttribute('data-ol-loading', 'true')
+      loadingEl.classList.add('button-loading')
+    })
   })
 
   el.addEventListener('idle', () => {
     disabledInflight.forEach(enableElement)
     toggleDisplay(showWhenInflight, showWhenNotInflight)
+    spinnerInflight.forEach(loadingEl => {
+      loadingEl.removeAttribute('data-ol-loading')
+      loadingEl.classList.remove('button-loading')
+    })
   })
 }
 

services/web/frontend/js/features/form-helpers/input-validator.ts

@@ -1,13 +1,7 @@
 import { materialIcon } from '@/features/utils/material-icon'
 import classNames from 'classnames'
 import '@phosphor-icons/webcomponents/PhWarningCircle'
-
-function dsErrorIcon() {
-  const icon = document.createElement('ph-warning-circle')
-  icon.className = 'ciam-form-text-icon'
-  icon.ariaHidden = 'true'
-  return icon
-}
+import { ciamIcon } from '@/features/utils/ciam-icon'
 
 export default function inputValidator(
   inputEl: HTMLInputElement | HTMLTextAreaElement
@@ -30,7 +24,9 @@ export default function inputValidator(
 
   const messageTextNode = document.createTextNode('')
 
-  const iconEl = isDsBranded ? dsErrorIcon() : materialIcon('error')
+  const iconEl = isDsBranded
+    ? ciamIcon('error', 'ciam-form-text-icon')
+    : materialIcon('error')
   messageInnerEl.append(iconEl)
   messageInnerEl.append(messageTextNode)
 

services/web/frontend/js/features/settings/components/emails/ciam-six-digits-input.tsx

@@ -37,6 +37,8 @@ const CIAMSixDigitsInput = forwardRef<
         )}
         maxLength={7}
         inputMode="numeric"
+        autocomplete="off"
+        data-1p-ignore
       />
       <span className="ciam-six-digits-dash" aria-hidden>
         -

services/web/frontend/js/features/utils/ciam-icon.ts

@@ -0,0 +1,9 @@
+export function ciamIcon(type: 'error' | 'info', className?: string) {
+  const elName = type === 'error' ? 'ph-warning-circle' : 'ph-info'
+  const icon = document.createElement(elName)
+  if (className) {
+    icon.className = className
+  }
+  icon.ariaHidden = 'true'
+  return icon
+}

services/web/frontend/js/shared/components/layouts/ciam-layout.tsx

@@ -1,22 +1,43 @@
 import React, { FC, ReactNode } from 'react'
+import { Trans } from 'react-i18next'
+import dsLogo from '@/shared/svgs/digital-science.svg'
 
 type Props = { children: ReactNode }
 
 const CiamLayout: FC<Props> = ({ children }: Props) => (
   <div className="ciam-layout ciam-enabled">
     <header className="ciam-logo">
-      <a href="/" className="brand overleaf-ds-logo">
+      <a href="/" className="brand overleaf-ds-logo ciam-image-link">
         <span className="visually-hidden">Overleaf</span>
       </a>
     </header>
     <div className="ciam-container">
       <main className="ciam-card" id="main-content">
         {children}
+        <section className="ciam-card-footer">
+          <hr className="ciam-card-separator" />
+          <div className="ciam-footer-ds-logo">
+            <img src={dsLogo} alt="Digital Science — home" />
+          </div>
+          <p>
+            <Trans
+              i18nKey="advancing_research_with"
+              components={[
+                // eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key
+                <a href="https://www.overleaf.com" />,
+                // eslint-disable-next-line jsx-a11y/anchor-has-content,react/jsx-key
+                <a href="https://www.papersapp.com/" />,
+              ]}
+            />
+          </p>
+        </section>
       </main>
     </div>
     <footer>
-      <a href="https://www.overleaf.com/legal#Privacy">Privacy</a>
-      <a href="https://www.overleaf.com/legal#Terms">Terms</a>
+      <div className="footer-links">
+        <a href="https://www.overleaf.com/legal#Privacy">Privacy</a>
+        <a href="https://www.overleaf.com/legal#Terms">Terms</a>
+      </div>
     </footer>
   </div>
 )

services/web/frontend/stylesheets/ciam/all.scss

@@ -1,5 +1,6 @@
 @import '../ds/all'; // DS design system styles
 @import 'ciam-layout';
-@import 'ciam-variables';
+@import 'ciam-links';
+@import 'ciam-login';
 @import 'ciam-register';
 @import 'ciam-six-digits';

services/web/frontend/stylesheets/ciam/ciam-layout.scss

@@ -1,13 +1,21 @@
 @use 'sass:math';
 
-.overleaf-ds-logo {
-  background-image: url('../../../frontend/js/shared/svgs/overleaf-a-ds-solution-mallard.svg');
+@mixin ciam-bottom-margin {
+  margin: 0 0 var(--ds-spacing-400);
 }
 
-.ciam-layout {
+@mixin ciam-vertically-spaced {
   display: flex;
   flex-direction: column;
   gap: var(--ds-spacing-400);
+}
+
+.overleaf-ds-logo {
+  background-image: url('../../../frontend/js/shared/svgs/overleaf-a-ds-solution-mallard.svg');
+}
+
+.ciam-layout {
+  @include ciam-vertically-spaced;
 
   @include media-breakpoint-up(sm) {
     gap: var(--ds-spacing-800);
@@ -25,141 +33,195 @@
     color: var(--ds-color-text-primary);
   }
 
-  .ciam-container {
-    flex: 1 1 auto;
-    padding: 0 var(--ds-spacing-300);
+  h1 {
+    @include ds-heading-md-semibold;
+
+    padding-bottom: var(--ds-spacing-200);
+    margin: 0;
   }
 
-  .ciam-logo {
-    padding: var(--ds-spacing-800) 0 0 0;
-    text-align: center;
+  footer {
+    // Allow room for the cookie banner
+    padding-bottom: 100px;
 
-    @include media-breakpoint-up(sm) {
-      padding-left: var(--ds-spacing-800);
-      padding-right: var(--ds-spacing-800);
+    .footer-links {
+      display: flex;
+      gap: var(--ds-spacing-600);
+      justify-content: center;
+      color: var(--ds-color-text-secondary);
+      padding: var(--ds-spacing-300) 0;
+      margin: 0 auto;
+
+      @include media-breakpoint-up(sm) {
+        margin-left: var(--ds-spacing-800);
+        margin-right: var(--ds-spacing-800);
+      }
+
+      a {
+        @include ds-body-sm-regular;
+      }
     }
   }
+}
 
-  .ciam-logo .brand {
-    flex-shrink: 0;
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: contain;
-    height: 49px;
-    width: 107px;
-    margin: 0 auto;
-    display: block;
+.ciam-container {
+  flex: 1 1 auto;
+  padding: 0 var(--ds-spacing-300);
+}
 
-    @include media-breakpoint-up(sm) {
-      height: 64px;
-      width: 130px;
-      margin: 9px 0; // Vertical margin isn't an exacting spacing value in the design
-    }
+.ciam-logo {
+  padding: var(--ds-spacing-800) 0 0 0;
+  text-align: center;
+
+  @include media-breakpoint-up(sm) {
+    padding-left: var(--ds-spacing-800);
+    padding-right: var(--ds-spacing-800);
   }
+}
 
-  h1 {
-    @include ds-heading-sm-semibold;
+.ciam-logo .brand {
+  flex-shrink: 0;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: contain;
+  height: 60px;
+  width: 133px;
+  margin: 0 auto;
+  display: block;
 
-    padding-bottom: var(--ds-spacing-200);
-    margin: 0;
+  @include media-breakpoint-up(sm) {
+    height: 64px;
+    width: 142px;
+    margin: 9px 0; // Vertical margin isn't an exacting spacing value in the design
   }
+}
 
-  .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: 464px;
-    margin: 0 auto;
-    min-height: 500px;
+.ciam-card {
+  @include ciam-vertically-spaced;
 
-    @include media-breakpoint-up(sm) {
-      padding: var(--ds-spacing-1300);
-    }
+  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: 464px;
+  margin: 0 auto;
+  min-height: 500px;
 
-    .notification {
-      @include ds-body-sm-regular;
+  @include media-breakpoint-up(sm) {
+    padding: var(--ds-spacing-1300);
+  }
 
-      color: var(--ds-color-text-primary);
-      padding: 0 var(--ds-spacing-400);
-      border-width: 0;
-      border-radius: var(--ds-border-radius-200);
+  .notification {
+    @include ds-body-sm-regular;
 
-      .notification-icon {
-        font-size: math.div(20em, 14);
-      }
+    color: var(--ds-color-text-primary);
+    padding: 0 var(--ds-spacing-400);
+    border-width: 0;
+    border-radius: var(--ds-border-radius-200);
+    gap: var(--ds-spacing-300);
+
+    .notification-icon {
+      font-size: math.div(20em, 14);
+      display: flex;
+      align-items: center;
+      padding: var(--ds-spacing-50);
+    }
 
-      .notification-content {
-        padding: var(--ds-spacing-400) 0;
-      }
+    .notification-content {
+      padding: var(--ds-spacing-400) 0;
+    }
 
-      &.notification-type-error {
-        background-color: var(--ds-color-red-50);
-      }
+    &.notification-type-error {
+      background-color: var(--ds-color-red-50);
+    }
+
+    &.notification-type-info {
+      background-color: var(--ds-color-blue-50);
     }
   }
+}
 
-  .ciam-disclaimers p {
-    @include ds-body-sm-regular;
+.ciam-login-register-error-container .notification {
+  @include ciam-bottom-margin;
+}
 
-    padding-bottom: var(--ds-spacing-250);
-    margin: 0;
-  }
+.ciam-disclaimers p {
+  @include ds-body-sm-regular;
 
-  .ciam-card-separator {
-    margin: var(--ds-spacing-500) 0;
-    height: 0;
-    border-top: solid 1px var(--ds-grey-20);
-  }
+  padding-bottom: var(--ds-spacing-250);
+  margin: 0;
+}
 
-  .ciam-card-footer {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ds-spacing-250);
+.ciam-card-separator {
+  margin: var(--ds-spacing-500) 0;
+  height: 0;
+  border-top: solid 1px var(--ds-grey-20);
+}
 
-    p {
-      @include ds-body-sm-regular;
+.ciam-card-footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-250);
 
-      color: var(--ds-color-text-secondary);
-      margin-bottom: 0;
-    }
-  }
+  p {
+    @include ds-body-sm-regular;
 
-  .ciam-footer-ds-logo {
+    color: var(--ds-color-text-secondary);
+    margin-bottom: 0;
     text-align: center;
-    padding: var(--ds-spacing-200) 0;
+
+    @include media-breakpoint-up(sm) {
+      text-align: start;
+    }
   }
+}
 
-  .ciam-stepper {
-    margin: 0;
-    height: 4px;
-    border-radius: var(--ds-border-radius-full);
+.ciam-login-register-text {
+  @include ciam-bottom-margin;
+}
 
-    .step {
-      background: var(--ds-color-neutral-200);
-    }
+.ciam-login-register-text-final {
+  margin: 0;
+}
+
+.ciam-footer-ds-logo {
+  text-align: center;
+  padding: var(--ds-spacing-200) 0;
+}
+
+.ciam-stepper {
+  margin: 0;
+  height: 4px;
+  border-radius: var(--ds-border-radius-full);
+
+  .step {
+    background: var(--ds-color-neutral-200);
   }
+}
 
-  footer {
-    display: flex;
-    gap: var(--ds-spacing-600);
-    justify-content: center;
-    padding: var(--ds-spacing-300) 0;
-    margin: 0 auto;
+.ciam-work-uni-sso {
+  padding-top: var(--ds-spacing-200);
+  font-weight: var(--ds-font-weight-semibold);
+}
 
-    @include media-breakpoint-up(sm) {
-      margin-left: var(--ds-spacing-800);
-      margin-right: var(--ds-spacing-800);
-      justify-content: start;
-    }
+.ciam-login-register-or-text-container {
+  @include ds-body-xs-semibold;
+  @include ciam-bottom-margin;
 
-    a {
-      @include ds-body-sm-regular;
-    }
+  display: flex;
+  align-items: center;
+  gap: var(--ds-spacing-250);
+  color: var(--ds-color-text-secondary);
+  padding: var(--ds-spacing-200) 0 0 0;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    flex-grow: 1;
+    height: 1px;
+    background-color: var(--ds-color-neutral-200);
   }
 }

services/web/frontend/stylesheets/ciam/ciam-links.scss

@@ -0,0 +1,37 @@
+// TODO: Replace `fuchsia` by the correct colors.
+
+.ciam-enabled,
+.website-redesign:not(.application-page) .ciam-enabled .notification {
+  // Links, used in services/web/frontend/stylesheets/base/links.scss
+  --link-color: currentcolor;
+  --link-hover-color: var(--ds-color-text-primary);
+  --link-visited-color: var(--ds-color-text-secondary);
+  --link-text-decoration: underline;
+  --link-hover-text-decoration: underline;
+
+  a {
+    text-decoration-thickness: 5%;
+    text-underline-offset: 19.5%;
+  }
+
+  a:hover,
+  a:focus {
+    text-decoration-thickness: 10%;
+  }
+
+  a:focus-visible {
+    box-shadow: none;
+    outline: none;
+    background-color: var(--ds-color-yellow-500);
+
+    &.ciam-image-link {
+      @include ds-focus-outline;
+
+      background-color: transparent;
+    }
+
+    &.btn {
+      background-color: var(--bs-btn-bg);
+    }
+  }
+}

services/web/frontend/stylesheets/ciam/ciam-login.scss

@@ -0,0 +1,15 @@
+@import 'ds-design-system';
+
+.ciam-login-text {
+  text-align: center;
+  padding: var(--ds-spacing-200) 0;
+  margin: 0;
+
+  &.ciam-login-bottom-space {
+    @include ciam-bottom-margin;
+  }
+}
+
+.ciam-login-sso-form-controls {
+  @include ciam-vertically-spaced;
+}

services/web/frontend/stylesheets/ciam/ciam-register.scss

@@ -11,41 +11,19 @@
   padding: var(--ds-spacing-200) 0;
 }
 
-.ciam-work-uni-sso {
-  color: var(--ds-color-text-secondary);
-  padding-top: var(--ds-spacing-200);
-  margin-bottom: var(--ds-spacing-400);
-  font-weight: var(--ds-font-weight-semibold);
-}
-
 .ciam-register-container {
   display: flex;
   flex-direction: column;
 
-  .login-register-or-text-container {
-    @include ds-body-xs-semibold;
-
-    gap: var(--ds-spacing-250);
-    padding: var(--ds-spacing-200) 0 0 0;
-    margin-bottom: var(--ds-spacing-400);
-
-    &::before,
-    &::after {
-      background-color: var(--ds-color-neutral-200);
-    }
-  }
-
-  .login-register-error-container {
-    padding-bottom: 0;
-
-    .notification {
-      margin-bottom: var(--ds-spacing-400);
+  footer .footer-links {
+    @include media-breakpoint-up(sm) {
+      justify-content: start;
     }
   }
 }
 
 .ciam-password-group {
-  margin-bottom: var(--ds-spacing-400);
+  @include ciam-bottom-margin;
 }
 
 .ciam-password-requirements-message {

services/web/frontend/stylesheets/ciam/ciam-variables.scss

@@ -1,11 +0,0 @@
-// TODO: Replace `fuchsia` by the correct colors.
-
-.ciam-enabled,
-.website-redesign:not(.application-page) .ciam-enabled .notification {
-  // Links, used in services/web/frontend/stylesheets/base/links.scss
-  --link-color: var(--ds-color-text-primary);
-  --link-hover-color: var(--ds-color-text-secondary);
-  --link-visited-color: var(--ds-color-text-secondary);
-  --link-text-decoration: underline;
-  --link-hover-text-decoration: none;
-}

services/web/frontend/stylesheets/ds/components/button.scss

@@ -111,4 +111,18 @@
       visibility: hidden;
     }
   }
+
+  .button-content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ds-spacing-200); // Add gap between text and icons
+    justify-content: center;
+  }
+
+  .btn-social-icon {
+    height: 24px;
+    width: 24px;
+    padding: var(--ds-spacing-50);
+    margin: 0;
+  }
 }

services/web/frontend/stylesheets/ds/components/form-control.scss

@@ -8,8 +8,6 @@
 .form-group-ds label,
 .website-redesign .form-group-ds label,
 .website-redesign .form-label-ds {
-  @include ds-body-sm-semibold;
-
   --bs-body-font-family: var(--ds-font-family-sans), sans-serif;
   --bs-success-rgb: 25, 117, 76; // #19754c
   --bs-danger-rgb: 195, 9, 43; // #c3092b
@@ -22,6 +20,12 @@
   margin-bottom: var(--ds-spacing-100);
 }
 
+.form-label-ds,
+.form-group-ds label,
+.website-redesign .form-group-ds label {
+  @include ds-body-md-semibold;
+}
+
 .form-group-ds {
   margin-bottom: var(--ds-spacing-400);
 }

services/web/frontend/stylesheets/pages/onboarding-confirm-email-ciam.scss

@@ -22,6 +22,10 @@
     margin: auto;
     max-width: 480px;
 
+    h1 {
+      margin-bottom: var(--ds-spacing-400);
+    }
+
     .notification {
       margin-bottom: var(--spacing-05);
     }

services/web/locales/en.json

@@ -128,7 +128,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>",
+  "advancing_research_with": "Advancing research with <0>Overleaf</0>, <1>Papers</1>, 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",
@@ -830,6 +830,7 @@
   "for_teams_and_organizations_who_want_a_streamlined_sso_and_security": "For teams and organizations who want a streamlined sign-on process and our strongest cloud security.",
   "for_universities": "For universities",
   "forever": "forever",
+  "forgot_password": "Forgot password?",
   "forgot_your_password": "Forgot your password",
   "format": "Format",
   "found_matching_deleted_users": "Found __deletedUserCount__ matching deleted users",