deighton-ar/website/src/Auth/Login.js

import React from 'react'
import PropTypes from 'prop-types'
import { regExpPattern } from 'regexp-pattern'
import { api } from 'src/API'
import { WaitModal, MessageModal } from '../Modal'
import { Image, Link, Text, Row, Column, BoundInput, BoundCheckbox, BoundButton } from 'ui'
import headerLogo from 'images/deighton.png'
import { versionInfo } from '../version'
import { FormBinder } from 'react-form-binder'
import { reactAutoBind } from 'auto-bind2'
import { sizeInfo } from 'ui/style'

export class Login extends React.Component {
  static propTypes = {
    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
  }

  static bindings = {
    email: {
      alwaysGet: true,
      isValid: (r, v) => (regExpPattern.email.test(v))
    },
    password: {
      alwaysGet: true,
      isValid: (r, v) => (v !== '')
    },
    rememberMe: {
      alwaysGet: true,
      initValue: true
    },
    submit: {
      nonValue: true,
      isDisabled: (r) => (!r.anyModified || !r.allValid)
    }
  }

  constructor(props) {
    super(props)
    reactAutoBind(this)
    this.state = {
      waitModal: false,
      messageModal: null,
      binder: new FormBinder({}, Login.bindings)
    }
  }

  handleSubmit(e) {
    e.preventDefault()
    e.stopPropagation()

    if (this.state.messageModal) {
      this.setState({ messageModal: null })
      return
    } else if (this.state.waitModal) {
      return
    }

    let obj = this.state.binder.getModifiedFieldValues()

    if (obj) {
      this.setState({ waitModal: true })
      api.login(obj.email, obj.password, obj.rememberMe).then((user) => {
        this.setState({ waitModal: false })
        if (this.props.history) {
          const landing = user.role === 'broker' ? '/broker-dashboard' : 'dashboard'
          let url = new URLSearchParams(window.location.search).get('redirect') || landing
          try {
            this.props.history.replace(url)
          } catch (error) {
            this.props.history.replace('/')
          }
        }
      }).catch((error) => {
        this.setState({
          waitModal: false,
          messageModal: { icon: 'hold', message: `Unable to login`, detail: error.message }
        })
      })
    }
  }

  handleMessageModalDismiss() {
    this.setState({
      messageModal: null,
      binder: new FormBinder({ email: this.state.binder.getFieldValue('email') }, Login.bindings)
    })

    const elems = document.getElementsByName('password')

    if (elems) {
      elems[0].focus()
    }
  }

  render() {
    const { messageModal, waitModal } = this.state

    return (
      <Row minHeight='100%'>
        <Row.Item grow />
        <Row.Item width='450px'>
          <form onSubmit={this.handleSubmit} id='loginForm'>
            <Column minHeight='100%'>
              <Column.Item>
                <Row>
                  <Row.Item grow />
                  <Row.Item>
                    <Image source={headerLogo} width={250} />
                  </Row.Item>
                  <Row.Item grow />
                </Row>
              </Column.Item>
              <Column.Item>
                <BoundInput label='Email' name='email'
                  placeholder='example@xyz.com' binder={this.state.binder}
                  message='Enter the email address associated with your account.' />
              </Column.Item>
              <Column.Item>
                <BoundInput password label='Password' name='password'
                  binder={this.state.binder} message='Enter your password.' />
              </Column.Item>
              <Column.Item>
                <Row>
                  <Row.Item>
                    <Link to='/forgot-password'>Forgot your password?</Link>
                  </Row.Item>
                  <Row.Item grow />
                  <Row.Item>
                    <BoundCheckbox label='Remember Me' name='rememberMe' binder={this.state.binder} />
                  </Row.Item>
                </Row>
              </Column.Item>
              <Column.Item height={20} />
              <Column.Item height={sizeInfo.buttonHeight}>
                <Row>
                  <Row.Item grow />
                  <Row.Item>
                    <BoundButton name='submit' content='Login' submit='loginForm' binder={this.state.binder} />
                  </Row.Item>
                </Row>
              </Column.Item>
              <Column.Item height={20} />
              <Column.Item>
                <Text>
                  Please contact <Link to={`mailto:${versionInfo.supportEmail}`}>{versionInfo.supportEmail}</Link> to request login credentials.
                </Text>
              </Column.Item>
            </Column>
          </form>
        </Row.Item>
        <Row.Item grow />

        <WaitModal active={waitModal} message='Logging in...' />

        <MessageModal error open={!!messageModal}
          icon={messageModal ? messageModal.icon : ''}
          message={messageModal ? messageModal.message : ''}
          detail={messageModal ? messageModal.detail : ''}
          onDismiss={this.handleMessageModalDismiss} />
      </Row>
    )
  }
}