Fix new user form to show errors

frontend/app/components/error-messages.js

@@ -0,0 +1,20 @@
+const ErrorMessagesComponent = {
+  template: `
+  <div class="help-block" ng-messages="$ctrl.input.$error" ng-show="$ctrl.input.$touched || $ctrl.form.$submitted">
+    <span class="error" ng-message="required">This field is required.</span>
+    <span class="error" ng-message="minlength">This field is too short.</span>
+    <span class="error" ng-message="email">This needs to be a valid email.</span>
+  </div>
+  `,
+  replace: true,
+  bindings: {
+    input: '<',
+    form: '<',
+  },
+  controller() {
+  },
+};
+
+export default function (ngModule) {
+  ngModule.component('errorMessages', ErrorMessagesComponent);
+}

frontend/app/components/index.js

@@ -10,3 +10,4 @@ export { default as permissionsEditor } from './permissions-editor';
 export { default as dynamicTable } from './dynamic-table';
 export { default as paginator } from './paginator';
 export { default as settingsScreen } from './settings-screen';
+export { default as errorMessages } from './error-messages';

frontend/app/filters/index.js

@@ -110,3 +110,7 @@ export function remove(items, item) {
 export function notEmpty(collection) {
   return !isEmpty(collection);
 }
+
+export function showError(field, form) {
+  return (field.$touched && field.$invalid) || form.$submitted;
+}

frontend/app/pages/users/new.html

@@ -1,34 +1,25 @@
 <settings-screen>
   <email-settings-warning function="'invite emails'"></email-settings-warning>
-  {{$ctrl.test}}
   <form class="form" name="$ctrl.userForm" ng-submit="saveUser()" novalidate>
-  {{$ctrl.test}}
-    <div class="form-group required" ng-class="{ 'has-error': $ctrl.userForm.name.$touched && $ctrl.userForm.name.$invalid }">
+    <div class="form-group required" ng-class="{ 'has-error':  ($ctrl.userForm.email | showError:$ctrl.userForm )}">
       <label class="control-label">Name</label>
       <input type="text" name="name" class="form-control" ng-model="user.name" ng-disabled="user.created" required/>
 
-      <div class="help-block" ng-messages="$ctrl.userForm.name.$error" ng-show="$ctrl.userForm.name.$touched">
-        <span class="error" ng-message="required">This field is required.</span>
-        <span class="error" ng-message="minlength">This field is too short.</span>
-        <span class="error" ng-message="email">This needs to be a valid email.</span>
-      </div>
+      <error-messages input="$ctrl.userForm.name" form="$ctrl.userForm"></error-messages>
     </div>
 
-    <div class="form-group required" ng-class="{ 'has-error': $ctrl.userForm.email.$touched && $ctrl.userForm.email.$invalid }">
+    <div class="form-group required" ng-class="{ 'has-error': ($ctrl.userForm.email | showError:$ctrl.userForm ) }">
       <label class="control-label">Email</label>
       <input name="email" type="email" class="form-control" ng-model="user.email" ng-disabled="user.created" required/>
 
-      <div class="help-block" ng-messages="$ctrl.userForm.email.$error" ng-show="$ctrl.userForm.email.$touched">
-        <span class="error" ng-message="required">This field is required.</span>
-        <span class="error" ng-message="minlength">This field is too short.</span>
-        <span class="error" ng-message="email">This needs to be a valid email.</span>
-      </div>
+      <error-messages input="$ctrl.userForm.email" form="$ctrl.userForm"></error-messages>
     </div>
 
     <div class="form-group" ng-if="!user.created">
       <button class="btn btn-primary">Create</button>
     </div>
 
+
     <div ng-if="user.created" class="alert alert-success">
       <p>
         <strong>The user has been created and should receive an invite email soon.</strong>

rd_ui/app/scripts/directives/directives.js

@@ -257,17 +257,6 @@
     };
   });
 
-  directives.directive('inputErrors', function () {
-    return {
-      restrict: "E",
-      templateUrl: "/views/directives/input_errors.html",
-      replace: true,
-      scope: {
-        errors: "="
-      }
-    };
-  });
-
   directives.directive('onDestroy', function () {
     /* This directive can be used to invoke a callback when an element is destroyed,
     A useful example is the following:

rd_ui/app/views/directives/input_errors.html

@@ -1,5 +0,0 @@
-<div>
-    <span class="help-block error" ng-if="errors.required">This field is required.</span>
-    <span class="help-block error" ng-if="errors.minlength">This field is too short.</span>
-    <span class="help-block error" ng-if="errors.email">This needs to be a valid email.</span>
-</div>