mirror of
https://github.com/fleetdm/fleet
synced 2026-05-23 17:08:53 +00:00
Website: Update login page layout. (#21735)
Changes: - Updated the layout of the login page to match the /signup page.
This commit is contained in:
Eric
GitHub
parent
01ac6012d6
commit
8c27e36c84
2 changed files with 225 additions and 58 deletions
158
website/assets/styles/pages/entrance/login.less
vendored
158
website/assets/styles/pages/entrance/login.less
vendored
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
125
website/views/pages/entrance/login.ejs
vendored
125
website/views/pages/entrance/login.ejs
vendored
|
|
@ -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() %>
|
||||
|
|
|
|||
Loading…
Reference in a new issue