From bb5a561932ef9fc4c2f916b5a8189217844fd571 Mon Sep 17 00:00:00 2001
From: Warren Buckley <warren@umbraco.com>
Date: Fri, 7 Dec 2018 11:43:36 +0000
Subject: [PATCH] Wiring up server side validation in the UI

---
 .../src/views/packages/edit.controller.js     | 24 +++++----
 .../src/views/packages/edit.html              | 50 ++++++++++++++-----
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/packages/edit.controller.js
index 12a9ea0092..494c26e8e8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/edit.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function EditController($location, $routeParams, entityResource, packageResource, contentTypeResource, templateResource, stylesheetResource, languageResource, dictionaryResource, dataTypeResource, editorService) {
+    function EditController($scope, $location, $routeParams, entityResource, packageResource, contentTypeResource, templateResource, stylesheetResource, languageResource, dictionaryResource, dataTypeResource, editorService, formHelper) {
 
         const vm = this;
 
@@ -91,16 +91,20 @@
             $location.path("packages/packages/overview").search('create', null);;
         }
 
-        function createPackage() {
+        function createPackage(editPackageForm) {
 
-            vm.createPackageButtonState = "busy";
+            if (formHelper.submitForm({ formCtrl: editPackageForm, scope: $scope })) {
 
-            packageResource.createPackage(vm.package).then((updatedPackage) => {
-                vm.package = updatedPackage;
-                vm.createPackageButtonState = "success";
-            }, function(error){
-                vm.createPackageButtonState = "error";
-            });
+                vm.createPackageButtonState = "busy";
+
+                packageResource.createPackage(vm.package).then((updatedPackage) => {
+                    vm.package = updatedPackage;
+                    vm.createPackageButtonState = "success";
+                }, function(err){
+                    formHelper.handleError(err);
+                    vm.createPackageButtonState = "error";
+                });
+            }
         }
 
         function save() {
@@ -144,7 +148,7 @@
                             vm.package.files.push(selected);
                         });
                     }
-                    
+
                     editorService.close();
                 },
                 close: function() {
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/edit.html b/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
index 77743a1116..5f63d74fe7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
@@ -1,6 +1,6 @@
-<div data-element="editor-languages" ng-controller="Umbraco.Editors.Packages.EditController as vm">
+<div data-element="editor-packages" ng-controller="Umbraco.Editors.Packages.EditController as vm">
 
-    <form name="editLanguageForm" no-validate val-form-manager>
+    <form name="editPackageForm" no-validate val-form-manager>
 
         <umb-editor-view>
 
@@ -27,43 +27,67 @@
                     <div class="umb-expansion-panel__content" ng-show="vm.propertiesOpen">
 
                         <umb-control-group label="Url" required="true">
-                            <input class="umb-property-editor" type="text" ng-model="vm.package.url" required />
+                            <input class="umb-property-editor" name="url" type="text" ng-model="vm.package.url" val-server-field="model.Url" required />
+
+                            <span ng-messages="editPackageForm.url.$error" show-validation-on-submit >
+                                <span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
+                                <span class="help-inline" ng-message="valServerField">{{editPackageForm.url.errorMsg}}</span>
+                            </span>
                         </umb-control-group>
 
                         <umb-control-group label="Version" required="true">
-                            <input class="umb-property-editor" type="text" ng-model="vm.package.version" required />
+                            <input class="umb-property-editor" name="version" type="text" ng-model="vm.package.version" val-server-field="model.Version" required />
+
+                            <span ng-messages="editPackageForm.version.$error" show-validation-on-submit >
+                                <span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
+                                <span class="help-inline" ng-message="valServerField">{{editPackageForm.version.errorMsg}}</span>
+                            </span>
                         </umb-control-group>
 
                         <umb-control-group label="Icon URL">
-                            <input class="umb-property-editor" type="text" ng-model="vm.package.iconUrl" />
+                            <input class="umb-property-editor" name="iconUrl" type="text" ng-model="vm.package.iconUrl" />
                         </umb-control-group>
 
                         <umb-control-group label="Package File">
-                            <input class="umb-property-editor" type="text" ng-model="vm.package.packagePath" />
+                            <input class="umb-property-editor" name="packagePath" type="text" ng-model="vm.package.packagePath" />
                         </umb-control-group>
 
                         <umb-control-group label="Umbraco version">
-                            <input class="umb-property-editor" type="text" ng-model="vm.package.umbracoVersion" />
+                            <input class="umb-property-editor" name="umbracoVersion" type="text" ng-model="vm.package.umbracoVersion" val-server-field="model.umbracoVersion" />
+
+                            <span ng-messages="editPackageForm.umbracoVersion.$error" show-validation-on-submit >
+                                <span class="help-inline" ng-message="valServerField">{{editPackageForm.umbracoVersion.errorMsg}}</span>
+                            </span>
                         </umb-control-group>
 
                         <umb-control-group label="Author name" required="true">
-                            <input class="umb-property-editor" type="text" ng-model="vm.package.author" required />
+                            <input class="umb-property-editor" name="author" type="text" ng-model="vm.package.author" val-server-field="model.Author" required />
+
+                            <span ng-messages="editPackageForm.author.$error" show-validation-on-submit >
+                                <span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
+                                <span class="help-inline" ng-message="valServerField">{{editPackageForm.author.errorMsg}}</span>
+                            </span>
                         </umb-control-group>
 
                         <umb-control-group label="Author URL" required="true">
-                            <input type="text" class="umb-property-editor" ng-model="vm.package.authorUrl" required />
+                            <input class="umb-property-editor" name="authorUrl" type="text" ng-model="vm.package.authorUrl" val-server-field="model.AuthorUrl" required />
+
+                            <span ng-messages="editPackageForm.authorUrl.$error" show-validation-on-submit >
+                                <span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
+                                <span class="help-inline" ng-message="valServerField">{{editPackageForm.authorUrl.errorMsg}}</span>
+                            </span>
                         </umb-control-group>
 
                         <umb-control-group label="License">
-                            <input class="umb-property-editor" type="text" ng-model="vm.package.license" />
+                            <input class="umb-property-editor" name="license" type="text" ng-model="vm.package.license" />
                         </umb-control-group>
 
                         <umb-control-group label="License URL">
-                            <input class="umb-property-editor" type="text" ng-model="vm.package.licenseUrl" />
+                            <input class="umb-property-editor" name="licenseUrl" type="text" ng-model="vm.package.licenseUrl" />
                         </umb-control-group>
 
                         <umb-control-group label="Readme">
-                            <textarea class="umb-property-editor" rows="10" ng-model="vm.package.readme"></textarea>
+                            <textarea class="umb-property-editor" name="readme" rows="10" ng-model="vm.package.readme"></textarea>
                         </umb-control-group>
 
                     </div>
@@ -281,7 +305,7 @@
                 <umb-editor-footer-content-right>
                     <umb-button
                         type="button"
-                        action="vm.createPackage()"
+                        action="vm.createPackage(editPackageForm)"
                         state="vm.createPackageButtonState"
                         button-style="success"
                         label="Create"