Handle SPA/MVC branding for login and registration views

This commit is contained in:
Miguel Veloso 2021-06-18 15:08:05 +01:00
parent 9194b2cef6
commit 4b0c2c56dd
42 changed files with 19581 additions and 153 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

Width:  |  Height:  |  Size: 288 KiB

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 270 KiB

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 275 KiB

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 290 KiB

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 264 KiB

File diff suppressed because it is too large Load Diff

After

Width:  |  Height:  |  Size: 289 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 290 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 20 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -8,7 +8,7 @@
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<GeneratedItemPatterns>wwwroot/dist/**</GeneratedItemPatterns>
<DefaultItemExcludes>$(DefaultItemExcludes);$(GeneratedItemPatterns)</DefaultItemExcludes>
<TypeScriptToolsVersion>2.9</TypeScriptToolsVersion>
<TypeScriptToolsVersion>4.2</TypeScriptToolsVersion>
<LangVersion>preview</LangVersion>
<DockerDefaultTargetOS>Linux</DockerDefaultTargetOS>
<DockerfileContext>..\..\..</DockerfileContext>