registrationform.js

import React from 'react';
import { Form, Input, Button } from 'antd';
import { status, json } from '../utilities/requestHandlers';
import {withRouter} from 'react-router-dom';


const formItemLayout = {
    labelCol: { xs: { span: 24 }, sm: { span: 6 } },
    wrapperCol: { xs: { span: 24 }, sm: { span: 12 } }
    };
    
const tailFormItemLayout = {
wrapperCol: { xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 6 } },
};

const emailRules = [
    {type: 'email', message: 'The input is not valid E-mail!'},
    {required: true, message: 'Please input your E-mail!' }
];
    
const passwordRules = [    
    { required: true, message: 'Please input your password!' }
];
    
const confirmRules = [   
    { required: true, message: 'Please confirm your password!' },
    // rules can include function handlers in which you can apply additional logic
    ({ getFieldValue }) => ({
        validator(rule, value) {
            if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
    
            }
            return Promise.reject('The passwords that you entered do not match!');
        }
    })
]; 

const usernameRules = [
    { required: true, message: 'Please input your username!', whitespace: true }
]


/**
* Registration form component for app signup.
*/
class RegistrationForm extends React.Component {
    constructor(props){
        super(props)
        this.onFinish = this.onFinish.bind(this)
    }
    
    onFinish = (values) => {
        console.log(values);
        const { confirm, ...data } = values; // ignore the 'confirm' value
        fetch('https://melody-annex-3000.codio-box.uk/api/v1/users', {
            method: "POST",
            body: JSON.stringify(data),
            headers: {
                "Content-Type": "application/json",
            }
        })
        .then(status)
        .then(json)
        .then(data => {
            console.log(data);
            alert("User added")
            this.props.history.push('/login');
        })
        .catch(errorResponse => {
            console.error(errorResponse);
            alert(`Error: ${JSON.stringify(errorResponse)}`);
        });

    };
      

render() {
    return (
        <Form {...formItemLayout} name="register" onFinish={this.onFinish} scrollToFirstError>

            <Form.Item {...tailFormItemLayout} name="email" label="E-mail" rules={emailRules}>
                <Input />
            </Form.Item>

            <Form.Item {...tailFormItemLayout} name="password" label="Password" rules={passwordRules} hasFeedback>
                <Input.Password />
            </Form.Item>

            <Form.Item {...tailFormItemLayout} name="confirm" label="Confirm Password" rules={confirmRules} hasFeedback>
                <Input.Password />
            </Form.Item>

            <Form.Item {...tailFormItemLayout} name="username" label="Username" rules={usernameRules}>
                <Input />
            </Form.Item>

            <Form.Item {...tailFormItemLayout} name="employeeCode" label="Employee Code">
                <Input />
            </Form.Item>

            <Form.Item {...tailFormItemLayout}>
                <Button type="primary" htmlType="submit">
                    Register
                </Button>
            </Form.Item>
        </Form>
        );
    };
};

export default withRouter(RegistrationForm);