Merge pull request #143 from alphagov/autofocus-two-factor

Autofocus two factor

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);

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 %}

app/templates/views/two-factor.html

@@ -15,11 +15,15 @@ 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',
+        autofocus=True,
+        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>

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'
   ])