add text input validation

apps/dashboard/src/app/sign-up/[[...sign-up]]/SignUpForm.tsx

@@ -262,6 +262,11 @@ export default function SignUpForm({
   const submitLabel = selectedPlan
     ? dict.subscribeToPlan.replace("{plan}", PLAN_LABELS[selectedPlan])
     : dict.create;
+  const textPattern = {
+    en: "[A-Za-z\\s'-]+",
+    fr: "[A-Za-zÀ-ÖØ-öø-ÿŒœ\\s'-]+",
+    ar: "[\\u0600-\\u06FF\\u0750-\\u077F\\s،؛؟ـ'-]+",
+  }[preferredLanguage];
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -277,10 +282,10 @@ export default function SignUpForm({
       await apiFetch("/auth/account/start", {
         method: "POST",
         body: JSON.stringify({
-          firstName,
-          lastName,
-          companyName,
-          email,
+          firstName: firstName.trim(),
+          lastName: lastName.trim(),
+          companyName: companyName.trim(),
+          email: email.trim(),
           password,
           preferredLanguage,
           ...(selectedPlan ? { subscriptionPlan: selectedPlan } : {}),
@@ -381,11 +386,13 @@ export default function SignUpForm({
                   <input
                     type="text"
                     required
-                    maxLength={80}
+                    maxLength={50}
                     value={firstName}
                     onChange={(e) => setFirstName(e.target.value)}
                     placeholder={dict.firstNamePlaceholder}
                     autoFocus
+                    dir={preferredLanguage === "ar" ? "rtl" : "ltr"}
+                    pattern={textPattern}
                     className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
                   />
                 </div>
@@ -397,10 +404,12 @@ export default function SignUpForm({
                   <input
                     type="text"
                     required
-                    maxLength={80}
+                    maxLength={50}
                     value={lastName}
                     onChange={(e) => setLastName(e.target.value)}
                     placeholder={dict.lastNamePlaceholder}
+                    dir={preferredLanguage === "ar" ? "rtl" : "ltr"}
+                    pattern={textPattern}
                     className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
                   />
                 </div>
@@ -429,6 +438,7 @@ export default function SignUpForm({
                 <input
                   type="email"
                   required
+                  maxLength={254}
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   placeholder={dict.emailPlaceholder}
@@ -436,6 +446,22 @@ export default function SignUpForm({
                 />
               </div>
 
+              <div>
+                <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
+                  {dict.languageLabel} <span className="text-red-500">*</span>
+                </label>
+                <select
+                  required
+                  value={preferredLanguage}
+                  onChange={(e) => setPreferredLanguage(e.target.value as "en" | "fr" | "ar")}
+                  className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 transition-colors focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-blue-950/80 dark:text-stone-100"
+                >
+                  <option value="en">EN</option>
+                  <option value="fr">FR</option>
+                  <option value="ar">عربي</option>
+                </select>
+              </div>
+
               <div>
                 <label className="mb-1.5 block text-sm font-medium text-stone-700 dark:text-stone-200">
                   {dict.password} <span className="text-red-500">*</span>