login.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import {
	Grid,
	Header,
	Image,
	Message,
	Segment,
	Button
} from 'semantic-ui-react';
import {
	Form,
	Text
} from 'react-form';
import { connect } from 'react-redux';
import { compose } from 'redux';
import { createStructuredSelector } from 'reselect';
import { Link, withRouter } from 'react-router-dom';

import logo from 'images/[email protected]';

import {
	login
} from 'containers/App/actions';

import {
	makeSelectLoading
} from 'containers/App/selectors';

export class LoginPage extends React.PureComponent {
	constructor ( props ) {
		super( props );

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

	handleForm ( { Account, Password } ) {
		const { from } = this.props.location.state || { from : { pathname : '/' } }
		this.props.login( Account, Password, from );
	}

	render () {
		const { loading } = this.props;
		return (
			<article>
				<style>{`
					body > div,
					body > div > div,
					body > div > div > div,
					body > div > div > div > div,
					body > div > div > div > div > div,
					body > div > div > div > div > div > div,
					body > div > div > div > div > div > div > article {
					height: 100%;
				`}</style>
				<Helmet>
					<title>Login</title>
					<meta name="description" content="Login" />
				</Helmet>
				<Grid
					textAlign="center"
					style={{ height : '100%' }}
					verticalAlign="middle"
				>
					<Grid.Column style={{ maxWidth : 450 }}>
						<Header as="h2" style={{ color : 'white' }} textAlign="center">
							<Image src={logo} />
							{' '}Log-in to your account
						</Header>
						<Form
							onSubmit={this.handleForm}
							getApi={( api ) => {
								this.formApi = api;
							}}
						>
							{( formApi ) => (
								<form onSubmit={formApi.submitForm} id="form1" className="ui large form">
									<Segment stacked>
										<div className="field">
											<div className="ui left icon input">
												<i className="user icon"></i>
												<Text field="Account" id="Account" placeholder="Username or Email" />
											</div>
										</div>
										<div className="field">
											<div className="ui left icon input">
												<i className="lock icon"></i>
												<Text type="password" field="Password" id="Password" placeholder="Password" />
											</div>
										</div>
										{loading
											?
											(
												<Button
													type="submit"
													color="blue"
													fluid
													size="large"
													loading
													disabled
												>Login
												</Button>
											)
											:
											(
												<Button
													type="submit"
													color="blue"
													fluid
													size="large"
												>Login
												</Button>
											)}
									</Segment>
								</form>
							) }
						</Form>
						<Message>
							New to us? <Link to="/signup">Sign Up</Link>
						</Message>
					</Grid.Column>
				</Grid>
			</article>
		);
	}
}

LoginPage.propTypes = {
	loading  : PropTypes.bool.isRequired,
	login    : PropTypes.func.isRequired,
	location : PropTypes.object.isRequired
};

export function mapDispatchToProps ( dispatch ) {
	return {
		login : ( account, password, from ) => dispatch( login( account, password, from ) )
	}
}

const mapStateToProps = createStructuredSelector( {
	loading : makeSelectLoading()
} );

const withConnect = connect( mapStateToProps, mapDispatchToProps );

export default compose(
	withRouter,
	withConnect
)( LoginPage );