Added eye feature in change password form

src/css/login.css

@@ -15,6 +15,12 @@ body{
     font-size:24px;
     display: flex;
     align-items: center;
+    position: relative;
+}
+
+#ctoggle, #newtoggle, #confirmtoggle {
+    top: -32px;
+    right: 125px;
 }
 
 label {

src/js/login.js

@@ -18,6 +18,9 @@ var cpassword = document.getElementById("cpassword");
 var passwordlim = document.getElementById("passwordlim");
 var newPassword = document.getElementById("newPassword");
 var toggle = document.getElementById("toggle");
+var ctoggle = document.getElementById("ctoggle");
+var newtoggle = document.getElementById("newtoggle");
+var confirmtoggle = document.getElementById("confirmtoggle");
 var settings=document.getElementById("settings");
 var username = document.getElementById("username");
 
@@ -39,6 +42,36 @@ toggle.addEventListener("click", ()=>{
     }
 });
 
+newtoggle.addEventListener("click", ()=>{
+    newtoggle.classList.toggle("fa-eye");
+    newtoggle.classList.toggle("fa-eye-slash");
+    if (newtoggle.classList.contains("fa-eye-slash")) {
+        document.getElementById("newPassword").type = "password";
+    } else {
+        document.getElementById("newPassword").type = "text";
+    }
+});
+
+ctoggle.addEventListener("click", ()=>{
+    ctoggle.classList.toggle("fa-eye");
+    ctoggle.classList.toggle("fa-eye-slash");
+    if (ctoggle.classList.contains("fa-eye-slash")) {
+        document.getElementById("cpassword").type = "password";
+    } else {
+        document.getElementById("cpassword").type = "text";
+    }
+});
+
+confirmtoggle.addEventListener("click", ()=>{
+    confirmtoggle.classList.toggle("fa-eye");
+    confirmtoggle.classList.toggle("fa-eye-slash");
+    if (confirmtoggle.classList.contains("fa-eye-slash")) {
+        document.getElementById("confirmPassword").type = "password";
+    } else {
+        document.getElementById("confirmPassword").type = "text";
+    }
+});
+
 pass.addEventListener("click", ()=>{
     pass.innerHTML = ($("#cPass").toggle().is(":visible"))?("Click here to hide change password form"):("Click here to change password");
 });

src/login.html

@@ -63,15 +63,24 @@
                     <form id="cPass" style="display:none;">
                         <div class="form-group">
                             <input type="password" class="form-control fmargin" id="cpassword" placeholder="Password">
+                            <span class="field-icon">
+                                <i class="fa fa-eye-slash " id="ctoggle"></i>
+                            </span>
                         </div>
                         <div class="form-group">
                             <input type="password" class="form-control fmargin" id="newPassword" placeholder="New Password">
+                            <span class="field-icon">
+                                <i class="fa fa-eye-slash " id="newtoggle"></i>
+                            </span>
                             <div style="text-align: center">
                                 <small hidden id="passwordlim">Allowed password length is 6 to 64 characters</small>
                             </div>
                         </div>
                         <div class="form-group">
                             <input type="password" class="form-control fmargin" id="confirmPassword" placeholder="Confirm New Password">
+                            <span class="field-icon">
+                                <i class="fa fa-eye-slash " id="confirmtoggle"></i>
+                            </span>
                             <div style="text-align: center">
                                 <small hidden id="passwordmatch">Password does not match.</small>
                             </div>