- {" "}
+ /*
+ * Components for each question / step
+ */
+ const formSteps = [
+ {
+ id: 0,
+ component: (
+ <>
{" "}
+ autoFocus
+ onChange={handleInputChange}
+ className="w-full"
+ />
+
+
+ ),
+ },
+ {
+ id: 1,
+ component: (
+ <>
+
+
+ ),
+ },
+ {
+ id: 2,
+ component: (
+ <>
+
+
+
+ ),
+ },
+ {
+ id: 3,
+ component: (
+ <>
+
+
+
+
+ ),
+ },
+ ];
+
+ useEffect(() => {
+ console.log("formData updated", formData);
+ }, [formData]);
+
+ /*
+ * Proceed to the next question
+ */
+ const goToNextStep = (e) => {
+ if (currentStep < questions.length - 1) {
+ setFormData((prev) => ({
+ ...prev,
+ [questions[currentStep].key]: formData[questions[currentStep].key],
+ }));
+ setCurrentStep((currentStep) => currentStep + 1);
+ }
+ // Add any additional actions for the last step, like submitting the form
+ };
+
+ /*
+ * Go to previous step
+ */
+ const goToPreviousStep = () => {
+ if (currentStep > 0) {
+ setCurrentStep((currentStep) => currentStep - 1);
+ }
+ };
+
+ /*
+ * Submit signup data to backend and sign in
+ */
+ const handleSubmit = async (e) => {
+ setFormData((prev) => ({
+ ...prev,
+ [questions[currentStep].key]: formData[questions[currentStep].key],
+ }));
+
+ e.preventDefault();
+
+ // Validate password
+ if (formData.password !== formData.confirmPassword) {
+ console.log("Passwords do not match");
+ return;
+ }
+
+ // Send request to create user
+ const response = await fetch("/api/auth/signup", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ email: formData.email,
+ password: formData.password,
+ firstName: formData.firstName,
+ lastName: formData.lastName,
+ }),
+ });
+
+ const data = await response.json();
+
+ if (response.ok) {
+ // Proceed with sign-in or navigate to another page
+ // if (response.ok) {
+ await signIn("credentials", {
+ username: email,
+ password: password,
+ callbackUrl: searchParams.get("callbackUrl") || "/",
+ });
+ }
+ };
+
+ /*
+ * Form return JSX
+ */
+ const searchParams = useSearchParams();
+ return (
+ <>
+
);