Add a WTForms-compatible textbox macro

This macro:
- accepts a WTForm form field as a parameter
- renders a form field which follows the GOV.UK Elements patterns, both visually
  and in markup terms

It then changes any page which uses either:
- the old, non-WTForms macro or
- the old, WTFforms `render_field` macro

…to use this new macro and removes both of the old ones.

It also adds the option to display hint text above the textbox.
This commit is contained in:
Chris Hill-Scott
2016-01-11 13:15:10 +00:00
parent dd242752c7
commit e8fe8c50ba
21 changed files with 140 additions and 105 deletions

View File

@@ -1,5 +1,5 @@
{% extends "admin_template.html" %}
{% from "components/form-field.html" import render_field %}
{% from "components/textbox.html" import textbox %}
{% block page_title %}
GOV.UK Notify | Set up service
@@ -17,9 +17,8 @@ GOV.UK Notify | Set up service
<li>as your email sender name</li>
</ul>
<form autocomplete="off" action="" method="post">
{{ form.hidden_tag() }}
{{ render_field(form.service_name, class='form-control-2-3') }}
<form autocomplete="off" method="post">
{{ textbox(form.service_name) }}
<p>
<button class="button" href="dashboard" role="button">Continue</button>

View File

@@ -11,8 +11,8 @@ GOV.UK Notify | Edit template
<h1 class="heading-xlarge">{{ h1 }}</h1>
<form method="post">
{{ textbox(name='template_name', label='Template name', value=template_name) }}
{{ textbox(name='template_body', label='Message', small=False, value=template_body, highlight_tags=True) }}
{{ textbox(form.template_name) }}
{{ textbox(form.template_body, highlight_tags=True) }}
{{ page_footer(
'Save and continue',
back_link=url_for('.dashboard'),

View File

@@ -1,4 +1,5 @@
{% extends "admin_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
{% block page_title %}
@@ -14,13 +15,10 @@ GOV.UK Notify
<p>Check your email address is correct and then resend the confirmation code.</p>
<p>
</p>
<form autocomplete="off" action="" method="post">
{{ form.hidden_tag() }}
{{ render_field(form.email_address, class='form-control-2-3') }}
<span class="font-xsmall">Your email address must end in .gov.uk</span>
<p>
</p>
{{ page_footer('Resend confirmation code') }}
<form autocomplete="off" method="post">
{{ textbox(form.email_address) }}
<span class="font-xsmall">Your email address must end in .gov.uk</span>
{{ page_footer('Resend confirmation code') }}
</form>
</div>
</div>

View File

@@ -1,4 +1,6 @@
{% extends "admin_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
{% block page_title %}
GOV.UK Notify
@@ -12,13 +14,11 @@ GOV.UK Notify
<p>If you have forgotten your password, we can send you an email to create a new password.</p>
<form autocomplete="off" action="" method="post">
{{ form.hidden_tag() }}
{{ render_field(form.email_address, class='form-control-2-3') }}
<p>
<button class="button" role="button">Send email</button>
</p>
<form autocomplete="off" method="post">
{{ textbox(form.email_address) }}
{{ page_footer("Send email") }}
</form>
</div>
</div>

View File

@@ -1,4 +1,6 @@
{% extends "admin_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
{% block page_title %}
GOV.UK Notify
@@ -13,17 +15,9 @@ GOV.UK Notify
<p> You can now create a new password for your account.</p>
<form action="" autocomplete="off" method="post">
{{ form.hidden_tag() }}
<p>
{{ render_field(form.new_password, class="form-control-1-4", type="password") }}
<span class="font-xsmall">Your password must have at least 10 characters</span>
</p>
<p>
<button class="button" role="button">Continue</button>
</p>
<form method="post" autocomplete="off">
{{ textbox(form.new_password, hint="Your password must have at least 10 characters") }}
{{ page_footer("Continue") }}
</form>
{% else %}
Message about email address does not exist. Some one needs to figure out the words here.

View File

@@ -1,4 +1,5 @@
{% extends "admin_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
{% block page_title %}
@@ -16,12 +17,10 @@ GOV.UK Notify | Create an account
<form autocomplete="off" action="" method="post">
{{ form.hidden_tag() }}
{{ render_field(form.name, class='form-control-2-3') }}
{{ render_field(form.email_address, class='form-control-2-3') }}
<span class="font-xsmall">Your email address must end in .gov.uk</span>
{{ render_field(form.mobile_number, class='form-control-2-3') }}
{{ render_field(form.password, class='form-control-2-3') }}
<span class="font-xsmall">Your password must have at least 10 characters</span></label>
{{ textbox(form.name) }}
{{ textbox(form.email_address, hint="Your email address must end in .gov.uk") }}
{{ textbox(form.mobile_number) }}
{{ textbox(form.password, hint="Your password must have at least 10 characters") }}
{{ page_footer("Continue") }}
</form>
</div>

View File

@@ -14,7 +14,7 @@ GOV.UK Notify | Service settings
<div class="column-three-quarters">
<form method="post">
{{ textbox('new_name', 'Enter your password', password=True) }}
{{ textbox(form.password) }}
{{ page_footer(
'Confirm',
destructive=destructive,

View File

@@ -13,12 +13,15 @@ GOV.UK Notify | Service settings
<div class="grid-row">
<div class="column-three-quarters">
<p>
Your service name ({{ service.name }}) is included in every sent notification
</p>
<p>Users will see your service name:</p>
<ul class="list-bullet">
<li>at the start of every text message, eg Vehicle tax: we received your payment, thank you</li>
<li>as your email sender name</li>
</ul>
<form method="post">
{{ textbox('new_name', 'New name', value=service.name) }}
{{ textbox(form.service_name) }}
{{ page_footer(
'Save',
back_link=url_for('.service_settings')

View File

@@ -1,4 +1,5 @@
{% extends "admin_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
{% block page_title %}
@@ -13,14 +14,10 @@ Sign in
<p>If you do not have an account, you can <a href="register">register for one now</a>.</p>
<form autocomplete="off" action="" method="post">
{{ form.hidden_tag() }}
{{ render_field(form.email_address, class='form-control-2-3') }}
{{ render_field(form.password, class='form-control-2-3') }}
<p>
<span class="font-xsmall"><a href="{{url_for('main.forgot_password')}}">Forgotten password?</a></span>
</p>
{{ page_footer("Continue") }}
<form autocomplete="off" method="post">
{{ textbox(form.email_address) }}
{{ textbox(form.password) }}
{{ page_footer("Continue", back_link="#", back_link_text="Forgotten password?") }}
</form>
</div>
</div>

View File

@@ -148,15 +148,8 @@
{% endcall %}
<h2 class="heading-large">Textbox</h2>
{{ textbox('name', 'Username') }}
{{ textbox('password', 'Password', password=True) }}
{{ textbox(
'message',
"Message",
value="Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax",
small=False,
highlight_tags=True
) }}
{{ textbox(form.username) }}
{{ textbox(form.password) }}
{{ textbox(form.message, highlight_tags=True) }}
{% endblock %}

View File

@@ -1,4 +1,5 @@
{% extends "admin_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
{% block page_title %}
@@ -13,9 +14,8 @@ GOV.UK Notify
<p>Check your mobile phone number is correct and then resend the confirmation code.</p>
<form autocomplete="off" action="" method="post">
{{ form.hidden_tag() }}
{{ render_field(form.mobile_number, class='form-control-2-3') }}
<form autocomplete="off" method="post">
{{ textbox(form.mobile_number) }}
{{ page_footer("Resend confirmation code") }}
</form>
</div>

View File

@@ -1,4 +1,5 @@
{% extends "admin_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
{% block page_title %}
@@ -14,9 +15,8 @@ GOV.UK Notify | Text verification
<p>We've sent you a text message with a verification code.</p>
<form autocomplete="off" action="" method="post">
{{ form.hidden_tag() }}
{{ render_field(form.sms_code, class='form-control-1-4') }}
<form autocomplete="off" method="post">
{{ textbox(form.sms_code) }}
<span class="font-xsmall"><a href="{{ url_for('.verification_code_not_received') }}">I haven't received a text</a></span>
{{ page_footer("Continue") }}
</form>

View File

@@ -1,4 +1,5 @@
{% extends "admin_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-footer.html" import page_footer %}
{% block page_title %}
@@ -13,11 +14,10 @@ GOV.UK Notify | Confirm email address and mobile number
<p>We've sent you confirmation codes by email and text message. You need to enter both codes here.</p>
<form autocomplete="off" action="" method="post">
{{ form.hidden_tag() }}
{{ render_field(form.email_code, class='form-control-1-4') }}
<form autocomplete="off" method="post">
{{ textbox(form.email_code) }}
<span class="font-xsmall"><a href="{{ url_for('.check_and_resend_email_code')}}">I haven't received an email</a></span>
{{ render_field(form.sms_code, class='form-control-1-4') }}
{{ textbox(form.sms_code) }}
<span class="font-xsmall"><a href="{{ url_for('.check_and_resend_text_code') }}">I haven't received a text</a></span>
{{ page_footer("Continue") }}
</form>