2016-05-14 16:56:17 +05:30
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
import { FormattedMessage as Message } from 'react-intl';
|
|
|
|
|
2017-04-18 22:17:46 +05:30
|
|
|
import { Input, Captcha } from 'components/ui/form';
|
2017-08-23 00:09:08 +05:30
|
|
|
import { getLogin } from 'components/auth/reducer';
|
|
|
|
import { PanelIcon } from 'components/ui/Panel';
|
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 = {
|
2017-04-19 23:21:04 +05:30
|
|
|
isLoginEdit: !this.getLogin()
|
2016-05-17 18:00:04 +05:30
|
|
|
};
|
|
|
|
|
2017-04-21 10:58:19 +05:30
|
|
|
autoFocusField = this.state.isLoginEdit ? 'login' : null;
|
2016-05-17 18:00:04 +05:30
|
|
|
|
2016-05-14 16:56:17 +05:30
|
|
|
render() {
|
2017-04-19 23:21:04 +05:30
|
|
|
const login = this.getLogin();
|
2016-05-17 18:00:04 +05:30
|
|
|
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()}
|
|
|
|
|
2017-08-23 00:09:08 +05:30
|
|
|
<PanelIcon icon="lock" />
|
2016-05-17 02:53:48 +05:30
|
|
|
|
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>
|
2017-04-21 10:58:19 +05:30
|
|
|
<Input {...this.bindField('login')}
|
2016-05-17 02:53:48 +05:30
|
|
|
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
|
|
|
)}
|
2017-04-18 22:17:46 +05:30
|
|
|
|
|
|
|
<Captcha {...this.bindField('captcha')} delay={600} />
|
2016-05-14 16:56:17 +05:30
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-05-22 18:37:51 +05:30
|
|
|
|
2017-04-19 23:21:04 +05:30
|
|
|
serialize() {
|
|
|
|
const data = super.serialize();
|
|
|
|
|
2017-04-21 10:58:19 +05:30
|
|
|
if (!data.login) {
|
|
|
|
data.login = this.getLogin();
|
2017-04-19 23:21:04 +05:30
|
|
|
}
|
|
|
|
|
|
|
|
return data;
|
|
|
|
}
|
|
|
|
|
|
|
|
getLogin() {
|
2017-08-23 00:09:08 +05:30
|
|
|
const login = getLogin(this.context);
|
|
|
|
const { user } = this.context;
|
2017-04-19 23:21:04 +05:30
|
|
|
|
2017-08-23 00:09:08 +05:30
|
|
|
return login || user.username || user.email || '';
|
2017-04-19 23:21:04 +05:30
|
|
|
}
|
|
|
|
|
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, по которому нужно ставить фокус на поле
|
|
|
|
// иначе же, если фокус ставить сразу, то форма скачет
|
2017-04-21 10:58:19 +05:30
|
|
|
setTimeout(() => {this.form.focus('login');}, 300);
|
2016-05-22 18:37:51 +05:30
|
|
|
};
|
2016-05-14 16:56:17 +05:30
|
|
|
}
|