LG-9208: Confirm password

app/components/password_confirmation_component.html.erb

@@ -0,0 +1,46 @@
+<%= content_tag(:'lg-password-confirmation', **tag_options) do %>
+  <%= render ValidatedFieldComponent.new(
+        form: form,
+        name: :password,
+        type: :password,
+        label: default_label,
+        required: true,
+        **field_options,
+        input_html: field_options[:input_html].to_h.merge(
+          id: input_id,
+          class: ['password-confirmation__input', *field_options.dig(:input_html, :class)],
+        ),
+      ) %>
+  <%= render ValidatedFieldComponent.new(
+        form: form,
+        name: :password_confirmation,
+        type: :password_confirmation,
+        label: confirmation_label,
+        required: true,
+        **field_options,
+        input_html: field_options[:input_html].to_h.merge(
+          id: input_confirmation_id,
+          class: ['password-confirmation__input-confirmation', *field_options.dig(:input_html, :class)],
+        ),
+        wrapper_html: field_options[:wrapper_html].to_h.merge(
+          class: ['margin-bottom-0', *field_options.dig(:wrapper_html, :class)],
+        ),
+        error_messages: {
+          valueMissing: t('components.password_confirmation.errors.empty'),
+        },
+      ) %>      
+  <input
+    id="<%= toggle_id %>"
+    type="checkbox"
+    class="usa-checkbox__input password-confirmation__toggle"
+    aria-controls="<%= input_id %> <%= input_confirmation_id %>"
+  >
+  <label
+    for="<%= toggle_id %>"
+    class="usa-checkbox__label password-confirmation__toggle-label"
+  >
+    <%= toggle_label %>
+  </label>
+
+  <%= form.hidden_field :confirmation_enabled, value: true %>
+<% end %>

app/components/password_confirmation_component.rb

@@ -0,0 +1,35 @@
+class PasswordConfirmationComponent < BaseComponent
+  attr_reader :form, :toggle_label, :field_options, :tag_options
+
+  def initialize(
+    form:,
+    toggle_label: t('components.password_confirmation.toggle_label'),
+    field_options: {},
+    **tag_options
+  )
+    @form = form
+    @toggle_label = toggle_label
+    @field_options = field_options
+    @tag_options = tag_options
+  end
+
+  def default_label
+    t('forms.password')
+  end
+
+  def confirmation_label
+    t('components.password_confirmation.confirm_label')
+  end
+
+  def toggle_id
+    "password-confirmation-toggle-#{unique_id}"
+  end
+
+  def input_id
+    "password-confirmation-input-#{unique_id}"
+  end
+
+  def input_confirmation_id
+    "password-confirmation-input-confirmation-#{unique_id}"
+  end
+end

app/components/password_confirmation_component.ts

@@ -0,0 +1 @@
+import '@18f/identity-password-confirmation/password-confirmation-element';

app/controllers/sign_up/passwords_controller.rb

@@ -13,11 +13,8 @@ def new
 
     def create
       result = password_form.submit(permitted_params)
-      analytics.password_creation(**result.to_h)
-      irs_attempts_api_tracker.user_registration_password_submitted(
-        success: result.success?,
-        failure_reason: irs_attempts_api_tracker.parse_failure_reason(result),
-      )
+
+      track_analytics(result)
 
       if result.success?
         process_successful_password_creation
@@ -41,8 +38,21 @@ def render_page
       )
     end
 
+    def track_analytics(result)
+      failure_reason = irs_attempts_api_tracker.parse_failure_reason(result)
+
+      analytics.password_creation(**result.to_h)
+      irs_attempts_api_tracker.user_registration_password_submitted(
+        success: result.success?,
+        failure_reason: failure_reason,
+      )
+    end
+
     def permitted_params
-      params.require(:password_form).permit(:confirmation_token, :password)
+      params.require(:password_form).permit(
+        :confirmation_token, :password, :password_confirmation,
+        :confirmation_enabled
+      )
     end
 
     def process_successful_password_creation
@@ -58,7 +68,7 @@ def process_successful_password_creation
     end
 
     def password_form
-      @password_form ||= PasswordForm.new(@user)
+      @password_form ||= PasswordForm.new(@user, validate_confirmation: true)
     end
 
     def process_unsuccessful_password_creation

app/forms/password_form.rb

@@ -2,15 +2,16 @@ class PasswordForm
   include ActiveModel::Model
   include FormPasswordValidator
 
-  def initialize(user)
+  def initialize(user, options = {})
     @user = user
+    @validate_confirmation = options.fetch(:validate_confirmation, false)
   end
 
   def submit(params)
-    submitted_password = params[:password]
+    @password = params[:password]
+    @password_confirmation = params[:password_confirmation]
     @request_id = params.fetch(:request_id, '')
-
-    self.password = submitted_password
+    @confirmation_enabled = params[:confirmation_enabled].presence
 
     FormResponse.new(success: valid?, errors: errors, extra: extra_analytics_attributes)
   end

app/javascript/packages/password-confirmation/README.md

@@ -0,0 +1,33 @@
+# `@18f/password-confirmation`
+
+Custom element implementation that adds password inputs with validation for confirmation.
+
+## Usage
+
+Importing the element will register the `<lg-password-confirmation>` custom element:
+
+```ts
+import '@18f/password-confirmation/password-confirmation-element';
+```
+
+The custom element will implement the behavior for validation, but all markup must already exist.
+
+```html
+<lg-password-confirmation>
+  <label for="input-1">Password</label>
+  <input id="input-1" class="password-confirmation__input">
+  <label for="input-1b">Confirm password</label>
+  <input id="input-1b" class="password-confirmation__input-confirmation">
+  <div class="password-confirmation__toggle-wrapper">
+    <input
+      id="toggle-1"
+      type="checkbox"
+      class="password-confirmation__toggle"
+      aria-controls="input-1"
+    >
+    <label for="toggle-1" class="usa-checkbox__label password-confirmation__toggle-label">
+      Show password
+    </label>
+  </div>`;
+</lg-password-confirmation>
+```

app/javascript/packages/password-confirmation/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@18f/identity-password-confirmation",
+  "private": true,
+  "version": "1.0.0"
+}

app/javascript/packages/password-confirmation/password-confirmation-element.spec.ts

@@ -0,0 +1,94 @@
+import userEvent from '@testing-library/user-event';
+import { getByLabelText, waitFor } from '@testing-library/dom';
+import { useSandbox } from '@18f/identity-test-helpers';
+import * as analytics from '@18f/identity-analytics';
+import './password-confirmation-element';
+import type PasswordConfirmationElement from './password-confirmation-element';
+
+describe('PasswordConfirmationElement', () => {
+  let element: PasswordConfirmationElement;
+  let input1: HTMLInputElement;
+  let input2: HTMLInputElement;
+  let idCounter = 0;
+  const sandbox = useSandbox();
+
+  function createElement() {
+    element = document.createElement('lg-password-confirmation') as PasswordConfirmationElement;
+    const idSuffix = ++idCounter;
+    element.innerHTML = `
+      <label for="input-${idSuffix}">Password</label>
+      <input id="input-${idSuffix}" class="password-confirmation__input">
+      <label for="input-${idSuffix}b">Confirm password</label>
+      <input id="input-${idSuffix}b" class="password-confirmation__input-confirmation">
+      <div class="password-confirmation__toggle-wrapper">
+        <input
+          id="toggle-${idSuffix}"
+          type="checkbox"
+          class="password-confirmation__toggle"
+          aria-controls="input-${idSuffix}"
+        >
+        <label for="toggle-${idSuffix}" class="usa-checkbox__label password-confirmation__toggle-label">
+          Show password
+        </label>
+      </div>`;
+    document.body.appendChild(element);
+    return element;
+  }
+
+  beforeEach(() => {
+    element = createElement();
+    input1 = getByLabelText(element, 'Password') as HTMLInputElement;
+    input2 = getByLabelText(element, 'Confirm password') as HTMLInputElement;
+  });
+
+  it('initializes input type', () => {
+    expect(input1.type).to.equal('password');
+  });
+
+  it('changes input type on toggle', async () => {
+    const toggle = getByLabelText(element, 'Show password') as HTMLInputElement;
+
+    await userEvent.click(toggle);
+
+    expect(input1.type).to.equal('text');
+  });
+
+  it('logs an event when clicking the Show Password button', async () => {
+    sandbox.stub(analytics, 'trackEvent');
+    const toggle = getByLabelText(element, 'Show password') as HTMLInputElement;
+
+    await userEvent.click(toggle);
+
+    expect(analytics.trackEvent).to.have.been.calledWith('Show Password button clicked', {
+      path: window.location.pathname,
+    });
+  });
+
+  describe('Password validation', () => {
+    it('validates passwords in both directions', async () => {
+      await userEvent.type(input1, 'salty pickles');
+      await userEvent.type(input2, 'salty pickles2');
+      await waitFor(() => {
+        expect(input2.checkValidity()).to.be.false();
+      });
+
+      await userEvent.clear(input1);
+      await userEvent.type(input1, 'salty pickles2');
+      await waitFor(() => {
+        expect(input2.checkValidity()).to.be.true();
+      });
+
+      await userEvent.clear(input1);
+      await userEvent.type(input1, 'salty pickles3');
+      await waitFor(() => {
+        expect(input2.checkValidity()).to.be.false();
+      });
+
+      await userEvent.clear(input2);
+      await userEvent.type(input2, 'salty pickles3');
+      await waitFor(() => {
+        expect(input2.checkValidity()).to.be.true();
+      });
+    });
+  });
+});

app/javascript/packages/password-confirmation/password-confirmation-element.ts

@@ -0,0 +1,67 @@
+import { trackEvent } from '@18f/identity-analytics';
+import { t } from '@18f/identity-i18n';
+
+class PasswordConfirmationElement extends HTMLElement {
+  connectedCallback() {
+    this.toggle.addEventListener('change', () => this.setInputType());
+    this.toggle.addEventListener('click', () => this.trackToggleEvent());
+    this.input.addEventListener('input', () => this.validatePassword());
+    this.inputConfirmation.addEventListener('input', () => this.validatePassword());
+    this.setInputType();
+  }
+
+  /**
+   * Checkbox toggle for visibility.
+   */
+  get toggle(): HTMLInputElement {
+    return this.querySelector('.password-confirmation__toggle')! as HTMLInputElement;
+  }
+
+  /**
+   * Password input.
+   */
+  get input(): HTMLInputElement {
+    return this.querySelector('.password-confirmation__input')! as HTMLInputElement;
+  }
+
+  /**
+   * Password confirmation input.
+   */
+  get inputConfirmation(): HTMLInputElement {
+    return this.querySelector('.password-confirmation__input-confirmation')! as HTMLInputElement;
+  }
+
+  setInputType() {
+    const checked = this.toggle.checked ? 'text' : 'password';
+    this.input.type = checked;
+    this.inputConfirmation.type = checked;
+  }
+
+  trackToggleEvent() {
+    trackEvent('Show Password button clicked', { path: window.location.pathname });
+  }
+
+  validatePassword() {
+    const password = this.input.value;
+    const confirmation = this.inputConfirmation.value;
+
+    if (password && password !== confirmation) {
+      const errorMsg = t('components.password_confirmation.errors.mismatch');
+      this.inputConfirmation.setCustomValidity(errorMsg);
+    } else {
+      this.inputConfirmation.setCustomValidity('');
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'lg-password-confirmation': PasswordConfirmationElement;
+  }
+}
+
+if (!customElements.get('lg-password-confirmation')) {
+  customElements.define('lg-password-confirmation', PasswordConfirmationElement);
+}
+
+export default PasswordConfirmationElement;

app/javascript/packages/password-toggle/package.json

@@ -1,13 +1,5 @@
 {
   "name": "@18f/identity-password-toggle",
   "private": true,
-  "version": "1.0.0",
-  "peerDependencies": {
-    "react": "^17.0.2"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
-  }
+  "version": "1.0.0"
 }