LG-6066: Initialize personal key value and render badge content

app/controllers/verify_controller.rb

@@ -3,5 +3,15 @@ class VerifyController < ApplicationController
 
   check_or_render_not_found -> { IdentityConfig.store.idv_api_enabled }, only: [:show]
 
-  def show; end
+  def show
+    @app_data = app_data
+  end
+
+  private
+
+  def app_data
+    {
+      initial_values: { 'personalKey' => '0000-0000-0000-0000' },
+    }
+  end
 end

app/javascript/packages/form-steps/form-steps.spec.tsx

@@ -218,6 +218,18 @@ describe('FormSteps', () => {
     expect(event.returnValue).to.be.true();
   });
 
+  context('promptOnNavigate prop is set to false', () => {
+    it('does not prompt on navigate', () => {
+      render(<FormSteps steps={STEPS} promptOnNavigate={false} />);
+
+      const event = new window.Event('beforeunload', { cancelable: true, bubbles: false });
+      window.dispatchEvent(event);
+
+      expect(event.defaultPrevented).to.be.false();
+      expect(event.returnValue).to.be.true();
+    });
+  });
+
   it('pushes step to URL', () => {
     const { getByText } = render(<FormSteps steps={STEPS} />);
 

app/javascript/packages/form-steps/form-steps.tsx

@@ -125,6 +125,12 @@ interface FormStepsProps {
    * Callback triggered on step change.
    */
   onStepChange?: () => void;
+
+  /**
+   * Whether to prompt the user about unsaved changes when navigating away from an in-progress form.
+   * Defaults to true.
+   */
+  promptOnNavigate?: boolean;
 }
 
 /**
@@ -164,6 +170,7 @@ function FormSteps({
   initialValues = {},
   initialActiveErrors = [],
   autoFocus,
+  promptOnNavigate = true,
 }: FormStepsProps) {
   const [values, setValues] = useState(initialValues);
   const [activeErrors, setActiveErrors] = useState(initialActiveErrors);
@@ -278,7 +285,7 @@ function FormSteps({
 
   return (
     <form ref={formRef} onSubmit={toNextStep}>
-      {Object.keys(values).length > 0 && <PromptOnNavigate />}
+      {promptOnNavigate && Object.keys(values).length > 0 && <PromptOnNavigate />}
       {stepErrors.map((error) => (
         <Alert key={error.message} type="error" className="margin-bottom-4">
           {error.message}

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

@@ -1,6 +1,14 @@
 import { FormSteps } from '@18f/identity-form-steps';
 import { STEPS } from './steps';
 
-export function VerifyFlow() {
-  return <FormSteps steps={STEPS} />;
+export interface VerifyFlowValues {
+  personalKey?: string;
+}
+
+interface VerifyFlowProps {
+  initialValues?: Partial<VerifyFlowValues>;
+}
+
+export function VerifyFlow({ initialValues = {} }: VerifyFlowProps) {
+  return <FormSteps steps={STEPS} initialValues={initialValues} promptOnNavigate={false} />;
 }

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

@@ -1,13 +1,43 @@
 import { PageHeading, Button } from '@18f/identity-components';
 import { t } from '@18f/identity-i18n';
+import { formatHTML } from '@18f/identity-react-i18n';
 import { FormStepsContinueButton } from '@18f/identity-form-steps';
+import type { FormStepComponentProps } from '@18f/identity-form-steps';
+import type { VerifyFlowValues } from '../..';
+
+interface PersonalKeyStepProps extends FormStepComponentProps<VerifyFlowValues> {}
+
+function PersonalKeyStep({ value }: PersonalKeyStepProps) {
+  const personalKey = value.personalKey!;
 
-function PersonalKeyStep() {
   return (
     <>
       <PageHeading>{t('headings.personal_key')}</PageHeading>
       <p>{t('instructions.personal_key.info')}</p>
-      <div className="full-width-box margin-y-5" />
+      <div className="full-width-box margin-y-5">
+        <div className="border-y border-primary-light bg-primary-lightest padding-y-3 text-center">
+          <h2 className="margin-y-0">{t('users.personal_key.header')}</h2>
+          <div className="bg-personal-key padding-top-4 margin-y-2">
+            <div className="padding-x-0 tablet:padding-x-1 padding-y-2 separator-text bg-pk-box">
+              {personalKey.split('-').map((segment) => (
+                <strong key={segment} className="separator-text__code">
+                  {segment}
+                </strong>
+              ))}
+            </div>
+          </div>
+          <p className="margin-y-0">
+            {formatHTML(
+              t('users.personal_key.generated_on_html', {
+                date: `<strong>${new Intl.DateTimeFormat([], {
+                  dateStyle: 'long',
+                }).format()}</strong>`,
+              }),
+              { strong: 'strong' },
+            )}
+          </p>
+        </div>
+      </div>
       <Button isOutline className="margin-right-2 margin-bottom-2 tablet:margin-bottom-0">
         {t('forms.backup_code.download')}
       </Button>

app/javascript/packs/verify-flow.tsx

@@ -2,4 +2,9 @@ import { render } from 'react-dom';
 import { VerifyFlow } from '@18f/identity-verify-flow';
 
 const appRoot = document.getElementById('app-root')!;
-render(<VerifyFlow />, appRoot);
+let initialValues;
+try {
+  initialValues = JSON.parse(appRoot.dataset.initialValues!);
+} catch {}
+
+render(<VerifyFlow initialValues={initialValues} />, appRoot);

app/views/verify/show.html.erb

@@ -1,2 +1,2 @@
-<div id="app-root"></div>
+<%= content_tag(:div, '', id: 'app-root', data: @app_data) %>
 <% javascript_packs_tag_once 'verify-flow' %>