From 692c9f2672b2e8943f601161fa9023a13ed7e915 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 23 May 2023 13:49:12 -0400 Subject: [PATCH 1/3] Add autocomplete attribute to password fields changelog: User-Facing Improvements, Passwords, Improve password autocomplete support --- .../password_confirmation_component.html.erb | 4 +++- app/views/devise/passwords/edit.html.erb | 3 +++ app/views/devise/sessions/new.html.erb | 3 +++ app/views/event_disavowal/new.html.erb | 3 +++ app/views/idv/review/new.html.erb | 3 +++ app/views/mfa_confirmation/new.html.erb | 10 +++++++++- app/views/users/delete/show.html.erb | 3 +++ app/views/users/passwords/edit.html.erb | 5 ++++- app/views/users/verify_password/new.html.erb | 3 +++ .../password_confirmation_component_spec.rb | 15 +++++++++++++++ 10 files changed, 49 insertions(+), 3 deletions(-) create mode 100644 spec/components/password_confirmation_component_spec.rb diff --git a/app/components/password_confirmation_component.html.erb b/app/components/password_confirmation_component.html.erb index 0054091e06d..4c50243d3b3 100644 --- a/app/components/password_confirmation_component.html.erb +++ b/app/components/password_confirmation_component.html.erb @@ -8,6 +8,7 @@ **field_options, input_html: field_options[:input_html].to_h.merge( id: input_id, + autocomplete: 'new-password', class: ['password-confirmation__input', *field_options.dig(:input_html, :class)], ), ) %> @@ -20,6 +21,7 @@ **field_options, input_html: field_options[:input_html].to_h.merge( id: input_confirmation_id, + autocomplete: 'new-password', class: ['password-confirmation__input-confirmation', *field_options.dig(:input_html, :class)], ), wrapper_html: field_options[:wrapper_html].to_h.merge( @@ -28,7 +30,7 @@ error_messages: { valueMissing: t('components.password_confirmation.errors.empty'), }, - ) %> + ) %> <%= render 'devise/shared/password_strength', forbidden_passwords: @forbidden_passwords %> diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index bc19b2519c8..2f8cdab0c01 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -47,6 +47,9 @@ form: f, class: 'margin-bottom-4', field_options: { required: true }, + input_html: { + autocomplete: 'current-password', + }, ) %> <%= f.submit t('links.next'), full_width: true, wide: false %> <% if @sign_in_a_b_test_bucket == :default %> diff --git a/app/views/event_disavowal/new.html.erb b/app/views/event_disavowal/new.html.erb index 6a93cc4e865..3f35824c546 100644 --- a/app/views/event_disavowal/new.html.erb +++ b/app/views/event_disavowal/new.html.erb @@ -15,6 +15,9 @@ field_options: { label: t('forms.passwords.edit.labels.password'), required: true, + input_html: { + autocomplete: 'new-password', + }, }, ) %> <%= render 'devise/shared/password_strength', forbidden_passwords: @forbidden_passwords %> diff --git a/app/views/idv/review/new.html.erb b/app/views/idv/review/new.html.erb index fe72a284986..8734c6a298c 100644 --- a/app/views/idv/review/new.html.erb +++ b/app/views/idv/review/new.html.erb @@ -30,6 +30,9 @@ field_options: { label: t('idv.form.password'), required: true, + input_html: { + autocomplete: 'current-password', + }, }, ) %>
diff --git a/app/views/mfa_confirmation/new.html.erb b/app/views/mfa_confirmation/new.html.erb index c00b61584ff..1492e7d7323 100644 --- a/app/views/mfa_confirmation/new.html.erb +++ b/app/views/mfa_confirmation/new.html.erb @@ -12,7 +12,15 @@ url: reauthn_user_password_path, html: { autocomplete: 'off', method: 'post', class: 'margin-top-4' }, ) do |f| %> - <%= render PasswordToggleComponent.new(form: f, field_options: { required: true }) %> + <%= render PasswordToggleComponent.new( + form: f, + field_options: { + required: true, + input_html: { + autocomplete: 'current-password', + }, + }, + ) %> <%= f.submit t('forms.buttons.continue'), class: 'display-block margin-y-5' %> <% end %> <%= render 'shared/cancel', link: account_path %> diff --git a/app/views/users/delete/show.html.erb b/app/views/users/delete/show.html.erb index 3e15de0aeda..82483268f77 100644 --- a/app/views/users/delete/show.html.erb +++ b/app/views/users/delete/show.html.erb @@ -28,6 +28,9 @@ name: :password, label: t('idv.form.password'), required: true, + input_html: { + autocomplete: 'current-password', + }, }, ) %> diff --git a/app/views/users/passwords/edit.html.erb b/app/views/users/passwords/edit.html.erb index 10e4ee7c12a..926bd819196 100644 --- a/app/views/users/passwords/edit.html.erb +++ b/app/views/users/passwords/edit.html.erb @@ -17,7 +17,10 @@ name: :password, label: t('forms.passwords.edit.labels.password'), required: true, - input_html: { aria: { describedby: 'password-description' } }, + input_html: { + aria: { describedby: 'password-description' }, + autocomplete: 'new-password', + }, }, ) %> <%= render 'devise/shared/password_strength', forbidden_passwords: @forbidden_passwords %> diff --git a/app/views/users/verify_password/new.html.erb b/app/views/users/verify_password/new.html.erb index b3d8de22f83..a8fa3b8e44d 100644 --- a/app/views/users/verify_password/new.html.erb +++ b/app/views/users/verify_password/new.html.erb @@ -16,6 +16,9 @@ name: :password, label: t('idv.form.password'), required: true, + input_html: { + autocomplete: 'current-password', + }, }, ) %> <%= f.submit t('forms.buttons.continue'), class: 'margin-top-5' %> diff --git a/spec/components/password_confirmation_component_spec.rb b/spec/components/password_confirmation_component_spec.rb new file mode 100644 index 00000000000..54f52b3f631 --- /dev/null +++ b/spec/components/password_confirmation_component_spec.rb @@ -0,0 +1,15 @@ +require 'rails_helper' + +RSpec.describe PasswordConfirmationComponent, type: :component do + let(:lookup_context) { ActionView::LookupContext.new(ActionController::Base.view_paths) } + let(:view_context) { ActionView::Base.new(lookup_context, {}, controller) } + let(:form) { SimpleForm::FormBuilder.new('', {}, view_context, {}) } + + subject(:rendered) do + render_inline PasswordConfirmationComponent.new(form:) + end + + it 'renders password fields with expected attributes' do + expect(rendered).to have_css('[type=password][autocomplete=new-password]', count: 2) + end +end From 22fd95dd31b01eeabdba18d30d903e4416d20184 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 23 May 2023 13:49:58 -0400 Subject: [PATCH 2/3] Add preview for PasswordConfirmationComponent --- .../password_confirmation_component.scss | 3 +++ ...password_confirmation_component_preview.rb | 19 +++++++++++++++++++ 2 files changed, 22 insertions(+) create mode 100644 app/components/password_confirmation_component.scss create mode 100644 spec/components/previews/password_confirmation_component_preview.rb diff --git a/app/components/password_confirmation_component.scss b/app/components/password_confirmation_component.scss new file mode 100644 index 00000000000..9b91e3aaffc --- /dev/null +++ b/app/components/password_confirmation_component.scss @@ -0,0 +1,3 @@ +lg-password-confirmation { + display: block; +} diff --git a/spec/components/previews/password_confirmation_component_preview.rb b/spec/components/previews/password_confirmation_component_preview.rb new file mode 100644 index 00000000000..d0421e2aa93 --- /dev/null +++ b/spec/components/previews/password_confirmation_component_preview.rb @@ -0,0 +1,19 @@ +class PasswordConfirmationComponentPreview < BaseComponentPreview + # @!group Preview + # @display form true + def default + render(PasswordConfirmationComponent.new(form: form_builder)) + end + # @!endgroup + + # @display form true + # @param toggle_label text + def workbench(toggle_label: nil) + render( + PasswordConfirmationComponent.new( + form: form_builder, + **{ toggle_label: }.compact, + ), + ) + end +end From 122eba3f3077612269faa54f07de618985c67c1d Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Tue, 23 May 2023 14:56:23 -0400 Subject: [PATCH 3/3] Put input_html in the correct place (field_options) --- app/views/devise/sessions/new.html.erb | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb index 2f8cdab0c01..ef47fbf82f6 100644 --- a/app/views/devise/sessions/new.html.erb +++ b/app/views/devise/sessions/new.html.erb @@ -46,9 +46,11 @@ <%= render PasswordToggleComponent.new( form: f, class: 'margin-bottom-4', - field_options: { required: true }, - input_html: { - autocomplete: 'current-password', + field_options: { + required: true, + input_html: { + autocomplete: 'current-password', + }, }, ) %> <%= f.submit t('links.next'), full_width: true, wide: false %>