Merge pull request from dotnet-architecture/feature/refresh-spa-theme

Refresh SPA theme
This commit is contained in:
Miguel Veloso 2021-06-22 15:43:54 +01:00 committed by GitHub
commit e9aa5256aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
252 changed files with 67968 additions and 21893 deletions
README.md
img
src
Services
Web

@ -6,6 +6,12 @@
Sample .NET Core reference application, powered by Microsoft, based on a simplified microservices architecture and Docker containers.
## SPA Application (Angular)
![](img/eshop-spa-app-home.png)
## MVC application (ASP.NET Core)
![](img/eshop-webmvc-app-screenshot.png)
## Build Status (GitHub Actions)

BIN
img/eshop-spa-app-home.png Normal file

Binary file not shown.

After

(image error) Size: 1.1 MiB

Binary file not shown.

Before

(image error) Size: 1.1 MiB

After

(image error) Size: 1.1 MiB

Binary file not shown.

Before

(image error) Size: 148 KiB

After

(image error) Size: 64 KiB

Binary file not shown.

Before

(image error) Size: 223 KiB

After

(image error) Size: 40 KiB

Binary file not shown.

Before

(image error) Size: 212 KiB

After

(image error) Size: 23 KiB

Binary file not shown.

Before

(image error) Size: 165 KiB

After

(image error) Size: 82 KiB

Binary file not shown.

After

(image error) Size: 24 KiB

Binary file not shown.

After

(image error) Size: 24 KiB

Binary file not shown.

Before

(image error) Size: 41 KiB

After

(image error) Size: 40 KiB

Binary file not shown.

Before

(image error) Size: 170 KiB

After

(image error) Size: 60 KiB

Binary file not shown.

Before

(image error) Size: 152 KiB

After

(image error) Size: 100 KiB

Binary file not shown.

Before

(image error) Size: 226 KiB

After

(image error) Size: 39 KiB

Binary file not shown.

Before

(image error) Size: 179 KiB

After

(image error) Size: 98 KiB

Binary file not shown.

Before

(image error) Size: 182 KiB

After

(image error) Size: 96 KiB

Binary file not shown.

Before

(image error) Size: 167 KiB

After

(image error) Size: 90 KiB

Binary file not shown.

Before

(image error) Size: 40 KiB

After

(image error) Size: 28 KiB

@ -1,8 +1,3 @@
CatalogBrand
Azure
.NET
Visual Studio
SQL Server
Other
CatalogBrandTestOne
CatalogBrandTestTwo
1 CatalogBrand
Azure
2 .NET
Visual Studio
SQL Server
3 Other
CatalogBrandTestOne
CatalogBrandTestTwo

Binary file not shown.

Binary file not shown.

@ -3,12 +3,13 @@ T-Shirt,.NET,".NET Bot Black Hoodie, and more",.NET Bot Black Hoodie,19.5,1.png,
Mug,.NET,.NET Black & White Mug,.NET Black & White Mug,8.50,2.png,89,true
T-Shirt,Other,Prism White T-Shirt,Prism White T-Shirt,12,3.png,56,false
T-Shirt,.NET,.NET Foundation T-shirt,.NET Foundation T-shirt,12,4.png,120,false
Sheet,Other,Roslyn Red Sheet,Roslyn Red Sheet,8.5,5.png,55,false
Pin,Other,Roslyn Red Pin,Roslyn Red Pin,8.5,5.png,55,false
T-Shirt,.NET,.NET Blue Hoodie,.NET Blue Hoodie,12,6.png,17,false
T-Shirt,Other,Roslyn Red T-Shirt,Roslyn Red T-Shirt,12,7.png,8,false
T-Shirt,Other,Kudu Purple Hoodie,Kudu Purple Hoodie,8.5,8.png,34,false
Mug,Other,Cup<T> White Mug,Cup<T> White Mug,12,9.png,76,false
Sheet,.NET,.NET Foundation Sheet,.NET Foundation Sheet,12,10.png,11,false
Sheet,.NET,Cup<T> Sheet,Cup<T> Sheet,8.5,11.png,3,false
Pin,.NET,.NET Foundation Pin,.NET Foundation Pin,12,10.png,11,false
Pin,.NET,Cup<T> Pin,Cup<T> Pin,8.5,11.png,3,false
T-Shirt,Other,Prism White TShirt,Prism White TShirt,12,12.png,0,false
Mug, Other, De los Palotes, pepito, 12, 12.png, 0, false
Mug,.NET,Modern .NET Black & White Mug,Modern .NET Black & White Mug,8.50,13.png,89,true
Mug,Other,Modern Cup<T> White Mug,Modern Cup<T> White Mug,12,14.png,76,false

1 CatalogTypeName CatalogBrandName Description Name Price PictureFileName availablestock onreorder
3 Mug .NET .NET Black & White Mug .NET Black & White Mug 8.50 2.png 89 true
4 T-Shirt Other Prism White T-Shirt Prism White T-Shirt 12 3.png 56 false
5 T-Shirt .NET .NET Foundation T-shirt .NET Foundation T-shirt 12 4.png 120 false
6 Sheet Pin Other Roslyn Red Sheet Roslyn Red Pin Roslyn Red Sheet Roslyn Red Pin 8.5 5.png 55 false
7 T-Shirt .NET .NET Blue Hoodie .NET Blue Hoodie 12 6.png 17 false
8 T-Shirt Other Roslyn Red T-Shirt Roslyn Red T-Shirt 12 7.png 8 false
9 T-Shirt Other Kudu Purple Hoodie Kudu Purple Hoodie 8.5 8.png 34 false
10 Mug Other Cup<T> White Mug Cup<T> White Mug 12 9.png 76 false
11 Sheet Pin .NET .NET Foundation Sheet .NET Foundation Pin .NET Foundation Sheet .NET Foundation Pin 12 10.png 11 false
12 Sheet Pin .NET Cup<T> Sheet Cup<T> Pin Cup<T> Sheet Cup<T> Pin 8.5 11.png 3 false
13 T-Shirt Other Prism White TShirt Prism White TShirt 12 12.png 0 false
14 Mug Other .NET De los Palotes Modern .NET Black & White Mug pepito Modern .NET Black & White Mug 12 8.50 12.png 13.png 0 89 false true
15 Mug Other Modern Cup<T> White Mug Modern Cup<T> White Mug 12 14.png 76 false

@ -1,7 +1,4 @@
CatalogType
Mug
T-Shirt
Sheet
USB Memory Stick
CatalogTypeTestOne
CatalogTypeTestTwo
Pin
1 CatalogType
2 Mug
3 T-Shirt
4 Sheet Pin
USB Memory Stick
CatalogTypeTestOne
CatalogTypeTestTwo

@ -0,0 +1,10 @@
# Catalog set up
The catalog images have been updated to the new SPA looks.
If you want to use the classical images:
1. Drop the `Microsoft.eShopOnContainers.Services.CatalogDb` database from the `sqldata` container.
2. Rename `CatalogItems-MVC.zip` as `CatalogItems.zip`
3. Rebuild the `catalog-api` service with `docker-compose build catalog-api`
4. Restart the application as usual

@ -1,61 +1,27 @@
@model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.LoginViewModel
@{
ViewData["Title"] = "Log in";
var requestQuery = ViewContext.HttpContext.Request.Query;
requestQuery.TryGetValue("ReturnUrl", out var returnUrl);
string partialView;
if (returnUrl[0].Contains("client_id=js"))
{
Layout = "_Layout-SPA";
partialView = "_LoginPartial-SPA.cshtml";
}
else
{
partialView = "_LoginPartial-MVC.cshtml";
}
}
<div class="brand-header-block">
<ul class="container">
<li><a asp-area="" asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]">REGISTER</a></li>
<li class="active" style="margin-right: 65px;">LOGIN</li>
</ul>
</div>
<div class="container account-login-container">
<div class="row">
<div class="col-md-12">
<section>
<form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">
<input type="hidden" asp-for="ReturnUrl" />
<h4>ARE YOU REGISTERED?</h4>
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Email" class="control-label form-label"></label>
<input asp-for="Email" class="form-control form-input form-input-center" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password" class="control-label form-label"></label>
<input asp-for="Password" class="form-control form-input form-input-center" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="RememberMe">
<input asp-for="RememberMe" />
@Html.DisplayNameFor(m => m.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default btn-brand btn-brand-big">&nbsp;LOG IN&nbsp;</button>
</div>
<p>
<a asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" class="text">Register as a new user?</a>
</p>
<p>
Note that for demo purposes you don't need to register and can login with these credentials:
</p>
<p>
User: <b>demouser@microsoft.com</b>
</p>
<p>
Password: <b>Pass@word1</b>
</p>
</form>
</section>
</div>
</div>
</div>
<partial name=@partialView model=@Model />
@section Scripts {
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }

@ -1,106 +1,28 @@
@model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.RegisterViewModel
@{
ViewData["Title"] = "Register";
var requestQuery = ViewContext.HttpContext.Request.Query;
requestQuery.TryGetValue("ReturnUrl", out var returnUrl);
string partialView;
if (returnUrl[0].Contains("client_id=js"))
{
Layout = "_Layout-SPA";
partialView = "_RegisterPartial-SPA.cshtml";
}
else
{
partialView = "_RegisterPartial-MVC.cshtml";
}
}
<div class="brand-header-block">
<ul class="container">
<li class="active">REGISTER</li>
<li style="margin-right: 65px;"><a asp-area="" asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]">LOGIN</a></li>
</ul>
</div>
<div class="container register-container">
<form asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">
<h4 class="order-create-section-title">CREATE NEW ACCOUNT</h4>
<div asp-validation-summary="All" class="text-danger"></div>
<div class="row">
<div class="form-group col-sm-6">
<label asp-for="User.Name" class="control-label form-label">NAME</label>
<input asp-for="User.Name" class="form-control form-input" />
<span asp-validation-for="User.Name" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.LastName" class="control-label form-label">LAST NAME</label>
<input asp-for="User.LastName" class="form-control form-input" />
<span asp-validation-for="User.LastName" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.Street" class="control-label form-label">ADDRESS</label>
<input asp-for="User.Street" class="form-control form-input" />
<span asp-validation-for="User.Street" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.City" class="control-label form-label"></label>
<input asp-for="User.City" class="form-control form-input" />
<span asp-validation-for="User.City" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.State" class="control-label form-label"></label>
<input asp-for="User.State" class="form-control form-input" />
<span asp-validation-for="User.State" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.Country" class="control-label form-label"></label>
<input asp-for="User.Country" class="form-control form-input" />
<span asp-validation-for="User.Country" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.ZipCode" class="control-label form-label">POSTCODE</label>
<input asp-for="User.ZipCode" class="form-control form-input" />
<span asp-validation-for="User.ZipCode" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.PhoneNumber" class="control-label form-label">PHONE NUMBER</label>
<input asp-for="User.PhoneNumber" class="form-control form-input" />
<span asp-validation-for="User.PhoneNumber" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.CardNumber" class="control-label form-label">Card Number</label>
<input asp-for="User.CardNumber" class="form-control form-input" />
<span asp-validation-for="User.CardNumber" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.CardHolderName" class="control-label form-label">Cardholder Name</label>
<input asp-for="User.CardHolderName" class="form-control form-input" />
<span asp-validation-for="User.CardHolderName" class="text-danger" />
</div>
<div class="form-group col-sm-3">
<label asp-for="User.Expiration" class="control-label form-label">Expiration Date</label>
<input asp-for="User.Expiration" placeholder="MM/YY" class="form-control form-input form-input-small" />
<span asp-validation-for="User.Expiration" class="text-danger" />
</div>
<div class="form-group col-sm-3">
<label asp-for="User.SecurityNumber" class="control-label form-label">Security Code</label>
<input asp-for="User.SecurityNumber" class="form-control form-input form-input-small" />
<span asp-validation-for="User.SecurityNumber" class="text-danger" />
</div>
</div>
<br /><br />
<div class="row">
<div class="form-group col-sm-6">
<label asp-for="Email" class="control-label form-label"></label>
<input asp-for="Email" class="form-control form-input" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group col-sm-offset-6"></div>
<div class="form-group col-sm-6">
<label asp-for="Password" class="control-label form-label"></label>
<input asp-for="Password" class="form-control form-input" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="ConfirmPassword" class="control-label form-label"></label>
<input asp-for="ConfirmPassword" class="form-control form-input" />
<span asp-validation-for="ConfirmPassword" class="text-danger"></span>
</div>
</div>
<br /><br />
<div class="form-group">
<button type="submit" class="btn btn-default btn-brand">&nbsp;Register&nbsp;</button>
</div>
<br /><br />
</form>
</div>
<partial name=@partialView model=@Model />
@section Scripts {
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

@ -0,0 +1,54 @@
@model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.LoginViewModel
<div class="brand-header-block">
<ul class="container">
<li><a asp-area="" asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]">REGISTER</a></li>
<li class="active" style="margin-right: 65px;">LOGIN</li>
</ul>
</div>
<div class="container account-login-container">
<div class="row">
<div class="col-md-12">
<section>
<form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">
<input type="hidden" asp-for="ReturnUrl" />
<h4>ARE YOU REGISTERED?</h4>
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Email" class="control-label form-label"></label>
<input asp-for="Email" class="form-control form-input form-input-center" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password" class="control-label form-label"></label>
<input asp-for="Password" class="form-control form-input form-input-center" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group">
<div class="checkbox">
<label asp-for="RememberMe">
<input asp-for="RememberMe" />
@Html.DisplayNameFor(m => m.RememberMe)
</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default btn-brand btn-brand-big">&nbsp;LOG IN&nbsp;</button>
</div>
<p>
<a asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" class="text">Register as a new user?</a>
</p>
<p>
Note that for demo purposes you don't need to register and can login with these credentials:
</p>
<p>
User: <b>demouser@microsoft.com</b>
</p>
<p>
Password: <b>Pass@word1</b>
</p>
</form>
</section>
</div>
</div>
</div>

@ -0,0 +1,47 @@
@model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.LoginViewModel
<div class="container">
<div class="row">
<div class="col-md-12">
<section>
<form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-login">
<input type="hidden" asp-for="ReturnUrl" />
<h4 class="text-left mb-4">ARE YOU REGISTERED?</h4>
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Email" class="control-label form-label"></label>
<input asp-for="Email" class="form-control form-input w-100" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Password" class="control-label form-label"></label>
<input asp-for="Password" class="form-control form-input w-100" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="d-flex align-items-center justify-content-between">
<div class="checkbox">
<label asp-for="RememberMe">
<input asp-for="RememberMe" class="mr-1" />
@Html.DisplayNameFor(m => m.RememberMe)
</label>
</div>
<button type="submit" class="btn btn-primary">LOG IN</button>
</div>
<div class="form-login-register-link text-center mt-3">
<a class="text-link" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]">Register as a new user?</a>
</div>
</form>
<div class="form-login-details">
<div>
Note that for demo purposes you don't need to register and can login with these credentials:
</div>
<div>
User: <strong>demouser@microsoft.com</strong> Password: <strong>Pass@word1</strong>
</div>
</div>
</section>
</div>
</div>
</div>

@ -0,0 +1,100 @@
@model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.RegisterViewModel
<div class="brand-header-block">
<ul class="container">
<li class="active">REGISTER</li>
<li style="margin-right: 65px;"><a asp-area="" asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]">LOGIN</a></li>
</ul>
</div>
<div class="container register-container">
<form asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-horizontal">
<h4 class="order-create-section-title">CREATE NEW ACCOUNT</h4>
<div asp-validation-summary="All" class="text-danger"></div>
<div class="row">
<div class="form-group col-sm-6">
<label asp-for="User.Name" class="control-label form-label">NAME</label>
<input asp-for="User.Name" class="form-control form-input" />
<span asp-validation-for="User.Name" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.LastName" class="control-label form-label">LAST NAME</label>
<input asp-for="User.LastName" class="form-control form-input" />
<span asp-validation-for="User.LastName" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.Street" class="control-label form-label">ADDRESS</label>
<input asp-for="User.Street" class="form-control form-input" />
<span asp-validation-for="User.Street" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.City" class="control-label form-label"></label>
<input asp-for="User.City" class="form-control form-input" />
<span asp-validation-for="User.City" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.State" class="control-label form-label"></label>
<input asp-for="User.State" class="form-control form-input" />
<span asp-validation-for="User.State" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.Country" class="control-label form-label"></label>
<input asp-for="User.Country" class="form-control form-input" />
<span asp-validation-for="User.Country" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.ZipCode" class="control-label form-label">POSTCODE</label>
<input asp-for="User.ZipCode" class="form-control form-input" />
<span asp-validation-for="User.ZipCode" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.PhoneNumber" class="control-label form-label">PHONE NUMBER</label>
<input asp-for="User.PhoneNumber" class="form-control form-input" />
<span asp-validation-for="User.PhoneNumber" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.CardNumber" class="control-label form-label">Card Number</label>
<input asp-for="User.CardNumber" class="form-control form-input" />
<span asp-validation-for="User.CardNumber" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.CardHolderName" class="control-label form-label">Cardholder Name</label>
<input asp-for="User.CardHolderName" class="form-control form-input" />
<span asp-validation-for="User.CardHolderName" class="text-danger" />
</div>
<div class="form-group col-sm-3">
<label asp-for="User.Expiration" class="control-label form-label">Expiration Date</label>
<input asp-for="User.Expiration" placeholder="MM/YY" class="form-control form-input form-input-small" />
<span asp-validation-for="User.Expiration" class="text-danger" />
</div>
<div class="form-group col-sm-3">
<label asp-for="User.SecurityNumber" class="control-label form-label">Security Code</label>
<input asp-for="User.SecurityNumber" class="form-control form-input form-input-small" />
<span asp-validation-for="User.SecurityNumber" class="text-danger" />
</div>
</div>
<br /><br />
<div class="row">
<div class="form-group col-sm-6">
<label asp-for="Email" class="control-label form-label"></label>
<input asp-for="Email" class="form-control form-input" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group col-sm-offset-6"></div>
<div class="form-group col-sm-6">
<label asp-for="Password" class="control-label form-label"></label>
<input asp-for="Password" class="form-control form-input" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="ConfirmPassword" class="control-label form-label"></label>
<input asp-for="ConfirmPassword" class="form-control form-input" />
<span asp-validation-for="ConfirmPassword" class="text-danger"></span>
</div>
</div>
<br /><br />
<div class="form-group">
<button type="submit" class="btn btn-default btn-brand">&nbsp;Register&nbsp;</button>
</div>
<br /><br />
</form>
</div>

@ -0,0 +1,100 @@
@model Microsoft.eShopOnContainers.Services.Identity.API.Models.AccountViewModels.RegisterViewModel
<div class="container">
<h1 class="mb-4 mt-5">[ New Account ]</h1>
<form asp-controller="Account" asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" class="form-register">
<h4 class="order-create-section-title">Information</h4>
<div asp-validation-summary="All" class="text-danger"></div>
<div class="row">
<div class="form-group col-sm-6">
<label asp-for="User.Name" class="control-label form-label">Name</label>
<input asp-for="User.Name" class="form-control form-input" />
<span asp-validation-for="User.Name" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.LastName" class="control-label form-label">Last Name</label>
<input asp-for="User.LastName" class="form-control form-input" />
<span asp-validation-for="User.LastName" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.Street" class="control-label form-label">Address</label>
<input asp-for="User.Street" class="form-control form-input" />
<span asp-validation-for="User.Street" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.City" class="control-label form-label"></label>
<input asp-for="User.City" class="form-control form-input" />
<span asp-validation-for="User.City" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.State" class="control-label form-label"></label>
<input asp-for="User.State" class="form-control form-input" />
<span asp-validation-for="User.State" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.Country" class="control-label form-label"></label>
<input asp-for="User.Country" class="form-control form-input" />
<span asp-validation-for="User.Country" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.ZipCode" class="control-label form-label">Postcode</label>
<input asp-for="User.ZipCode" class="form-control form-input" />
<span asp-validation-for="User.ZipCode" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.PhoneNumber" class="control-label form-label">Phone Number</label>
<input asp-for="User.PhoneNumber" class="form-control form-input" />
<span asp-validation-for="User.PhoneNumber" class="text-danger" />
</div>
</div>
<div class="mt-4">
<h4 class="order-create-section-title">Credit Card</h4>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label asp-for="User.CardNumber" class="control-label form-label">Card Number</label>
<input asp-for="User.CardNumber" class="form-control form-input" />
<span asp-validation-for="User.CardNumber" class="text-danger" />
</div>
<div class="form-group col-sm-6">
<label asp-for="User.CardHolderName" class="control-label form-label">Cardholder Name</label>
<input asp-for="User.CardHolderName" class="form-control form-input" />
<span asp-validation-for="User.CardHolderName" class="text-danger" />
</div>
<div class="form-group col-sm-3">
<label asp-for="User.Expiration" class="control-label form-label">Expiration Date</label>
<input asp-for="User.Expiration" placeholder="MM/YY" class="form-control form-input form-input-small" />
<span asp-validation-for="User.Expiration" class="text-danger" />
</div>
<div class="form-group col-sm-3">
<label asp-for="User.SecurityNumber" class="control-label form-label">Security Code</label>
<input asp-for="User.SecurityNumber" class="form-control form-input form-input-small" />
<span asp-validation-for="User.SecurityNumber" class="text-danger" />
</div>
</div>
<br /><br />
<div class="row">
<div class="form-group col-sm-6">
<label asp-for="Email" class="control-label form-label"></label>
<input asp-for="Email" class="form-control form-input" />
<span asp-validation-for="Email" class="text-danger"></span>
</div>
<div class="form-group col-sm-offset-6"></div>
<div class="form-group col-sm-6">
<label asp-for="Password" class="control-label form-label"></label>
<input asp-for="Password" class="form-control form-input" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
<div class="form-group col-sm-6">
<label asp-for="ConfirmPassword" class="control-label form-label"></label>
<input asp-for="ConfirmPassword" class="form-control form-input" />
<span asp-validation-for="ConfirmPassword" class="text-danger"></span>
</div>
</div>
<br /><br />
<div class="d-flex mt-3 justify-content-end">
<button type="submit" class="btn btn-primary">Register</button>
</div>
<br /><br />
</form>
</div>

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Security-Policy" content="script-src 'unsafe-inline'; script-src-elem 'unsafe-inline'">
<title>eShopOnContainers - Identity</title>
<link rel="icon" type="image/x-icon" href="~/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site-spa.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site-spa.min.css" asp-append-version="true" />
</environment>
</head>
<body>
<div class="es-header">
<div class="container">
<article class="d-flex align-content-center justify-content-between">
<section>
<a asp-controller="home" asp-action="ReturnToOriginalApplication" asp-route-returnUrl="@ViewData["ReturnUrl"]">
<img class="es-header-brand" src="~/images/logo_color.svg">
</a>
</section>
</article>
</div>
</div>
<div class="content">
@RenderBody()
</div>
<footer class="footer">
<div class="container">
<article class="d-flex w-100 h-100 justify-content-between align-items-center">
<section>
<img class="footer-brand" src="~/images/logo.svg">
</section>
<section> © e-Shoponcontainers. All rights reserved </section>
</article>
</div>
</footer>
<script src="~/lib/jquery/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
@RenderSection("scripts", required: false)
</body>
</html>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

After

(image error) Size: 288 KiB

File diff suppressed because it is too large Load Diff

After

(image error) Size: 270 KiB

File diff suppressed because it is too large Load Diff

After

(image error) Size: 275 KiB

File diff suppressed because it is too large Load Diff

After

(image error) Size: 290 KiB

File diff suppressed because it is too large Load Diff

After

(image error) Size: 264 KiB

File diff suppressed because it is too large Load Diff

After

(image error) Size: 289 KiB

Binary file not shown.

After

(image error) Size: 290 KiB

File diff suppressed because one or more lines are too long

After

(image error) Size: 20 KiB

File diff suppressed because one or more lines are too long

After

(image error) Size: 20 KiB

@ -16,7 +16,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Controllers
public async Task<IActionResult> Index(int? BrandFilterApplied, int? TypesFilterApplied, int? page, [FromQuery] string errorMsg)
{
var itemsPage = 10;
var itemsPage = 9;
var catalog = await _catalogSvc.GetCatalogItems(page ?? 0, itemsPage, BrandFilterApplied, TypesFilterApplied);
var vm = new IndexViewModel()
{

@ -177,7 +177,8 @@ ClientBin/
*.publishsettings
node_modules/
bower_components/
wwwroot/
wwwroot/*
!wwwroot/favicon.ico
orleans.codegen.cs

@ -1,9 +1,15 @@
namespace eShopOnContainers.WebSPA
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace eShopOnContainers.WebSPA
{
public class AppSettings
{
public string IdentityUrl { get; set; }
public string BasketUrl { get; set; }
public string MarketingUrl { get; set; }
public string PurchaseUrl { get; set; }
public string SignalrHubUrl { get; set; }

@ -5,23 +5,23 @@
"projects": {
"WebSPA": {
"root": "",
"sourceRoot": "Client",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot",
"index": "Client/index.html",
"main": "Client/main.ts",
"tsConfig": "Client/tsconfig.app.json",
"polyfills": "Client/polyfills.ts",
"outputPath": "../wwwroot",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"Client/assets",
"Client/favicon.ico"
"src/assets",
"src/favicon.ico"
],
"styles": [
"Client/globals.scss"
"src/styles/globals.scss"
],
"scripts": []
},
@ -44,8 +44,8 @@
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "Client/environments/environment.ts",
"with": "Client/environments/environment.prod.ts"
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
@ -71,17 +71,17 @@
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "Client/test.ts",
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "Client/polyfills.ts",
"tsConfig": "Client/tsconfig.spec.json",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"Client/globals.scss"
"src/styles/globals.scss"
],
"assets": [
"Client/assets",
"Client/favicon.ico"
"src/assets",
"src/favicon.ico"
]
}
},
@ -89,8 +89,8 @@
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"Client/tsconfig.app.json",
"Client/tsconfig.spec.json"
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": []
}
@ -130,8 +130,5 @@
"@schematics/angular:directive": {
"prefix": "app"
}
},
"cli": {
"analytics": false
}
}

Binary file not shown.

Before

(image error) Size: 1.0 KiB

Binary file not shown.

Before

(image error) Size: 4.7 KiB

Binary file not shown.

Before

(image error) Size: 4.3 KiB

Binary file not shown.

Before

(image error) Size: 1.5 KiB

Binary file not shown.

Before

(image error) Size: 429 B

Binary file not shown.

Before

(image error) Size: 385 KiB

Binary file not shown.

Before

(image error) Size: 8.6 KiB

Binary file not shown.

Before

(image error) Size: 4.6 KiB

Binary file not shown.

Before

(image error) Size: 221 B

Binary file not shown.

Before

Width: 48px  |  Height: 48px  |  Size: 15 KiB

File diff suppressed because it is too large Load Diff

Before

(image error) Size: 111 KiB

File diff suppressed because it is too large Load Diff

Before

(image error) Size: 104 KiB

@ -1,80 +0,0 @@
/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/scss/bootstrap";
@import "~ngx-toastr/toastr-bs4-alert.scss";
@import './modules/variables';
$dist: './fonts/Montserrat-Regular';
@font-face {
font-family: Montserrat;
font-weight: 400;
src: url('./fonts/Montserrat-Regular.eot?') format('eot'), url('./fonts/Montserrat-Regular.woff') format('woff'), url('./fonts/Montserrat-Regular.ttf') format('truetype'), url('./fonts/Montserrat-Regular.svg#Montserrat') format('svg');
}
@font-face {
font-family: Montserrat;
font-weight: 700;
src: url('./fonts/Montserrat-Bold.eot?') format('eot'), url('./fonts/Montserrat-Bold.woff') format('woff'), url('./fonts/Montserrat-Bold.ttf') format('truetype'), url('./fonts/Montserrat-Bold.svg#Montserrat') format('svg');
}
html,
body {
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: $font-weight-normal;
z-index: 10;
}
*,
*::after,
*::before {
box-sizing: border-box;
}
.preloading {
color: $color-brand;
display: block;
font-size: $font-size-xl;
left: 50%;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
}
select::-ms-expand {
display: none;
}
@media screen and (min-width: 992px) {
.form-input {
max-width: 360px;
width: 360px;
}
}
.form-input {
border-radius: 0;
height: 45px;
padding: 10px;
}
.form-input-small {
max-width: 100px !important;
}
.form-input-medium {
width: 150px !important;
}
.alert {
padding-left: 0;
}
.alert-danger {
background-color: transparent;
border: 0;
color: #FB0D0D;
font-size: 12px;
}

@ -1,58 +0,0 @@
// 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%);
$color-secondary: #83D01B;
$color-secondary-dark: darken($color-secondary, 5%);
$color-secondary-darker: darken($color-secondary, 20%);
$color-secondary-bright: lighten($color-secondary, 10%);
$color-secondary-brighter: lighten($color-secondary, 20%);
$color-background-dark: #333333;
$color-background-darker: #000000;
$color-background-bright: #EEEEFF;
$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: .65rem; // 10.4px
$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;
// Borders
$border-light: 1px;
// Images
$image_path: '/assets/images/';
$image-main_banner: '#{$image_path}main_banner.png';
$image-arrow_down: '#{$image_path}arrow-down.png';

@ -1,40 +0,0 @@
<header class="esh-app-header">
<div class="container">
<article class="row">
<section class="col-lg-7 col-md-6 col-12">
<a class="navbar-brand" routerLink="catalog">
<img src="assets/images/brand.png" />
</a>
</section>
<section class="col-lg-4 col-md-5 col-12">
<esh-identity></esh-identity>
</section>
<section class="col-lg-1 col-12">
<esh-basket-status *ngIf="Authenticated"></esh-basket-status>
</section>
</article>
</div>
</header>
<!-- component routing placeholder -->
<router-outlet></router-outlet>
<footer class="esh-app-footer">
<div class="container">
<article class="row">
<section class="col-sm-6">
<img class="esh-app-footer-brand" src="assets/images/brand_dark.png" />
</section>
<section class="col-sm-6">
<img class="esh-app-footer-text hidden" src="assets/images/main_footer_text.png" width="335" height="26" alt="footer text image" />
</section>
</article>
</div>
</footer>

@ -1,27 +0,0 @@
@import './variables';
.esh-app {
&-footer {
$margin: 2.5rem;
$padding: 2.5rem;
background-color: $color-background-darker;
border-top: $border-light solid $color-foreground-bright;
margin-top: $margin;
padding-bottom: $padding;
padding-top: $padding;
width: 100%;
bottom: 0;
$height: 50px;
&-brand {
height: $height;
width: 230px;
}
}
&-header {
margin: 15px;
}
}

@ -1,41 +0,0 @@
@import '../../variables';
.esh-basketstatus {
cursor: pointer;
display: inline-block;
float: right;
position: relative;
transition: all $animation-speed-default;
&.is-disabled {
opacity: .5;
pointer-events: none;
}
&-image {
height: 36px;
margin-top: .5rem;
}
&-badge {
$size: 1.5rem;
background-color: $color-secondary;
border-radius: 50%;
color: $color-foreground-brighter;
display: block;
height: $size;
left: 50%;
position: absolute;
text-align: center;
top: 0;
transform: translateX(-38%);
transition: all $animation-speed-default;
width: $size;
}
&:hover &-badge {
background-color: transparent;
color: $color-secondary-dark;
transition: all $animation-speed-default;
}
}

@ -1,65 +0,0 @@
<div class="esh-basket">
<esh-header url="/catalog">Back to catalog</esh-header>
<div class="container">
<div *ngFor="let errorMessage of errorMessages">
<div class="esh-basket-items-margin-left1 row">
<div class="alert alert-warning" role="alert">&nbsp;{{errorMessage}}</div>
</div>
</div>
<article class="esh-basket-titles row">
<section class="esh-basket-title col-3">Product</section>
<section class="esh-basket-title col-3 hidden-lg-down"></section>
<section class="esh-basket-title col-2">Price</section>
<section class="esh-basket-title col-2">Quantity</section>
<section class="esh-basket-title col-2">Cost</section>
</article>
<div *ngFor="let item of basket?.items" class="esh-basket-items--border">
<article class="esh-basket-items row">
<section class="esh-basket-item esh-basket-item--middle col-lg-3 hidden-lg-down">
<img class="esh-basket-image" src="{{item.pictureUrl}}"/>
</section>
<section class="esh-basket-item esh-basket-item--middle col-3">{{item.productName}}</section>
<section class="esh-basket-item esh-basket-item--middle col-2">$ {{item.unitPrice | number:'.2-2'}}</section>
<section class="esh-basket-item esh-basket-item--middle col-2">
<input id="quantity"
class="esh-basket-input"
type="number"
min="1"
[(ngModel)]="item.quantity"
(change)="itemQuantityChanged(item)"/>
</section>
<section class="esh-basket-item esh-basket-item--middle esh-basket-item--mark col-2">$ {{(item.unitPrice * item.quantity) | number:'.2-2'}}</section>
</article>
<br/>
<div class="esh-basket-items-margin-left1 row">
<div class="alert alert-warning" role="alert" *ngIf="item.oldUnitPrice > 0">&nbsp;Note that the price of this article changed in our Catalog. The old price when you originally added it to the basket was $ {{item.oldUnitPrice}} </div>
</div>
</div>
</div>
<div class="container">
<article class="esh-basket-titles esh-basket-titles--clean row">
<section class="esh-basket-title col-9"></section>
<section class="esh-basket-title col-2">Total</section>
</article>
<article class="esh-basket-items row">
<section class="esh-basket-item col-9"></section>
<section class="esh-basket-item esh-basket-item--mark col-2">$ {{totalPrice | number:'.2-2'}}</section>
</article>
<article class="esh-basket-items row">
<section class="esh-basket-item col-7"></section>
<section class="esh-basket-item col-2">
<button class="btn esh-basket-checkout" (click)="update($event)">[ Update ]</button>
</section>
<section class="esh-basket-item col-3">
<div (click)="checkOut($event)" class="btn esh-basket-checkout">[ Checkout ]</div>
</section>
</article>
</div>
</div>

@ -1,89 +0,0 @@
@import '../variables';
@mixin margin-left($distance) {
margin-left: $distance;
}
.esh-basket {
min-height: 80vh;
&-titles {
padding-bottom: 1rem;
padding-top: 2rem;
&--clean {
padding-bottom: 0;
padding-top: 0;
}
}
&-title {
text-transform: uppercase;
}
&-items {
&--border {
border-bottom: $border-light solid $color-foreground-bright;
padding: .5rem 0;
&:last-of-type {
border-color: transparent;
}
}
&-margin-left1 {
@include margin-left(1px);
}
}
$item-height: 8rem;
&-item {
font-size: $font-size-m;
font-weight: $font-weight-semilight;
&--middle {
line-height: $item-height;
@media screen and (max-width: $media-screen-m) {
line-height: $font-size-m;
}
}
&--mark {
color: $color-brand;
}
}
&-image {
height: $item-height;
}
&-input {
line-height: 1rem;
width: 100%;
}
&-checkout {
background-color: $color-secondary;
border: 0;
border-radius: 0;
color: $color-foreground-brighter;
display: inline-block;
font-size: 1rem;
font-weight: $font-weight-normal;
margin-top: 1rem;
padding: 1rem 1.5rem;
text-align: center;
text-transform: uppercase;
transition: all $animation-speed-default;
&:hover {
background-color: $color-secondary-darker;
transition: all $animation-speed-default;
}
}
}

@ -1,54 +0,0 @@
<section class="esh-catalog-hero">
<div class="container">
<!--<img class="esh-catalog-title" src="../../images/main_banner_text.png" />-->
</div>
</section>
<section class="esh-catalog-filters">
<div class="container">
<div class="alert alert-warning esh-catalog-alert" role="alert" [hidden]="!errorReceived">
Error requesting catalog products, please try later on
</div>
<label class="esh-catalog-label" data-title="brand">
<select class="esh-catalog-filter" (change)="onBrandFilterChanged($event, $event.target.value)">
<option *ngFor="let brand of brands" [value]="brand.id">{{brand.brand}}</option>
</select>
</label>
<label class="esh-catalog-label" data-title="type">
<select class="esh-catalog-filter" (change)="onTypeFilterChanged($event, $event.target.value)">
<option *ngFor="let type of types" [value]="type.id">{{type.type}}</option>
</select>
</label>
<img class="esh-catalog-send" (click)="onFilterApplied($event)" src="/assets/images/arrow-right.svg" />
</div>
</section>
<div class="container">
<div *ngIf="catalog?.data.length > 0">
<esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
<div class="esh-catalog-items row">
<div class="esh-catalog-item col-md-4"
*ngFor="let item of catalog?.data">
<img class="esh-catalog-thumbnail" src="{{item.pictureUri}}" />
<button [ngClass]="{'esh-catalog-button': true, 'is-disabled': !authenticated}" (click)="addToCart(item)">
[ ADD TO CART ]
</button>
<div class="esh-catalog-name">
<span>{{item.name}}</span>
</div>
<div class="esh-catalog-price">
<span>{{item.price | number:'.2-2'}}</span>
</div>
</div>
</div>
<esh-pager [model]="paginationInfo" (changed)="onPageChanged($event)"></esh-pager>
</div>
<div *ngIf="catalog?.data.length == 0">
<span>THERE ARE NO RESULTS THAT MATCH YOUR SEARCH</span>
</div>
</div>

@ -1,158 +0,0 @@
@import '../variables';
.esh-catalog {
$banner-height: 260px;
&-hero {
background-image: url($image-main_banner);
background-size: cover;
height: $banner-height;
width: 100%;
}
&-title {
position: relative;
top: $banner-height / 3.5;
}
$filter-height: 65px;
&-filters {
background-color: $color-brand;
height: $filter-height;
}
$filter-padding: .5rem;
&-filter {
-webkit-appearance: none;
background-color: transparent;
border-color: $color-brand-bright;
color: $color-foreground-brighter;
cursor: pointer;
margin-right: 1rem;
margin-top: .5rem;
min-width: 140px;
outline-color: $color-secondary;
padding-bottom: 0;
padding-left: $filter-padding;
padding-right: $filter-padding;
padding-top: $filter-padding * 3;
option {
background-color: $color-brand;
}
}
&-label {
display: inline-block;
position: relative;
z-index: 0;
&::before {
color: rgba($color-foreground-brighter, .5);
content: attr(data-title);
font-size: $font-size-xs;
margin-left: $filter-padding;
margin-top: $font-size-xs;
position: absolute;
text-transform: uppercase;
z-index: 1;
}
&::after {
background-image: url($image-arrow_down);
content: '';
height: 7px; //png height
position: absolute;
right: $filter-padding * 3;
top: $filter-padding * 5;
width: 10px; //png width
z-index: 1;
}
}
&-send {
background-color: $color-secondary;
color: $color-foreground-brighter;
cursor: pointer;
font-size: $font-size-m;
margin-top: -$filter-padding * 3;
padding: $filter-padding;
transition: all $animation-speed-default;
&:hover {
background-color: $color-secondary-darker;
transition: all $animation-speed-default;
}
}
&-items {
margin-top: 1rem;
}
&-item {
margin-bottom: 1.5rem;
text-align: center;
width: 33%;
display: inline-block;
float: none !important;
@media screen and (max-width: $media-screen-m) {
width: 50%;
}
@media screen and (max-width: $media-screen-s) {
width: 100%;
}
}
&-thumbnail {
max-width: 370px;
width: 100%;
}
&-button {
background-color: $color-secondary;
border: 0;
color: $color-foreground-brighter;
cursor: pointer;
font-size: $font-size-m;
height: 3rem;
margin-top: 1rem;
transition: all $animation-speed-default;
width: 80%;
&.is-disabled {
opacity: .5;
pointer-events: none;
}
&:hover {
background-color: $color-secondary-darker;
transition: all $animation-speed-default;
}
}
&-name {
font-size: $font-size-m;
font-weight: $font-weight-semilight;
margin-top: .5rem;
text-align: center;
text-transform: uppercase;
}
&-price {
font-size: 28px;
font-weight: 900;
text-align: center;
&::before {
content: '$';
}
}
&-alert {
margin-top: 10px;
}
}

Some files were not shown because too many files have changed in this diff Show More