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

import React, { Component, Fragment } from 'react'
import PropTypes from 'prop-types'
import { regExpPattern } from 'regexp-pattern'
import { Image, Text, Column, Row, BoundInput, BoundButton, Box } from 'ui'
import { MessageModal, WaitModal } from '../Modal'
import { api } from 'src/API'
import { FormBinder } from 'react-form-binder'
import headerLogo from 'images/deighton.png'
import { sizeInfo, colorInfo } from 'ui/style'
import autobind from 'autobind-decorator'

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

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

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

  componentDidMount() {
    api.logout()
  }

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

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

    this.setState({ waitModal: { message: 'Requesting Reset Email' } })

    const cb = (res) => {
      this.setState({
        waitModal: null,
        messageModal: {
          icon: 'thumb',
          title: 'Password Reset Requested',
          message: `If everything checks out, an email will be sent to '${obj.email}' with a reset link. Please click on it to finish resetting the password.`
        }
      })
    }

    api.sendResetPassword(obj.email).then(cb, cb)
  }

  @autobind
  handleMessageModalDismiss() {
    this.props.history.replace('/')
  }

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

    return (
      <Fragment>
        <Column.Item grow />
        <Column.Item>
          <Row>
            <Row.Item grow />
            <Row.Item width={sizeInfo.formRowSpacing} />
            <Row.Item width={sizeInfo.modalWidth}>
              <form id='forgotPasswordForm' onSubmit={this.handleSubmit}>
                <Box border={{ width: sizeInfo.headerBorderWidth, color: colorInfo.headerBorder }} radius={sizeInfo.formBoxRadius}>
                  <Row>
                    <Row.Item width={sizeInfo.formRowSpacing} />
                    <Row.Item>
                      <Column>
                        <Column.Item height={sizeInfo.formColumnSpacing} />
                        <Column.Item>
                          <Row>
                            <Row.Item grow />
                            <Row.Item>
                              <Image source={headerLogo} width={sizeInfo.loginLogoWidth} />
                            </Row.Item>
                            <Row.Item grow />
                          </Row>
                        </Column.Item>
                        <Column.Item height={sizeInfo.formColumnSpacing} />
                        <Column.Item>
                          <Text size='large'>Forgotten Password</Text>
                        </Column.Item>
                        <Column.Item height={sizeInfo.formColumnSpacing} />
                        <Column.Item>
                          <BoundInput label='Email' name='email'
                            placeholder='example@xyz.com' binder={this.state.binder}
                            message='A valid email address' />
                        </Column.Item>
                        <Column.Item height={sizeInfo.formColumnSpacing} />
                        <Column.Item>
                          <Text>The email address of an existing user to send the password reset link to.</Text>
                        </Column.Item>
                        <Column.Item height={sizeInfo.formColumnSpacing} />
                        <Column.Item minHeight={sizeInfo.buttonHeight}>
                          <Row>
                            <Row.Item grow />
                            <Row.Item>
                              <BoundButton text='Submit' name='submit' submit='forgotPasswordForm' binder={binder} />
                            </Row.Item>
                          </Row>
                        </Column.Item>
                        <Column.Item height={sizeInfo.formColumnSpacing} />
                      </Column>
                    </Row.Item>
                    <Row.Item width={sizeInfo.formRowSpacing} />
                  </Row>
                </Box>
              </form>
            </Row.Item>
            <Row.Item grow />
          </Row>
        </Column.Item>
        <Column.Item grow>
          <WaitModal active={!!waitModal}
            message={waitModal ? waitModal.message : ''} />

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