@teikei/map/src/containers/UserRecoverPassword/index.js

Teikei map SPA component. Teikei is the software that powers ernte-teilen.org, a website that maps out Community-supported Agriculture in Germany.

import React from 'react'
import PropTypes from 'prop-types'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'

import { recoverPassword } from '../UserOnboarding/duck'
import i18n from '../../i18n'
import InputField from '../../components/InputField/index'
import { validator } from '../../common/formUtils'

const RecoverPassword = ({ handleSubmit, error }) => (
  <div className="user-account">
    <div className="user-container">
      <h1>{i18n.t('user.form.forgot_password')}</h1>
      <form onSubmit={handleSubmit}>
        <div className="form-inputs">
          <strong>{error}</strong>
          <Field
            name="email"
            label={i18n.t('user.form.email')}
            component={InputField}
            type="email"
            maxLength="100"
          />
          <p className="form-explanation">
            {i18n.t('user.form.password_explanation')}
          </p>
        </div>
        <div className="form-actions">
          <input
            type="submit"
            className="button submit"
            value={i18n.t('user.form.reset_password')}
          />
        </div>
      </form>
    </div>
  </div>
)

RecoverPassword.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  error: PropTypes.string
}

RecoverPassword.defaultProps = {
  error: ''
}

const mapDispatchToProps = dispatch => ({
  onSubmit: payload => dispatch(recoverPassword(payload))
})

const RecoverPasswordContainer = connect(
  null,
  mapDispatchToProps
)(
  reduxForm({
    form: 'recoverPassword',
    validate: validator('recoverPassword')
  })(RecoverPassword)
)

export default RecoverPasswordContainer