Skip to content

Instantly share code, notes, and snippets.

@danswater

danswater/login.jsx

Created July 18, 2019 04:30
Show Gist options
  • Save danswater/c172a5d4c020454681daa0463e424129 to your computer and use it in GitHub Desktop.
Save danswater/c172a5d4c020454681daa0463e424129 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. danswater created this gist Jul 18, 2019.
    150 changes: 150 additions & 0 deletions login.jsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,150 @@
    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 );