From 1ae4a0f26b1d2b6c97d92ddf172ce7896ee84440 Mon Sep 17 00:00:00 2001
From: wambui-pixel <80099068+wambui-pixel@users.noreply.github.com>
Date: Tue, 19 Mar 2024 18:01:38 +0300
Subject: [PATCH] MG-177 - Add password visibility toggle to login page (#248)

* Add password visibility eye toggle functionality

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>

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

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>

* Code Formatting

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>

* Ports and file name correction

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>

* fix lint error

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>

* margin fix

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>

* comment fix

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>

---------

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>
---
 ui/web/templates/login.html          | 27 +++++++++++++++++++++-----
 ui/web/templates/registration.html   | 24 ++++++++++++++++++-----
 ui/web/templates/resetpassword.html  | 29 ++++++++++++++++++++++++----
 ui/web/templates/updatepassword.html | 27 +++++++++++++++++++++-----
 4 files changed, 88 insertions(+), 19 deletions(-)

diff --git a/ui/web/templates/login.html b/ui/web/templates/login.html
index eb2aa669..bb260fcd 100644
--- a/ui/web/templates/login.html
+++ b/ui/web/templates/login.html
@@ -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"
@@ -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>
@@ -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 }}";
@@ -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;
diff --git a/ui/web/templates/registration.html b/ui/web/templates/registration.html
index b108f7a2..5f184f07 100644
--- a/ui/web/templates/registration.html
+++ b/ui/web/templates/registration.html
@@ -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"
@@ -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>
@@ -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();
diff --git a/ui/web/templates/resetpassword.html b/ui/web/templates/resetpassword.html
index aa3afb06..5a0ec63c 100644
--- a/ui/web/templates/resetpassword.html
+++ b/ui/web/templates/resetpassword.html
@@ -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>
@@ -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;
@@ -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>
diff --git a/ui/web/templates/updatepassword.html b/ui/web/templates/updatepassword.html
index 27420c45..04a1bb60 100644
--- a/ui/web/templates/updatepassword.html
+++ b/ui/web/templates/updatepassword.html
@@ -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>
@@ -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;