Feature/cld 491 reset password form (#179)

* [CLD-391] Add logic to get query params for reset password page

* [CLD-491] Reset password remove email and verification code fields

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

@@ -6,17 +6,6 @@ exports[`ResetPasswordForm should match snapshot 1`] = `
   hasPadding={true}
 >
   <Form>
-    <Grid>
-      <GridItem>
-        <Input
-          dataTest="email"
-          id="email"
-          labelText="Email"
-          name="email"
-          type="email"
-        />
-      </GridItem>
-    </Grid>
     <Grid>
       <GridItem>
         <Input
@@ -39,17 +28,6 @@ exports[`ResetPasswordForm should match snapshot 1`] = `
         />
       </GridItem>
     </Grid>
-    <Grid>
-      <GridItem>
-        <Input
-          dataTest="verificationCode"
-          id="verificationCode"
-          labelText="Verification Code"
-          name="verificationCode"
-          type="text"
-        />
-      </GridItem>
-    </Grid>
     <FlexContainerResponsive>
       <Button
         disabled={false}

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

@@ -6,7 +6,6 @@ import {
   mapPropsToValues,
   ResetPasswordValues,
   validateResetPasswordForm,
-  parseQueryParamsToToken,
   handleSubmitResetPassword,
   mapDispatchToProps,
   mapStateToProps
@@ -31,9 +30,7 @@ describe('ResetPasswordForm', () => {
       const result = mapPropsToValues()
       expect(result).toEqual({
         password: '',
-        confirmPassword: '',
-        email: '',
-        verificationCode: ''
+        confirmPassword: ''
       })
     })
   })
@@ -42,9 +39,7 @@ describe('ResetPasswordForm', () => {
     it('should not return errors', () => {
       const mockValues: ResetPasswordValues = {
         password: '456',
-        confirmPassword: '456',
-        email: 'abc@gmail.com',
-        verificationCode: '123'
+        confirmPassword: '456'
       }
       const result = validateResetPasswordForm(mockValues)
       expect(result).toEqual({})
@@ -53,64 +48,57 @@ describe('ResetPasswordForm', () => {
     it('should return errors', () => {
       const mockValues: ResetPasswordValues = {
         password: '456',
-        confirmPassword: '4567',
-        email: '',
-        verificationCode: ''
+        confirmPassword: '4567'
       }
       const result = validateResetPasswordForm(mockValues)
       expect(result).toEqual({
-        confirmPassword: 'Passwords do not match',
-        email: 'Please input email',
-        verificationCode: 'Please input verification code'
+        confirmPassword: 'Passwords do not match'
       })
     })
   })
 
-  describe('parseQueryParamsToToken', () => {
-    it('should return correctly', () => {
-      const mockQueryParams = '?token=1234'
-      const result = parseQueryParamsToToken(mockQueryParams)
-      const output = '1234'
-      expect(result).toEqual(output)
-    })
-
-    it('should return ""', () => {
-      const mockQueryParams = '?token='
-      const result = parseQueryParamsToToken(mockQueryParams)
-      const output = ''
-      expect(result).toEqual(output)
-    })
-
-    it('should return ""', () => {
-      const mockQueryParams = ''
-      const result = parseQueryParamsToToken(mockQueryParams)
-      const output = ''
-      expect(result).toEqual(output)
-    })
-
-    it('should return ""', () => {
-      const mockQueryParams = '='
-      const result = parseQueryParamsToToken(mockQueryParams)
-      const output = ''
-      expect(result).toEqual(output)
+  describe('handleSubmitResetPassword', () => {
+    it('should not call resetPassword', done => {
+      const mockValues: ResetPasswordValues = {
+        password: '456',
+        confirmPassword: '456'
+      }
+      const mockForm = {
+        ...mockFormikAction
+      }
+      const mockProps = {
+        resetPassword: jest.fn(),
+        logout: jest.fn(),
+        ...getMockRouterProps({})
+      }
+      handleSubmitResetPassword(mockValues, { ...mockForm, props: mockProps })
+      setTimeout(() => {
+        expect(mockProps.resetPassword).not.toBeCalled()
+        done()
+      }, 2000)
     })
   })
 
   describe('handleSubmitResetPassword', () => {
-    it('should call setSubmitting', done => {
+    it('should call resetPassword', done => {
       const mockValues: ResetPasswordValues = {
         password: '456',
-        confirmPassword: '456',
-        email: 'abc@gmail.com',
-        verificationCode: '123'
+        confirmPassword: '456'
       }
       const mockForm = {
         ...mockFormikAction
       }
       const mockProps = {
         resetPassword: jest.fn(),
         logout: jest.fn(),
-        ...getMockRouterProps({})
+        ...getMockRouterProps({}),
+        location: {
+          hash: '',
+          key: '',
+          pathname: '',
+          search: '?userName=mockEmail@gmail.com&verificationCode=123',
+          state: {}
+        }
       }
       handleSubmitResetPassword(mockValues, { ...mockForm, props: mockProps })
       setTimeout(() => {

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

@@ -17,6 +17,7 @@ import { compose, Dispatch } from 'redux'
 import { connect } from 'react-redux'
 import { resetPassword } from '@/actions/reset-password'
 import { ReduxState } from '@/types/core'
+import { withRouter, RouteComponentProps } from 'react-router'
 
 export type ResetPasswordFormProps = FormikProps<ResetPasswordValues> & StateProps & DispatchProps
 
@@ -27,11 +28,6 @@ export const ResetPasswordForm: React.FC<ResetPasswordFormProps> = ({ isValid, l
   return (
     <FlexContainerBasic flexColumn hasPadding>
       <Form>
-        <Grid>
-          <GridItem>
-            <Input dataTest="email" type="email" labelText="Email" id="email" name="email" />
-          </GridItem>
-        </Grid>
         <Grid>
           <GridItem>
             <Input dataTest="password" type="password" labelText="Password" id="password" name="password" />
@@ -48,17 +44,6 @@ export const ResetPasswordForm: React.FC<ResetPasswordFormProps> = ({ isValid, l
             />
           </GridItem>
         </Grid>
-        <Grid>
-          <GridItem>
-            <Input
-              dataTest="verificationCode"
-              type="text"
-              labelText="Verification Code"
-              id="verificationCode"
-              name="verificationCode"
-            />
-          </GridItem>
-        </Grid>
         <FlexContainerResponsive>
           <Button disabled={!isValid} variant="primary" type="submit">
             Reset Password
@@ -71,28 +56,18 @@ export const ResetPasswordForm: React.FC<ResetPasswordFormProps> = ({ isValid, l
 
 export const mapPropsToValues = (): ResetPasswordValues => {
   return {
-    email: '',
     password: '',
-    confirmPassword: '',
-    verificationCode: ''
+    confirmPassword: ''
   }
 }
 
 export type ResetPasswordValues = {
-  email: string
   password: string
   confirmPassword: string
-  verificationCode: string
 }
 
 export const validateResetPasswordForm = (values: ResetPasswordValues) => {
   const errors: FormikErrors<ResetPasswordValues> = {}
-  if (values.email === '') {
-    errors.email = 'Please input email'
-  }
-  if (values.verificationCode === '') {
-    errors.verificationCode = 'Please input verification code'
-  }
   if (values.password !== values.confirmPassword) {
     errors.confirmPassword = 'Passwords do not match'
   }
@@ -104,24 +79,16 @@ export type ResetPasswordParams = {
   token: string
 }
 
-export const parseQueryParamsToToken = (queryParams: string): string => {
-  const token = ''
-  if (!queryParams || queryParams === '') {
-    return token
-  }
-  const queryParamsArray = queryParams.split('=')
-  const isValidQueryParams = queryParamsArray && queryParamsArray.length >= 1
-  if (isValidQueryParams) {
-    return queryParamsArray[1]
-  }
-  return token
-}
-
 export const handleSubmitResetPassword = async (
   values: ResetPasswordValues,
-  { props }: FormikBag<DispatchProps, ResetPasswordValues>
+  { props }: FormikBag<DispatchProps & RouteComponentProps, ResetPasswordValues>
 ) => {
-  props.resetPassword(values)
+  const queryParams = new URLSearchParams(props.location.search)
+  const email = queryParams.get('userName')
+  const verificationCode = queryParams.get('verificationCode')
+  if (email && verificationCode) {
+    props.resetPassword({ ...values, email, verificationCode })
+  }
 }
 
 export const withForm = withFormik({
@@ -132,12 +99,13 @@ export const withForm = withFormik({
 })
 
 export type DispatchProps = {
-  resetPassword: (values: ResetPasswordValues) => void
+  resetPassword: (values: ResetPasswordValues & { email: string; verificationCode: string }) => void
 }
 
 export const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
   return {
-    resetPassword: (values: ResetPasswordValues) => dispatch(resetPassword(values))
+    resetPassword: (values: ResetPasswordValues & { email: string; verificationCode: string }) =>
+      dispatch(resetPassword(values))
   }
 }
 
@@ -156,6 +124,7 @@ export const withRedux = connect(mapStateToProps, mapDispatchToProps)
 export type EnhanceResetPasswordFormProps = {}
 
 export const EnhanceResetPasswordForm = compose<React.FC<EnhanceResetPasswordFormProps>>(
+  withRouter,
   withRedux,
   withForm
 )(ResetPasswordForm)