integrated forgot password

Author: Rupeshiya

src/actions/authAction.js

@@ -1,4 +1,4 @@
-import { SET_CURRENT_USER, GET_USER_PROFILE } from './types';
+import { SET_CURRENT_USER, GET_USER_PROFILE, PASSWORD_SUCCESSFULLY_CHANGED, PASSWORD_CHANGE_REQUEST_SUCCESS } from './types';
 import axios from 'axios';
 import { setAuthToken } from '../utils/setAuthToken';
 import jwt_decode from 'jwt-decode';
@@ -57,13 +57,17 @@ export const loginUser = (userInfo, history) => async (dispatch) => {
 // forgot password 
 export const forgotPassword = (email) => async (dispatch) => {
   try {
-    const res = await axios.post('/user/password_reset', email);
+    const res = await axios.patch('/user/password_reset/request/', email);
     dispatch(setRequestStatus(false));
 
     if(res.status === 200){
       dispatch(setRequestStatus(true));
       console.log("Forgot password request sent!!");
       forgotPasswordToken = res.data.token;
+      dispatch({
+        type: PASSWORD_CHANGE_REQUEST_SUCCESS,
+        payload: res.data.token
+      })
     }
 
   } catch (error) {
@@ -74,13 +78,17 @@ export const forgotPassword = (email) => async (dispatch) => {
 // update password 
 export const changePassword = (passObj) => async (dispatch) => {
   try {
-    const res = await axios.post(`/user/password_reset/${forgotPasswordToken}`, passObj);
+    const res = await axios.patch(`/user/password_reset/${forgotPasswordToken}`, passObj);
     dispatch(setRequestStatus(false));
 
     if(res.status === 200){
       dispatch(setRequestStatus(true));
       console.log("Password updated!", res.data);
       // show password updated notification from here 
+      dispatch({
+        type: PASSWORD_SUCCESSFULLY_CHANGED,
+        payload: res.data.updated
+      })
     }
 
   } catch(error) {

src/actions/types.js

@@ -31,4 +31,6 @@ export const GET_ALL_PINNED_POSTS = "GET_ALL_PINNED_POSTS";
 export const GET_EVENT_BY_ID = "GET_EVENT_BY_ID";
 export const GET_ADMIN = "GET_ADMIN";
 export const GET_COMMENTS_OF_A_POST = "GET_COMMENTS_OF_A_POST";
-export const GET_SINGLE_PROJECT = "GET_SINGLE_PROJECT";
+export const GET_SINGLE_PROJECT = "GET_SINGLE_PROJECT";
+export const PASSWORD_CHANGE_REQUEST_SUCCESS = "PASSWORD_CHANGE_REQUEST_SUCCESS";
+export const PASSWORD_SUCCESSFULLY_CHANGED = "PASSWORD_SUCCESSFULLY_CHANGED";

src/common/Popups.js

@@ -5,6 +5,8 @@ import { MdVerifiedUser } from 'react-icons/md';
 import { FaUserSlash } from 'react-icons/fa';
 import { connect } from 'react-redux';
 import { forgotPassword, changePassword } from '../actions/authAction';
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 class Popups extends Component {
   constructor(props){
@@ -20,16 +22,26 @@ class Popups extends Component {
       option: "",
       optionValue: "",
       newPass: "",
-      cnfPass: ""
+      cnfPass: "",
+      requested: false
     }
   }
 
   componentWillReceiveProps(nextProps){
+    console.log('nextProps in common ', nextProps)
     this.setState({
       show: nextProps.modalShow,
       option: nextProps.option,
       optionValue: nextProps.optionValue
     });
+    const { currentStep, requested } = this.state
+    if (nextProps.auth.resetPassReq !== null && requested) {
+      toast.success('Link sent to your registered email!')
+      let step = currentStep >= 2 ? 2 : currentStep + 1
+      this.setState({
+        currentStep: step 
+      })
+    } 
   }
 
   handleClose = () => {
@@ -54,8 +66,8 @@ class Popups extends Component {
 
   changePassword = (e) => {
     e.preventDefault();
-    const { newPass } = this.state;
-    const { auth, changePassword, status } = this.props;
+    const { newPass, success } = this.state;
+    const { auth, changePassword } = this.props;
 
     const passObj = { 
       password: newPass,
@@ -66,30 +78,21 @@ class Popups extends Component {
     changePassword(passObj);
 
     // show notification on sidebar if done successfully 
-    if(status.success) {
+    if(success) {
       console.log("Successfully changed the password!");
     }
   }
 
   forgotPasswordRequest = () => {
     const { email } = this.state;
-    const { forgotPassword, status } = this.props;
+    const { forgotPassword } = this.props;
 
     console.log("forgot password request sending...")
-    forgotPassword(email);
-    
-    let { currentStep } = this.state;
-    // move to next step if forgot password request successful
-    if(status.success){
-      currentStep = currentStep >= 2 ? 2 : currentStep + 1
-      this.setState({
-        currentStep: currentStep
-      })
-    } else {
-      // show error message in popup 
-      console.log("Something went wrong!!");
+    const emailObj = {
+      email: email
     }
-
+    this.setState({ requested: true })
+    forgotPassword(emailObj);
   }
 
 
@@ -305,12 +308,25 @@ function Step2(props) {
   if (props.currentStep !== 2) {
     return null
   } 
-  return(
+  return (
     <React.Fragment>
-    <div className="form-group">
-      <label htmlFor="password">Check your email to get the link of reset the password. If it doesnot appear within few minutes, check the spam folder.</label>
-          
-    </div>
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
+      <div className="form-group">
+        <label htmlFor="password">
+          Check your email to get the link of reset the password. If it doesnot
+          appear within few minutes, check the spam folder.
+        </label>
+      </div>
     </React.Fragment>
   );
 }

src/reducers/authReducer.js

@@ -1,11 +1,13 @@
-import { SET_CURRENT_USER, RESPONSE_MSG, SET_ADMIN, BLOCK_USER, UNBLOCK_USER, REMOVE_USER } from "../actions/types"
+import { SET_CURRENT_USER, RESPONSE_MSG, SET_ADMIN, BLOCK_USER, UNBLOCK_USER, REMOVE_USER, PASSWORD_CHANGE_REQUEST_SUCCESS, PASSWORD_SUCCESSFULLY_CHANGED } from "../actions/types"
 
 const initialState = {
   // make it false later, default is set to true so that contributors don't need to login for test
   isAuthenticated: true,
   isAdmin: false,
   isBlocked: false,
   isRemoved: false,
+  resetPassReq: null,
+  passUpdated: false,
   user: {},
   response_msg: ""
 }
@@ -19,6 +21,18 @@ export default (state = initialState, action) => {
         user: action.payload
       }
     }
+    case PASSWORD_CHANGE_REQUEST_SUCCESS: {
+      return {
+        ...state,
+        resetPassReq: action.payload
+      }
+    }
+    case PASSWORD_SUCCESSFULLY_CHANGED: {
+      return {
+        ...state,
+        passUpdated: action.payload
+      }
+    }
     case BLOCK_USER: {
       return {
         ...state,