2016-05-15 02:23:58 +05:30
|
|
|
import React, { PropTypes } from 'react';
|
|
|
|
|
|
|
|
import { FormattedMessage as Message } from 'react-intl';
|
|
|
|
|
|
|
|
import { Input } from 'components/ui/form';
|
|
|
|
import BaseAuthBody from 'components/auth/BaseAuthBody';
|
|
|
|
|
|
|
|
import styles from './recoverPassword.scss';
|
|
|
|
import messages from './RecoverPassword.intl.json';
|
|
|
|
|
|
|
|
// TODO: activation code field may be decoupled into common component and reused here and in activation panel
|
|
|
|
|
|
|
|
export default class RecoverPasswordBody extends BaseAuthBody {
|
|
|
|
static displayName = 'RecoverPasswordBody';
|
|
|
|
static panelId = 'recoverPassword';
|
|
|
|
static hasGoBack = true;
|
|
|
|
|
|
|
|
static propTypes = {
|
2017-05-26 00:41:57 +05:30
|
|
|
match: PropTypes.shape({
|
|
|
|
params: PropTypes.shape({
|
|
|
|
key: PropTypes.string
|
|
|
|
})
|
2016-05-15 02:23:58 +05:30
|
|
|
})
|
|
|
|
};
|
|
|
|
|
2017-05-26 00:41:57 +05:30
|
|
|
autoFocusField = this.props.match.params && this.props.match.params.key ? 'newPassword' : 'key';
|
2016-05-15 02:23:58 +05:30
|
|
|
|
|
|
|
render() {
|
|
|
|
const {user} = this.context;
|
2017-05-26 00:41:57 +05:30
|
|
|
const {key} = this.props.match.params;
|
2016-05-15 02:23:58 +05:30
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{this.renderErrors()}
|
|
|
|
|
|
|
|
<p className={styles.descriptionText}>
|
|
|
|
{user.maskedEmail ? (
|
|
|
|
<Message {...messages.messageWasSentTo} values={{
|
|
|
|
email: <b>{user.maskedEmail}</b>
|
|
|
|
}} />
|
2016-05-17 18:00:04 +05:30
|
|
|
) : (
|
|
|
|
<Message {...messages.messageWasSent} />
|
|
|
|
)}
|
2016-05-15 02:23:58 +05:30
|
|
|
{' '}
|
|
|
|
<Message {...messages.enterCodeBelow} />
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<Input {...this.bindField('key')}
|
|
|
|
color="lightViolet"
|
2016-06-16 18:41:55 +05:30
|
|
|
center
|
2016-05-15 02:23:58 +05:30
|
|
|
required
|
|
|
|
value={key}
|
|
|
|
readOnly={!!key}
|
2016-05-22 20:46:51 +05:30
|
|
|
autoComplete="off"
|
2016-05-15 02:23:58 +05:30
|
|
|
placeholder={messages.enterTheCode}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<p className={styles.descriptionText}>
|
|
|
|
<Message {...messages.enterNewPasswordBelow} />
|
|
|
|
</p>
|
|
|
|
|
|
|
|
<Input {...this.bindField('newPassword')}
|
|
|
|
icon="key"
|
|
|
|
color="lightViolet"
|
|
|
|
type="password"
|
|
|
|
required
|
2016-08-03 00:43:11 +05:30
|
|
|
placeholder={messages.newPassword}
|
2016-05-15 02:23:58 +05:30
|
|
|
/>
|
|
|
|
|
|
|
|
<Input {...this.bindField('newRePassword')}
|
|
|
|
icon="key"
|
|
|
|
color="lightViolet"
|
|
|
|
type="password"
|
|
|
|
required
|
2016-08-03 00:43:11 +05:30
|
|
|
placeholder={messages.newRePassword}
|
2016-05-15 02:23:58 +05:30
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|