From f7670585391ee344e8134d190d17196aee97a250 Mon Sep 17 00:00:00 2001
From: Sameer Ahmed <sameernadeemi1111@gmail.com>
Date: Sun, 2 Feb 2025 20:01:30 +0530
Subject: [PATCH] Add username input functionality
---
src/components/Onboarding.tsx | 45 +++++++++++++++++++++++++++++++++--
src/types.ts | 1 +
2 files changed, 44 insertions(+), 2 deletions(-)
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) {
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
Required Information
</h2>
-
+
{/* Name Field */}
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
@@ -213,6 +233,27 @@ export function Onboarding({ session }: OnboardingProps) {
)}
</div>
+ {/* Username Field */}
+ <div>
+ <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+ Username <span className="text-red-500">*</span>
+ </label>
+ <input
+ type="text"
+ name="username"
+ value={formData.username}
+ onChange={handleInputChange}
+ className="w-full px-4 py-2 text-gray-900 dark:text-gray-100
+ bg-white dark:bg-dark-700 border border-gray-300 dark:border-gray-600
+ rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500
+ dark:focus:ring-blue-400 transition-colors duration-200"
+ required
+ />
+ {validationErrors.username && (
+ <p className="mt-1 text-sm text-red-600 dark:text-red-400">{validationErrors.username}</p>
+ )}
+ </div>
+
{/* Role Field */}
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
diff --git a/src/types.ts b/src/types.ts
index a9977ff..7ffa95e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,6 @@
export interface Profile {
user_id: string;
+ username:string;
name: string;
bio: string | null;
skills: string | null;