{"size": 2130, "ext": "js", "max_stars_repo_path": "src/components/login pages/Login.js", "max_stars_repo_name": "educell/fe", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/login pages/Login.js", "max_issues_repo_name": "educell/fe", "max_issues_repo_issues_event_min_datetime": "2020-09-04T21:52:25.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T10:58:53.000Z", "max_forks_repo_path": "src/components/login pages/Login.js", "max_forks_repo_name": "educell/fe", "max_forks_repo_forks_event_min_datetime": "2019-08-21T21:54:56.000Z", "max_forks_repo_forks_event_max_datetime": "2019-08-21T21:54:56.000Z"}
{"max_stars_count": null, "max_issues_count": 7, "max_forks_count": 1, "avg_line_length": 25.3571428571, "max_line_length": 160, "alphanum_fraction": 0.5568075117}
import React from 'react';
import styled from 'styled-components';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { login } from '../../store/actions';


const Form = styled.form`
    display: flex;
    flex-direction: column;
    width: 50%;
    margin: 20px auto;
    text-align: left;
`

const Descp = styled.h3`
    font-size: 24px;
    font-weight: 700;
    color: #40454E;
`

const Button = styled.button`
    width: 40%;
    border-radius: 75px;
    color: white;
    background-color: #D67E8D;
    margin: 20px 0;
    align-self: flex-end;
    position: relative;
    left: 20px;
`

const Input = styled.input`
    border: 2px solid #40454E;
`

class Login extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            credentials: {
                username: '',
                password: '',
            }
        }
    }

    handleChanges = e => {
        console.log(e.target.name, e.target.value);
        this.setState({
            credentials: {
                ...this.state.credentials,
                [e.target.name]: e.target.value,
            }
        })
    }

    loginUser = e => {
        console.log(this.props)
        e.preventDefault();
        this.props.login(this.state.credentials)
        .then(() => this.props.history.push('/dashboard'))
    };

    render(){
        return(
            <div>
                <Form onSubmit={this.loginUser}>
                    <Descp>Username</Descp>
                    <Input onChange={this.handleChanges} name="username" type="text" placeholder="Enter Username" value={this.state.credentials.username} />
                    <Descp>Password</Descp>
                    <Input onChange={this.handleChanges} name="password" type="password" placeholder="Enter Password" value={this.state.credentials.password} />
                    <Button>Log In</Button>
                </Form>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    isLoggedIn: state.isLoggedIn,
})

export default withRouter(connect(mapStateToProps, { login })(Login));