From 0ce36ecce78346e9e174dcdb796e16086bde811c Mon Sep 17 00:00:00 2001
From: Saimanjari777 <psmanjari777@gmail.com>
Date: Fri, 24 May 2024 12:39:08 +0530
Subject: [PATCH] Added eye symbol and it's functionality

I have added the eye symbol in both login and sign up in the booklist for swapping section and also added it's functionality.
---
 assets/css/addremove.css       | 26 +++++++++++++++++++++
 assets/html/addremovebook.html | 42 ++++++++++++++++++++++++++++++++--
 2 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/assets/css/addremove.css b/assets/css/addremove.css
index 516d47104..9ae83e9c9 100644
--- a/assets/css/addremove.css
+++ b/assets/css/addremove.css
@@ -101,4 +101,30 @@ button:hover {
   border: 1px solid var(--light-gray);
   border-radius: 3px;
 }
+.input-box{
+  position: relative;
+}
+
+#eye-icon {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+    padding: 5px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.3s;
+    z-index: 1;
+    height: 20px;
+    width: 25px;
+}
 
+#eye-icon-login {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  height: 20px;
+  width: 25px;
+}
\ No newline at end of file
diff --git a/assets/html/addremovebook.html b/assets/html/addremovebook.html
index fb883b732..63640ef8b 100644
--- a/assets/html/addremovebook.html
+++ b/assets/html/addremovebook.html
@@ -16,13 +16,19 @@ <h1>Your Booklist for Swapping</h1>
 		<div id="auth">
 		<h2>Login</h2>
 		<input type="text" id="login-username" placeholder="Username">
-		<input type="password" id="login-password" placeholder="Password">
+		<div class="input-box">
+		<input type="password" id="login_password" placeholder="Password">
+		<img src="../images/eye-close.png" alt="Eye close-image" id="eye-icon-login">
+		</div>
 		<button onclick="login()">Login</button>
 
 
 		<h2>Sign Up</h2>
 		<input type="text" id="signup-username" placeholder="Username">
-		<input type="password" id="signup-password" placeholder="Password">
+		<div class="input-box">
+		<input type="password" id="password" placeholder="Password">
+		<img src="../images/eye-close.png" alt="Eye close-image" id="eye-icon">
+		</div>
 		<button onclick="signUp()">Sign Up</button>
 		</div>
 
@@ -36,5 +42,37 @@ <h2>Welcome, <span id="user"></span></h2>
 		</div>
 		</div>
 		<script src="/assets/js/addremove.js"></script>
+		<script>
+		let eyeIcon = document.getElementById("eye-icon");
+		let password = document.getElementById("password");
+		let passwordLogin = document.getElementById("login_password");
+		let eyeIconLogin = document.getElementById("eye-icon-login");
+					// Set the password field to type "password" by default
+					password.type = "password";
+		eyeIcon.src = "../images/eye-close.png"; // Set the initial eye icon as closed
+
+		eyeIcon.onclick = function () {
+			if (password.type === "password") {
+				password.type = "text";
+				eyeIcon.src = "../images/eye-open.png";
+			} else {
+				password.type = "password";
+				eyeIcon.src = "../images/eye-close.png";
+			}
+		};
+
+		passwordLogin.type = "password";
+		eyeIconLogin.src = "../images/eye-close.png"; // Set the initial eye icon as closed
+
+		eyeIconLogin.onclick = function () {
+			if (passwordLogin.type === "password") {
+				passwordLogin.type = "text";
+				eyeIconLogin.src = "../images/eye-open.png";
+			} else {
+				passwordLogin.type = "password";
+				eyeIconLogin.src = "../images/eye-close.png";
+			}
+		};
+		</script>
 		</body>
 		</html>