Fix form styles and placeholders on both websites

src/Web/WebMVC/Models/Order.cs

@@ -1,6 +1,7 @@
 using Microsoft.eShopOnContainers.WebMVC.Models.Annotations;
 using System;
 using System.Collections.Generic;
+using System.ComponentModel;
 using System.ComponentModel.DataAnnotations;
 using System.Linq;
 using System.Threading.Tasks;
@@ -20,6 +21,7 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models
         public string Status { get; set; }
 
         public decimal Total {get;set;}
+
         [Required]
         public string City { get; set; }
         [Required]
@@ -31,15 +33,19 @@ namespace Microsoft.eShopOnContainers.WebMVC.Models
 
         public string ZipCode { get; set; }
         [Required]
+        [DisplayName("Card number")]
         public string CardNumber { get; set; }
         [Required]
+        [DisplayName("Cardholder name")]
         public string CardHolderName { get; set; }
 
         public DateTime CardExpiration { get; set; }
         [RegularExpression(@"(0[1-9]|1[0-2])\/[0-9]{2}", ErrorMessage = "Expiration should match a valid MM/YY value")]
         [CardExpiration(ErrorMessage = "The card is expired"), Required]
+        [DisplayName("Card expiration")]
         public string CardExpirationShort { get; set; }
         [Required]
+        [DisplayName("Card security number")]
         public string CardSecurityNumber { get; set; }
 
         public int CardTypeId { get; set; }

src/Web/WebMVC/Views/Order/Create.cshtml

@@ -49,7 +49,7 @@
                 <div class="col-md-6">
                     <div class="form-group">
                         <label asp-for="CardNumber" class="esh-orders_new-title">Card number</label>
-                        <input asp-for="CardNumber" class="form-control form-input" type="text" placeholder="000000000"/>
+                        <input asp-for="CardNumber" class="form-control form-input" type="text" placeholder="000000000000000"/>
                         <span asp-validation-for="CardNumber" class="alert alert-danger" />
                     </div>
                 </div>
@@ -63,14 +63,14 @@
                 <div class="col-md-6">
                     <div class="form-group">
                         <label asp-for="CardExpirationShort" class="esh-orders_new-title">Expiration date</label>
-                        <input asp-for="CardExpirationShort" class="form-control form-input" type="text" placeholder="00/00"/>
+                        <input asp-for="CardExpirationShort" class="form-control form-input form-input-medium" type="text" placeholder="MM/YY"/>
                         <span asp-validation-for="CardExpirationShort" class="alert alert-danger" />
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="form-group">
                         <label asp-for="CardSecurityNumber" class="esh-orders_new-title">Security code</label>
-                        <input asp-for="CardSecurityNumber" class="form-control form-input" type="text" placeholder="000"/>
+                        <input asp-for="CardSecurityNumber" class="form-control form-input form-input-small" type="text" placeholder="000"/>
                         <span asp-validation-for="CardSecurityNumber" class="alert alert-danger" />
                     </div>
                 </div>

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

@@ -45,7 +45,7 @@
                 <div class="col-md-6">
                     <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['cardnumber'].valid && newOrderForm.controls['cardnumber'].touched}">
                         <label class="esh-orders_new-title">Card number</label>
-                        <input class="form-control form-input" type="text" placeholder="Card number" [formControl]="newOrderForm.controls['cardnumber']">
+                        <input class="form-control form-input" type="text" placeholder="000000000000000" [formControl]="newOrderForm.controls['cardnumber']">
                         <div *ngIf="newOrderForm.controls['cardnumber'].hasError('required') && newOrderForm.controls['cardnumber'].touched" class="alert alert-danger">Required field.</div>
                     </div>
                 </div>
@@ -56,17 +56,17 @@
                         <div *ngIf="newOrderForm.controls['cardholdername'].hasError('required') && newOrderForm.controls['cardholdername'].touched" class="alert alert-danger">Required field.</div>
                     </div>
                 </div>
-                <div class="col-md-3">
+                <div class="col-md-6">
                     <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['expirationdate'].valid && newOrderForm.controls['expirationdate'].touched}">
                         <label class="esh-orders_new-title">Expiration date</label>
-                        <input class="form-control form-input form-input-medium" type="text" placeholder="Card expiration" [formControl]="newOrderForm.controls['expirationdate']">
+                        <input class="form-control form-input form-input-medium" type="text" placeholder="MM/YY" [formControl]="newOrderForm.controls['expirationdate']">
                         <div *ngIf="newOrderForm.controls['expirationdate'].hasError('required') && newOrderForm.controls['expirationdate'].touched" class="alert alert-danger">Required field.</div>
                     </div>
                 </div>
-                <div class="col-md-3">
+                <div class="col-md-6">
                     <div class="form-group" [ngClass]="{'has-error':!newOrderForm.controls['securitycode'].valid && newOrderForm.controls['securitycode'].touched}">
                         <label class="esh-orders_new-title">Security code</label>
-                        <input class="form-control form-input form-input-small" type="text" placeholder="Card security Code" [formControl]="newOrderForm.controls['securitycode']">
+                        <input class="form-control form-input form-input-small" type="text" placeholder="000" [formControl]="newOrderForm.controls['securitycode']">
                         <div *ngIf="newOrderForm.controls['securitycode'].hasError('required') && newOrderForm.controls['securitycode'].touched" class="alert alert-danger">Required field.</div>
                     </div>
                 </div>
@@ -102,9 +102,9 @@
         </section>
         <section class="esh-orders_new-section">
             <div class="form-group">
-                <div class="col-md-8">
+                <div class="col-md-9">
                 </div>
-                <div class="col-md-4">
+                <div class="col-md-2">
                     <button type="submit" class="btn esh-orders_new-placeOrder" [disabled]="!newOrderForm.valid">[ Place Order ]</button>
                 </div>
             </div>