From 80174666f8f867d9944542612f52e20262e77674 Mon Sep 17 00:00:00 2001
From: harshbhar0629 <harshbhar.0629@gmail.com>
Date: Sun, 13 Oct 2024 07:18:08 +0530
Subject: [PATCH] Apply input validation with the notification message

---
 frontend/package.json                    | 1 +
 frontend/src/components/Login/Login.js   | 6 ++++++
 frontend/src/components/Signup/Signup.js | 7 +++++++
 frontend/src/index.js                    | 2 ++
 4 files changed, 16 insertions(+)

diff --git a/frontend/package.json b/frontend/package.json
index b9fc7c3..f4970ac 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,6 +22,7 @@
     "react-bootstrap": "^2.10.5",
     "react-dom": "^18.3.1",
     "react-firebase-hooks": "^5.1.1",
+    "react-hot-toast": "^2.4.1",
     "react-icon": "^1.0.0",
     "react-icons": "^5.3.0",
     "react-native-linear-gradient": "^2.8.3",
diff --git a/frontend/src/components/Login/Login.js b/frontend/src/components/Login/Login.js
index 5020138..d6449aa 100644
--- a/frontend/src/components/Login/Login.js
+++ b/frontend/src/components/Login/Login.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { useSignInWithEmailAndPassword } from "react-firebase-hooks/auth";
 import { auth } from "../Firebase/firebase";
+import toast from "react-hot-toast";
 
 // LoginHeader Component
 const LoginHeader = () => (
@@ -65,6 +66,7 @@ const LoginFooter = ({ navigate }) => (
 );
 
 function Login() {
+  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [showPassword, setShowPassword] = useState(false);
@@ -73,6 +75,10 @@ function Login() {
 
   const handleLogin = async (e) => {
     e.preventDefault();
+    if (!regex.test(email)) {
+      toast.error("Invalid Email");
+      return;
+    }
     await signInWithEmailAndPassword(email, password);
   };
 
diff --git a/frontend/src/components/Signup/Signup.js b/frontend/src/components/Signup/Signup.js
index 599464c..b847c4c 100644
--- a/frontend/src/components/Signup/Signup.js
+++ b/frontend/src/components/Signup/Signup.js
@@ -4,8 +4,10 @@ import { useNavigate } from "react-router-dom";
 import { useCreateUserWithEmailAndPassword } from "react-firebase-hooks/auth";
 import { auth } from "../Firebase/firebase"; // Import Firebase auth
 import { registerValidation } from "../../validations/validation";
+import toast from "react-hot-toast";
 
 function Signup() {
+  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
@@ -39,6 +41,11 @@ function Signup() {
   const handleSignup = async (e) => {
     e.preventDefault();
 
+    if (!regex.test(email)) {
+      toast.error("Invalid email");
+      return;
+    }
+
     try {
       await registerValidation.validate(
         { email, password, confirmPassword },
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 7316d0f..63478bf 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter } from 'react-router-dom';
+import { Toaster } from "react-hot-toast";
 
 
 const root = document.getElementById('root');
@@ -12,6 +13,7 @@ ReactDOM.render(
   <React.StrictMode>
     <BrowserRouter>
       <App />
+      <Toaster />
     </BrowserRouter>
   </React.StrictMode>,
   root