add forgot password in login

Author: bestinbthomas

__tests__/app/containers/Authentication/__snapshots__/Login.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`Login Container Should render 1`] = `
 <Login
   errorMessage=""
+  forgotPassword={[Function]}
   handleSelectPanel={[Function]}
   isLoggedIn={false}
   isLoginLoading={false}

src/app/actions/User.ts

@@ -10,6 +10,7 @@ export namespace UserActions {
     EDIT_USER_PROFILE = 'EDIT_USER_PROFILE',
     EDIT_USER_PASSWORD = 'EDIT_USER_PASSWORD',
     CHANGE_USER_PASSWORD = 'CHANGE_USER_PASSWORD',
+    FORGOT_PASSWORD = 'FORGOT_PASSWORD',
     UPDATE_ERROR_MESSAGE = 'UPDATE_ERROR_MESSAGE',
     UPDATE_USER_DETAILS = 'UPDATE_USER_DETAILS',
     CHECK_EMAIL_EXISTS = 'CHECK_EMAIL_EXISTS',
@@ -64,10 +65,15 @@ export namespace UserActions {
   export const checkUsernameExists = (username: string) =>
     action(Type.CHECK_USERNAME_EXISTS, { username });
 
-  export const changeUserPassword = (newPassword: string, passwordResetToken: string) =>
+  export const changeUserPassword = (
+    newPassword: string,
+    passwordResetToken: string,
+    userId: number,
+  ) =>
     action(Type.CHANGE_USER_PASSWORD, {
       newPassword,
       passwordResetToken,
+      userId,
     });
 
   export const toggleUserProfileModal = (isUserProfileModalOpen: boolean) =>
@@ -82,4 +88,6 @@ export namespace UserActions {
 
   export const setIsLoginLoading = (isLoginLoading: boolean) =>
     action(Type.SET_IS_LOGIN_LOADING, { isLoginLoading });
+
+  export const forgotPassword = (email: string) => action(Type.FORGOT_PASSWORD, { email });
 }

src/app/apiFetch/User.ts

@@ -116,19 +116,32 @@ export const changeUserPassword = (body: UserInterfaces.ChangeUserPassword) => {
   return fetch(`${API_BASE_URL}user/password`, {
     body: JSON.stringify(body),
     headers: {
-      Accept: 'application/json',
       'Content-Type': 'application/json',
     },
     method: 'POST',
   })
     .then((response) => {
-      console.log('api fetch response');
-      console.log(response);
-      return response.json();
+      return headResponseWrapper(response, HeadReqType.USERNAME);
+    })
+    .then((data) => {
+      return data;
+    })
+    .catch((error) => {
+      console.error(error);
+    });
+};
+export const userForgotPassword = (email: string) => {
+  return fetch(`${API_BASE_URL}user/forgot-password`, {
+    body: email,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  })
+    .then((response) => {
+      return response.text();
     })
     .then((data) => {
-      console.log('api fetch data');
-      console.log(data);
       return data;
     })
     .catch((error) => {

src/app/components/Authentication/ChangePassword.tsx

@@ -7,6 +7,7 @@ import * as React from 'react';
 export class ChangePassword extends React.Component<changePasswordProps, ChangePasswordState> {
   private credentialsFormRef = React.createRef<HTMLFormElement>();
   private passwordResetToken = '';
+  private userId = 0;
   constructor(props: changePasswordProps) {
     super(props);
     this.state = {
@@ -19,7 +20,9 @@ export class ChangePassword extends React.Component<changePasswordProps, ChangeP
   public componentDidMount() {
     // get string from url
     const search = this.props.location.search;
-    this.passwordResetToken = search.split('=')[1];
+    const urlParams = search.split('&');
+    this.passwordResetToken = urlParams[0].split('=')[1];
+    this.userId = parseInt(urlParams[1].split('=')[1], 0);
   }
 
   public render() {
@@ -83,7 +86,7 @@ export class ChangePassword extends React.Component<changePasswordProps, ChangeP
 
                 <div
                   className={
-                    this.state.passwordError !== ''
+                    this.state.passwordError !== '' || this.props.errorMessage !== ''
                       ? classnames('form-row', authStyles['register-error-active'])
                       : classnames('form-row', authStyles['register-error-inactive'])
                   }
@@ -130,7 +133,7 @@ export class ChangePassword extends React.Component<changePasswordProps, ChangeP
             ...this.state,
             passwordError: '',
           });
-          this.props.changePassword(this.state.password, this.passwordResetToken);
+          this.props.changePassword(this.state.password, this.passwordResetToken, this.userId);
         }
       }
     } else {