/* eslint jsx-a11y/anchor-is-valid: 0 */ import { Component } from 'react'; import PropTypes from 'prop-types'; import { observer, inject } from 'mobx-react'; import { defineMessages, injectIntl } from 'react-intl'; import Form from '../../lib/Form'; import { required, email, minLength } from '../../helpers/validation-helpers'; import Input from '../ui/Input'; import Button from '../ui/Button'; import Link from '../ui/Link'; import { globalError as globalErrorPropType } from '../../prop-types'; import { termsBase } from '../../api/apiBase'; import { H1 } from '../ui/headline'; const messages = defineMessages({ headline: { id: 'signup.headline', defaultMessage: 'Sign up', }, firstnameLabel: { id: 'signup.firstname.label', defaultMessage: 'First Name', }, lastnameLabel: { id: 'signup.lastname.label', defaultMessage: 'Last Name', }, emailLabel: { id: 'signup.email.label', defaultMessage: 'Email address', }, // companyLabel: { // id: 'signup.company.label', // defaultMessage: 'Company', // }, passwordLabel: { id: 'signup.password.label', defaultMessage: 'Password', }, legalInfo: { id: 'signup.legal.info', defaultMessage: 'By creating a Ferdium account you accept the', }, terms: { id: 'signup.legal.terms', defaultMessage: 'Terms of service', }, privacy: { id: 'signup.legal.privacy', defaultMessage: 'Privacy Statement', }, submitButtonLabel: { id: 'signup.submit.label', defaultMessage: 'Create account', }, loginLink: { id: 'signup.link.login', defaultMessage: 'Already have an account, sign in?', }, emailDuplicate: { id: 'signup.emailDuplicate', defaultMessage: 'A user with that email address already exists', }, }); class Signup extends Component { static propTypes = { onSubmit: PropTypes.func.isRequired, isSubmitting: PropTypes.bool.isRequired, loginRoute: PropTypes.string.isRequired, error: globalErrorPropType.isRequired, }; form = new Form( { fields: { firstname: { label: this.props.intl.formatMessage(messages.firstnameLabel), value: '', validators: [required], }, lastname: { label: this.props.intl.formatMessage(messages.lastnameLabel), value: '', validators: [required], }, email: { label: this.props.intl.formatMessage(messages.emailLabel), value: '', validators: [required, email], }, password: { label: this.props.intl.formatMessage(messages.passwordLabel), value: '', validators: [required, minLength(6)], type: 'password', }, }, }, this.props.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, loginRoute, error } = this.props; return (