feat: Enhance Sign-In/Sign-Up Form with Professional UI and Zod Valid…

[airajena]

Description

This PR significantly improves the Sign-In and Sign-Up components by introducing a more professional and aesthetically pleasing UI, along with robust form validation using Zod. Below is a detailed list of the changes made:

Changes Made

UI/UX Improvements:

• Introduced a modern, responsive design using Tailwind CSS.
• Added branding elements such as a logo and a gradient background.
• Enhanced the form layout for better user experience and readability.
• Included a toggle to switch between Sign-In and Sign-Up forms seamlessly.
• Added "Sign Up with Google" and "Sign Up with Facebook" buttons to facilitate social sign-ups.

Form Validation:

• Integrated Zod for schema-based form validation.
• Created separate schemas for Sign-In (signInSchema) and Sign-Up (signUpSchema) forms.
• Implemented validation logic to provide real-time feedback on input errors.
• Ensured password confirmation match validation in the Sign-Up form.

State Management:

• Utilized React hooks (useState) for managing form state and validation errors.
• Added functions to handle input changes and form submissions effectively.

Technical Details

File Changes:

• SignIn.js: Major changes to the component structure, adding validation and new UI elements.
• validation.js: New file containing Zod schemas for form validation.

Dependencies Added:

• zod: Schema declaration and validation library.

Screenshots

[cb7chaitanya]

@0xaira Bro, first of all I didn't assign you the issue, I was waiting for other contributors to comment too, that is why put you guys in a group, also the form is incorrect, it is not matching the existing UI scheme for the website

The zod validation is also in the wrong place, we will put all the zod validators in the packages folder and reuse them for the backend too

The biggest thing is, the Form component expects more fields when signing up that is why i put the hint to take a look at the existing donation form and volunteer form for all the fields, if not that take a look at the prisma schema in the Backend

[airajena]

@cb7chaitanya,

Thank you for providing these insights. However, I must apologize as I currently don't have the bandwidth to contribute to this issue. I appreciate your understanding. Please feel free to assign it to someone else who has the capacity to address these concerns.

Best regards,
Aira

[cb7chaitanya]

Alright closing it