Skip to content
This repository has been archived by the owner on Jan 23, 2025. It is now read-only.

Commit

Permalink
MG-177 - Add password visibility toggle to login page (#248)
Browse files Browse the repository at this point in the history 
* Add password visibility eye toggle functionality

Signed-off-by: wambuipixel <[email protected]>

* Add password visibility eye toggle functionality on registration, update password and reset password pages

Signed-off-by: wambuipixel <[email protected]>

* Code Formatting

Signed-off-by: wambuipixel <[email protected]>

* Ports and file name correction

Signed-off-by: wambuipixel <[email protected]>

* fix lint error

Signed-off-by: wambuipixel <[email protected]>

* margin fix

Signed-off-by: wambuipixel <[email protected]>

* comment fix

Signed-off-by: wambuipixel <[email protected]>

---------

Signed-off-by: wambuipixel <[email protected]>
  • Loading branch information
@wambui-pixel
wambui-pixel authored Mar 19, 2024
1 parent fbf688f commit 1ae4a0f
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 19 deletions.
27 changes: 22 additions & 5 deletions ui/web/templates/login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ <h2>Login</h2>
<div class="col-md-12">
<div class="row mb-3">
<div class="col-md-12 input-field email-field">
<i class="fas fa-solid fa-envelope"></i>
<i class="fas fa-solid fa-envelope me-2"></i>
<input
class="p-3 w-100"
class="p-3 w-100 me-2"
type="email"
name="email"
id="email"
Expand All @@ -43,14 +43,15 @@ <h2>Login</h2>
</div>
<div class="row mb-3">
<div class="col-md-12 input-field password-field">
<i class="fas fa-solid fa-lock"></i>
<i class="fas fa-solid fa-lock me-2"></i>
<input
class="p-3 w-100"
class="p-3 w-100 me-2"
type="password"
name="password"
id="password"
placeholder="Password"
/>
<span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
</div>
<div id="passwordError" class="text-danger"></div>
</div>
Expand Down Expand Up @@ -153,7 +154,8 @@ <h5 class="modal-title" id="forgotPasswordModalLabel">Enter email</h5>
});
</script>
<script>
const passwordField = document.querySelector(".password-field");
const passwordField = document.getElementById("password");
const togglePassword = document.querySelector(".password-toggle-icon i");
const emailField = document.querySelector(".email-field");
const loginError = document.getElementById("loginError");
const pathPrefix = "{{ pathPrefix }}";
Expand All @@ -176,11 +178,26 @@ <h5 class="modal-title" id="forgotPasswordModalLabel">Enter email</h5>
window.location.href = `${pathPrefix}/tokens/secure`;
break;
}

})

.catch((error) => {
console.error("error submitting login form: ", error);
});
}
// Code for toggling the visibility of the password
togglePassword.addEventListener("click", function () {
if (passwordField.type === "password") {
passwordField.type = "text";
togglePassword.classList.remove("fa-eye");
togglePassword.classList.add("fa-eye-slash");
} else {
passwordField.type = "password";
togglePassword.classList.remove("fa-eye-slash");
togglePassword.classList.add("fa-eye");
}
})


function showError(errorMessage) {
loginError.innerHTML = errorMessage;
Expand Down
24 changes: 19 additions & 5 deletions ui/web/templates/registration.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ <h2>Register</h2>
</div>
<div class="row mb-3">
<div class="col-md-12 input-field email-field">
<i class="fas fa-solid fa-envelope"></i>
<i class="fas fa-solid fa-envelope me-2"></i>
<input
class="p-3 w-100"
class="p-3 w-100 me-2"
type="email"
name="email"
id="email"
Expand All @@ -56,14 +56,15 @@ <h2>Register</h2>
</div>
<div class="row mb-3">
<div class="col-md-12 input-field password-field">
<i class="fas fa-solid fa-lock"></i>
<i class="fas fa-solid fa-lock me-2"></i>
<input
class="p-3 w-100"
class="p-3 w-100 me-2"
type="password"
name="password"
id="password"
placeholder="Password"
/>
<span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
</div>
<div id="passwordError" class="text-danger"></div>
</div>
Expand Down Expand Up @@ -126,13 +127,26 @@ <h2>Register</h2>
</script>
<script>
const nameField = document.querySelector(".name-field");
const passwordField = document.querySelector(".password-field");
const passwordField = document.getElementById("password");
const togglePassword = document.querySelector(".password-toggle-icon i");
const emailField = document.querySelector(".email-field");
const registrationError = document.getElementById("registrationError");

document.getElementById("register-button").addEventListener("click", () => {
registrationError.innerHTML = "";
});
// Code for toggling the visibility of the password
togglePassword.addEventListener("click", function () {
if (passwordField.type === "password") {
passwordField.type = "text";
togglePassword.classList.remove("fa-eye");
togglePassword.classList.add("fa-eye-slash");
} else {
passwordField.type = "password";
togglePassword.classList.remove("fa-eye-slash");
togglePassword.classList.add("fa-eye");
}
});

function submitRegistrationForm() {
event.preventDefault();
Expand Down
29 changes: 25 additions & 4 deletions ui/web/templates/resetpassword.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,29 +30,31 @@ <h2>Reset Password</h2>
<div class="col-md-12">
<div class="row mb-3">
<div class="col-md-12 input-field">
<i class="fas fa-solid fa-lock"></i>
<i class="fas fa-solid fa-lock me-2"></i>
<input
class="p-3 w-100"
class="p-3 w-100 me-2"
type="password"
name="password"
id="password"
placeholder="Password"
required
/>
<span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
<div id="passwordError" class="text-danger"></div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-12 input-field">
<i class="fas fa-solid fa-lock"></i>
<i class="fas fa-solid fa-lock me-2"></i>
<input
class="p-3 w-100"
class="p-3 w-100 me-2"
type="password"
name="confirmPassword"
id="confirmPassword"
placeholder="confirm Password"
required
/>
<span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
<div id="confirmPasswordError" class="text-danger"></div>
</div>
</div>
Expand All @@ -70,6 +72,9 @@ <h2>Reset Password</h2>
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;

var passwordError = document.getElementById("passwordError");
var confirmPasswordError = document.getElementById("confirmPasswordError");

passwordError.innerHTML = "";
confirmPasswordError.innerHTML = "";
var isValid = true;
Expand All @@ -84,6 +89,22 @@ <h2>Reset Password</h2>
}
return isValid;
}
// Code for toggling the visibility of the password
const togglePassword = document.querySelectorAll(".password-toggle-icon i");
togglePassword.forEach((icon) => {
icon.addEventListener("click", function () {
const passwordField = icon.parentElement.previousElementSibling;
if (passwordField.type === "password") {
passwordField.type = "text";
icon.classList.remove("fa-eye");
icon.classList.add("fa-eye-slash");
} else {
passwordField.type = "password";
icon.classList.remove("fa-eye-slash");
icon.classList.add("fa-eye");
}
});
});
</script>
</body>
</html>
Expand Down
27 changes: 22 additions & 5 deletions ui/web/templates/updatepassword.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,29 +25,31 @@ <h2>Update Password</h2>
<div class="col-md-12">
<div class="row mb-3">
<div class="col-md-12 input-field">
<i class="fas fa-solid fa-lock"></i>
<i class="fas fa-solid fa-lock me-2"></i>
<input
class="p-3 w-100"
class="p-3 w-100 me-2"
type="password"
name="oldpass"
id="oldpass"
placeholder="Old password"
required
/>
<span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
<div id="oldpassError" class="text-danger"></div>
</div>
</div>
<div class="row mb-3">
<div class="col-md-12 input-field">
<i class="fas fa-solid fa-lock"></i>
<i class="fas fa-solid fa-lock me-2"></i>
<input
class="p-3 w-100"
class="p-3 w-100 me-2"
type="password"
name="newpass"
id="newpass"
placeholder="New password"
required
/>
<span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
<div id="newpassError" class="text-danger"></div>
</div>
</div>
Expand Down Expand Up @@ -100,7 +102,22 @@ <h2>Update Password</h2>
return false;
});
}

// Code for toggling the visibility of the password
const togglePassword = document.querySelectorAll(".password-toggle-icon i");
togglePassword.forEach((icon) => {
icon.addEventListener("click", function () {
const passwordField = icon.parentElement.previousElementSibling;
if (passwordField.type === "password") {
passwordField.type = "text";
icon.classList.remove("fa-eye");
icon.classList.add("fa-eye-slash");
} else {
passwordField.type = "password";
icon.classList.remove("fa-eye-slash");
icon.classList.add("fa-eye");
}
});
});
function showError(errorMessage) {
var loginError = document.getElementById("oldpassError");
loginError.innerHTML = errorMessage;
Expand Down

0 comments on commit 1ae4a0f

Please sign in to comment.