diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss index 64db8e310..3fba6dad2 100644 --- a/app/assets/stylesheets/app.scss +++ b/app/assets/stylesheets/app.scss @@ -30,3 +30,11 @@ a:visited { color: $link-colour; } + +.form-control-5em { + width: 100%; + + @include media(tablet) { + width: 5em; + } +} diff --git a/app/assets/stylesheets/components/textbox.scss b/app/assets/stylesheets/components/textbox.scss index 1d2807709..224750586 100644 --- a/app/assets/stylesheets/components/textbox.scss +++ b/app/assets/stylesheets/components/textbox.scss @@ -81,3 +81,7 @@ } + +.textbox-help-link { + margin: 5px 0 0 0; +} diff --git a/app/main/forms.py b/app/main/forms.py index aec0fe2d2..188b5b8df 100644 --- a/app/main/forms.py +++ b/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')]) diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html index 918fc33d7..07f422c4a 100644 --- a/app/templates/components/textbox.html +++ b/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') %}
{{ 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 %} + + {% endif %}
{% endmacro %} diff --git a/app/templates/views/verify.html b/app/templates/views/verify.html index b04726c16..292c777f5 100644 --- a/app/templates/views/verify.html +++ b/app/templates/views/verify.html @@ -10,19 +10,23 @@ GOV.UK Notify | Confirm email address and mobile number
-

Activate your account

- -

We’ve sent you confirmation codes by email and text message. You need to enter both codes here.

- +

Enter the codes we’ve sent you

+

+ We’ve sent you confirmation codes by email and text message. +

- {{ textbox(form.email_code) }} -

- I haven’t received an email -

- {{ textbox(form.sms_code) }} -

- I haven’t received a text -

+ {{ 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") }}
diff --git a/tests/app/main/views/test_verify.py b/tests/app/main/views/test_verify.py index 48240e307..4b5d790da 100644 --- a/tests/app/main/views/test_verify.py +++ b/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_,