feat: add first name capture at signup and multi-step delete account confirmation

src/components/Login.tsx

@@ -7,6 +7,7 @@ export default function Login() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [firstName, setFirstName] = useState('');
   const [isSignup, setIsSignup] = useState(false);
   const [rememberMe, setRememberMe] = useState(false);
   const [error, setError] = useState('');
@@ -19,13 +20,18 @@ export default function Login() {
     setLoading(true);
     
     if (isSignup) {
+      if (!firstName.trim()) {
+        setError('Please enter your first name');
+        setLoading(false);
+        return;
+      }
       if (password !== confirmPassword) {
         setError('Passwords do not match');
         setLoading(false);
         return;
       }
       try {
-        await signup(email, password);
+        await signup(email, password, firstName);
       } catch (err: unknown) {
         setError(err instanceof Error ? err.message : 'An error occurred');
       }
@@ -61,6 +67,19 @@ export default function Login() {
               {error}
             </div>
           )}
+          {isSignup && (
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">First Name</label>
+              <input
+                type="text"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                className="w-full p-3 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors"
+                placeholder="Enter your first name"
+                required={isSignup}
+              />
+            </div>
+          )}
           <div>
             <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
             <input
@@ -135,6 +154,7 @@ export default function Login() {
                 setIsSignup(!isSignup);
                 setError('');
                 setConfirmPassword('');
+                setFirstName('');
               }}
               className="text-blue-400 hover:text-blue-300 transition-colors"
             >