updated signup form, validations, supabase connections, auths, etc.

Author: krism-1

apps/codebility/app/auth/actions.ts

@@ -47,6 +47,34 @@ const uploadProfileImage = async (
   }
 };
 
+const validateUsername = (username: string): { valid: boolean; error?: string } => {
+    // Must be 8-30 characters
+    if (username.length < 8) {
+        return { valid: false, error: "Username must be at least 8 characters" };
+    }
+    if (username.length > 30) {
+        return { valid: false, error: "Username must be 30 characters or less" };
+    }
+
+    // Only letters, numbers, periods, and underscores
+    const validPattern = /^[a-zA-Z0-9._]+$/;
+    if (!validPattern.test(username)) {
+        return { valid: false, error: "Username can only contain letters, numbers, periods, and underscores" };
+    }
+
+    // Cannot start or end with a period
+    if (username.startsWith('.') || username.endsWith('.')) {
+        return { valid: false, error: "Username cannot start or end with a period" };
+    }
+
+    // Cannot have consecutive periods
+    if (username.includes('..')) {
+        return { valid: false, error: "Username cannot have consecutive periods" };
+    }
+
+    return { valid: true };
+};
+
 export const signupUser = async (formData: FormData) => {
   try {
     const supabase = await createClientServerComponent();
@@ -56,6 +84,7 @@ export const signupUser = async (formData: FormData) => {
     const rawEmail = formData.get("email_address") as string;
     const email_address = rawEmail.toLowerCase();
     const password = formData.get("password") as string;
+    const username = formData.get("username") as string;
     const tech_stacks = JSON.parse(formData.get("tech_stacks") as string) || [];
     const positions: { id: number; name: string }[] =
       (JSON.parse(formData.get("positions") as string) as {
@@ -85,6 +114,24 @@ export const signupUser = async (formData: FormData) => {
       return { success: false, error: "Email already exists" };
     }
 
+    if (username) {
+      // Validate username format
+      const usernameValidation = validateUsername(username);
+      if (!usernameValidation.valid) {
+        return { success: false, error: usernameValidation.error };
+      }
+
+      // Check if username is already taken (case-insensitive)
+      const { data: existingUsername } = await supabase
+        .from("codev")
+        .select("username")
+        .ilike("username", username)
+        .single();
+
+      if (existingUsername) {
+        return { success: false, error: "Username is already taken" };
+      }
+    }
     // Handle profile image upload if provided
     const image_url = profileImage && profileImage.size > 0
       ? await uploadProfileImage(profileImage, "profileImage", "codebility")
@@ -178,6 +225,8 @@ export const signupUser = async (formData: FormData) => {
       first_name: firstName,
       last_name: lastName,
       email_address,
+      username: username || null, // ADDED: Store username if provided, otherwise null
+      username_updated_at: username ? new Date().toISOString() : null, // ADDED: Track when username was set
       phone_number: formData.get("phone_number") as string,
       address: null,
       about: (formData.get("about") as string) || null,

apps/codebility/app/auth/sign-up/_components/SignUpForm.tsx

@@ -35,6 +35,7 @@ const SignUpForm = () => {
     defaultValues: {
       first_name: "",
       last_name: "",
+      username: "",
       email_address: "",
       phone_number: "",
       years_of_experience: 0,

apps/codebility/app/auth/sign-up/_components/form-steps.ts

@@ -33,6 +33,12 @@ export const FORM_STEPS: FormField[][] = [
       label: "Last Name",
       placeholder: "Enter your last name",
       type: "text",
+    },
+     {
+      id: "username",
+      label: "Username",
+      placeholder: "Enter your username",
+      type: "text",
     },
     {
       id: "positions",

apps/codebility/app/auth/sign-up/page.tsx

@@ -51,6 +51,7 @@ const SignupFormSchema = z.object({
   facebook: z.string().optional(),
   linkedin: z.string().optional(),
   github: z.string().optional(),
+  username: z.string().min(8, "Username must be at least 8 characters").optional(),
   discord: z.string().optional(),
   privacyPolicy: z.boolean().refine(val => val === true, "You must agree to the Privacy Policy"),
   ndaAgreement: z.boolean().refine(val => val === true, "You must agree to the Non-Disclosure Agreement"),
@@ -135,6 +136,7 @@ export default function SignUpForm() {
     defaultValues: {
       first_name: "",
       last_name: "",
+      username: "",
       email_address: "",
       phone_number: "",
       password: "",
@@ -451,6 +453,14 @@ export default function SignUpForm() {
 
               {/* Column 2 - Professional Info */}
               <div className="space-y-4">
+                <FormField
+                  label="Username"
+                  name="username"
+                  placeholder="Enter your username"
+                  register={form.register}
+                  errors={form.formState.errors}
+                  required
+                />
                 {/* Positions Dropdown */}
                 <div className="space-y-1">
                   <Label className="text-white text-base font-medium">Positions <span className="text-red-400">*</span></Label>

apps/codebility/lib/validations/auth.ts

@@ -11,6 +11,7 @@ export const SignUpValidation = z
   .object({
     first_name: z.string().min(1, "First name is required"),
     last_name: z.string().min(1, "Last name is required"),
+    username: z.string().min(8, "Username must be at least 8 characters"),
     email_address: z.string().email("Please enter a valid email"),
     phone_number: z
       .string()

apps/codebility/types/home/codev.ts

@@ -90,6 +90,8 @@ export interface Codev {
   id: string;
   first_name: string;
   last_name: string;
+  username: string | null; // Added username field
+  username_updated_at: string | null; // Track when username was last updated
   email_address: string;
   phone_number?: string;
   address?: string | null;