We're going to apply the same logic we used to create the login form and create a register page. The register page should look like the screenshot given as follows:

1. Create a container:

Let's first create the container inside app/containers/Register/index.js. We already have this file created from Chapter 4, Concept of Immutability. This index.js page is being called by the main container file app/containers/App/index.js. The container component will load the registration form, as follows:

import React, { Component } from 'react';
import Form from './Form';

/* eslint-disable react/prefer-stateless-function */
class RegisterPage extends Component {
  render() {
    return (
      <div className="register-containers">
        <Form onSubmit={() => {}} />
      </div>
    );
  }
}

export default RegisterPage;

2. Create the register form:

Note that the registration form uses a Redux form to create the form. It also loads CSS files from style.css. For now, our focus is not about the CSS file. So, go ahead and use them for this project. Moreover, we have the validation logic written that ensures validation for email, password, and name, as follows:

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Button, Spin } from 'antd';
import { Field, reduxForm } from 'redux-form/immutable';
import renderInput from 'components/Form/Fields/input';
import { validate } from './validate';
import './style.css';

const RegisterForm = props => {
  const { handleSubmit, pristine, submitting, message } = props;

  return (
    <Form onSubmit={handleSubmit} className="form-register-containers">
      <Spin spinning={submitting} tip="Submitting...">
        <h1 className="center">
          Register an account <br />
          to Rask Lege
        </h1>
        <Field
          name="email"
          hasFeedback
          component={renderInput}
          disabled={submitting}
          label="Email"
          placeholder="Email"
        />
        <Field
          hasFeedback
          type="password"
          name="password"
          component={renderInput}
          disabled={submitting}
          label="Password"
          placeholder="Password"
        />
        <Field
          hasFeedback
          type="password"
          name="confirmPassword"
          component={renderInput}
          disabled={submitting}
          label="Confirm Password"
          placeholder="Confirm Password"
        />
        <Field
          hasFeedback
          name="name"
          component={renderInput}
          disabled={submitting}
          label="Name"
          placeholder="Full Name"
        />
        <Form.Item className="center">
          <Button
            type="primary"
            htmlType="submit"
            className="btn-submit"
            disabled={pristine || submitting}
          >
            Create an account
          </Button>
        </Form.Item>
        {!!message && <p className="caption-invalid">{message}</p>}
      </Spin>
    </Form>
  );
};

RegisterForm.propTypes = {
  pristine: PropTypes.bool,
  message: PropTypes.string,
  submitting: PropTypes.bool,
  handleSubmit: PropTypes.func,
};

export default reduxForm({
  form: 'register-form',
  validate,
})(RegisterForm);

The validation code validates and ensures that the users registering in the application meet the criteria as specified. Failure to comply with this requirement will trigger the validation error as shown in the following screenshot and disable the form submission:

Here's the logic for validation. The validation code is written in a separate validate.js file, as follows:

const validate = values => {
  const errors = {};
  if (!values.get('email')) {
    errors.email = 'Required';
  } else if (
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.get('email'))
  ) {
    errors.email = 'Invalid email address';
  }
  if (!values.get('password')) {
    errors.password = "Password can't be blank";
  }

  if (!values.get('confirmPassword')) {
    errors.confirmPassword = "Confirm password can't be blank";
  }

  if (
    values.get('password') &&
    values.get('confirmPassword') &&
    values.get('password') !== values.get('confirmPassword')
  ) {
    errors.confirmPassword = "Confirm password didn't match";
  }

  if (!values.get('name')) {
    errors.name = "Name can't be blank";
  }

  return errors;
};