implement reset password

riteshsangwan · riteshsangwan · commit 9d7274841d9e · 2016-12-23T14:39:26.000+05:30
diff --git a/config/default.js b/config/default.js
@@ -8,5 +8,5 @@ module.exports = {
 
   // below env variables are visible in frontend
   GOOGLE_API_KEY: process.env.GOOGLE_API_KEY || 'AIzaSyCrL-O319wNJK8kk8J_JAYsWgu6yo5YsDI',
-  API_BASE_PATH: process.env.API_BASE_PATH || 'https://kb-dsp-server-dev.herokuapp.com',
+  API_BASE_PATH: process.env.API_BASE_PATH || 'http://localhost:3500',
 };
diff --git a/src/routes/ResetPassword/components/ResetPasswordView.jsx b/src/routes/ResetPassword/components/ResetPasswordView.jsx
@@ -0,0 +1,72 @@
+import React, {Component} from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './ResetPasswordView.scss';
+import TextField from '../../../components/TextField';
+import FormField from '../../../components/FormField';
+import Button from '../../../components/Button';
+import {reduxForm} from 'redux-form';
+import {sendRequest} from '../modules/ResetPassword';
+
+class ResetPasswordView extends Component {
+
+  /**
+   * This function is called when the form is submitted
+   * This is triggered by handleSubmit
+   */
+  onSubmit(data) {
+    return sendRequest(data);
+  }
+
+  render() {
+    const {fields, handleSubmit, location: {query: {token}}} = this.props;
+    const _self = this;
+    return (
+      <div styleName="reset-password-form">
+        <form onSubmit={handleSubmit((data) => _self.onSubmit({...data, code: token}))}>
+          <div styleName="row">
+            <label htmlFor="email">Email:</label>
+            <FormField {...fields.email}>
+              <TextField {...fields.email} label={'email'} />
+            </FormField>
+          </div>
+          <div styleName="row">
+            <label htmlFor="password">Password:</label>
+            <FormField {...fields.password}>
+              <TextField {...fields.password} label={'New Password'} />
+            </FormField>
+          </div>
+
+          {/* add-package end */}
+          <div styleName="actions">
+            <Button type="submit" color="blue">Submit</Button>
+          </div>
+        </form>
+        {/* form end */}
+      </div>
+    );
+  }
+}
+
+ResetPasswordView.propTypes = {
+  fields: React.PropTypes.object.isRequired,
+  location: React.PropTypes.object.isRequired,
+  handleSubmit: React.PropTypes.func.isRequired,
+};
+
+const form = reduxForm({
+  form: 'resetPasswordForm',
+  fields: ['password', 'email'],
+  validate(values) {
+    const errors = {};
+    if (!values.password) {
+      errors.password = 'required';
+    }
+    if (!values.email) {
+      errors.email = 'required';
+    }
+
+    return errors;
+  },
+});
+
+export default form(CSSModules(ResetPasswordView, styles));
diff --git a/src/routes/ResetPassword/components/ResetPasswordView.scss b/src/routes/ResetPassword/components/ResetPasswordView.scss
@@ -0,0 +1,37 @@
+.reset-password-form {
+  padding: 50px 0 14px;
+  margin: 0 300px;
+  height: calc(100vh - 60px - 42px - 50px); // header height - breadcrumb height - footer height
+  h4 {
+    font-weight: bold;
+    font-size: 20px;
+    color: #525051;
+    margin-top: 40px;
+    border-top: 1px solid #e7e8ea;
+    padding-top: 25px;
+  }
+}
+.row {
+  display: flex;
+  margin-bottom: 22px;
+  label {
+    display: block;
+    flex: 0 0 20%;
+    align-self: center;
+    font-size: 14px;
+    color: #343434;
+    font-weight: bold;
+  }
+
+  .input-with-label {
+    flex: 0 0 20%;
+    display: flex;
+    align-items: center;
+    .input {
+      flex: 0 0 66%;
+    }
+  }
+}
+.actions {
+  text-align: right;
+}
diff --git a/src/routes/ResetPassword/containers/ResetPasswordContainer.js b/src/routes/ResetPassword/containers/ResetPasswordContainer.js
@@ -0,0 +1,17 @@
+import {asyncConnect} from 'redux-connect';
+import {actions} from '../modules/ResetPassword';
+import {browserHistory} from 'react-router';
+
+import ResetPasswordView from '../components/ResetPasswordView';
+
+const resolve = [{
+  promise: () => Promise.resolve(),
+}];
+
+const handleSuccess = () => {
+  browserHistory.push('/');
+};
+
+const mapState = (state) => ({...state.resetPassword, onSubmitSuccess: handleSuccess});
+
+export default asyncConnect(resolve, mapState, actions)(ResetPasswordView);
diff --git a/src/routes/ResetPassword/index.js b/src/routes/ResetPassword/index.js
@@ -0,0 +1,20 @@
+import {injectReducer} from '../../store/reducers';
+
+export default (store) => ({
+  path: 'reset-password',
+  name: 'Reset password', /* Breadcrumb name */
+  staticName: true,
+  getComponent(nextState, cb) {
+    require.ensure([], (require) => {
+      const Dashboard = require('./containers/ResetPasswordContainer').default;
+      const reducer = require('./modules/ResetPassword').default;
+
+      injectReducer(store, {key: 'resetPassword', reducer});
+      if (!nextState.location.query.token) {
+        cb(new Error('Invalid route invokation'));
+      } else {
+        cb(null, Dashboard);
+      }
+    }, 'ResetPassword');
+  },
+});
diff --git a/src/routes/ResetPassword/modules/ResetPassword.js b/src/routes/ResetPassword/modules/ResetPassword.js
@@ -0,0 +1,23 @@
+import {handleActions} from 'redux-actions';
+import APIService from 'services/APIService';
+// ------------------------------------
+// Actions
+// ------------------------------------
+
+export const actions = {
+};
+
+export const sendRequest = (values) => new Promise((resolve, reject) => {
+  APIService.resetPassword(values).then((result) => {
+    resolve(result);
+  }).catch((reason) => {
+    reject(reason);
+  });
+});
+
+// ------------------------------------
+// Reducer
+// ------------------------------------
+export default handleActions({
+}, {
+});
diff --git a/src/routes/index.js b/src/routes/index.js
@@ -19,6 +19,7 @@ import BrowseProviderRoute from './BrowseProvider';
 import DroneDetailsRoute from './DroneDetails';
 import AvailablePackagesRoute from './AvailablePackages';
 import ProviderDetailsRoute from './ProviderDetails';
+import ResetPasswordRoute from './ResetPassword';
 
 export const createRoutes = (store) => ({
   path: '/',
@@ -53,7 +54,7 @@ export const createRoutes = (store) => ({
     DroneDetailsRoute(store),
     AvailablePackagesRoute(store),
     ProviderDetailsRoute(store),
-
+    ResetPasswordRoute(store),
   ],
 });
 
diff --git a/src/services/APIService.js b/src/services/APIService.js
@@ -578,4 +578,28 @@ export default class APIService {
       .query(params)
       .end();
   }
+
+  /**
+   * Reset the user password
+   * @param  {Object}   entity    the client request payload
+   */
+  static resetPassword(entity) {
+    return request
+      .post(`${config.API_BASE_PATH}/api/v1/reset-password`)
+      .set('Content-Type', 'application/json')
+      .send(entity)
+      .end();
+  }
+
+  /**
+   * Send the forgot password link to user's email account
+   * @param  {Object}   entity    the client request payload
+   */
+  static forgotPassword(entity) {
+    return request
+      .post(`${config.API_BASE_PATH}/api/v1/forgot-password`)
+      .set('Content-Type', 'application/json')
+      .send(entity)
+      .end();
+  }
 }
