From 01959b843414449f711614c339b9d5183b5a6826 Mon Sep 17 00:00:00 2001
From: ramith-kulal <ramithnr1234@gmail.com>
Date: Mon, 15 Jan 2024 20:23:54 +0530
Subject: [PATCH] Add password toggle icon for signup form

---
 client/src/components/Signup.js | 51 ++++++++++++++++++++++++---------
 client/src/styles/Signup.css    | 51 +++++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+), 14 deletions(-)

diff --git a/client/src/components/Signup.js b/client/src/components/Signup.js
index 7a939b3..a8ef732 100644
--- a/client/src/components/Signup.js
+++ b/client/src/components/Signup.js
@@ -5,6 +5,7 @@ import { ReactComponent as Close } from "../icons/close.svg";
 import { createUserWithEmailAndPassword, sendEmailVerification, getAuth, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 import { addDoc, getDocs, query, where } from "firebase/firestore";
 import { usersCollection } from "../firebaseConfig";
+import { FaEye, FaEyeSlash } from "react-icons/fa";
 
 function Signup ({ setShowSignupForm }) {
   const [invalidEmailFOrmat, setInvalidEmailFormat] = useState(false);
@@ -20,6 +21,8 @@ function Signup ({ setShowSignupForm }) {
     confirmPassword: ""
   });
   const [loading, setLoading] = useState(false);
+  const [passwordShow, setPasswordShow] = useState(false);
+  const [confirmPasswordShow, setConfirmPasswordShow] = useState(false);
 
   const handleNameChange = (e) => {
     const isValidName = /^[a-zA-Z\s]*$/.test(e.target.value);
@@ -32,6 +35,14 @@ function Signup ({ setShowSignupForm }) {
     }
   };
 
+  const handlePasswordShowToggle = () => {
+    setPasswordShow(!passwordShow);
+  };
+
+  const handleConfirmPasswordShowToggle = () => {
+    setConfirmPasswordShow(!confirmPasswordShow);
+  };
+
   const handleSignup = async (e) => {
     e.preventDefault();
     setLoading(true);
@@ -135,20 +146,32 @@ function Signup ({ setShowSignupForm }) {
           onChange={(e) => setSignupData({ ...signupData, email: e.target.value })}
           required
         />
-        <input
-          type='password'
-          placeholder='Password(minimimum 8 characters)'
-          value={signupData.password}
-          onChange={(e) => setSignupData({ ...signupData, password: e.target.value })}
-          required
-        />
-        <input
-          type='password'
-          placeholder='Confirm Password'
-          value={signupData.confirmPassword}
-          onChange={(e) => setSignupData({ ...signupData, confirmPassword: e.target.value })}
-          required
-        />
+        <div className="input_div p-0 flex flex-nowrap items-center pe-2">
+          <input
+            className="p-0 m-0 border"
+            type={passwordShow ? "text" : "password"}
+            placeholder='Password(minimum 8 characters)'
+            value={signupData.password}
+            onChange={(e) => setSignupData({ ...signupData, password: e.target.value })}
+            required
+          />
+          { !passwordShow
+            ? <FaEyeSlash onClick={handlePasswordShowToggle} className="h-7 w-7 cursor-pointer"/>
+            : <FaEye onClick={handlePasswordShowToggle} className="h-6 cursor-pointer w-6"/> }
+        </div>
+        <div className="input_div p-0 flex flex-nowrap items-center pe-2">
+          <input
+            className="p-0 m-0 border"
+            type={confirmPasswordShow ? "text" : "password"}
+            placeholder='Confirm Password'
+            value={signupData.confirmPassword}
+            onChange={(e) => setSignupData({ ...signupData, confirmPassword: e.target.value })}
+            required
+          />
+          { !confirmPasswordShow
+            ? <FaEyeSlash onClick={handleConfirmPasswordShowToggle} className="h-7 w-7 cursor-pointer"/>
+            : <FaEye onClick={handleConfirmPasswordShowToggle} className="h-6 cursor-pointer w-6"/> }
+        </div>
         {passwordUnmatched && <p className="error_message">Passwords do not match</p>}
         {userExists && <p className="error_message">User already exists</p>}
         {invalidEmailFOrmat && <p className="error_message">Invalid email format</p>}
diff --git a/client/src/styles/Signup.css b/client/src/styles/Signup.css
index 5daae04..027c30e 100644
--- a/client/src/styles/Signup.css
+++ b/client/src/styles/Signup.css
@@ -64,6 +64,30 @@
     color: #888888;
 }
 
+.signup_form_container form .input_div
+{
+    font-size: 14px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 500;
+    /* padding: 10px 15px; */
+    box-sizing: border-box;
+    transition: 0.5s ease-in-out;
+    border: 0;
+    outline: 0;
+    border-radius: 5px;
+    transition: 0.5s ease-in-out;
+    width: 100%;
+    opacity: 0;
+    background-color: rgb(230, 230, 230);
+    color: #888888;
+}
+.signup_form_container .input_div
+{
+    animation-name: fadeInSlideIn;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards;
+    animation-delay: 700ms;
+}
 .signup_form_container form input::placeholder
 {
     color: #888888;
@@ -157,6 +181,33 @@
     animation-fill-mode: forwards;
     animation-delay: 1100ms;
 }
+.signup_form_container form .input_div:nth-child(1) {
+    animation-name: fadeInSlideIn;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards;
+    animation-delay: 500ms;
+}
+
+.signup_form_container form .input_div:nth-child(2) {
+    animation-name: fadeInSlideIn;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards;
+    animation-delay: 700ms;
+}
+
+.signup_form_container form .input_div:nth-child(3) {
+    animation-name: fadeInSlideIn;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards;
+    animation-delay: 900ms;
+}
+
+.signup_form_container form .input_div:nth-child(4) {
+    animation-name: fadeInSlideIn;
+    animation-duration: 0.5s;
+    animation-fill-mode: forwards;
+    animation-delay: 1100ms;
+}
 
 
 @keyframes fadeInSlideIn