Add Form Validation for Login and Signup

[ZeeshanMukhtar1]

Description

The current login and signup forms lack comprehensive validation, both on the client and server sides. This gap may lead to a subpar user experience and potential errors during form submission. This issue aims to enhance the user experience by implementing thorough form validation for both the login and signup processes.

Tasks

• [ ] Integrate a form validation library such as Formik or React Hook Form to facilitate frontend validation.
• [ ] Validate email and password inputs for both login and signup forms to ensure data integrity and security.
• [ ] Implement backend validation to complement frontend validation, ensuring data consistency and security.
• [ ] Display appropriate error messages for invalid inputs, providing clear guidance to users.
• [ ] Prevent form submission with invalid inputs to maintain data integrity and prevent unnecessary server requests.
• [ ] Conduct thorough testing to ensure consistent validation behavior across different browsers and devices.

Acceptance Criteria

• [ ] Users should receive real-time feedback on the validity of their inputs during form interaction.
• [ ] Error messages should be displayed next to the respective form fields, clearly indicating the nature of the error.
• [ ] Form submission with invalid inputs should be blocked to prevent data corruption or unintended actions.
• [ ] Backend validation should complement frontend validation, ensuring a robust validation process.
• [ ] Account creation process should be rechecked to handle validation errors properly and provide a smooth user experience.

Additional Information

Form validation plays a pivotal role in delivering a seamless and error-free user experience. By implementing comprehensive validation for the login and signup forms, we can significantly improve usability and reduce the likelihood of user errors. Moreover, the addition of backend validation enhances data security and integrity, contributing to a more reliable system.

Resources

• React Hook Form Documentation
• Formik Documentation

[mademoiselle-chantal]

Hello, @ZeeshanMukhtar1 l would like to work on this issue.

[ZeeshanMukhtar1]

Hello, @ZeeshanMukhtar1 l would like to work on this issue.

Hi @mademoiselle-chantal ,

Thank you for showing interest in working on this issue! I'm glad to have you on board. I have prepared some code files containing the utility for reusing custom errors, which you can find in the following link:

Issue-01-help.zip

Feel free to utilize this utility for implementing errors in the backend and apply the same technique in the frontend for consistency. If you have any questions or need further clarification, don't hesitate to ask.

I've gone ahead and assigned you the issue #4. Looking forward to seeing your contributions!

[mademoiselle-chantal]

Thank you @ZeeshanMukhtar1. Sure, l'll definitely reach out if l need anything.

[mademoiselle-chantal]

Hello, @ZeeshanMukhtar1! Can you provide some instructions on how to run your app? I've tried what l thought was gonna work but unfortunately, it didn't.

[ZeeshanMukhtar1]

Hello, @ZeeshanMukhtar1! Can you provide some instructions on how to run your app? I've tried what l thought was gonna work but unfortunately, it didn't.

U have to create .env file in both client and server directory , also u have ti setup a firebase app , u u know the firebase basic usage.? , to run the app u have to run npm run dev in both client and server folders in terminal at the same time

here is readme defining project setup more deeply project setup