Merge pull request #142 from alphagov/clearer-verify-page

Clearer verify page

app/assets/stylesheets/app.scss

@@ -30,3 +30,11 @@
 a:visited {
   color: $link-colour;
 }
+
+.form-control-5em {
+  width: 100%;
+
+  @include media(tablet) {
+    width: 5em;
+  }
+}

app/assets/stylesheets/components/textbox.scss

@@ -81,3 +81,7 @@
 
 
 }
+
+.textbox-help-link {
+  margin: 5px 0 0 0;
+}

app/main/forms.py

@@ -62,7 +62,7 @@ def password(label='Create a password'):
 
 def sms_code():
     verify_code = '^\d{5}$'
-    return StringField('Text message confirmation code',
+    return StringField('Text message code',
                        validators=[DataRequired(message='Text message confirmation code can not be empty'),
                                    Regexp(regex=verify_code,
                                           message='Text message confirmation code must be 5 digits')])
@@ -70,7 +70,7 @@ def sms_code():
 
 def email_code():
     verify_code = '^\d{5}$'
-    return StringField("Email confirmation code",
+    return StringField("Email code",
                        validators=[DataRequired(message='Email confirmation code can not be empty'),
                                    Regexp(regex=verify_code, message='Email confirmation code must be 5 digits')])
 

app/templates/components/textbox.html

@@ -1,4 +1,4 @@
-{% macro textbox(field, hint=False, highlight_tags=False) %}
+{% 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 %}">
     <label class="form-label" for="{{ field.name }}">
       {{ field.label }}
@@ -14,8 +14,13 @@
       {% endif %}
     </label>
     {{ field(**{
-      'class': 'form-control textbox-highlight-textbox' if highlight_tags else 'form-control',
+      'class': 'form-control form-control-{} textbox-highlight-textbox'.format(width) if highlight_tags else 'form-control form-control-{}'.format(width),
       'data-module': 'highlight-tags' if highlight_tags else ''
     }) }}
+    {% if help_link and help_link_text %}
+      <p class="textbox-help-link">
+        <a href='{{ help_link }}'>{{ help_link_text }}</a>
+      </p>
+    {% endif %}
   </div>
 {% endmacro %}

app/templates/views/verify.html

@@ -10,19 +10,23 @@ GOV.UK Notify | Confirm email address and mobile number
 
 <div class="grid-row">
   <div class="column-two-thirds">
-    <h1 class="heading-large">Activate your account</h1>
-
-    <p>We’ve sent you confirmation codes by email and text message. You need to enter both codes here.</p>
-
+    <h1 class="heading-large">Enter the codes we’ve sent you</h1>
+    <p>
+      We’ve sent you confirmation codes by email and text message.
+    </p>
     <form autocomplete="off" method="post">
-      {{ textbox(form.email_code) }}
-      <p>
-        <a href="{{ url_for('.check_and_resend_email_code')}}">I haven’t received an email</a>
-      </p>
-      {{ textbox(form.sms_code) }}
-      <p>
-        <a href="{{ url_for('.check_and_resend_text_code') }}">I haven’t received a text</a></span>
-      </p>
+      {{ textbox(
+        form.email_code,
+        width='5em',
+        help_link=url_for('.check_and_resend_email_code'),
+        help_link_text='I haven’t received an email'
+      ) }}
+      {{ textbox(
+        form.sms_code,
+        width='5em',
+        help_link=url_for('.check_and_resend_text_code'),
+        help_link_text='I haven’t received a text message'
+      ) }}
       {{ page_footer("Continue") }}
     </form>
   </div>

tests/app/main/views/test_verify.py

@@ -18,7 +18,7 @@ def test_should_return_verify_template(app_,
             assert response.status_code == 200
             assert (
                 "We’ve sent you confirmation codes by email and text message."
-                " You need to enter both codes here.") in response.get_data(as_text=True)
+            ) in response.get_data(as_text=True)
 
 
 def test_should_redirect_to_add_service_when_code_are_correct(app_,