+
+
+
+-
+
- Back to basket +
+
+
+
+
+
+
+Form with Validations
+ +
+
\ No newline at end of file
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.scss
new file mode 100644
index 000000000..2376a4780
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders-new/orders-new.component.ts
new file mode 100644
index 000000000..e1b225420
--- /dev/null
+++ b/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);
+ }
+}
+
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts
index f3a920f59..6e8f73358 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/orders/orders.module.ts
+++ b/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 { }
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 b0dd9f49c..17ab09824 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,8 +1,8 @@
-
+
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 7ab3b2394..4e8072812 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
@@ -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;
}
}
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 ea3b92e9c..bd5102ddf 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
@@ -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) {
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts
index 8b4727401..73764a9a8 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/components/pager/pager.ts
+++ b/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() {
diff --git a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts b/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts
index f23d0cd2c..6ca392694 100644
--- a/src/Web/WebSPA/eShopOnContainers.WebSPA/Client/modules/shared/services/basket.wrapper.service.ts
+++ b/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() { }
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 cdf823b27..b3f73b569 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
@@ -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 SubjectSHIPPING ADDRESS
+
+
+
+ ADDRESS
+ {{address}} +
+ + {{address}} +
+ CITY
+ {{city}} +
+ + {{city}} +
+ STATE
+ {{state}} +
+ + {{state}} +
+ COUNTRY
+ {{country}} +
+ + {{country}} +
PAYMENT METHOD
+
+
+
+ CARD NUMBER
+ {{address}} +
+ + {{address}} +
+ CARDHOLDER NAME
+ {{city}} +
+ + {{city}} +
+ EXPIRATION DATE
+ {{state}} +
+ + {{state}} +
+ SECURITY CODE
+ {{country}} +
+ + {{country}} +
+
+
+
+
+
+
+ | + PRODUCT + | ++ + | ++ BRAND + | ++ PRICE + | ++ QUANTITY + | ++ COST + | +
|---|---|---|---|---|---|
| + + | ++ + | ++ ROSLYN + | ++ + | ++ + | ++ + | +
| + | + | + | + | + |
+
+
+ TOTAL
+ $ 29,00
+
+ |
+
+
+
+
+
+
+
+
+ 
