Lighthouse/src/Pages/Login/Login.jsx

import React from 'react'
import { connect } from 'react-redux'
import axios from 'axios'
import firebase from 'firebase'
import { Card } from '../../Shared/Components'
import { InputGroup, Tooltip, Button, Classes, Intent } from '@blueprintjs/core'
import { LOGIN } from '../../Store/Actions'
import './Login.scss'
import { Map } from '../../utils'

const PasswordToggler = ({show, toggle}) => 
    <Tooltip content={`${show ? "Hide" : "Show"} Password`}>
        <Button className={Classes.MINIMAL} intent={Intent.WARNING}
            iconName={show ? "eye-off" : "eye-open"} onClick={toggle} />
    </Tooltip>

const Logo = () => <h1 className="logo"><img src="lighthouse.png"/><span>Lighthouse</span></h1>

const LoginTemplate = ({ togglePassword, showPassword, connect }) =>
    <div className="flex-frame center">
        <Logo />
        <Card>
            <form onSubmit={e => connect('test', e)}>
                <InputGroup name="email" placeholder="Email" leftIconName="user"/>
                <InputGroup name="password" placeholder="Enter your password..." leftIconName="lock" 
                    type={showPassword ? "text" : "password"}
                    rightElement={<PasswordToggler show={showPassword} toggle={togglePassword} />}
                />
                <Button iconName="log-in" type="submit">Login</Button>
            </form>
        </Card>
    </div>

class LoginContainer extends React.Component {
    state = { showPassword: false }

    togglePassword = () => this.setState({ showPassword: !this.state.showPassword })

    connect = (test, e) => {
        e.preventDefault()
        let data = (new Map(new FormData(e.target))).toObj()
        firebase.auth().signInWithEmailAndPassword(data.email, data.password)
                .catch(e => { console.error(`Firebase auth error: [${e.code}] ${e.message}`) })
    }

    render() {
        return <LoginTemplate
            showPassword={this.state.showPassword}
            togglePassword={this.togglePassword}
            connect={this.connect}
        />
    }
}

const Login = connect(null, dispatch => ({ login: user => dispatch(LOGIN(user)) }))(LoginContainer)

export default Login