2016-05-14 16:56:17 +05:30
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
import { FormattedMessage as Message } from 'react-intl';
|
|
|
|
|
|
|
|
import { Input } from 'components/ui/form';
|
2016-05-17 02:53:48 +05:30
|
|
|
import icons from 'components/ui/icons.scss';
|
2016-05-14 16:56:17 +05:30
|
|
|
import BaseAuthBody from 'components/auth/BaseAuthBody';
|
|
|
|
|
|
|
|
import styles from './forgotPassword.scss';
|
|
|
|
import messages from './ForgotPassword.intl.json';
|
|
|
|
|
|
|
|
export default class ForgotPasswordBody extends BaseAuthBody {
|
|
|
|
static displayName = 'ForgotPasswordBody';
|
|
|
|
static panelId = 'forgotPassword';
|
|
|
|
static hasGoBack = true;
|
|
|
|
|
2016-05-17 18:00:04 +05:30
|
|
|
state = {
|
|
|
|
isLoginEdit: !(this.context.user.email || this.context.user.username)
|
|
|
|
};
|
|
|
|
|
|
|
|
autoFocusField = this.state.isLoginEdit ? 'email' : null;
|
|
|
|
|
2016-05-14 16:56:17 +05:30
|
|
|
render() {
|
2016-05-17 02:53:48 +05:30
|
|
|
const { user } = this.context;
|
2016-05-17 18:00:04 +05:30
|
|
|
const login = user.email || user.username || '';
|
|
|
|
const isLoginEditShown = this.state.isLoginEdit;
|
2016-05-17 02:53:48 +05:30
|
|
|
|
2016-05-14 16:56:17 +05:30
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{this.renderErrors()}
|
|
|
|
|
2016-05-17 02:53:48 +05:30
|
|
|
<div className={styles.bigIcon}>
|
|
|
|
<span className={icons.lock} />
|
|
|
|
</div>
|
|
|
|
|
2016-05-17 18:00:04 +05:30
|
|
|
{isLoginEditShown ? (
|
2016-05-17 02:53:48 +05:30
|
|
|
<div>
|
|
|
|
<p className={styles.descriptionText}>
|
|
|
|
<Message {...messages.specifyEmail} />
|
|
|
|
</p>
|
|
|
|
<Input {...this.bindField('email')}
|
|
|
|
icon="envelope"
|
|
|
|
color="lightViolet"
|
|
|
|
required
|
|
|
|
placeholder={messages.accountEmail}
|
|
|
|
defaultValue={login}
|
|
|
|
/>
|
|
|
|
</div>
|
2016-05-17 18:00:04 +05:30
|
|
|
) : (
|
|
|
|
<div>
|
|
|
|
<div className={styles.login}>
|
|
|
|
{login}
|
|
|
|
<span className={styles.editLogin} onClick={this.onClickEdit} />
|
|
|
|
</div>
|
|
|
|
<p className={styles.descriptionText}>
|
|
|
|
<Message {...messages.pleasePressButton} />
|
|
|
|
</p>
|
|
|
|
</div>
|
2016-05-15 02:23:58 +05:30
|
|
|
)}
|
2016-05-14 16:56:17 +05:30
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-05-22 18:37:51 +05:30
|
|
|
|
|
|
|
onClickEdit = () => {
|
|
|
|
this.setState({
|
|
|
|
isLoginEdit: true
|
|
|
|
});
|
|
|
|
this.context.requestRedraw();
|
2016-05-23 00:47:34 +05:30
|
|
|
// TODO: requestRedraw должен возвращать promise, по которому нужно ставить фокус на поле
|
|
|
|
// иначе же, если фокус ставить сразу, то форма скачет
|
|
|
|
setTimeout(() => {this.form.focus('email');}, 300);
|
2016-05-22 18:37:51 +05:30
|
|
|
};
|
2016-05-14 16:56:17 +05:30
|
|
|
}
|