password visibility

DianaKryzhanivska · Mar 23, 2024 · c5e1cf7 · c5e1cf7
1 parent 65a13e6
commit c5e1cf7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git a/src/components/Login/LoginForm/LoginForm.jsx b/src/components/Login/LoginForm/LoginForm.jsx
@@ -15,13 +15,18 @@ import { loginSchema } from "../../../schemas/yupSchemas";
 import { useDispatch, useSelector } from "react-redux";
 import { selectIsLoggedIn } from "../../../redux/auth/selectors";
 import { signInThunk } from "../../../redux/auth/operations";
+import { useState } from "react";
 
 const LoginForm = () => {
   const dispatch = useDispatch();
+  const [showPassword, setShowPassword] = useState(false);
   const isLoggedIn = useSelector(selectIsLoggedIn);
   if (isLoggedIn) {
     return <Navigate to="/dictionary" />;
   }
+  const handleTogglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
   const handleSubmit = (values) => {
     dispatch(signInThunk(values));
   };
@@ -54,7 +59,7 @@ const LoginForm = () => {
                 <ErrorMessage name="email" component="div" className="error" />
                 <InputWithIcon>
                   <Field
-                    type="password"
+                    type={showPassword ? "text" : "password"}
                     placeholder="Password"
                     name="password"
                     onChange={handleChange}
@@ -65,8 +70,12 @@ const LoginForm = () => {
                     component="div"
                     className="error"
                   />
-                  <svg>
-                    <use href={`${sprite}#eye-off`} />
+                  <svg onClick={handleTogglePasswordVisibility}>
+                    {showPassword ? (
+                      <use href={`${sprite}#eye`} />
+                    ) : (
+                      <use href={`${sprite}#eye-off`} />
+                    )}
                   </svg>
                 </InputWithIcon>
               </InputBox>

diff --git a/src/components/Register/RegisterForm/RegisterForm.jsx b/src/components/Register/RegisterForm/RegisterForm.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   Desc,
   Form,
@@ -19,10 +19,14 @@ import { selectIsLoggedIn } from "../../../redux/auth/selectors";
 
 const RegisterForm = () => {
   const dispatch = useDispatch();
+  const [showPassword, setShowPassword] = useState(false);
   const isLoggedIn = useSelector(selectIsLoggedIn);
   if (isLoggedIn) {
     return <Navigate to="/dictionary" />;
   }
+  const handleTogglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
   const handleSubmit = (values) => {
     dispatch(signUpThunk(values));
   };
@@ -64,7 +68,7 @@ const RegisterForm = () => {
                 <ErrorMessage name="email" component="div" className="error" />
                 <InputWithIcon>
                   <Field
-                    type="password"
+                    type={showPassword ? "text" : "password"}
                     placeholder="Password"
                     name="password"
                     onChange={handleChange}
@@ -75,8 +79,12 @@ const RegisterForm = () => {
                     component="div"
                     className="error"
                   />
-                  <svg>
-                    <use href={`${sprite}#eye-off`} />
+                  <svg onClick={handleTogglePasswordVisibility}>
+                    {showPassword ? (
+                      <use href={`${sprite}#eye`} />
+                    ) : (
+                      <use href={`${sprite}#eye-off`} />
+                    )}
                   </svg>
                 </InputWithIcon>
               </InputBox>