2016-05-14 16:56:17 +05:30
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
import { FormattedMessage as Message } from 'react-intl';
|
2017-05-26 00:41:57 +05:30
|
|
|
import { Link } from 'react-router-dom';
|
2016-05-14 16:56:17 +05:30
|
|
|
|
2016-08-05 11:13:46 +05:30
|
|
|
import { Input, Checkbox, Captcha } from 'components/ui/form';
|
2016-05-14 16:56:17 +05:30
|
|
|
import BaseAuthBody from 'components/auth/BaseAuthBody';
|
|
|
|
import passwordMessages from 'components/auth/password/Password.intl.json';
|
|
|
|
|
2018-03-26 00:46:45 +05:30
|
|
|
import styles from 'components/auth/auth.scss';
|
2016-05-14 16:56:17 +05:30
|
|
|
import messages from './Register.intl.json';
|
|
|
|
|
|
|
|
// TODO: password and username can be validate for length and sameness
|
|
|
|
|
|
|
|
export default class RegisterBody extends BaseAuthBody {
|
2019-11-27 14:33:32 +05:30
|
|
|
static displayName = 'RegisterBody';
|
|
|
|
static panelId = 'register';
|
2016-05-14 16:56:17 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
autoFocusField = 'username';
|
2016-05-14 16:56:17 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
{this.renderErrors()}
|
2016-05-14 16:56:17 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
<Input
|
|
|
|
{...this.bindField('username')}
|
|
|
|
icon="user"
|
|
|
|
color="blue"
|
|
|
|
type="text"
|
|
|
|
required
|
|
|
|
placeholder={messages.yourNickname}
|
|
|
|
/>
|
2016-05-14 16:56:17 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
<Input
|
|
|
|
{...this.bindField('email')}
|
|
|
|
icon="envelope"
|
|
|
|
color="blue"
|
|
|
|
type="email"
|
|
|
|
required
|
|
|
|
placeholder={messages.yourEmail}
|
|
|
|
/>
|
2016-05-14 16:56:17 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
<Input
|
|
|
|
{...this.bindField('password')}
|
|
|
|
icon="key"
|
|
|
|
color="blue"
|
|
|
|
type="password"
|
|
|
|
required
|
|
|
|
placeholder={passwordMessages.accountPassword}
|
|
|
|
/>
|
2016-05-14 16:56:17 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
<Input
|
|
|
|
{...this.bindField('rePassword')}
|
|
|
|
icon="key"
|
|
|
|
color="blue"
|
|
|
|
type="password"
|
|
|
|
required
|
|
|
|
placeholder={messages.repeatPassword}
|
|
|
|
/>
|
2016-05-14 16:56:17 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
<Captcha {...this.bindField('captcha')} delay={600} />
|
2016-08-05 11:13:46 +05:30
|
|
|
|
2019-11-27 14:33:32 +05:30
|
|
|
<div className={styles.checkboxInput}>
|
|
|
|
<Checkbox
|
|
|
|
{...this.bindField('rulesAgreement')}
|
|
|
|
color="blue"
|
|
|
|
required
|
|
|
|
label={
|
|
|
|
<Message
|
|
|
|
{...messages.acceptRules}
|
|
|
|
values={{
|
|
|
|
link: (
|
|
|
|
<Link to="/rules" target="_blank">
|
|
|
|
<Message {...messages.termsOfService} />
|
|
|
|
</Link>
|
|
|
|
),
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
2016-05-14 16:56:17 +05:30
|
|
|
}
|