fix-#257: Hide and visible in password to improve UI

frontend/package.json

@@ -21,14 +21,14 @@
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
     "@tsparticles/react": "^3.0.0",
-    "axios": "^1.6.1",
+    "axios": "^1.6.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-react": "^0.292.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.51.2",
-    "react-router-dom": "^6.18.0",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.51.4",
+    "react-router-dom": "^6.23.1",
     "react-tag-input": "^6.8.1",
     "react-toastify": "^9.1.3",
     "tailwind-merge": "^2.0.0",
@@ -48,6 +48,7 @@
     "@types/node": "^20.9.0",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
     "@vitejs/plugin-react-swc": "^3.4.1",

frontend/src/assets/svg/passwordhide.tsx

@@ -0,0 +1,16 @@
+const passwordhide = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6 text-black"
+        viewBox="0 0 24 24"
+        fill="black"
+      >
+        <path d="M9.34268 18.7819L7.41083 18.2642L8.1983 15.3254C7.00919 14.8874 5.91661 14.2498 4.96116 13.4534L2.80783 15.6067L1.39362 14.1925L3.54695 12.0392C2.35581 10.6103 1.52014 8.87466 1.17578 6.96818L3.14386 6.61035C3.90289 10.8126 7.57931 14.0001 12.0002 14.0001C16.4211 14.0001 20.0976 10.8126 20.8566 6.61035L22.8247 6.96818C22.4803 8.87466 21.6446 10.6103 20.4535 12.0392L22.6068 14.1925L21.1926 15.6067L19.0393 13.4534C18.0838 14.2498 16.9912 14.8874 15.8021 15.3254L16.5896 18.2642L14.6578 18.7819L13.87 15.8418C13.2623 15.9459 12.6376 16.0001 12.0002 16.0001C11.3629 16.0001 10.7381 15.9459 10.1305 15.8418L9.34268 18.7819Z"></path>
+      </svg>
+    </>
+  );
+};
+
+export default passwordhide;

frontend/src/assets/svg/passwordvisible.tsx

@@ -0,0 +1,23 @@
+const passwordvisible = () => {
+  return (
+    <div>
+      {' '}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-6 w-6 text-black"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="black"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default passwordvisible;

frontend/src/lib/types.ts

@@ -4,7 +4,7 @@ const passwordRegex = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).
 
 export const signInSchema = z.object({
   userNameOrEmail: z.string().min(1, { message: 'username or email is required' }),
-  password: z.string().min(1, 'Password must be at least 1 character'),
+  password: z.string().min(8, 'Password must be at least 8 character'),
 });
 
 export const signUpSchema = z

frontend/src/pages/signin-page.tsx

@@ -10,32 +10,39 @@ import { toast } from 'react-toastify';
 import { AxiosError, isAxiosError } from 'axios';
 import axiosInstance from '@/helpers/axios-instance';
 import userState from '@/utils/user-state';
+import { useState } from 'react';
+import Passwordhide from '../assets/svg/passwordhide.tsx';
+import Passwordvisible from '../assets/svg/passwordvisible.tsx';
 
 function signin() {
   const navigate = useNavigate();
   const {
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
-    reset
+    reset,
   } = useForm<TSignInSchema>({ resolver: zodResolver(signInSchema) });
 
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
   const onSubmit = async (data: FieldValues) => {
     try {
-      const response = axiosInstance.post('/api/auth/email-password/signin',
-        data
-      );
+      const response = axiosInstance.post('/api/auth/email-password/signin', data);
 
       toast.promise(response, {
         pending: 'Checking credentials ...',
         success: {
           render({ data }) {
             const userId = data?.data?.data?.user?._id;
             const userRole = data?.data?.data?.user?.role;
-            userState.setUser({ _id: userId, role: userRole })
-            reset()
-            navigate('/')
-            return data?.data?.message
+            userState.setUser({ _id: userId, role: userRole });
+            reset();
+            navigate('/');
+            return data?.data?.message;
           },
         },
         error: {
@@ -45,13 +52,12 @@ function signin() {
                 return data?.response?.data?.message;
               }
             }
-            return "Signin failed"
+            return 'Signin failed';
           },
         },
-      }
-      )
+      });
 
-      return (await response).data
+      return (await response).data;
     } catch (error) {
       if (isAxiosError(error)) {
         console.error(error.response?.data?.message);
@@ -84,15 +90,22 @@ function signin() {
             )}
           </div>
 
-          <div className="mb-4">
+          <div className="relative mb-4">
             <input
               {...register('password')}
-              type="password"
+              type={showPassword ? 'text' : 'password'}
               placeholder="Password"
               className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
             />
+            <button
+              type="button"
+              className="absolute right-3 top-1/2 -translate-y-1/2 transform focus:outline-none"
+              onClick={togglePasswordVisibility}
+            >
+              {showPassword ? <Passwordvisible /> : <Passwordhide />}
+            </button>
             {errors.password && (
-              <p className="p-3 text-xs text-red-500">{`${errors.password.message}`}</p>
+              <p className="p-3 text-xs text-red-500">{errors.password.message}</p>
             )}
           </div>
 

frontend/src/pages/signup-page.tsx

@@ -10,29 +10,38 @@ import { toast } from 'react-toastify';
 import { AxiosError, isAxiosError } from 'axios';
 import axiosInstance from '@/helpers/axios-instance';
 import userState from '@/utils/user-state';
+import { useState } from 'react';
+import Passwordvisible from '../assets/svg/passwordvisible.tsx';
+import Passwordhide from '../assets/svg/passwordhide.tsx';
 
 function signup() {
   const navigate = useNavigate();
   const {
     register,
     handleSubmit,
     formState: { errors, isSubmitting },
-    reset
+    reset,
   } = useForm<TSignUpSchema>({ resolver: zodResolver(signUpSchema) });
 
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
   const onSubmit = async (data: FieldValues) => {
     try {
-      const res = axiosInstance.post('/api/auth/email-password/signup', data)
+      const res = axiosInstance.post('/api/auth/email-password/signup', data);
       toast.promise(res, {
         pending: 'Creating account ...',
         success: {
           render({ data }) {
             const userId = data?.data?.data?.user?._id;
             const userRole = data?.data?.data?.user?.role;
-            userState.setUser({ _id: userId, role: userRole })
-            reset()
-            navigate('/')
-            return data?.data?.message
+            userState.setUser({ _id: userId, role: userRole });
+            reset();
+            navigate('/');
+            return data?.data?.message;
           },
         },
         error: {
@@ -42,13 +51,11 @@ function signup() {
                 return data?.response?.data?.message;
               }
             }
-            return "Signup failed"
+            return 'Signup failed';
           },
         },
-      }
-      )
-      return (await res).data
-
+      });
+      return (await res).data;
     } catch (error) {
       if (isAxiosError(error)) {
         console.error(error.response?.data?.message);
@@ -58,7 +65,6 @@ function signup() {
     }
   };
 
-
   return (
     <div className="m-4 flex-grow cursor-default bg-white py-4">
       <div className="mb-4 flex justify-center">
@@ -103,17 +109,25 @@ function signup() {
               <p className="p-3 text-xs text-red-500">{`${errors.email.message}`}</p>
             )}
           </div>
-          <div className="mb-3">
+          <div className="relative mb-3">
             <input
               {...register('password')}
-              type="password"
+              type={showPassword ? 'text' : 'password'}
               placeholder="Password"
               className="w-full rounded-lg bg-zinc-100 p-3 font-normal placeholder:text-sm placeholder:text-neutral-500"
             />
+            <button
+              type="button"
+              className="absolute right-3 top-1/2 -translate-y-1/2 transform focus:outline-none"
+              onClick={togglePasswordVisibility}
+            >
+              {showPassword ? <Passwordvisible /> : <Passwordhide />}
+            </button>
             {errors.password && (
-              <p className="p-3 text-xs text-red-500">{`${errors.password.message}`}</p>
+              <p className="p-3 text-xs text-red-500">{errors.password.message}</p>
             )}
           </div>
+
           <div className="mb-4">
             <input
               {...register('confirmPassword')}
@@ -164,5 +178,4 @@ function signup() {
     </div>
   );
 }
-
 export default signup;