[Feature] Handling Validation + Error for Sign Up: Both Email & Google Sign Up

[HeriYantodotDev]

Feature Description

Implement validation for input fields in the Sign Up feature. If the input is invalid, display an error message in red color below the respective input field. For example, if the password is not strong enough, show an error message indicating the need for more characters. For Google Sign up, it shows an error if the user is already existed.

Use Case

When a user enters incorrect or invalid input while signing up, such as a weak password or an invalid email format, the system should provide immediate feedback to the user. For Google Sign up, it shows an error if the user is already existed.

Proposed Solution

Implement a validation function that checks whether the input is correct or not. Utilize the Joi library to handle the validation process. If the input is invalid, display the appropriate error message below the input field. This will provide clear feedback to the user about the specific issues with their input.

Alternatives Considered

An alternative solution could be using a library like React Toast to display error messages. React Toast provides a customizable and non-intrusive way to show notifications or messages to users. However, for this particular feature, it might be more suitable to display the error message directly below the input field to ensure the user can easily identify and correct the invalid input.

[HeriYantodotDev]

Additional:

• Google Sign Up

[HeriYantodotDev]

List Error:

• Validation Error
• User is already registered

[HeriYantodotDev]

Update: Instead of using Joi, I decided to use yup library. Joi has problem with client side, and the workaround is a little bit of a mess. Using Yup library is better.