Added password toggling feature

AbhiDiva96 · Jun 2, 2024 · 27f4e59 · 27f4e59
1 parent 5ae1f20
commit 27f4e59
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/src/components/login/LoginSignup.css b/src/components/login/LoginSignup.css
@@ -4,6 +4,13 @@
     background: #fce3fe;
     padding-top: 100px;
 }
+.eye{
+    position: absolute;
+    right: 10px;
+    top: 30%;
+    cursor: pointer;
+    font-size: 2rem;
+}
 .loginsignup-cointainer{
     width: 580px;
     height: 700px;

diff --git a/src/components/login/LoginSignup.jsx b/src/components/login/LoginSignup.jsx
@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 import "./LoginSignup.css";
-
+import {FaEye,FaEyeSlash} from 'react-icons/fa6'
 const LoginSignup = () => {
 
 
   const [state, setState] = useState("Sign Up");
+  const [isVisible,setIsVisible]=useState(false)
+
   const [formData, setFormData] = useState({
     username: "",
     password: "",
@@ -67,7 +69,12 @@ const LoginSignup = () => {
             <></>
           )}
           <input type="email" name="email" value={formData.email} onChange={ChangeHandler} placeholder="Email Address" />
-          <input type="password" name="password" value={formData.password} onChange={ChangeHandler} placeholder="Password" />
+          <div style={{position:"relative"}}>
+
+          <input type={`${isVisible?"text":"password"}`} name="password" value={formData.password} onChange={ChangeHandler} placeholder="Password" />
+          {isVisible?<FaEye className="eye" onClick={()=>setIsVisible(false)} />:<FaEyeSlash className="eye" onClick={()=>setIsVisible(true)}/>}
+          </div>
+
         </div>
         <button
           onClick={() => {