github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/build-blockchain-insurance-app-master/web/src/insurance/components/self-service/LoginPage.js (about)

     1  'use strict';
     2  
     3  import React, { Props } from 'react';
     4  import PropTypes from 'prop-types';
     5  import { bindActionCreators } from 'redux';
     6  import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
     7  import { connect } from 'react-redux';
     8  import { withRouter, Redirect } from 'react-router-dom';
     9  
    10  import Loading from '../../../shared/Loading';
    11  import * as userMgmtActions from '../../actions/userMgmtActions';
    12  
    13  class LoginPage extends React.Component {
    14  
    15    static get propTypes() {
    16      return {
    17        intl: intlShape.isRequired,
    18        user: PropTypes.object.isRequired,
    19        userLoaded: PropTypes.bool.isRequired,
    20        loginError: PropTypes.bool.isRequired,
    21        userMgmtActions: PropTypes.object.isRequired
    22      };
    23    }
    24  
    25    constructor(props) {
    26      super(props);
    27  
    28      this.state = { username: '', password: '', loading: false };
    29      this.setUsername = this.setUsername.bind(this);
    30      this.setPassword = this.setPassword.bind(this);
    31      this.login = this.login.bind(this);
    32      this.onEnter = this.onEnter.bind(this);
    33    }
    34  
    35    componentWillReceiveProps(nextProps) {
    36      if (nextProps.loginError) {
    37        this.setState(Object.assign({}, this.state, { loading: false }));
    38      }
    39    }
    40  
    41    setUsername(event) {
    42      event.preventDefault();
    43      this.setState(Object.assign({}, this.state,
    44        { username: event.target.value }));
    45    }
    46  
    47    setPassword(event) {
    48      event.preventDefault();
    49      this.setState(Object.assign({}, this.state,
    50        { password: event.target.value }));
    51    }
    52  
    53    login() {
    54      const { username, password } = this.state;
    55      this.props.userMgmtActions.authenticateUser({ username, password });
    56      this.setState(Object.assign({}, this.state, { loading: true }));
    57    }
    58  
    59    onEnter(event) {
    60      if (event.key === 'Enter') {
    61        this.login();
    62      }
    63    }
    64  
    65    render() {
    66      const { username, password, loading } = this.state;
    67      const { intl, loginError, userLoaded } = this.props;
    68      const errorMessage = loginError ? (
    69        <div className='ibm-item-note ibm-alert-link'>
    70          <FormattedMessage id='Invalid login. Please try again.' />
    71        </div>
    72      ) : null;
    73  
    74      if (userLoaded) {
    75        return (
    76          <Redirect to='/self-service/contracts' />
    77        );
    78      }
    79  
    80      return (
    81        <Loading hidden={!loading}
    82          text={intl.formatMessage({ id: 'Signing In...' })}>
    83          <div>
    84            <div className='ibm-columns'>
    85              <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
    86                <h3 className='ibm-h3'>
    87                  <FormattedMessage id='Customer Login' />
    88                </h3>
    89              </div>
    90            </div>
    91            <div className='ibm-columns'>
    92              <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
    93                <div className='ibm-column-form'>
    94                  <p>
    95                    <label><FormattedMessage id='Username' />:</label>
    96                    <span>
    97                      <input type='text'
    98                        className={errorMessage ? 'ibm-field-error' : ''}
    99                        value={username} onChange={this.setUsername} />
   100                    </span>
   101                  </p>
   102                  <p>
   103                    <label><FormattedMessage id='Password' />:</label>
   104                    <span>
   105                      <input type='password'
   106                        className={errorMessage ? 'ibm-field-error' : ''}
   107                        value={password} onChange={this.setPassword}
   108                        onKeyPress={this.onEnter} />
   109                    </span>
   110                  </p>
   111                  <p>
   112                    {errorMessage}
   113                  </p>
   114                </div>
   115              </div>
   116            </div>
   117            <div className='ibm-columns'>
   118              <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1 ibm-right'>
   119                <button type='button' className='ibm-btn-pri ibm-btn-blue-50'
   120                  onClick={this.login}><FormattedMessage id='Login' /></button>
   121              </div>
   122            </div>
   123          </div>
   124        </Loading>
   125      );
   126    }
   127  }
   128  
   129  function mapStateToProps(state, ownProps) {
   130    return {
   131      user: state.userMgmt.user || {},
   132      userLoaded: !!state.userMgmt.user,
   133      loginError: state.userMgmt.user == false
   134    };
   135  }
   136  
   137  function mapDispatchToProps(dispatch) {
   138    return {
   139      userMgmtActions: bindActionCreators(userMgmtActions, dispatch)
   140    };
   141  }
   142  
   143  export default withRouter((connect(mapStateToProps, mapDispatchToProps)(
   144    injectIntl(LoginPage))));