|
|
|
@ -3,8 +3,8 @@
|
|
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
// SPDX-License-Identifier: MIT
|
|
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import React from 'react';
|
|
|
|
import Form, { FormComponentProps } from '@ant-design/compatible/lib/form/Form';
|
|
|
|
|
|
|
|
import { UserAddOutlined, MailOutlined, LockOutlined } from '@ant-design/icons';
|
|
|
|
import { UserAddOutlined, MailOutlined, LockOutlined } from '@ant-design/icons';
|
|
|
|
|
|
|
|
import Form, { RuleRender, RuleObject } from 'antd/lib/form';
|
|
|
|
import Button from 'antd/lib/button';
|
|
|
|
import Button from 'antd/lib/button';
|
|
|
|
import Input from 'antd/lib/input';
|
|
|
|
import Input from 'antd/lib/input';
|
|
|
|
import Checkbox from 'antd/lib/checkbox';
|
|
|
|
import Checkbox from 'antd/lib/checkbox';
|
|
|
|
@ -29,312 +29,240 @@ export interface RegisterData {
|
|
|
|
confirmations: UserConfirmation[];
|
|
|
|
confirmations: UserConfirmation[];
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
type RegisterFormProps = {
|
|
|
|
interface Props {
|
|
|
|
fetching: boolean;
|
|
|
|
fetching: boolean;
|
|
|
|
userAgreements: UserAgreement[];
|
|
|
|
userAgreements: UserAgreement[];
|
|
|
|
onSubmit(registerData: RegisterData): void;
|
|
|
|
onSubmit(registerData: RegisterData): void;
|
|
|
|
} & FormComponentProps;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
class RegisterFormComponent extends React.PureComponent<RegisterFormProps> {
|
|
|
|
function validateUsername(_: RuleObject, value: string): Promise<void> {
|
|
|
|
private validateConfirmation = (rule: any, value: any, callback: any): void => {
|
|
|
|
if (!patterns.validateUsernameLength.pattern.test(value)) {
|
|
|
|
const { form } = this.props;
|
|
|
|
return Promise.reject(new Error(patterns.validateUsernameLength.message));
|
|
|
|
if (value && value !== form.getFieldValue('password1')) {
|
|
|
|
}
|
|
|
|
callback('Two passwords that you enter is inconsistent!');
|
|
|
|
|
|
|
|
} else {
|
|
|
|
if (!patterns.validateUsernameCharacters.pattern.test(value)) {
|
|
|
|
callback();
|
|
|
|
return Promise.reject(new Error(patterns.validateUsernameCharacters.message));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return Promise.resolve();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
private validatePassword = (_: any, value: any, callback: any): void => {
|
|
|
|
export const validatePassword: RuleRender = (): RuleObject => ({
|
|
|
|
const { form } = this.props;
|
|
|
|
validator(_: RuleObject, value: string): Promise<void> {
|
|
|
|
if (!patterns.validatePasswordLength.pattern.test(value)) {
|
|
|
|
if (!patterns.validatePasswordLength.pattern.test(value)) {
|
|
|
|
callback(patterns.validatePasswordLength.message);
|
|
|
|
return Promise.reject(new Error(patterns.validatePasswordLength.message));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!patterns.passwordContainsNumericCharacters.pattern.test(value)) {
|
|
|
|
if (!patterns.passwordContainsNumericCharacters.pattern.test(value)) {
|
|
|
|
callback(patterns.passwordContainsNumericCharacters.message);
|
|
|
|
return Promise.reject(new Error(patterns.passwordContainsNumericCharacters.message));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!patterns.passwordContainsUpperCaseCharacter.pattern.test(value)) {
|
|
|
|
if (!patterns.passwordContainsUpperCaseCharacter.pattern.test(value)) {
|
|
|
|
callback(patterns.passwordContainsUpperCaseCharacter.message);
|
|
|
|
return Promise.reject(new Error(patterns.passwordContainsUpperCaseCharacter.message));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!patterns.passwordContainsLowerCaseCharacter.pattern.test(value)) {
|
|
|
|
if (!patterns.passwordContainsLowerCaseCharacter.pattern.test(value)) {
|
|
|
|
callback(patterns.passwordContainsLowerCaseCharacter.message);
|
|
|
|
return Promise.reject(new Error(patterns.passwordContainsLowerCaseCharacter.message));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (value) {
|
|
|
|
return Promise.resolve();
|
|
|
|
form.validateFields(['password2'], { force: true });
|
|
|
|
},
|
|
|
|
}
|
|
|
|
});
|
|
|
|
callback();
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private validateUsername = (_: any, value: any, callback: any): void => {
|
|
|
|
|
|
|
|
if (!patterns.validateUsernameLength.pattern.test(value)) {
|
|
|
|
|
|
|
|
callback(patterns.validateUsernameLength.message);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (!patterns.validateUsernameCharacters.pattern.test(value)) {
|
|
|
|
export const validateConfirmation: ((firstFieldName: string) => RuleRender) = (
|
|
|
|
callback(patterns.validateUsernameCharacters.message);
|
|
|
|
firstFieldName: string,
|
|
|
|
|
|
|
|
): RuleRender => ({ getFieldValue }): RuleObject => ({
|
|
|
|
|
|
|
|
validator(_: RuleObject, value: string): Promise<void> {
|
|
|
|
|
|
|
|
if (value && value !== getFieldValue(firstFieldName)) {
|
|
|
|
|
|
|
|
return Promise.reject(new Error('Two passwords that you enter is inconsistent!'));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
callback();
|
|
|
|
return Promise.resolve();
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
});
|
|
|
|
private validateAgrement = (agreement: any, value: any, callback: any): void => {
|
|
|
|
|
|
|
|
const { userAgreements } = this.props;
|
|
|
|
const validateAgreement: ((userAgreements: UserAgreement[]) => RuleRender) = (
|
|
|
|
let isValid = true;
|
|
|
|
userAgreements: UserAgreement[],
|
|
|
|
for (const userAgreement of userAgreements) {
|
|
|
|
): RuleRender => () => ({
|
|
|
|
if (agreement.field === userAgreement.name && userAgreement.required && !value) {
|
|
|
|
validator(rule: any, value: boolean): Promise<void> {
|
|
|
|
isValid = false;
|
|
|
|
const [, name] = rule.field.split(':');
|
|
|
|
callback(`You must accept the ${userAgreement.displayText} to continue!`);
|
|
|
|
const [agreement] = userAgreements
|
|
|
|
break;
|
|
|
|
.filter((userAgreement: UserAgreement): boolean => userAgreement.name === name);
|
|
|
|
}
|
|
|
|
if (agreement.required && !value) {
|
|
|
|
|
|
|
|
return Promise.reject(new Error(`You must accept ${agreement.displayText} to continue!`));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (isValid) {
|
|
|
|
|
|
|
|
callback();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private handleSubmit = (e: React.FormEvent): void => {
|
|
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
const { form, onSubmit, userAgreements } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
form.validateFields((error, values): void => {
|
|
|
|
|
|
|
|
if (!error) {
|
|
|
|
|
|
|
|
const validatedFields = {
|
|
|
|
|
|
|
|
...values,
|
|
|
|
|
|
|
|
confirmations: [],
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (const userAgreement of userAgreements) {
|
|
|
|
return Promise.resolve();
|
|
|
|
validatedFields.confirmations.push({
|
|
|
|
},
|
|
|
|
name: userAgreement.name,
|
|
|
|
});
|
|
|
|
value: validatedFields[userAgreement.name],
|
|
|
|
|
|
|
|
});
|
|
|
|
function RegisterFormComponent(props: Props): JSX.Element {
|
|
|
|
delete validatedFields[userAgreement.name];
|
|
|
|
const { fetching, userAgreements, onSubmit } = props;
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
|
|
|
|
<Form
|
|
|
|
onSubmit(validatedFields);
|
|
|
|
onFinish={(values: Record<string, string | boolean>) => {
|
|
|
|
}
|
|
|
|
const agreements = Object.keys(values)
|
|
|
|
});
|
|
|
|
.filter((key: string):boolean => key.startsWith('agreement:'));
|
|
|
|
};
|
|
|
|
const confirmations = agreements
|
|
|
|
|
|
|
|
.map((key: string): UserConfirmation => ({ name: key.split(':')[1], value: (values[key] as boolean) }));
|
|
|
|
private renderFirstNameField(): JSX.Element {
|
|
|
|
const rest = Object.entries(values)
|
|
|
|
const { form } = this.props;
|
|
|
|
.filter((entry: (string | boolean)[]) => !agreements.includes(entry[0] as string));
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
onSubmit({
|
|
|
|
<Form.Item hasFeedback>
|
|
|
|
...(Object.fromEntries(rest) as any as RegisterData),
|
|
|
|
{form.getFieldDecorator('firstName', {
|
|
|
|
confirmations,
|
|
|
|
rules: [
|
|
|
|
});
|
|
|
|
{
|
|
|
|
}}
|
|
|
|
required: true,
|
|
|
|
className='register-form'
|
|
|
|
message: 'Please specify a first name',
|
|
|
|
>
|
|
|
|
pattern: patterns.validateName.pattern,
|
|
|
|
<Row gutter={8}>
|
|
|
|
},
|
|
|
|
<Col span={12}>
|
|
|
|
],
|
|
|
|
<Form.Item
|
|
|
|
})(
|
|
|
|
hasFeedback
|
|
|
|
<Input
|
|
|
|
name='firstName'
|
|
|
|
prefix={<UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
rules={[
|
|
|
|
placeholder='First name'
|
|
|
|
{
|
|
|
|
/>,
|
|
|
|
required: true,
|
|
|
|
)}
|
|
|
|
message: 'Please specify a first name',
|
|
|
|
</Form.Item>
|
|
|
|
pattern: patterns.validateName.pattern,
|
|
|
|
);
|
|
|
|
},
|
|
|
|
}
|
|
|
|
]}
|
|
|
|
|
|
|
|
>
|
|
|
|
private renderLastNameField(): JSX.Element {
|
|
|
|
<Input
|
|
|
|
const { form } = this.props;
|
|
|
|
prefix={<UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
|
|
|
|
placeholder='First name'
|
|
|
|
return (
|
|
|
|
/>
|
|
|
|
<Form.Item hasFeedback>
|
|
|
|
</Form.Item>
|
|
|
|
{form.getFieldDecorator('lastName', {
|
|
|
|
</Col>
|
|
|
|
rules: [
|
|
|
|
<Col span={12}>
|
|
|
|
{
|
|
|
|
<Form.Item
|
|
|
|
required: true,
|
|
|
|
hasFeedback
|
|
|
|
message: 'Please specify a last name',
|
|
|
|
name='lastName'
|
|
|
|
pattern: patterns.validateName.pattern,
|
|
|
|
rules={[
|
|
|
|
},
|
|
|
|
{
|
|
|
|
],
|
|
|
|
required: true,
|
|
|
|
})(
|
|
|
|
message: 'Please specify a last name',
|
|
|
|
<Input
|
|
|
|
pattern: patterns.validateName.pattern,
|
|
|
|
prefix={<UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
},
|
|
|
|
placeholder='Last name'
|
|
|
|
]}
|
|
|
|
/>,
|
|
|
|
>
|
|
|
|
)}
|
|
|
|
<Input
|
|
|
|
|
|
|
|
prefix={<UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
|
|
|
|
placeholder='Last name'
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</Form.Item>
|
|
|
|
|
|
|
|
</Col>
|
|
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
<Form.Item
|
|
|
|
|
|
|
|
hasFeedback
|
|
|
|
|
|
|
|
name='username'
|
|
|
|
|
|
|
|
rules={[
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
|
|
message: 'Please specify a username',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
validator: validateUsername,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
]}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<Input
|
|
|
|
|
|
|
|
prefix={<UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
|
|
|
|
placeholder='Username'
|
|
|
|
|
|
|
|
/>
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private renderUsernameField(): JSX.Element {
|
|
|
|
<Form.Item
|
|
|
|
const { form } = this.props;
|
|
|
|
hasFeedback
|
|
|
|
|
|
|
|
name='email'
|
|
|
|
return (
|
|
|
|
rules={[
|
|
|
|
<Form.Item hasFeedback>
|
|
|
|
{
|
|
|
|
{form.getFieldDecorator('username', {
|
|
|
|
type: 'email',
|
|
|
|
rules: [
|
|
|
|
message: 'The input is not valid E-mail!',
|
|
|
|
{
|
|
|
|
},
|
|
|
|
required: true,
|
|
|
|
{
|
|
|
|
message: 'Please specify a username',
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
message: 'Please specify an email address',
|
|
|
|
{
|
|
|
|
},
|
|
|
|
validator: this.validateUsername,
|
|
|
|
]}
|
|
|
|
},
|
|
|
|
>
|
|
|
|
],
|
|
|
|
<Input
|
|
|
|
})(
|
|
|
|
autoComplete='email'
|
|
|
|
<Input
|
|
|
|
prefix={<MailOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
prefix={<UserAddOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
placeholder='Email address'
|
|
|
|
placeholder='Username'
|
|
|
|
/>
|
|
|
|
/>,
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private renderEmailField(): JSX.Element {
|
|
|
|
|
|
|
|
const { form } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Form.Item
|
|
|
|
<Form.Item hasFeedback>
|
|
|
|
hasFeedback
|
|
|
|
{form.getFieldDecorator('email', {
|
|
|
|
name='password1'
|
|
|
|
rules: [
|
|
|
|
rules={[
|
|
|
|
{
|
|
|
|
{
|
|
|
|
type: 'email',
|
|
|
|
required: true,
|
|
|
|
message: 'The input is not valid E-mail!',
|
|
|
|
message: 'Please input your password!',
|
|
|
|
},
|
|
|
|
}, validatePassword,
|
|
|
|
{
|
|
|
|
]}
|
|
|
|
required: true,
|
|
|
|
>
|
|
|
|
message: 'Please specify an email address',
|
|
|
|
<Input.Password
|
|
|
|
},
|
|
|
|
autoComplete='new-password'
|
|
|
|
],
|
|
|
|
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
})(
|
|
|
|
placeholder='Password'
|
|
|
|
<Input
|
|
|
|
/>
|
|
|
|
autoComplete='email'
|
|
|
|
|
|
|
|
prefix={<MailOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
|
|
|
|
placeholder='Email address'
|
|
|
|
|
|
|
|
/>,
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private renderPasswordField(): JSX.Element {
|
|
|
|
|
|
|
|
const { form } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Form.Item
|
|
|
|
<Form.Item hasFeedback>
|
|
|
|
hasFeedback
|
|
|
|
{form.getFieldDecorator('password1', {
|
|
|
|
name='password2'
|
|
|
|
rules: [
|
|
|
|
dependencies={['password1']}
|
|
|
|
{
|
|
|
|
rules={[
|
|
|
|
required: true,
|
|
|
|
{
|
|
|
|
message: 'Please input your password!',
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
message: 'Please confirm your password!',
|
|
|
|
{
|
|
|
|
}, validateConfirmation('password1'),
|
|
|
|
validator: this.validatePassword,
|
|
|
|
]}
|
|
|
|
},
|
|
|
|
>
|
|
|
|
],
|
|
|
|
<Input.Password
|
|
|
|
})(
|
|
|
|
autoComplete='new-password'
|
|
|
|
<Input.Password
|
|
|
|
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
autoComplete='new-password'
|
|
|
|
placeholder='Confirm password'
|
|
|
|
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
/>
|
|
|
|
placeholder='Password'
|
|
|
|
|
|
|
|
/>,
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private renderPasswordConfirmationField(): JSX.Element {
|
|
|
|
|
|
|
|
const { form } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
{userAgreements.map((userAgreement: UserAgreement): JSX.Element => (
|
|
|
|
<Form.Item hasFeedback>
|
|
|
|
<Form.Item
|
|
|
|
{form.getFieldDecorator('password2', {
|
|
|
|
name={`agreement:${userAgreement.name}`}
|
|
|
|
rules: [
|
|
|
|
key={userAgreement.name}
|
|
|
|
|
|
|
|
initialValue={false}
|
|
|
|
|
|
|
|
valuePropName='checked'
|
|
|
|
|
|
|
|
rules={[
|
|
|
|
{
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
required: true,
|
|
|
|
message: 'Please confirm your password!',
|
|
|
|
message: 'You must accept to continue!',
|
|
|
|
},
|
|
|
|
}, validateAgreement(userAgreements),
|
|
|
|
{
|
|
|
|
]}
|
|
|
|
validator: this.validateConfirmation,
|
|
|
|
>
|
|
|
|
},
|
|
|
|
<Checkbox>
|
|
|
|
],
|
|
|
|
I read and accept the
|
|
|
|
})(
|
|
|
|
<a rel='noopener noreferrer' target='_blank' href={userAgreement.url}>
|
|
|
|
<Input.Password
|
|
|
|
{` ${userAgreement.displayText}`}
|
|
|
|
autoComplete='new-password'
|
|
|
|
</a>
|
|
|
|
prefix={<LockOutlined style={{ color: 'rgba(0, 0, 0, 0.25)' }} />}
|
|
|
|
</Checkbox>
|
|
|
|
placeholder='Confirm password'
|
|
|
|
|
|
|
|
/>,
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</Form.Item>
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private renderUserAgreements(): JSX.Element[] {
|
|
|
|
|
|
|
|
const { form, userAgreements } = this.props;
|
|
|
|
|
|
|
|
const getUserAgreementsElements = (): JSX.Element[] => {
|
|
|
|
|
|
|
|
const agreementsList: JSX.Element[] = [];
|
|
|
|
|
|
|
|
for (const userAgreement of userAgreements) {
|
|
|
|
|
|
|
|
agreementsList.push(
|
|
|
|
|
|
|
|
<Form.Item key={userAgreement.name}>
|
|
|
|
|
|
|
|
{form.getFieldDecorator(userAgreement.name, {
|
|
|
|
|
|
|
|
initialValue: false,
|
|
|
|
|
|
|
|
valuePropName: 'checked',
|
|
|
|
|
|
|
|
rules: [
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
required: true,
|
|
|
|
|
|
|
|
message: 'You must accept to continue!',
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
validator: this.validateAgrement,
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
})(
|
|
|
|
|
|
|
|
<Checkbox>
|
|
|
|
|
|
|
|
I read and accept the
|
|
|
|
|
|
|
|
<a rel='noopener noreferrer' target='_blank' href={userAgreement.url}>
|
|
|
|
|
|
|
|
{` ${userAgreement.displayText}`}
|
|
|
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
</Checkbox>,
|
|
|
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
</Form.Item>,
|
|
|
|
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
return agreementsList;
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return getUserAgreementsElements();
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
public render(): JSX.Element {
|
|
|
|
|
|
|
|
const { fetching } = this.props;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
<Form onSubmit={this.handleSubmit} className='login-form'>
|
|
|
|
|
|
|
|
<Row gutter={8}>
|
|
|
|
|
|
|
|
<Col span={12}>{this.renderFirstNameField()}</Col>
|
|
|
|
|
|
|
|
<Col span={12}>{this.renderLastNameField()}</Col>
|
|
|
|
|
|
|
|
</Row>
|
|
|
|
|
|
|
|
{this.renderUsernameField()}
|
|
|
|
|
|
|
|
{this.renderEmailField()}
|
|
|
|
|
|
|
|
{this.renderPasswordField()}
|
|
|
|
|
|
|
|
{this.renderPasswordConfirmationField()}
|
|
|
|
|
|
|
|
{this.renderUserAgreements()}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Form.Item>
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
|
|
|
type='primary'
|
|
|
|
|
|
|
|
htmlType='submit'
|
|
|
|
|
|
|
|
className='register-form-button'
|
|
|
|
|
|
|
|
loading={fetching}
|
|
|
|
|
|
|
|
disabled={fetching}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Submit
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
</Form.Item>
|
|
|
|
</Form.Item>
|
|
|
|
</Form>
|
|
|
|
))}
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
<Form.Item>
|
|
|
|
|
|
|
|
<Button
|
|
|
|
|
|
|
|
type='primary'
|
|
|
|
|
|
|
|
htmlType='submit'
|
|
|
|
|
|
|
|
className='register-form-button'
|
|
|
|
|
|
|
|
loading={fetching}
|
|
|
|
|
|
|
|
disabled={fetching}
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
Submit
|
|
|
|
|
|
|
|
</Button>
|
|
|
|
|
|
|
|
</Form.Item>
|
|
|
|
|
|
|
|
</Form>
|
|
|
|
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default Form.create<RegisterFormProps>()(RegisterFormComponent);
|
|
|
|
export default React.memo(RegisterFormComponent);
|
|
|
|
|
Boris Sekachev
5 years ago