Skip to content
My Docs

User Form

The UserForm component in React is designed to create new users within an application. It employs various elements from the mdb-react-ui-kit to create a user-friendly form. Key features include:

  1. State Management: The component uses React’s useState hook to manage form data and validation states like formData, passwordError, isStrongPassword, and isSubmitting.

  2. Form Validation: It validates user input for creating strong passwords and matching password fields. The validation logic checks for lowercase, uppercase letters, numbers, special characters, and length.

  3. Form Submission: The handleSubmit function handles the form submission. It validates the password, sets the submission state, and sends data to the server using createOneUser. It handles both successful and unsuccessful submissions, displaying appropriate toast notifications.

  4. Loading State: During form submission, a loading spinner (SmallLoadingSpinner) is shown to indicate processing.

  5. Error Handling: The component displays error messages for form validation errors and server-side errors.

  6. UI Components: The form uses MDBInput for input fields, MDBBtn for the submit button, and a MDBCard to encapsulate the form.

  7. Reset Form: On successful user creation, the form resets to its initial state, clearing all input fields.

This component is primarily used in admin contexts for adding new users to the system. It ensures robust data validation and provides feedback to the admin throughout the user creation process.