|
1 | | -"use client"; |
| 1 | +// src/app/signup/page.tsx |
| 2 | +import { SignUpForm } from "@/components/features/signup/signup-form"; |
| 3 | +import { Suspense } from "react"; // Needed if using useSearchParams in SignUpForm |
2 | 4 |
|
3 | | -import { useState, Suspense } from "react"; |
4 | | -import { useRouter, useSearchParams } from "next/navigation"; |
5 | | - |
6 | | -function SignupFormContent() { |
7 | | - const router = useRouter(); |
8 | | - const searchParams = useSearchParams(); |
9 | | - const [form, setForm] = useState({ |
10 | | - firstname: "", |
11 | | - lastname: "", |
12 | | - username: "", |
13 | | - email: "", |
14 | | - password: "", |
15 | | - }); |
16 | | - const [message, setMessage] = useState(""); |
17 | | - |
18 | | - const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { |
19 | | - setForm({ ...form, [e.target.name]: e.target.value }); |
20 | | - }; |
21 | | - |
22 | | - const handleSubmit = async (e: React.FormEvent) => { |
23 | | - e.preventDefault(); |
24 | | - setMessage("Creating account..."); |
25 | | - |
26 | | - try { |
27 | | - const response = await fetch( |
28 | | - "https://naija-nutri-hub.azurewebsites.net/sign-up", |
29 | | - { |
30 | | - method: "POST", |
31 | | - headers: { "Content-Type": "application/json" }, |
32 | | - body: JSON.stringify(form), |
33 | | - }, |
34 | | - ); |
35 | | - |
36 | | - const data = await response.json(); |
37 | | - |
38 | | - if (response.ok) { |
39 | | - setMessage("Sign up successful! Redirecting..."); |
40 | | - localStorage.setItem("pendingEmail", form.email); |
41 | | - |
42 | | - router.push(`/verify-account?email=${encodeURIComponent(form.email)}`); |
43 | | - } else { |
44 | | - setMessage(`Sign up failed: ${data.message || "Try again."}`); |
45 | | - } |
46 | | - } catch (error) { |
47 | | - console.error(error); |
48 | | - setMessage("Network error. Please try again."); |
49 | | - } |
50 | | - }; |
51 | | - |
52 | | - return ( |
53 | | - <div className="flex items-center justify-center min-h-screen bg-neutral-900 text-white px-4"> |
54 | | - <form |
55 | | - onSubmit={handleSubmit} |
56 | | - className="flex flex-col gap-4 w-full max-w-md bg-neutral-800 p-8 rounded-2xl shadow-lg" |
57 | | - > |
58 | | - <h2 className="text-2xl font-semibold text-center mb-4 text-[#FF7A50]"> |
59 | | - Create Your Account |
60 | | - </h2> |
61 | | - |
62 | | - <input |
63 | | - name="firstname" |
64 | | - placeholder="First Name" |
65 | | - onChange={handleChange} |
66 | | - required |
67 | | - className="p-3 rounded-md bg-neutral-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FF7A50]" |
68 | | - /> |
69 | | - <input |
70 | | - name="lastname" |
71 | | - placeholder="Last Name" |
72 | | - onChange={handleChange} |
73 | | - required |
74 | | - className="p-3 rounded-md bg-neutral-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FF7A50]" |
75 | | - /> |
76 | | - <input |
77 | | - name="username" |
78 | | - placeholder="Username" |
79 | | - onChange={handleChange} |
80 | | - required |
81 | | - className="p-3 rounded-md bg-neutral-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FF7A50]" |
82 | | - /> |
83 | | - <input |
84 | | - name="email" |
85 | | - type="email" |
86 | | - placeholder="Email" |
87 | | - onChange={handleChange} |
88 | | - required |
89 | | - className="p-3 rounded-md bg-neutral-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FF7A50]" |
90 | | - /> |
91 | | - <input |
92 | | - name="password" |
93 | | - type="password" |
94 | | - placeholder="Password" |
95 | | - onChange={handleChange} |
96 | | - required |
97 | | - className="p-3 rounded-md bg-neutral-700 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#FF7A50]" |
98 | | - /> |
99 | | - |
100 | | - <button |
101 | | - type="submit" |
102 | | - className="bg-[#FF7A50] hover:bg-[#ff885f] text-white font-semibold py-3 rounded-md transition-all" |
103 | | - > |
104 | | - Sign Up |
105 | | - </button> |
106 | | - |
107 | | - {message && ( |
108 | | - <p className="mt-3 text-center text-sm text-gray-300">{message}</p> |
109 | | - )} |
110 | | - </form> |
111 | | - </div> |
112 | | - ); |
113 | | -} |
114 | | - |
115 | | -export default function SignupForm() { |
| 5 | +export default function SignUpPage() { |
116 | 6 | return ( |
| 7 | + // Wrap in Suspense if SignUpForm reads search params |
117 | 8 | <Suspense fallback={<div>Loading...</div>}> |
118 | | - <SignupFormContent /> |
| 9 | + <div className="flex items-center justify-center min-h-screen"> |
| 10 | + <SignUpForm /> |
| 11 | + </div> |
119 | 12 | </Suspense> |
120 | 13 | ); |
121 | 14 | } |
0 commit comments