Merge pull request #94 from LandRegistry/govuk-frontend-54

GOV.UK Frontend v5.4.0
LandRegistry · May 29, 2024 · 7482fbc · 7482fbc
2 parents 57629de + 7aa62c2
commit 7482fbc
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 53 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,14 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased](https://github.com/LandRegistry/govuk-frontend-wtf/compare/3.0.0..main)
+## [Unreleased](https://github.com/LandRegistry/govuk-frontend-wtf/compare/3.1.0..main)
+
+## [3.1.0](https://github.com/LandRegistry/govuk-frontend-wtf/releases/tag/3.1.0) - xx/xx/2024
+
+### Added
+
+- [GOV.UK Frontend v5.4.0](https://github.com/alphagov/govuk-frontend/releases/tag/v5.4.0) support
+- Use new GOV.UK password input component for PasswordInput fields
 
 ## [3.0.0](https://github.com/LandRegistry/govuk-frontend-wtf/releases/tag/3.0.0) - 13/02/2024
 

diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # GOV.UK Frontend WTForms Widgets
 
 [![PyPI version](https://badge.fury.io/py/govuk-frontend-wtf.svg)](https://pypi.org/project/govuk-frontend-wtf/)
-![govuk-frontend 5.1.0](https://img.shields.io/badge/govuk--frontend%20version-5.1.0-005EA5?logo=gov.uk&style=flat)
+![govuk-frontend 5.4.0](https://img.shields.io/badge/govuk--frontend%20version-5.4.0-005EA5?logo=gov.uk&style=flat)
 [![Python package](https://github.com/LandRegistry/govuk-frontend-wtf/actions/workflows/python-package.yml/badge.svg)](https://github.com/LandRegistry/govuk-frontend-wtf/actions/workflows/python-package.yml)
 
 **GOV.UK Frontend WTForms is a [community tool](https://design-system.service.gov.uk/community/resources-and-tools/) of the [GOV.UK Design System](https://design-system.service.gov.uk/). The Design System team is not responsible for it and cannot support you with using it. Contact the [maintainers](#contributors) directly if you need [help](#support) or you want to request a feature.**

diff --git a/govuk_frontend_wtf/templates/password.html b/govuk_frontend_wtf/templates/password.html
@@ -0,0 +1,2 @@
+{% from 'govuk_frontend_jinja/components/password-input/macro.html' import govukPasswordInput %}
+{{ govukPasswordInput(params) }}
diff --git a/govuk_frontend_wtf/wtforms_widgets.py b/govuk_frontend_wtf/wtforms_widgets.py
@@ -37,17 +37,13 @@ class GovTextInput(GovInput, TextInput):
     input_type = "text"
 
 
-class GovPasswordInput(GovInput, PasswordInput):
-    """Render a password input.
+class GovPasswordInput(GovFormBase, PasswordInput):
+    """Render a password input."""
 
-    For security purposes, this field will not reproduce the value on a form
-    submit by default. To have the value filled in, set `hide_value` to
-    `False`.
-    """
+    template = "govuk_frontend_wtf/password.html"
 
     def __call__(self, field, **kwargs):
-        if self.hide_value:
-            kwargs["value"] = ""
+        kwargs.setdefault("id", field.id)
         return super().__call__(field, **kwargs)
 
 

diff --git a/setup.py b/setup.py
@@ -13,7 +13,7 @@
 
 setuptools.setup(
     name="govuk-frontend-wtf",
-    version="3.0.0",
+    version="3.1.0",
     author="Matt Shaw",
     author_email="matthew.shaw@landregistry.gov.uk",
     description="GOV.UK Frontend WTForms Widgets",

diff --git a/tests/fixtures/wtf_widgets_data.yaml b/tests/fixtures/wtf_widgets_data.yaml
@@ -4,7 +4,7 @@ TestStringField:
   tests:
     test_empty_get:
       expected_output:
-        - <input class="govuk-input" id="string_field" name="string_field" type="text" aria-describedby="string_field-hint" required="required">
+        - <input class="govuk-input" id="string_field" name="string_field" type="text" value="" aria-describedby="string_field-hint" required="required">
         - <label class="govuk-label" for="string_field">\s*StringField\s*</label>
         - <div id="string_field-hint" class="govuk-hint">\s*StringFieldHint\s*</div>
     test_output_sanitized:
@@ -42,7 +42,7 @@ TestStringFieldId:
   tests:
     test_empty_get:
       expected_output:
-        - <input class="govuk-input" id="custom-id" name="string_field_id" type="text" aria-describedby="custom-id-hint" required="required">
+        - <input class="govuk-input" id="custom-id" name="string_field_id" type="text" value="" aria-describedby="custom-id-hint" required="required">
         - <label class="govuk-label" for="custom-id">\s*StringField\s*</label>
         - <div id="custom-id-hint" class="govuk-hint">\s*StringFieldHint\s*</div>
     test_output_sanitized:
@@ -157,7 +157,7 @@ TestEmailField:
       expected_output:
         - <div id="email_field-hint" class="govuk-hint">\s*EmailFieldHint\s*</div>
         - <label class="govuk-label" for="email_field">\s*EmailField\s*</label>
-        - <input class="govuk-input" id="email_field" name="email_field" type="email" spellcheck="false" aria-describedby="email_field-hint" autocomplete="email" required="required">
+        - <input class="govuk-input" id="email_field" name="email_field" type="email" spellcheck="false" value="" aria-describedby="email_field-hint" autocomplete="email" required="required">
     test_output_sanitized:
       request:
         method: post
@@ -193,7 +193,7 @@ TestFloatField:
   tests:
     test_empty_get:
       expected_output:
-        - <input class="govuk-input" id="float_field" name="float_field" type="text" aria-describedby="float_field-hint" required="required">
+        - <input class="govuk-input" id="float_field" name="float_field" type="text" value="" aria-describedby="float_field-hint" required="required">
         - <label class="govuk-label" for="float_field">\s*FloatField\s*</label>
         - <div id="float_field-hint" class="govuk-hint">\s*FloatFieldHint\s*</div>
     test_output_sanitized:
@@ -231,7 +231,7 @@ TestIntegerField:
   tests:
     test_empty_get:
       expected_output:
-        - <input class="govuk-input" id="integer_field" name="integer_field" type="text" aria-describedby="integer_field-hint" required="required">
+        - <input class="govuk-input" id="integer_field" name="integer_field" type="text" value="" aria-describedby="integer_field-hint" required="required">
         - <label class="govuk-label" for="integer_field">\s*IntegerField\s*</label>
         - <div id="integer_field-hint" class="govuk-hint">\s*IntegerFieldHint\s*</div>
     test_output_sanitized:
@@ -269,7 +269,7 @@ TestDecimalField:
   tests:
     test_empty_get:
       expected_output:
-        - <input class="govuk-input" id="decimal_field" name="decimal_field" type="text" aria-describedby="decimal_field-hint" required="required">
+        - <input class="govuk-input" id="decimal_field" name="decimal_field" type="text" value="" aria-describedby="decimal_field-hint" required="required">
         - <label class="govuk-label" for="decimal_field">\s*DecimalField\s*</label>
         - <div id="decimal_field-hint" class="govuk-hint">\s*DecimalFieldHint\s*</div>
     test_output_sanitized:
@@ -381,7 +381,7 @@ TestCharacterCountField:
         - <textarea class="govuk-textarea govuk-textarea--error govuk-js-character-count" id="charactercount_field" name="charactercount_field" rows="5" aria-describedby="charactercount_field-info charactercount_field-hint charactercount_field-error" required="required"></textarea>
         - <label class="govuk-label" for="charactercount_field">\s*CharacterCountField\s*</label>
         - <p id="charactercount_field-error" class="govuk-error-message">\s*<span class="govuk-visually-hidden">\s*Error:\s*</span>\s*CharacterCountField is required\s*</p>
-        - <div class="govuk-form-group govuk-form-group--error">
+        - <div class="govuk-form-group govuk-form-group--error govuk-character-count" data-module="govuk-character-count" data-maxlength="200">
         - <div id="charactercount_field-hint" class="govuk-hint">\s*CharacterCountFieldHint\s*</div>
         - <div id="charactercount_field-info" class="govuk-hint govuk-character-count__message">\s*You can enter up to 200 characters\s*</div>
 
@@ -696,7 +696,7 @@ TestNestedForm:
       expected_output:
         - <div class="govuk-form-group">
         - <label for="nested_form-0">Nested Form-0</label>
-        - <input class="govuk-input" id="nested_form-0-string_field" name="nested_form-0-string_field" type="text" aria-describedby="nested_form-0-string_field-hint" required="required">
+        - <input class="govuk-input" id="nested_form-0-string_field" name="nested_form-0-string_field" type="text" value="" aria-describedby="nested_form-0-string_field-hint" required="required">
         - <div id="nested_form-0-string_field-hint" class="govuk-hint">\s*StringFieldHint\s*</div>
     test_output_sanitized:
       request:
@@ -720,25 +720,29 @@ TestSubmitButton:
         - <button value="y" type="submit" name="submit_button" class="govuk-button" data-module="govuk-button" id="submit_button">
 
 TestPasswordField:
-  template: "{{ form.password_field(params={'spellcheck': false}) }}"
+  template: "{{ form.password_field }}"
   tests:
     test_empty_get:
       expected_output:
-        - <div class="govuk-form-group">
+        - <div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
         - <label class="govuk-label" for="password_field">\s*PasswordField\s*</label>
-        - <input class="govuk-input" id="password_field" name="password_field" type="password" spellcheck="false" aria-describedby="password_field-hint" required="required">
         - <div id="password_field-hint" class="govuk-hint">\s*PasswordFieldHint\s*</div>
+        - <div class="govuk-input__wrapper govuk-password-input__wrapper">
+        - <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password_field" name="password_field" type="password" spellcheck="false" aria-describedby="password_field-hint" autocomplete="current-password" autocapitalize="none">
+        - <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password_field" aria-label="Show password" hidden>\s*Show\s*</button>
     test_output_sanitized:
       request:
         method: post
         data:
           password_field: <script>alert("Hello")</script>
           password_retype_field: <script>alert("Hello")</script>
       expected_output:
-        # No error here - the data will merely have been accepted as a valid password
-        # But we still want to ensure the value hasn't made it into the html unsanitized
-        - <input class="govuk-input" id="password_field" name="password_field" type="password" spellcheck="false" aria-describedby="password_field-hint" required="required">
+        - <div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
+        - <label class="govuk-label" for="password_field">\s*PasswordField\s*</label>
         - <div id="password_field-hint" class="govuk-hint">\s*PasswordFieldHint\s*</div>
+        - <div class="govuk-input__wrapper govuk-password-input__wrapper">
+        - <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password_field" name="password_field" type="password" spellcheck="false" aria-describedby="password_field-hint" autocomplete="current-password" autocapitalize="none">
+        - <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password_field" aria-label="Show password" hidden>\s*Show\s*</button>
       not_expected_output:
         - <script>alert("Hello")</script>
     test_valid_post:
@@ -748,24 +752,26 @@ TestPasswordField:
           password_field: foo
           password_retype_field: foo
       expected_output:
-        - <div class="govuk-form-group">
+        - <div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
         - <label class="govuk-label" for="password_field">\s*PasswordField\s*</label>
-        # Ensure that passwords are not represented in the output for security reasons
-        - <input class="govuk-input" id="password_field" name="password_field" type="password" spellcheck="false" aria-describedby="password_field-hint" required="required">
         - <div id="password_field-hint" class="govuk-hint">\s*PasswordFieldHint\s*</div>
+        - <div class="govuk-input__wrapper govuk-password-input__wrapper">
+        - <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password_field" name="password_field" type="password" spellcheck="false" aria-describedby="password_field-hint" autocomplete="current-password" autocapitalize="none">
+        - <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password_field" aria-label="Show password" hidden>\s*Show\s*</button>
     test_invalid_post:
       request:
         method: post
         data:
           password_field: foo
           password_retype_field: bar
       expected_output:
-        - <div class="govuk-form-group govuk-form-group--error">
+        - <div class="govuk-form-group govuk-form-group--error govuk-password-input" data-module="govuk-password-input">
         - <label class="govuk-label" for="password_field">\s*PasswordField\s*</label>
-        - <p id="password_field-error" class="govuk-error-message">\s*<span class="govuk-visually-hidden">\s*Error:\s*</span>\s*Please ensure both password fields match\s*</p>
-        # Ensure that passwords are not represented in the output for security reasons
-        - input class="govuk-input govuk-input--error" id="password_field" name="password_field" type="password" spellcheck="false" aria-describedby="password_field-hint password_field-error" required="required">
         - <div id="password_field-hint" class="govuk-hint">\s*PasswordFieldHint\s*</div>
+        - <p id="password_field-error" class="govuk-error-message">\s*<span class="govuk-visually-hidden">\s*Error:\s*</span>\s*Please ensure both password fields match\s*</p>
+        - <div class="govuk-input__wrapper govuk-password-input__wrapper">
+        - <input class="govuk-input govuk-password-input__input govuk-js-password-input-input govuk-input--error" id="password_field" name="password_field" type="password" spellcheck="false" aria-describedby="password_field-hint password_field-error" autocomplete="current-password" autocapitalize="none">
+        - <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password_field" aria-label="Show password" hidden>\s*Show\s*</button>
 
 TestErrorSummary:
   template: >

diff --git a/tests/requirements.in b/tests/requirements.in
@@ -1,7 +1,7 @@
 deepmerge==1.1.1
-email_validator==2.1.0.post1
+email_validator==2.1.1
 flask-wtf==1.2.1
-flask==3.0.2
-govuk-frontend-jinja>=3.0.0
-pytest-cov==4.1.0
+flask==3.0.3
+govuk-frontend-jinja==3.1.0
+pytest-cov==5.0.0
 pyyaml==6.0.1
diff --git a/tests/requirements.txt b/tests/requirements.txt
@@ -4,37 +4,35 @@
 #
 #    pip-compile requirements.in
 #
-blinker==1.7.0
+blinker==1.8.2
     # via flask
 click==8.1.7
     # via flask
-coverage[toml]==7.4.1
-    # via
-    #   coverage
-    #   pytest-cov
+coverage[toml]==7.5.3
+    # via pytest-cov
 deepmerge==1.1.1
     # via -r requirements.in
-dnspython==2.5.0
+dnspython==2.6.1
     # via email-validator
-email-validator==2.1.0.post1
+email-validator==2.1.1
     # via -r requirements.in
-flask==3.0.2
+flask==3.0.3
     # via
     #   -r requirements.in
     #   flask-wtf
 flask-wtf==1.2.1
     # via -r requirements.in
-govuk-frontend-jinja==3.0.0
+govuk-frontend-jinja==3.1.0
     # via -r requirements.in
-idna==3.6
+idna==3.7
     # via email-validator
 iniconfig==2.0.0
     # via pytest
-itsdangerous==2.1.2
+itsdangerous==2.2.0
     # via
     #   flask
     #   flask-wtf
-jinja2==3.1.3
+jinja2==3.1.4
     # via
     #   flask
     #   govuk-frontend-jinja
@@ -43,17 +41,17 @@ markupsafe==2.1.5
     #   jinja2
     #   werkzeug
     #   wtforms
-packaging==23.2
+packaging==24.0
     # via pytest
-pluggy==1.4.0
+pluggy==1.5.0
     # via pytest
-pytest==8.0.0
+pytest==8.2.1
     # via pytest-cov
-pytest-cov==4.1.0
+pytest-cov==5.0.0
     # via -r requirements.in
 pyyaml==6.0.1
     # via -r requirements.in
-werkzeug==3.0.1
+werkzeug==3.0.3
     # via flask
 wtforms==3.1.2
     # via flask-wtf
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		{% from 'govuk_frontend_jinja/components/password-input/macro.html' import govukPasswordInput %}
		{{ govukPasswordInput(params) }}