Merge pull request #4238 from alphagov/custom-name-on-password-input

Allow custom name attribute on password input

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"