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 (
- <>
+
-
-
- 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;