From 5f429f828d4574c17e0c123b909eff5d40f2f7a2 Mon Sep 17 00:00:00 2001 From: Ynda Jas Date: Wed, 18 Sep 2024 19:38:26 +0100 Subject: [PATCH] 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 | 1 + .../components/_password_input.html.erb | 7 ++++--- .../components/docs/password_input.yml | 4 ++++ spec/components/password_input_spec.rb | 5 +++++ 4 files changed, 14 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c877439095..e238b6367a 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/app/views/govuk_publishing_components/components/_password_input.html.erb b/app/views/govuk_publishing_components/components/_password_input.html.erb index 997c38c022..e211ebb50d 100644 --- a/app/views/govuk_publishing_components/components/_password_input.html.erb +++ b/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,7 +36,6 @@ label_for = uid + '-password-input' - input_name = 'password' input_id = uid + '-password-input' aria_controls = uid + '-password-input' @@ -42,9 +43,9 @@ 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 @@
<%= tag.input( - name: input_name, + name:, type: "password", class: input_classes, id: input_id, diff --git a/app/views/govuk_publishing_components/components/docs/password_input.yml b/app/views/govuk_publishing_components/components/docs/password_input.yml index e4e7ee5df4..1e20a665c6 100644 --- a/app/views/govuk_publishing_components/components/docs/password_input.yml +++ b/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: diff --git a/spec/components/password_input_spec.rb b/spec/components/password_input_spec.rb index 4426e80e49..d4b775cee2 100644 --- a/spec/components/password_input_spec.rb +++ b/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"