Merge pull request #617 from harinisayani/loginhidebranch

hide functionality added in login page
khushi-joshi-05 · May 28, 2024 · 2f582ba · 2f582ba
2 parents d08e835 + d70afd7
commit 2f582ba
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/Css-files/login1.css b/Css-files/login1.css
@@ -71,8 +71,13 @@ body * {
   align-items: flex-start;
   justify-content: center;
   margin: 10px 0px;
+  position:relative;
+}
+.icon{
+  position:absolute;
+  top:calc(55%);
+  left:84.9%;
 }
-
 .textfield > input {
   width: 100%;
   border: none;

diff --git a/Html-files/login.html b/Html-files/login.html
@@ -6,6 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="scriptlogin.js" defer type="module"></script>
   <link rel="stylesheet" href="../Css-files/login1.css">
+  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <title>Login</title>
 </head>
 <body>
@@ -24,12 +26,31 @@ <h1>LOGIN</h1>
         </div>
         <div class="textfield">
           <label for="password">Password</label>
-          <input type="password" name="password" placeholder="Enter Password">
+          <input type="password" id="password" name="password" placeholder="Enter Password">
+          <span id="login-hide">
+            <i class='icon bx bxs-hide' style="font-size: 27px;"></i>
+          </span>
         </div>
         <button class="btn-login">Login</button>
         <button id="google-login">Login with google</button>
       </div>
     </div>
   </div>
 </body>
+<script>
+  const passwordinput=document.getElementById("password");
+  const hidelogo=document.getElementById("login-hide");
+  hidelogo.addEventListener("click",function(){
+    const passwordfield=this.querySelector("i");
+    if(passwordinput.getAttribute("type")=="text"){
+      passwordinput.setAttribute("type","password");
+      passwordfield.classList.replace("bxs-show","bxs-hide");
+    }
+    else{
+      passwordinput.setAttribute("type","text");
+      passwordfield.classList.replace("bxs-hide","bxs-show");
+
+    }
+  })
+</script>
 </html>