added first and last name

src/components/RegistrationForm/index.tsx

@@ -1,38 +1,46 @@
-'use client'
+"use client";
 
-import { useState } from 'react'
-import { useRouter } from 'next/navigation'
-import { addUser } from "@actions/userActions"
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { addUser } from "@actions/userActions";
 export default function RegistrationForm() {
-  const router = useRouter()
-  const [error, setError] = useState('')
+  const router = useRouter();
+  const [error, setError] = useState("");
   const [formData, setFormData] = useState({
-    name: '',
-    email: '',
-    password: '',
-    confirmPassword: ''
-  })
+    first_name: "",
+    last_name: "",
+    username: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
 
   const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    setError('')
-alert('in the submit');
-alert(formData.password + ":" + formData.confirmPassword);
+    e.preventDefault();
+    setError("");
+    alert("in the submit");
+    alert(formData.password + ":" + formData.confirmPassword);
     if (formData.password !== formData.confirmPassword) {
-      setError('Passwords do not match')
+      setError("Passwords do not match");
       console.log("password no match");
-      alert('password no match');
-      return
+      alert("password no match");
+      return;
     }
 
     try {
-      addUser(formData.name, formData.name, formData.name, formData.email, formData.password);
-      console.log('Form submitted:', formData)
-      router.push('/signin') // Redirect to login after successful registration
+      addUser(
+        formData.first_name,
+        formData.last_name,
+        formData.username,
+        formData.email,
+        formData.password
+      );
+      console.log("Form submitted:", formData);
+      router.push("/signin"); // Redirect to login after successful registration
     } catch (err) {
-      setError('Failed to register user')
-    }
+      setError("Failed to register user");
     }
+  };
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
@@ -42,26 +50,44 @@ alert(formData.password + ":" + formData.confirmPassword);
             Create your account
           </h2>
         </div>
+
         <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
           <div className="rounded-md shadow-sm space-y-4">
             <div>
               <label htmlFor="name" className="sr-only">
-                Full Name
+                First Name
               </label>
               <input
-                id="name"
-                name="name"
+                id="first_name"
+                name="first_name"
                 type="text"
-                required
                 className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-                placeholder="Full Name"
-                value={formData.name}
-                onChange={(e) => setFormData({...formData, name: e.target.value})}
+                placeholder="First Name"
+                value={formData.first_name}
+                onChange={(e) =>
+                  setFormData({ ...formData, first_name: e.target.value })
+                }
+              />
+            </div>
+            <div>
+              <label htmlFor="name" className="sr-only">
+                Last Name
+              </label>
+              <input
+                id="last_name"
+                name="last_name"
+                type="text"
+                className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+                placeholder="Last Name"
+                value={formData.last_name}
+                onChange={(e) =>
+                  setFormData({ ...formData, last_name: e.target.value })
+                }
               />
             </div>
             <div>
               <label htmlFor="email" className="sr-only">
-                Email address
+                Email Address / Username
               </label>
               <input
                 id="email"
@@ -71,7 +97,9 @@ alert(formData.password + ":" + formData.confirmPassword);
                 className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                 placeholder="Email address"
                 value={formData.email}
-                onChange={(e) => setFormData({...formData, email: e.target.value})}
+                onChange={(e) =>
+                  setFormData({ ...formData, email: e.target.value })
+                }
               />
             </div>
             <div>
@@ -86,7 +114,9 @@ alert(formData.password + ":" + formData.confirmPassword);
                 className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                 placeholder="Password"
                 value={formData.password}
-                onChange={(e) => setFormData({...formData, password: e.target.value})}
+                onChange={(e) =>
+                  setFormData({ ...formData, password: e.target.value })
+                }
               />
             </div>
             <div>
@@ -101,7 +131,9 @@ alert(formData.password + ":" + formData.confirmPassword);
                 className="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                 placeholder="Confirm Password"
                 value={formData.confirmPassword}
-                onChange={(e) => setFormData({...formData, confirmPassword: e.target.value})}
+                onChange={(e) =>
+                  setFormData({ ...formData, confirmPassword: e.target.value })
+                }
               />
             </div>
           </div>
@@ -121,5 +153,5 @@ alert(formData.password + ":" + formData.confirmPassword);
         </form>
       </div>
     </div>
-  )
+  );
 }