LoginPage

import React, {Component} from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom'

import styles from './loginPage.css'
import {login} from 'data/login/actions'
import Logo from 'assets/svg/mm-logo.svg'
import User from 'assets/svg/user.svg'
import Key from 'assets/svg/key.svg'

import {CSSTransition} from 'react-transition-group';

const mapDispatchToProps = dispatch => (
    {
        loginActions: bindActionCreators({
            login
        }, dispatch)
    }
)
const mapStateToProps = ({localization: {content}, login}) => ({content, login})

@connect(mapStateToProps, mapDispatchToProps)
export default class LoginPage extends Component {
    handleLogin = e => {
        e.preventDefault()
        const {
            loginActions: {login}
        } = this.props

        const formValues = {
            username: e.target.username.value,
            password: e.target.password.value
        }
        const params = new URLSearchParams(this.props.location.search)
        const tenant = params.get('tenant')
        localStorage.setItem('tenant', tenant)
        login(formValues)
    }



    render() {
        const {content, login:{ error,  message }} = this.props

        return (
            <div className={styles.wrapper}>
                <CSSTransition
                    in={true}
                    appear={true}
                    timeout={2000}
                    classNames={{
                        appear: styles['fadeInUp-appear'],
                        appearActive: styles['fadeInUp-appear-active']
                    }}
                >
                    <form
                        className={styles.form}
                        onSubmit={this.handleLogin}
                        autoComplete='off'
                    >
                        <div className={styles.blur}></div>
                        <div className={styles.logoWrap}>
                            <Logo className={styles.logo}/>
                        </div>
                        <span className={styles.heading}>
                            {/* {content.login.login_page} */}
                            Login
                        </span>
                        <div className={styles.fieldWrap}>
                            <User className={styles.fieldIcon}/>
                            <input

                                style={ error ? {border: 'solid 1px red'} : {borderBottom: 'solid 1px #fff'}}
                                className={styles.input}
                                name='username'
                                placeholder={/*content.login.username*/'email'}
                                type='text'
                            />
                        </div>
                        <div className={styles.fieldWrap}>
                            <Key className={styles.fieldIcon}/>
                            <input
                                style={ error ? {border: 'solid 1px red'} : {borderBottom: 'solid 1px #fff'}}
                                className={styles.input}
                                name='password'
                                placeholder={/*content.login.password*/'password'}
                                type='password'
                            />
                        </div>
                        <div className={styles.forgotWrap}>
                            <Link
                                className={styles.forgotLink}
                                to='/login'
                            >
                                Forgot your password?
                            </Link>
                        </div>
                        <button className={styles.button}>{content.login.login}</button>
                    </form>
                </CSSTransition>
            </div>
        )
    }
}