Script preload / Vue scripts / update validator

src/Web/Grand.Web.Common/TagHelpers/IResourceManager.cs

@@ -10,18 +10,18 @@ public interface IResourceManager
         /// Registers a script tag on the head
         /// </summary>
         /// <param name="script"></param>
-        void RegisterHeadScript(IHtmlContent script);
+        void RegisterHeadScript(IHtmlContent script, int order);
 
         /// <summary>
         /// Registers a custom script tag on at the header.
         /// </summary>
-        void RegisterHeaderScript(IHtmlContent script);
+        void RegisterHeaderScript(IHtmlContent script, int order);
 
         /// <summary>
         /// Registers a custom script tag on at the foot.
         /// </summary>
         /// <param name="script"></param>
-        void RegisterFootScript(IHtmlContent script);
+        void RegisterFootScript(IHtmlContent script, int order);
 
         /// <summary>
         /// Registers a custom template tag.

src/Web/Grand.Web.Common/TagHelpers/ResourceManager.cs

@@ -8,60 +8,49 @@ namespace Grand.Web.Common.TagHelpers
 {
     public class ResourceManager : IResourceManager
     {
-        private List<IHtmlContent> _headScripts;
-        private List<IHtmlContent> _headerScripts;
-        private List<IHtmlContent> _footScripts;
+        private List<(IHtmlContent content, int order)> _headScripts;
+        private List<(IHtmlContent content, int order)> _headerScripts;
+        private List<(IHtmlContent content, int order)> _footScripts;
         private List<IHtmlContent> _templates;
         private List<LinkEntry> _links;
 
         public ResourceManager()
         {
             _links = new List<LinkEntry>();
+            _headScripts = new List<(IHtmlContent content, int order)>();
+            _headerScripts = new List<(IHtmlContent content, int order)>();
+            _footScripts = new List<(IHtmlContent content, int order)>();
         }
         public IEnumerable<IHtmlContent> GetRegisteredHeadScripts()
         {
-            return _headScripts == null ? Enumerable.Empty<IHtmlContent>() : _headScripts;
+            return _headScripts.OrderBy(x => x.order).Select(x => x.content);
         }
         public IEnumerable<IHtmlContent> GetRegisteredHeaderScripts()
         {
-            return _headerScripts == null ? Enumerable.Empty<IHtmlContent>() : _headerScripts;
+            return _headerScripts.OrderBy(x => x.order).Select(x => x.content);
         }
 
         public IEnumerable<IHtmlContent> GetRegisteredFootScripts()
         {
-            return _footScripts == null ? Enumerable.Empty<IHtmlContent>() : _footScripts;
+            return _footScripts.OrderBy(x => x.order).Select(x => x.content);
         }
         public IEnumerable<IHtmlContent> GetRegisteredTemplates()
         {
             return _templates == null ? Enumerable.Empty<IHtmlContent>() : _templates;
         }
 
-        public void RegisterHeadScript(IHtmlContent script)
+        public void RegisterHeadScript(IHtmlContent script, int order)
         {
-            if (_headScripts == null)
-            {
-                _headScripts = new List<IHtmlContent>();
-            }
-            _headScripts.Add(script);
+            _headScripts.Add((script, order));
         }
-        public void RegisterHeaderScript(IHtmlContent script)
+        public void RegisterHeaderScript(IHtmlContent script, int order)
         {
-            if (_headerScripts == null)
-            {
-                _headerScripts = new List<IHtmlContent>();
-            }
-
-            _headerScripts.Add(script);
+            _headerScripts.Add((script, order));
         }
 
-        public void RegisterFootScript(IHtmlContent script)
+        public void RegisterFootScript(IHtmlContent script, int order)
         {
-            if (_footScripts == null)
-            {
-                _footScripts = new List<IHtmlContent>();
-            }
-
-            _footScripts.Add(script);
+            _footScripts.Add((script, order));
         }
         public void RegisterTemplate(IHtmlContent script)
         {

src/Web/Grand.Web.Common/TagHelpers/ScriptTagHelper.cs

@@ -8,18 +8,23 @@ namespace Grand.Web.Common.TagHelpers
 
     [HtmlTargetElement("script", Attributes = LocationAttributeName)]
     [HtmlTargetElement("script", Attributes = SrcAttributeName)]
+    [HtmlTargetElement("script", Attributes = OrderAttributeName)]
     public class ScriptTagHelper : TagHelper
     {
 
         private const string LocationAttributeName = "asp-location";
         private const string SrcAttributeName = "asp-src";
+        private const string OrderAttributeName = "asp-order";
 
         [HtmlAttributeName(LocationAttributeName)]
         public ScriptLocation Location { get; set; }
 
         [HtmlAttributeName(SrcAttributeName)]
         public string Src { get; set; }
 
+        [HtmlAttributeName(OrderAttributeName)]
+        public int DisplayOrder { get; set; }
+
         private readonly IResourceManager _resourceManager;
         private readonly IHttpContextAccessor _httpContextAccessor;
 
@@ -52,15 +57,15 @@ public override async Task ProcessAsync(TagHelperContext context, TagHelperOutpu
                 switch (Location)
                 {
                     case ScriptLocation.Head:
-                        _resourceManager.RegisterHeadScript(builder);
+                        _resourceManager.RegisterHeadScript(builder, DisplayOrder);
                         break;
 
                     case ScriptLocation.Header:
-                        _resourceManager.RegisterHeaderScript(builder);
+                        _resourceManager.RegisterHeaderScript(builder, DisplayOrder);
                         break;
 
                     case ScriptLocation.Footer:
-                        _resourceManager.RegisterFootScript(builder);
+                        _resourceManager.RegisterFootScript(builder, DisplayOrder);
                         break;
 
                     default:

src/Web/Grand.Web/Validators/Customer/LoginValidator.cs

@@ -16,10 +16,15 @@ public LoginValidator(
         {
             if (!customerSettings.UsernamesEnabled)
             {
-                //login by email
                 RuleFor(x => x.Email).NotEmpty().WithMessage(translationService.GetResource("Account.Login.Fields.Email.Required"));
+                RuleFor(x => x.Password).NotEmpty().WithMessage(translationService.GetResource("Account.Login.Fields.Password.Required"));
                 RuleFor(x => x.Email).EmailAddress().WithMessage(translationService.GetResource("Common.WrongEmail"));
             }
+            else
+            {
+                RuleFor(x => x.Username).NotEmpty().WithMessage(translationService.GetResource("Account.Login.Fields.UserName.Required"));
+                RuleFor(x => x.Password).NotEmpty().WithMessage(translationService.GetResource("Account.Login.Fields.Password.Required"));
+            }
         }
     }
 }

src/Web/Grand.Web/Views/Account/AddressAdd.cshtml

@@ -12,19 +12,21 @@
     @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = AccountNavigationEnum.Addresses })
 }
 <vc:widget widget-zone="customer-address-add-before" additional-data="@Model"></vc:widget>
-<form asp-route="CustomerAddressAdd" method="post" v-on:submit.prevent="validateBeforeSubmit($event)">
-    <div class="page account-page address-edit-page pl-lg-3 mb-3 pt-lg-0 pt-3">
-        <h1 class="generalTitle h2">@Loc["Account.CustomerAddresses.AddNew"]</h1>
-        <div asp-validation-summary="All" class="message-error"></div>
-        @{
-            var dataDictAddress = new ViewDataDictionary(ViewData);
-            dataDictAddress.TemplateInfo.HtmlFieldPrefix = "Address";
-            <partial name="_CreateOrUpdateAddress" model="Model.Address" view-data="dataDictAddress" />
-        }
-        <vc:widget widget-zone="customer-address-add-form" additional-data="@Model"></vc:widget>
-        <div class="buttons generalMarginSupporter mt-1 mb-1">
-            <input type="submit" class="btn btn-info save-address-button" value="@Loc["Common.Save"]" />
+<validation-observer v-slot="{ handleSubmit }">
+    <form asp-route="CustomerAddressAdd" method="post" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
+        <div class="page account-page address-edit-page pl-lg-3 mb-3 pt-lg-0 pt-3">
+            <h1 class="generalTitle h2">@Loc["Account.CustomerAddresses.AddNew"]</h1>
+            <div asp-validation-summary="All" class="message-error"></div>
+            @{
+                var dataDictAddress = new ViewDataDictionary(ViewData);
+                dataDictAddress.TemplateInfo.HtmlFieldPrefix = "Address";
+                <partial name="_CreateOrUpdateAddress" model="Model.Address" view-data="dataDictAddress" />
+            }
+            <vc:widget widget-zone="customer-address-add-form" additional-data="@Model"></vc:widget>
+            <div class="buttons generalMarginSupporter mt-1 mb-1">
+                <input type="submit" class="btn btn-info save-address-button" value="@Loc["Common.Save"]" />
+            </div>
         </div>
-    </div>
-</form>
+    </form>
+</validation-observer>
 <vc:widget widget-zone="customer-address-add-after" additional-data="@Model"></vc:widget>

src/Web/Grand.Web/Views/Account/AddressEdit.cshtml

@@ -12,19 +12,21 @@
     @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = AccountNavigationEnum.Addresses })
 }
 <vc:widget widget-zone="customer-address-edit-before" additional-data="@Model"></vc:widget>
-<form asp-route="CustomerAddressEdit" method="post" v-on:submit.prevent="validateBeforeSubmit($event)">
-    <div class="page account-page address-edit-page pl-lg-3 mb-3 pt-lg-0 pt-3">
-        <h1 class="h2 generalTitle">@Loc["Account.CustomerAddresses.Edit"]</h1>
-        <div asp-validation-summary="All" class="message-error"></div>
-        @{
-            var dataDictAddress = new ViewDataDictionary(ViewData);
-            dataDictAddress.TemplateInfo.HtmlFieldPrefix = "Address";
-            <partial name="_CreateOrUpdateAddress" model="Model.Address" view-data="dataDictAddress" />
-        }
-        <vc:widget widget-zone="customer-address-edit-form" additional-data="@Model"></vc:widget>
-        <div class="buttons generalMarginSupporter">
-            <input type="submit" class="btn btn-info save-address-button" value="@Loc["Common.Save"]" />
+<validation-observer v-slot="{ handleSubmit }">
+    <form asp-route="CustomerAddressEdit" method="post" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
+        <div class="page account-page address-edit-page pl-lg-3 mb-3 pt-lg-0 pt-3">
+            <h1 class="h2 generalTitle">@Loc["Account.CustomerAddresses.Edit"]</h1>
+            <div asp-validation-summary="All" class="message-error"></div>
+            @{
+                var dataDictAddress = new ViewDataDictionary(ViewData);
+                dataDictAddress.TemplateInfo.HtmlFieldPrefix = "Address";
+                <partial name="_CreateOrUpdateAddress" model="Model.Address" view-data="dataDictAddress" />
+            }
+            <vc:widget widget-zone="customer-address-edit-form" additional-data="@Model"></vc:widget>
+            <div class="buttons generalMarginSupporter">
+                <input type="submit" class="btn btn-info save-address-button" value="@Loc["Common.Save"]" />
+            </div>
         </div>
-    </div>
-</form>
+    </form>
+</validation-observer>
 <vc:widget widget-zone="customer-address-edit-after" additional-data="@Model"></vc:widget>

src/Web/Grand.Web/Views/Account/ChangePassword.cshtml

@@ -11,41 +11,58 @@
 {
     @await Component.InvokeAsync("CustomerNavigation", new { selectedTabId = AccountNavigationEnum.ChangePassword })
 }
-<form asp-route="CustomerChangePassword" method="post" v-on:submit.prevent="validateBeforeSubmit($event)">
-    <section class="page account-page change-password-page pl-lg-3 pt-3 pt-lg-0">
-        <h1 class="h2 generalTitle">@Loc["Account.ChangePassword"]</h1>
-        @if (!String.IsNullOrEmpty(Model.Result))
-        {
-            <section class="result alert alert-info">
-                @Model.Result
-            </section>
-        }
-        <div asp-validation-summary="ModelOnly" class="message-error"></div>
+<validation-observer v-slot="{ handleSubmit }">
+    <form asp-route="CustomerChangePassword" method="post" ref="form" v-on:submit.prevent="handleSubmit(formSubmit)">
+        <section class="page account-page change-password-page pl-lg-3 pt-3 pt-lg-0">
+            <h1 class="h2 generalTitle">@Loc["Account.ChangePassword"]</h1>
+            @if (!String.IsNullOrEmpty(Model.Result))
+            {
+                <section class="result alert alert-info">
+                    @Model.Result
+                </section>
+            }
+            <div asp-validation-summary="ModelOnly" class="message-error"></div>
 
-        <fieldset>
-            <div class="form-fields">
-                <fieldset class="form-group">
-                    <label asp-for="OldPassword" class="col-form-label">@Loc["Account.ChangePassword.Fields.OldPassword"]:</label>
-                    <input asp-for="OldPassword" class="form-control" v-validate="'required'" />
-                    <span class="field-validation-error">{{veeErrors.first('OldPassword')}}</span>
-                    <span asp-validation-for="OldPassword"></span>
-                </fieldset>
-                <fieldset class="form-group">
-                    <label asp-for="NewPassword" class="col-form-label">@Loc["Account.ChangePassword.Fields.NewPassword"]:</label>
-                    <input asp-for="NewPassword" class="form-control" v-validate="'required|min:NewPassword'" ref="newpassword" />
-                    <span class="field-validation-error">{{veeErrors.first('NewPassword')}}</span>
-                    <span asp-validation-for="NewPassword"></span>
-                </fieldset>
-                <fieldset class="form-group">
-                    <label asp-for="ConfirmNewPassword" class="col-form-label">@Loc["Account.ChangePassword.Fields.ConfirmNewPassword"]:</label>
-                    <input asp-for="ConfirmNewPassword" class="form-control" v-validate="'required|confirmed:newpassword'" />
-                    <span class="field-validation-error">{{veeErrors.first('ConfirmNewPassword')}}</span>
-                    <span asp-validation-for="ConfirmNewPassword"></span>
-                </fieldset>
+            <fieldset>
+                <div class="form-fields">
+                    <fieldset class="form-group">
+                        <validation-provider tag="div" rules="required" name="OldPassword" v-slot="{ errors }">
+                            <label asp-for="OldPassword" class="col-form-label">@Loc["Account.ChangePassword.Fields.OldPassword"]:</label>
+                            <input asp-for="OldPassword" v-model="changepassword.OldPassword" class="form-control username" autofocus="autofocus" />
+                            <span class="field-validation-error">{{ errors[0] }}</span>
+                            <span asp-validation-for="OldPassword"></span>
+                        </validation-provider>
+                    </fieldset>
+                    <fieldset class="form-group">
+                        <validation-provider tag="div" vid="changepassword.NewPassword" rules="required" v-slot="{ errors }">
+                            <label asp-for="NewPassword" class="col-form-label">@Loc["Account.ChangePassword.Fields.NewPassword"]:</label>
+                            <input asp-for="NewPassword" v-model="changepassword.NewPassword" class="form-control username" autofocus="autofocus" />
+                            <span class="field-validation-error">{{ errors[0] }}</span>
+                            <span asp-validation-for="NewPassword"></span>
+                        </validation-provider>
+                    </fieldset>
+                    <fieldset class="form-group">
+                        <validation-provider tag="div" vid="changepassword.ConfirmNewPassword" rules="required|confirmed:@@changepassword.NewPassword" v-slot="{ errors }">
+                            <label asp-for="ConfirmNewPassword" class="col-form-label">@Loc["Account.ChangePassword.Fields.ConfirmNewPassword"]:</label>
+                            <input asp-for="ConfirmNewPassword" v-model="changepassword.ConfirmNewPassword" class="form-control username" autofocus="autofocus" />
+                            <span class="field-validation-error">{{ errors[0] }}</span>
+                            <span asp-validation-for="ConfirmNewPassword"></span>
+                        </validation-provider>
+                    </fieldset>
+                </div>
+            </fieldset>
+            <div class="text-xs-center">
+                <input type="submit" class="btn btn-info change-password-button" value="@Loc["Account.ChangePassword.Button"]" />
             </div>
-        </fieldset>
-        <div class="text-xs-center">
-            <input type="submit" class="btn btn-info change-password-button" value="@Loc["Account.ChangePassword.Button"]" />
-        </div>
-    </section>
-</form>
+        </section>
+    </form>
+</validation-observer>
+<script asp-location="Footer" asp-order="300">
+    var changepassword = new Vue({
+        data: () => ({
+            OldPassword: '',
+            NewPassword: '',
+            ConfirmNewPassword: '',
+        })
+    });
+</script>