From 1a8c297137406bbfd92edfffc3fcfbfb9de6b217 Mon Sep 17 00:00:00 2001
From: Diego <diego@redondo.ca>
Date: Sat, 19 Oct 2024 00:47:02 -0700
Subject: [PATCH 1/4] Add parameters to Forms

---
 src/components/ui/Form.astro         | 21 +++++++++++++++++----
 src/components/widgets/Contact.astro |  2 ++
 src/pages/contact.astro              | 12 ++++++++++++
 src/types.d.ts                       | 15 ++++++++++++++-
 4 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/Form.astro b/src/components/ui/Form.astro
index 276b39fd6..fec50492a 100644
--- a/src/components/ui/Form.astro
+++ b/src/components/ui/Form.astro
@@ -1,15 +1,26 @@
 ---
+// Import necessary components and types
 import type { Form as Props } from '~/types';
 import Button from '~/components/ui/Button.astro';
 
-const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props;
+const { inputs, textarea, disclaimer, button = 'Contact us', description = '', form } = Astro.props;
+
+// Function to handle form submission
 ---
+<script is:inline >
+  function handleSubmit(e){
+    if (!document.getElementById("disclaimer").checked){
+      e.preventDefault();
+      alert("Please accept the terms.",); 
+    }
+  }
 
-<form>
+  </script>
+<form {...form} onsubmit="return handleSubmit(event)">
   {
     inputs &&
       inputs.map(
-        ({ type = 'text', name, label = '', autocomplete = 'on', placeholder = '' }) =>
+        ({ type = 'text', name, label = '', autocomplete = 'on', placeholder = '', required }) =>
           name && (
             <div class="mb-6">
               {label && (
@@ -23,6 +34,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
                 id={name}
                 autocomplete={autocomplete}
                 placeholder={placeholder}
+                required={required}
                 class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
               />
             </div>
@@ -41,6 +53,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
           name={textarea.name ? textarea.name : 'message'}
           rows={textarea.rows ? textarea.rows : 4}
           placeholder={textarea.placeholder}
+          required={textarea.required}
           class="py-3 px-4 block w-full text-md rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900"
         />
       </div>
@@ -84,4 +97,4 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
       </div>
     )
   }
-</form>
+</form>
\ No newline at end of file
diff --git a/src/components/widgets/Contact.astro b/src/components/widgets/Contact.astro
index 122f4b049..b78898b36 100644
--- a/src/components/widgets/Contact.astro
+++ b/src/components/widgets/Contact.astro
@@ -13,6 +13,7 @@ const {
   disclaimer,
   button,
   description,
+  form,
 
   id,
   isDark = false,
@@ -33,6 +34,7 @@ const {
           disclaimer={disclaimer}
           button={button}
           description={description}
+          form={form}
         />
       </div>
     )
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 70157e070..513271f9e 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -16,6 +16,13 @@ const metadata = {
 
   <ContactUs
     id="form"
+    form={{
+      action: '#',
+      name: 'formName',
+      id: 'formId',
+      method: 'POST',
+      enctype: 'multipart/form-data',
+    }}
     title="Drop us a message today!"
     subtitle="For quicker answers, explore our FAQs section. You may find the solution you're looking  for right there! If not, our support team is delighted to help you."
     inputs={[
@@ -23,15 +30,20 @@ const metadata = {
         type: 'text',
         name: 'name',
         label: 'Name',
+        placeholder: 'Your Name',
+        required : true
       },
       {
         type: 'email',
         name: 'email',
         label: 'Email',
+        placeholder: 'your@email.com',
+        required: true
       },
     ]}
     textarea={{
       label: 'Message',
+      required: true
     }}
     disclaimer={{
       label:
diff --git a/src/types.d.ts b/src/types.d.ts
index 6c4223bdc..e7879ea42 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -167,6 +167,8 @@ export interface Input {
   label?: string;
   autocomplete?: string;
   placeholder?: string;
+  required?: boolean;
+  value?: string;
 }
 
 export interface Textarea {
@@ -174,6 +176,7 @@ export interface Textarea {
   name?: string;
   placeholder?: string;
   rows?: number;
+  required?: boolean;
 }
 
 export interface Disclaimer {
@@ -210,6 +213,16 @@ export interface Form {
   disclaimer?: Disclaimer;
   button?: string;
   description?: string;
+  form?: Array<FormProps>;
+}
+
+export interface FormProps {
+  action?: string;
+  class?: string;
+  name?: string;
+  id?: string;
+  method?: string;
+  enctype?: string;
 }
 
 // WIDGETS
@@ -283,4 +296,4 @@ export interface Content extends Omit<Headline, 'classes'>, Widget {
   callToAction?: CallToAction;
 }
 
-export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {}
+export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {}
\ No newline at end of file

From 4ef54361382578fe9ed4c90df8f998cbf357ff42 Mon Sep 17 00:00:00 2001
From: Diego <diego@redondo.ca>
Date: Sat, 19 Oct 2024 00:49:52 -0700
Subject: [PATCH 2/4] Remove extra types def

---
 src/pages/contact.astro | 2 +-
 src/types.d.ts          | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 513271f9e..e8ccebeac 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -43,7 +43,7 @@ const metadata = {
     ]}
     textarea={{
       label: 'Message',
-      required: true
+      required: false
     }}
     disclaimer={{
       label:
diff --git a/src/types.d.ts b/src/types.d.ts
index e7879ea42..8f3d6a4bf 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -168,7 +168,6 @@ export interface Input {
   autocomplete?: string;
   placeholder?: string;
   required?: boolean;
-  value?: string;
 }
 
 export interface Textarea {
@@ -296,4 +295,4 @@ export interface Content extends Omit<Headline, 'classes'>, Widget {
   callToAction?: CallToAction;
 }
 
-export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {}
\ No newline at end of file
+export interface Contact extends Omit<Headline, 'classes'>, Form, Widget {}

From f5a02295255ae4e554b6181cd32414a8701cd6bd Mon Sep 17 00:00:00 2001
From: Diego <diego@redondo.ca>
Date: Sat, 19 Oct 2024 00:52:13 -0700
Subject: [PATCH 3/4] Lint

---
 src/components/ui/Form.astro | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/ui/Form.astro b/src/components/ui/Form.astro
index fec50492a..72cd0b2d2 100644
--- a/src/components/ui/Form.astro
+++ b/src/components/ui/Form.astro
@@ -1,21 +1,18 @@
 ---
-// Import necessary components and types
 import type { Form as Props } from '~/types';
 import Button from '~/components/ui/Button.astro';
 
 const { inputs, textarea, disclaimer, button = 'Contact us', description = '', form } = Astro.props;
-
-// Function to handle form submission
 ---
-<script is:inline >
-  function handleSubmit(e){
-    if (!document.getElementById("disclaimer").checked){
+
+<script is:inline>
+  function handleSubmit(e) {
+    if (!document.getElementById('disclaimer').checked) {
       e.preventDefault();
-      alert("Please accept the terms.",); 
+      alert('Please accept the terms.');
     }
   }
-
-  </script>
+</script>
 <form {...form} onsubmit="return handleSubmit(event)">
   {
     inputs &&
@@ -97,4 +94,4 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '', f
       </div>
     )
   }
-</form>
\ No newline at end of file
+</form>

From 356cc391798f0bbaa84676765dbe516ddcd8229d Mon Sep 17 00:00:00 2001
From: Diego <diego@redondo.ca>
Date: Mon, 21 Oct 2024 11:46:07 -0700
Subject: [PATCH 4/4] Fixed lint error

---
 src/components/ui/Form.astro | 10 +++++++++-
 src/pages/contact.astro      |  6 +++---
 src/types.d.ts               |  4 ++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/Form.astro b/src/components/ui/Form.astro
index 72cd0b2d2..339102fef 100644
--- a/src/components/ui/Form.astro
+++ b/src/components/ui/Form.astro
@@ -12,8 +12,16 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '', f
       alert('Please accept the terms.');
     }
   }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    const formElement = document.querySelector('form');
+    if (formElement) {
+      formElement.addEventListener('submit', handleSubmit);
+    }
+  });
 </script>
-<form {...form} onsubmit="return handleSubmit(event)">
+
+<form {...form}>
   {
     inputs &&
       inputs.map(
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index e8ccebeac..b21db326d 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -31,19 +31,19 @@ const metadata = {
         name: 'name',
         label: 'Name',
         placeholder: 'Your Name',
-        required : true
+        required: true,
       },
       {
         type: 'email',
         name: 'email',
         label: 'Email',
         placeholder: 'your@email.com',
-        required: true
+        required: true,
       },
     ]}
     textarea={{
       label: 'Message',
-      required: false
+      required: false,
     }}
     disclaimer={{
       label:
diff --git a/src/types.d.ts b/src/types.d.ts
index 8f3d6a4bf..e9e9cedf5 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -212,7 +212,7 @@ export interface Form {
   disclaimer?: Disclaimer;
   button?: string;
   description?: string;
-  form?: Array<FormProps>;
+  form?: FormProps;
 }
 
 export interface FormProps {
@@ -220,7 +220,7 @@ export interface FormProps {
   class?: string;
   name?: string;
   id?: string;
-  method?: string;
+  method?: 'GET' | 'POST';
   enctype?: string;
 }