From 71fd7f98a7a4cedc611e82b06b91569986bf5f01 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 2 Feb 2016 15:12:59 +0000 Subject: [PATCH 1/3] =?UTF-8?q?Reduce=20spacing=20between=20textbox=20and?= =?UTF-8?q?=20=E2=80=98I=20have=E2=80=99t=20rec=E2=80=A6=E2=80=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The grouping on this page was weird because these links were two far away from the associated textbox, and too close to the next textbox. This commit adds them as parameters to the textbox macro, which means their relative spacing can be controlled exactly, and thus reduced. --- app/assets/stylesheets/components/textbox.scss | 4 ++++ app/templates/components/textbox.html | 7 ++++++- app/templates/views/verify.html | 18 ++++++++++-------- 3 files changed, 20 insertions(+), 9 deletions(-) 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/templates/components/textbox.html b/app/templates/components/textbox.html index 918fc33d7..5185f910f 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) %}
{% endmacro %} diff --git a/app/templates/views/verify.html b/app/templates/views/verify.html index b04726c16..9c01b596f 100644 --- a/app/templates/views/verify.html +++ b/app/templates/views/verify.html @@ -15,14 +15,16 @@ GOV.UK Notify | Confirm email address and mobile number

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

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

- I haven’t received an email -

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

- I haven’t received a text -

+ {{ textbox( + form.email_code, + help_link=url_for('.check_and_resend_email_code'), + help_link_text='I haven’t received an email' + ) }} + {{ textbox( + form.sms_code, + help_link=url_for('.check_and_resend_text_code'), + help_link_text='I haven’t received a text' + ) }} {{ page_footer("Continue") }}
From 9c856af7899a6bcb41c86c96360dd439e4c3496f Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 2 Feb 2016 15:31:11 +0000 Subject: [PATCH 2/3] Allow textboxes to have width set, default to 2/3 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For entering 2 or 3fa codes, we want a textbox that’s just over 6 characters wide. To do this, a width can now be passed to the textbox macro. The possible widths are the same as those provided by GOV.UK Elements, and in the same format (eg 1-4, 1-2, 2-3…) This commit also adds a new width (5em) which is suitable for 3fa codes, and adds it to the verify page. --- app/assets/stylesheets/app.scss | 8 ++++++++ app/templates/components/textbox.html | 4 ++-- app/templates/views/verify.html | 2 ++ 3 files changed, 12 insertions(+), 2 deletions(-) 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/templates/components/textbox.html b/app/templates/components/textbox.html index 5185f910f..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, help_link=None, help_link_text=None) %} +{% 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 %} diff --git a/app/templates/views/verify.html b/app/templates/views/verify.html index 9c01b596f..7d6819779 100644 --- a/app/templates/views/verify.html +++ b/app/templates/views/verify.html @@ -17,11 +17,13 @@ GOV.UK Notify | Confirm email address and mobile number
{{ 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' ) }} From 335cc160fac44a7baf16875ebee076188d1ea922 Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Tue, 2 Feb 2016 15:41:54 +0000 Subject: [PATCH 3/3] Fix wording --- app/main/forms.py | 4 ++-- app/templates/views/verify.html | 10 +++++----- tests/app/main/views/test_verify.py | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) 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/views/verify.html b/app/templates/views/verify.html index 7d6819779..292c777f5 100644 --- a/app/templates/views/verify.html +++ b/app/templates/views/verify.html @@ -10,10 +10,10 @@ 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, @@ -25,7 +25,7 @@ GOV.UK Notify | Confirm email address and mobile number form.sms_code, width='5em', help_link=url_for('.check_and_resend_text_code'), - help_link_text='I haven’t received a text' + 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_,