Add password input #481

peteryates · 2024-02-22T10:41:17Z

The 'password input' is a new form component added to version 5.3.0 of the GOV.UK Design System.

This change attempts to implement it with all of its custom behaviour and document it in the guide.

netlify · 2024-02-22T10:41:33Z

✅ Deploy Preview for govuk-form-builder ready!

Name	Link
🔨 Latest commit	`c1695b0`
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-form-builder/deploys/6605a2ee65023400083eb7e4
😎 Deploy Preview	https://deploy-preview-481--govuk-form-builder.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

peteryates · 2024-03-27T09:53:04Z

spec/govuk_design_system_formbuilder/builder/date_spec.rb

@@ -1,7 +1,7 @@
 describe GOVUKDesignSystemFormBuilder::FormBuilder do
  include_context 'setup builder'

-  describe '#date_input_group' do
+  describe '#govuk_date_field' do


Spotted a historic error, unrelated to PR 🙈

paulrobertlloyd · 2024-03-27T16:40:38Z

guide/content/form-elements/password.slim

@@ -0,0 +1,31 @@
+---
+title: Password fields


To be consistent with both the Design System and the documentation for the other form builder fields.

May need to update other occurrences of ‘field’ to use ‘input’, too.

Suggested change

title: Password fields

title: Password input

I thought about that but I think consistency with Rails is more important here and Rails names these password_field.

Could argue the case either way, but the existing form builder documentation already uses ‘input’ for the page titles (‘Date input’, ‘Text input’). I think that’s the right way to go; use the name of the component in the Design System, then in the documentation, talk about fields when relating to implementation.

Addressed in 1f65c86

paulrobertlloyd

Just did a very quick pass. Main points:

Consistently use ‘Password input’ for the name of this field
Don’t use examples that go against the guidance for this input

paulrobertlloyd · 2024-03-27T16:42:07Z

guide/lib/examples/password.rb

+  module Password
+    def default_password
+      <<~PASSWORD
+        = f.govuk_password_field :password, label: { text: "Enter your password" }


To be consistent with the example used in the Design System documentation.

Suggested change

= f.govuk_password_field :password, label: { text: "Enter your password" }

= f.govuk_password_field :password, label: { text: "Password" }

paulrobertlloyd · 2024-03-27T16:43:07Z

guide/lib/examples/password.rb

+            label: { text: "Enter your PIN", tag: "h2", size: "l" },
+            caption: { text: "Security", size: "m" },
+            hint: { text: "Your PIN was emailed to you when you registered for this service" })


Should probably use another example, only referring to passwords, as the Design System guidance states that this input should only be used for passwords, and not other types of security information.

Fair - I need unique attribute names here which is why I used PIN. I'll rename to password_1, password_2 and password_3.

paulrobertlloyd · 2024-03-27T16:43:58Z

guide/lib/examples/password.rb

+        = f.govuk_password_field(:secret_code,
+            label: { text: "Enter your secret code" },
+            show_password_text: "Display",
+            hide_password_text: "Conceal",
+            show_password_aria_label_text: "Display the secret code",
+            hide_password_aria_label_text: "Conceal the secret code",
+            password_shown_announcement_text: "The secret code has been displayed",
+            password_hidden_announcement_text: "The secret code has been concealed")


Same as above. Maybe these examples could demonstrate using these parameters to enable localisation?

paulrobertlloyd · 2024-03-27T16:45:22Z

guide/lib/helpers/link_helpers.rb

          "File upload" => "/form-elements/file-upload/",
+          "Password fields" => "/form-elements/password/",
          "Radios" => "/form-elements/radios/",


As previous comment, and also to be internally consistent with URL slugs:

Suggested change

"File upload" => "/form-elements/file-upload/",

"Password fields" => "/form-elements/password/",

"Radios" => "/form-elements/radios/",

"File upload" => "/form-elements/file-upload/",

"Password input" => "/form-elements/password-input/",

"Radios" => "/form-elements/radios/",

ok - I'll switch it in the guide but keep the Rails-style method name.

frankieroberto

Code looks good to me. 👍

Any thoughts on whether this counts as a breaking change or not? On the one hand it’s a new feature, but on the other it re-uses the existing govuk_password_field method.

Whilst I think in most circumstances, having the show/hide button appear on existing password fields should be fine (and good) - I guess the changed markup might break some tests, and possibly there might be some layouts which need adjusting to make room for the extra button? 🤔

peteryates · 2024-03-28T16:00:55Z

Yeah I was going to cover that in the release notes. Technically breaking but the old one didn't exactly do very much to start with, can't really see it causing any problems.

Originally I thought we'd be able to build on this but it appears the new password input[0] doesn't really have too much in common with the other text inputs. For example, it doesn't allow the width to be configured [0] alphagov/govuk-design-system#3355

@edujackedu

* the i18n data attributes should really be used for localisation, they're now Italian (thanks @edujackedu!) * the official component is called 'password input' rather than 'password field'. I've changed this around in the guide but left the actual code as #govuk_password_field so it's consistent with Rails' other form helpers * renamed the example attributes from PIN and secret code to password_1, password_2, password_3. They need to be unique and not encourage people to use this component for things other than passwords

Points have been addressed and they're in the guide which we can easily tweak post release.

peteryates linked an issue Feb 22, 2024 that may be closed by this pull request

Add password input helper #479

Closed

peteryates force-pushed the new-password-fields branch from 9ba614a to c7a92df Compare February 22, 2024 12:25

peteryates force-pushed the new-password-fields branch 2 times, most recently from aa8bd49 to b8b5df8 Compare March 26, 2024 15:21

peteryates changed the title ~~Add upcoming password input~~ Add password input Mar 27, 2024

peteryates commented Mar 27, 2024

View reviewed changes

peteryates force-pushed the new-password-fields branch 2 times, most recently from d32f161 to d316ce7 Compare March 27, 2024 14:07

peteryates requested review from paulrobertlloyd and frankieroberto March 27, 2024 14:10

paulrobertlloyd reviewed Mar 27, 2024

View reviewed changes

paulrobertlloyd previously requested changes Mar 27, 2024

View reviewed changes

peteryates force-pushed the new-password-fields branch from 6cd09b6 to 507a0d1 Compare March 27, 2024 17:16

peteryates requested a review from paulrobertlloyd March 27, 2024 17:17

peteryates force-pushed the new-password-fields branch 2 times, most recently from 3bed57a to 1f65c86 Compare March 27, 2024 17:26

frankieroberto approved these changes Mar 28, 2024

View reviewed changes

peteryates added 4 commits March 28, 2024 17:03

Add the govuk password field

Loading
Loading status checks…

d05c8f9

Add guide page for the password field

0be3008

peteryates force-pushed the new-password-fields branch from 1f65c86 to c1695b0 Compare March 28, 2024 17:03

peteryates enabled auto-merge March 28, 2024 17:05

peteryates merged commit 0581bc3 into main Mar 28, 2024
17 checks passed

peteryates deleted the new-password-fields branch March 28, 2024 17:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add password input #481

Add password input #481

peteryates commented Feb 22, 2024 •

edited

Loading

netlify bot commented Feb 22, 2024 •

edited

Loading

peteryates Mar 27, 2024 •

edited

Loading

paulrobertlloyd Mar 27, 2024

peteryates Mar 27, 2024 •

edited

Loading

paulrobertlloyd Mar 27, 2024 •

edited

Loading

peteryates Mar 27, 2024 •

edited

Loading

paulrobertlloyd left a comment

paulrobertlloyd Mar 27, 2024

paulrobertlloyd Mar 27, 2024

peteryates Mar 27, 2024

paulrobertlloyd Mar 27, 2024

paulrobertlloyd Mar 27, 2024

peteryates Mar 27, 2024

frankieroberto left a comment

peteryates commented Mar 28, 2024

	= f.govuk_password_field :password, label: { text: "Enter your password" }
	= f.govuk_password_field :password, label: { text: "Password" }

Add password input #481

Add password input #481

Conversation

peteryates commented Feb 22, 2024 • edited Loading

netlify bot commented Feb 22, 2024 • edited Loading

✅ Deploy Preview for govuk-form-builder ready!

peteryates Mar 27, 2024 • edited Loading

Choose a reason for hiding this comment

paulrobertlloyd Mar 27, 2024

Choose a reason for hiding this comment

peteryates Mar 27, 2024 • edited Loading

Choose a reason for hiding this comment

paulrobertlloyd Mar 27, 2024 • edited Loading

Choose a reason for hiding this comment

peteryates Mar 27, 2024 • edited Loading

Choose a reason for hiding this comment

paulrobertlloyd left a comment

Choose a reason for hiding this comment

paulrobertlloyd Mar 27, 2024

Choose a reason for hiding this comment

paulrobertlloyd Mar 27, 2024

Choose a reason for hiding this comment

peteryates Mar 27, 2024

Choose a reason for hiding this comment

paulrobertlloyd Mar 27, 2024

Choose a reason for hiding this comment

paulrobertlloyd Mar 27, 2024

Choose a reason for hiding this comment

peteryates Mar 27, 2024

Choose a reason for hiding this comment

frankieroberto left a comment

Choose a reason for hiding this comment

peteryates commented Mar 28, 2024

peteryates commented Feb 22, 2024 •

edited

Loading

netlify bot commented Feb 22, 2024 •

edited

Loading

peteryates Mar 27, 2024 •

edited

Loading

peteryates Mar 27, 2024 •

edited

Loading

paulrobertlloyd Mar 27, 2024 •

edited

Loading

peteryates Mar 27, 2024 •

edited

Loading