- render password recovery in LoginForm to help with handling login #…

…1878

src/api/login.js

@@ -50,8 +50,10 @@ export function getResetPasswordInfo(token) {
   return axios.get(`${config.API_URL}/login/resetPassword/${token}`);
 }
 
-export function resetPasswordComplete(token) {
-  return axios.post(`${config.API_URL}/login/resetPassword/${token}`);
+export function resetPasswordComplete(token, form) {
+  return axios.post(`${config.API_URL}/login/resetPassword/${token}`, {
+    ...form,
+  });
 }
 
 export function resetPasswordGetAvatar(token) {

src/components/app/LoginForm.js

@@ -16,6 +16,7 @@ import {
 import { loginSuccess } from '../../actions/AppActions';
 import logo from '../../assets/images/metasfresh_logo_green_thumb.png';
 import RawList from '../widget/List/RawList';
+import PasswordRecovery from './PasswordRecovery';
 
 class LoginForm extends Component {
   constructor(props) {
@@ -27,11 +28,16 @@ class LoginForm extends Component {
       err: '',
       dropdownToggled: false,
       dropdownFocused: false,
+      handleResetSubmit: false,
     };
   }
 
   componentDidMount() {
-    this.login.focus();
+    const { path } = this.props;
+
+    if (!path) {
+      this.login.focus();
+    }
   }
 
   componentWillUpdate(nextProps, nextState) {
@@ -81,6 +87,61 @@ class LoginForm extends Component {
     });
   }
 
+  handleResetOk = response => {
+    this.setState(
+      {
+        handleResetSubmit: true,
+        pending: true,
+      },
+      () => {
+        const responsePromise = new Promise(resolve => {
+          resolve(response);
+        });
+        this.handleLoginRequest(responsePromise);
+      }
+    );
+  };
+
+  handleLoginRequest = resp => {
+    let request = null;
+
+    if (resp) {
+      request = resp;
+    } else {
+      request = loginRequest(this.login.value, this.passwd.value);
+    }
+
+    request
+      .then(response => {
+        if (response.data.loginComplete) {
+          return this.handleSuccess();
+        }
+        const roles = List(response.data.roles);
+
+        this.setState({
+          roleSelect: true,
+          roles,
+          role: roles.get(0),
+        });
+      })
+      .then(() => {
+        this.setState({
+          pending: false,
+        });
+      })
+      .catch(err => {
+        return this.checkIfAlreadyLogged(err);
+      })
+      .catch(err => {
+        this.setState({
+          err: err.response
+            ? err.response.data.message
+            : counterpart.translate('login.error.fallback'),
+          pending: false,
+        });
+      });
+  };
+
   handleLogin = () => {
     const { dispatch, auth } = this.props;
     const { roleSelect, role } = this.state;
@@ -106,35 +167,7 @@ class LoginForm extends Component {
             });
         }
 
-        loginRequest(this.login.value, this.passwd.value)
-          .then(response => {
-            if (response.data.loginComplete) {
-              return this.handleSuccess();
-            }
-            const roles = List(response.data.roles);
-
-            this.setState({
-              roleSelect: true,
-              roles,
-              role: roles.get(0),
-            });
-          })
-          .then(() => {
-            this.setState({
-              pending: false,
-            });
-          })
-          .catch(err => {
-            return this.checkIfAlreadyLogged(err);
-          })
-          .catch(err => {
-            this.setState({
-              err: err.response
-                ? err.response.data.message
-                : counterpart.translate('login.error.fallback'),
-              pending: false,
-            });
-          });
+        this.handleLoginRequest();
       }
     );
   };
@@ -181,7 +214,14 @@ class LoginForm extends Component {
       pending,
       dropdownToggled,
       dropdownFocused,
+      handleResetSubmit,
     } = this.state;
+    const { token, path } = this.props;
+    const onResetOk = this.handleResetOk;
+
+    if (path && !handleResetSubmit) {
+      return <PasswordRecovery {...{ path, token, onResetOk }} />;
+    }
 
     return (
       <div

src/components/app/PasswordRecovery.js

@@ -1,17 +1,14 @@
 import React, { Component } from 'react';
 import counterpart from 'counterpart';
 import PropTypes from 'prop-types';
-import Moment from 'moment';
 import { connect } from 'react-redux';
-import { push } from 'react-router-redux';
 import classnames from 'classnames';
 
 import {
   resetPasswordRequest,
   getResetPasswordInfo,
   resetPasswordComplete,
   resetPasswordGetAvatar,
-  getUserLang,
 } from '../../api';
 import logo from '../../assets/images/metasfresh_logo_green_thumb.png';
 
@@ -33,7 +30,7 @@ class PasswordRecovery extends Component {
     const resetPassword = token ? true : false;
 
     if (resetPassword) {
-      this.getAvatar();
+      // this.getAvatar();
       this.getUserData();
     }
 
@@ -94,26 +91,22 @@ class PasswordRecovery extends Component {
                   'forgotPassword.error.retypedNewPasswordNotMatch'
                 ),
               });
+            } else {
+              // because timeout
+              this.setState({
+                err: '',
+              });
             }
           }
-        }, 200);
+        }, 500);
       }
     );
   };
 
-  handleLoginSuccess = () => {
-    const { dispatch } = this.props;
-
-    getUserLang().then(response => {
-      Moment.locale(response.data['key']);
-      dispatch(push('/'));
-    });
-  };
-
   handleSubmit = e => {
     e.preventDefault();
 
-    const { token } = this.props;
+    const { token, onResetOk } = this.props;
     const { form, resetEmailSent } = this.state;
     const resetPassword = token ? true : false;
 
@@ -129,14 +122,12 @@ class PasswordRecovery extends Component {
           err: '',
         },
         () => {
-          resetPasswordComplete({
+          resetPasswordComplete(token, {
             email: form.email,
             password: form.password,
             token,
           })
-            .then(() => {
-              return this.handleSuccess();
-            })
+            .then(response => onResetOk(response))
             .catch(err => {
               this.setState({
                 err: err.response
@@ -210,7 +201,7 @@ class PasswordRecovery extends Component {
             </small>
           </div>
           <input
-            type="text"
+            type="password"
             onChange={e => this.handleChange(e, 'password')}
             name="password"
             className={classnames('input-primary input-block', {
@@ -272,13 +263,13 @@ class PasswordRecovery extends Component {
           <img src={logo} className="header-logo mt-2 mb-2" />
         </div>
         {avatarSrc && (
-          <div>
-            <div className="text-center">
-              <img src={`data:image/*;base64,${avatarSrc}`} className="avatar mt-2 mb-2" />
-            </div>
-            <div className="text-center">
-              <span className="user-data">{form.fullname}</span>
-            </div>
+          <div className="text-center">
+            <img src={`data:image/*;base64,${avatarSrc}`} className="avatar mt-2 mb-2" />
+          </div>
+        )}
+        {form.fullname && (
+          <div className="text-center">
+            <span className="user-data">{form.fullname}</span>
           </div>
         )}
         <form ref={c => (this.form = c)} onSubmit={this.handleSubmit}>

src/containers/Login.js

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import { push } from 'react-router-redux';
 
 import LoginForm from '../components/app/LoginForm';
-import PasswordRecovery from '../components/app/PasswordRecovery';
 
 class Login extends Component {
   constructor(props) {
@@ -69,11 +68,7 @@ class Login extends Component {
   render() {
     const { redirect, auth, splat, token } = this.props;
     const isYourBrowserSupported = this.browserSupport('chrome');
-    const component = splat ? (
-      <PasswordRecovery path={splat} token={token} />
-    ) : (
-      <LoginForm {...{ redirect, auth }} />
-    );
+    const component = <LoginForm {...{ redirect, auth, token }} path={splat} />;
 
     return (
       <div className="fullscreen">