Fix invite user validation issues in signup

refs #5652
- wrap emails input in `{{gh-form-group}}` component to give element success/error classes
- pull validation messages into submit button
- clean up validation related aspects of step three controller

app/controllers/setup/three.js

@@ -7,75 +7,130 @@ export default Ember.Controller.extend({
 
     errors: DS.Errors.create(),
     users: '',
-
     ownerEmail: Ember.computed.alias('two.email'),
     submitting: false,
+
     usersArray: Ember.computed('users', function () {
-        var users = this.get('users').split('\n').filter(function (email) {
+        var errors = this.get('errors'),
+            users = this.get('users').split('\n').filter(function (email) {
             return email.trim().length > 0;
         });
 
+        // remove "no users to invite" error if we have users
+        if (users.uniq().length > 0 && errors.get('users.length') === 1) {
+            if (errors.get('users.firstObject').message.match(/no users/i)) {
+                errors.remove('users');
+            }
+        }
+
         return users.uniq();
     }),
-    validUsersArray: Ember.computed('usersArray', function () {
+
+    validUsersArray: Ember.computed('usersArray', 'ownerEmail', function () {
+        var ownerEmail = this.get('ownerEmail');
+
         return this.get('usersArray').filter(function (user) {
-            return validator.isEmail(user);
+            return validator.isEmail(user) && user !== ownerEmail;
         });
     }),
-    validateUsers: Ember.computed('usersArray', 'ownerEmail', function () {
-        var errors = [],
-            self = this;
 
-        this.get('usersArray').forEach(function (user) {
-            if (!validator.isEmail(user) || user === self.get('ownerEmail')) {
-                errors.push({
-                    user: user,
-                    error: 'email'
-                });
+    invalidUsersArray: Ember.computed('usersArray', 'ownerEmail', function () {
+        var ownerEmail = this.get('ownerEmail');
+
+        return this.get('usersArray').reject(function (user) {
+            return validator.isEmail(user) || user === ownerEmail;
+        });
+    }),
+
+    validationResult: Ember.computed('invalidUsersArray', function () {
+        var errors = [];
+
+        this.get('invalidUsersArray').forEach(function (user) {
+            errors.push({
+                user: user,
+                error: 'email'
+            });
+        });
+
+        if (errors.length === 0) {
+            // ensure we aren't highlighting fields when everything is fine
+            this.get('errors').clear();
+            return true;
+        } else {
+            return errors;
+        }
+    }),
+
+    validate: function () {
+        var errors = this.get('errors'),
+            validationResult = this.get('validationResult');
+
+        errors.clear();
+
+        if (validationResult === true) { return true; }
+
+        validationResult.forEach(function (error) {
+            // Only one error type here so far, but one day the errors might be more detailed
+            switch (error.error) {
+            case 'email':
+                errors.add('users', error.user + ' is not a valid email.');
             }
         });
 
-        return errors.length === 0 ? true : errors;
-    }),
-    numUsers: Ember.computed('validUsersArray', function () {
-        return this.get('validUsersArray').length;
-    }),
-    buttonText: Ember.computed('usersArray', function () {
-        var num = this.get('usersArray').length,
-            user;
+        return false;
+    },
 
-        if (num > 0) {
-            user = num === 1 ? 'user' : 'users';
-            user = num + ' ' + user;
-        } else {
-            user = 'some users';
+    buttonText: Ember.computed('errors.users', 'validUsersArray', 'invalidUsersArray', function () {
+        var usersError = this.get('errors.users.firstObject.message'),
+            validNum = this.get('validUsersArray').length,
+            invalidNum = this.get('invalidUsersArray').length,
+            userCount;
+
+        if (usersError && usersError.match(/no users/i)) {
+            return usersError;
         }
 
-        return 'Invite ' + user;
+        if (invalidNum > 0) {
+            userCount = invalidNum === 1 ? 'email address' : 'email addresses';
+            return `${invalidNum} invalid ${userCount}`;
+        }
+
+        if (validNum > 0) {
+            userCount = validNum === 1 ? 'user' : 'users';
+            userCount = validNum + ' ' + userCount;
+        } else {
+            userCount = 'some users';
+        }
+
+        return 'Invite ' + userCount;
     }),
-    buttonClass: Ember.computed('validateUsers', 'numUsers', function () {
-        if (this.get('validateUsers') === true && this.get('numUsers') > 0) {
+
+    buttonClass: Ember.computed('validationResult', 'usersArray.length', function () {
+        if (this.get('validationResult') === true && this.get('usersArray.length') > 0) {
             return 'btn-green';
         } else {
             return 'btn-minor';
         }
     }),
+
     authorRole: Ember.computed(function () {
         return this.store.find('role').then(function (roles) {
             return roles.findBy('name', 'Author');
         });
     }),
+
     actions: {
+        validate: function () {
+            this.validate();
+        },
+
         invite: function () {
             var self = this,
-                validationErrors = this.get('validateUsers'),
                 users = this.get('usersArray'),
                 notifications = this.get('notifications'),
                 invitationsString;
 
-            this.get('errors').clear();
-
-            if (validationErrors === true && users.length > 0) {
+            if (this.validate() && users.length > 0) {
                 this.toggleProperty('submitting');
                 this.get('authorRole').then(function (authorRole) {
                     Ember.RSVP.Promise.all(
@@ -130,17 +185,10 @@ export default Ember.Controller.extend({
                     });
                 });
             } else if (users.length === 0) {
-                this.get('errors').add('users', 'No users to invite.');
-            } else {
-                validationErrors.forEach(function (error) {
-                    // Only one error type here so far, but one day the errors might be more detailed
-                    switch (error.error) {
-                    case 'email':
-                        self.get('errors').add('users', error.user + ' is not a valid email.');
-                    }
-                });
+                this.get('errors').add('users', 'No users to invite');
             }
         },
+
         skipInvite: function () {
             this.send('loadServerNotifications');
             this.transitionToRoute('posts.index');

app/templates/setup/three.hbs

@@ -5,13 +5,14 @@
 
 <img class="gh-flow-faces" src="{{gh-path 'admin' 'img/users.png'}}" alt="" />
 
-<form class="gh-flow-invite">
-    <label>Enter one email address per line, we’ll handle the rest! <i class="icon-mail"></i></label>
-    {{textarea class="gh-input" name="users" value=users required="required"}}
-    {{gh-error-message errors=errors property="users"}}
-</form>
+<form class="gh-flow-invite" {{action 'invite'}}>
+    {{#gh-form-group errors=errors property="users"}}
+        <label>Enter one email address per line, we’ll handle the rest! <i class="icon-mail"></i></label>
+        {{gh-textarea name="users" value=users required="required"}}
+    {{/gh-form-group}}
 
-{{#gh-spin-button classNameBindings=":btn :btn-default :btn-lg :btn-block buttonClass" action="invite" submitting=submitting autoWidth="false"}}{{buttonText}}{{/gh-spin-button}}
+    {{#gh-spin-button type="submit" classNameBindings=":btn :btn-default :btn-lg :btn-block buttonClass" submitting=submitting autoWidth="false"}}{{buttonText}}{{/gh-spin-button}}
+</form>
 
 <button class="gh-flow-skip" {{action "skipInvite"}}>
     I'll do this later, take me to my blog!