Lighthouse/src/Pages/Login/Login.jsx

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

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="username" placeholder="Username" 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>

export default class Login 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));
        console.log(data);
        return false;
    }

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