Merge pull request #190 from Sourabh782/toggle

Added password toggle feature
ajaynegi45 · Oct 23, 2024 · ac5a3ba · ac5a3ba
2 parents 2c911c3 + 02fdff2
commit ac5a3ba
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 23 deletions.
diff --git a/public/eye-hide.png b/public/eye-hide.png
diff --git a/public/eye.png b/public/eye.png
diff --git a/src/app/auth/page.module.css b/src/app/auth/page.module.css
@@ -71,3 +71,22 @@
   cursor: pointer;
   color: var(--slate-black);
 }
+
+.passwordContainer{
+  position: relative;
+
+}
+
+.passwordToggle{
+  position: absolute;
+  height: 100%;
+  display: flex;
+  top: 0;
+  align-items: center;
+  right: 1rem
+}
+
+.image{
+  height: 25px;
+  width: 25px;
+}
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
@@ -7,10 +7,15 @@ import { toast } from "sonner";
 import { loginSchema, signupSchema } from "@/lib/zod";
 import { signIn } from "next-auth/react";
 import { useRouter, useSearchParams } from "next/navigation";
+import eye from "../../../public/eye.png"
+import hide from "../../../public/eye-hide.png"
+import Image from 'next/image';
 
 export default function Auth() {
   const [isSignup, setIsSignup] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [hidden, setHidden] = useState(true);
+  const [confirmHidden, setConfirmHidden] = useState(true);
   const router = useRouter();
   const searchParams = useSearchParams();
   const callback = searchParams.get("callbackUrl");
@@ -161,27 +166,46 @@ export default function Auth() {
                 {errors.email.message?.toString()}
               </p>
             )}
-
-            <input
-              type="password"
-              placeholder="Password"
-              disabled={isLoading}
-              {...register("password")}
-              className={styles.input}
-            />
+            <div className={styles.passwordContainer} >
+              <input
+                type={hidden ? "password" : "text"}
+                placeholder="Password"
+                disabled={isLoading}
+                {...register("password")}
+                className={styles.input}
+              />
+              <button className={styles.passwordToggle} onClick={(e)=>{
+                  e.preventDefault()
+                  setHidden(!hidden)
+                }}>
+                {
+                  hidden ? <Image className={styles.image} src={hide} alt="My Image" /> : <Image className={styles.image} src={eye} alt="My Image" />
+                }
+              </button>
+            </div>
             {errors.password && (
               <p className={styles.errors}>
                 {errors.password.message?.toString()}
               </p>
             )}
 
-            <input
-              type="password"
-              placeholder="Confirm Password"
-              {...register("confirmPassword")}
-              className={styles.input}
-              disabled={isLoading}
-            />
+            <div className={styles.passwordContainer} >
+              <input
+                type={confirmHidden ? "password" : "text"}
+                placeholder="Confirm Password"
+                {...register("confirmPassword")}
+                className={styles.input}
+                disabled={isLoading}
+              />
+              <button className={styles.passwordToggle} onClick={(e)=>{
+                  e.preventDefault()
+                  setConfirmHidden(!confirmHidden)
+                }}>
+                {
+                  confirmHidden ? <Image className={styles.image} src={hide} alt="My Image" /> : <Image className={styles.image} src={eye} alt="My Image" />
+                }
+              </button>
+            </div>
             {errors.confirmPassword && (
               <p className={styles.errors}>
                 {errors.confirmPassword.message?.toString()}
@@ -214,14 +238,23 @@ export default function Auth() {
                 {errors.loginIdentifier.message?.toString()}
               </p>
             )}
-
-            <input
-              type="password"
-              placeholder="Password"
-              {...register("password")}
-              className={styles.input}
-              disabled={isLoading}
-            />
+            <div className={styles.passwordContainer} >
+              <input
+                type={hidden? "password" : "text"}
+                placeholder="Password"
+                {...register("password")}
+                className={styles.input}
+                disabled={isLoading}
+              />
+              <button className={styles.passwordToggle} onClick={(e)=>{
+                  e.preventDefault()
+                  setHidden(!hidden)
+                }}>
+                {
+                  hidden ? <Image className={styles.image} src={hide} alt="My Image" /> : <Image className={styles.image} src={eye} alt="My Image" />
+                }
+              </button>
+            </div>
             {errors.password && (
               <p className={styles.errors}>
                 {errors.password.message?.toString()}
@@ -238,6 +271,7 @@ export default function Auth() {
           if (!isLoading) {
             setIsSignup(!isSignup);
           }
+          setHidden(true)
         }}
         className={styles.toggle}
       >