import React from "react";
import FontAwesomeIcon from "@fortawesome/react-fontawesome";
import { Link } from "react-router-dom";
import axios from "axios";
import { Alert } from "reactstrap";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { login } from "../../actions/authActions";
import { LoadingButton, ConfirmAble, Input } from "../../elements";

class Login extends React.Component {
    constructor(props) {
        super(props);

        this.handleSubmit = this.handleSubmit.bind(this);
        this.errorMessageOnDismiss = this.errorMessageOnDismiss.bind(this);

        this.state = {
            email: "",
            password: "",
            formErrors: {
                email: "",
                password: ""
            },
            formSubmit: false,
            errorMessage: "",
            errorMessageVisible: false
        };
    }

    errorMessageOnDismiss() {
        this.setState(prevState => ({
            errorMessageVisible: false
        }));
    }

    handleSubmit(e) {
        e.preventDefault();

        this.setState(prevState => ({
            formSubmit: true,
            errorMessageVisible: false
        }));

        const user = {
            email: this.state.email,
            password: this.state.password
        };

        this.props
            .login(user)
            .then(
                res => this.context.router.history.push("/home"),
                err => {
                    var settedFormErrors = {};
                    for (var key in err.response.data) {
                        settedFormErrors[key] = err.response.data[key][0];
                    }

                    this.setState(prevState => ({
                        formErrors: {
                            ...prevState.formErrors,
                            ...settedFormErrors
                        }
                    }));
                }
            )
            .then(() => {
                console.log("asdasasd");
                this.setState(prevState => ({
                    formSubmit: false
                }));
            });
    }

    render() {
        return (
            <div className="row">
                <div className="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
                    <div className="card auth-card">
                        <div className="card-body shadow-3">
                            <div className="card-title text-center mb-3">
                                Giriş Yap
                            </div>
                            <hr />
                            {this.state.errorMessage.length > 0 ? (
                                <Alert
                                    color="danger"
                                    isOpen={this.state.errorMessageVisible}
                                    toggle={this.errorMessageOnDismiss}
                                >
                                    {this.state.errorMessage}
                                </Alert>
                            ) : (
                                ""
                            )}
                            <form
                                onSubmit={this.handleSubmit}
                                className="table-responsive"
                                autoComplete="off"
                            >
                                <table className="table table-borderless mb-0">
                                    <tbody>
                                        <tr>
                                            <td>E-mail</td>
                                            <td>
                                                <ConfirmAble
                                                    name="email"
                                                    value={this.props.email}
                                                    message={
                                                        this.state.formErrors
                                                            .email
                                                    }
                                                />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Şifre</td>
                                            <td>
                                                <ConfirmAble
                                                    type="password"
                                                    name="password"
                                                    value={this.props.password}
                                                    message={
                                                        this.state.formErrors
                                                            .password
                                                    }
                                                />
                                            </td>
                                        </tr>
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colSpan="2">
                                                <LoadingButton
                                                    text="Giriş Yap"
                                                    block
                                                    submit
                                                    isLoading={
                                                        this.state.formSubmit
                                                    }
                                                />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colSpan="2">
                                                <Link
                                                    to="/forget_password"
                                                    className="btn btn-link"
                                                >
                                                    Şifremi Unuttum
                                                </Link>
                                                <Link
                                                    to="/register"
                                                    className="btn btn-link float-right"
                                                >
                                                    Kayıt Ol
                                                </Link>
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Login.propTypes = {
    login: PropTypes.func.isRequired
};

Login.contextTypes = {
    router: PropTypes.object.isRequired
};

export default connect(null, { login })(Login);

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";

import Input from "./input";
import FeedBack from "../static/feedback";

class ConfirmAble extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const { message } = this.props;

        return (
            <div>
                <Input {...this.props} />
                <FeedBack text={message} />
            </div>
        );
    }
}

ConfirmAble.propTypes = {
    message: PropTypes.string.isRequired
};

export default connect(null)(ConfirmAble);

import React from "react";
import PropTypes from "prop-types";

class Input extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            [props.name]: props.value
        };

        this.handleUserInput = this.handleUserInput.bind(this);
    }

    handleUserInput(e) {
        var _name = e.target.name,
            _value = e.target.value;
        this.setState(() => ({
            [_name]: _value
        }));
    }

    render() {
        const {
            type,
            value,
            placeholder,
            className,
            name,
            id,
            form_control,
            disabled,
            readOnly,
            minLength,
            maxLength,
            ref,
            autoFocus,
            message
        } = this.props;

        let CLASS =
            (form_control ? "form-control" : "") + " " + (className || "");

        if (message) {
            CLASS += (className ? " " : "") + "is-invalid ";
        }

        return (
            <input
                type={type}
                name={name}
                value={this.state[name]}
                placeholder={placeholder}
                className={CLASS}
                id={id}
                disabled={disabled}
                readOnly={readOnly}
                minLength={minLength}
                maxLength={maxLength}
                ref={ref}
                autoFocus={autoFocus}
                onChange={this.handleUserInput}
            />
        );
    }
}

Input.defaultProps = {
    type: "text",
    form_control: true,
    value: ""
};

Input.propTypes = {
    type: PropTypes.string,
    value: PropTypes.string,
    placeholder: PropTypes.string,
    className: PropTypes.string,
    name: PropTypes.string.isRequired,
    id: PropTypes.string,
    form_control: PropTypes.bool,
    disabled: PropTypes.bool,
    readOnly: PropTypes.bool,
    minLength: PropTypes.number,
    maxLength: PropTypes.number,
    ref: PropTypes.string,
    autoFocus: PropTypes.bool
};

export default Input;