Merge pull request #187 from SaurabhS55/formValidation

Fixes: #83 Login and Signup form validation fixed
mohitparmar1 · May 26, 2024 · 45a180d · 45a180d
2 parents 5646738 + 1598571
commit 45a180d
Show file tree

Hide file tree

Showing 6 changed files with 253 additions and 39 deletions.
diff --git a/config.env b/config.env
@@ -0,0 +1,2 @@
+
+./package-lock.json
diff --git a/server/.gitignore b/server/.gitignore
@@ -1,3 +1,4 @@
 config.env
 /node_modules
-package-lock.json
+package-lock.json
+config.env
diff --git a/server/config/DBconnect.js b/server/config/DBconnect.js
@@ -5,7 +5,7 @@ const connectDB = async () => {
     await mongoose.connect(process.env.DATABASE_URL);
     console.log("Connected To MongoDB");
   } catch (err) {
-    console.log("DB Disconnected");
+    console.log(err)
     process.exit(1);
   }
 };

diff --git a/server/index.js b/server/index.js
@@ -10,7 +10,7 @@ import StripeRouter from './routes/Stripe-route.js';
 
 const app=express();
 
-dotenv.config({path:'./config.env'});
+dotenv.config({path:'./config.env'})
 
 connectDB();
 
@@ -33,7 +33,6 @@ app.use('/api',StripeRouter);
 
 
 const port=process.env.PORT||7000;
-
 app.listen(port,()=>{
     console.log(`Server is running on port ${port}`);
 })
diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
@@ -1,47 +1,124 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import google from '../assets/google.png'
+import { IoEyeOutline, IoEyeOffOutline } from "react-icons/io5";
+
 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 [isPasswordVisible, setIsPasswordVisible] = 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>
-        <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 "
-        />
-        <button type="submit" className="border-2 border-gray-200 bg-gray-300 h-12 w-full font-bold rounded-lg">
+        {isPasswordFocused && !isPasswordValid && (
+          <div style={{ color: "red", fontSize: "0.8rem" }}>
+            * Password is not valid
+          </div>
+        )}
+        <div
+          className="rela2"
+          type={isPasswordVisible ? "text" : "password"}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            height: "max-content",
+            position: "relative",
+          }}
+        >
+          <input
+            type={isPasswordVisible ? "text" : "password"}
+            name="password"
+            id="password"
+            className="mb-2 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);
+            }}
+          />
+          <div
+            className="p-2"
+            style={{
+              position: "absolute",
+              right: "10px",
+              top: "50%",
+              transform: "translateY(-50%)",
+              cursor: "pointer",
+            }}
+            onClick={() => setIsPasswordVisible(!isPasswordVisible)}
+          >
+            {!isPasswordVisible ? (
+              <IoEyeOffOutline color="black" size={20} />
+            ) : (
+              <IoEyeOutline color="black" size={20} />
+            )}
+          </div>
+        </div>
+        <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,174 @@
 import { useNavigate } from "react-router-dom";
-
+import { useState } from "react";
+import { IoEyeOutline, IoEyeOffOutline   } from "react-icons/io5";
 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 [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [isConfirmPasswordVisible, setConfirmIsPasswordVisible] = 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>
-        <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"
-        />
+        {isPasswordFocused && !isPasswordValid && (
+          <div style={{ color: "red", fontSize: "0.8rem" }}>
+            * Password is not valid
+          </div>
+        )}
+        <div
+          className="rela"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            height: "max-content",
+            position: "relative",
+          }}
+        >
+          <input
+            type={isPasswordVisible ? "text" : "password"}
+            name="password"
+            id="password"
+            className="mb-2 mt-1 w-full p-3 outline-none border-2 border-gray-200 rounded-lg pr-10"
+            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);
+            }}
+          />
+          <div
+            className="p-2"
+            style={{
+              position: "absolute",
+              right: "10px",
+              top: "50%",
+              transform: "translateY(-50%)",
+              cursor: "pointer",
+            }}
+            onClick={() => setIsPasswordVisible(!isPasswordVisible)}
+          >
+            {!isPasswordVisible ? (
+              <IoEyeOffOutline color="black" size={20} />
+            ) : (
+              <IoEyeOutline color="black" size={20} />
+            )}
+          </div>
+        </div>
         <label htmlFor="password">Confirm Password</label>
-        <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"
-        />
-        <button type="submit" className="border-2 border-gray-200 bg-gray-300 h-12 w-full font-bold rounded-lg">
+        {isConfirmPasswordFocused && !isConfirmPasswordValid && (
+          <div style={{ color: "red", fontSize: "0.8rem" }}>
+            * Password doesn't match
+          </div>
+        )}
+        <div
+          className="rela1"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            height: "max-content",
+            position: "relative",
+          }}
+        >
+          <input
+            type={isConfirmPasswordVisible ? "text" : "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);
+            }}
+          />
+          <div
+            className="p-2"
+            style={{
+              position: "absolute",
+              right: "10px",
+              top: "50%",
+              transform: "translateY(-50%)",
+              cursor: "pointer",
+            }}
+            onClick={() =>
+              setConfirmIsPasswordVisible(!isConfirmPasswordVisible)
+            }
+          >
+            {!isConfirmPasswordVisible ? (
+              <IoEyeOffOutline color="black" size={20} />
+            ) : (
+              <IoEyeOutline color="black" size={20} />
+            )}
+          </div>
+        </div>
+        <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"