From a399adea3b502c9077df998c5153312211548118 Mon Sep 17 00:00:00 2001
From: Hannah Wolfe <erisds@gmail.com>
Date: Tue, 25 Aug 2015 20:36:40 +0100
Subject: [PATCH] Improve markup + tabindex etc on setup/two

refs #5652

- ensure gh-spin-button passes type & tabindex through to markup
- add gh-input class to auto focus input
- add tabindexes to setup/two + make first field autofocus and button submit
---
 core/client/app/components/gh-spin-button.js      |  2 +-
 core/client/app/components/gh-trim-focus-input.js |  2 +-
 core/client/app/templates/setup/two.hbs           | 10 +++++-----
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/core/client/app/components/gh-spin-button.js b/core/client/app/components/gh-spin-button.js
index f487964c9c..5eda235fc1 100644
--- a/core/client/app/components/gh-spin-button.js
+++ b/core/client/app/components/gh-spin-button.js
@@ -8,7 +8,7 @@ export default Ember.Component.extend({
     autoWidth: true,
 
     // Disable Button when isLoading equals true
-    attributeBindings: ['disabled'],
+    attributeBindings: ['disabled', 'type', 'tabindex'],
 
     // Must be set on the controller
     disabled: Ember.computed.equal('submitting', true),
diff --git a/core/client/app/components/gh-trim-focus-input.js b/core/client/app/components/gh-trim-focus-input.js
index f1627bf7f6..5c8cc4c1de 100644
--- a/core/client/app/components/gh-trim-focus-input.js
+++ b/core/client/app/components/gh-trim-focus-input.js
@@ -2,7 +2,7 @@ import Ember from 'ember';
 /*global device*/
 var TrimFocusInput = Ember.TextField.extend({
     focus: true,
-
+    classNames: 'gh-input',
     attributeBindings: ['autofocus'],
 
     autofocus: Ember.computed(function () {
diff --git a/core/client/app/templates/setup/two.hbs b/core/client/app/templates/setup/two.hbs
index 2c9d1bb2e3..5140b25850 100644
--- a/core/client/app/templates/setup/two.hbs
+++ b/core/client/app/templates/setup/two.hbs
@@ -11,33 +11,33 @@
         {{#gh-form-group errors=errors property="email"}}
             <label for="email-address">Email address</label>
             <span class="input-icon icon-mail">
-                {{gh-input type="email" name="email" enter=(action "setup") placeholder="Eg. john@example.com" class="gh-input" autofocus="autofocus" autocorrect="off" value=email focusOut=(action "handleEmail")}}
+                {{gh-trim-focus-input tabindex="1" type="email" name="email" enter=(action "setup") placeholder="Eg. john@example.com" autocorrect="off" value=email focusOut=(action "handleEmail")}}
             </span>
             {{gh-error-message errors=errors property="email"}}
         {{/gh-form-group}}
         {{#gh-form-group errors=errors property="name"}}
             <label for="full-name">Full name</label>
             <span class="input-icon icon-user">
-                {{gh-input type="text" name="name" enter=(action "setup") placeholder="Eg. John H. Watson" class="gh-input" autofocus="autofocus" autocorrect="off" value=name focusOut=(action "validate" "name")}}
+                {{gh-input tabindex="2" type="text" name="name" enter=(action "setup") placeholder="Eg. John H. Watson"  autocorrect="off" value=name focusOut=(action "validate" "name")}}
             </span>
             {{gh-error-message errors=errors property="name"}}
         {{/gh-form-group}}
         {{#gh-form-group errors=errors property="password"}}
             <label for="password">Password</label>
             <span class="input-icon icon-lock">
-                {{gh-input type="password" name="password" enter=(action "setup") placeholder="At least 8 characters" class="gh-input" autofocus="autofocus" autocorrect="off" value=password focusOut=(action "validate" "password")}}
+                {{gh-input tabindex="3" type="password" name="password" enter=(action "setup") placeholder="At least 8 characters" autocorrect="off" value=password focusOut=(action "validate" "password")}}
             </span>
             {{gh-error-message errors=errors property="password"}}
         {{/gh-form-group}}
         {{#gh-form-group errors=errors property="blogTitle"}}
             <label for="blog-title">Blog title</label>
             <span class="input-icon icon-content">
-                {{gh-input type="text" name="blog-title" enter=(action "setup") placeholder="Eg. The Daily Awesome" class="gh-input" autofocus="autofocus" autocorrect="off" value=blogTitle focusOut=(action "validate" "blogTitle")}}
+                {{gh-input tabindex="4" type="text" name="blog-title" enter=(action "setup") placeholder="Eg. The Daily Awesome" autocorrect="off" value=blogTitle focusOut=(action "validate" "blogTitle")}}
             </span>
             {{gh-error-message errors=errors property="blogTitle"}}
         {{/gh-form-group}}
     </form>
-{{#gh-spin-button type="button" class="btn btn-green btn-lg btn-block" action="setup" submitting=submitting autoWidth=false}}
+{{#gh-spin-button type="submit" tabindex="5" 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}}