From 11dafadebbbefa2d6c23fb8e6c2ff9880a9d6ba0 Mon Sep 17 00:00:00 2001
From: SrinivasDevolper <kingsrinivassri123@gmail.com>
Date: Mon, 10 Jun 2024 11:11:39 +0530
Subject: [PATCH] [Feat]:- Password Hide and Show button

---
 login/login.css | 112 +++++++++++++++++++++++++++++++++++++++++++++++-
 login/script.js |  28 +++++++++++-
 newLogin.html   |  23 ++++++++--
 3 files changed, 158 insertions(+), 5 deletions(-)

diff --git a/login/login.css b/login/login.css
index a2a8385e..3de86d7b 100644
--- a/login/login.css
+++ b/login/login.css
@@ -25,7 +25,7 @@
    font-weight: 700;
    letter-spacing: -1.5px;
    margin: 0;
-   margin-bottom: 15px;
+   margin-top: 10px;
  }
 
  h1.title {
@@ -206,6 +206,116 @@
    animation: show 0.6s;
  }
 
+ #login-section{
+  display: flex;
+  align-items: center;
+  width: 100%;
+ }
+
+ #loginPassword{
+  position: relative;
+ }
+
+ #toggleLoginPassword{
+  position: absolute;
+  background: transparent;
+  border: none;
+  color: #505050;
+  right: 15%;
+  padding:2px;
+  transition: 0.3s ease-in-out;
+ }
+
+ #register-section{
+  display: flex;
+  align-items: center;
+  width: 100%;
+ }
+
+ #registerPassword{
+  position: relative;
+ }
+
+ #toggleRegisterPassword{
+  position: absolute;
+  background: transparent;
+  border: none;
+  color: #505050;
+  right: 15%;
+  padding:2px;
+  transition: 0.3s ease-in-out;
+ }
+
+ #confirmPassword{
+  position: relative;
+ }
+
+ #toggleConfirmPassword{
+  position: absolute;
+  background: transparent;
+  border: none;
+  color: #505050;
+  right: 15%;
+  padding:2px;
+  transition: 0.3s ease-in-out;
+ }
+
+@media (max-width: 768px){
+  #login-section{
+    display: flex;
+    align-items: center;
+   }
+  
+   #loginPassword{
+    position: relative;
+   }
+  
+   #toggleLoginPassword{
+    position: absolute;
+    background: transparent;
+    border: none;
+    color: #505050;
+    right: 15%;
+     padding:2px;
+     letter-spacing: 1px;
+     text-transform: capitalize;
+     transition: 0.3s ease-in-out;
+   }
+   #register-section{
+    display: flex;
+    align-items: center;
+   }
+   #registerPassword{
+    position: relative;
+   }
+   #toggleRegisterPasswor{
+    position: absolute;
+    background: transparent;
+    border: none;
+    color: #505050;
+    right: 15%;
+     padding:2px;
+     letter-spacing: 1px;
+     text-transform: capitalize;
+     transition: 0.3s ease-in-out;
+   }
+   
+ #confirmPassword{
+  position: relative;
+ }
+
+ #toggleConfirmPassword{
+  position: absolute;
+  background: transparent;
+  border: none;
+  color: #505050;
+  right: 15%;
+  padding:2px;
+  transition: 0.3s ease-in-out;
+ }
+}
+ 
+
  @keyframes show {
    0%,
    49.99% {
diff --git a/login/script.js b/login/script.js
index b4859504..58d346e8 100644
--- a/login/script.js
+++ b/login/script.js
@@ -8,4 +8,30 @@ const registerButton = document.getElementById("register");
 
  loginButton.addEventListener("click", () => {
    container.classList.remove("right-panel-active");
- });
\ No newline at end of file
+ });
+
+ function togglePasswordVisibility(buttonId, inputId, iconId) {
+  const passwordInput = document.getElementById(inputId);
+  const toggleButton = document.getElementById(buttonId);
+  const icon = document.getElementById(iconId);
+
+  toggleButton.addEventListener('click', function (e) {
+      // Toggle the type attribute
+      const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+      passwordInput.setAttribute('type', type);
+
+      // Toggle the icon
+      if (type === 'password') {
+          icon.classList.remove('fa-eye-slash');
+          icon.classList.add('fa-eye');
+      } else {
+          icon.classList.remove('fa-eye');
+          icon.classList.add('fa-eye-slash');
+      }
+  });
+}
+
+// Apply the function to both login and register sections
+togglePasswordVisibility('toggleLoginPassword', 'loginPassword', 'loginIcon');
+togglePasswordVisibility('toggleRegisterPassword', 'registerPassword', 'registerIcon');
+togglePasswordVisibility('toggleConfirmPassword', 'confirmPassword', 'confirmIcon');
\ No newline at end of file
diff --git a/newLogin.html b/newLogin.html
index 4f730cc1..00e2e90b 100644
--- a/newLogin.html
+++ b/newLogin.html
@@ -266,6 +266,7 @@ <h1>Create Account</h1>
    <title>TOUR GUIDE</title>
    <link rel="icon" type="image/x-icon" href="log/favicon.ico">
    <link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
+   <script src="https://kit.fontawesome.com/f2e55912f8.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/login/login.css">
  </head>
  <body>
@@ -276,8 +277,19 @@ <h1>Create Account</h1>
          <h1>TOUR GUIDE </h1>
          <input type="text" placeholder="Name">
          <input type="email" placeholder="Email">
-         <input type="password" placeholder="Password">
-         <input type="password" placeholder="Confirm Password">
+         <!-- <input type="password" placeholder="Password"> -->
+         <div id="register-section">
+            <input type="password" placeholder="Password" id="registerPassword">
+            <button type="button" id="toggleRegisterPassword">
+              <i id="registerIcon" class="fas fa-eye"></i>
+          </button>
+        </div>
+        <div id="register-section">
+         <input type="password" placeholder="Confirm Password" id="confirmPassword">
+            <button type="button" id="toggleConfirmPassword">
+              <i id="confirmIcon" class="fas fa-eye"></i>
+            </button>
+    </div>
          <button onclick="refreshPage()">Register</button>
          <script>
            function refreshPage() {
@@ -299,7 +311,12 @@ <h1>TOUR GUIDE </h1>
        <form action="#">
          <h1>TOUR GUIDE</h1>
          <input type="email" placeholder="Email">
-         <input type="password" placeholder="Password">
+         <div id="login-section">
+            <input type="password" placeholder="Password" id="loginPassword">
+            <button type="button" id="toggleLoginPassword">
+              <i id="loginIcon" class="fas fa-eye"></i>
+          </button>
+        </div>
          <div class="content">
            <div class="checkbox">
              <input type="checkbox" name="checkbox" id="checkbox">