Merge pull request #17571 from overleaf/mf-website-redesign-login

[web] Website redesign for log in page

GitOrigin-RevId: 2f700ca7cec242598449b1f4fc830801976b9eaf

services/web/frontend/js/features/form-helpers/password-visibility.js

@@ -0,0 +1,28 @@
+const visibilityOnQuery = '[data-ol-password-visibility-toggle="visibilityOn"]'
+const visibilityOffQuery =
+  '[data-ol-password-visibility-toggle="visibilityOff"]'
+
+const visibilityOnButton = document.querySelector(visibilityOnQuery)
+const visibilityOffButton = document.querySelector(visibilityOffQuery)
+
+if (visibilityOffButton && visibilityOnButton) {
+  visibilityOnButton.addEventListener('click', function () {
+    const passwordInput = document.querySelector(
+      '[data-ol-password-visibility-target]'
+    )
+    passwordInput.type = 'text'
+    visibilityOnButton.hidden = true
+    visibilityOffButton.hidden = false
+    visibilityOffButton.focus()
+  })
+
+  visibilityOffButton.addEventListener('click', function () {
+    const passwordInput = document.querySelector(
+      '[data-ol-password-visibility-target]'
+    )
+    passwordInput.type = 'password'
+    visibilityOffButton.hidden = true
+    visibilityOnButton.hidden = false
+    visibilityOnButton.focus()
+  })
+}

services/web/frontend/js/marketing.js

@@ -3,6 +3,7 @@ import './infrastructure/error-reporter'
 import 'jquery'
 import 'bootstrap'
 import './features/form-helpers/hydrate-form'
+import './features/form-helpers/password-visibility'
 import './features/link-helpers/slow-link'
 import './features/bookmarkable-tab'
 import './features/contact-form'

services/web/frontend/stylesheets/app/base.less

@@ -183,3 +183,20 @@
     }
   }
 }
+
+.website-redesign {
+  .recaptcha-branding {
+    padding: @padding-sm 0;
+    text-align: left;
+    font-size: @font-size-extra-small;
+
+    & > a {
+      color: var(--emerald-green);
+
+      &:hover {
+        color: var(--emerald-green-dark);
+      }
+      text-decoration: underline;
+    }
+  }
+}

services/web/frontend/stylesheets/app/homepage.less

@@ -183,26 +183,6 @@
   }
 }
 
-.hp-login-btn {
-  .login-btn;
-  min-width: 220px;
-}
-
-.hp-login-btn-large {
-  .hp-login-btn;
-
-  min-width: 256px;
-  padding-left: 30px;
-  font-size: 20px;
-}
-
-.hp-login-btn-icon-large {
-  .login-btn-icon;
-
-  width: 32px;
-  height: 32px;
-}
-
 .hp-register-form-email-pwd {
   position: relative;
 }
@@ -432,7 +412,18 @@
 
       .form-group {
         .hp-login-btn {
+          .login-btn;
+
           width: 100%;
+          min-width: 220px;
+
+          .login-btn-icon {
+            position: absolute;
+            left: 6px;
+            top: 7px;
+            width: 20px;
+            height: 20px;
+          }
         }
       }
     }

services/web/frontend/stylesheets/app/login-register.less

@@ -48,6 +48,7 @@
 
 .login-register-text {
   padding-bottom: 25px;
+  font-size: 90%;
   &:last-child {
     padding-bottom: 0;
   }
@@ -125,3 +126,119 @@
 .registration-block-separator {
   margin-bottom: 0px;
 }
+
+.website-redesign {
+  .login-register-container {
+    max-width: 320px;
+  }
+
+  .login-overleaf-logo-container {
+    padding: 15px;
+    width: 65px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .login-overleaf-logo {
+      width: 35px;
+    }
+
+    @media (max-width: @screen-xs-max) {
+      margin-top: @margin-lg;
+    }
+  }
+
+  .login-register-text {
+    font-size: 0.875rem;
+    line-height: 1.4;
+    text-align: left;
+
+    &.login-register-text-center {
+      text-align: center;
+    }
+  }
+
+  .login-register-other-links {
+    padding: @line-height-computed 0;
+    a {
+      color: var(--emerald-green);
+      text-decoration: underline;
+      // text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
+      // this will force underline to not skip the descender
+      text-decoration-skip-ink: none;
+
+      &:hover {
+        color: var(--emerald-green-dark);
+      }
+
+      // for accessibility with keyboard navigation
+      &:focus {
+        outline: 2px solid var(--emerald-green);
+        outline-offset: 1px;
+      }
+    }
+  }
+
+  .login-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 0;
+  }
+
+  .login-btn-icon {
+    position: relative;
+    top: unset;
+    left: unset;
+    background: unset;
+    border-radius: unset;
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+
+    &::before {
+      content: unset;
+    }
+  }
+
+  .form-group {
+    text-align: left;
+    position: relative;
+
+    label {
+      font-size: @font-size-small;
+    }
+  }
+
+  .form-group-password {
+    display: flex;
+    position: relative;
+
+    input.form-control {
+      padding-right: 35px;
+    }
+
+    .visibility-toggle {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: @input-height-base;
+      height: @input-height-base;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: unset;
+      background-color: unset;
+
+      #visibility-icon-off {
+        margin-top: 2px; // workaround for the icon not having the same center as the non-slashed one
+      }
+    }
+  }
+
+  .form-group-password-input {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}

services/web/frontend/stylesheets/app/register.less

@@ -25,3 +25,10 @@
     border-bottom-width: 0;
   }
 }
+
+.website-redesign {
+  .login-register-form-focus {
+    padding: @line-height-computed 0 0 0;
+    border-bottom: unset;
+  }
+}

services/web/frontend/stylesheets/app/website-redesign.less

@@ -944,11 +944,20 @@
 
   .inline-green-link {
     color: var(--emerald-green);
+    text-decoration: underline;
+    // text-decoration-;skip-ink is for letter with descender (like 'g' and 'y')
+    // this will force underline to not skip the descender
+    text-decoration-skip-ink: none;
 
     &:hover {
       color: var(--emerald-green-dark);
     }
-    text-decoration: underline;
+
+    // for accessibility with keyboard navigation
+    &:focus {
+      outline: 2px solid var(--emerald-green);
+      outline-offset: 1px;
+    }
   }
 
   .white-link {

services/web/frontend/stylesheets/core/type.less

@@ -124,7 +124,6 @@ small,
   color: @text-small-color;
 }
 
-.login-register-text,
 .login-register-hr-text-container,
 .text-small {
   font-size: 90%;

services/web/locales/en.json

@@ -637,6 +637,7 @@
   "for_teaching": "For teaching",
   "for_universities": "For universities",
   "for_visa_mastercard_and_discover": "For <0>Visa, MasterCard and Discover</0>, the <1>3 digits</1> on the <2>back</2> of your card.",
+  "forgot_password": "Forgot password?",
   "forgot_your_password": "Forgot your password",
   "format": "Format",
   "found_matching_deleted_users": "Found __deletedUserCount__ matching deleted users",
@@ -1031,6 +1032,7 @@
   "log_in_with": "Log in with __provider__",
   "log_in_with_a_different_account": "Log in with a different account",
   "log_in_with_email": "Log in with __email__",
+  "log_in_with_email_raw": "Log in with email",
   "log_in_with_existing_institution_email": "Please log in with your existing <b>__appName__</b> account in order to get your <b>__appName__</b>  and <b>__institutionName__</b> institutional accounts linked.",
   "log_in_with_primary_email_address": "This will be the email address to use if you log in with an email address and password. Important __appName__ notifications will be sent to this email address.",
   "log_in_with_sso": "Log in with SSO",

services/web/public/img/material-icons/visibility-slashed-18.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5 16.8335L12 13.3752C11.5139 13.5279 11.0208 13.6425 10.5208 13.7189C10.0208 13.7953 9.51389 13.8335 9 13.8335C7.13889 13.8335 5.4375 13.3335 3.89583 12.3335C2.35417 11.3335 1.14583 10.0141 0.270833 8.37516C0.201389 8.25016 0.149306 8.12169 0.114583 7.98975C0.0798611 7.8578 0.0625 7.72239 0.0625 7.5835C0.0625 7.44461 0.0798611 7.30919 0.114583 7.17725C0.149306 7.0453 0.201389 6.91683 0.270833 6.79183C0.576389 6.25016 0.902778 5.72239 1.25 5.2085C1.59722 4.69461 2 4.23627 2.45833 3.8335L0.166667 1.50016L1.33333 0.333496L16.6667 15.6668L15.5 16.8335ZM9 11.3335C9.15278 11.3335 9.29861 11.3266 9.4375 11.3127C9.57639 11.2988 9.71528 11.271 9.85417 11.2293L5.35417 6.72933C5.3125 6.86822 5.28472 7.00711 5.27083 7.146C5.25694 7.28489 5.25 7.43072 5.25 7.5835C5.25 8.62516 5.61458 9.51058 6.34375 10.2397C7.07292 10.9689 7.95833 11.3335 9 11.3335ZM15.0833 11.7085L12.4375 9.0835C12.5347 8.84739 12.6111 8.60433 12.6667 8.35433C12.7222 8.10433 12.75 7.84739 12.75 7.5835C12.75 6.54183 12.3854 5.65641 11.6563 4.92725C10.9271 4.19808 10.0417 3.8335 9 3.8335C8.73611 3.8335 8.47917 3.86127 8.22917 3.91683C7.97917 3.97239 7.73611 4.05572 7.5 4.16683L5.375 2.04183C5.95833 1.80572 6.55208 1.62864 7.15625 1.51058C7.76042 1.39252 8.375 1.3335 9 1.3335C10.8611 1.3335 12.566 1.83697 14.1146 2.84391C15.6632 3.85086 16.875 5.17377 17.75 6.81266C17.8194 6.92377 17.8715 7.0453 17.9063 7.17725C17.941 7.30919 17.9583 7.44461 17.9583 7.5835C17.9583 7.72239 17.9444 7.8578 17.9167 7.98975C17.8889 8.12169 17.8403 8.24322 17.7708 8.35433C17.4375 9.00711 17.0521 9.61822 16.6146 10.1877C16.1771 10.7571 15.6667 11.2641 15.0833 11.7085ZM11.2292 7.87516L8.72917 5.37516C9.09028 5.30572 9.44097 5.3335 9.78125 5.4585C10.1215 5.5835 10.4097 5.77794 10.6458 6.04183C10.8819 6.29183 11.0521 6.57655 11.1563 6.896C11.2604 7.21544 11.2847 7.54183 11.2292 7.87516Z" fill="#1C1B1F"/>
+</svg>

services/web/public/img/material-icons/visibility-unslashed-18.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 10C9.97222 10 10.7986 9.65972 11.4792 8.97917C12.1597 8.29861 12.5 7.47222 12.5 6.5C12.5 5.52778 12.1597 4.70139 11.4792 4.02083C10.7986 3.34028 9.97222 3 9 3C8.02778 3 7.20139 3.34028 6.52083 4.02083C5.84028 4.70139 5.5 5.52778 5.5 6.5C5.5 7.47222 5.84028 8.29861 6.52083 8.97917C7.20139 9.65972 8.02778 10 9 10ZM9 8.5C8.44444 8.5 7.97222 8.30556 7.58333 7.91667C7.19444 7.52778 7 7.05556 7 6.5C7 5.94444 7.19444 5.47222 7.58333 5.08333C7.97222 4.69444 8.44444 4.5 9 4.5C9.55556 4.5 10.0278 4.69444 10.4167 5.08333C10.8056 5.47222 11 5.94444 11 6.5C11 7.05556 10.8056 7.52778 10.4167 7.91667C10.0278 8.30556 9.55556 8.5 9 8.5ZM9 12.5C7.19444 12.5 5.53472 12.0208 4.02083 11.0625C2.50694 10.0903 1.30556 8.8125 0.416667 7.22917C0.347222 7.11806 0.298611 7 0.270833 6.875C0.243056 6.75 0.229167 6.625 0.229167 6.5C0.229167 6.375 0.243056 6.25 0.270833 6.125C0.298611 6 0.347222 5.88194 0.416667 5.77083C1.30556 4.1875 2.50694 2.91667 4.02083 1.95833C5.53472 0.98611 7.19444 0.499999 9 0.499999C10.8056 0.499999 12.4653 0.98611 13.9792 1.95833C15.4931 2.91667 16.6944 4.1875 17.5833 5.77083C17.6528 5.88194 17.7014 6 17.7292 6.125C17.7569 6.25 17.7708 6.375 17.7708 6.5C17.7708 6.625 17.7569 6.75 17.7292 6.875C17.7014 7 17.6528 7.11806 17.5833 7.22917C16.6944 8.8125 15.4931 10.0903 13.9792 11.0625C12.4653 12.0208 10.8056 12.5 9 12.5Z" fill="#1B222C"/>
+</svg>

services/web/public/img/ol-brand/overleaf-o-dark.svg

@@ -0,0 +1 @@
+<svg width="136" height="157" xmlns="http://www.w3.org/2000/svg"><path d="M37.205 39.652C14.822 53.982 0 77.339 0 102.326 0 132.522 24.48 157 54.681 157c30.198 0 54.674-24.478 54.674-54.674 0-23.34-14.626-43.276-35.204-51.111-3.958-1.505-12.556-4.213-19.421-3.635-9.806 6.234-21.751 19.044-27.411 31.809 8.416-10.093 21.537-14.488 33.17-12.619 17.126 2.777 30.208 17.638 30.208 35.551 0 19.896-16.126 36.021-36.016 36.021-10.962 0-20.785-4.896-27.388-12.619C17.516 114.299 15 101.91 16.975 89.809c6.927-42.375 57.233-66.53 94.636-75.799-12.207 6.458-34.227 17.074-49.626 28.63 44.924 17.341 52.184-20.517 73.217-37.459C114.038-3.07 37.33-6.117 37.205 39.652z" fill="#04652F" fill-rule="evenodd"/></svg>