Fixes: #83 Login and signup Form Validation fixed

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

Hide file tree

Showing 2 changed files with 141 additions and 48 deletions.
diff --git 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
@@ -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"