SPA: Identity component, Order component

eShopOnContainers.sln

@@ -75,6 +75,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "eShopOnContainers.Core", "s
 EndProject
 Project("{8BB2217D-0F2D-49D1-97BC-3654ED321F3B}") = "UnitTest", "test\Services\UnitTest\UnitTest.xproj", "{7796F5D8-31FC-45A4-B673-19DE5BA194CF}"
 EndProject
+Project("{8BB2217D-0F2D-49D1-97BC-3654ED321F3B}") = "Ordering.Application", "src\Services\Ordering\Ordering.Application\Ordering.Application.xproj", "{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Ad-Hoc|Any CPU = Ad-Hoc|Any CPU
@@ -956,6 +958,54 @@ Global
 		{7796F5D8-31FC-45A4-B673-19DE5BA194CF}.Release|x64.Build.0 = Release|Any CPU
 		{7796F5D8-31FC-45A4-B673-19DE5BA194CF}.Release|x86.ActiveCfg = Release|Any CPU
 		{7796F5D8-31FC-45A4-B673-19DE5BA194CF}.Release|x86.Build.0 = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|Any CPU.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|Any CPU.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|ARM.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|ARM.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|iPhone.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|iPhone.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|iPhoneSimulator.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|iPhoneSimulator.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|x64.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|x64.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|x86.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Ad-Hoc|x86.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|Any CPU.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|Any CPU.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|ARM.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|ARM.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|iPhone.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|iPhone.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|iPhoneSimulator.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|iPhoneSimulator.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|x64.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|x64.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|x86.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.AppStore|x86.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|ARM.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|ARM.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|iPhone.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|iPhone.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|iPhoneSimulator.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|iPhoneSimulator.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|x64.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Debug|x86.Build.0 = Debug|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|Any CPU.Build.0 = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|ARM.ActiveCfg = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|ARM.Build.0 = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|iPhone.ActiveCfg = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|iPhone.Build.0 = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|iPhoneSimulator.ActiveCfg = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|iPhoneSimulator.Build.0 = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|x64.ActiveCfg = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|x64.Build.0 = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|x86.ActiveCfg = Release|Any CPU
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -991,5 +1041,6 @@ Global
 		{E3B18084-842C-4B80-8E4A-A7E588EC3137} = {B7B1D395-4E06-4036-BE86-C216756B9367}
 		{67F9D3A8-F71E-4428-913F-C37AE82CDB24} = {778289CA-31F7-4464-8C2A-612EE846F8A7}
 		{7796F5D8-31FC-45A4-B673-19DE5BA194CF} = {EF0337F2-ED00-4643-89FD-EE10863F1870}
+		{4193CAA3-A1C3-4818-A06F-A2D85FDE77E7} = {0BD0DB92-2D98-44D9-9AC0-C59186D59B0B}
 	EndGlobalSection
 EndGlobal

src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj

@@ -17,7 +17,7 @@
     <GenerateSerializationAssemblies>Off</GenerateSerializationAssemblies>
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <AndroidUseLatestPlatformSdk>true</AndroidUseLatestPlatformSdk>
-    <TargetFrameworkVersion>v7.0</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v6.0</TargetFrameworkVersion>
     <AndroidSupportedAbis>armeabi,armeabi-v7a,x86</AndroidSupportedAbis>
     <AndroidStoreUncompressedFileExtensions />
     <MandroidI18n />

src/Mobile/eShopOnContainers/eShopOnContainers.Droid/eShopOnContainers.Droid.csproj.bak

@@ -389,10 +389,8 @@
     </PropertyGroup>
     <Error Condition="!Exists('..\..\..\..\packages\Xamarin.Android.Support.Vector.Drawable.23.3.0\build\Xamarin.Android.Support.Vector.Drawable.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\..\..\..\packages\Xamarin.Android.Support.Vector.Drawable.23.3.0\build\Xamarin.Android.Support.Vector.Drawable.targets'))" />
     <Error Condition="!Exists('..\..\..\..\packages\Microsoft.Bcl.Build.1.0.21\build\Microsoft.Bcl.Build.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\..\packages\Microsoft.Bcl.Build.1.0.21\build\Microsoft.Bcl.Build.targets'))" />
-    <Error Condition="!Exists('..\..\..\..\packages\Xamarin.Forms.2.3.2.127\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+MonoTouch10+Xamarin.iOS10\Xamarin.Forms.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\..\..\..\packages\Xamarin.Forms.2.3.2.127\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+MonoTouch10+Xamarin.iOS10\Xamarin.Forms.targets'))" />
     <Error Condition="!Exists('..\..\..\..\packages\Xamarin.Forms.2.3.3.175\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+Xamarin.iOS10+xamarinmac20\Xamarin.Forms.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\..\..\..\packages\Xamarin.Forms.2.3.3.175\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+Xamarin.iOS10+xamarinmac20\Xamarin.Forms.targets'))" />
   </Target>
   <Import Project="..\..\..\..\packages\Microsoft.Bcl.Build.1.0.21\build\Microsoft.Bcl.Build.targets" Condition="Exists('..\..\..\..\packages\Microsoft.Bcl.Build.1.0.21\build\Microsoft.Bcl.Build.targets')" />
-  <Import Project="..\..\..\..\packages\Xamarin.Forms.2.3.2.127\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+MonoTouch10+Xamarin.iOS10\Xamarin.Forms.targets" Condition="Exists('..\..\..\..\packages\Xamarin.Forms.2.3.2.127\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+MonoTouch10+Xamarin.iOS10\Xamarin.Forms.targets')" />
   <Import Project="..\..\..\..\packages\Xamarin.Forms.2.3.3.175\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+Xamarin.iOS10+xamarinmac20\Xamarin.Forms.targets" Condition="Exists('..\..\..\..\packages\Xamarin.Forms.2.3.3.175\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+Xamarin.iOS10+xamarinmac20\Xamarin.Forms.targets')" />
 </Project>

src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj

@@ -16,7 +16,7 @@
     <AndroidResgenFile>Resources\Resource.Designer.cs</AndroidResgenFile>
     <GenerateSerializationAssemblies>Off</GenerateSerializationAssemblies>
     <AndroidUseLatestPlatformSdk>True</AndroidUseLatestPlatformSdk>
-    <TargetFrameworkVersion>v7.0</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v6.0</TargetFrameworkVersion>
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <NuGetPackageImportStamp>
     </NuGetPackageImportStamp>

src/Mobile/eShopOnContainers/eShopOnContainers.TestRunner.Droid/eShopOnContainers.TestRunner.Droid.csproj.bak

@@ -16,7 +16,7 @@
     <AndroidResgenFile>Resources\Resource.Designer.cs</AndroidResgenFile>
     <GenerateSerializationAssemblies>Off</GenerateSerializationAssemblies>
     <AndroidUseLatestPlatformSdk>True</AndroidUseLatestPlatformSdk>
-    <TargetFrameworkVersion>v6.0</TargetFrameworkVersion>
+    <TargetFrameworkVersion>v7.0</TargetFrameworkVersion>
     <AndroidManifest>Properties\AndroidManifest.xml</AndroidManifest>
     <NuGetPackageImportStamp>
     </NuGetPackageImportStamp>

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

@@ -21,7 +21,7 @@ export class AppComponent implements OnInit {
     subscription: Subscription;
 
     constructor(private titleService: Title, private securityService: SecurityService) {
-
+        this.Authenticated = this.securityService.IsAuthorized;
     }
 
     ngOnInit() {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/app.routes.ts

@@ -4,6 +4,7 @@ import { BasketComponent } from './basket/basket.component';
 import { CatalogComponent } from './catalog/catalog.component';
 import { OrdersComponent } from './orders/orders.component';
 import { OrdersDetailComponent } from './orders/orders-detail/orders-detail.component';
+import { OrdersNewComponent } from './orders/orders-new/orders-new.component';
 
 export const routes: Routes = [
     { path: '', redirectTo: 'catalog', pathMatch: 'full' },
@@ -11,6 +12,7 @@ export const routes: Routes = [
     { path: 'catalog', component: CatalogComponent },
     { path: 'orders', component: OrdersComponent },
     { path: 'orders/:id', component: OrdersDetailComponent },
+    { path: 'order', component: OrdersNewComponent }
    //Lazy async modules (angular-loader-router) and enable a router in each module. 
    //{
    // path: 'basket',  loadChildren: '/basket/basket.module' });

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket-status/basket-status.component.ts

@@ -3,6 +3,7 @@ import { Subscription }         from 'rxjs/Subscription';
 
 import { BasketService }        from '../basket.service';
 import { BasketWrapperService } from '../../shared/services/basket.wrapper.service';
+import { SecurityService }      from '../../shared/services/security.service';
 
 @Component({
     selector: 'esh-basket-status',
@@ -11,11 +12,13 @@ import { BasketWrapperService } from '../../shared/services/basket.wrapper.servi
 })
 export class BasketStatusComponent implements OnInit {
     subscription: Subscription;
+    authSubscription: Subscription;
     badge: number = 0;
 
-    constructor(private service: BasketService, private basketEvents: BasketWrapperService) { }
+    constructor(private service: BasketService, private basketEvents: BasketWrapperService, private authService: SecurityService) { }
 
     ngOnInit() {
+        // Subscribe to Add Basket Observable:
         this.subscription = this.basketEvents.addItemToBasket$.subscribe(
             item => {
                 this.service.setBasket(item).subscribe(res => {
@@ -24,6 +27,18 @@ export class BasketStatusComponent implements OnInit {
                     });
                 });
             });
+
+        // Subscribe to login and logout observable
+        this.authSubscription = this.authService.authenticationChallenge$.subscribe(res => {
+            this.service.getBasket().subscribe(basket => {
+                this.badge = basket.items.length;
+            });
+        });
+
+        // Init:
+        this.service.getBasket().subscribe(basket => {
+            this.badge = basket.items.length;
+        });
     }
 }
 

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

@@ -59,5 +59,10 @@
                 </table>
             </section>
         </div>
+        <div class="col-md-8">
+        </div>
+        <div class="col-md-4">
+            <input type="submit" (Click)="checkOut()" class="btn esh-basket-checkout" value="[ Checkout ]" name="action">
+        </div>
     </div>
 </div>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.scss

@@ -61,7 +61,25 @@
     }
 
     &-totals {
-        border-bottom:none!important;
+        border-bottom: none !important;
+    }
+
+    &-checkout {
+        float: right;
+        margin-top: 40px;
+        margin-bottom: 40px;
+        background-color: #83d01b;
+        color: #fff;
+        padding: 10px 20px 10px 20px;
+        border-radius: 0;
+        border: none;
+        width: 255px;
+        display: inline-block;
+        text-align: center;
+        text-transform: uppercase;
+        height: 45px;
+        font-size: 16px;
+        font-weight: normal;
     }
 }
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.component.ts

@@ -1,8 +1,10 @@
 import { Component, OnInit }    from '@angular/core';
+import { Router }               from '@angular/router';
 
 import { BasketService }        from './basket.service';
 import { IBasket }              from '../shared/models/basket.model';
 import { IBasketItem }          from '../shared/models/basketItem.model';
+import { BasketWrapperService } from '../shared/services/basket.wrapper.service';
 
 @Component({
     selector: 'esh-basket .esh-basket',
@@ -12,8 +14,8 @@ import { IBasketItem }          from '../shared/models/basketItem.model';
 export class BasketComponent implements OnInit {
     basket: IBasket;
     totalPrice: number = 0;
-    
-    constructor(private service: BasketService) { }
+
+    constructor(private service: BasketService, private router: Router, private basketwrapper: BasketComponent) { }
 
     ngOnInit() {
         this.service.getBasket().subscribe(basket => {
@@ -24,6 +26,13 @@ export class BasketComponent implements OnInit {
 
     itemQuantityChanged(item: IBasketItem) {
         this.calculateTotalPrice();
+        this.service.setBasket(this.basket);
+    }
+
+    checkOut() {
+        console.log('checkout clicked!');
+        this.basketwrapper.basket = this.basket;
+        this.router.navigate(['order']);
     }
 
     private calculateTotalPrice() {
@@ -31,5 +40,7 @@ export class BasketComponent implements OnInit {
             this.totalPrice += (item.unitPrice * item.quantity)
         });
     }
+
+    
 }
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/basket/basket.service.ts

@@ -16,16 +16,25 @@ import 'rxjs/add/operator/map';
 export class BasketService {
     private basketUrl: string = 'http://eshopcontainers:5103';
     basket: IBasket = {
-        buyerId: 'fakeIdentity',
+        buyerId: '',
         items: []
     };
 
     constructor(private service: DataService, private authService: SecurityService) {
         this.basket.items = [];
+
+        // Init:
+        if (this.authService.IsAuthorized) {
+            if (this.authService.UserData) {
+                this.basket.buyerId = this.authService.UserData.sub;
+                this.getBasket().subscribe(basket => {
+                    this.basket = basket;
+                });
+            }
+        }
     }
 
     setBasket(item): Observable<boolean> {
-        console.log('set basket');
         this.basket.items.push(item);
         return this.service.post(this.basketUrl + '/', this.basket).map((response: Response) => {
             return true;

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.scss

@@ -28,7 +28,7 @@ select::-ms-expand {
         &-container {
             position: absolute;
             width: 100%;
-            background-color: $primary-colour;
+            background-color: $color-brand;
             left: 0;
             height: 65px;
         }
@@ -37,7 +37,7 @@ select::-ms-expand {
             width: 45px;
             height: 45px;
             padding: 6px 20px 10px 8px;
-            background-color: $primary-accent;
+            background-color: $color-secondary;
             color: white;
             font-size: 16px;
             margin: 10px 0;
@@ -96,7 +96,7 @@ select::-ms-expand {
                 width: 255px;
                 height: 45px;
                 padding: 10px 20px 10px 20px;
-                background-color: $primary-accent;
+                background-color: $color-secondary;
                 color: white;
                 font-size: 16px;
                 margin: 10px 0;
@@ -109,7 +109,6 @@ select::-ms-expand {
                 text-transform: uppercase;
                 font-weight: 300;
                 font-size: 16px;
-                /*margin-top: 20px;*/
             }
 
             &-price {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/catalog/catalog.component.ts

@@ -57,7 +57,7 @@ export class CatalogComponent implements OnInit {
     getCatalog(pageSize:number, pageIndex: number, brand?: number, type?: number) {
         this.service.getCatalog(pageIndex, pageSize, brand, type).subscribe(catalog => {
             this.catalog = catalog;
-            console.log('catalog items retrieved: ' + catalog.count);
+            //console.log('catalog items retrieved: ' + catalog.count);
 
             this.paginationInfo = {
                 actualPage : catalog.pageIndex,
@@ -67,7 +67,7 @@ export class CatalogComponent implements OnInit {
                 items: catalog.pageSize
             };
 
-            console.log(this.paginationInfo);
+            //console.log(this.paginationInfo);
         });
     }
 
@@ -76,7 +76,7 @@ export class CatalogComponent implements OnInit {
             this.types = types;
             let alltypes = { id: null, type: 'All' };
             this.types.unshift(alltypes);
-            console.log('types retrieved: ' + types.length);
+            //console.log('types retrieved: ' + types.length);
         });
     }
 
@@ -85,7 +85,7 @@ export class CatalogComponent implements OnInit {
             this.brands = brands;
             let allBrands = { id: null, brand: 'All' };
             this.brands.unshift(allBrands);
-            console.log('brands retrieved: ' + brands.length);
+            //console.log('brands retrieved: ' + brands.length);
         });
     }
 }

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.html

@@ -0,0 +1,175 @@
+<div class="esh-orders-new-header">
+    <ul class="container">
+        <li class="esh-orders-new-header-back" routerLink="/basket">Back to basket</li>
+    </ul>
+</div>
+
+
+<div class="jumbotron">
+    <h2>Form with Validations</h2>
+    <form [formGroup]="newOrderForm" (ngSubmit)="submitForm(newOrderForm.value)">
+        <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['firstName'].valid && newOrderForm.controls['firstName'].touched}">
+            <label>First Name:</label>
+            <input class="form-control" type="text" placeholder="John" [formControl]="newOrderForm.controls['firstName']">
+            <!-- The hasError method will tell us if a particular error exists -->
+            <div *ngIf="newOrderForm.controls['firstName'].hasError('required') && newOrderForm.controls['firstName'].touched" class="alert alert-danger">You must include a first name.</div>
+        </div>
+        <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['lastName'].valid && newOrderForm.controls['lastName'].touched}">
+            <label>Last Name</label>
+            <input class="form-control" type="text" placeholder="Doe" [formControl]="complexForm.controls['lastName']">
+            <!-- The hasError method can work with the built in validators but custom validators as well -->
+            <div *ngIf="newOrderForm.controls['lastName'].hasError('required') && newOrderForm.controls['lastName'].touched" class="alert alert-danger">You must include a last name.</div>
+            <div *ngIf="newOrderForm.controls['lastName'].hasError('minlength') && newOrderForm.controls['lastName'].touched" class="alert alert-danger">Your last name must be at least 5 characters long.</div>
+            <div *ngIf="newOrderForm.controls['lastName'].hasError('maxlength') && newOrderForm.controls['lastName'].touched" class="alert alert-danger">Your last name cannot exceed 10 characters.</div>
+        </div>
+        <div class="form-group">
+            <label>Gender</label>
+            <div class="alert alert-danger" *ngIf="!newOrderForm.controls['gender'].valid && complexForm.controls['gender'].touched">You must select a gender.</div>
+        </div>
+        <div class="radio">
+            <label>
+                <input type="radio" name="gender" value="Male" [formControl]="newOrderForm.controls['gender']">
+                Male
+            </label>
+        </div>
+        <div class="radio">
+            <label>
+                <input type="radio" name="gender" value="Female" [formControl]="complexForm.controls['gender']">
+                Female
+            </label>
+        </div>
+        <div class="form-group">
+            <label>Activities</label>
+        </div>
+        <label class="checkbox-inline">
+            <input type="checkbox" value="hiking" name="hiking" [formControl]="complexForm.controls['hiking']"> Hiking
+        </label>
+        <label class="checkbox-inline">
+            <input type="checkbox" value="swimming" name="swimming" [formControl]="complexForm.controls['swimming']"> Swimming
+        </label>
+        <label class="checkbox-inline">
+            <input type="checkbox" value="running" name="running" [formControl]="complexForm.controls['running']"> Running
+        </label>
+        <div class="form-group">
+            <button type="submit" class="btn btn-primary" [disabled]="!complexForm.valid">Submit</button>
+        </div>
+    </form>
+</div>
+
+
+
+
+
+<div class="container esh-orders-new-container">
+    <h1>SHIPPING ADDRESS</h1>
+    <div class="row">
+        <div class="col-md-6">
+            ADDRESS<br />
+            {{address}}
+        </div>
+        <div class="col-md-6">
+            CITY<br />
+            {{city}}
+        </div>
+        <div class="col-md-6">
+            STATE<br />
+            {{state}}
+        </div>
+        <div class="col-md-6">
+            COUNTRY<br />
+            {{country}}
+        </div>
+    </div>
+    <h1>PAYMENT METHOD</h1>
+    <div class="row">
+        <div class="col-md-6">
+            CARD NUMBER<br />
+            {{address}}
+        </div>
+        <div class="col-md-6">
+            CARDHOLDER NAME<br />
+            {{city}}
+        </div>
+        <div class="col-md-3">
+            EXPIRATION DATE<br />
+            {{state}}
+        </div>
+        <div class="col-md-3">
+            SECURITY CODE<br />
+            {{country}}
+        </div>
+    </div>
+    <div class="col-md-12">
+        <section>
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th class="cart-product-column">
+                            PRODUCT
+                        </th>
+                        <th>
+
+                        </th>
+                        <th>
+                            BRAND
+                        </th>
+                        <th>
+                            PRICE
+                        </th>
+                        <th>
+                            QUANTITY
+                        </th>
+                        <th>
+                            COST
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <!-- ngFor -->
+                    <tr>
+                        <td class="cart-product-column">
+
+                        </td>
+                        <td class="cart-product-column">
+
+                        </td>
+                        <td class="cart-product-column">
+                            ROSLYN
+                        </td>
+                        <td class="cart-product-column">
+
+                        </td>
+                        <td class="cart-product-column">
+
+                        </td>
+                        <td class="cart-product-column cart-total-value">
+
+                        </td>
+                    </tr>
+                    <tr class="cart-totals">
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        <td>
+                            <div class="cart-total-value">
+                                <div class="cart-total-label"><span>TOTAL</span></div>
+                                <span>$ 29,00</span>
+                                <input type="hidden" value="29,00" name="Total">
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+    </div>
+    <div class="form-group">
+        <div class="col-md-8">
+
+        </div>
+        <div class="col-md-4">
+            <input type="submit" value="[ Place Order ]" name="action" class="btn esh-orders-new-placeOrder">
+        </div>
+    </div>
+</div>

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss

@@ -0,0 +1,59 @@
+@import '../../_variables.scss';
+
+.esh-orders-new {
+    min-height: 80vh;
+
+    &-header {
+        background-color: #00A69C;
+        height: 63px;
+
+        li {
+            list-style: none;
+            display: inline;
+            opacity: 0.5;
+            margin-top: 25px;
+            margin-left: 10px;
+            float: right;
+            cursor: pointer;
+            color: white;
+        }
+
+        li a {
+            color: white;
+        }
+
+        &-back {
+            float: left !important;
+            margin-top: 20px !important;
+            text-transform: uppercase;
+        }
+
+        li a:hover {
+            text-decoration: none;
+        }
+    }
+
+    &-container {
+        min-height: 70vh;
+        padding-top: 40px;
+        margin-bottom: 30px;
+    }
+
+    &-placeOrder {
+        float: right;
+        margin-top: 40px;
+        margin-bottom: 40px;
+        background-color: #83d01b;
+        color: #fff;
+        padding: 10px 20px 10px 20px;
+        border-radius: 0;
+        border: none;
+        width: 255px;
+        display: inline-block;
+        text-align: center;
+        text-transform: uppercase;
+        height: 45px;
+        font-size: 16px;
+        font-weight: normal;
+    }
+}

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit }                        from '@angular/core';
+import { OrdersService }                            from '../orders.service';
+import { IOrder }                                   from '../../shared/models/order.model';
+import { SecurityService }                          from '../../shared/services/security.service';
+import { FormGroup, FormBuilder, Validators  }      from '@angular/forms';
+import { BasketWrapperService }                     from '../../shared/services/basket.wrapper.service';
+
+@Component({
+    selector: 'esh-orders-new .esh-orders-new',
+    styleUrls: ['./orders-new.component.scss'],
+    templateUrl: './orders-new.component.html'
+})
+export class OrdersNewComponent implements OnInit {
+    private newOrderForm = {}; // new order form
+
+    constructor(private service: OrdersService, private identityService: SecurityService, fb: FormBuilder, private basketWrapper: BasketWrapperService) {
+        this.newOrderForm = fb.group({
+            'address': [null, Validators.required],
+            'city': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(10)])],
+            'state': [null, Validators.required],
+            'country': [null, Validators.required],
+            'cardnumber': [null, Validators.required],
+            'cardholdername': [null, Validators.required],
+            'expirationdate': [null, Validators.required],
+            'securitycode': [null, Validators.required], 
+        });
+    }
+
+    ngOnInit() {
+        //Obtener el basket. 
+        var basket = this.basketWrapper.basket;
+        console.log('orders component');
+        console.log(basket);
+        console.log(this.identityService.UserData);
+        //Obtener información del perfil de usuario.
+        
+    }
+
+    submitForm(value: any) {
+        console.log(value);
+    }
+}
+

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts

@@ -4,12 +4,13 @@ import { BrowserModule  }       from '@angular/platform-browser';
 import { SharedModule }         from '../shared/shared.module';
 import { OrdersComponent }      from './orders.component';
 import { OrdersDetailComponent }      from './orders-detail/orders-detail.component';
+import { OrdersNewComponent }      from './orders-new/orders-new.component';
 import { OrdersService }        from './orders.service';
 import { Pager }                from '../shared/components/pager/pager';
 
 @NgModule({
     imports: [BrowserModule, SharedModule],
-    declarations: [OrdersComponent, OrdersDetailComponent],
+    declarations: [OrdersComponent, OrdersDetailComponent, OrdersNewComponent],
     providers: [OrdersService]
 })
 export class OrdersModule { }

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

@@ -1,8 +1,8 @@
-<button *ngIf="!authenticated" (click)="login()">Login</button>
+<button *ngIf="!authenticated" class="identity-login" (click)="login()">Login</button>
 <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 [routerLink]="['orders']">MY ORDERS<img src="../../../../images/my_orders.png"></div>
+        <div (click)="logoutClicked($event)">LOG OUT<img src="../../../../images/logout.png"></div>
     </div>
 </div>

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

@@ -5,8 +5,8 @@
         right: 120px;
         cursor: pointer;
 
-        &:hover .identity-userDropdown{
-            display:block;
+        &:hover .identity-userDropdown {
+            display: block;
         }
     }
 
@@ -19,24 +19,9 @@
         right: -15px;
         z-index: 3;
 
-        &:hover{
-            display:block;
-        }
-
-        //TODO: DELETE THIS BLOCK ONCE REFACTOR.
-        & a {
-            color: black;
-            padding: 12px 16px;
-            text-decoration: none;
+        &:hover {
             display: block;
-            text-align: right;
-            text-transform: uppercase;
-
-            &:hover{
-                color: #83d01b;
-            }
         }
-        //
 
         & div {
             color: black;
@@ -46,37 +31,33 @@
             text-align: right;
             text-transform: uppercase;
 
-            &:hover{
+            &: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;
+            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;
+    &-login {
+        border: 1px solid #00a69c;
+        height: 36px !important;
+        margin-right: 10px;
+        margin-top: 10px;
+        background-color: #fff;
+        color: #00a69c;
+        text-transform: uppercase;
+        max-width: 140px;
+        width: 140px;
+        padding-top: 8px !important;
     }
 }

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

@@ -21,9 +21,6 @@ export class Identity implements OnInit  {
     ngOnInit() {
         this.subscription = this.service.authenticationChallenge$.subscribe(res =>
         {
-            //console.log(res);
-            //console.log(this.service.UserData);
-            //console.log(this.service);
             this.authenticated = res;
             this.userName = this.service.UserData.email;
         });
@@ -31,6 +28,14 @@ export class Identity implements OnInit  {
         if (window.location.hash) {
             this.service.AuthorizedCallback();
         }
+
+        console.log('identity component, checking authorized' + this.service.IsAuthorized);
+        this.authenticated = this.service.IsAuthorized;
+
+        if (this.authenticated) {
+            if (this.service.UserData)
+                this.userName = this.service.UserData.email;
+        }
     }
 
     logoutClicked(event: any) {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts

@@ -21,7 +21,7 @@ export class Pager implements OnInit, OnChanges  {
     }
 
     ngOnInit() {
-        console.log(this.model);
+        //console.log(this.model);
     }
 
     ngOnChanges() {

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts

@@ -1,11 +1,13 @@
-import { Injectable } from '@angular/core';
-import { Subject }    from 'rxjs/Subject';
+import { Injectable }       from '@angular/core';
+import { Subject }          from 'rxjs/Subject';
 
-import { ICatalogItem } from '../models/catalogItem.model';
-import { IBasketItem } from '../models/basketItem.model';
+import { ICatalogItem }     from '../models/catalogItem.model';
+import { IBasketItem }      from '../models/basketItem.model';
+import { IBasket }          from '../models/basket.model';
 
 @Injectable()
 export class BasketWrapperService {
+    public basket: IBasket
 
     constructor() { }
 

src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/security.service.ts

@@ -1,10 +1,11 @@
-import { Injectable } from '@angular/core';
-import { Http, Response, Headers } from '@angular/http';
+import { Injectable }                   from '@angular/core';
+import { Http, Response, Headers }      from '@angular/http';
 import 'rxjs/add/operator/map';
-import { Observable } from 'rxjs/Observable';
-import { Subject }    from 'rxjs/Subject';
+import { Observable }                   from 'rxjs/Observable';
+import { Subject }                      from 'rxjs/Subject';
 //import { Configuration } from '../app.constants';
-import { Router } from '@angular/router';
+import { Router }                       from '@angular/router';
+import { ActivatedRoute }               from '@angular/router';
 
 @Injectable()
 export class SecurityService {
@@ -15,7 +16,7 @@ export class SecurityService {
     private authenticationSource = new Subject<boolean>();
     authenticationChallenge$ = this.authenticationSource.asObservable();
 
-    constructor(private _http: Http, private _router: Router) {
+    constructor(private _http: Http, private _router: Router, private route: ActivatedRoute) {
         this.headers = new Headers();
         this.headers.append('Content-Type', 'application/json');
         this.headers.append('Accept', 'application/json');
@@ -23,6 +24,8 @@ export class SecurityService {
 
         if (this.retrieve("IsAuthorized") !== "") {
             this.IsAuthorized = this.retrieve("IsAuthorized");
+            this.authenticationSource.next(true);
+            this.UserData = this.retrieve("userData");
         }
     }
 
@@ -54,8 +57,10 @@ export class SecurityService {
         this.getUserData()
             .subscribe(data => {
                 this.UserData = data;
+                this.store("userData", data);
                 //emit observable
                 this.authenticationSource.next(true);
+                window.location.href = 'http://localhost:5104';
             },
             error => this.HandleError(error),
             () => {
@@ -105,6 +110,7 @@ export class SecurityService {
         var token = "";
         var id_token = "";
         var authResponseIsValid = false;
+
         if (!result.error) {
 
             if (result.state !== this.retrieve("authStateControl")) {
@@ -130,25 +136,14 @@ export class SecurityService {
             }
         }
 
+
         if (authResponseIsValid) {
             this.SetAuthorizationData(token, id_token);
-            console.log(this.retrieve("authorizationData"));
-
-            // router navigate to DataEventRecordsList
-            this._router.navigate(['/dataeventrecords/list']);
-        }
-        else {
-            this.ResetAuthorizationData();
-            this._router.navigate(['/Unauthorized']);
         }
     }
 
     public Logoff() {
-        // /connect/endsession?id_token_hint=...&post_logout_redirect_uri=https://myapp.com
-        console.log("BEGIN Authorize, no auth data");
-
         var authorizationUrl = 'http://localhost:5105/connect/endsession';
-        console.log(this.retrieve("authorizationDataIdToken"));
         var id_token_hint = this.retrieve("authorizationDataIdToken");
         var post_logout_redirect_uri = 'http://localhost:5104/';
 
@@ -161,7 +156,6 @@ export class SecurityService {
 
         //emit observable
         this.authenticationSource.next(false);
-
         window.location.href = url;
     }
 
@@ -171,7 +165,7 @@ export class SecurityService {
             this._router.navigate(['/Forbidden'])
         }
         else if (error.status == 401) {
-            this.ResetAuthorizationData();
+            //this.ResetAuthorizationData();
             this._router.navigate(['/Unauthorized'])
         }
     }

src/Web/WebSPA/eShopOnContainers.WebSPA/Properties/launchSettings.json

@@ -11,7 +11,7 @@
     "IIS Express": {
       "commandName": "IISExpress",
       "environmentVariables": {
-        "ASPNETCORE_ENVIRONMENT": "Production"
+        "ASPNETCORE_ENVIRONMENT": "Development"
       }
     }
   }