LG-6205: Add endpoint, button to trigger password reset (IdV app)

app/assets/stylesheets/components/_spinner-button.scss

@@ -18,11 +18,23 @@ lg-spinner-button {
     button:not([type]),
     [type='submit'],
     [type='button'] {
-      background-color: color('primary-darker');
       color: transparent;
       opacity: 1;
     }
   }
+
+  &:not(.spinner-button--outline) .spinner-button__content {
+    a,
+    button:not([type]),
+    [type='submit'],
+    [type='button'] {
+      background-color: color('primary-darker');
+    }
+
+    .spinner-dots {
+      color: color('white');
+    }
+  }
 }
 
 .spinner-button__action-message {

app/components/spinner_button_component.html.erb

@@ -1,7 +1,7 @@
-<lg-spinner-button>
+<%= content_tag(:'lg-spinner-button', class: css_class) do %>
   <div class="spinner-button__content">
     <%= render ButtonComponent.new(type: :button, **button_options).with_content(content) %>
-    <span class="spinner-dots spinner-dots--centered text-white" aria-hidden="true">
+    <span class="spinner-dots spinner-dots--centered" aria-hidden="true">
       <span class="spinner-dots__dot"></span>
       <span class="spinner-dots__dot"></span>
       <span class="spinner-dots__dot"></span>
@@ -13,4 +13,4 @@
                 data: { message: action_message },
                 class: 'spinner-button__action-message usa-sr-only' %>
   <% end %>
-</lg-spinner-button>
+<% end %>

app/components/spinner_button_component.rb

@@ -1,11 +1,16 @@
 class SpinnerButtonComponent < BaseComponent
-  attr_reader :action_message, :button_options
+  attr_reader :action_message, :button_options, :outline
 
   # @param [String] action_message Message describing the action being performed, shown visually to
   #                                users when the animation has been active for a long time, and
   #                                immediately to users of assistive technology.
   def initialize(action_message: nil, **button_options)
     @action_message = action_message
     @button_options = button_options
+    @outline = button_options[:outline]
+  end
+
+  def css_class
+    'spinner-button--outline' if outline
   end
 end

app/controllers/api/verify/password_reset_controller.rb

@@ -0,0 +1,23 @@
+module Api
+  module Verify
+    class PasswordResetController < Api::BaseController
+      def create
+        analytics.idv_forgot_password_confirmed
+        request_id = sp_session[:request_id]
+        email = current_user.email
+        reset_password(email, request_id)
+
+        render json: { redirect_url: forgot_password_url(request_id: request_id) },
+               status: :accepted
+      end
+
+      private
+
+      def reset_password(email, request_id)
+        sign_out
+        RequestPasswordReset.new(email: email, request_id: request_id, analytics: analytics).perform
+        session[:email] = email
+      end
+    end
+  end
+end

app/controllers/verify_controller.rb

@@ -10,7 +10,6 @@ class VerifyController < ApplicationController
   before_action :confirm_profile_has_been_created, if: :first_step_is_personal_key?
 
   def show
-    session[:email] = 'bruce.wayne@batcave.com'
     @app_data = app_data
   end
 

app/javascript/packages/spinner-button/spinner-button.spec.tsx

@@ -73,4 +73,13 @@ describe('SpinnerButton', () => {
 
     expect(button.classList.contains('usa-button--outline')).to.be.true();
   });
+
+  it('includes additional class for outline buttons', () => {
+    const { getByRole } = render(<SpinnerButton isOutline />);
+
+    const button = getByRole('button')!;
+    const spinner = button.closest('lg-spinner-button')!;
+
+    expect(spinner.classList.contains('spinner-button--outline')).to.be.true();
+  });
 });

app/javascript/packages/spinner-button/spinner-button.tsx

@@ -9,7 +9,7 @@ declare global {
   namespace JSX {
     interface IntrinsicElements {
       'lg-spinner-button': HTMLAttributes<SpinnerButtonElement> &
-        RefAttributes<SpinnerButtonElement>;
+        RefAttributes<SpinnerButtonElement> & { class?: string };
     }
   }
 }
@@ -34,21 +34,30 @@ interface SpinnerButtonProps extends ButtonProps {
 export type SpinnerButtonRefHandle = SpinnerButtonElement;
 
 function SpinnerButton(
-  { spinOnClick = true, actionMessage, longWaitDurationMs, ...buttonProps }: SpinnerButtonProps,
+  {
+    spinOnClick = true,
+    actionMessage,
+    longWaitDurationMs,
+    isOutline,
+    ...buttonProps
+  }: SpinnerButtonProps,
   ref: ForwardedRef<SpinnerButtonElement | null>,
 ) {
   const elementRef = useRef<SpinnerButtonRefHandle>(null);
   useImperativeHandle(ref, () => elementRef.current!);
 
+  const classes = isOutline ? 'spinner-button--outline' : undefined;
+
   return (
     <lg-spinner-button
       spin-on-click={spinOnClick}
       long-wait-duration-ms={longWaitDurationMs}
       ref={elementRef}
+      class={classes}
     >
       <div className="spinner-button__content">
-        <Button {...buttonProps} />
-        <span className="spinner-dots spinner-dots--centered text-white" aria-hidden="true">
+        <Button isOutline={isOutline} {...buttonProps} />
+        <span className="spinner-dots spinner-dots--centered" aria-hidden="true">
           <span className="spinner-dots__dot" />
           <span className="spinner-dots__dot" />
           <span className="spinner-dots__dot" />

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

@@ -20,11 +20,6 @@ const FlowContext = createContext({
    * The path to which the current step is appended to create the current step URL.
    */
   basePath: '',
-
-  /**
-   * URL for reset password page in rails used for redirect
-   */
-  resetPasswordUrl: '',
 });
 
 FlowContext.displayName = 'FlowContext';

app/javascript/packages/verify-flow/services/api.ts

@@ -1,4 +1,4 @@
-export interface ErrorResponse<Field extends string> {
+export interface ErrorResponse<Field extends string = string> {
   error: Record<Field, [string, ...string[]]>;
 }
 

app/javascript/packages/verify-flow/start-over-or-cancel.spec.tsx

@@ -28,7 +28,6 @@ describe('StartOverOrCancel', () => {
             cancelURL: 'http://example.test/cancel',
             currentStep: 'one',
             basePath: '',
-            resetPasswordUrl: '',
           }}
         >
           <StartOverOrCancel />

app/javascript/packages/verify-flow/steps/password-confirm/forgot-password.tsx

@@ -1,20 +1,13 @@
-import { useContext } from 'react';
 import { PageHeading, Button } from '@18f/identity-components';
 import { t } from '@18f/identity-i18n';
 import { getAssetPath } from '@18f/identity-assets';
-import { FlowContext } from '@18f/identity-verify-flow';
+import PasswordResetButton from './password-reset-button';
 
 interface ForgotPasswordProps {
   goBack: () => void;
 }
 
 export function ForgotPassword({ goBack }: ForgotPasswordProps) {
-  const { resetPasswordUrl } = useContext(FlowContext);
-
-  function goToResetPassword() {
-    window.location.href = resetPasswordUrl!;
-  }
-
   return (
     <>
       <img
@@ -36,9 +29,7 @@ export function ForgotPassword({ goBack }: ForgotPasswordProps) {
         </Button>
       </div>
       <div className="margin-top-2">
-        <Button isBig isOutline isWide onClick={goToResetPassword}>
-          {t('idv.forgot_password.reset_password')}
-        </Button>
+        <PasswordResetButton />
       </div>
     </>
   );

app/javascript/packages/verify-flow/steps/password-confirm/password-reset-button.spec.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useSandbox } from '@18f/identity-test-helpers';
+import PasswordResetButton, { API_ENDPOINT } from './password-reset-button';
+
+describe('PasswordResetButton', () => {
+  const sandbox = useSandbox();
+
+  const REDIRECT_URL = '/password_reset';
+
+  before(() => {
+    sandbox
+      .stub(window, 'fetch')
+      .withArgs(API_ENDPOINT)
+      .resolves({
+        status: 202,
+        json: () => Promise.resolve({ redirect_url: REDIRECT_URL }),
+      } as Response);
+  });
+
+  it('triggers password reset API call and redirects', (done) => {
+    const { getByRole } = render(<PasswordResetButton onNavigate={() => done()} />);
+
+    const button = getByRole('button');
+    userEvent.click(button);
+  });
+});

app/javascript/packages/verify-flow/steps/password-confirm/password-reset-button.tsx

@@ -0,0 +1,48 @@
+import { SpinnerButton } from '@18f/identity-spinner-button';
+import { t } from '@18f/identity-i18n';
+import { isErrorResponse, post } from '../../services/api';
+import type { ErrorResponse } from '../../services/api';
+
+/**
+ * API endpoint for password reset.
+ */
+export const API_ENDPOINT = '/api/verify/v2/password_reset';
+
+/**
+ * API response shape.
+ */
+interface PasswordResetSuccessResponse {
+  redirect_url: string;
+}
+
+/**
+ * API response shape.
+ */
+type PasswordResetResponse = PasswordResetSuccessResponse | ErrorResponse;
+
+/**
+ * Navigates user to the given URL.
+ *
+ * @param url Destination URL.
+ */
+function navigate(url) {
+  window.location.href = url;
+}
+
+function PasswordResetButton({ onNavigate = navigate }) {
+  async function requestReset() {
+    const json = await post<PasswordResetResponse>(API_ENDPOINT, {}, { csrf: true, json: true });
+    if (!isErrorResponse(json)) {
+      const { redirect_url: redirectURL } = json;
+      onNavigate(redirectURL);
+    }
+  }
+
+  return (
+    <SpinnerButton isBig isOutline isWide onClick={requestReset}>
+      {t('idv.forgot_password.reset_password')}
+    </SpinnerButton>
+  );
+}
+
+export default PasswordResetButton;

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

@@ -21,12 +21,7 @@ describe('VerifyFlow', () => {
     const onComplete = sandbox.spy();
 
     const { getByText, findByText, getByLabelText } = render(
-      <VerifyFlow
-        initialValues={{ personalKey }}
-        onComplete={onComplete}
-        basePath="/"
-        resetPasswordUrl=""
-      />,
+      <VerifyFlow initialValues={{ personalKey }} onComplete={onComplete} basePath="/" />,
     );
 
     // Password confirm
@@ -64,7 +59,6 @@ describe('VerifyFlow', () => {
           onComplete={() => {}}
           enabledStepNames={[STEPS[1].name]}
           basePath="/"
-          resetPasswordUrl=""
         />,
       );
 

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

@@ -68,11 +68,6 @@ interface VerifyFlowProps {
    * Callback invoked after completing the form.
    */
   onComplete: () => void;
-
-  /**
-   * URL for reset password page in rails used for redirect
-   */
-  resetPasswordUrl: string;
 }
 
 /**
@@ -102,7 +97,6 @@ function VerifyFlow({
   basePath,
   startOverURL = '',
   cancelURL = '',
-  resetPasswordUrl,
   onComplete,
 }: VerifyFlowProps) {
   let steps = STEPS;
@@ -114,13 +108,7 @@ function VerifyFlow({
   const [currentStep, setCurrentStep] = useState(steps[0].name);
   const [values, setValues] = useState(syncedValues);
   const [initialStep, setCompletedStep] = useInitialStepValidation(basePath, steps);
-  const context = useObjectMemo({
-    startOverURL,
-    cancelURL,
-    currentStep,
-    basePath,
-    resetPasswordUrl,
-  });
+  const context = useObjectMemo({ startOverURL, cancelURL, currentStep, basePath });
   useEffect(() => {
     logStepVisited(currentStep);
   }, [currentStep]);

app/javascript/packs/verify-flow.tsx

@@ -39,11 +39,6 @@ interface AppRootValues {
    */
   storeKey: string;
 
-  /**
-   * URL for reset password page in rails used for redirect
-   */
-  resetPasswordUrl: string;
-
   /**
    * Signed JWT containing user data.
    */
@@ -62,7 +57,6 @@ const {
   startOverUrl: startOverURL,
   cancelUrl: cancelURL,
   completionUrl: completionURL,
-  resetPasswordUrl,
   storeKey: storeKeyBase64,
 } = appRoot.dataset;
 const storeKey = s2ab(atob(storeKeyBase64));
@@ -106,7 +100,6 @@ const storage = new SecretSessionStorage<SecretValues>('verify');
         enabledStepNames={enabledStepNames}
         startOverURL={startOverURL}
         cancelURL={cancelURL}
-        resetPasswordUrl={resetPasswordUrl}
         basePath={basePath}
         onComplete={onComplete}
       />

config/routes.rb

@@ -334,6 +334,7 @@
 
     namespace :api do
       post '/verify/v2/password_confirm' => 'verify/password_confirm#create'
+      post '/verify/v2/password_reset' => 'verify/password_reset#create'
     end
 
     get '/account/verify' => 'idv/gpo_verify#index', as: :idv_gpo_verify

spec/components/spinner_button_component_spec.rb

@@ -26,4 +26,12 @@
       expect(rendered).to have_css('.spinner-button__action-message[data-message="Verifying..."]')
     end
   end
+
+  context 'with outline button' do
+    it 'renders with additional css class' do
+      rendered = render_inline SpinnerButtonComponent.new(outline: true).with_content('')
+
+      expect(rendered).to have_css('lg-spinner-button.spinner-button--outline')
+    end
+  end
 end