text: import React, { Fragment, useState } from "react";
  import { Link, Redirect } from "react-router-dom";
  import { connect } from "react-redux";
  import PropTypes from "prop-types";
  
  import { login } from "../../actions/auth";
  
  const Login = ({ login, isAuthenticated }) => {
    const [formData, setFormData] = useState({
      email: "",
      password: ""
    });
  
    const { email, password } = formData;
  
    const onChange = e =>
      setFormData({ ...formData, [e.target.name]: e.target.value });
  
    const onSubmit = async e => {
      e.preventDefault();
      login(email, password);
    };
  
    // Redirect if logged in
    if (isAuthenticated) {
      return <Redirect to='/dashboard' />;
    }
  
    return (
      <Fragment>
        <h1 className='large text-primary'>登入</h1>
        <p className='lead'>
          <i className='fas fa-user'></i> 登入您的個人帳戶
        </p>
        <form className='form' onSubmit={e => onSubmit(e)}>
          <div className='form-group'>
            <input
              type='email'
              placeholder='電子郵件地址'
              name='email'
              value={email}
              onChange={e => onChange(e)}
              required
            />
          </div>
          <div className='form-group'>
            <input
              type='password'
              placeholder='密碼'
              name='password'
              value={password}
              onChange={e => onChange(e)}
              minLength='6'
            />
          </div>
          <input type='submit' className='btn btn-primary' value='登入' />
        </form>
        <p className='my-1'>
          沒有帳戶嗎? <Link to='/register'>註冊</Link>
        </p>
      </Fragment>
    );
  };
  
  Login.propTypes = {
    login: PropTypes.func.isRequired,
    isAuthenticated: PropTypes.bool
  };
  
  const mapStateToProps = state => ({
    isAuthenticated: state.auth.isAuthenticated
  });
  
  export default connect(mapStateToProps, { login })(Login);
  