Skip to content

Commit 8c27e36

Browse files
eashaweashaw
authored
Website: Update login page layout. (#21735)
Changes: - Updated the layout of the login page to match the /signup page.
1 parent 01ac601 commit 8c27e36

File tree

2 files changed

+225
-58
lines changed

2 files changed

+225
-58
lines changed

‎website/assets/styles/pages/entrance/login.less

Lines changed: 128 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,74 @@
11
#login {
2-
3-
padding-top: 80px;
4-
52
h1 {
6-
font-size: 28px;
7-
line-height: 38px;
3+
font-size: 32px;
4+
line-height: 120%;
85
}
96
a {
7+
line-height: 150%;
108
color: @core-fleet-black-75;
119
text-decoration: underline;
1210
text-underline-offset: 2px;
13-
line-height: 150%;
1411
}
15-
[purpose='customer-login-container'] {
16-
max-width: 560px;
12+
p {
13+
line-height: 150%;
1714
}
18-
[purpose='login-container'] {
19-
max-width: 560px;
20-
[purpose='customer-portal-form'] {
21-
max-width: 560px;
22-
}
15+
[purpose='page-container'] {
16+
padding: 64px 128px 64px 128px;
17+
max-width: 1200px;
2318
}
19+
2420
[purpose='page-heading'] {
25-
padding-left: 30px;
26-
padding-right: 30px;
27-
text-align: center;
28-
margin-bottom: 40px;
21+
text-align: left;
22+
margin-bottom: 48px;
2923
}
30-
[purpose='register-link'] {
31-
margin-bottom: 8px;
32-
a {
33-
float: right;
24+
25+
[purpose='quote-and-logos'] {
26+
max-width: 310px;
27+
}
28+
[purpose='quote'] {
29+
margin-top: 8px;
30+
}
31+
[purpose='quote-text'] {
32+
font-size: 14px;
33+
line-height: 150%;
34+
font-style: italic;
35+
}
36+
[purpose='quote-author-info'] {
37+
display: inline-flex;
38+
padding: 4px 16px 4px 4px;
39+
border-radius: 28px;
40+
width: fit-content;
41+
margin-top: 8px;
42+
margin-bottom: 48px;
43+
[purpose='job-title'] {
3444
color: @core-fleet-black-75;
35-
text-decoration: underline;
36-
font-size: 14px;
45+
font-size: 12px;
46+
font-weight: 400;
47+
line-height: 18px;
48+
margin-bottom: 0px;
49+
}
50+
[purpose='name'] {
51+
font-size: 12px;
52+
font-weight: 700;
53+
line-height: 18px;
54+
margin-bottom: 0px;
55+
}
56+
[purpose='profile-picture'] {
57+
margin-right: 16px;
58+
img {
59+
height: 32px;
60+
width: 32px;
61+
}
3762
}
3863
}
64+
[purpose='logos'] {
65+
max-width: 310px;
66+
}
67+
[purpose='login-form'] {
68+
width: 528px;
69+
}
3970
[purpose='customer-portal-form'] {
40-
max-width: 560px;
4171
border-radius: 16px;
42-
margin-bottom: 40px;
4372
padding: 20px 32px 32px 32px;
4473
label {
4574
color: @core-fleet-black;
@@ -50,8 +79,36 @@
5079
height: 40px;
5180
border-radius: 6px;
5281
}
53-
.card-body {
54-
padding: 2em;
82+
.selectbox {
83+
84+
position: relative;
85+
}
86+
.selectbox::after {
87+
content: url('/images/chevron-12x8@2x.png');
88+
right: 14px;
89+
transform: scale(0.5);
90+
top: 14px;
91+
position: absolute;
92+
pointer-events: none;
93+
}
94+
.selectbox select {
95+
border-radius: 6px;
96+
height: 48px;
97+
appearance: none;
98+
-webkit-appearance: none;
99+
}
100+
.small {
101+
font-size: 12px;
102+
}
103+
}
104+
105+
[purpose='register-link'] {
106+
margin-bottom: 4px;
107+
a {
108+
float: right;
109+
color: @core-fleet-black-75;
110+
text-decoration: underline;
111+
font-size: 14px;
55112
}
56113
}
57114

@@ -74,23 +131,64 @@
74131
font-weight: 700;
75132
}
76133
}
134+
@media (max-width: 1200px) {
135+
[purpose='page-container'] {
136+
padding: 64px;
137+
}
138+
}
139+
@media (max-width: 991px) {
140+
[purpose='signup-form'] {
141+
max-width: 528px;
142+
}
143+
[purpose='quote-and-logos'] {
144+
max-width: 528px;
145+
margin-top: 48px;
146+
}
147+
[purpose='logos'] {
148+
max-width: 528px;
149+
}
150+
[purpose='page-heading'] {
151+
text-align: center;
152+
margin-left: auto;
153+
margin-right: auto;
154+
margin-bottom: 48px;
155+
max-width: 528px;
156+
}
157+
[purpose='page-container'] {
158+
padding: 64px 32px;
159+
}
160+
161+
}
77162

78163
@media (max-width: 768px) {
79-
padding-top: 60px;
80164
[purpose='customer-portal-form'] {
81165
max-width: unset;
82166
}
167+
[purpose='signup-form'] {
168+
width: 100%;
169+
}
170+
[purpose='quote-and-logos'] {
171+
width: 100%;
172+
}
173+
[purpose='logos'] {
174+
width: 100%;
175+
}
83176
}
84177

85178
@media (max-width: 576px) {
86-
padding-top: 40px;
87179
[purpose='page-heading'] {
88180
padding-left: 0px;
89181
padding-right: 0px;
90182
}
183+
[purpose='page-container'] {
184+
padding: 48px 24px;
185+
}
186+
[purpose='login-link'] {
187+
margin-bottom: 12px;
188+
}
91189
[purpose='customer-portal-form'] {
92190
.card-body {
93-
padding: 1em;
191+
padding: 1.5em 1em;
94192
}
95193
}
96194
}

‎website/views/pages/entrance/login.ejs

Lines changed: 97 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,107 @@
11
<div id="login" v-cloak>
2-
<div :purpose="[showCustomerLogin ? 'customer-login-container' : 'login-container']" class="container-fluid pb-5 px-lg-0 px-3">
3-
<div purpose="page-heading" v-if="showCustomerLogin">
2+
<div purpose="page-container" class="container">
3+
<div purpose="page-heading">
44
<h1>Welcome to Fleet</h1>
55
<p class="mb-0">We just need a few details in order to get started.</p>
66
</div>
7-
<div purpose="page-heading" v-else>
8-
<h1>Welcome to Fleet</h1>
9-
<p class="mb-0">Sign in to your Fleet account.</p>
10-
</div>
11-
<div purpose="customer-portal-form" class="card card-body mb-5">
12-
<div purpose="register-link" v-if="showCustomerLogin">
13-
<a :href="registerSlug">Create an account</a>
14-
</div>
15-
<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()">
16-
<div class="form-group">
17-
<label for="email">Email</label>
18-
<input type="email" class="form-control" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
19-
<div class="invalid-feedback" v-if="formErrors.emailAddress">Please provide a valid email address.</div>
7+
<div purpose="form-container" class="d-flex flex-lg-row flex-column justify-content-between align-items-start">
8+
<div purpose="login-form" class="mx-auto mx-lg-0">
9+
<div purpose="customer-portal-form" class="card card-body mb-5">
10+
<div purpose="register-link" v-if="showCustomerLogin">
11+
<a :href="registerSlug">Create an account</a>
12+
</div>
13+
<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()">
14+
<div class="form-group">
15+
<label for="email">Email</label>
16+
<input type="email" class="form-control" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" autocomplete="email" focus-first>
17+
<div class="invalid-feedback" v-if="formErrors.emailAddress">Please provide a valid email address.</div>
18+
</div>
19+
<div class="form-group">
20+
<label for="password">Password</label>
21+
<input type="password" class="form-control" :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="current-password">
22+
<div class="invalid-feedback" v-if="formErrors.password">Please enter your password.</div>
23+
</div>
24+
<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>
25+
<cloud-error v-else-if="cloudError === 'badCombo'">Something’s not quite right with your email or password.</cloud-error>
26+
<cloud-error v-else-if="cloudError"></cloud-error>
27+
<div class="pb-3">
28+
<ajax-button :syncing="syncing" spinner="true" purpose="submit-button" class="btn-primary mt-4 btn-lg btn-block">Sign in</ajax-button>
29+
</div>
30+
</ajax-form>
31+
<span class="text-center small"><a href="/customers/forgot-password">Forgot your password?</a></span>
2032
</div>
21-
<div class="form-group">
22-
<label for="password">Password</label>
23-
<input type="password" class="form-control" :class="[formErrors.password ? 'is-invalid' : '']" v-model.trim="formData.password" autocomplete="current-password">
24-
<div class="invalid-feedback" v-if="formErrors.password">Please enter your password.</div>
25-
</div>
26-
<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>
27-
<cloud-error v-else-if="cloudError === 'badCombo'">Something’s not quite right with your email or password.</cloud-error>
28-
<cloud-error v-else-if="cloudError"></cloud-error>
29-
<div class="pb-3">
30-
<ajax-button :syncing="syncing" spinner="true" purpose="submit-button" class="btn-primary mt-4 btn-lg btn-block">Sign in</ajax-button>
33+
</div>
34+
<div purpose="quote-and-logos" class="mx-auto mx-lg-0">
35+
<% if(typeof primaryBuyingSituation === 'undefined' || ['mdm'].includes(primaryBuyingSituation)) { %>
36+
<div purpose="quote">
37+
<img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
38+
<p purpose="quote-text">
39+
Exciting. This is a team that listens to feedback.
40+
</p>
41+
<div purpose="quote-author-info" class="d-flex flex-row align-items-center">
42+
<div purpose="profile-picture">
43+
<img alt="Erik Gomez" src="/images/testimonial-author-erik-gomez-48x48@2x.png">
44+
</div>
45+
<div class="d-flex flex-column align-self-top">
46+
<p purpose="name" class="font-weight-bold m-0">Erik Gomez</p>
47+
<p purpose="job-title" class="m-0">Staff Client Platform Engineer</p>
48+
</div>
49+
</div>
50+
</div>
51+
<% } else if (['eo-it'].includes(primaryBuyingSituation)) { %>
52+
<div purpose="quote">
53+
<img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
54+
<p purpose="quote-text">
55+
Mad props to how easy making a deploy pkg of the agent was. I wish everyone made stuff that easy.
56+
</p>
57+
<div purpose="quote-author-info" class="d-flex flex-row align-items-center">
58+
<div purpose="profile-picture">
59+
<img alt="Wes Whetstone" src="/images/testimonial-author-wes-whetstone-48x48@2x.png">
60+
</div>
61+
<div class="d-flex flex-column align-self-top">
62+
<p purpose="name" class="font-weight-bold m-0">Wes Whetstone</p>
63+
<p purpose="job-title" class="m-0">Staff CPE</p>
64+
</div>
65+
</div>
66+
</div>
67+
<% } else if (['eo-security'].includes(primaryBuyingSituation)) { %>
68+
<div purpose="quote">
69+
<img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
70+
<p purpose="quote-text">
71+
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.
72+
</p>
73+
<div purpose="quote-author-info" class="d-flex flex-row align-items-center">
74+
<div purpose="profile-picture">
75+
<img alt="Chandra Majumdar" src="/images/testimonial-author-chandra-majumdar-48x48@2x.png">
76+
</div>
77+
<div class="d-flex flex-column align-self-top">
78+
<p purpose="name" class="font-weight-bold m-0">Chandra Majumdar</p>
79+
<p purpose="job-title" class="m-0">Partner - Cyber and Strategic Risk</p>
80+
</div>
81+
</div>
82+
</div>
83+
<% } else if (['vm'].includes(primaryBuyingSituation)) { %>
84+
<div purpose="quote">
85+
<img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
86+
<p purpose="quote-text">
87+
The visibility down into the assets covered by the agent is phenomenal. Fleet has become the central source for a lot of things.
88+
</p>
89+
<div purpose="quote-author-info" class="d-flex flex-row align-items-center">
90+
<div purpose="profile-picture">
91+
<img alt="Andre Shields" src="/images/testimonial-author-andre-shields-48x48@2x.png">
92+
</div>
93+
<div class="d-flex flex-column align-self-top">
94+
<p purpose="name" class="font-weight-bold m-0">Andre Shields</p>
95+
<p purpose="job-title" class="m-0">Staff Cybersecurity Engineer, Vulnerability Management</p>
96+
</div>
97+
</div>
98+
</div>
99+
<% } %>
100+
<div purpose="logos" class="flex-column flex-wrap align-items-center w-100">
101+
<logo-carousel></logo-carousel>
31102
</div>
32-
</ajax-form>
33-
<span class="text-center small"><a href="/customers/forgot-password">Forgot your password?</a></span>
103+
</div>
34104
</div>
35-
<logo-carousel></logo-carousel>
36105
</div>
37106
</div>
38107
<%- /* Expose locals as `window.SAILS_LOCALS` :: */ exposeLocalsToBrowser() %>

0 commit comments

Comments
 (0)