[CLD-490] Create success page for forgot-password (#178)

src/components/pages/forgot-password/__tests__/__snapshots__/forgot-password-form.tsx.snap

@@ -61,3 +61,28 @@ exports[`ForgotPasswordForm should match snapshot 2`] = `
   </FlexContainerResponsive>
 </Form>
 `;
+
+exports[`ForgotPasswordForm should match snapshot 3`] = `<Component />`;
+
+exports[`SuccessForgetPasswordContent should match snapshot 1`] = `
+<FlexContainerBasic
+  centerContent={true}
+  flexColumn={true}
+  hasPadding={true}
+>
+  <H5
+    isCentered={true}
+  >
+    Success
+  </H5>
+  <span>
+    Please check your inbox for an email we have just sent you with instructions for how to reset your password.
+  </span>
+  <br />
+  <Link
+    to="/developer/login"
+  >
+    Click here to return to the login page
+  </Link>
+</FlexContainerBasic>
+`;

src/components/pages/forgot-password/__tests__/forgot-password-form.tsx

@@ -7,7 +7,8 @@ import {
   mapPropsToValues,
   ForgotPasswordValues,
   handleSubmitForgotPassword,
-  ForgotPasswordFormProps
+  ForgotPasswordFormProps,
+  SuccessForgetPasswordContent
 } from '../forgot-password-form'
 
 describe('ForgotPasswordForm', () => {
@@ -38,6 +39,22 @@ describe('ForgotPasswordForm', () => {
     expect(wrapper.find('[dataTest="email"]')).toHaveLength(1)
   })
 
+  it('should match snapshot', () => {
+    const mockProps = {
+      ...mockWithFormik({ email: '1' }),
+      ...getMockRouterProps({}),
+      location: {
+        hash: '',
+        key: '',
+        pathname: '',
+        search: '?isSuccess=1',
+        state: {}
+      }
+    } as ForgotPasswordFormProps
+    const wrapper = shallow(<ForgotPasswordForm {...mockProps} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+
   describe('mapPropsToValues', () => {
     it('should run correctly', () => {
       const result = mapPropsToValues()
@@ -72,3 +89,10 @@ describe('ForgotPasswordForm', () => {
     })
   })
 })
+
+describe('SuccessForgetPasswordContent', () => {
+  it('should match snapshot', () => {
+    const wrapper = shallow(<SuccessForgetPasswordContent />)
+    expect(wrapper).toMatchSnapshot()
+  })
+})

src/components/pages/forgot-password/forgot-password-form.tsx

@@ -11,9 +11,25 @@ import {
   Form,
   withFormik,
   FormikProps,
-  FormikBag
+  FormikBag,
+  H5,
+  FlexContainerBasic
 } from '@reapit/elements'
 import { withRouter, RouteComponentProps } from 'react-router'
+import { Link } from 'react-router-dom'
+
+export const SuccessForgetPasswordContent: React.FC = () => {
+  return (
+    <FlexContainerBasic flexColumn centerContent hasPadding>
+      <H5 isCentered>Success</H5>
+      <span>
+        Please check your inbox for an email we have just sent you with instructions for how to reset your password.
+      </span>
+      <br />
+      <Link to="/developer/login">Click here to return to the login page</Link>
+    </FlexContainerBasic>
+  )
+}
 
 export type ForgotPasswordFormProps = FormikProps<ForgotPasswordValues> & RouteComponentProps
 
@@ -24,6 +40,10 @@ export const ForgotPasswordForm: React.FC<ForgotPasswordFormProps> = ({
   location
 }) => {
   const isError = location.search === '?isError=1'
+  const isSuccess = location.search === '?isSuccess=1'
+  if (isSuccess) {
+    return <SuccessForgetPasswordContent />
+  }
   return (
     <Form>
       <FormSubHeading>Please enter your email address to reset your password</FormSubHeading>

src/sagas/__tests__/forgot-password.ts

@@ -17,7 +17,7 @@ describe('requestForgotPassword', () => {
   expect(gen.next().value).toEqual(call(callAPIForgotPassword, '[email protected]'))
   it('should call API success', () => {
     const clone = gen.clone()
-    expect(clone.next({ CodeDeliveryDetails: {} }).value).toEqual(history.push(Routes.DEVELOPER_RESET_PASSWORD))
+    expect(clone.next({ CodeDeliveryDetails: {} }).value).toEqual(history.push(`${Routes.FORGOT_PASSWORD}?isSuccess=1`))
     expect(clone.next().value).toEqual(put(forgotPasswordLoading(false)))
     expect(clone.next().done).toEqual(true)
   })

src/sagas/forgot-password.ts

@@ -26,7 +26,7 @@ export const requestForgotPassword = function*({ data: email }) {
   try {
     const response = yield call(callAPIForgotPassword, email)
     if (response.CodeDeliveryDetails) {
-      yield history.push(Routes.DEVELOPER_RESET_PASSWORD)
+      yield history.push(`${Routes.FORGOT_PASSWORD}?isSuccess=1`)
     }
   } catch (error) {
     console.error(error.message)