import React, { Component } from "react"; import PropTypes from "prop-types"; import { withRouter } from "react-router"; import { Button, TextInput, PageLayout, Text, Link, toastr, Checkbox, HelpButton } from "asc-web-components"; import { connect } from "react-redux"; import styled from "styled-components"; import { withTranslation, I18nextProvider } from "react-i18next"; import i18n from "./i18n"; import SubModalDialog from "./sub-components/modal-dialog"; import { login, setIsLoaded } from "../../store/auth/actions"; import { sendInstructionsToChangePassword } from "../../api/people"; const FormContainer = styled.form` margin: 50px auto 0 auto; max-width: 432px; .login-header { margin-bottom: 24px; .login-logo { max-width: 216px; max-height: 35px; } .login-title { margin: 8px 0; } } .login-input { margin-bottom: 24px; } .login-forgot-wrapper { height: 36px; .login-checkbox-wrapper { position: absolute; display: inline-flex; .login-checkbox { float: left; span { font-size: 12px; } } .login-tooltip { margin-left: 3px; display: inline-flex; } } .login-link { float: right; line-height: 16px; } } .login-button { margin-bottom: 16px; } .login-button-dialog { margin-right: 8px; } `; class Form extends Component { constructor(props) { super(props); this.state = { identifierValid: true, identifier: "", isLoading: false, isDisabled: false, passwordValid: true, password: "", isChecked: false, openDialog: false, email: "", errorText: "" }; } onChangeLogin = event => { this.setState({ identifier: event.target.value }); !this.state.identifierValid && this.setState({ identifierValid: true }); this.state.errorText && this.setState({ errorText: "" }); }; onChangePassword = event => { this.setState({ password: event.target.value }); !this.state.passwordValid && this.setState({ passwordValid: true }); this.state.errorText && this.setState({ errorText: "" }); }; onChangeEmail = event => { this.setState({ email: event.target.value }); }; onChangeCheckbox = () => this.setState({ isChecked: !this.state.isChecked }); onClick = () => { this.setState({ openDialog: true, isDisabled: true, email: this.state.identifier }); }; onKeyPress = event => { if (event.key === "Enter") { !this.state.isDisabled ? this.onSubmit() : this.onSendPasswordInstructions(); } }; onSendPasswordInstructions = () => { this.setState({ isLoading: true }); sendInstructionsToChangePassword(this.state.email) .then( res => toastr.success(res), message => toastr.error(message) ) .finally(this.onDialogClose()); }; onDialogClose = () => { this.setState({ openDialog: false, isDisabled: false, isLoading: false, email: "" }); }; onSubmit = () => { const { errorText, identifier, password } = this.state; const { login, setIsLoaded, history } = this.props; errorText && this.setState({ errorText: "" }); let hasError = false; const userName = identifier.trim(); if (!userName) { hasError = true; this.setState({ identifierValid: !hasError }); } const pass = password.trim(); if (!pass) { hasError = true; this.setState({ passwordValid: !hasError }); } if (hasError) return false; this.setState({ isLoading: true }); login(userName, pass) .then(() => { setIsLoaded(true); history.push("/"); }) .catch(error => { this.setState({ errorText: error, isLoading: false }); }); }; componentDidMount() { const { language, match } = this.props; const { params } = match; i18n.changeLanguage(language); params.error && this.setState({ errorText: params.error }); window.addEventListener("keyup", this.onKeyPress); } componentWillUnmount() { window.removeEventListener("keyup", this.onKeyPress); } render() { const { greetingTitle, match, t } = this.props; const { identifierValid, identifier, isLoading, passwordValid, password, isChecked, openDialog, email, errorText } = this.state; const { params } = match; //console.log("Login render"); return ( {greetingTitle} {t("RememberHelper")} } /> {t("ForgotPassword")} {openDialog ? ( ) : null} {params.confirmedEmail && ( {t("MessageEmailConfirmed")} {t("MessageAuthorize")} )} {errorText} ); } } const FormWrapper = withTranslation()(Form); const LoginForm = props => { const { language } = props; i18n.changeLanguage(language); return ( } /> ); }; Form.propTypes = { login: PropTypes.func.isRequired, match: PropTypes.object.isRequired, history: PropTypes.object.isRequired, setIsLoaded: PropTypes.func.isRequired, greetingTitle: PropTypes.string.isRequired, t: PropTypes.func.isRequired, language: PropTypes.string.isRequired }; Form.defaultProps = { identifier: "", password: "", email: "" }; LoginForm.propTypes = { language: PropTypes.string.isRequired }; function mapStateToProps(state) { return { language: state.auth.user.cultureName || state.auth.settings.culture, greetingTitle: state.auth.settings.greetingSettings }; } export default connect(mapStateToProps, { login, setIsLoaded })( withRouter(LoginForm) );