SPA: Login Logout (Identity Component)

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;
 }
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/_variables.scss

@@ -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;

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.component.html

@@ -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>

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;
     }
 }

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);
                     });
                 });
             });
     }
-
 }
 

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 {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/identity/identity.html

@@ -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>

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;
+    }
 }

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();
     }

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;
     }