diff --git a/src/components/dashboard/onboarding/onboarding-form.tsx b/src/components/dashboard/onboarding/onboarding-form.tsx index d11def9..0fbe107 100644 --- a/src/components/dashboard/onboarding/onboarding-form.tsx +++ b/src/components/dashboard/onboarding/onboarding-form.tsx @@ -25,7 +25,9 @@ import { User } from "@/app/types/user/user"; * Define the various stages of onboarding. */ const organizationName = z.string().min(2, "You need a longer org name!!!"); -const organizationSlug = z.string().min(2, "You need a longer org slug!!!"); +const organizationSlug = z + .string() + .regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/, "Invalid slug."); const stages: OnboardingStage[] = [ { name: "Create a new organization", @@ -174,7 +176,16 @@ const OnboardingForm = (): ReactElement => { className="pl-[7.25rem] rounded-lg" placeholder={organizationSlugPreview} defaultValue={organizationSlugPreview} - {...register("organizationSlug")} + {...register("organizationSlug", { + onChange: (event) => { + event.target.value = + event.target.value + .replace(/-{2,}/g, "-") // Replace multiple dashes with a single dash + .replace(/-\s+/g, "-") // Prevent spaces after a dash + .replace(/\s+/g, "-") // Replace spaces with dashes + .toLowerCase(); + }, + })} />