github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/blockapps-ba-master/ui/src/scenes/Login/index.js (about)

     1  import React, { Component } from 'react';
     2  import { connect } from 'react-redux';
     3  import Button from 'react-md/lib/Buttons/Button';
     4  import Paper from 'react-md/lib/Papers';
     5  import Card from 'react-md/lib/Cards/Card';
     6  import CardTitle from 'react-md/lib/Cards/CardTitle';
     7  import { reduxForm, Field } from 'redux-form';
     8  import { userLoginSubmit } from './login.actions';
     9  import ReduxedTextField from '../../components/ReduxedTextField/';
    10  import Media, { MediaOverlay } from 'react-md/lib/Media';
    11  import mixpanel from 'mixpanel-browser';
    12  import './Login.css';
    13  
    14  class Login extends Component {
    15  
    16    submit = (values) => {
    17      mixpanel.track('login_click');
    18      this.props.userLoginSubmit(values.username, values.password);
    19    }
    20  
    21    render() {
    22      const {
    23        // login,
    24        handleSubmit
    25      } = this.props;
    26  
    27      return (
    28        <div className="md-grid md-toolbar--relative login-margin-top">
    29          <div className="md-cell md-cell--3-desktop md-cell--2-tablet md-cell--phone-hidden" />
    30          <div className="md-cell md-cell--6-desktop md-cell--8-tablet md-cell--12-phone">
    31            <Card>
    32              <Media>
    33                <img src="img/supply-chain.jpeg" alt="Login splash" />
    34                <MediaOverlay>
    35                  <CardTitle title="Blockchain Enabled SCM" >
    36                  </CardTitle>
    37                </MediaOverlay>
    38              </Media>
    39              <Paper className="login-paper" zDepth={3}>
    40                <form onSubmit={handleSubmit(this.submit)}>
    41                  <div className="md-grid">
    42                    <div className="md-cell md-cell--2-desktop md-cell--1-tablet md-cell--1-phone" />
    43                    <Field
    44                      id="username"
    45                      name="username"
    46                      type="text"
    47                      label="Enter Username"
    48                      className="md-cell md-cell--8-desktop md-cell--10-tablet md-cell--10-phone"
    49                      component={ReduxedTextField} />
    50                    <div className="md-cell md-cell--2-desktop md-cell--1-tablet md-cell--1-phone" />
    51                    <div className="md-cell md-cell--2-desktop md-cell--1-tablet md-cell--1-phone" />
    52                    <Field
    53                      id="password"
    54                      name="password"
    55                      type="password"
    56                      label="Enter Password"
    57                      className="md-cell md-cell--8-desktop md-cell--10-tablet md-cell--10-phone"
    58                      component={ReduxedTextField} />
    59                    <div className="md-cell md-cell--2-desktop md-cell--1-tablet md-cell--1-phone" />
    60                    <div className="md-cell md-cell--2-desktop md-cell--1-tablet md-cell--1-phone" />
    61                    <div className="md-cell md-cell--8-desktop md-cell--10-tablet md-cell--10-phone md-text-right login-cell">
    62                      <Button raised primary label="Login" type="submit" />
    63                    </div>
    64                    <div className="md-cell md-cell--2-desktop md-cell--1-tablet md-cell--1-phone" />
    65                  </div>
    66                </form>
    67              </Paper>
    68            </Card>
    69          </div>
    70        </div>
    71      );
    72    }
    73  }
    74  
    75  function mapStateToProps(state) {
    76    return {
    77      login: state.login
    78    };
    79  }
    80  
    81  const connected = connect(mapStateToProps, { userLoginSubmit })(Login);
    82  
    83  const formedComponent = reduxForm({ form: 'login'})(connected);
    84  
    85  export default formedComponent;