From fa5b1fb4640a76b32fe8806a6689918013a0886c Mon Sep 17 00:00:00 2001 From: siemiatj Date: Fri, 20 Jul 2018 00:18:46 +0200 Subject: [PATCH] - create a new component for password recovery #1878 --- src/api/login.js | 7 + src/components/app/PasswordRecovery.js | 294 +++++++++++++++++++++++++ src/containers/Login.js | 11 +- 3 files changed, 310 insertions(+), 2 deletions(-) create mode 100644 src/components/app/PasswordRecovery.js diff --git a/src/api/login.js b/src/api/login.js index 0a2517017..ee99ba4dc 100644 --- a/src/api/login.js +++ b/src/api/login.js @@ -39,3 +39,10 @@ export function getAvatar(id) { export function getUserSession() { return axios.get(`${config.API_URL}/userSession`); } + +export function resetPassword(form) { + console.log('resetPassword form: ', form) + return axios.post(`${config.API_URL}/login/resetPassword`, { + ...form + }); +} diff --git a/src/components/app/PasswordRecovery.js b/src/components/app/PasswordRecovery.js new file mode 100644 index 000000000..4e166358a --- /dev/null +++ b/src/components/app/PasswordRecovery.js @@ -0,0 +1,294 @@ +import counterpart from 'counterpart'; +// import Moment from 'moment'; +import PropTypes from 'prop-types'; +import React, { Component } from 'react'; +// import { List } from 'immutable'; +// import { connect } from 'react-redux'; +import { goBack, push } from 'react-router-redux'; +import classnames from 'classnames'; + +import { + // getUserLang, + // localLoginRequest, + // loginCompletionRequest, + // loginRequest, + resetPassword, + +} from '../../api'; +// import { loginSuccess } from '../../actions/AppActions'; +import logo from '../../assets/images/metasfresh_logo_green_thumb.png'; +// import RawList from '../widget/List/RawList'; + +export default class PasswordRecovery extends Component { + constructor(props) { + super(props); + + this.state = { + // role: '', + // roleSelect: false, + err: '', + pending: false, + // dropdownToggled: false, + // dropdownFocused: false, + }; + } + + componentDidMount() { + this.focusField.focus(); + } + + // componentWillUpdate(nextProps, nextState) { + // if (this.roleSelector && nextState.roleSelect) { + // this.roleSelector.instanceRef.dropdown.focus(); + // } + // } + + handleKeyPress = e => { + // if (e.key === 'Enter') { + // this.handleLogin(); + // } + }; + + handleOnChange = e => { + e.preventDefault(); + + this.setState({ + err: '', + }); + }; + + // handleSuccess = () => { + // const { redirect, dispatch } = this.props; + + // getUserLang().then(response => { + // //GET language shall always return a result + // Moment.locale(response.data['key']); + + // if (redirect) { + // dispatch(goBack()); + // } else { + // dispatch(push('/')); + // } + // }); + // }; + + // checkIfAlreadyLogged(err) { + // const { router } = this.context; + + // return localLoginRequest().then(response => { + // if (response.data) { + // return router.push('/'); + // } + + // return Promise.reject(err); + // }); + // } + + handleSubmit = () => { + const { path } = this.props; + const resetPassword = path === 'resetPassword' ? true : false; + + console.log('submit'); + } + + // handleLogin = () => { + // const { dispatch, auth } = this.props; + // const { roleSelect, role } = this.state; + + // this.setState( + // { + // pending: true, + // }, + // () => { + // if (roleSelect) { + // return loginCompletionRequest(role) + // .then(() => { + // dispatch(loginSuccess(auth)); + // this.handleSuccess(); + // }) + // .catch(err => { + // this.setState({ + // err: err.response + // ? err.response.data.message + // : counterpart.translate('login.error.fallback'), + // pending: false, + // }); + // }); + // } + + // 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, + // }); + // }); + // } + // ); + // }; + + // handleRoleSelect = option => { + // this.setState({ + // role: option, + // }); + // }; + + // handleForgotPassword = () => { + // console.log('clicked') + // } + + // openDropdown = () => { + // this.setState({ + // dropdownToggled: true, + // }); + // }; + + // closeDropdown = () => { + // this.setState({ + // dropdownToggled: false, + // }); + // }; + + // onFocus = () => { + // this.setState({ + // dropdownFocused: true, + // }); + // }; + + // onBlur = () => { + // this.setState({ dropdownFocused: false }); + // }; + + renderForgottenPasswordForm = () => { + const { pending } = this.props; + + return ( +
+
+
+ + {counterpart.translate('forgotPassword.email.caption')} + +
+ (this.focusField = c)} + /> +
+
+ ); + }; + + renderResetPasswordForm = () => { + const { err, pending } = this.state; + + return ( +
+ {err &&
{err}
} +
+
+ + {counterpart.translate('forgotPassword.email.caption')} + +
+ (this.focusField = c)} + /> +
+
+
+ {counterpart.translate('login.password.caption')} +
+ +
+
+ ); + }; + + render() { + const { path } = this.props; + const { pending } = this.state; + const resetPassword = path === 'resetPassword' ? true : false; + + return ( +
+
+ +
+ {resetPassword + ? this.renderResetPasswordForm() + : this.renderForgottenPasswordForm()} +
+ +
+
+ ); + } +} + +// LoginForm.propTypes = { +// dispatch: PropTypes.func.isRequired, +// }; + +// LoginForm.contextTypes = { +// router: PropTypes.object.isRequired, +// }; + +// export default connect()(LoginForm); diff --git a/src/containers/Login.js b/src/containers/Login.js index cdff37088..f04c3e8ca 100644 --- a/src/containers/Login.js +++ b/src/containers/Login.js @@ -4,6 +4,7 @@ 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) { @@ -66,12 +67,18 @@ class Login extends Component { }; render() { - const { redirect, auth } = this.props; + const { redirect, auth, splat } = this.props; const isYourBrowserSupported = this.browserSupport('chrome'); + const component = splat ? ( + + ) : ( + + ); + return (
- + {component} {!isYourBrowserSupported && (

Your browser might be not fully supported.