Added hide/unhide button for password

README.md

@@ -116,6 +116,8 @@ Below is a list of all the amazing contributors who have helped make this projec
 <p align="center"> <a href="https://github.com/yashksaini-coder/Leetcode-Journal/graphs/contributors"> <img src="https://contrib.rocks/image?repo=yashksaini-coder/Leetcode-Journal" /> </a> </p>
 
 ##
+<<<<<<< HEAD
+=======
 
 # Project Contributers: 
 ### Thank you everyone for your contributions! 🙏 We hope to see you contribute even more in the future. 🚀👨‍💻👩‍💻
@@ -129,6 +131,7 @@ Below is a list of all the amazing contributors who have helped make this projec
 
 
 ---
+>>>>>>> e9d5817b131855e47dd0b52d0c40e8546a339662
 
 *Connect with me on GitHub: [yashksaini-coder](https://github.com/yashksaini-coder)*
 

components/AuthComponent/SigninForm.tsx

@@ -1,50 +1,53 @@
-"use client"
+"use client";
 
-import React from "react"
-import { useRouter } from "next/navigation"
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import * as z from "zod"
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Eye, EyeOff } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
-import { Alert, AlertDescription } from "@/components/ui/alert"
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
-import { useAuthStore } from "@/store/AuthStore/useAuthStore"
-import LoadingButton from "../Buttons/LoadingButton"
-import AuthBottom from "./AuthBottom"
-import { signinSchema } from "@/validations/validation"
+} from "@/components/ui/card";
+import { useAuthStore } from "@/store/AuthStore/useAuthStore";
+import LoadingButton from "../Buttons/LoadingButton";
+import AuthBottom from "./AuthBottom";
+import { signinSchema } from "@/validations/validation";
 
-type SigninFormValues = z.infer<typeof signinSchema>
+type SigninFormValues = z.infer<typeof signinSchema>;
 
 export default function SigninForm() {
-  const { isSigningIn, signin, signinError } = useAuthStore()
-  const router = useRouter()
+  const { isSigningIn, signin, signinError } = useAuthStore();
+  const router = useRouter();
+  const [showPassword, setShowPassword] = useState(false);
 
   const form = useForm<SigninFormValues>({
     resolver: zodResolver(signinSchema),
     defaultValues: {
       email: "",
       password: "",
     },
-  })
+  });
 
   const onSubmit = (data: SigninFormValues) => {
-    signin(data, router)
-  }
+    signin(data, router);
+  };
 
   return (
     <main className="flex min-h-screen items-center justify-center px-4">
@@ -78,7 +81,26 @@ export default function SigninForm() {
                   <FormItem>
                     <FormLabel>Password</FormLabel>
                     <FormControl>
-                      <Input type="password" placeholder="••••••••" {...field} />
+                      <div className="relative">
+                        <Input
+                          type={showPassword ? "text" : "password"}
+                          placeholder="••••••••"
+                          {...field}
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                          onClick={() => setShowPassword(!showPassword)}
+                        >
+                          {showPassword ? (
+                            <EyeOff className="h-4 w-4" />
+                          ) : (
+                            <Eye className="h-4 w-4" />
+                          )}
+                        </Button>
+                      </div>
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -107,5 +129,5 @@ export default function SigninForm() {
         </CardFooter>
       </Card>
     </main>
-  )
-}
+  );
+}

components/AuthComponent/SignupForm.tsx

@@ -1,10 +1,12 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
+import { Eye, EyeOff } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
@@ -39,6 +41,7 @@ type SignupFormValues = z.infer<typeof signupSchema>;
 export default function SignupForm() {
   const { isSigningUp, signup, signupError } = useAuthStore();
   const router = useRouter();
+  const [showPassword, setShowPassword] = useState(false);
 
   const form = useForm<SignupFormValues>({
     resolver: zodResolver(signupSchema),
@@ -47,7 +50,7 @@ export default function SignupForm() {
       email: "",
       password: "",
       leetcodeUsername: "",
-      gender: "",
+      gender: undefined, // Changed from "" to undefined
     },
   });
 
@@ -102,7 +105,26 @@ export default function SignupForm() {
                   <FormItem>
                     <FormLabel>Password</FormLabel>
                     <FormControl>
-                      <Input type="password" placeholder="••••••" {...field} />
+                      <div className="relative">
+                        <Input
+                          type={showPassword ? "text" : "password"}
+                          placeholder="••••••"
+                          {...field}
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="sm"
+                          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                          onClick={() => setShowPassword(!showPassword)}
+                        >
+                          {showPassword ? (
+                            <EyeOff className="h-4 w-4" />
+                          ) : (
+                            <Eye className="h-4 w-4" />
+                          )}
+                        </Button>
+                      </div>
                     </FormControl>
                     <FormMessage />
                   </FormItem>

validations/validation.ts

@@ -1,33 +1,19 @@
-import z from 'zod';
+import * as z from "zod";
 
 export const signupSchema = z.object({
-    email: z
-        .string()
-        .email({ message: "Please provide a valid email address." }),
-    password: z
-        .string()
-        .min(6, { message: "Password must be at least 6 characters." })
-        .max(20, { message: "Your password cannot exceed 20 characters" })
-        .regex(
-            /^(?=.*[a-z])(?=.*[A-Z])(?=.*[@$!%*?&#^])[A-Za-z@$!%*?&#^]{6,}$/,
-            {
-                message: "Password must include at least one uppercase letter, one lowercase letter, and one special character",
-            }
-        ),
-    fullName: z
-        .string()
-        .nonempty({ message: "Full name is required." }),
-    leetcodeUsername: z
-        .string()
-        .nonempty({ message: "Leetcode username is required to connect your profile" }),
-    gender: z
-        .string()
-        .nonempty({ message: "Please select your gender " }),
+  fullName: z.string().min(2, "Full name must be at least 2 characters"),
+  email: z.string().email("Invalid email address"),
+  password: z
+    .string()
+    .min(6, "Password must be at least 6 characters")
+    .max(100, "Password must be less than 100 characters"),
+  leetcodeUsername: z.string().min(1, "LeetCode username is required"),
+  gender: z.enum(["male", "female", "other"], {
+    required_error: "Please select a gender",
+  }),
 });
 
 export const signinSchema = z.object({
-    email: z.string().email({ message: "Please provide a valid email address." }),
-    password: z.string().nonempty({ message: "Password is required." }),
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(1, "Password is required"),
 });
-
-