krishnaacharyaa / wanderlust

WanderLust is a MERN travel blog website 🚀 This project is aimed to help people to contribute in open source, upskill in react and master git.
https://wanderlust-beta.vercel.app/
MIT License
175 stars 839 forks source link

[ENHANCEMENT] Error messages should come below input field as message error instead of toast error. #301

Closed 0xmohitsen closed 1 month ago

0xmohitsen commented 1 month ago

Description

Currently, when user fill the signin or signup form. We are validating them from backend and toastifying the error on the frontend. But toastifying error message for inpur field which is not required. We can display them as a error message below the violated input fields as we are displaying other errors.

Current Behavior

Case 1. :- Signup form => When a new user fill the signup form and filsl the username or email field with the already existing username or email, we are toastifying error message such as "User with this email or username is already exists".

Screenshot (111)

Extra thing :- (a) On Confirm Password field we are displaying error messages "Password must be contains at least one uppercase and one lowercase and one digit and one special character" while we are displaying that in password field already. (b) Confirm Password shows after submitting the form that "confirmPassword does not match". And when we try to refill the confirmPassword field it shows "Password must be at least 8 character" while it should show "confirmPassword does not match".

Screenshot (112)

Screenshot (113)

Case 2. :- Signin form => When user fill signin form and fills the incorrect email/username or password, we toastify error message. Screenshot (110)

Screenshot (109)

Proposed Enhancement

For Signup page : -

Screenshot (114)

Screenshot (115)

Screenshot (116)

Screenshot (117)

For Signin page : -

Screenshot (118)

Screenshot (119)

Screenshot (120)

Use Case

It will simply provide better user experience. Because we are already displaying other error messages below violated input field so it will maintain the consistency.