added eye icon for show password (#327)

siv2r · Jun 30, 2021 · 55acda0 · 55acda0
1 parent c73bcd2
commit 55acda0
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 22 deletions.
diff --git a/js/showpassword.js b/js/showpassword.js
@@ -2,22 +2,32 @@
 /**
  * reuturn @void
  */
+
 function box1()
 {
   var password=document.querySelectorAll('[id^="psw"]');
   var x=document.getElementById("box").checked;
-  
+
     if(x==true)
     {
       for (i = 0; i < password.length; i++) {
         password[i].type="text";
       }
-      
+
     }
     else
     {
       for (i = 0; i < password.length; i++) {
         password[i].type="password";
-      } 
+      }
     }
-}
+}
+
+function showPassword(id, no) {
+   $(".toggle-password" + no).toggleClass("fa-eye fa-eye-slash");
+   if ($(id).attr("type") == "password") {
+    $(id).attr("type", "text");
+   } else {
+     $(id).attr("type", "password");
+   }
+}
diff --git a/pages/login.php b/pages/login.php
@@ -3,7 +3,7 @@
  background-image: url("https://wallpaper-mania.com/wp-content/uploads/2018/09/High_resolution_wallpaper_background_ID_77701389136.jpg");
   background-repeat: no-repeat;
   background-size: cover;
-} 
+}
 
 
 form {
@@ -97,7 +97,7 @@
   #showpass
   {
     width:55vw;
-  } 
+  }
 }
 #showpass span{
   font-size: 18px;
@@ -110,6 +110,11 @@
   color: white;
   text-align: center;
 }
+.field-icon{
+position: absolute;
+margin-left: -30px;
+margin-top: 30px;
+}
 </style>
 
 <?php include("../templates/header.php"); ?>
@@ -130,7 +135,7 @@
 
 			<div class="form-elements">
           <img src="../images/red-avatar.png" alt="Avatar" class="avatar">
-          <?php 
+          <?php
             if(isset($_GET["error"])) {
               if ($_GET["error"] == "emptyInputLogin") {
                 echo "<p id='failed'>Please fill all the fields</p>";
@@ -140,15 +145,15 @@
               }
               else if ($_GET["error"] == "invalidPassword") {
                 echo "<p id='failed'>Invalid password</p>";
-              }            
+              }
             }
           ?>
 			</div>
 
 			<div class="form-elements">
-     
+
 				<input type="text" class="my-2" name="uid" placeholder="Username/Email">
-				<input type="password" class="my-2" name="pswd" id="pswd" placeholder="Password">
+				<input type="password" class="my-2" name="pswd" id="pswd" placeholder="Password"><i class="fa fa-fw fa-eye-slash field-icon toggle-password1" id="togglePassword"  onclick="showPassword(pswd,1);" ></i>
         <div id="showpass">
             <input type="checkbox" id="box" onclick="box1()">
             <span id="notice">Show Password</span>
@@ -158,13 +163,12 @@
       </div>
       <p>Don't have an account? <a href="signup.php">Sign Up</a></p>
 
-
 
 
-
+
+
 	</form>
   </div>
+  <!--js-->
   <script src="../js/showpassword.js"></script>
   <?php include("../include/footer.inc.php") ?>
-
-
diff --git a/pages/signup.php b/pages/signup.php
@@ -3,7 +3,7 @@
  background-image: url("https://wallpaper-mania.com/wp-content/uploads/2018/09/High_resolution_wallpaper_background_ID_77701389136.jpg");
   background-repeat: no-repeat;
   background-size: cover;
-} 
+}
 
 form {
   background: rgb(0, 0, 0, 0.5);
@@ -103,7 +103,7 @@
   #showpass
   {
     width:55vw;
-  } 
+  }
 }
 p{
   color: white;
@@ -117,6 +117,11 @@
 #showpass{
   margin-left: -25px;
 }
+.field-icon{
+position: absolute;
+margin-left: -30px;
+margin-top: 25px;
+}
 </style>
 
 <?php include("../templates/header.php"); ?>
@@ -134,7 +139,7 @@
 
     <div class="form-elements">
         <img src="../images/red-avatar.png" alt="Avatar" class="avatar">
-        <?php 
+        <?php
           if(isset($_GET["error"])) {
             if ($_GET["error"] == "emptyInputSignup") {
               echo "<p id='failed'>Please fill all the fields</p>";
@@ -166,7 +171,7 @@
             else if ($_GET["error"] == "none") {
               echo "<p id='success'>Registration successful!!!</p>";
             }
-          
+
           }
         ?>
     </div>
@@ -176,18 +181,18 @@
       <input type="text" class="my-2" name="email" placeholder="Email" class="requiredField">
       <input type="number" class="my-2" name="hosp_id" placeholder="Hospital ID" class="requiredField">
       <!-- <p class="text-start text-light m-0 p-0">Enter hospital Id given by hospital</p> -->
-      <input type="password" class="my-2" name="pswd" placeholder="Password" id="pswd" class="requiredField">
-      <input type="password" class="my-2" name="re_pswd" placeholder="Re-enter Password" id="pswd2" class="requiredField">
+      <input type="password" class="my-2" name="pswd" placeholder="Password" id="pswd" class="requiredField"><i class="fa fa-fw fa-eye-slash field-icon toggle-password1" id="togglePassword" onclick="showPassword(pswd,1);" ></i>
+      <input type="password" class="my-2" name="re_pswd" placeholder="Re-enter Password" id="pswd2" class="requiredField"><i class="fa fa-fw fa-eye-slash field-icon toggle-password2" id="togglePassword" onclick="showPassword(pswd2,2);"></i>
       <div id="showpass">
           <input type="checkbox" id="box" onclick="box1()">
           <span id="notice">Show Password</span>
       </div>
       <button type="submit" name="submit" value="submit" id="submitBtn">Sign Up</button>
     <p>Already Have an Account? <a href="login.php">Log In</a></p>
     </div>
-      	
+
   </form>
   </div>
   <script src="../js/showpassword.js"></script>
-  
+
 <?php include("../include/footer.inc.php") ?>