diff --git a/src/components/Onboarding.tsx b/src/components/Onboarding.tsx index c0e7d5d..864bc0c 100644 --- a/src/components/Onboarding.tsx +++ b/src/components/Onboarding.tsx @@ -9,9 +9,28 @@ interface OnboardingProps { session: Session; } +const checkUsernameExists = async (username: string) => { + const { data, error } = await supabase + .from('profiles') + .select('username') + .eq('username', username); + if (error) { + console.error('Error checking username:', error); + return false; + } + return data.length > 0; +}; + // Validation schema const onboardingSchema = z.object({ name: z.string().trim().min(2, 'Name must be at least 2 characters').max(50, 'Name is too long'), + username: z.string().trim().min(3, 'Username must be at least 3 characters').max(10, 'Username is too long') + .refine(async (username) => { + const exists = await checkUsernameExists(username); + return !exists; + }, { + message: 'Username already exists' + }), role: z.string().trim().min(2, 'Role must be at least 2 characters').max(50, 'Role is too long'), bio: z.string().max(500, 'Bio must be less than 500 characters').optional(), skills: z.string().max(200, 'Skills list is too long') @@ -54,6 +73,7 @@ export function Onboarding({ session }: OnboardingProps) { const [formData, setFormData] = useState({ name: '', + username: '', role: '', bio: '', skills: '', @@ -87,7 +107,7 @@ export function Onboarding({ session }: OnboardingProps) { setValidationErrors({}); try { - const validatedData = onboardingSchema.parse(formData); + const validatedData = await onboardingSchema.parseAsync(formData); console.log('Validated data:', validatedData); // First check if profile exists @@ -191,7 +211,7 @@ export function Onboarding({ session }: OnboardingProps) {

Required Information

- + {/* Name Field */}
+ {/* Username Field */} +
+ + + {validationErrors.username && ( +

{validationErrors.username}

+ )} +
+ {/* Role Field */}