Added signup form

Author: Gloria

frontend/app/signup/page.tsx

@@ -7,10 +7,48 @@ import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { ShoppingCart, Eye, EyeOff, MapPin } from "lucide-react"
 import { useState } from "react"
+import axios, { AxiosError } from "axios"
+import { useRouter } from "next/navigation"
 
 export default function SignupPage() {
   const [showPassword, setShowPassword] = useState(false)
 
+  const router = useRouter()
+  const [form, setForm] = useState({
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+    postcode: "",
+    agreedToTerms: false
+  })
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value, type, checked } = e.target
+    setForm((prev) => ({
+      ...prev,
+      [id]: type === "checkbox" ? checked : value
+    }))
+  }
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    if (!form.agreedToTerms) {
+      alert("You must agree to the Terms and Privacy Policy.")
+      return
+    }
+
+    try {
+      await axios.post("http://localhost:8080/api/signup", form)
+      router.push("/dashboard")
+    } catch (err) {
+      console.error("Signup failed", err)
+      const axiosError = err as AxiosError<{ message: string }>;
+      const errorMessage = axiosError.response?.data?.message || "Unknown error"
+      alert("Signup failed: " + errorMessage)
+    }
+  }
+
   return (
     <div className="min-h-screen flex items-center justify-center bg-gradient-to-b from-green-50 to-white p-4">
       <div className="w-full max-w-md">
@@ -31,21 +69,21 @@ export default function SignupPage() {
             <div className="grid grid-cols-2 gap-4">
               <div className="space-y-2">
                 <Label htmlFor="firstName">First Name</Label>
-                <Input id="firstName" placeholder="John" />
+                <Input id="firstName" value={form.firstName} onChange={handleChange} placeholder="John" />
               </div>
               <div className="space-y-2">
                 <Label htmlFor="lastName">Last Name</Label>
-                <Input id="lastName" placeholder="Smith" />
+                <Input id="lastName" value={form.lastName} onChange={handleChange} placeholder="Smith" />
               </div>
             </div>
             <div className="space-y-2">
               <Label htmlFor="email">Email</Label>
-              <Input id="email" type="email" placeholder="john@example.com" />
+              <Input id="email" type="email" value={form.email} onChange={handleChange} placeholder="john@example.com" />
             </div>
             <div className="space-y-2">
               <Label htmlFor="password">Password</Label>
               <div className="relative">
-                <Input id="password" type={showPassword ? "text" : "password"} placeholder="Create a strong password" />
+                <Input id="password" type={showPassword ? "text" : "password"} value={form.password} onChange={handleChange} placeholder="Create a strong password" />
                 <Button
                   type="button"
                   variant="ghost"
@@ -61,12 +99,18 @@ export default function SignupPage() {
               <Label htmlFor="postcode">Postcode</Label>
               <div className="relative">
                 <MapPin className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-                <Input id="postcode" placeholder="2000" className="pl-10" />
+                <Input id="postcode" placeholder="2000" value={form.postcode} onChange={handleChange} className="pl-10" />
               </div>
               <p className="text-xs text-muted-foreground">We'll show you prices for stores in your area</p>
             </div>
             <div className="flex items-center space-x-2">
-              <input type="checkbox" id="terms" className="rounded" />
+              <input
+                type="checkbox"
+                id="agreedToTerms"
+                className="rounded"
+                checked={form.agreedToTerms}
+                onChange={handleChange}
+              />
               <Label htmlFor="terms" className="text-sm">
                 I agree to the{" "}
                 <Link href="/terms" className="text-green-600 hover:underline">
@@ -79,7 +123,11 @@ export default function SignupPage() {
               </Label>
             </div>
             <Link href="/dashboard">
-              <Button className="w-full bg-green-600 hover:bg-green-700">Create Account</Button>
+              <form onSubmit={handleSubmit} className="w-full">
+                <Button type="submit" className="w-full bg-green-600 hover:bg-green-700">
+                  Create Account
+                </Button>
+              </form>
             </Link>
             <div className="text-center text-sm">
               Already have an account?{" "}