Skip to content

Commit

Permalink
Merge pull request #901 from Maana-Ajmera/feat/password-hidden
Browse files Browse the repository at this point in the history 
[FEAT] : Add password visibility in login/signup
  • Loading branch information
@varshith257
varshith257 authored Jul 17, 2024
2 parents 165729e + 7c4dd95 commit 163c834
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 13 deletions.
23 changes: 23 additions & 0 deletions log/login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
}
44 changes: 32 additions & 12 deletions log/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
<script src="signupjs.js" defer type="module"></script>
<script src="signupjs1.js" defer type="module"></script>
<meta name="google-signin-client_id" content="646664380070-n07i34glgcc6sanb59p3m1k5k0cgn1v1.apps.googleusercontent.com">
<!--script src="https://www.googletagmanager.com/gtag/js?l=dataLayer&amp;id=undefined" async=""></script-->
</head>
<body>
<div class="top-left-corner">
Expand All @@ -21,21 +20,31 @@
<path d="M 32 8 C 31.08875 8 30.178047 8.3091875 29.435547 8.9296875 L 8.8007812 26.171875 C 8.0357812 26.810875 7.7634844 27.925203 8.2714844 28.783203 C 8.9184844 29.875203 10.35025 30.088547 11.28125 29.310547 L 12 28.710938 L 12 47 C 12 49.761 14.239 52 17 52 L 47 52 C 49.761 52 52 49.761 52 47 L 52 28.712891 L 52.71875 29.3125 C 53.09275 29.6255 53.546047 29.777344 53.998047 29.777344 C 54.693047 29.777344 55.382672 29.416656 55.763672 28.722656 C 56.228672 27.874656 55.954891 26.803594 55.212891 26.183594 L 52 23.498047 L 52 15 C 52 13.895 51.105 13 50 13 L 48 13 C 46.895 13 46 13.895 46 15 L 46 18.484375 L 34.564453 8.9296875 C 33.821953 8.3091875 32.91125 8 32 8 z M 32 12.152344 C 32.11475 12.152344 32.228766 12.191531 32.322266 12.269531 L 48 25.369141 L 48 46 C 48 47.105 47.105 48 46 48 L 38 48 L 38 34 C 38 32.895 37.105 32 36 32 L 28 32 C 26.895 32 26 32.895 26 34 L 26 48 L 18 48 C 16.895 48 16 47.105 16 46 L 16 25.367188 L 31.677734 12.269531 C 31.771234 12.191531 31.88525 12.152344 32 12.152344 z"></path>
</svg>
</a>
</div>
</div>
<div class="container" id="container">

<div class="form-container register-container">
<form action="#" id="registerForm">
<h1>RAPIDOC </h1>
<h1>RAPIDOC</h1>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<div class="password-container">
<input type="password" id="registerPassword" placeholder="Password">
<span toggle="#registerPassword" class="eye toggle-password">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24px" height="24px">
<circle cx="12" cy="12" r="3" />
<path d="M17.5 12c-1.297 0-2.5-.768-3.5-1.854C12.5 9.768 11.297 9 10 9s-2.5.768-4 1.146c-1 1.086-2.203 1.854-3.5 1.854" />
<path d="M1 12s4-8 11-8s11 8 11 8s-4 8-11 8s-11-8-11-8z" />
</svg>


</span>
</div>
<button type="submit">Register</button>
<span id="registerMessage" style="display: none;">Account created successfully</span>
<div class="social-container">
<a href="www.facebook.com" class="social" id="fb"><i class="lni lni-facebook-fill"></i></a>
<a href="https//google.com" class="social" id="goog"><i class="lni lni-google"></i></a>
<a href="www.linkedin.com" class="social"id="lin"><i class="lni lni-linkedin-original"></i></a>
<a href="https://www.facebook.com" class="social" id="fb"><i class="lni lni-facebook-fill"></i></a>
<a href="https://google.com" class="social" id="goog"><i class="lni lni-google"></i></a>
<a href="https://www.linkedin.com" class="social" id="lin"><i class="lni lni-linkedin-original"></i></a>
</div>
</form>
</div>
Expand All @@ -44,7 +53,18 @@ <h1>RAPIDOC </h1>
<form action="#" id="loginForm">
<h1>RAPIDOC</h1>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<div class="password-container">
<input type="password" id="loginPassword" placeholder="Password">
<span toggle="#loginPassword" class="eye toggle-password">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="24px" height="24px">
<circle cx="12" cy="12" r="3" />
<path d="M17.5 12c-1.297 0-2.5-.768-3.5-1.854C12.5 9.768 11.297 9 10 9s-2.5.768-4 1.146c-1 1.086-2.203 1.854-3.5 1.854" />
<path d="M1 12s4-8 11-8s11 8 11 8s-4 8-11 8s-11-8-11-8z" />
</svg>


</span>
</div>
<div class="content">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox">
Expand All @@ -57,9 +77,9 @@ <h1>RAPIDOC</h1>
<button type="submit">Login</button>
<span>or use your account</span>
<div class="social-container">
<a href="www.facebook.com" class="social" id="fb"><i class="lni lni-facebook-fill"></i></a>
<a href="https//google.com" class="social" id="goog"><i class="lni lni-google"></i></a>
<a href="www.linkedin.com" class="social" id="lin"><i class="lni lni-linkedin-original"></i></a>
<a href="https://www.facebook.com" class="social" id="fb"><i class="lni lni-facebook-fill"></i></a>
<a href="https://google.com" class="social" id="goog"><i class="lni lni-google"></i></a>
<a href="https://www.linkedin.com" class="social" id="lin"><i class="lni lni-linkedin-original"></i></a>
</div>
</form>
</div>
Expand Down
27 changes: 26 additions & 1 deletion log/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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
Expand All @@ -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
});
});

0 comments on commit 163c834

Please sign in to comment.