Merge branch 'refs/heads/frontend'

Md-Rubel-Ahmed-Rana · Jul 4, 2024 · 2027ceb · 2027ceb
2 parents 41ca0bd + aa7f6d0
commit 2027ceb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/frontend/src/components/pages/Signup/Signup.tsx b/frontend/src/components/pages/Signup/Signup.tsx
@@ -1,6 +1,7 @@
 import { SubmitHandler, useForm } from "react-hook-form";
 import Swal from "sweetalert2";
 import { useState } from "react";
+import { IoMdEye, IoMdEyeOff } from "react-icons/io";
 import { useRouter } from "next/router";
 import { IUser } from "@/interfaces/user.interface";
 import { useCreateUserMutation } from "@/features/user";
@@ -16,6 +17,7 @@ const Signup = () => {
   const router = useRouter();
   const [createUser] = useCreateUserMutation();
   const [profilePicture, setProfilePicture] = useState("");
+  const [togglePassword, setTogglePassword] = useState(false);
 
   const handleRegister: SubmitHandler<IUser> = async (data) => {
     data.profile_picture = profilePicture;
@@ -149,11 +151,11 @@ const Signup = () => {
                 placeholder="Email address"
               />
             </div>
-            <div className="-mt-px">
+            <div className="-mt-px relative">
               <label htmlFor="password">Password</label>
               <input
                 aria-label="Password"
-                type="password"
+                type={togglePassword ? "text" : "password"}
                 {...register("password", {
                   required: "Password is required",
                   minLength: {
@@ -171,6 +173,13 @@ const Signup = () => {
                   {errors.password.message}
                 </p>
               )}
+              <button
+                type="button"
+                className="absolute top-9 right-2 z-50"
+                onClick={() => setTogglePassword((prev) => !prev)}
+              >
+                {togglePassword ? <IoMdEye /> : <IoMdEyeOff />}
+              </button>
             </div>
           </div>
           <div className="mt-6">

diff --git a/frontend/src/components/pages/login/Login.tsx b/frontend/src/components/pages/login/Login.tsx
@@ -5,6 +5,8 @@ import Cookies from "js-cookie";
 import { useLoginUserMutation } from "@/features/user";
 import Link from "next/link";
 import GoogleLogin from "@/components/shared/GoogleLogin";
+import { IoMdEye, IoMdEyeOff } from "react-icons/io";
+import { useState } from "react";
 
 type FormData = {
   email: string;
@@ -17,13 +19,14 @@ const Login = () => {
     handleSubmit,
     formState: { errors },
   } = useForm<FormData>({ mode: "onChange" });
+  const [togglePassword, setTogglePassword] = useState(false);
 
   const [loginUser] = useLoginUserMutation();
 
   const onSubmit: SubmitHandler<FormData> = async (data) => {
     const result: any = await loginUser(data);
-    Cookies.set("tmAccessToken", result?.data?.data, { expires: 6 });
     if (result?.data?.success) {
+      Cookies.set("tmAccessToken", result?.data?.data, { expires: 6 });
       Swal.fire({
         position: "center",
         icon: "success",
@@ -88,11 +91,11 @@ const Login = () => {
                 </p>
               )}
             </div>
-            <div className="-mt-px">
+            <div className="-mt-px relative">
               <label htmlFor="password">Password</label>
               <input
                 aria-label="Password"
-                type="password"
+                type={togglePassword ? "text" : "password"}
                 {...register("password", {
                   required: "Password is required",
                 })}
@@ -106,6 +109,13 @@ const Login = () => {
                   {errors.password.message}
                 </p>
               )}
+              <button
+                type="button"
+                className="absolute top-9 right-2 z-50"
+                onClick={() => setTogglePassword((prev) => !prev)}
+              >
+                {togglePassword ? <IoMdEye /> : <IoMdEyeOff />}
+              </button>
             </div>
           </div>
           <div className="text-center my-4">