From 6f6530b5f6d6f30d971b3321e0cd2cfa8d33e49d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Ca=C3=B1izares=20Est=C3=A9vez?= Date: Tue, 27 Dec 2016 10:32:18 +0100 Subject: [PATCH] SPA: Login Logout (Identity Component) --- src/Web/WebMVC/wwwroot/css/site.css | 1 - .../Client/images/arrow-down.png | Bin 0 -> 1045 bytes .../Client/images/logout.png | Bin 0 -> 429 bytes .../Client/images/my_orders.png | Bin 0 -> 221 bytes .../Client/modules/_variables.scss | 61 ++++++++++++-- .../Client/modules/app.component.html | 2 +- .../basket-status.component.scss | 2 + .../basket-status/basket-status.component.ts | 9 +- .../modules/basket/basket.component.scss | 1 + .../shared/components/identity/identity.html | 8 +- .../shared/components/identity/identity.scss | 79 ++++++++++++++++++ .../shared/components/identity/identity.ts | 6 ++ .../shared/services/security.service.ts | 3 + 13 files changed, 154 insertions(+), 18 deletions(-) create mode 100644 src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/arrow-down.png create mode 100644 src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/logout.png create mode 100644 src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/my_orders.png diff --git a/src/Web/WebMVC/wwwroot/css/site.css b/src/Web/WebMVC/wwwroot/css/site.css index 7981b10ab..fe152a3f3 100644 --- a/src/Web/WebMVC/wwwroot/css/site.css +++ b/src/Web/WebMVC/wwwroot/css/site.css @@ -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; } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/arrow-down.png b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/images/arrow-down.png new file mode 100644 index 0000000000000000000000000000000000000000..1ebe2e929f3f2f57d48d8464510f8f3ba0d4104d GIT binary patch literal 1045 zcmaJ=&ui0A9M5d`gXy4%PTj>vCNjn5N7r^uSlnu|y23g~S6EMCn!L5KOJ0_|*{mKM z4rIHDrwN|KgP;s=9z>l?!NG#EY^&K;}!=b{?$Zk@tO%&*$^~`BtYUul98J zbyF18lO9*HWcTgPt`73&pMTTHb_S2-@idyn71e=MQbz>{(xzI3S*YrZ^ILG3q5=a( zE|2q>2~k5Pqxu-eGi}1AsNoUMR<$z3pa6@8CDFfLy`_PnOY}@E!)0t4mW=VL1E;H# zIjvgO1f3qa42C_C2$&G7z%%D8SM(&hrYjQLzh-GrgW$469|V=pOaU1=5X6{xSmOsH zU`Sy2m=H-sFM$Zh$5}4Q@Kmp#IUso1@Q)StV8XMNSf3!q^sBwo<7ul|cqM zMZy&XmW!~FNSGkP?xKZNFKoH}4Fv_dnq%15Ko;;7)dE_;5=|mKNWrw5vX)yf6Db($ zsW!_qoS#wyn92MfYMM>7i?i@B-hT?axkVeYS?Hn#M)Xr#eakhWk#3pcp>Ay;V0^#{VViDv~m#x1C)9Atu8;-b+ymUv6O zI#+KU%TP-$OM+qj_WsrG#ub?%-)s&qIW)%~T4d%OGTiuGwMZVua#~5|ysw41H(+Ob zVX1^@s6+90*i00001b5ch_0Itp) z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGmbN~PnbOGLGA9w%&0YXVcK~zXfWB5-) zFlsnfKwrb(e82Pm=7(MXZ-3l_6NBX6{IdVhVOgY@xSh@(Eq0MQdkWJVVL3n{`~{uzhD|0z~b`G|21a?{`X$i`+xE6YG5$z z#lWy&`SA1U|63pS{Qv#;Csa2oz-oB)8NUCMuA2Y<^7}1R6gznI<;?#TcN6~K{;>D| z&p%(Fq6mP)<@{j7KmK|K7Q+?E`<`|DZ@Z}Uf92goum#_KzXz*_0iq0tM6xJG*f(F0 zfyRy8|8)!|L6&6bffcDCj1jukpZ}iw zKU==+@BY7q{GJj^p11%6-ZPqRi&DmZMp@qc@~Ps^+(PPThS zyV#W19>`!)zopr0MeIC
- +
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss index a820a44a4..2888ead1a 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.scss @@ -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; } } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts index 06751547b..11c1f86d0 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts @@ -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); }); }); }); } - } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss index e7cbdbf7d..aa752bea5 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss @@ -51,6 +51,7 @@ &-total-value { font-size: 20px; color: #00a69c; + width: 90px; } &-total-label { diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html index cc2aafb45..b0dd9f49c 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html @@ -1,2 +1,8 @@ -
userName: {{userName}}
+
+
{{userName}}
+
+ MY ORDERS +
LOG OUT
+
+
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss index 76ac3a08e..7ab3b2394 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.scss @@ -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; + } } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts index 9b8d8352b..ea3b92e9c 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.ts @@ -33,6 +33,12 @@ export class Identity implements OnInit { } } + logoutClicked(event: any) { + event.preventDefault(); + console.log('Logout clicked'); + this.logout(); + } + login() { this.service.Authorize(); } diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts index 32756c0cd..cdf823b27 100644 --- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts +++ b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts @@ -159,6 +159,9 @@ export class SecurityService { this.ResetAuthorizationData(); + //emit observable + this.authenticationSource.next(false); + window.location.href = url; }