import { Component } from 'react'; import PropTypes from 'prop-types'; import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; import { defineMessages, injectIntl } from 'react-intl'; import Form from '../../lib/Form'; import { required, email } from '../../helpers/validation-helpers'; import Input from '../ui/Input'; import Button from '../ui/Button'; import Link from '../ui/Link'; import Infobox from '../ui/Infobox'; import globalMessages from '../../i18n/globalMessages'; import { H1 } from '../ui/headline'; const messages = defineMessages({ headline: { id: 'password.headline', defaultMessage: 'Reset password', }, emailLabel: { id: 'password.email.label', defaultMessage: 'Email address', }, successInfo: { id: 'password.successInfo', defaultMessage: 'Your new password was sent to your email address', }, noUser: { id: 'password.noUser', defaultMessage: 'No user with that email address was found', }, signupLink: { id: 'password.link.signup', defaultMessage: 'Create a free account', }, loginLink: { id: 'password.link.login', defaultMessage: 'Sign in to your account', }, }); class Password extends Component { static propTypes = { onSubmit: PropTypes.func.isRequired, isSubmitting: PropTypes.bool.isRequired, signupRoute: PropTypes.string.isRequired, loginRoute: PropTypes.string.isRequired, status: MobxPropTypes.arrayOrObservableArray.isRequired, }; form = (() => { const { intl } = this.props; return new Form({ fields: { email: { label: intl.formatMessage(messages.emailLabel), value: '', validators: [required, email], }, }, }, intl, )})(); submit(e) { e.preventDefault(); this.form.submit({ onSuccess: form => { this.props.onSubmit(form.values()); }, onError: () => {}, }); } render() { const { form } = this; const { intl } = this.props; const { isSubmitting, signupRoute, loginRoute, status } = this.props; return (