From 8c27e36c84edde14cb19bd090fcbf7ad9203e2f9 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Sun, 8 Sep 2024 23:04:52 -0500
Subject: [PATCH] Website: Update login page layout. (#21735)

Changes:
- Updated the layout of the login page to match the /signup page.
---
 .../assets/styles/pages/entrance/login.less   | 158 ++++++++++++++----
 website/views/pages/entrance/login.ejs        | 125 ++++++++++----
 2 files changed, 225 insertions(+), 58 deletions(-)

diff --git a/website/assets/styles/pages/entrance/login.less b/website/assets/styles/pages/entrance/login.less
index 42cadfb9be..46ffa53c30 100644
--- a/website/assets/styles/pages/entrance/login.less
+++ b/website/assets/styles/pages/entrance/login.less
@@ -1,45 +1,74 @@
 #login {
-
-  padding-top: 80px;
-
   h1 {
-    font-size: 28px;
-    line-height: 38px;
+    font-size: 32px;
+    line-height: 120%;
   }
   a {
+    line-height: 150%;
     color: @core-fleet-black-75;
     text-decoration: underline;
     text-underline-offset: 2px;
+  }
+  p {
     line-height: 150%;
   }
-  [purpose='customer-login-container'] {
-    max-width: 560px;
-  }
-  [purpose='login-container'] {
-    max-width: 560px;
-    [purpose='customer-portal-form'] {
-      max-width: 560px;
-    }
+  [purpose='page-container'] {
+    padding: 64px 128px 64px 128px;
+    max-width: 1200px;
   }
+
   [purpose='page-heading'] {
-    padding-left: 30px;
-    padding-right: 30px;
-    text-align: center;
-    margin-bottom: 40px;
+    text-align: left;
+    margin-bottom: 48px;
   }
-  [purpose='register-link'] {
-    margin-bottom: 8px;
-    a {
-      float: right;
+
+  [purpose='quote-and-logos'] {
+    max-width: 310px;
+  }
+  [purpose='quote'] {
+    margin-top: 8px;
+  }
+  [purpose='quote-text'] {
+    font-size: 14px;
+    line-height: 150%;
+    font-style: italic;
+  }
+  [purpose='quote-author-info'] {
+    display: inline-flex;
+    padding: 4px 16px 4px 4px;
+    border-radius: 28px;
+    width: fit-content;
+    margin-top: 8px;
+    margin-bottom: 48px;
+    [purpose='job-title'] {
       color: @core-fleet-black-75;
-      text-decoration: underline;
-      font-size: 14px;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+      margin-bottom: 0px;
     }
+    [purpose='name'] {
+      font-size: 12px;
+      font-weight: 700;
+      line-height: 18px;
+      margin-bottom: 0px;
+    }
+    [purpose='profile-picture'] {
+      margin-right: 16px;
+      img {
+        height: 32px;
+        width: 32px;
+      }
+    }
+  }
+  [purpose='logos'] {
+    max-width: 310px;
+  }
+  [purpose='login-form'] {
+    width: 528px;
   }
   [purpose='customer-portal-form'] {
-    max-width: 560px;
     border-radius: 16px;
-    margin-bottom: 40px;
     padding: 20px 32px 32px 32px;
     label {
       color: @core-fleet-black;
@@ -50,8 +79,36 @@
       height: 40px;
       border-radius: 6px;
     }
-    .card-body {
-      padding: 2em;
+    .selectbox {
+
+      position: relative;
+    }
+    .selectbox::after {
+      content: url('/images/chevron-12x8@2x.png');
+      right: 14px;
+      transform: scale(0.5);
+      top: 14px;
+      position: absolute;
+      pointer-events: none;
+    }
+    .selectbox select {
+      border-radius: 6px;
+      height: 48px;
+      appearance: none;
+      -webkit-appearance: none;
+    }
+    .small {
+      font-size: 12px;
+    }
+  }
+
+  [purpose='register-link'] {
+    margin-bottom: 4px;
+    a {
+      float: right;
+      color: @core-fleet-black-75;
+      text-decoration: underline;
+      font-size: 14px;
     }
   }
 
@@ -74,23 +131,64 @@
       font-weight: 700;
     }
   }
+  @media (max-width: 1200px) {
+    [purpose='page-container'] {
+      padding: 64px;
+    }
+  }
+  @media (max-width: 991px) {
+    [purpose='signup-form'] {
+      max-width: 528px;
+    }
+    [purpose='quote-and-logos'] {
+      max-width: 528px;
+      margin-top: 48px;
+    }
+    [purpose='logos'] {
+      max-width: 528px;
+    }
+    [purpose='page-heading'] {
+      text-align: center;
+      margin-left: auto;
+      margin-right: auto;
+      margin-bottom: 48px;
+      max-width: 528px;
+    }
+    [purpose='page-container'] {
+      padding: 64px 32px;
+    }
+
+  }
 
   @media (max-width: 768px) {
-    padding-top: 60px;
     [purpose='customer-portal-form'] {
       max-width: unset;
     }
+    [purpose='signup-form'] {
+      width: 100%;
+    }
+    [purpose='quote-and-logos'] {
+      width: 100%;
+    }
+    [purpose='logos'] {
+      width: 100%;
+    }
   }
 
   @media (max-width: 576px) {
-    padding-top: 40px;
     [purpose='page-heading'] {
       padding-left: 0px;
       padding-right: 0px;
     }
+    [purpose='page-container'] {
+      padding: 48px 24px;
+    }
+    [purpose='login-link'] {
+      margin-bottom: 12px;
+    }
     [purpose='customer-portal-form'] {
       .card-body {
-        padding: 1em;
+        padding: 1.5em 1em;
       }
     }
   }
diff --git a/website/views/pages/entrance/login.ejs b/website/views/pages/entrance/login.ejs
index 7ed6d7b471..4d55f0a281 100644
--- a/website/views/pages/entrance/login.ejs
+++ b/website/views/pages/entrance/login.ejs
@@ -1,38 +1,107 @@
 <div id="login" v-cloak>
-  <div :purpose="[showCustomerLogin ? 'customer-login-container' : 'login-container']" class="container-fluid pb-5 px-lg-0 px-3">
-    <div purpose="page-heading" v-if="showCustomerLogin">
+  <div purpose="page-container" class="container">
+    <div purpose="page-heading">
       <h1>Welcome to Fleet</h1>
       <p class="mb-0">We just need a few details in order to get started.</p>
     </div>
-    <div purpose="page-heading" v-else>
-      <h1>Welcome to Fleet</h1>
-      <p class="mb-0">Sign in to your Fleet account.</p>
-    </div>
-    <div purpose="customer-portal-form"  class="card card-body mb-5">
-      <div purpose="register-link" v-if="showCustomerLogin">
-        <a :href="registerSlug">Create an account</a>
+    <div purpose="form-container" class="d-flex flex-lg-row flex-column justify-content-between align-items-start">
+      <div purpose="login-form" class="mx-auto mx-lg-0">
+        <div purpose="customer-portal-form"  class="card card-body mb-5">
+          <div purpose="register-link" v-if="showCustomerLogin">
+            <a :href="registerSlug">Create an account</a>
+          </div>
+          <ajax-form class="customers-login" action="login" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedForm()">
+            <div class="form-group">
+              <label for="email">Email</label>
+              <input type="email" class="form-control" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
+              <div class="invalid-feedback" v-if="formErrors.emailAddress">Please provide a valid email address.</div>
+            </div>
+            <div class="form-group">
+              <label for="password">Password</label>
+              <input type="password" class="form-control" :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="current-password">
+              <div class="invalid-feedback" v-if="formErrors.password">Please enter your password.</div>
+            </div>
+            <cloud-error v-if="cloudError === 'noUser'">The email address provided doesn't match an existing account. Create an account <a href="/customers/register">here</a>.</cloud-error>
+            <cloud-error v-else-if="cloudError === 'badCombo'">Something’s not quite right with your email or password.</cloud-error>
+            <cloud-error v-else-if="cloudError"></cloud-error>
+            <div class="pb-3">
+              <ajax-button :syncing="syncing" spinner="true" purpose="submit-button" class="btn-primary mt-4 btn-lg btn-block">Sign in</ajax-button>
+            </div>
+          </ajax-form>
+          <span class="text-center small"><a href="/customers/forgot-password">Forgot your password?</a></span>
+        </div>
       </div>
-      <ajax-form class="customers-login" action="login" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedForm()">
-        <div class="form-group">
-          <label for="email">Email</label>
-          <input type="email" class="form-control" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
-          <div class="invalid-feedback" v-if="formErrors.emailAddress">Please provide a valid email address.</div>
+      <div purpose="quote-and-logos" class="mx-auto mx-lg-0">
+        <% if(typeof primaryBuyingSituation === 'undefined' || ['mdm'].includes(primaryBuyingSituation)) { %>
+          <div purpose="quote">
+            <img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
+            <p purpose="quote-text">
+              Exciting. This is a team that listens to feedback.
+            </p>
+            <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
+              <div purpose="profile-picture">
+                <img alt="Erik Gomez" src="/images/testimonial-author-erik-gomez-48x48@2x.png">
+              </div>
+              <div class="d-flex flex-column align-self-top">
+                <p purpose="name" class="font-weight-bold m-0">Erik Gomez</p>
+                <p purpose="job-title" class="m-0">Staff Client Platform Engineer</p>
+              </div>
+            </div>
+          </div>
+        <% } else if (['eo-it'].includes(primaryBuyingSituation)) { %>
+          <div purpose="quote">
+            <img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
+            <p purpose="quote-text">
+              Mad props to how easy making a deploy pkg of the agent was. I wish everyone made stuff that easy.
+            </p>
+            <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
+              <div purpose="profile-picture">
+                <img alt="Wes Whetstone" src="/images/testimonial-author-wes-whetstone-48x48@2x.png">
+              </div>
+              <div class="d-flex flex-column align-self-top">
+                <p purpose="name" class="font-weight-bold m-0">Wes Whetstone</p>
+                <p purpose="job-title" class="m-0">Staff CPE</p>
+              </div>
+            </div>
+          </div>
+        <% } else if (['eo-security'].includes(primaryBuyingSituation)) { %>
+          <div purpose="quote">
+            <img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
+            <p purpose="quote-text">
+              Something I really appreciate about working with you guys is that it doesn't feel like I'm talking to a vendor. It actually feels like I'm talking to my team, and I really appreciate it.
+            </p>
+            <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
+              <div purpose="profile-picture">
+                <img alt="Chandra Majumdar" src="/images/testimonial-author-chandra-majumdar-48x48@2x.png">
+              </div>
+              <div class="d-flex flex-column align-self-top">
+                <p purpose="name" class="font-weight-bold m-0">Chandra Majumdar</p>
+                <p purpose="job-title" class="m-0">Partner - Cyber and Strategic Risk</p>
+              </div>
+            </div>
+          </div>
+        <% } else if (['vm'].includes(primaryBuyingSituation)) { %>
+          <div purpose="quote">
+            <img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
+            <p purpose="quote-text">
+              The visibility down into the assets covered by the agent is phenomenal. Fleet has become the central source for a lot of things.
+            </p>
+            <div purpose="quote-author-info" class="d-flex flex-row align-items-center">
+              <div purpose="profile-picture">
+                <img alt="Andre Shields" src="/images/testimonial-author-andre-shields-48x48@2x.png">
+              </div>
+              <div class="d-flex flex-column align-self-top">
+                <p purpose="name" class="font-weight-bold m-0">Andre Shields</p>
+                <p purpose="job-title" class="m-0">Staff Cybersecurity Engineer, Vulnerability Management</p>
+              </div>
+            </div>
+          </div>
+        <% } %>
+        <div purpose="logos" class="flex-column flex-wrap align-items-center w-100">
+          <logo-carousel></logo-carousel>
         </div>
-        <div class="form-group">
-          <label for="password">Password</label>
-          <input type="password" class="form-control" :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="current-password">
-          <div class="invalid-feedback" v-if="formErrors.password">Please enter your password.</div>
-        </div>
-        <cloud-error v-if="cloudError === 'noUser'">The email address provided doesn't match an existing account. Create an account <a href="/customers/register">here</a>.</cloud-error>
-        <cloud-error v-else-if="cloudError === 'badCombo'">Something’s not quite right with your email or password.</cloud-error>
-        <cloud-error v-else-if="cloudError"></cloud-error>
-        <div class="pb-3">
-          <ajax-button :syncing="syncing" spinner="true" purpose="submit-button" class="btn-primary mt-4 btn-lg btn-block">Sign in</ajax-button>
-        </div>
-      </ajax-form>
-      <span class="text-center small"><a href="/customers/forgot-password">Forgot your password?</a></span>
+      </div>
     </div>
-    <logo-carousel></logo-carousel>
   </div>
 </div>
 <%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>