/* 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 { LIVE_FRANZ_API, LIVE_FERDI_API } from '../../config'; import { API_VERSION } from '../../environment-remote'; 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 { globalError as globalErrorPropType } from '../../prop-types'; import { H1 } from '../ui/headline'; const messages = defineMessages({ headline: { id: 'login.headline', defaultMessage: 'Sign in', }, emailLabel: { id: 'login.email.label', defaultMessage: 'Email address', }, passwordLabel: { id: 'login.password.label', defaultMessage: 'Password', }, submitButtonLabel: { id: 'login.submit.label', defaultMessage: 'Sign in', }, invalidCredentials: { id: 'login.invalidCredentials', defaultMessage: 'Email or password not valid', }, customServerQuestion: { id: 'login.customServerQuestion', defaultMessage: 'Using a custom Ferdium server?', }, customServerSuggestion: { id: 'login.customServerSuggestion', defaultMessage: 'Try importing your Franz account', }, tokenExpired: { id: 'login.tokenExpired', defaultMessage: 'Your session expired, please login again.', }, serverLogout: { id: 'login.serverLogout', defaultMessage: 'Your session expired, please login again.', }, signupLink: { id: 'login.link.signup', defaultMessage: 'Create a free account', }, passwordLink: { id: 'login.link.password', defaultMessage: 'Reset password', }, }); class Login extends Component { static propTypes = { onSubmit: PropTypes.func.isRequired, isSubmitting: PropTypes.bool.isRequired, isTokenExpired: PropTypes.bool.isRequired, isServerLogout: PropTypes.bool.isRequired, signupRoute: PropTypes.string.isRequired, passwordRoute: PropTypes.string.isRequired, error: globalErrorPropType.isRequired, }; form = (() => { const { intl } = this.props; return new Form({ fields: { email: { label: intl.formatMessage(messages.emailLabel), value: '', validators: [required, email], }, password: { label: intl.formatMessage(messages.passwordLabel), value: '', validators: [required], type: 'password', }, }, }, 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, isTokenExpired, isServerLogout, signupRoute, passwordRoute, error, } = this.props; return (