chore(web): email validation (#487)

keyshade-xyz · Oct 14, 2024 · e8e737a · e8e737a
1 parent f4af874
commit e8e737a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 305 deletions.
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -24,7 +24,8 @@
     "react-dom": "^18.2.0",
     "sharp": "^0.33.3",
     "sonner": "^1.4.41",
-    "tailwind-merge": "^2.2.1"
+    "tailwind-merge": "^2.2.1",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^13.4.19",

diff --git a/apps/web/src/components/hero/index.tsx b/apps/web/src/components/hero/index.tsx
@@ -4,19 +4,24 @@ import Image from 'next/image'
 import { useState } from 'react'
 import { Toaster, toast } from 'sonner'
 import { ColorBGSVG, HeroImage } from '@public/hero'
+import { z } from 'zod'
 import EncryptButton from '../ui/encrypt-btn'
 import { InputBorderSpotlight } from '../ui/input-spotlight'
 
+const emailSchema = z.string().email()
+
 function Hero(): React.JSX.Element {
   const [email, setEmail] = useState<string>('')
 
   const onSubmit = (e: React.FormEvent): void => {
     e.preventDefault()
 
-    if (email === '') {
+    const result = emailSchema.safeParse(email)
+
+    if (!result.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 an email address </p>
+          <p className="text-sm">Please enter a valid email address </p>
         </div>
       ))
       return