Merge pull request #802 from Saimanjari777/main

Added eye symbol and it's functionality

assets/css/addremove.css

@@ -122,4 +122,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;
+}

assets/html/addremovebook.html

@@ -23,13 +23,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>
 
@@ -43,5 +49,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>