diff --git a/app/views/event_disavowal/new.html.erb b/app/views/event_disavowal/new.html.erb
index 7c1456793ce..6a93cc4e865 100644
--- a/app/views/event_disavowal/new.html.erb
+++ b/app/views/event_disavowal/new.html.erb
@@ -12,8 +12,10 @@
input_html: { value: @disavowal_token, name: :disavowal_token } %>
<%= render PasswordToggleComponent.new(
form: f,
- label: t('forms.passwords.edit.labels.password'),
- required: true,
+ field_options: {
+ label: t('forms.passwords.edit.labels.password'),
+ required: true,
+ },
) %>
<%= render 'devise/shared/password_strength', forbidden_passwords: @forbidden_passwords %>
<%= f.submit t('forms.passwords.edit.buttons.submit'), class: 'margin-bottom-4' %>
diff --git a/app/views/idv/review/new.html.erb b/app/views/idv/review/new.html.erb
index 6da2bea0e4b..a86b480a389 100644
--- a/app/views/idv/review/new.html.erb
+++ b/app/views/idv/review/new.html.erb
@@ -23,15 +23,16 @@
<%= simple_form_for(
current_user,
url: idv_review_path,
- html: { autocomplete: 'off', method: :put, class: 'margin-top-6' },
+ html: { autocomplete: 'off', method: :put, class: 'margin-top-4' },
) do |f| %>
<%= render PasswordToggleComponent.new(
form: f,
- label: t('idv.form.password'),
- required: true,
- wrapper_html: { class: 'margin-bottom-0' },
+ field_options: {
+ label: t('idv.form.password'),
+ required: true,
+ },
) %>
-
+
<%= link_to(t('idv.forgot_password.link_text'), idv_forgot_password_url, class: 'margin-left-1') %>
<%= render AccordionComponent.new do |c| %>
diff --git a/app/views/mfa_confirmation/new.html.erb b/app/views/mfa_confirmation/new.html.erb
index a0aa93a3dba..6a6c2371313 100644
--- a/app/views/mfa_confirmation/new.html.erb
+++ b/app/views/mfa_confirmation/new.html.erb
@@ -11,9 +11,9 @@
<%= simple_form_for(
current_user,
url: reauthn_user_password_path,
- html: { autocomplete: 'off', method: 'post', class: 'margin-top-6' },
+ html: { autocomplete: 'off', method: 'post', class: 'margin-top-4' },
) do |f| %>
- <%= render PasswordToggleComponent.new(form: f, required: true) %>
+ <%= render PasswordToggleComponent.new(form: f, field_options: { required: true }) %>
<%= f.submit t('forms.buttons.continue'), class: 'display-block margin-y-5' %>
<% end %>
<%= render 'shared/cancel', link: account_path %>
diff --git a/app/views/password_capture/new.html.erb b/app/views/password_capture/new.html.erb
index f7e6016a4b7..35b36d39423 100644
--- a/app/views/password_capture/new.html.erb
+++ b/app/views/password_capture/new.html.erb
@@ -7,12 +7,14 @@
as: :user,
url: capture_password_url,
method: :post,
- html: { autocomplete: 'off', class: 'margin-top-6' },
+ html: { autocomplete: 'off', class: 'margin-top-4' },
) do |f| %>
<%= render PasswordToggleComponent.new(
form: f,
- label: t('account.index.password'),
- required: true,
+ field_options: {
+ label: t('account.index.password'),
+ required: true,
+ },
) %>
<%= f.submit t('forms.buttons.submit.default'), class: 'display-block margin-y-5' %>
<% end %>
diff --git a/app/views/shared/_ssn_field.html.erb b/app/views/shared/_ssn_field.html.erb
index 522a2ba6f60..a90d956379b 100644
--- a/app/views/shared/_ssn_field.html.erb
+++ b/app/views/shared/_ssn_field.html.erb
@@ -5,18 +5,19 @@ locals:
<%# maxlength set and includes '-' delimiters to work around cleave bug %>
<%= render PasswordToggleComponent.new(
- name: :ssn,
form: f,
- as: :password,
- label: t('idv.form.ssn_label_html'),
toggle_label: t('forms.ssn.show'),
- toggle_position: :bottom,
- hint: t('forms.example') + ' 123-45-6789',
- required: true,
- pattern: '^\d{3}-?\d{2}-?\d{4}$',
- maxlength: 11,
- input_html: { aria: { invalid: false }, class: 'ssn-toggle usa-input', value: '' },
- error_messages: { patternMismatch: t('idv.errors.pattern_mismatch.ssn') },
+ field_options: {
+ name: :ssn,
+ as: :password,
+ label: t('idv.form.ssn_label_html'),
+ hint: t('forms.example') + ' 123-45-6789',
+ required: true,
+ pattern: '^\d{3}-?\d{2}-?\d{4}$',
+ maxlength: 11,
+ input_html: { aria: { invalid: false }, class: 'ssn-toggle usa-input', value: '' },
+ error_messages: { patternMismatch: t('idv.errors.pattern_mismatch.ssn') },
+ },
) %>
<%= javascript_packs_tag_once('ssn-field') %>
diff --git a/app/views/sign_up/passwords/new.html.erb b/app/views/sign_up/passwords/new.html.erb
index 3b11dedb889..62b21871791 100644
--- a/app/views/sign_up/passwords/new.html.erb
+++ b/app/views/sign_up/passwords/new.html.erb
@@ -13,14 +13,16 @@
) do |f| %>
<%= render PasswordToggleComponent.new(
form: f,
- label: t('forms.password'),
- required: true,
- input_html: { aria: { describedby: 'password-description' } },
+ field_options: {
+ label: t('forms.password'),
+ required: true,
+ input_html: { aria: { describedby: 'password-description' } },
+ },
) %>
<%= render 'devise/shared/password_strength', forbidden_passwords: @forbidden_passwords %>
<%= hidden_field_tag :confirmation_token, @confirmation_token, id: 'confirmation_token' %>
<%= f.input :request_id, as: :hidden, input_html: { value: params[:request_id] || request_id } %>
- <%= f.submit t('forms.buttons.continue'), class: 'margin-bottom-5' %>
+ <%= f.submit t('forms.buttons.continue'), class: 'display-block margin-y-5' %>
<% end %>
<%= render 'shared/password_accordion' %>
diff --git a/app/views/users/delete/show.html.erb b/app/views/users/delete/show.html.erb
index d4424f8cb30..238265e1bb9 100644
--- a/app/views/users/delete/show.html.erb
+++ b/app/views/users/delete/show.html.erb
@@ -24,12 +24,14 @@
<%= render PasswordToggleComponent.new(
form: f,
- name: :password,
- label: t('idv.form.password'),
- required: true,
+ field_options: {
+ name: :password,
+ label: t('idv.form.password'),
+ required: true,
+ },
) %>
- <%= f.submit t('users.delete.actions.delete'), danger: true, class: 'margin-top-1 margin-bottom-2' %>
+ <%= f.submit t('users.delete.actions.delete'), danger: true, class: 'margin-top-5 margin-bottom-2' %>
<% end %>
<%= link_to(
diff --git a/app/views/users/passwords/edit.html.erb b/app/views/users/passwords/edit.html.erb
index 943b2130cab..c59fba7e63f 100644
--- a/app/views/users/passwords/edit.html.erb
+++ b/app/views/users/passwords/edit.html.erb
@@ -13,13 +13,15 @@
<%= f.error_notification %>
<%= render PasswordToggleComponent.new(
form: f,
- name: :password,
- label: t('forms.passwords.edit.labels.password'),
- required: true,
- input_html: { aria: { describedby: 'password-description' } },
+ field_options: {
+ name: :password,
+ label: t('forms.passwords.edit.labels.password'),
+ required: true,
+ input_html: { aria: { describedby: 'password-description' } },
+ },
) %>
<%= render 'devise/shared/password_strength', forbidden_passwords: @forbidden_passwords %>
- <%= f.submit t('forms.buttons.submit.update'), class: 'margin-top-2 margin-bottom-4' %>
+ <%= f.submit t('forms.buttons.submit.update'), class: 'display-block margin-top-5 margin-bottom-4' %>
<% end %>
<%= render 'shared/password_accordion' %>
diff --git a/app/views/users/verify_password/new.html.erb b/app/views/users/verify_password/new.html.erb
index 414ac55d7f6..b3d8de22f83 100644
--- a/app/views/users/verify_password/new.html.erb
+++ b/app/views/users/verify_password/new.html.erb
@@ -12,11 +12,13 @@
) do |f| %>
<%= render PasswordToggleComponent.new(
form: f,
- name: :password,
- label: t('idv.form.password'),
- required: true,
+ field_options: {
+ name: :password,
+ label: t('idv.form.password'),
+ required: true,
+ },
) %>
- <%= f.submit t('forms.buttons.continue') %>
+ <%= f.submit t('forms.buttons.continue'), class: 'margin-top-5' %>
<% end %>
diff --git a/spec/components/password_toggle_component_spec.rb b/spec/components/password_toggle_component_spec.rb
index 36ae51bfec0..6d076c64ff4 100644
--- a/spec/components/password_toggle_component_spec.rb
+++ b/spec/components/password_toggle_component_spec.rb
@@ -11,7 +11,7 @@
subject(:rendered) { render_inline PasswordToggleComponent.new(form: form, **options) }
it 'renders default markup' do
- expect(rendered).to have_css('lg-password-toggle.password-toggle--toggle-top')
+ expect(rendered).to have_css('lg-password-toggle')
expect(rendered).to have_field(t('components.password_toggle.label'), type: :password)
expect(rendered).to have_field(t('components.password_toggle.toggle_label'), type: :checkbox)
end
@@ -23,17 +23,6 @@
expect(rendered).to have_css("[aria-controls='#{input_id}']")
end
- describe '#label' do
- context 'with custom label' do
- let(:label) { 'Custom Label' }
- let(:options) { { label: label } }
-
- it 'renders custom field label' do
- expect(rendered).to have_field(label, type: :password)
- end
- end
- end
-
describe '#toggle_label' do
context 'with custom label' do
let(:toggle_label) { 'Custom Toggle Label' }
@@ -45,24 +34,6 @@
end
end
- describe '#toggle_position' do
- context 'with top toggle position' do
- let(:options) { { toggle_position: :top } }
-
- it 'renders modifier class' do
- expect(rendered).to have_css('lg-password-toggle.password-toggle--toggle-top')
- end
- end
-
- context 'with bottom toggle position' do
- let(:options) { { toggle_position: :bottom } }
-
- it 'renders modifier class' do
- expect(rendered).to have_css('lg-password-toggle.password-toggle--toggle-bottom')
- end
- end
- end
-
describe '#toggle_id' do
it 'is unique across instances' do
toggle_one = PasswordToggleComponent.new(form: form)
@@ -85,17 +56,25 @@
end
end
- describe '#field' do
- context 'with field options' do
- let(:options) do
- { input_html: { class: 'my-custom-field', data: { foo: 'bar' } }, required: true }
- end
+ context 'with tag options' do
+ let(:options) do
+ { class: 'my-custom-field', data: { foo: 'bar' } }
+ end
- it 'forwards field options' do
- expect(rendered).to have_css(
- '.password-toggle__input.my-custom-field[data-foo="bar"][required]',
- )
- end
+ it 'forwards options to rendered tag' do
+ expect(rendered).to have_css('lg-password-toggle.my-custom-field[data-foo="bar"]')
+ end
+ end
+
+ context 'with field options' do
+ let(:label) { 'Custom Label' }
+ let(:options) do
+ { field_options: { label: label, required: true } }
+ end
+
+ it 'forwards options to rendered field' do
+ expect(rendered).to have_css('.password-toggle__input[required]')
+ expect(rendered).to have_field(label, type: :password)
end
end
end
diff --git a/spec/components/previews/password_toggle_component_preview.rb b/spec/components/previews/password_toggle_component_preview.rb
index 8dca3099461..95c80ec9333 100644
--- a/spec/components/previews/password_toggle_component_preview.rb
+++ b/spec/components/previews/password_toggle_component_preview.rb
@@ -7,13 +7,12 @@ def default
# @param label text
# @param toggle_label text
- # @param toggle_position select [~,top,bottom]
- def workbench(label: nil, toggle_label: nil, toggle_position: 'top')
+ def workbench(label: nil, toggle_label: nil)
render(
PasswordToggleComponent.new(
form: form_builder,
- **{ label: label, toggle_label: toggle_label }.compact,
- toggle_position: toggle_position.to_sym,
+ **{ toggle_label: toggle_label }.compact,
+ field_options: { label: label }.compact,
),
)
end