import ClientLayout from '@/Layouts/ClientLayout'; import { PageProps } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import { Globe } from 'lucide-react'; import { useState } from 'react'; import SetupStepper from './components/SetupStepper'; type Props = PageProps<{ tenant: { id: string; name: string; subdomain: string | null }; domainSuffix: string; }>; function toSubdomainSlug(value: string): string { return value .toLowerCase() .replace(/[^a-z0-9-]/g, '-') .replace(/-+/g, '-') .replace(/^-|-$/g, ''); } export default function Subdomain({ tenant, domainSuffix }: Props) { const { data, setData, post, processing, errors } = useForm({ subdomain: tenant.subdomain ?? toSubdomainSlug(tenant.name), }); const [touched, setTouched] = useState(false); function handleChange(value: string) { setTouched(true); setData('subdomain', toSubdomainSlug(value)); } function submit(e: React.FormEvent) { e.preventDefault(); post(route('setup.subdomain.store', { tenant: tenant.id })); } const preview = data.subdomain ? `${data.subdomain}${domainSuffix}` : `yourorg${domainSuffix}`; const isValid = data.subdomain.length >= 3 && /^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(data.subdomain); return (

Choose your subdomain

This is the URL your clients will use to log in.

handleChange(e.target.value) } placeholder="yourorg" className="bg-background text-foreground placeholder:text-muted-foreground dark:placeholder:text-muted-foreground/50 min-w-0 flex-1 px-4 py-2.5 text-sm outline-none" /> {domainSuffix}
{errors.subdomain && (

{errors.subdomain}

)} {touched && data.subdomain && !isValid && (

Must be 3+ characters, lowercase letters, numbers and hyphens only — cannot start or end with a hyphen.

)}

Your portal URL

https://{preview}

← Back
); }