feat: password toggle eye fixed

Ayushpanditmoto · Jan 7, 2023 · b831c77 · b831c77
1 parent 23ed599
commit b831c77
Showing 1 changed file with 10 additions and 16 deletions.
diff --git a/src/Pages/Login/Login.js b/src/Pages/Login/Login.js
@@ -72,22 +72,12 @@ function Login() {
 
   const [login, setLogin] = useState(loginInfos);
   const { email, password } = login;
-  const [toggleEye, setToggleEye] = useState(<AiOutlineEye />);
   const [isPasswordVisible, setIspasswordVisible] = useState(false);
-  const inputRef = useRef(null);
 
   const showPassword = () => {
-    const passwordInput = inputRef.current.firstElementChild.firstElementChild;
-
-    if (!isPasswordVisible) {
-      setIspasswordVisible(true);
-      passwordInput.setAttribute("type", "password");
-      setToggleEye(<AiOutlineEyeInvisible />);
-    } else {
-      setIspasswordVisible(false);
-      passwordInput.setAttribute("type", "text");
-      setToggleEye(<AiOutlineEye />);
-    }
+    isPasswordVisible
+      ? setIspasswordVisible(false)
+      : setIspasswordVisible(true);
   };
 
   const handleLoginChange = (e) => {
@@ -128,16 +118,20 @@ function Login() {
                   type="email"
                   onChange={handleLoginChange}
                 />
-                <div className="password-wrapper" ref={inputRef}>
+                <div className="password-wrapper">
                   <LoginInput
-                    type="password"
+                    type={isPasswordVisible ? "text" : "password"}
                     name="password"
                     placeholder="Password"
                     onChange={handleLoginChange}
                   />
                 </div>
                 <span className="eyeslash-icon" onClick={showPassword}>
-                  {toggleEye}
+                  {isPasswordVisible ? (
+                    <AiOutlineEye />
+                  ) : (
+                    <AiOutlineEyeInvisible />
+                  )}
                 </span>
 
                 <button type="submit" onSubmit={formik.handleSubmit}>