Allow a custom name on password input

On Signon, we use Devise for authentication. We customise the login
screen in order to use the GOV.UK Design System, but in order for
everything to work seemlessly with Devise (without undue hacking), we
use the default Devise input names of `user[email]` and
`user[password]`. Other apps may well have a similar need given that
Devise is a pretty standard library

This adds support for customising the name of the password input to
support such use cases

CHANGELOG.md

@@ -10,6 +10,7 @@
 ## Unreleased
 
 * Remove unused cookies from cookie category ([PR #4234](https://github.com/alphagov/govuk_publishing_components/pull/4234))
+* Allow custom name attribute on password input ([PR #4238](https://github.com/alphagov/govuk_publishing_components/pull/4238))
 
 ## 43.2.0
 

app/views/govuk_publishing_components/components/_password_input.html.erb

@@ -13,6 +13,8 @@
   password_shown_announcement ||= t("components.password_input.password_shown_announcement")
   password_hidden_announcement ||= t("components.password_input.password_hidden_announcement")
 
+  name ||= "password"
+
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
   component_helper = GovukPublishingComponents::Presenters::ComponentWrapperHelper.new(local_assigns)
   component_helper.add_data_attribute({
@@ -34,17 +36,16 @@
 
   label_for = uid + '-password-input'
 
-  input_name = 'password'
   input_id = uid + '-password-input'
 
   aria_controls = uid + '-password-input'
 
   input_classes = %w(govuk-input govuk-password-input__input govuk-js-password-input-input)
 
   if error_text
+    name << '-input-with-error-message'
     label_for << '-with-error-message'
     input_id << '-with-error-message'
-    input_name << '-input-with-error-message'
     input_classes << 'govuk-input--error'
     aria_controls << '-with-error-message'
     paragraph_id = uid + '-password-input-with-error-message-error'
@@ -64,7 +65,7 @@
 
   <div class="govuk-input__wrapper govuk-password-input__wrapper">
     <%= tag.input(
-      name: input_name,
+      name:,
       type: "password",
       class: input_classes,
       id: input_id,

app/views/govuk_publishing_components/components/docs/password_input.yml

@@ -28,6 +28,10 @@ uses_component_wrapper_helper: true
 examples:
   default:
     data:
+  with_name:
+    description: If no name is provided, it defaults to "password".
+    data:
+      name: user[password]
   with_error:
     description: If there is a validation error, passing error text will style the password input component with error styles, and semantically state that there was a validation error.
     data:

spec/components/password_input_spec.rb

@@ -30,6 +30,11 @@ def component_name
     expect(password_input_component.attr("data-i18n.password-hidden-announcement")).to eql("Your password is hidden")
   end
 
+  it "renders a password input with custom name" do
+    render_component({ name: "user[password]" })
+    assert_select "div.govuk-password-input input[name='user\[password\]']"
+  end
+
   it "renders a password input with extra classes and a paragraph when error_text is passed" do
     render_component({ error_text: "Password must contain at least 8 characters" })
     assert_select "div.govuk-form-group--error"