Merge pull request Susmita-Dey#557 from Vanshiii203/main

Added show/hide password button with functionality and back button
Vanshiii203 · Oct 25, 2022 · 897d6fd · 897d6fd
2 parents e468be2 + 46cb8d9
commit 897d6fd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/html/css/login.css b/html/css/login.css
@@ -115,7 +115,12 @@ body {
     inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2),
     inset 4px 4px 6px 0 rgba(0, 0, 0, 0.4);
 }
-
+.back{
+  margin-top: -3.5%;
+}
+.back-1{
+  margin-top: -0.6%;
+}
 .signupline {
   font-family: "Poppins";
   color: #8e8d8d;

diff --git a/html/login.html b/html/login.html
@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/images/favicon-enhanced.png" />
     <link rel="stylesheet" href="css/login.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
     <title>Sukoon - Login</title>
   </head>
   <body onload="myfunction()">
@@ -30,11 +31,13 @@ <h1 class="titletext">Welcome Back &#x1F917</h1>
         <span>Email<br /></span>
         <input class="inputbox" placeholder="Enter your email" /><br />
         <span>Password<br /></span>
-        <input type="password" class="inputbox" placeholder="••••••••" />
+        <input type="password" class="inputbox" placeholder="••••••••"  id="id_password">
+        <i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
       </div>
       <div class="forgotpass">
         <span>Forgot Password</span>
       </div>
+      <p class="back"><a class="tag" href="/index.html">&#8592; Back</a></p>
       <div class="button">
         <input type="button" class="signin" value="Sign in" />
       </div>
@@ -54,8 +57,10 @@ <h1 class="titletext">Create an account</h1>
         <span>Email<br /></span>
         <input class="inputbox" placeholder="Enter your email" /><br />
         <span>Password<br /></span>
-        <input type="password" class="inputbox" placeholder="••••••••" />
+        <input type="password" class="inputbox" placeholder="••••••••"  id="id_password">
+        <i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
       </div>
+      <p class="back-1"><a class="tag1" href="/index.html">&#8592; Back</a></p>
       <div class="button">
         <input type="button" class="signin" value="Sign up" />
       </div>
@@ -84,6 +89,14 @@ <h1 class="titletext">Create an account</h1>
       function myfunction() {
         preloader.style.display = "none";
       }
+      const togglePassword = document.querySelector('#togglePassword');
+  const password = document.querySelector('#id_password');
+
+  togglePassword.addEventListener('click', function (e) {
+    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
+    password.setAttribute('type', type);
+    this.classList.toggle('fa-eye-slash');
+});
     </script>
   </body>
 </html>