Better form control and profile page

components/auth/SignUpForm.tsx

@@ -12,6 +12,7 @@ import {
   DialogFooter,
 } from '../ui/dialog';
 import { signUp, sendVerificationEmail } from '../../lib/auth-client';
+import { validateEmail } from '../../lib/validators';
 import { useEffect } from 'react';
 
 const logo = '/logo.png';
@@ -48,6 +49,16 @@ export function SignUpForm({ onLogin }: Props) {
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     setError('');
+    const trimmedName = name.trim();
+    const trimmedEmail = email.trim();
+    if (trimmedName.length < 2) {
+      setError('Please enter your full name.');
+      return;
+    }
+    if (!validateEmail(trimmedEmail)) {
+      setError('Please enter a valid email address.');
+      return;
+    }
     if (password.length < 8) {
       setError('Password must be at least 8 characters');
       return;
@@ -58,8 +69,8 @@ export function SignUpForm({ onLogin }: Props) {
     }
     setLoading(true);
     const res = await signUp.email({
-      name,
-      email,
+      name: trimmedName,
+      email: trimmedEmail,
       password,
       callbackURL: window.location.origin,
     });