chore: Email validation

[bansal-harsh-2504]

Description

Implemented email validation using zod.

Fixes #463

Mentions

@rajdip-b

Developer's checklist

• My PR follows the style guidelines of this project
• I have performed a self-check on my work

If changes are made in the code:

• I have followed the coding guidelines
• My changes in code generate no new warnings
• There are no UI/UX issues

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Error Handling The error message for invalid email is hardcoded in the toast. Consider using the error message from the zod validation. Code Duplication The toast.custom() call is duplicated. Consider extracting it into a separate function for reusability.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Score
Performance	Move constant definitions outside of component functions to optimize performance Consider moving the emailSchema definition outside of the component function to improve performance. This will prevent unnecessary re-creation of the schema on each render. apps/web/src/components/hero/index.tsx [11-13] +const emailSchema = z.string().email({ message: "Invalid email address" }) + function Hero(): React.JSX.Element { const [email, setEmail] = useState<string>('') - const emailSchema = z.string().email({ message: "Invalid email address" }) Apply this suggestion Suggestion importance[1-10]: 7 Why:	7
Enhancement	Use more specific error handling for improved debugging and user feedback Instead of using safeParse, consider using parse and wrapping it in a try-catch block. This allows for more specific error handling and potentially provides more detailed error messages. apps/web/src/components/hero/index.tsx [18-27] -const validation = emailSchema.safeParse(email) - -if (!validation.success) { - toast.custom(() => ( - <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-[#852b2c] p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]"> - <p className="text-sm">Please enter a valid email address</p> - </div> - )) - return +try { + emailSchema.parse(email) +} catch (error) { + if (error instanceof z.ZodError) { + toast.custom(() => ( + <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-[#852b2c] p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]"> + <p className="text-sm">{error.errors[0].message}</p> + </div> + )) + return + } } Apply this suggestion Suggestion importance[1-10]: 7 Why:	7
Maintainability	Extract repetitive code into separate functions to improve maintainability Consider extracting the toast notification into a separate function to improve code readability and reusability. apps/web/src/components/hero/index.tsx [21-24] -toast.custom(() => ( - <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-[#852b2c] p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]"> - <p className="text-sm">Please enter a valid email address</p> - </div> -)) +const showErrorToast = (message: string) => { + toast.custom(() => ( + <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-[#852b2c] p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]"> + <p className="text-sm">{message}</p> + </div> + )) +} +// Usage +showErrorToast("Please enter a valid email address") + Apply this suggestion Suggestion importance[1-10]: 7 Why:	7

💡 Need additional feedback ? start a PR chat

[bansal-harsh-2504]

@rajdip-b Can you please attach hacktoberfest label before merging?

[rajdip-b]

@kriptonian1 can you review this?

[kriptonian1]

LGTM 🚀

[kriptonian1]

@bansal-harsh-2504 Can you pls fix the merge conflit in the pnpm-lock.yaml file. The easy way to fix this issue is to delete the pnpm-lock.yaml file, and then do pnpm i