Fixes: #83 Login and signup Form Validation fixed

mohitparmar1 · May 21, 2024 · 80c3d04 · 80c3d04
1 parent a82609e
commit 80c3d04
Show file tree

Hide file tree

Showing 2 changed files with 136 additions and 17 deletions.
diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
@@ -1,47 +1,92 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import google from '../assets/google.png'
 const Login = () => {
   const [active, setActive] = useState(true);
-
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isEmailValid, setIsEmailValid] = useState(false);
+  const [isPasswordValid, setIsPasswordValid] = useState(false);
+  const [isEmailFocused, setIsEmailFocused] = useState(false);
+  const [isPasswordFocused, setIsPasswordFocused] = useState(false);
   const navigate = useNavigate();
-  const handleClicked = () => {
-    navigate("/signup");
-  };
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    console.log(email," ",password);
+  }
   return (
     <div className="flex flex-col items-center justify-center w-full m-auto h-screen bg-gradient-to-b from-purple-100 to-white">
       <h1 className="text-5xl mb-5 font-bold">Login</h1>
       <form className="flex flex-col w-96 h-3/5">
-        <label htmlFor="username">Username</label>
+        <label htmlFor="username">Email</label>
+        {isEmailFocused && !isEmailValid && (
+          <div style={{ color: "red", fontSize: "0.8rem" }}>
+            * Email is not valid
+          </div>
+        )}
         <input
           type="text"
           name="username"
           id="username"
           className="mb-5 mt-1 w-full p-3 outline-none border-2 border-gray-200 rounded-lg"
+          onChange={(e) => {
+            setEmail(e.target.value);
+            setIsEmailValid(
+              e.target.value.trim().length > 0 &&
+                e.target.value.trim().includes("@") &&
+                e.target.value.trim().includes(".")
+            );
+          }}
+          onFocus={() => {
+            setIsEmailFocused(true);
+            setIsPasswordFocused(false);
+          }}
         />
         <label htmlFor="password">Password</label>
+        {isPasswordFocused && !isPasswordValid && (
+          <div style={{ color: "red", fontSize: "0.8rem" }}>
+            * Password is not valid
+          </div>
+        )}
         <input
           type="password"
           name="password"
           id="password"
           className="mb-5 mt-1 w-full p-3 outline-none border-2 border-gray-200 rounded-lg "
+          onChange={(e) => {
+            setPassword(e.target.value);
+            setIsPasswordValid(
+              e.target.value.trim().length > 0 &&
+                e.target.value.trim().length >= 8
+            );
+          }}
+          onFocus={() => {
+            setIsEmailFocused(false);
+            setIsPasswordFocused(true);
+          }}
         />
-        <button type="submit" className="border-2 border-gray-200 bg-gray-300 h-12 w-full font-bold rounded-lg">
+        <button
+          type="submit"
+          disabled={!isEmailValid || !isPasswordValid}
+          style={
+            !isEmailValid || !isPasswordValid
+              ? { cursor: "not-allowed" }
+              : { cursor: "pointer", backgroundColor: "#f5c242" }
+          }
+          className="border-2 border-gray-200 bg-gray-300 h-12 w-full font-bold rounded-lg"
+          onClick={handleLogin}
+        >
           Login
         </button>
-        <p className="mt-2 text-xs ">
+        <p className="mt-2 text-xs " style={{fontSize:"0.8rem"}}>
           {"Don't have an account?"}
           <span
             className="text-blue-500 cursor-pointer ml-2"
-            onClick={handleClicked}
+            onClick={() => navigate("/signup")}
           >
             Sign Up
           </span>
         </p>
-        <button type="submit" className="mt-5 bg-black text-white flex items-center justify-center gap-2 border-2  h-12 w-full font-bold rounded-lg">
-          <img src={google} alt="google login" className="inline-block h-5" />
-          <span>Login with Google</span>
-        </button>
       </form>
     </div>
   );

diff --git a/src/Pages/Signup.jsx b/src/Pages/Signup.jsx
@@ -1,39 +1,113 @@
 import { useNavigate } from "react-router-dom";
-
+import { useState } from "react";
 const Signup = () => {
   const navigate = useNavigate();
+   const [email, setEmail] = useState("");
+   const [password, setPassword] = useState("");
+   const [confirmPassword, setConfirmPassword] = useState("");
+   const [isEmailValid, setIsEmailValid] = useState(false);
+   const [isPasswordValid, setIsPasswordValid] = useState(false);
+   const [isEmailFocused, setIsEmailFocused] = useState(false);
+   const [isPasswordFocused, setIsPasswordFocused] = useState(false);
+   const [isConfirmPasswordValid,setIsConfirmPasswordValid] = useState(false)
+   const [isConfirmPasswordFocused,setIsConfirmPasswordFocused]=useState(false)
+   const handleSignUp = async (e) => {
+     e.preventDefault();
+     console.log(email, " ", password," ",confirmPassword);
+   };
   const handleClicked = () => {
     navigate("/login");
   };
   return (
     <div className="flex flex-col items-center justify-center w-full m-auto h-screen bg-gradient-to-b from-purple-100 to-white">
       <h1 className="text-5xl mb-5 font-bold">Sign up</h1>
       <form className="flex flex-col w-96 h-3/5">
-        <label htmlFor="username">Username</label>
+        <label htmlFor="username">Email</label>
+        {isEmailFocused && !isEmailValid && (
+          <div style={{ color: "red", fontSize: "0.8rem" }}>
+            * Email is not valid
+          </div>
+        )}
         <input
           type="text"
           name="username"
           id="username"
           className="mb-5 mt-1 w-full p-3 outline-none border-2 border-gray-200 rounded-lg"
+          onChange={(e) => {
+            setEmail(e.target.value);
+            setIsEmailValid(
+              e.target.value.trim().length > 0 &&
+                e.target.value.trim().includes("@") &&
+                e.target.value.trim().includes(".")
+            );
+          }}
+          onFocus={() => {
+            setIsEmailFocused(true);
+            setIsPasswordFocused(false);
+            setIsConfirmPasswordFocused(false);
+          }}
         />
         <label htmlFor="password">Password</label>
+        {isPasswordFocused && !isPasswordValid && (
+          <div style={{ color: "red", fontSize: "0.8rem" }}>
+            * Password is not valid
+          </div>
+        )}
         <input
           type="password"
           name="password"
           id="password"
           className="mb-5 mt-1 w-full p-3 outline-none border-2 border-gray-200 rounded-lg"
+          onChange={(e) => {
+            setPassword(e.target.value);
+            setIsPasswordValid(
+              e.target.value.trim().length > 0 &&
+                e.target.value.trim().length >= 8
+            );
+          }}
+          onFocus={() => {
+            setIsEmailFocused(false);
+            setIsPasswordFocused(true);
+            setIsConfirmPasswordFocused(false);
+          }}
         />
         <label htmlFor="password">Confirm Password</label>
+        {isConfirmPasswordFocused && !isConfirmPasswordValid && (
+          <div style={{ color: "red", fontSize: "0.8rem" }}>
+            * Password doesn't match
+          </div>
+        )}
         <input
           type="password"
           name="confirmpassword"
           id="password"
           className="mb-5 mt-1 w-full p-3 outline-none border-2 border-gray-200 rounded-lg"
+          onChange={(e) => {
+            setConfirmPassword(e.target.value);
+            setIsConfirmPasswordValid(e.target.value === password);
+          }}
+          onFocus={() => {
+            setIsEmailFocused(false);
+            setIsPasswordFocused(false);
+            setIsConfirmPasswordFocused(true);
+          }}
         />
-        <button type="submit" className="border-2 border-gray-200 bg-gray-300 h-12 w-full font-bold rounded-lg">
+        <button
+          type="submit"
+          className="border-2 border-gray-200 bg-gray-300 h-12 w-full font-bold rounded-lg"
+          disabled={
+            !isEmailValid || !isPasswordValid || !isConfirmPasswordValid
+          }
+          style={
+            !isEmailValid || !isPasswordValid || !isConfirmPasswordValid
+              ? { cursor: "not-allowed" }
+              : { cursor: "pointer", backgroundColor: "#f5c242" }
+          }
+          onClick={handleSignUp}
+        >
           Sign Up
         </button>
-        <p className="mt-2 text-xs ">
+        <p className="mt-2 text-xs " style={{ fontSize: "0.8rem" }}>
           {"Already have an account?"}
           <span
             className="text-blue-500 cursor-pointer ml-2"