From 063f9cc0815b1a5832f396b84885596d51b23b80 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 7 May 2018 22:26:24 +0100
Subject: [PATCH] Enable numeric keypad for text message code
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

If you’re signing in on a phone, it’s easier to type the two factor code
with a numeric keypad. The most reliable way to get the numeric keypad
to show up on multiple devices is:
- `type='tel'` (not `type='number'` because that’s only meant for
  numbers, not string of digits, ie `01234` is not a number)
- `pattern='[0-9]*'`, without which it doesn’t work on iOS

Based on the guidance here:
- https://github.com/alphagov/govuk-design-system-backlog/issues/74
- https://docs.google.com/document/d/1wozIhOdt6wvlgqVReauUnlsJI-3fqUlNuQFwUI7tqAA/edit
---
 app/main/forms.py                       | 9 ++++++++-
 app/templates/views/two-factor.html     | 2 +-
 tests/app/main/views/test_two_factor.py | 7 ++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/main/forms.py b/app/main/forms.py
index b0d7f5afe..784b8f2e8 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -160,8 +160,15 @@ def password(label='Password'):
                                      Blacklist(message='Choose a password that’s harder to guess')])
 
 
+class SMSCode(StringField):
+    def __call__(self, **kwargs):
+        return super().__call__(
+            type='tel', pattern='[0-9]*', **kwargs
+        )
+
+
 def sms_code():
-    return StringField('Text message code', validators=[
+    return SMSCode('Text message code', validators=[
         DataRequired(message='Can’t be empty'),
         Regexp(regex='^\d+$', message='Numbers only'),
         Length(min=5, message='Not enough numbers'),
diff --git a/app/templates/views/two-factor.html b/app/templates/views/two-factor.html
index a58df2f32..d7177c4c6 100644
--- a/app/templates/views/two-factor.html
+++ b/app/templates/views/two-factor.html
@@ -15,7 +15,7 @@
 
     <p>We’ve sent you a text message with a security code.</p>
 
-    <form autocomplete="off" method="post" class="extra-tracking">
+    <form autocomplete="off" method="post" class="extra-tracking" novalidate>
       {{ textbox(
         form.sms_code,
         width='5em',
diff --git a/tests/app/main/views/test_two_factor.py b/tests/app/main/views/test_two_factor.py
index f710e05fd..e6498beff 100644
--- a/tests/app/main/views/test_two_factor.py
+++ b/tests/app/main/views/test_two_factor.py
@@ -17,7 +17,12 @@ def test_should_render_two_factor_page(
             'email': api_user_active.email_address}
     response = client.get(url_for('main.two_factor'))
     assert response.status_code == 200
-    assert '''We’ve sent you a text message with a security code.''' in response.get_data(as_text=True)
+    page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
+    assert page.select_one('main p').text.strip() == (
+        'We’ve sent you a text message with a security code.'
+    )
+    assert page.select_one('input')['type'] == 'tel'
+    assert page.select_one('input')['pattern'] == '[0-9]*'
 
 
 def test_should_login_user_and_should_redirect_to_next_url(