The add user page is used to create a new user to our database. The form can be reused for the following:
- To create a new user.
- For editing an existing user. The form can be created using a Redux form and the snippet is given, as follows:
Figure 5.6: User Register page
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.