From 00d4b7f88e6e980d98ec9343b2c4aae3a0b99ac1 Mon Sep 17 00:00:00 2001
From: Rohitha Pudu <rohithapudu@gmail.com>
Date: Thu, 16 May 2024 17:43:33 +0530
Subject: [PATCH 1/3] install bootstrap icons

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index e28ee1b3..8baa2f0e 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.5",
+    "bootstrap-icons": "^1.11.3",
     "chart.js": "^4.4.2",
     "cloudinary": "^1.41.3",
     "core-js": "^3.36.1",

From d2d1876093c9950576484394d063074b2851c779 Mon Sep 17 00:00:00 2001
From: Rohitha Pudu <rohithapudu@gmail.com>
Date: Thu, 16 May 2024 17:44:03 +0530
Subject: [PATCH 2/3] update package-lock.json

---
 package-lock.json | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index cd8c0178..a7438339 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.6.5",
+        "bootstrap-icons": "^1.11.3",
         "chart.js": "^4.4.2",
         "cloudinary": "^1.41.3",
         "core-js": "^3.36.1",
@@ -7176,6 +7177,21 @@
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.3.tgz",
+      "integrity": "sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ]
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

From abe1c7f7154f990a63503849026b51636e41445e Mon Sep 17 00:00:00 2001
From: Rohitha Pudu <rohithapudu@gmail.com>
Date: Thu, 16 May 2024 17:44:37 +0530
Subject: [PATCH 3/3] add password toggle option in
 src/pages/user/UserRegistration.jsx

---
 src/pages/user/UserRegistration.jsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/pages/user/UserRegistration.jsx b/src/pages/user/UserRegistration.jsx
index 7c638634..5e5219e7 100644
--- a/src/pages/user/UserRegistration.jsx
+++ b/src/pages/user/UserRegistration.jsx
@@ -3,6 +3,8 @@ import { useLocation } from "react-router-dom";
 import InputField from "../../Components/shared/InputField";
 import ReactiveButton from "reactive-button";
 import Background from "../../Components/shared/Background";
+import 'bootstrap-icons/font/bootstrap-icons.css';
+
 import {
   googleLogin,
   googleSignup,
@@ -51,6 +53,11 @@ function LoginRegisterForm() {
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [state, setButtonState] = useState("idle");
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(prevState => !prevState); // Toggle the visibility state
+  };
 
   useEffect(() => {
     setError("");
@@ -110,9 +117,10 @@ function LoginRegisterForm() {
               }}
               required
             />
+            <div style={{position:'relative'}}>
             <InputField
               className="placeholder-stone h-16 mt-5 bg-opacity-45 backdrop-blur-[6px] w-80 px-4 py-2 items-center outline-0 rounded-[30px] text-black text-lg bg-white shadow-dashBoardCardImageShadow"
-              type="password"
+              type={showPassword ? 'text' : 'password'}
               placeholder="Password"
               value={password}
               onChange={(e) => {
@@ -122,6 +130,21 @@ function LoginRegisterForm() {
               required
             />
 
+                <div
+                style={{
+                  position: 'absolute',
+                  top: '60%',
+                  right: '30px',
+                  transform: 'translateY(-50%)',
+                  cursor: 'pointer',
+                  
+                }}
+                onClick={togglePasswordVisibility}
+              >
+                {showPassword ?  <i className="bi bi-eye-slash"></i> : <i className="bi bi-eye"></i>}
+              </div>
+            </div>
+
             {!isLogin && (
               <>
                 <div className="w-screen relative h-[70px] mt-5 flex justify-center">