From e8fe8c50ba5e805b20eb8ef3109ccab799388fbe Mon Sep 17 00:00:00 2001 From: Chris Hill-Scott Date: Mon, 11 Jan 2016 13:15:10 +0000 Subject: [PATCH] Add a WTForms-compatible textbox macro MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- app/assets/stylesheets/main.scss | 1 + app/main/forms.py | 15 ++++++++- app/main/views/service_settings.py | 26 ++++++++++++--- app/main/views/styleguide.py | 19 ++++++++++- app/main/views/templates.py | 18 ++++++++--- app/templates/admin_template.html | 1 - app/templates/components/form-field.html | 12 ------- app/templates/components/textbox.html | 32 +++++++++++-------- app/templates/views/add-service.html | 7 ++-- app/templates/views/edit-template.html | 4 +-- app/templates/views/email-not-received.html | 12 +++---- app/templates/views/forgot-password.html | 12 +++---- app/templates/views/new-password.html | 16 +++------- app/templates/views/register.html | 11 +++---- .../views/service-settings/confirm.html | 2 +- .../views/service-settings/name.html | 11 ++++--- app/templates/views/signin.html | 13 +++----- app/templates/views/styleguide.html | 13 ++------ app/templates/views/text-not-received.html | 6 ++-- app/templates/views/two-factor.html | 6 ++-- app/templates/views/verify.html | 8 ++--- 21 files changed, 140 insertions(+), 105 deletions(-) delete mode 100644 app/templates/components/form-field.html diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss index 7a0a95feb..bcd47c542 100644 --- a/app/assets/stylesheets/main.scss +++ b/app/assets/stylesheets/main.scss @@ -22,6 +22,7 @@ @import '../govuk_elements/public/sass/elements/forms'; @import '../govuk_elements/public/sass/elements/forms/form-validation'; @import '../govuk_elements/public/sass/elements/forms/form-block-labels'; +@import '../govuk_elements/public/sass/elements/forms/form-validation'; @import '../govuk_elements/public/sass/elements/icons'; @import '../govuk_elements/public/sass/elements/layout'; @import '../govuk_elements/public/sass/elements/lists'; diff --git a/app/main/forms.py b/app/main/forms.py index e06595ba4..a6315928d 100644 --- a/app/main/forms.py +++ b/app/main/forms.py @@ -1,5 +1,5 @@ from flask_wtf import Form -from wtforms import StringField, PasswordField, ValidationError +from wtforms import StringField, PasswordField, ValidationError, TextAreaField from wtforms.validators import DataRequired, Email, Length, Regexp from app.main.validators import Blacklist, ValidateUserCodes @@ -121,6 +121,19 @@ class AddServiceForm(Form): raise ValidationError('Service name already exists') +class ServiceNameForm(Form): + service_name = StringField(u'New name') + + +class ConfirmPasswordForm(Form): + password = PasswordField(u'Enter password') + + +class TemplateForm(Form): + template_name = StringField(u'Template name') + template_body = TextAreaField(u'Message') + + class ForgotPasswordForm(Form): email_address = email_address() diff --git a/app/main/views/service_settings.py b/app/main/views/service_settings.py index 6553a876e..b031fd447 100644 --- a/app/main/views/service_settings.py +++ b/app/main/views/service_settings.py @@ -2,6 +2,7 @@ from flask import render_template, redirect, request, url_for, abort from flask_login import login_required from app.main import main +from app.main.forms import ConfirmPasswordForm, ServiceNameForm service = { 'name': 'Service name', @@ -20,10 +21,15 @@ def service_settings(): @main.route("/service-settings/name", methods=['GET', 'POST']) def name(): + + form = ServiceNameForm() + form.service_name.data = 'Service name' + if request.method == 'GET': return render_template( 'views/service-settings/name.html', - service=service + service=service, + form=form ) elif request.method == 'POST': return redirect(url_for('.confirm_name_change')) @@ -31,10 +37,14 @@ def name(): @main.route("/service-settings/name/confirm", methods=['GET', 'POST']) def confirm_name_change(): + + form = ConfirmPasswordForm() + if request.method == 'GET': return render_template( 'views/service-settings/confirm.html', - heading='Change your service name' + heading='Change your service name', + form=form ) elif request.method == 'POST': return redirect(url_for('.service_settings')) @@ -64,11 +74,15 @@ def status(): @main.route("/service-settings/status/confirm", methods=['GET', 'POST']) def confirm_status_change(): + + form = ConfirmPasswordForm() + if request.method == 'GET': return render_template( 'views/service-settings/confirm.html', heading='Turn off all outgoing notifications', - destructive=True + destructive=True, + form=form ) elif request.method == 'POST': return redirect(url_for('.service_settings')) @@ -87,11 +101,15 @@ def delete(): @main.route("/service-settings/delete/confirm", methods=['GET', 'POST']) def confirm_delete(): + + form = ConfirmPasswordForm() + if request.method == 'GET': return render_template( 'views/service-settings/confirm.html', heading='Delete this service from Notify', - destructive=True + destructive=True, + form=form ) elif request.method == 'POST': return redirect(url_for('.dashboard')) diff --git a/app/main/views/styleguide.py b/app/main/views/styleguide.py index 516a39b6c..f778f9dcf 100644 --- a/app/main/views/styleguide.py +++ b/app/main/views/styleguide.py @@ -1,7 +1,24 @@ from flask import render_template +from flask_wtf import Form +from wtforms import StringField, PasswordField, TextAreaField, validators from app.main import main @main.route('/_styleguide') def styleguide(): - return render_template('views/styleguide.html') + + class FormExamples(Form): + username = StringField(u'Username') + password = PasswordField(u'Password', [validators.required()]) + message = TextAreaField(u'Message') + + form = FormExamples() + + form.message.data = "Your vehicle tax for ((registration number)) is due on ((date)). Renew online at www.gov.uk/vehicle-tax" # noqa + + form.validate() + + return render_template( + 'views/styleguide.html', + form=form + ) diff --git a/app/main/views/templates.py b/app/main/views/templates.py index ff80cb353..2d7d38e85 100644 --- a/app/main/views/templates.py +++ b/app/main/views/templates.py @@ -1,6 +1,7 @@ from flask import request, render_template, redirect, url_for from app.main import main +from app.main.forms import TemplateForm @main.route("/templates") @@ -10,12 +11,17 @@ def manage_templates(): @main.route("/templates/template", methods=['GET', 'POST']) def add_template(): + + form = TemplateForm() + + form.template_name.data = 'Reminder' + form.template_body.data = 'Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)). Tax your vehicle at www.gov.uk/vehicle-tax' # noqa + if request.method == 'GET': return render_template( 'views/edit-template.html', - template_name='Reminder', - template_body='Vehicle tax: Your vehicle tax for ((registration number)) expires on ((date)). Tax your vehicle at www.gov.uk/vehicle-tax', # noqa - h1='Edit template' + h1='Edit template', + form=form ) elif request.method == 'POST': return redirect(url_for('.manage_templates')) @@ -23,10 +29,14 @@ def add_template(): @main.route("/templates/template/add", methods=['GET', 'POST']) def edit_template(): + + form = TemplateForm() + if request.method == 'GET': return render_template( 'views/edit-template.html', - h1='Add template' + h1='Add template', + form=form ) elif request.method == 'POST': return redirect(url_for('.manage_templates')) diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html index a03e47612..c127da3f7 100644 --- a/app/templates/admin_template.html +++ b/app/templates/admin_template.html @@ -1,4 +1,3 @@ -{%- from "components/form-field.html" import render_field %} {% extends "govuk_template.html" %} {% block head %} diff --git a/app/templates/components/form-field.html b/app/templates/components/form-field.html deleted file mode 100644 index 691b4c579..000000000 --- a/app/templates/components/form-field.html +++ /dev/null @@ -1,12 +0,0 @@ -{% macro render_field(field) %} -
{{ field.label }} -
{{ field(**kwargs)|safe }} - {% if field.errors %} - - {% endif %} -
-{% endmacro %} diff --git a/app/templates/components/textbox.html b/app/templates/components/textbox.html index 7a74f0985..918fc33d7 100644 --- a/app/templates/components/textbox.html +++ b/app/templates/components/textbox.html @@ -1,15 +1,21 @@ -{% macro textbox(name, label, value='', small=True, highlight_tags=False, password=False) %} -
- - {% if small %} - - {% else %} - - {% endif %} +{% macro textbox(field, hint=False, highlight_tags=False) %} +
+ + {{ field(**{ + 'class': 'form-control textbox-highlight-textbox' if highlight_tags else 'form-control', + 'data-module': 'highlight-tags' if highlight_tags else '' + }) }}
{% endmacro %} diff --git a/app/templates/views/add-service.html b/app/templates/views/add-service.html index 2dff9d9a2..1e5784b58 100644 --- a/app/templates/views/add-service.html +++ b/app/templates/views/add-service.html @@ -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
  • as your email sender name
    • -
    - {{ form.hidden_tag() }} - {{ render_field(form.service_name, class='form-control-2-3') }} + + {{ textbox(form.service_name) }}

    diff --git a/app/templates/views/edit-template.html b/app/templates/views/edit-template.html index 46615c78e..30ab1ba95 100644 --- a/app/templates/views/edit-template.html +++ b/app/templates/views/edit-template.html @@ -11,8 +11,8 @@ GOV.UK Notify | Edit template

    {{ h1 }}

    - {{ 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'), diff --git a/app/templates/views/email-not-received.html b/app/templates/views/email-not-received.html index 9f7960383..0ef40ffce 100644 --- a/app/templates/views/email-not-received.html +++ b/app/templates/views/email-not-received.html @@ -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

    Check your email address is correct and then resend the confirmation code.

    - - {{ form.hidden_tag() }} - {{ render_field(form.email_address, class='form-control-2-3') }} - Your email address must end in .gov.uk -

    -

    - {{ page_footer('Resend confirmation code') }} + + {{ textbox(form.email_address) }} + Your email address must end in .gov.uk + {{ page_footer('Resend confirmation code') }}
    diff --git a/app/templates/views/forgot-password.html b/app/templates/views/forgot-password.html index 4d36f2a86..c4062e6b9 100644 --- a/app/templates/views/forgot-password.html +++ b/app/templates/views/forgot-password.html @@ -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

    If you have forgotten your password, we can send you an email to create a new password.

    -
    - {{ form.hidden_tag() }} - {{ render_field(form.email_address, class='form-control-2-3') }} -

    - -

    + + {{ textbox(form.email_address) }} + {{ page_footer("Send email") }}
    + diff --git a/app/templates/views/new-password.html b/app/templates/views/new-password.html index 580325410..16c098cb9 100644 --- a/app/templates/views/new-password.html +++ b/app/templates/views/new-password.html @@ -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

    You can now create a new password for your account.

    -
    - {{ form.hidden_tag() }} -

    - {{ render_field(form.new_password, class="form-control-1-4", type="password") }} - Your password must have at least 10 characters -

    - -

    - -

    - + + {{ textbox(form.new_password, hint="Your password must have at least 10 characters") }} + {{ page_footer("Continue") }}
    {% else %} Message about email address does not exist. Some one needs to figure out the words here. diff --git a/app/templates/views/register.html b/app/templates/views/register.html index f640ac116..9bb45a3a8 100644 --- a/app/templates/views/register.html +++ b/app/templates/views/register.html @@ -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.hidden_tag() }} - {{ render_field(form.name, class='form-control-2-3') }} - {{ render_field(form.email_address, class='form-control-2-3') }} - Your email address must end in .gov.uk - {{ render_field(form.mobile_number, class='form-control-2-3') }} - {{ render_field(form.password, class='form-control-2-3') }} - Your password must have at least 10 characters + {{ 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") }}
    diff --git a/app/templates/views/service-settings/confirm.html b/app/templates/views/service-settings/confirm.html index fe0cd05c9..20206724c 100644 --- a/app/templates/views/service-settings/confirm.html +++ b/app/templates/views/service-settings/confirm.html @@ -14,7 +14,7 @@ GOV.UK Notify | Service settings
    - {{ textbox('new_name', 'Enter your password', password=True) }} + {{ textbox(form.password) }} {{ page_footer( 'Confirm', destructive=destructive, diff --git a/app/templates/views/service-settings/name.html b/app/templates/views/service-settings/name.html index a86fdba2d..91de3d7ca 100644 --- a/app/templates/views/service-settings/name.html +++ b/app/templates/views/service-settings/name.html @@ -13,12 +13,15 @@ GOV.UK Notify | Service settings
    -

    - Your service name ({{ service.name }}) is included in every sent notification -

    +

    Users will see your service name:

    + +
      +
    • at the start of every text message, eg ‘Vehicle tax: we received your payment, thank you’
      • +
    • as your email sender name
      • +
    - {{ textbox('new_name', 'New name', value=service.name) }} + {{ textbox(form.service_name) }} {{ page_footer( 'Save', back_link=url_for('.service_settings') diff --git a/app/templates/views/signin.html b/app/templates/views/signin.html index 870b61755..fe6210b0b 100644 --- a/app/templates/views/signin.html +++ b/app/templates/views/signin.html @@ -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

    If you do not have an account, you can register for one now.

    - - {{ form.hidden_tag() }} - {{ render_field(form.email_address, class='form-control-2-3') }} - {{ render_field(form.password, class='form-control-2-3') }} -

    - Forgotten password? -

    - {{ page_footer("Continue") }} + + {{ textbox(form.email_address) }} + {{ textbox(form.password) }} + {{ page_footer("Continue", back_link="#", back_link_text="Forgotten password?") }}
    diff --git a/app/templates/views/styleguide.html b/app/templates/views/styleguide.html index fadbf0a4c..0caefd563 100644 --- a/app/templates/views/styleguide.html +++ b/app/templates/views/styleguide.html @@ -148,15 +148,8 @@ {% endcall %}

    Textbox

    - - {{ 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 %} diff --git a/app/templates/views/text-not-received.html b/app/templates/views/text-not-received.html index 529193617..f11a051fc 100644 --- a/app/templates/views/text-not-received.html +++ b/app/templates/views/text-not-received.html @@ -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

    Check your mobile phone number is correct and then resend the confirmation code.

    -
    - {{ form.hidden_tag() }} - {{ render_field(form.mobile_number, class='form-control-2-3') }} + + {{ textbox(form.mobile_number) }} {{ page_footer("Resend confirmation code") }}
    diff --git a/app/templates/views/two-factor.html b/app/templates/views/two-factor.html index 46724c617..44cd98739 100644 --- a/app/templates/views/two-factor.html +++ b/app/templates/views/two-factor.html @@ -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

    We've sent you a text message with a verification code.

    -
    - {{ form.hidden_tag() }} - {{ render_field(form.sms_code, class='form-control-1-4') }} + + {{ textbox(form.sms_code) }} I haven't received a text {{ page_footer("Continue") }}
    diff --git a/app/templates/views/verify.html b/app/templates/views/verify.html index 94e594d1a..7c4c41180 100644 --- a/app/templates/views/verify.html +++ b/app/templates/views/verify.html @@ -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

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

    -
    - {{ form.hidden_tag() }} - {{ render_field(form.email_code, class='form-control-1-4') }} + + {{ textbox(form.email_code) }} I haven't received an email - {{ render_field(form.sms_code, class='form-control-1-4') }} + {{ textbox(form.sms_code) }} I haven't received a text {{ page_footer("Continue") }}