From 9767ee15119bda6c62fd8c1305fb4ff817c5c7cb Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 2 Feb 2016 16:03:30 +0000
Subject: [PATCH 1/3] Make two factor textbox consistent with verify textboxes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- make the field the same width (5em to match length of code)
- move ‘haven’t received…’ link underneath the textbox instead of underneath
  the button
---
 app/templates/views/two-factor.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/templates/views/two-factor.html b/app/templates/views/two-factor.html
index cfcd86d89..cc9eda642 100644
--- a/app/templates/views/two-factor.html
+++ b/app/templates/views/two-factor.html
@@ -15,11 +15,14 @@ GOV.UK Notify | Text verification
     <p>We've sent you a text message with a verification code.</p>
 
     <form autocomplete="off" method="post">
-      {{ textbox(form.sms_code) }}
+      {{ textbox(
+        form.sms_code,
+        width='5em',
+        help_link=url_for('.verification_code_not_received'),
+        help_link_text='I haven’t received a text message'
+      ) }}
       {{ page_footer(
-        "Continue",
-        back_link=url_for('.verification_code_not_received'),
-        back_link_text='I haven’t received a text'
+        "Continue"
       ) }}
     </form>
   </div>

From 776539462e0175ef58af6b0a86841349b43cc81b Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 2 Feb 2016 16:16:29 +0000
Subject: [PATCH 2/3] Make autofocus textbox module

This commit adds a very small Javascript module to autofocus a textbox on page
load. It should only be used once per page.

It also adds a parameter to the textbox macro which adds the attribute to
trigger autofocus.
---
 app/assets/javascripts/autofocus.js   | 12 ++++++++++++
 app/templates/components/textbox.html | 12 ++++++++++--
 gulpfile.babel.js                     |  1 +
 3 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/javascripts/autofocus.js

diff --git a/app/assets/javascripts/autofocus.js b/app/assets/javascripts/autofocus.js
new file mode 100644
index 000000000..2d276953f
--- /dev/null
+++ b/app/assets/javascripts/autofocus.js
@@ -0,0 +1,12 @@
+(function(Modules) {
+  "use strict";
+
+  Modules.Autofocus = function() {
+    this.start = function(component) {
+
+      $('input, textarea, select', component).eq(0).trigger('focus');
+
+    };
+  };
+
+})(window.GOVUK.Modules);
diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html
index 07f422c4a..cffcd48c9 100644
--- a/app/templates/components/textbox.html
+++ b/app/templates/components/textbox.html
@@ -1,5 +1,13 @@
-{% macro textbox(field, hint=False, highlight_tags=False, help_link=None, help_link_text=None, width='2-3') %}
-  <div class="form-group{% if field.errors %} error{% endif %}">
+{% macro textbox(
+  field,
+  hint=False,
+  highlight_tags=False,
+  autofocus=False,
+  help_link=None,
+  help_link_text=None,
+  width='2-3'
+) %}
+  <div class="form-group{% if field.errors %} error{% endif %}" {% if autofocus %}data-module="autofocus"{% endif %}>
     <label class="form-label" for="{{ field.name }}">
       {{ field.label }}
       {% if hint %}
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 0ee79b662..24c431155 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -35,6 +35,7 @@ gulp.task('javascripts', () => gulp
     paths.npm + 'govuk_frontend_toolkit/javascripts/govuk/modules.js',
     paths.npm + 'govuk_frontend_toolkit/javascripts/govuk/selection-buttons.js',
     paths.src + 'javascripts/apiKey.js',
+    paths.src + 'javascripts/autofocus.js',
     paths.src + 'javascripts/highlightTags.js',
     paths.src + 'javascripts/main.js'
   ])

From 2d1af953ed4f69ef05201f82aa79ee0b157812ea Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Tue, 2 Feb 2016 16:16:35 +0000
Subject: [PATCH 3/3] Add autofocus module to two factor page

---
 app/templates/views/two-factor.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/templates/views/two-factor.html b/app/templates/views/two-factor.html
index cc9eda642..5008a1abe 100644
--- a/app/templates/views/two-factor.html
+++ b/app/templates/views/two-factor.html
@@ -18,6 +18,7 @@ GOV.UK Notify | Text verification
       {{ textbox(
         form.sms_code,
         width='5em',
+        autofocus=True,
         help_link=url_for('.verification_code_not_received'),
         help_link_text='I haven’t received a text message'
       ) }}