{"size": 1721, "ext": "js", "max_stars_repo_path": "src/components/LoginForm/loginForm.js", "max_stars_repo_name": "pnevmat/goit-react-hw-08-phonebook", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/LoginForm/loginForm.js", "max_issues_repo_name": "pnevmat/goit-react-hw-08-phonebook", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/LoginForm/loginForm.js", "max_forks_repo_name": "pnevmat/goit-react-hw-08-phonebook", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 31.2909090909, "max_line_length": 125, "alphanum_fraction": 0.5217896572}
import { Component } from 'react';
import PropTypes from 'prop-types';

import styles from './loginForm.module.css';

class LoginForm extends Component {
    state = {
        email: '',
        password: ''
    };

    handleChange = (e) => {
        this.setState({
            [e.currentTarget.name]: e.currentTarget.value
        });
    };

    handleSubmit = () => {
        const {onLoginSubmit} = this.props;

        onLoginSubmit(this.state);
    };

    render() {
        return (
            <form className={styles.login_form} onSubmit={(e) => {
                e.preventDefault();
                this.handleSubmit();
                e.target.elements.email.value = '';
                e.target.elements.password.value = '';
                }}
            >
                <label className={styles.login_label} htmlFor="" name="contact">
                    <span className={styles.input_text}>Enter your Login</span>
                    <input className={styles.login_input} type="mail" placeholder="email" name="email" onChange={e => {
                    this.handleChange(e);
                }}/>
                </label>
                <label className={styles.login_label}>
                    <span className={styles.input_text}>Enter your password</span>
                    <input className={styles.login_input} type="text" placeholder="password" name="password" onChange={e => {
                    this.handleChange(e);
                }}/>
                </label>
                <button className={styles.login_button} type="submit">Log In</button>
            </form>
        );
    };
};

export default LoginForm;

LoginForm.propTypes = {
    onLoginSubmit: PropTypes.func.isRequired,
};