SPA: Login Logout (Identity Component)
This commit is contained in:
Carlos Cañizares Estévez
parent
e84b6db748
commit
6f6530b5f6
@ -757,7 +757,6 @@ form .col-md-4 {
|
||||
background-color: #FFFFFF;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
/*left: 100px;*/
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/logout.png
Normal file
BIN
src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/logout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 429 B |
Binary file not shown.
|
After Width: | Height: | Size: 221 B |
@ -1,9 +1,56 @@
|
||||
$primary-colour: #00A69C;
|
||||
$primary-accent: #83D01B;
|
||||
// Colors
|
||||
$color-brand: #00A69C;
|
||||
$color-brand-dark: darken($color-brand, 10%);
|
||||
$color-brand-darker: darken($color-brand, 20%);
|
||||
$color-brand-bright: lighten($color-brand, 10%);
|
||||
$color-brand-brighter: lighten($color-brand, 20%);
|
||||
|
||||
$white-colour: #FFFFFF;
|
||||
$grey-colour: #E2E2E2;
|
||||
$text-colour: #757575;
|
||||
$color-secondary: #83D01B;
|
||||
$color-secondary-dark: darken($color-secondary, 10%);
|
||||
$color-secondary-darker: darken($color-secondary, 20%);
|
||||
$color-secondary-bright: lighten($color-secondary, 10%);
|
||||
$color-secondary-brighter: lighten($color-secondary, 20%);
|
||||
|
||||
$grey-box-shadow: 10px 10px 20px #F2F2F2;
|
||||
$grey-box-border: 1px solid #DDDDDD;
|
||||
$color-background-dark: #333333;
|
||||
$color-background-darker: #000000;
|
||||
$color-background-bright: #EEEEEE;
|
||||
$color-background-brighter: #FFFFFF;
|
||||
|
||||
$color-foreground-dark: #333333;
|
||||
$color-foreground-darker: #000000;
|
||||
$color-foreground-bright: #EEEEEE;
|
||||
$color-foreground-brighter: #FFFFFF;
|
||||
|
||||
// Animations
|
||||
$animation-speed-default: .35s;
|
||||
$animation-speed-slow: .5s;
|
||||
$animation-speed-fast: .15s;
|
||||
|
||||
// Fonts
|
||||
$font-weight-light: 200;
|
||||
$font-weight-semilight: 300;
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-semibold: 600;
|
||||
$font-weight-bold: 700;
|
||||
|
||||
$font-size-xs: .5rem; // 8px
|
||||
$font-size-s: .85rem; // 13.6px
|
||||
$font-size-m: 1rem; // 16px
|
||||
$font-size-l: 1.25rem; // 20px
|
||||
$font-size-xl: 1.5rem; // 24px
|
||||
|
||||
// Medias
|
||||
$media-screen-xxs: 360px;
|
||||
$media-screen-xs: 640px;
|
||||
$media-screen-s: 768px;
|
||||
$media-screen-m: 1024px;
|
||||
$media-screen-l: 1280px;
|
||||
$media-screen-xl: 1440px;
|
||||
$media-screen-xxl: 1680px;
|
||||
$media-screen-xxxl: 1920px;
|
||||
|
||||
// Margins
|
||||
$margin-center: 10vw;
|
||||
|
||||
$medias: xxs, xs, s, m, l, xl, xxl, xxxl;
|
||||
$mediavalues: $media-screen-xxs, $media-screen-xs, $media-screen-s, $media-screen-m, $media-screen-l, $media-screen-xl, $media-screen-xxl, $media-screen-xxxl;
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<esh-basket-status *ngIf="Authenticated"></esh-basket-status>
|
||||
<esh-identity *ngIf="!Authenticated"></esh-identity>
|
||||
<esh-identity></esh-identity>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.esh-basketstatus {
|
||||
float:right;
|
||||
|
||||
&-image {
|
||||
height: 36px;
|
||||
@ -20,5 +21,6 @@
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
import { Subscription } from 'rxjs/Subscription';
|
||||
|
||||
import { BasketService } from '../basket.service';
|
||||
import { BasketWrapperService } from '../../shared/services/basket.wrapper.service';
|
||||
@ -19,18 +18,12 @@ export class BasketStatusComponent implements OnInit {
|
||||
ngOnInit() {
|
||||
this.subscription = this.basketEvents.addItemToBasket$.subscribe(
|
||||
item => {
|
||||
console.log('element received in basket');
|
||||
console.log(item);
|
||||
this.service.setBasket(item).subscribe(res => {
|
||||
console.log(res);
|
||||
this.service.getBasket().subscribe(basket => {
|
||||
this.badge = basket.items.length;
|
||||
console.log('response from basket api');
|
||||
console.log(basket.items.length);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -51,6 +51,7 @@
|
||||
&-total-value {
|
||||
font-size: 20px;
|
||||
color: #00a69c;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
&-total-label {
|
||||
|
||||
@ -1,2 +1,8 @@
|
||||
<button *ngIf="!authenticated" (click)="login()">Login</button>
|
||||
<div *ngIf="authenticated">userName: {{userName}}</div>
|
||||
<div *ngIf="authenticated" class="identity-user">
|
||||
<div><span>{{userName}}</span></div><div style="float: right;top: 0;right: -15px;position: absolute;"><img src="../../../../images/arrow-down.png" class="identity-downArrow"></div>
|
||||
<div class="identity-userDropdown">
|
||||
<a href="http://www.google.es">MY ORDERS<img src="../../../../images/my_orders.png" class="myorders-icon"></a>
|
||||
<div (click)="logoutClicked($event)">LOG OUT<img src="../../../../images/logout.png" class="logout-icon"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,82 @@
|
||||
.identity {
|
||||
&-user {
|
||||
position: absolute !important;
|
||||
top: 30px;
|
||||
right: 120px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover .identity-userDropdown{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
&-userDropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #FFFFFF;
|
||||
min-width: 160px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
right: -15px;
|
||||
z-index: 3;
|
||||
|
||||
&:hover{
|
||||
display:block;
|
||||
}
|
||||
|
||||
//TODO: DELETE THIS BLOCK ONCE REFACTOR.
|
||||
& a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover{
|
||||
color: #83d01b;
|
||||
}
|
||||
}
|
||||
//
|
||||
|
||||
& div {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover{
|
||||
color: #83d01b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-downArrow {
|
||||
background-image: url('../images/arrow-down.png');
|
||||
height: 7px;
|
||||
width: 10px;
|
||||
display: inline-block;
|
||||
margin-left: 20px;
|
||||
|
||||
&:hover > identity.userDropdown {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
&-ordersIcon {
|
||||
background-image: url('../images/my_orders.PNG');
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
&-logOutIcon {
|
||||
background-image: url('../images/logout.PNG');
|
||||
display: inline-block;
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -33,6 +33,12 @@ export class Identity implements OnInit {
|
||||
}
|
||||
}
|
||||
|
||||
logoutClicked(event: any) {
|
||||
event.preventDefault();
|
||||
console.log('Logout clicked');
|
||||
this.logout();
|
||||
}
|
||||
|
||||
login() {
|
||||
this.service.Authorize();
|
||||
}
|
||||
|
||||
@ -159,6 +159,9 @@ export class SecurityService {
|
||||
|
||||
this.ResetAuthorizationData();
|
||||
|
||||
//emit observable
|
||||
this.authenticationSource.next(false);
|
||||
|
||||
window.location.href = url;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user