diff --git a/src/components/auth/signup.tsx b/src/components/auth/signup.tsx index 5319d393..4b4bc7b9 100644 --- a/src/components/auth/signup.tsx +++ b/src/components/auth/signup.tsx @@ -1,16 +1,7 @@ 'use client'; +import React from 'react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; -import APP_PATHS from '@/config/path.config'; -import { - SignupSchema, - SignupSchemaType, -} from '@/lib/validators/auth.validator'; -import { zodResolver } from '@hookform/resolvers/zod'; - -import Link from 'next/link'; -import { useRouter } from 'next/navigation'; -import { useForm } from 'react-hook-form'; import { Form, FormControl, @@ -18,18 +9,46 @@ import { FormItem, FormLabel, FormMessage, -} from '../ui/form'; +} from '@/components/ui/form'; +import { Check, X } from 'lucide-react'; +import Link from 'next/link'; +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { + SignupSchemaType, + SignupSchema, +} from '@/lib/validators/auth.validator'; +import { PasswordInput } from '../password-input'; +import { DemarcationLine, GoogleOauthButton } from './social-auth'; import { useToast } from '../ui/use-toast'; +import APP_PATHS from '@/config/path.config'; +import { useRouter } from 'next/navigation'; import { signUp } from '@/actions/auth.actions'; -import { DemarcationLine, GoogleOauthButton } from './social-auth'; -import { PasswordInput } from '../password-input'; + +interface InputProps { + fulfilled: boolean; + text: string; +} + +const PasswordRequirement = ({ fulfilled, text }: InputProps) => ( +
+ {fulfilled ? ( + + ) : ( + + )} + + {text} + +
+); export const Signup = () => { const { toast } = useToast(); const router = useRouter(); - const form = useForm({ resolver: zodResolver(SignupSchema), + mode: 'onChange', defaultValues: { name: '', email: '', @@ -37,7 +56,28 @@ export const Signup = () => { }, }); - async function signupHandler(data: SignupSchemaType) { + const watchPassword = form.watch('password'); + + const passwordRequirements = [ + { + fulfilled: /[a-z]/.test(watchPassword), + text: 'Contains lowercase letter', + }, + { + fulfilled: /[A-Z]/.test(watchPassword), + text: 'Contains uppercase letter', + }, + { + fulfilled: /[0-9]/.test(watchPassword), + text: 'Contains number', + }, + { + fulfilled: /[!@#$%^&*(),.?":{}|<>]/.test(watchPassword), + text: 'Contains special character', + }, + ]; + + const handleSubmit = async (data: SignupSchemaType) => { try { const response = await signUp(data); if (!response.status) { @@ -47,27 +87,23 @@ export const Signup = () => { }); } else { toast({ - title: response.message || 'Signup successful! Welcome to 100xJobs!', + title: response.message || 'Signup successful! Welcome!', variant: 'success', }); - router.push(APP_PATHS.WELCOME); } } catch { toast({ - title: 'something went wrong', + title: 'Something went wrong', variant: 'destructive', }); } - } + }; return ( - <> +
- + { )} /> + { Email address - + )} /> + { Password - + - +
+
+ {passwordRequirements.map((req, idx) => ( + + ))} +
+
+ + Forgot your password? + +
+
)} /> -
- - Forgot your password? - -
+ + -
- - Already have an account?{' '} - - Sign In - - + +
+ Already have an account?{' '} + + Sign in +
- +
); }; + +export default Signup; diff --git a/src/lib/validators/auth.validator.ts b/src/lib/validators/auth.validator.ts index a88e89bb..932db47c 100644 --- a/src/lib/validators/auth.validator.ts +++ b/src/lib/validators/auth.validator.ts @@ -10,7 +10,16 @@ export type SigninSchemaType = z.infer; export const SignupSchema = z.object({ name: z.string().min(1, 'Name is required'), email: z.string().email('Email is invalid').min(1, 'Email is required'), - password: z.string().min(1, 'Password is required'), + password: z + .string() + .min(1, 'Password is required') + .regex(/[a-z]/, 'Password must contain one lowercase letter') + .regex(/[A-Z]/, 'Password must contain one uppercase letter') + .regex(/[0-9]/, 'Password must contain atleast one number') + .regex( + /[!@#$%^&*(),.?":{}|<>]/, + 'Password must contain at least one special character' + ), }); export type SignupSchemaType = z.infer;