Better form control and profile page

components/Onboarding.tsx

@@ -4,6 +4,7 @@ import { Card, CardContent } from './ui/card';
 import { Input } from './ui/input';
 import { Label } from './ui/label';
 import { useSession } from '../lib/auth-client';
+import { validatePhoneOrEmail } from '../lib/validators';
 
 const logo = '/logo.png';
 
@@ -23,16 +24,21 @@ export function Onboarding({ onComplete }: Props) {
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setError('');
+    const trimmedContact = contact.trim();
+    if (trimmedContact && !validatePhoneOrEmail(trimmedContact)) {
+      setError('Contact must be a valid phone number or email address.');
+      return;
+    }
     setLoading(true);
     const res = await fetch('/api/profile', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       credentials: 'include',
       body: JSON.stringify({
-        pi_first_name: piFirstName,
-        bldg_code: bldgCode,
-        lab,
-        contact: contact || undefined,
+        pi_first_name: piFirstName.trim(),
+        bldg_code: bldgCode.trim(),
+        lab: lab.trim(),
+        contact: trimmedContact || undefined,
       }),
     });
     setLoading(false);
@@ -103,7 +109,7 @@ export function Onboarding({ onComplete }: Props) {
                 type="text"
                 value={contact}
                 onChange={e => setContact(e.target.value)}
-                placeholder="Phone or email"
+                placeholder="Phone (e.g. 555-123-4567) or email"
               />
             </div>
             {error && <p className="text-sm text-red-600">{error}</p>}