From 8c5d83e4b5dad80e20460c73e74502e81564ff42 Mon Sep 17 00:00:00 2001
From: Saurabh Salunke <saurabhsalunke91@gmail.com>
Date: Tue, 21 May 2024 17:47:54 +0530
Subject: [PATCH 1/3] temp changes

---
 config.env                 |  2 ++
 server/.gitignore          |  3 ++-
 server/config/DBconnect.js |  2 +-
 server/index.js            | 16 +++++++++-------
 4 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 config.env

diff --git a/config.env b/config.env
new file mode 100644
index 0000000..9214b52
--- /dev/null
+++ b/config.env
@@ -0,0 +1,2 @@
+
+./package-lock.json
\ No newline at end of file
diff --git a/server/.gitignore b/server/.gitignore
index 0326a4c..ffe0868 100644
--- a/server/.gitignore
+++ b/server/.gitignore
@@ -1,3 +1,4 @@
 config.env
 /node_modules
-package-lock.json
\ No newline at end of file
+package-lock.json
+config.env
\ No newline at end of file
diff --git a/server/config/DBconnect.js b/server/config/DBconnect.js
index bd4b6d6..cbc68f3 100644
--- 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
index d1c7f9e..2c025f4 100644
--- a/server/index.js
+++ b/server/index.js
@@ -9,7 +9,7 @@ import { KidsRouter } from './routes/kids-route.js';
 
 const app=express();
 
-dotenv.config({path:'./config.env'});
+dotenv.config({path:'./config.env'})
 
 connectDB();
 
@@ -17,18 +17,20 @@ app.use(express.json());
 
 app.use(morgan('dev'))
 
-app.use(cors({
-    origin:"https://shopy-mohitparmar1s-projects.vercel.app/",
-    methods:['GET','POST'],
-    credentials:true,
-  }))
+app.use(
+  cors({
+    // origin: "https://shopy-mohitparmar1s-projects.vercel.app/",
+    origin: "*",
+    methods: ["GET", "POST"],
+    credentials: true,
+  })
+);
 
 app.use('/api/v1/mens',MensRouter);
 app.use('/api/v1/womens',WomensRouter);
 app.use('/api/v1/kids',KidsRouter);
   
 const port=process.env.PORT||7000;
-
 app.listen(port,()=>{
     console.log(`Server is running on port ${port}`);
 })
\ No newline at end of file

From 80c3d049e4df4c7b8dad5e7624394f5e181a1c26 Mon Sep 17 00:00:00 2001
From: Saurabh Salunke <saurabhsalunke91@gmail.com>
Date: Tue, 21 May 2024 19:32:50 +0530
Subject: [PATCH 2/3] Fixes: #83 Login and signup Form Validation fixed

---
 src/Pages/Login.jsx  | 71 +++++++++++++++++++++++++++++++-------
 src/Pages/Signup.jsx | 82 +++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 136 insertions(+), 17 deletions(-)

diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
index 5bac6bd..590ba95 100644
--- 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
index 5883805..8d501bb 100644
--- a/src/Pages/Signup.jsx
+++ b/src/Pages/Signup.jsx
@@ -1,7 +1,20 @@
 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");
   };
@@ -9,31 +22,92 @@ const Signup = () => {
     <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"

From 15985710902e6f01dee2b89e30b89482afa51c85 Mon Sep 17 00:00:00 2001
From: Saurabh Salunke <saurabhsalunke91@gmail.com>
Date: Tue, 21 May 2024 20:32:13 +0530
Subject: [PATCH 3/3] Fixes: #83 Login and signup Form Validation fixed

---
 src/Pages/Login.jsx  |  66 +++++++++++++++++------
 src/Pages/Signup.jsx | 123 ++++++++++++++++++++++++++++++++-----------
 2 files changed, 141 insertions(+), 48 deletions(-)

diff --git a/src/Pages/Login.jsx b/src/Pages/Login.jsx
index 590ba95..3f579bf 100644
--- a/src/Pages/Login.jsx
+++ b/src/Pages/Login.jsx
@@ -1,6 +1,8 @@
 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("");
@@ -9,6 +11,7 @@ const Login = () => {
   const [isPasswordValid, setIsPasswordValid] = useState(false);
   const [isEmailFocused, setIsEmailFocused] = useState(false);
   const [isPasswordFocused, setIsPasswordFocused] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const navigate = useNavigate();
   const handleLogin = async (e) => {
     e.preventDefault();
@@ -48,23 +51,52 @@ const Login = () => {
             * 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
-            );
+        <div
+          className="rela2"
+          type={isPasswordVisible ? "text" : "password"}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            height: "max-content",
+            position: "relative",
           }}
-          onFocus={() => {
-            setIsEmailFocused(false);
-            setIsPasswordFocused(true);
-          }}
-        />
+        >
+          <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}
@@ -78,7 +110,7 @@ const Login = () => {
         >
           Login
         </button>
-        <p className="mt-2 text-xs " style={{fontSize:"0.8rem"}}>
+        <p className="mt-2 text-xs " style={{ fontSize: "0.8rem" }}>
           {"Don't have an account?"}
           <span
             className="text-blue-500 cursor-pointer ml-2"
diff --git a/src/Pages/Signup.jsx b/src/Pages/Signup.jsx
index 8d501bb..23e7e60 100644
--- a/src/Pages/Signup.jsx
+++ b/src/Pages/Signup.jsx
@@ -1,5 +1,6 @@
 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("");
@@ -11,6 +12,8 @@ const Signup = () => {
    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);
@@ -53,45 +56,103 @@ const Signup = () => {
             * 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
-            );
+        <div
+          className="rela"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            height: "max-content",
+            position: "relative",
           }}
-          onFocus={() => {
-            setIsEmailFocused(false);
-            setIsPasswordFocused(true);
-            setIsConfirmPasswordFocused(false);
-          }}
-        />
+        >
+          <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>
         {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);
+        <div
+          className="rela1"
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+            height: "max-content",
+            position: "relative",
           }}
-          onFocus={() => {
-            setIsEmailFocused(false);
-            setIsPasswordFocused(false);
-            setIsConfirmPasswordFocused(true);
-          }}
-        />
+        >
+          <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"