diff --git a/client/src/actions/index.js b/client/src/actions/index.js index a56a812..179ef62 100644 --- a/client/src/actions/index.js +++ b/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) { diff --git a/client/src/components/ForgotPassword/ForgotPasswordForm.js b/client/src/components/ForgotPassword/ForgotPasswordForm.js index a8ae448..9ec5417 100644 --- a/client/src/components/ForgotPassword/ForgotPasswordForm.js +++ b/client/src/components/ForgotPassword/ForgotPasswordForm.js @@ -24,7 +24,7 @@ let ForgotPasswordForm = props => { disabled={!valid} className="btn btn-warning text-right" > - Reset Password + Submit @@ -32,7 +32,7 @@ let ForgotPasswordForm = props => { }; ForgotPasswordForm = reduxForm({ - form: 'resetPassword', + form: 'forgetPassword', validate, })(ForgotPasswordForm); diff --git a/client/src/components/ResetPassword/ResetPasswordForm.js b/client/src/components/ResetPassword/ResetPasswordForm.js new file mode 100644 index 0000000..54bfa25 --- /dev/null +++ b/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 ( +
+
+
Enter your password & confirm password
+ + +
+
+ +
+
+ ); +}; + +ResetPasswordForm = reduxForm({ + form: 'resetPassword', + validate, +})(ResetPasswordForm); + +export default ResetPasswordForm; diff --git a/client/src/components/ResetPassword/ResetPasswordValidator.js b/client/src/components/ResetPassword/ResetPasswordValidator.js new file mode 100644 index 0000000..5ec58d2 --- /dev/null +++ b/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; diff --git a/client/src/containers/ForgotPassword/ForgotPassword.js b/client/src/containers/ForgotPassword/ForgotPassword.js index 80e31c0..1eee317 100644 --- a/client/src/containers/ForgotPassword/ForgotPassword.js +++ b/client/src/containers/ForgotPassword/ForgotPassword.js @@ -1,6 +1,7 @@ // @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'; @@ -8,6 +9,7 @@ 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,7 +24,7 @@ class ForgotPassword extends Component { }); } - resetPassword = e => { + forgotPassword = e => { e.preventDefault(); const { dispatch } = this.props, @@ -30,11 +32,31 @@ class ForgotPassword extends Component { 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 ( -

Forgot Password?

- + {location.search ? ( +
+

Reset Password

+ +
+ ) : ( +
+

Forgot Password?

+ +
+ )}
); diff --git a/client/src/services/auth.js b/client/src/services/auth.js index d16a481..301d868 100644 --- a/client/src/services/auth.js +++ b/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, + }); }, };