Refactor account personal key reset to use verify flow steps

app/javascript/packages/verify-flow/context/address-verification-method-context.spec.tsx

@@ -12,7 +12,7 @@ describe('AddressVerificationMethodContextProvider', () => {
     );
     return (
       <>
-        <div>Current value: {addressVerificationMethod}</div>
+        <div>Current value: {String(addressVerificationMethod)}</div>
         <button
           type="button"
           onClick={() =>
@@ -32,7 +32,7 @@ describe('AddressVerificationMethodContextProvider', () => {
       </AddressVerificationMethodContextProvider>,
     );
 
-    expect(getByText('Current value: phone')).to.exist();
+    expect(getByText('Current value: null')).to.exist();
   });
 
   it('can be overridden with an initial method', () => {

app/javascript/packages/verify-flow/context/address-verification-method-context.tsx

@@ -5,7 +5,7 @@ import type { ReactNode } from 'react';
 /**
  * Mechanisms by which a user can verify their address.
  */
-export type AddressVerificationMethod = 'phone' | 'gpo';
+export type AddressVerificationMethod = 'phone' | 'gpo' | null;
 
 /**
  * Context provider props.
@@ -40,7 +40,7 @@ interface AddressVerificationMethodContextValue {
 /**
  * Default address verification method.
  */
-const DEFAULT_METHOD: AddressVerificationMethod = 'phone';
+const DEFAULT_METHOD: AddressVerificationMethod = null;
 
 /**
  * Address verification method context container.

app/javascript/packages/verify-flow/index.ts

@@ -2,6 +2,8 @@ export { default as FlowContext } from './context/flow-context';
 export { SecretsContextProvider } from './context/secrets-context';
 export { default as StartOverOrCancel } from './start-over-or-cancel';
 export { default as VerifyFlow } from './verify-flow';
+export { default as personalKeyStep } from './steps/personal-key';
+export { default as personalKeyConfirmStep } from './steps/personal-key-confirm';
 
 export type { SecretValues } from './context/secrets-context';
 export type { AddressVerificationMethod } from './context/address-verification-method-context';

app/javascript/packages/verify-flow/steps/personal-key/personal-key-step.tsx

@@ -20,11 +20,12 @@ function PersonalKeyStep({ value }: PersonalKeyStepProps) {
 
   return (
     <>
-      <Alert type="success" className="margin-bottom-4">
-        {addressVerificationMethod === 'phone'
-          ? t('idv.messages.confirm')
-          : t('idv.messages.mail_sent')}
-      </Alert>
+      {addressVerificationMethod && (
+        <Alert type="success" className="margin-bottom-4">
+          {addressVerificationMethod === 'phone' && t('idv.messages.confirm')}
+          {addressVerificationMethod === 'gpo' && t('idv.messages.mail_sent')}
+        </Alert>
+      )}
       <PageHeading>{t('headings.personal_key')}</PageHeading>
       <p>{t('instructions.personal_key.info')}</p>
       <div className="full-width-box margin-y-5">

app/javascript/packages/verify-flow/verify-flow.spec.tsx

@@ -4,11 +4,16 @@ import userEvent from '@testing-library/user-event';
 import * as analytics from '@18f/identity-analytics';
 import { useSandbox } from '@18f/identity-test-helpers';
 import { STEPS } from './steps';
-import VerifyFlow from './verify-flow';
+import VerifyFlow, { VerifyFlowProps } from './verify-flow';
 
 describe('VerifyFlow', () => {
   const sandbox = useSandbox();
   const personalKey = '0000-0000-0000-0000';
+  const DEFAULT_PROPS = {
+    basePath: '/',
+    initialAddressVerificationMethod: 'phone',
+    onComplete: () => {},
+  } as VerifyFlowProps;
 
   beforeEach(() => {
     sandbox.spy(analytics, 'trackEvent');
@@ -23,7 +28,7 @@ describe('VerifyFlow', () => {
     const onComplete = sandbox.spy();
 
     const { getByText, findByText, getByLabelText } = render(
-      <VerifyFlow initialValues={{ personalKey }} onComplete={onComplete} basePath="/" />,
+      <VerifyFlow {...DEFAULT_PROPS} initialValues={{ personalKey }} onComplete={onComplete} />,
     );
 
     // Password confirm
@@ -62,10 +67,9 @@ describe('VerifyFlow', () => {
     it('sets details according to the first enabled steps', () => {
       render(
         <VerifyFlow
+          {...DEFAULT_PROPS}
           initialValues={{ personalKey }}
-          onComplete={() => {}}
           enabledStepNames={[STEPS[1].name]}
-          basePath="/"
         />,
       );
 

app/javascript/packages/verify-flow/verify-flow.tsx

@@ -45,7 +45,7 @@ export interface VerifyFlowValues {
   completionURL?: string;
 }
 
-interface VerifyFlowProps {
+export interface VerifyFlowProps {
   /**
    * Initial values for the form, if applicable.
    */

app/javascript/packs/verify-personal-key.tsx

@@ -0,0 +1,24 @@
+import { render } from 'react-dom';
+import { FormSteps } from '@18f/identity-form-steps';
+import { personalKeyStep, personalKeyConfirmStep } from '@18f/identity-verify-flow';
+
+interface AppRootValues {
+  personalKey: string;
+}
+
+interface AppRootElement extends HTMLElement {
+  dataset: DOMStringMap & AppRootValues;
+}
+
+const appRoot = document.getElementById('app-root') as AppRootElement;
+const appForm = document.getElementById('app-form') as HTMLFormElement;
+
+render(
+  <FormSteps
+    steps={[personalKeyStep, personalKeyConfirmStep]}
+    initialValues={{ personalKey: appRoot.dataset.personalKey }}
+    promptOnNavigate={false}
+    onComplete={() => appForm.submit()}
+  />,
+  appRoot,
+);

app/views/users/personal_keys/show.html.erb

@@ -1,3 +1,7 @@
 <% title t('titles.personal_key') %>
 
-<%= render 'shared/personal_key', code: @code, update_path: manage_personal_key_path %>
+<%= form_tag(manage_personal_key_path, method: 'post', id: 'app-form') %>
+<%= content_tag(:div, '', id: 'app-root', data: { personal_key: @code }) do %>
+  <%= render 'shared/personal_key', code: @code, update_path: manage_personal_key_path %>
+<% end %>
+<%= javascript_packs_tag_once('verify-personal-key') %>

spec/features/idv/steps/confirmation_step_spec.rb

@@ -3,54 +3,78 @@
 feature 'idv confirmation step', js: true do
   include IdvStepHelper
 
-  it_behaves_like 'idv confirmation step'
-  it_behaves_like 'idv confirmation step', :oidc
-  it_behaves_like 'idv confirmation step', :saml
+  let(:idv_api_enabled_steps) { [] }
+  let(:sp) { nil }
+  let(:address_verification_mechanism) { :phone }
 
-  context 'personal key information and actions' do
-    before do
-      @user = sign_in_and_2fa_user
+  before do
+    allow(IdentityConfig.store).to receive(:idv_api_enabled_steps).and_return(idv_api_enabled_steps)
+    start_idv_from_sp(sp)
+    complete_idv_steps_before_confirmation_step(address_verification_mechanism)
+  end
 
-      visit idv_path
+  it_behaves_like 'personal key page'
 
-      complete_idv_steps_before_confirmation_step(@user)
-    end
+  it 'shows status content for phone verification progress' do
+    expect(page).to have_content(t('idv.messages.confirm'))
+    expect(page).to have_css(
+      '.step-indicator__step--current',
+      text: t('step_indicator.flows.idv.secure_account'),
+    )
+    expect(page).to have_css(
+      '.step-indicator__step--complete',
+      text: t('step_indicator.flows.idv.verify_phone_or_address'),
+    )
+    expect(page).not_to have_css('.step-indicator__step--pending')
+  end
+
+  it 'allows the user to refresh and still displays the personal key' do
+    # Visit the current path is the same as refreshing
+    visit current_path
+    expect(page).to have_content(t('headings.personal_key'))
+  end
+
+  context 'with idv app feature enabled' do
+    let(:idv_api_enabled_steps) { ['password_confirm', 'personal_key', 'personal_key_confirm'] }
+
+    it_behaves_like 'personal key page'
 
     it 'allows the user to refresh and still displays the personal key' do
       # Visit the current path is the same as refreshing
       visit current_path
       expect(page).to have_content(t('headings.personal_key'))
     end
-
-    it_behaves_like 'personal key page'
   end
 
-  context 'with idv app feature enabled' do
-    before do
-      allow(IdentityConfig.store).to receive(:idv_api_enabled_steps).
-        and_return(['password_confirm', 'personal_key', 'personal_key_confirm'])
+  context 'verifying by gpo' do
+    let(:address_verification_mechanism) { :gpo }
+
+    it 'shows status content for gpo verification progress' do
+      expect(page).to have_content(t('idv.messages.mail_sent'))
+      expect(page).to have_css(
+        '.step-indicator__step--current',
+        text: t('step_indicator.flows.idv.secure_account'),
+      )
+      expect(page).to have_css(
+        '.step-indicator__step--pending',
+        text: t('step_indicator.flows.idv.verify_phone_or_address'),
+      )
     end
 
-    it_behaves_like 'idv confirmation step'
-    it_behaves_like 'idv confirmation step', :oidc
-    it_behaves_like 'idv confirmation step', :saml
+    it_behaves_like 'personal key page', :gpo
+  end
 
-    context 'personal key information and actions' do
-      before do
-        @user = sign_in_and_2fa_user
+  context 'with associated sp' do
+    let(:sp) { :oidc }
 
-        visit idv_path
+    it 'redirects to the completions page and then to the SP' do
+      acknowledge_and_confirm_personal_key
 
-        complete_idv_steps_before_confirmation_step(@user)
-      end
+      expect(page).to have_current_path(sign_up_completed_path)
 
-      it 'allows the user to refresh and still displays the personal key' do
-        # Visit the current path is the same as refreshing
-        visit current_path
-        expect(page).to have_content(t('headings.personal_key'))
-      end
+      click_agree_and_continue
 
-      it_behaves_like 'personal key page'
+      expect(current_url).to start_with('http://localhost:7654/auth/result')
     end
   end
 end

spec/features/users/regenerate_personal_key_spec.rb

@@ -1,6 +1,6 @@
 require 'rails_helper'
 
-feature 'View personal key' do
+feature 'View personal key', js: true do
   include XPathHelper
   include PersonalKeyHelper
   include SamlAuthHelper
@@ -31,7 +31,7 @@
     end
 
     context 'regenerating new code after canceling edit password action' do
-      scenario 'displays new code', js: true do
+      scenario 'displays new code' do
         sign_in_and_2fa_user(user)
         old_digest = user.encrypted_recovery_code_digest
 
@@ -59,7 +59,7 @@
       end
     end
 
-    context 'personal key actions and information' do
+    describe 'personal key actions and information' do
       before do
         sign_in_and_2fa_user(user)
         visit account_two_factor_authentication_path
@@ -70,101 +70,4 @@
       it_behaves_like 'personal key page'
     end
   end
-
-  context 'with javascript enabled', js: true do
-    it 'prompts the user to enter their personal key to confirm they have it' do
-      sign_in_and_2fa_user(user)
-      visit account_two_factor_authentication_path
-      click_on(t('account.links.regenerate_personal_key'), match: :prefer_exact)
-      click_continue
-
-      click_acknowledge_personal_key
-
-      expect_confirmation_modal_to_appear_with_first_code_field_in_focus
-
-      expect(page).to have_selector(:link_or_button, 'Back')
-
-      click_back_button
-
-      expect_to_be_back_on_manage_personal_key_page_with_continue_button_in_focus
-
-      click_acknowledge_personal_key
-      submit_form_without_entering_the_code
-      submit_form_with_the_wrong_code
-
-      expect(current_path).not_to eq account_path
-
-      visit manage_personal_key_path
-
-      acknowledge_and_confirm_personal_key
-
-      expect(current_path).to eq account_path
-    end
-
-    it 'confirms personal key on mobile', driver: :headless_chrome_mobile do
-      sign_in_and_2fa_user(user)
-      visit account_two_factor_authentication_path
-      click_on(t('account.links.regenerate_personal_key'), match: :prefer_exact)
-      click_continue
-
-      click_acknowledge_personal_key
-
-      expect_confirmation_modal_to_appear_with_first_code_field_in_focus
-
-      expect(page).to have_selector(:link_or_button, 'Back')
-
-      click_back_button
-
-      expect_to_be_back_on_manage_personal_key_page_with_continue_button_in_focus
-
-      click_acknowledge_personal_key
-      submit_form_without_entering_the_code
-
-      expect(current_path).not_to eq account_path
-
-      visit manage_personal_key_path
-      acknowledge_and_confirm_personal_key
-
-      expect(current_path).to eq account_path
-    end
-  end
-end
-
-def sign_up_and_view_personal_key
-  sign_up_and_set_password
-  select_2fa_option('phone')
-  fill_in 'new_phone_form_phone', with: '202-555-1212'
-  click_send_security_code
-  fill_in_code_with_last_phone_otp
-  click_submit_default
-end
-
-def expect_confirmation_modal_to_appear_with_first_code_field_in_focus
-  expect(page.find(':focus')).to eq page.find_field(t('forms.personal_key.confirmation_label'))
-end
-
-def click_back_button
-  click_on t('forms.buttons.back')
-end
-
-def expect_to_be_back_on_manage_personal_key_page_with_continue_button_in_focus
-  expect(page).to have_xpath(
-    "//div[@id='personal-key-confirm'][@class='display-none']", visible: false
-  )
-  expect(page.evaluate_script('document.activeElement.value')).to eq(
-    t('forms.buttons.continue'),
-  )
-end
-
-def submit_form_without_entering_the_code
-  within('[role=dialog]') { click_continue }
-  expect(page).to have_content(t('simple_form.required.text'))
-  expect(page).not_to have_content(t('users.personal_key.confirmation_error'))
-end
-
-def submit_form_with_the_wrong_code
-  fill_in 'personal_key', with: 'hellohellohello'
-  within('[role=dialog]') { click_continue }
-  expect(page).to have_content(t('users.personal_key.confirmation_error'))
-  expect(page).not_to have_content(t('simple_form.required.text'))
 end