Skip to content

Commit 3950de4

Browse files
jaypal412pkrawat1
jaypal412
authored and
pkrawat1
committed
Work on the forgot passward page (#185)
Why? Feature: Work on forgot a password. Work on the Update password page. Work on the profile page Work on the checkout flow This change addresses the need by: These changes are done using bootstrap and HTML [delivers #158683303]
1 parent 4f9d0f6 commit 3950de4

File tree

22 files changed

+354
-227
lines changed

22 files changed

+354
-227
lines changed

‎src/app/auth/components/forget-password/forget-password.component.html

Lines changed: 40 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,46 @@
1-
<div class="row login-container" data-hook="">
2-
<div id="content" class="col-sm-12" data-hook="">
3-
<div class="col-md-5 col-centered">
4-
<div class="panel panel-default" *ngIf="emailSent==false">
5-
<div class="panel-heading">
6-
<h3 class="panel-title">Forget Password?</h3>
7-
</div>
8-
<p class="login-info-text">Please enter your valid email</p>
9-
<div id="existing-customer" class="panel-body" data-hook="login">
10-
<form class="login-login-form" [formGroup]="forgetPasswordForm" (ngSubmit)="onSubmit()">
11-
<fieldset class="login-input-container">
12-
<div class="login-input-item">
13-
<input type="email" class="login-user-input-email login-user-input" name="email" placeholder="Your Email Address" formControlName="email"
14-
autocomplete="off">
15-
<div *ngIf="forgetPasswordForm.get('email').errors && forgetPasswordForm.get('email').touched">
16-
<span class="login-error-icon text-danger">!</span>
17-
<p class="login-error-message text-danger">{{forgetPasswordForm.get('email').errors.msg || 'Please enter a valid email id'}}</p>
1+
<div class="container">
2+
3+
<div class="col-12 col-md-7 col-sm-7 col-lg-5 loginwindow">
4+
5+
<div class="row">
6+
<div class="col-12 col-md-12 col-sm-12 col-lg-12">
7+
<div class="row login-container" data-hook="">
8+
<div id="content" class="col-sm-12" data-hook="">
9+
<div class="col-md-12 col-12 col-centered">
10+
<div class="panel panel-default" *ngIf="emailSent==false">
11+
<div class="panel-heading">
12+
<h3 class="panel-title">Forget Password?</h3>
13+
</div>
14+
<p class="login-info-text">Please enter your valid email</p>
15+
<div id="existing-customer" class="panel-body" data-hook="login">
16+
<form class="login-login-form" [formGroup]="forgetPasswordForm" (ngSubmit)="onSubmit()">
17+
<fieldset class="login-input-container">
18+
<div class="login-input-item">
19+
<input type="email" class="login-user-input-email login-user-input" name="email" placeholder="Your Email Address" formControlName="email"
20+
autocomplete="off">
21+
<div *ngIf="forgetPasswordForm.get('email').errors && forgetPasswordForm.get('email').touched">
22+
<span class="login-error-icon text-danger">!</span>
23+
<p class="login-error-message text-danger">{{forgetPasswordForm.get('email').errors.msg || 'Please enter a valid email id'}}</p>
24+
</div>
25+
</div>
26+
</fieldset>
27+
<fieldset class="login-login-button-container">
28+
<button type="submit" class="btn btn-danger login-login-button">Reset Password</button>
29+
</fieldset>
30+
</form>
1831
</div>
1932
</div>
20-
</fieldset>
21-
<fieldset class="login-login-button-container">
22-
<button type="submit" class="btn btn-danger login-login-button">Reset Password</button>
23-
</fieldset>
24-
</form>
25-
</div>
26-
</div>
27-
<div class="panel panel-default" *ngIf="emailSent==true">
28-
<div class="panel-heading">
29-
<h3 class="panel-title">Email Sent!</h3>
30-
<p>Reset Password instruction has been sent sucessfully on your mail</p>
31-
<strong>{{sentEmail}}!</strong>
32-
</div>
33+
<div class="panel panel-default" *ngIf="emailSent==true">
34+
<div class="panel-heading">
35+
<h3 class="panel-title">Email Sent!</h3>
36+
<p>Reset Password instruction has been sent sucessfully on your mail</p>
37+
<strong>{{sentEmail}}!</strong>
38+
</div>
3339

40+
</div>
41+
</div>
42+
</div>
43+
</div>
3444
</div>
3545
</div>
3646
</div>

‎src/app/auth/components/forget-password/forget-password.component.scss

Lines changed: 33 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
11
@import "../../../shared/scss/selected_theme_variables";
2+
.loginwindow {
3+
margin: 6em auto 0;
4+
overflow: hidden;
5+
padding: 10px 0;
6+
}
7+
28
.panel {
39
margin-bottom: 20px;
4-
background-color: $white;
10+
background-color: $gray-200;
511
border: none;
6-
border-radius: 0;
7-
box-shadow: 0 2px 15px rgba(0, 0, 0, .1);
12+
border-radius: 4px;
13+
border: 1px solid $gray-10;
14+
box-shadow: none;
815
.panel-heading {
916
padding: 30px 0 0;
1017
border-bottom: 1px solid transparent;
@@ -16,7 +23,7 @@
1623
margin-top: 0;
1724
margin-bottom: 0;
1825
font-size: 28px;
19-
color: $gray-800;
26+
color: $gray-900;
2027
font-weight: 400;
2128
}
2229
}
@@ -27,6 +34,7 @@
2734
border: 1px solid $gray-10;
2835
border-radius: 5px;
2936
padding: 0;
37+
background-color: $white;
3038
}
3139

3240
fieldset {
@@ -52,7 +60,6 @@ fieldset {
5260
box-sizing: border-box;
5361
text-align: center;
5462
position: relative;
55-
padding-bottom: 40px;
5663
}
5764

5865
.login-user-input-email {
@@ -101,7 +108,7 @@ input {
101108
}
102109

103110
fieldset {
104-
border: 1px solid $gray-200;
111+
border: 1px solid $gray-10;
105112
margin: 0 2px;
106113
padding: .35em .625em .75em;
107114
}
@@ -113,40 +120,40 @@ fieldset {
113120
}
114121

115122
.login-login-button {
116-
font-size: 13px;
117-
font-weight: 500;
123+
font-size: 14px;
124+
font-weight: bold;
118125
letter-spacing: 2px;
119126
padding: 15px;
120127
display: block;
121128
width: 100%;
122129
border: 0;
123130
text-transform: uppercase;
124131
border-radius: 3px;
132+
background-color: $theme-action-color - 50;
133+
color: $white;
125134
}
126135

127136
.login-link-container {
128-
text-align: left;
129-
padding: 20px;
137+
text-align: right;
138+
padding: 0px 20px 12px;
139+
font-size: 14px;
130140
}
131141

132142
.login-link {
133143
text-decoration: none;
144+
font-size: 15px;
145+
color: $theme-action-color !important;
134146
}
135147

136148
.login-right-links {
137149
float: right;
138150
}
139151

140152
.login-info-text {
141-
color: $gray-800;
153+
color: $gray-700;
142154
font-size: 12px;
143155
}
144156

145-
.login-link-container {
146-
text-align: left;
147-
padding: 20px;
148-
}
149-
150157
.login-create-account-link {
151158
margin-left: 5px;
152159
}
@@ -165,7 +172,7 @@ a {
165172
}
166173

167174
.login-info-text {
168-
color: $gray-800;
175+
color: $gray-700;
169176
font-size: 12px;
170177
}
171178

@@ -193,7 +200,7 @@ a {
193200
}
194201

195202
.login-button {
196-
max-width: 162px;
203+
width: 100%;
197204
padding-left: 18%;
198205
position: relative;
199206
font-size: 13px;
@@ -304,7 +311,13 @@ p {
304311

305312
.login-input-container {
306313
&:hover {
307-
border: 1px solid $danger;
308-
box-shadow: 0 2px 5px $danger + 100;
314+
border: 1px solid $theme-main-color;
315+
box-shadow: 0.1px 0.2px 0.4px $theme-main-color - 100;
309316
}
317+
}
318+
319+
.createacc {
320+
display: flex;
321+
align-items: center;
322+
padding-left: 3rem;
310323
}

‎src/app/auth/components/login/login.component.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,7 @@ p {
309309
}
310310

311311
.login-input-container {
312+
background-color: $white;
312313
&:hover {
313314
border: 1px solid $theme-main-color;
314315
box-shadow: 0.1px 0.2px 0.4px $theme-main-color - 100;

‎src/app/auth/components/sign-up/sign-up.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
border: 0;
5454
text-transform: uppercase;
5555
border-radius: 3px;
56-
background-color: $theme-main-color;
56+
background-color: $theme-action-color - 50;
5757
}
5858

5959
.register-input-item {

‎src/app/auth/components/update-password/update-password.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="row register-container" data-hook="">
1+
<div class="register-container" data-hook="">
22
<div id="content" class="col-sm-12" data-hook="">
33
<div class="col-md-5 col-centered">
44
<div class="panel panel-default">
@@ -29,7 +29,7 @@ <h3 class="panel-title" *ngIf="passwordReset===true">Password Changed!</h3>
2929
</div>
3030
</fieldset>
3131
<fieldset class="register-register-button-container">
32-
<button class="btn btn-success register-register-button">Update Password!</button>
32+
<button class="btn register-register-button">Update Password!</button>
3333
</fieldset>
3434
</form>
3535
</div>

‎src/app/auth/components/update-password/update-password.component.scss

Lines changed: 38 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@import "../../../shared/scss/selected_theme_variables";
2-
32
.panel {
43
margin-bottom: 20px;
5-
background-color: $white;
4+
background-color: $gray-200;
65
border: none;
7-
border-radius: 0;
8-
box-shadow: 0 2px 15px rgba(0,0,0,.1);
6+
border-radius: 4px;
7+
border: 1px solid $gray-10;
8+
box-shadow: none;
99
.panel-heading {
1010
padding: 30px 0 0;
1111
border-bottom: 1px solid transparent;
@@ -28,6 +28,11 @@
2828
border: 1px solid $gray-10;
2929
border-radius: 5px;
3030
padding: 0;
31+
background-color: $white;
32+
&:hover {
33+
border: 1px solid $theme-main-color;
34+
box-shadow: 0.1px 0.2px 0.4px $theme-main-color - 100;
35+
}
3136
}
3237

3338
.register-register-button-container {
@@ -46,6 +51,8 @@
4651
border: 0;
4752
text-transform: uppercase;
4853
border-radius: 3px;
54+
color:$white;
55+
background-color: $theme-action-color - 50;
4956
}
5057

5158
.register-input-item {
@@ -126,7 +133,8 @@ legend {
126133
margin-right: 5px;
127134
}
128135

129-
[type=checkbox], [type=radio] {
136+
[type=checkbox],
137+
[type=radio] {
130138
box-sizing: border-box;
131139
padding: 0;
132140
}
@@ -211,29 +219,43 @@ a {
211219
text-align: left;
212220
}
213221

214-
[type=reset], [type=submit], button, html [type=button] {
222+
[type=reset],
223+
[type=submit],
224+
button,
225+
html [type=button] {
215226
-webkit-appearance: button;
216227
}
217228

218-
[type=button], [type=reset], [type=submit], button {
229+
[type=button],
230+
[type=reset],
231+
[type=submit],
232+
button {
219233
cursor: pointer;
220234
}
235+
221236
/* For Firefox */
237+
222238
input[type='number'] {
223-
-moz-appearance:textfield;
239+
-moz-appearance: textfield;
224240
}
241+
225242
/* Webkit browsers like Safari and Chrome */
243+
226244
input[type=number]::-webkit-inner-spin-button,
227245
input[type=number]::-webkit-outer-spin-button {
228-
-webkit-appearance: none;
229-
margin: 0;
246+
-webkit-appearance: none;
247+
margin: 0;
230248
}
231249

232-
button, select {
250+
button,
251+
select {
233252
text-transform: none;
234253
}
235254

236-
button, input, select, textarea {
255+
button,
256+
input,
257+
select,
258+
textarea {
237259
font: inherit;
238260
}
239261

@@ -267,7 +289,8 @@ button, input, select, textarea {
267289
top: 10px;
268290
}
269291

270-
.register-fb-logo, .register-gplus-logo {
292+
.register-fb-logo,
293+
.register-gplus-logo {
271294
height: 29px;
272295
position: absolute;
273296
left: 15px;
@@ -312,8 +335,8 @@ button, input, select, textarea {
312335
transition-property: all;
313336
-webkit-transition-duration: .5s;
314337
transition-duration: .5s;
315-
-webkit-transition-timing-function: cubic-bezier(0,1,.5,1);
316-
transition-timing-function: cubic-bezier(0,1,.5,1);
338+
-webkit-transition-timing-function: cubic-bezier(0, 1, .5, 1);
339+
transition-timing-function: cubic-bezier(0, 1, .5, 1);
317340
}
318341

319342
.register-gender-error-icon {
@@ -326,9 +349,3 @@ button, input, select, textarea {
326349
margin-bottom: 0;
327350
}
328351

329-
.register-input-container {
330-
&:hover {
331-
border: 1px solid $danger;
332-
box-shadow: 0 2px 5px $danger + 100;
333-
}
334-
}

‎src/app/checkout/address/address.component.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<div class="address-section col-12 col-md-7 col-lg-7">
2-
<div *ngIf="(shipAddress$ | async)" class="row">
3-
<div class="left col-12 col-md-8 col-lg-8">
2+
<div *ngIf="(shipAddress$ | async)" class="row m-0">
3+
<div class="left col-12 col-md-8 col-lg-8 m-0 ">
44
<div class="edit-address">
55
<span class="edit-label">
66
Select Delivery Address
77
</span>
88
</div>
99
<app-delivery-address [address]="(shipAddress$ | async)"></app-delivery-address>
1010
</div>
11-
<div class="right col-12 col-md-4 col-lg-4">
11+
<div class="right col-12 col-md-4 col-lg-4 m-0 ">
1212
<app-delivery-options [orderNumber]="orderNumber$ | async"></app-delivery-options>
1313
<button (click)="checkoutToPayment()" class="pay-btn">CONTINUE TO PAYMENT</button>
1414
</div>

0 commit comments

Comments
 (0)