LG-9709: Add autocomplete attribute to password fields

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'),
         },
-      ) %>      
+      ) %>
   <input
     id="<%= toggle_id %>"
     type="checkbox"

app/components/password_confirmation_component.scss

@@ -0,0 +1,3 @@
+lg-password-confirmation {
+  display: block;
+}

app/views/devise/passwords/edit.html.erb

@@ -17,6 +17,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 %>

app/views/devise/sessions/new.html.erb

@@ -46,7 +46,12 @@
   <%= render PasswordToggleComponent.new(
         form: f,
         class: 'margin-bottom-4',
-        field_options: { required: true },
+        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 %>

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 %>

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',
+          },
         },
       ) %>
   <div class="text-right margin-top-neg-4 margin-bottom-4">

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 %>

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',
+          },
         },
       ) %>
 

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 %>

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' %>

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

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