From 37344e361569517f29312f7cd2da74ee89a0fff9 Mon Sep 17 00:00:00 2001
From: Jeff <jeffkleinaitis@gmail.com>
Date: Thu, 4 Apr 2024 21:29:02 -0400
Subject: feat: Create component for handling form building (sign in, sign up,
 reset password, etc)

---
 components/flexibleForm.js | 92 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 components/flexibleForm.js

(limited to 'components/flexibleForm.js')

diff --git a/components/flexibleForm.js b/components/flexibleForm.js
new file mode 100644
index 0000000..f31dabe
--- /dev/null
+++ b/components/flexibleForm.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import Container from "./container";
+import Image from 'next/image';
+import { useRouter } from "next/router";
+
+const FlexibleForm = ({ imgPos, data, route}) => {
+    const router = useRouter();
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            router.push(route);
+        } catch (error) {
+            console.error('Form submission error', error);
+        }
+    }
+    const renderImage = (
+        <div className={`flex items-center justify-center w-full lg:w-1/2 hidden lg:flex ${imgPos === "right" ? "lg:order-1" : ""}`}>
+            <div>
+                <Image
+                    src={data.image}
+                    width="521"
+                    height="auto"
+                    alt="Benefits"
+                    className={"object-cover"}
+                    placeholder="blur"
+                    blurDataURL={data.image.src}
+                />
+            </div>
+        </div>
+    );
+
+    const renderForm = (
+        <div className={`flex items-center justify-center w-full lg:w-1/2 ${data.imgPos === "right" ? "lg:justify-end" : ""}`}>
+            <div>
+                <div className="flex flex-col w-full mt-4">
+                    <h3 className="max-w-2xl mt-3 text-3xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white">
+                        {data.title}
+                    </h3>
+                    <p className="max-w-2xl text-lg leading-normal text-gray-500 lg:text-xl xl:text-xl dark:text-gray-300">
+                        {data.subtitle}
+                    </p>
+                </div>
+                <div className="mt-5 sm:mx-auto sm:w-full sm:max-w-sm">
+                    <form className="space-y-3" action={data.formAction} method={data.formMethod}>
+                        {data.formFields.map((field, index) => (
+                            <div key={index}>
+                                <label htmlFor={field.name} className="block text-sm font-medium leading-6 text-gray-900">{field.label}</label>
+                                <div className="mt-0">
+                                    <input
+                                        id={field.name}
+                                        name={field.name}
+                                        type={field.type}
+                                        autoComplete={field.autoComplete}
+                                        required={field.required}
+                                        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                    />
+                                </div>
+                            </div>
+                        ))}
+                        <div>
+                            <button type="submit" onClick={handleSubmit} className="flex w-full justify-center rounded-md bg-indigo-600 px-10 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                                {data.ctaText || "Submit"}
+                            </button>
+                        </div>
+                    </form>
+                    {data.underneathButton && (
+                        <div className="mt-3 text-center">
+                            <a href={data.underneathButton.url} className="text-sm text-indigo-600 hover:text-indigo-500">{data.underneathButton.text}</a>
+                        </div>
+                    )}
+                    {data.ctaLink && (
+                        <p className="mt-10 text-center text-sm text-gray-500">
+                            {data.ctaLink.text} <a href={data.ctaLink.url} className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">{data.ctaLink.linkText}</a>
+                        </p>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+
+    return (
+        <Container className="flex flex-wrap mb-0 lg:gap-10 lg:flex-nowrap">
+            {imgPos === "left" ? renderImage : renderForm}
+            {imgPos === "left" ? renderForm : renderImage}
+        </Container>
+    );
+};
+
+export default FlexibleForm;
-- 
cgit v1.2.3-70-g09d2


From 102324996e227e1e9bf70a1641afb7b438d56276 Mon Sep 17 00:00:00 2001
From: Jeff <jeffkleinaitis@gmail.com>
Date: Sun, 7 Apr 2024 00:59:23 -0400
Subject: feat: Implement form submit API request functionality

---
 components/flexibleForm.js | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

(limited to 'components/flexibleForm.js')

diff --git a/components/flexibleForm.js b/components/flexibleForm.js
index f31dabe..22a907f 100644
--- a/components/flexibleForm.js
+++ b/components/flexibleForm.js
@@ -8,14 +8,31 @@ const FlexibleForm = ({ imgPos, data, route}) => {
 
     const handleSubmit = async (event) => {
         event.preventDefault();
+        const formData = new FormData(event.target);
 
         try {
-            await new Promise((resolve) => setTimeout(resolve, 1000));
-            router.push(route);
+            const response = await fetch(data.formAction, {
+                method: data.formMethod,
+                body: JSON.stringify(Object.fromEntries(formData)),
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error(response.text());
+            }
+
+            console.log('Form submitted successfully');
+            if (route) {
+                router.push(route);
+            }
         } catch (error) {
-            console.error('Form submission error', error);
+            console.error('Error submitting form:', error);
         }
     }
+
+
     const renderImage = (
         <div className={`flex items-center justify-center w-full lg:w-1/2 hidden lg:flex ${imgPos === "right" ? "lg:order-1" : ""}`}>
             <div>
@@ -44,7 +61,7 @@ const FlexibleForm = ({ imgPos, data, route}) => {
                     </p>
                 </div>
                 <div className="mt-5 sm:mx-auto sm:w-full sm:max-w-sm">
-                    <form className="space-y-3" action={data.formAction} method={data.formMethod}>
+                    <form onSubmit={handleSubmit}  id="testform" className="space-y-3" action={data.formAction} method={data.formMethod}>
                         {data.formFields.map((field, index) => (
                             <div key={index}>
                                 <label htmlFor={field.name} className="block text-sm font-medium leading-6 text-gray-900">{field.label}</label>
@@ -61,7 +78,7 @@ const FlexibleForm = ({ imgPos, data, route}) => {
                             </div>
                         ))}
                         <div>
-                            <button type="submit" onClick={handleSubmit} className="flex w-full justify-center rounded-md bg-indigo-600 px-10 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                            <button type="submit" className="flex w-full justify-center rounded-md bg-indigo-600 px-10 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                                 {data.ctaText || "Submit"}
                             </button>
                         </div>
-- 
cgit v1.2.3-70-g09d2