Fixed the email validation bug and added password field empty check

Priyaaa1 · Jun 13, 2024 · ff118e6 · ff118e6
1 parent 5b9f686
commit ff118e6
Showing 1 changed file with 27 additions and 7 deletions.
diff --git a/src/Components/Login/Login.jsx b/src/Components/Login/Login.jsx
@@ -2,26 +2,32 @@ import React, { useState } from "react";
 import { useNavigate, NavLink } from "react-router-dom";
 import "./Login.css";
 import { GoogleLogin } from "@react-oauth/google";
-import { jwtDecode } from "jwt-decode";
+import {jwtDecode} from "jwt-decode";
 
 const Login = () => {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [warnings, setWarnings] = useState({ email: "" });
+  const [warnings, setWarnings] = useState({ email: "", password: "" });
   const navigate = useNavigate();
 
   const handleLogin = () => {
     let emailWarning = "";
+    let passwordWarning = "";
 
     if (!email) {
       emailWarning = "*Please enter your email";
     } else if (!validateEmail(email)) {
       emailWarning = "*Please enter a valid email address!";
     }
 
-    setWarnings({ email: emailWarning });
+    if (!password) {
+      passwordWarning = "*Please enter your password";
+    }
+
+    setWarnings({ email: emailWarning, password: passwordWarning });
 
-    if (email && validateEmail(email)) {
+
+    if (!emailWarning && !passwordWarning && email && password) {
       console.log("Logging in with email:", email);
       navigate("/explore");
     }
@@ -42,16 +48,30 @@ const Login = () => {
             value={email}
             onChange={(e) => {
               setEmail(e.target.value);
-              setWarnings({ email: validateEmail(e.target.value)? "" : "*Please enter a valid email address!" });
+              setWarnings((prevWarnings) => ({ ...prevWarnings, email: "" }));
+            }}
+            onBlur={(e) => {
+              if (!validateEmail(e.target.value)) {
+                setWarnings((prevWarnings) => ({ ...prevWarnings, email: "*Please enter a valid email address!" }));
+              }
             }}
           />
           {warnings.email && <p style={{ color: "red" }} className="warningmsg">{warnings.email}</p>}
           <input
             type="password"
             placeholder="Password"
             value={password}
-            onChange={(e) => setPassword(e.target.value)}
+            onChange={(e) => {
+              setPassword(e.target.value);
+              setWarnings((prevWarnings) => ({ ...prevWarnings, password: "" }));
+            }}
+            onBlur={(e) => {
+              if (!e.target.value) {
+                setWarnings((prevWarnings) => ({ ...prevWarnings, password: "*Please enter your password" }));
+              }
+            }}
           />
+          {warnings.password && <p style={{ color: "red" }} className="warningmsg">{warnings.password}</p>}
         </div>
         <button onClick={handleLogin}>Login</button>
         <p>
@@ -71,4 +91,4 @@ const Login = () => {
   );
 };
 
-export default Login;
+export default Login;