From 5f116e86c497bad52880f7e4c4905d213b6675f7 Mon Sep 17 00:00:00 2001 From: Maana Ajmera Date: Wed, 17 Jul 2024 03:08:07 +0530 Subject: [PATCH] password-visible-hidden --- log/login.css | 23 +++++++++++++++++++++++ log/login.html | 44 ++++++++++++++++++++++++++++++++------------ log/script.js | 27 ++++++++++++++++++++++++++- 3 files changed, 81 insertions(+), 13 deletions(-) diff --git a/log/login.css b/log/login.css index 946421e8..84e787a1 100644 --- a/log/login.css +++ b/log/login.css @@ -474,3 +474,26 @@ input { z-index: 1000; font-size: 1.2rem; } +.toggle-password { + position: relative; + cursor: pointer; + user-select: none; +} + +.toggle-password svg { + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + height: 15px; +} + +/* Additional styles for password container */ +.password-container { + position: relative; + width: 100%; +} + +.password-container input { + padding-right: 30px; /* Adjust based on your eye icon size */ +} diff --git a/log/login.html b/log/login.html index b38644e7..4509b79f 100644 --- a/log/login.html +++ b/log/login.html @@ -12,7 +12,6 @@ -
@@ -21,21 +20,31 @@ -
+
-
-

RAPIDOC

+

RAPIDOC

- +
+ + + + + + + + + + +
@@ -44,7 +53,18 @@

RAPIDOC

RAPIDOC

- +
+ + + + + + + + + + +
@@ -57,9 +77,9 @@

RAPIDOC

or use your account
diff --git a/log/script.js b/log/script.js index df910e12..cabbf0a2 100644 --- a/log/script.js +++ b/log/script.js @@ -10,6 +10,17 @@ document.addEventListener("DOMContentLoaded", function() { successBanner.textContent = "Login Successful"; document.body.appendChild(successBanner); + // Function to toggle password visibility + function togglePasswordVisibility(toggleButton) { + const passwordField = document.querySelector(toggleButton.getAttribute("toggle")); + const type = passwordField.getAttribute("type") === "password" ? "text" : "password"; + passwordField.setAttribute("type", type); + + // Change eye icon appearance based on password field visibility + toggleButton.querySelector("svg").classList.toggle("visible"); + } + + // Event listener for register and login buttons registerButton.addEventListener("click", (event) => { event.preventDefault(); container.classList.add("right-panel-active"); @@ -22,6 +33,20 @@ document.addEventListener("DOMContentLoaded", function() { loginForm.scrollIntoView({ behavior: "smooth" }); }); + // Event listener for password visibility toggle in register form + const registerEye = document.querySelector("#registerForm .toggle-password"); + registerEye.addEventListener("click", function(event) { + event.preventDefault(); + togglePasswordVisibility(registerEye); + }); + + // Event listener for password visibility toggle in login form + const loginEye = document.querySelector("#loginForm .toggle-password"); + loginEye.addEventListener("click", function(event) { + event.preventDefault(); + togglePasswordVisibility(loginEye); + }); + registerForm.addEventListener("submit", (event) => { event.preventDefault(); // Your registration logic goes here @@ -42,7 +67,7 @@ document.addEventListener("DOMContentLoaded", function() { successBanner.style.display = "block"; setTimeout(() => { successBanner.style.display = "none"; - window.location.href = "login.html"; // Change "index.html" to your desired URL + window.location.href = "login.html"; // Change "login.html" to your desired URL }, 2000); // Display banner for 2 seconds }); });