Convert TwoFactorForm to gov uk frontend

app/main/forms.py

@@ -310,7 +310,7 @@ class GovukSearchField(SearchField):
         return govuk_field_widget(self, field, type="search", param_extensions=params, **kwargs)
 
 
-class SMSCode(StringField):
+class SMSCode(GovukTextInputField):
     validators = [
         DataRequired(message='Cannot be empty'),
         Regexp(regex=r'^\d+$', message='Numbers only'),
@@ -319,7 +319,12 @@ class SMSCode(StringField):
     ]
 
     def __call__(self, **kwargs):
-        return super().__call__(type='tel', pattern='[0-9]*', **kwargs)
+        params = {"attributes": {"pattern": "[0-9]*"}}
+        if "param_extensions" in kwargs:
+            kwargs["param_extensions"].update(params)
+        else:
+            kwargs["param_extensions"] = params
+        return super().__call__(type='tel', **kwargs)
 
     def process_formdata(self, valuelist):
         if valuelist:

app/templates/views/two-factor.html

@@ -16,11 +16,10 @@
     <p class="govuk-body">We’ve sent you a text message with a security code.</p>
 
     {% call form_wrapper(class="extra-tracking") %}
-      {{ textbox(
-        form.sms_code,
-        width='5em',
-        autofocus=True
-      ) }}
+      {{ form.sms_code(param_extensions={
+          "classes": "govuk-input govuk-input--width-5",
+          "attributes": {"data-module": "autofocus"}
+      }) }}
       {{ page_footer(
         "Continue",
         secondary_link=url_for('main.check_and_resend_text_code'),

app/templates/views/user-profile/confirm.html

@@ -21,11 +21,11 @@
         We’ve sent a security code to your new {{ thing }}.
       </p>
       {% call form_wrapper() %}
-        {{ textbox(
-          form_field,
-          width='5em',
-          autofocus=True
-        ) }}
+        {{ form_field(param_extensions={
+            "classes": "govuk-input govuk-input--width-5",
+            "attributes": {"data-module": "autofocus"}
+        }) }}
+
         {{ page_footer('Confirm') }}
       {% endcall %}
     </div>

tests/app/main/views/test_verify.py

@@ -9,7 +9,6 @@ from itsdangerous import SignatureExpired
 from notifications_python_client.errors import HTTPError
 
 from app.main.views.verify import activate_user
-from tests.conftest import normalize_spaces
 
 
 def test_should_return_verify_template(
@@ -96,10 +95,8 @@ def test_should_return_200_when_sms_code_is_wrong(
         _expected_status=200,
     )
 
-    assert len(page.select('.error-message')) == 1
-    assert normalize_spaces(page.select_one('.error-message').text) == (
-        'Code not found'
-    )
+    assert len(page.select('.govuk-error-message')) == 1
+    assert 'Code not found' in page.select_one('.govuk-error-message').text
 
 
 def test_verify_email_redirects_to_verify_if_token_valid(