text: // import React from 'react'
  // import { Link } from 'react-router-dom'
  // import {
  //   CButton,
  //   CCard,
  //   CCardBody,
  //   CCardGroup,
  //   CCol,
  //   CContainer,
  //   CForm,
  //   CInput,
  //   CInputGroup,
  //   CInputGroupPrepend,
  //   CInputGroupText,
  //   CRow
  // } from '@coreui/react'
  // import CIcon from '@coreui/icons-react'
  
  // const Login = () => {
  //   return (
  //     <div className="c-app c-default-layout flex-row align-items-center">
  //       <CContainer>
  //         <CRow className="justify-content-center">
  //           <CCol md="8">
  //             <CCardGroup>
  //               <CCard className="p-4">
  //                 <CCardBody>
  //                   <CForm>
  //                     <h1>Login</h1>
  //                     <p className="text-muted">Sign In to your account</p>
  //                     <CInputGroup className="mb-3">
  //                       <CInputGroupPrepend>
  //                         <CInputGroupText>
  //                           <CIcon name="cil-user" />
  //                         </CInputGroupText>
  //                       </CInputGroupPrepend>
  //                       <CInput type="text" placeholder="Username" autoComplete="username" />
  //                     </CInputGroup>
  //                     <CInputGroup className="mb-4">
  //                       <CInputGroupPrepend>
  //                         <CInputGroupText>
  //                           <CIcon name="cil-lock-locked" />
  //                         </CInputGroupText>
  //                       </CInputGroupPrepend>
  //                       <CInput type="password" placeholder="Password" autoComplete="current-password" />
  //                     </CInputGroup>
  //                     <CRow>
  //                       <CCol xs="6">
  //                         <CButton color="primary" className="px-4">Login</CButton>
  //                       </CCol>
  //                       <CCol xs="6" className="text-right">
  //                         <CButton color="link" className="px-0">Forgot password?</CButton>
  //                       </CCol>
  //                     </CRow>
  //                   </CForm>
  //                 </CCardBody>
  //               </CCard>
  //               <CCard className="text-white bg-primary py-5 d-md-down-none" style={{ width: '44%' }}>
  //                 <CCardBody className="text-center">
  //                   <div>
  //                     <h2>Sign up</h2>
  //                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
  //                       labore et dolore magna aliqua.</p>
  //                     <Link to="/register">
  //                       <CButton color="primary" className="mt-3" active tabIndex={-1}>Register Now!</CButton>
  //                     </Link>
  //                   </div>
  //                 </CCardBody>
  //               </CCard>
  //             </CCardGroup>
  //           </CCol>
  //         </CRow>
  //       </CContainer>
  //     </div>
  //   )
  // }
  
  // export default Login
  import React, { Component } from "react";
  import { Link } from "react-router-dom";
  import PropTypes from "prop-types";
  import { connect } from "react-redux";
  import { login } from "../../../actions/auth";
  import classnames from "classnames";
  import SVGViewer from "src/helpers/svg.viewer";
  
  class Login extends Component {
    constructor() {
      super();
      this.state = {
        phone: "",
        password: "",
        errors: {}
      };
    }
  
    componentDidMount() {
      // If logged in and user navigates to Login page, should redirect them to dashboard
      if (this.props.auth.isAuthenticated) {
        this.props.history.push("/dashboard");
      }
    }
  
    componentWillReceiveProps(nextProps) {
      if (nextProps.auth.isAuthenticated) {
        this.props.history.push("/dashboard");
      }
  
      if (nextProps.errors) {
        this.setState({
          errors: nextProps.errors
        });
      }
    }
  
    onChange = e => {
      this.setState({ [e.target.id]: e.target.value });
    };
  
    onSubmit = e => {
      e.preventDefault();
  
      const userData = {
        phone: this.state.phone,
        password: this.state.password
      };
  
      this.props.login(userData);
    };
  
    render() {
      const { errors } = this.state;
  
      return (
        <div className="container">
          <div style={{ marginTop: "4rem" }} className="col">
            <div className="col s8 offset-s2">
              <Link to="/" className="btn-flat waves-effect">
                <i className="material-icons left">keyboard_backspace</i> Back to
                home
              </Link>
              <div className="col s12" style={{ paddingLeft: "11.250px" }}>
                <h4>
                  <b>Login</b> below
                </h4>
                <p className="grey-text text-darken-1">
                  Don't have an account? <Link to="/register">Register</Link>
                </p>
              </div>
              <form noValidate onSubmit={this.onSubmit}>
                <div className="input-field col s12">
                  <input
                    onChange={this.onChange}
                    value={this.state.phone}
                    error={errors.phone}
                    id="phone"
                    type="phone"
                    className={classnames("", {
                      invalid: errors.phone || errors.phonenotfound
                    })}
                  />
                  <label htmlFor="phone">phone</label>
                  <span className="red-text">
                    {errors.phone}
                    {errors.phonenotfound}
                  </span>
                </div>
                <div className="input-field col s12">
                  <input
                    onChange={this.onChange}
                    value={this.state.password}
                    error={errors.password}
                    id="password"
                    type="password"
                    className={classnames("", {
                      invalid: errors.password || errors.passwordincorrect
                    })}
                  />
                  <label htmlFor="password">Password</label>
                  <span className="red-text">
                    {errors.password}
                    {errors.passwordincorrect}
                  </span>
                </div>
                <div className="col s12" style={{ paddingLeft: "11.250px" }}>
                  <button
                    style={{
                      width: "150px",
                      borderRadius: "3px",
                      letterSpacing: "1.5px",
                      marginTop: "1rem"
                    }}
                    type="submit"
                    className="btn btn-large waves-effect waves-light hoverable blue accent-3"
                  >
                    Login
                  </button>
                </div>
              </form>
            </div>
          </div>
          <div><SVGViewer name="msgPreview" width="300" text="Day la noi dung tinh dsfssf sdfsddf nhan sdlkfslkjfslk sljf sljf tin nhan."></SVGViewer></div>
        </div>
      );
    }
  }
  
  Login.propTypes = {
    login: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
  };
  
  const mapStateToProps = state => ({
    auth: state.auth,
    errors: state.errors
  });
  
  export default connect(
    mapStateToProps,
    { login }
  )(Login);
  