text: import React from 'react';
  import {
      Form,
      Input,
      Checkbox,
      Button,
      Tooltip,
      Icon
  } from 'antd';
  import { userService } from '../api/UserServices';
  
  
  
  class RegistrationForm extends React.Component {
      state = {
          confirmDirty: false,
          autoCompleteResult: [],
          loading: false,
          errMessage: null,
      };
  
      handleSubmit = e => {
          e.preventDefault();
          this.props.form.validateFieldsAndScroll((err, values) => {
              if (!err) {
                  //console.log('Received values of form: ', values);
                  this.setState({ loading: true });
                  userService.register(values.username, values.password, values.email)
                  .then(() => {
                      this.props.hideForm();
                      // any redirections goes here
                      if (this.props.setToMap) {
                          this.props.setToMap(true);
                      }
                  })
                  .catch(error => {
                      this.setState({errMessage: error})
                  });
                  this.setState({ loading: false });                
              }
          });
      };
  
      handleConfirmBlur = e => {
          const { value } = e.target;
          this.setState({ confirmDirty: this.state.confirmDirty || !!value });
      };
  
      compareToFirstPassword = (rule, value, callback) => {
          const { form } = this.props;
          if (value && value !== form.getFieldValue('password')) {
              callback('Two passwords that you entered are inconsistent!');
          } else {
              callback();
          }
      };
  
      validateToNextPassword = (rule, value, callback) => {
          const { form } = this.props;
          if (value && this.state.confirmDirty) {
              form.validateFields(['confirm'], { force: true });
          }
          callback();
      };
  
  
      render() {
          const { getFieldDecorator } = this.props.form;
          const { loading, errMessage } = this.state;
  
          const formItemLayout = {
              labelCol: {
                  xs: { span: 24 },
                  sm: { span: 24 },
                  md: { span: 24 },
                  lg: { span: 24 },
                  xl: { span: 24 },
              },
              wrapperCol: {
                  xs: { span: 24 },
                  sm: { span: 24 },
                  md: { span: 24 },
                  lg: { span: 24 },
                  xl: { span: 24 },
              },
          };
          const tailFormItemLayout = {
              wrapperCol: {
                  xs: {
                      span: 24,
                      offset: 0,
                  },
                  sm: {
                      span: 16,
                      offset: 0,
                  },
              },
          };
  
          return (
              <Form {...formItemLayout} onSubmit={this.handleSubmit}>
                  <Form.Item label="E-mail">
                      {getFieldDecorator('email', {
                          rules: [
                              {
                                  type: 'email',
                                  message: 'The input is not valid E-mail!',
                              },
                              {
                                  required: true,
                                  message: 'Please input your E-mail!',
                              },
                          ],
                      })(<Input />)}
                  </Form.Item>
                  <Form.Item
                      label={
                          <span>
                          Username&nbsp;
                              <Tooltip title="This is the name that will be shown on your profile">
                                  <Icon type="question-circle-o"/>
                              </Tooltip>
                          </span>
                      }
                  >
                      {getFieldDecorator('username', {
                          rules: [{required: true, message: 'Please input your username!', whitespace: true}],
                      })(<Input/>)}
                  </Form.Item>
                  <Form.Item label="Password" hasFeedback>
                      {getFieldDecorator('password', {
                          rules: [
                              {
                                  required: true,
                                  message: 'Please input your password!',
                              },
                              {
                                  validator: this.validateToNextPassword,
                              },
                          ],
                      })(<Input.Password />)}
                  </Form.Item>
                  <Form.Item label="Confirm Password" hasFeedback>
                      {getFieldDecorator('confirm', {
                          rules: [
                              {
                                  required: true,
                                  message: 'Please confirm your password!',
                              },
                              {
                                  validator: this.compareToFirstPassword,
                              },
                          ],
                      })(<Input.Password onBlur={this.handleConfirmBlur} />)}
                  </Form.Item>
  
  
                  <Form.Item {...tailFormItemLayout}>
                      {getFieldDecorator('agreement', {
                          valuePropName: 'checked',
                          rules: [{required: true, message: 'Please read the agreement!'}]
                      })(
                          <Checkbox>
                              I have read the <a href="">agreement</a>
                          </Checkbox>,
                      )}
                  </Form.Item>
                  <Form.Item {...tailFormItemLayout}>
                      <p style={{color: "red"}}>{errMessage}</p>
                      <Button type="primary" htmlType="submit" loading={loading}>
                          Register
                      </Button>
                  </Form.Item>
              </Form>
          );
      }
  }
  
  const WrappedRegistrationForm = Form.create({ name: 'register' })(RegistrationForm);
  export default WrappedRegistrationForm;
  