From 427b01999c5171ac0d439e872d8645f5f3191b76 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 7 Aug 2020 13:46:15 +0100
Subject: [PATCH] Update UKMobileNumber & InternationalPhoneNumber

Changes those classes so they have the same
interface as a GOVUK field when instantiated and
render GovukTextInputField HTML.

Includes changes to templates that use this form
and associated tests.
---
 app/main/forms.py                             | 22 +++++++++++++++++++
 .../views/manage-users/edit-user-mobile.html  |  2 +-
 app/templates/views/register-from-invite.html |  5 ++++-
 .../views/register-from-org-invite.html       |  5 ++++-
 app/templates/views/register.html             |  5 ++++-
 app/templates/views/send-test.html            |  6 +----
 app/templates/views/text-not-received.html    |  2 +-
 7 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/app/main/forms.py b/app/main/forms.py
index 1b5e01944..30fee7b9d 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -151,6 +151,17 @@ def email_address(label='Email address', gov_user=True, required=True):
 
 
 class UKMobileNumber(TelField):
+    def __init__(self, label='', validators=None, param_extensions=None, **kwargs):
+        super(UKMobileNumber, self).__init__(label, validators, **kwargs)
+        self.param_extensions = param_extensions
+
+    # self.__call__ renders the HTML for the field by:
+    # 1. delegating to self.meta.render_field which
+    # 2. calls field.widget
+    # this bypasses that by making self.widget a method with the same interface as widget.__call__
+    def widget(self, field, param_extensions=None, **kwargs):
+        return govuk_field_widget(self, field, type="tel", param_extensions=param_extensions, **kwargs)
+
     def pre_validate(self, form):
         try:
             validate_phone_number(self.data)
@@ -159,6 +170,17 @@ class UKMobileNumber(TelField):
 
 
 class InternationalPhoneNumber(TelField):
+    def __init__(self, label='', validators=None, param_extensions=None, **kwargs):
+        super(InternationalPhoneNumber, self).__init__(label, validators=validators, **kwargs)
+        self.param_extensions = param_extensions
+
+    # self.__call__ renders the HTML for the field by:
+    # 1. delegating to self.meta.render_field which
+    # 2. calls field.widget
+    # this bypasses that by making self.widget a method with the same interface as widget.__call__
+    def widget(self, field, param_extensions=None, **kwargs):
+        return govuk_field_widget(self, field, type="tel", param_extensions=param_extensions, **kwargs)
+
     def pre_validate(self, form):
         try:
             if self.data:
diff --git a/app/templates/views/manage-users/edit-user-mobile.html b/app/templates/views/manage-users/edit-user-mobile.html
index ecf661ea8..c54126850 100644
--- a/app/templates/views/manage-users/edit-user-mobile.html
+++ b/app/templates/views/manage-users/edit-user-mobile.html
@@ -19,7 +19,7 @@
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-three-quarters">
       {% call form_wrapper(class="extra-tracking") %}
-        {{ textbox(form.mobile_number) }}
+        {{ form.mobile_number }}
         {{ page_footer('Save') }}
       {% endcall %}
     </div>
diff --git a/app/templates/views/register-from-invite.html b/app/templates/views/register-from-invite.html
index 9cf6f80ab..45942d215 100644
--- a/app/templates/views/register-from-invite.html
+++ b/app/templates/views/register-from-invite.html
@@ -28,7 +28,10 @@ Create an account
       {{ form.name(param_extensions={"classes": "govuk-!-width-three-quarters"}) }}
       {% if invited_user.auth_type == 'sms_auth' %}
         <div class="extra-tracking">
-          {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+          {{ form.mobile_number(param_extensions={
+              "classes": "govuk-!-width-three-quarters",
+              "hint": {"text": "We’ll send you a security code by text message"}
+          }) }}
         </div>
       {% endif %}
       {{ form.password(param_extensions={
diff --git a/app/templates/views/register-from-org-invite.html b/app/templates/views/register-from-org-invite.html
index 3831fc13f..3663cf28f 100644
--- a/app/templates/views/register-from-org-invite.html
+++ b/app/templates/views/register-from-org-invite.html
@@ -16,7 +16,10 @@ Create an account
     {% call form_wrapper() %}
       {{ form.name(param_extensions={"classes": "govuk-!-width-three-quarters"}) }}
       <div class="extra-tracking">
-        {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+        {{ form.mobile_number(param_extensions={
+            "classes": "govuk-!-width-three-quarters",
+            "hint": {"text": "We’ll send you a security code by text message"}
+        }) }}
       </div>
       {{ form.password(param_extensions={
           "classes": "govuk-!-width-three-quarters",
diff --git a/app/templates/views/register.html b/app/templates/views/register.html
index 734c8e23c..24bde5cbd 100644
--- a/app/templates/views/register.html
+++ b/app/templates/views/register.html
@@ -23,7 +23,10 @@ Create an account
         error_message_with_html=True
       ) }}
       <div class="extra-tracking">
-        {{ textbox(form.mobile_number, width='3-4', hint='We’ll send you a security code by text message') }}
+        {{ form.mobile_number(param_extensions={
+          "hint": {"text": "We’ll send you a security code by text message"},
+          "classes": "govuk-!-width-three-quarters"
+        }) }}
       </div>
       <input class="govuk-visually-hidden" aria-hidden="true" tabindex="-1" id="defeat-chrome-autocomplete">
       {{ form.password(param_extensions={"hint": {"text": "At least 8 characters"}, "classes": "govuk-!-width-three-quarters", "autocomplete": "new-password"}) }}
diff --git a/app/templates/views/send-test.html b/app/templates/views/send-test.html
index 26ea1c80d..12ebd05be 100644
--- a/app/templates/views/send-test.html
+++ b/app/templates/views/send-test.html
@@ -2,7 +2,6 @@
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/message-count-label.html" import recipient_count_label %}
-{% from "components/textbox.html" import textbox %}
 {% from "components/form.html" import form_wrapper %}
 
 {% block service_page_title %}
@@ -23,10 +22,7 @@
   ) %}
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-full {% if form.placeholder_value.label.text == 'phone number' %}extra-tracking{% endif %}">
-        {{ textbox(
-          form.placeholder_value,
-          width='1-1',
-        ) }}
+        {{ form.placeholder_value(param_extensions={"classes": "govuk-!-width-full"}) }}
       </div>
       {% if skip_link or link_to_upload %}
         <div class="govuk-grid-column-full">
diff --git a/app/templates/views/text-not-received.html b/app/templates/views/text-not-received.html
index 6f33e198d..9834845a4 100644
--- a/app/templates/views/text-not-received.html
+++ b/app/templates/views/text-not-received.html
@@ -16,7 +16,7 @@ Check your mobile number
     <p class="govuk-body">Check your mobile phone number is correct and then resend the security code.</p>
 
       {% call form_wrapper() %}
-        {{ textbox(form.mobile_number) }}
+        {{ form.mobile_number }}
         {{ page_footer("Resend security code") }}
       {% endcall %}
   </div>