Changes added for forget and reset password page.

client/src/actions/index.js

@@ -225,10 +225,15 @@ export const userSignup = payload => async (dispatch, getState) => {
     dispatch(triggerFailure(USER_SIGNUP, e));
   }
 };
-export const resetPassword = credentials => async (dispatch, getState) => {
+export const resetPassword = (credentials, resetPasswordParams) => async (
+  dispatch,
+  getState
+) => {
   dispatch(triggerRequest(RESET_PASSWORD));
   try {
-    const message = await AuthService.resetPassword(credentials.email);
+    const message = resetPasswordParams
+      ? await AuthService.resetPassword(credentials)
+      : await AuthService.forgotPassword(credentials.email);
     dispatch(resetPasswordSuccess(message));
     dispatch(endRequest(RESET_PASSWORD));
   } catch (e) {

client/src/components/ForgotPassword/ForgotPasswordForm.js

@@ -24,15 +24,15 @@ let ForgotPasswordForm = props => {
           disabled={!valid}
           className="btn btn-warning text-right"
         >
-          Reset Password
+          Submit
         </Button>
       </div>
     </form>
   );
 };
 
 ForgotPasswordForm = reduxForm({
-  form: 'resetPassword',
+  form: 'forgetPassword',
   validate,
 })(ForgotPasswordForm);
 

client/src/components/ResetPassword/ResetPasswordForm.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Button } from 'reactstrap';
+import { Field, reduxForm } from 'redux-form';
+import validate from './ResetPasswordValidator';
+import renderField from '../RenderField';
+
+let ResetPasswordForm = props => {
+  const { onSubmit, valid } = props;
+  console.log('props: ', props);
+  console.log('valid: ', valid);
+  return (
+    <form id="forgot-password" onSubmit={onSubmit}>
+      <div className="form-group">
+        <h6>Enter your password & confirm password</h6>
+        <Field
+          type="password"
+          name="password"
+          className="form-control"
+          placeholder="Password"
+          component={renderField}
+        />
+        <Field
+          type="password"
+          name="confirmPassword"
+          className="form-control"
+          placeholder="Confirm Password"
+          component={renderField}
+        />
+      </div>
+      <div>
+        <Button
+          type="submit"
+          disabled={!valid}
+          className="btn btn-warning text-right"
+        >
+          Reset Password
+        </Button>
+      </div>
+    </form>
+  );
+};
+
+ResetPasswordForm = reduxForm({
+  form: 'resetPassword',
+  validate,
+})(ResetPasswordForm);
+
+export default ResetPasswordForm;

client/src/components/ResetPassword/ResetPasswordValidator.js

@@ -0,0 +1,16 @@
+// import { isEmail } from 'validator';
+
+const validate = values => {
+  console.log('values: ', values);
+  const errors = {},
+    { password, confirmPassword } = values;
+
+  if (!password) errors.password = '*Password Required';
+  if (!confirmPassword) errors.confirmPassword = '*Confirm Password Required';
+  if (password && confirmPassword && password !== confirmPassword)
+    errors.password = '*Password not match';
+
+  return errors;
+};
+
+export default validate;

client/src/containers/ForgotPassword/ForgotPassword.js

@@ -1,13 +1,15 @@
 // @flow
 import React, { Component } from 'react';
 import ForgotPasswordForm from '../../components/ForgotPassword/ForgotPasswordForm';
+import ResetPasswordForm from '../../components/ResetPassword/ResetPasswordForm';
 import type { BaseReduxPropTypes } from '../../types/base-props-types';
 import { Container } from 'reactstrap';
 import { connect } from 'react-redux';
 import { resetPassword } from '../../actions';
 import './ForgotPassword.css';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { parse } from 'query-string';
 
 type Props = BaseReduxPropTypes & {
   resetPasswordState: Object,
@@ -22,19 +24,39 @@ class ForgotPassword extends Component<Props> {
       });
   }
 
-  resetPassword = e => {
+  forgotPassword = e => {
     e.preventDefault();
 
     const { dispatch } = this.props,
       email = e.target.elements.email.value;
     dispatch(resetPassword({ email }));
   };
 
+  resetPassword = e => {
+    e.preventDefault();
+    const { dispatch, location } = this.props,
+      payload = {
+        password: e.target.elements.password.value,
+        ...parse(location.search),
+      };
+    dispatch(resetPassword(payload, location.search));
+  };
+
   render() {
+    const { location } = this.props;
     return (
       <Container className="login-container">
-        <h4>Forgot Password?</h4>
-        <ForgotPasswordForm onSubmit={this.resetPassword} />
+        {location.search ? (
+          <div>
+            <h4>Reset Password</h4>
+            <ResetPasswordForm onSubmit={this.resetPassword} />
+          </div>
+        ) : (
+          <div>
+            <h4>Forgot Password?</h4>
+            <ForgotPasswordForm onSubmit={this.forgotPassword} />
+          </div>
+        )}
         <ToastContainer autoClose={8000} />
       </Container>
     );

client/src/services/auth.js

@@ -17,10 +17,23 @@ export default {
     formData.append('password', payload.password);
     return makeRequest('/api/register/', { method: 'POST', body: formData });
   },
-  resetPassword(email) {
+  forgotPassword(email) {
     const formData = new FormData();
     formData.append('email', email);
-    return fakeApi(email);
+    return makeRequest('/api/reset-password/', {
+      method: 'POST',
+      body: formData,
+    });
+  },
+  resetPassword(payload) {
+    const formData = new FormData();
+    formData.append('password', payload.password);
+    formData.append('email', payload.email);
+    formData.append('token', payload.token);
+    return makeRequest('api/reset-password-confirm/', {
+      method: 'POST',
+      body: formData,
+    });
   },
 };