accounts-frontend/src/components/auth/recoverPassword/RecoverPasswordBody.js

81 lines
2.5 KiB
JavaScript
Raw Normal View History

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 = {
match: PropTypes.shape({
params: PropTypes.shape({
key: PropTypes.string
})
})
};
autoFocusField = this.props.match.params && this.props.match.params.key ? 'newPassword' : 'key';
render() {
const {user} = this.context;
const {key} = this.props.match.params;
return (
<div>
{this.renderErrors()}
<p className={styles.descriptionText}>
{user.maskedEmail ? (
<Message {...messages.messageWasSentTo} values={{
email: <b>{user.maskedEmail}</b>
}} />
) : (
<Message {...messages.messageWasSent} />
)}
{' '}
<Message {...messages.enterCodeBelow} />
</p>
<Input {...this.bindField('key')}
color="lightViolet"
center
required
value={key}
readOnly={!!key}
autoComplete="off"
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}
/>
<Input {...this.bindField('newRePassword')}
icon="key"
color="lightViolet"
type="password"
required
2016-08-03 00:43:11 +05:30
placeholder={messages.newRePassword}
/>
</div>
);
}
}