Fix errors for setup and signup

refs #5635

- adds enter action to signup fields
- adds validation text errors

core/client/app/controllers/setup/two.js

@@ -12,6 +12,7 @@ export default Ember.Controller.extend(ValidationEngine, {
     image: null,
     blogCreated: false,
     submitting: false,
+    flowErrors: '',
 
     ghostPaths: Ember.inject.service('ghost-paths'),
     notifications: Ember.inject.service(),
@@ -56,9 +57,9 @@ export default Ember.Controller.extend(ValidationEngine, {
                 method = this.get('blogCreated') ? 'PUT' : 'POST';
 
             this.toggleProperty('submitting');
+            this.set('flowErrors', '');
 
             this.validate().then(function () {
-                self.set('showError', false);
                 ajax({
                     url: self.get('ghostPaths.url').api('authentication', 'setup'),
                     type: method,
@@ -96,11 +97,15 @@ export default Ember.Controller.extend(ValidationEngine, {
                     });
                 }).catch(function (resp) {
                     self.toggleProperty('submitting');
+                    if (resp && resp.jqXHR && resp.jqXHR.responseJSON && resp.jqXHR.responseJSON.errors) {
+                        self.set('flowErrors', resp.jqXHR.responseJSON.errors[0].message);
+                    } else {
                         notifications.showAPIError(resp);
+                    }
                 });
             }).catch(function () {
                 self.toggleProperty('submitting');
-                self.set('showError', true);
+                self.set('flowErrors', 'Please fill out the form to setup your blog.');
             });
         },
         setImage: function (image) {

core/client/app/controllers/signup.js

@@ -7,6 +7,7 @@ export default Ember.Controller.extend(ValidationEngine, {
     validationType: 'signup',
 
     submitting: false,
+    flowErrors: '',
 
     ghostPaths: Ember.inject.service('ghost-paths'),
     notifications: Ember.inject.service(),
@@ -18,6 +19,7 @@ export default Ember.Controller.extend(ValidationEngine, {
                 data = model.getProperties('name', 'email', 'password', 'token'),
                 notifications = this.get('notifications');
 
+            this.set('flowErrors', '');
             notifications.closeNotifications();
 
             this.validate().then(function () {
@@ -41,13 +43,15 @@ export default Ember.Controller.extend(ValidationEngine, {
                     });
                 }).catch(function (resp) {
                     self.toggleProperty('submitting');
+                    if (resp && resp.jqXHR && resp.jqXHR.responseJSON && resp.jqXHR.responseJSON.errors) {
+                        self.set('flowErrors', 'That email address is already in use.');
+                    } else {
                         notifications.showAPIError(resp);
-                });
-            }).catch(function (error) {
-                if (error) {
-                    notifications.showAPIError(error);
                     }
                 });
+            }).catch(function () {
+                self.set('flowErrors', 'Please fill out the form to complete your sign-up');
+            });
         }
     }
 });

core/client/app/templates/setup/two.hbs

@@ -40,4 +40,5 @@
 {{#gh-spin-button type="button" class="btn btn-green btn-lg btn-block" action="setup" submitting=submitting autoWidth=false}}
     Last step: Invite your team <i class="icon-chevron"></i>
 {{/gh-spin-button}}
-<p class="main-error">{{#if showError}}{{invalidMessage}}{{/if}}</p>
+
+<p class="main-error">{{{flowErrors}}}</p>

core/client/app/templates/signup.hbs

@@ -21,21 +21,21 @@
                 {{#gh-form-group errors=model.errors property="email"}}
                     <label for="email-address">Email address</label>
                     <span class="input-icon icon-mail">
-                        {{gh-input type="email" name="email" placeholder="Eg. john@example.com" class="gh-input" autofocus="autofocus" autocorrect="off" value=model.email focusOut=(action "validate" "email")}}
+                        {{gh-input type="email" name="email" placeholder="Eg. john@example.com" class="gh-input" enter=(action "signup") autofocus="autofocus" autocorrect="off" value=model.email focusOut=(action "validate" "email")}}
                     </span>
                     {{gh-error-message errors=model.errors property="email"}}
                 {{/gh-form-group}}
                 {{#gh-form-group errors=model.errors property="name"}}
                     <label for="full-name">Full name</label>
                     <span class="input-icon icon-user">
-                        {{gh-input type="text" name="name" placeholder="Eg. John H. Watson" class="gh-input" autofocus="autofocus" autocorrect="off" value=model.name focusOut=(action "validate" "name")}}
+                        {{gh-input type="text" name="name" placeholder="Eg. John H. Watson" class="gh-input" enter=(action "signup") autofocus="autofocus" autocorrect="off" value=model.name focusOut=(action "validate" "name")}}
                     </span>
                     {{gh-error-message errors=model.errors property="name"}}
                 {{/gh-form-group}}
                 {{#gh-form-group errors=model.errors property="password"}}
                     <label for="password">Password</label>
                     <span class="input-icon icon-lock">
-                        {{input class="gh-input" type="password" name="password" autofocus="autofocus" autocorrect="off" value=model.password focusOut=(action "validate" "password")}}
+                        {{input class="gh-input" type="password" name="password" autofocus="autofocus" enter=(action "signup") autocorrect="off" value=model.password focusOut=(action "validate" "password")}}
                         <div class="pw-strength">
                             <div class="pw-strength-dot"></div>
                             <div class="pw-strength-dot"></div>
@@ -48,7 +48,8 @@
                 {{/gh-form-group}}
             </form>
 
-            {{gh-spin-button type="submit" class="btn btn-green btn-lg btn-block" action="signup" submitting=submitting autoWidth=false}}
+            {{gh-spin-button type="submit" class="btn btn-green btn-lg btn-block" action="signup" submitting=submitting buttonText="Create Account" autoWidth=false}}
+            <p class="main-error">{{{flowErrors}}}</p>
         </section>
     </div>