The add user page is used to create a new user to our database. The form can be reused for the following:

1. To create a new user.

2. For editing an existing user. The form can be created using a Redux form and the snippet is given, as follows:

The Form component inside app/containers/User/UserForm.js, and the render part is shown in the snippet, as follows:

<Form
       // eslint-disable-next-line
       ref={this._form}
       onSubmit={handleSubmit}
       className="user-form-user-containers normal-form"
     >
       <Spin spinning={submitting} tip="Submitting...">
         <h1 className="center">{caption}</h1>
         <Field
           name="email"
           hasFeedback
           component={renderInput}
           disabled={submitting || !isNew}
           label="Email"
           placeholder="[email protected]"
         />
         <Field
           hasFeedback
           name="name"
           component={renderInput}
           disabled={submitting}
           label="Name"
           placeholder="John Doe"
         />
         <Field
           hasFeedback
           type="password"
           name="password"
           component={renderInput}
           disabled={submitting}
           label="Password"
           placeholder="Password"
         />
         {isNew && (
           <Field
             hasFeedback
             type="password"
             name="confirmPassword"
             component={renderInput}
             label="Confirm Password"
             placeholder="Confirm Password"
         )}
         <Field
           hasFeedback
           name="gender"
           options={genders}
           defaultValue="other"
           disabled={submitting}
           component={renderSelect}
           label="Gender"
           placeholder="Select your Gender"
         />
         <Field
           hasFeedback
           name="role"
           options={roles}
           defaultValue="user"
           disabled={submitting}
           component={renderSelect}
           label="Role"
           placeholder="Role"
         />
         <div className="center">
           <Button
             type="primary"
             htmlType="submit"
             className="btn-submit"
             disabled={submitting}
           >
             Save
           </Button>
         </div>
       </Spin>
     </Form>

By now, we have all of the views ready. Following a similar pattern, we have added the Add.js and Edit.js files for adding and editing users, respectively. 

Now, let's connect these components with Redux. Let's first start with the register page.