From 07c73fa5628649adef75df67567cf1ae164cb778 Mon Sep 17 00:00:00 2001
From: JesseBrault0709 <62299747+JesseBrault0709@users.noreply.github.com>
Date: Fri, 7 Jun 2024 10:10:11 +0200
Subject: [PATCH] Contact basically working.

---
 .../site/contact/ContactPageTemplate.wvc      | 10 ++--
 static/contact.js                             | 46 ++++++++++++-------
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc b/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
index c17cf5b..5346b64 100644
--- a/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
+++ b/pages/resources/com/jessebrault/site/contact/ContactPageTemplate.wvc
@@ -11,30 +11,30 @@ import com.jessebrault.site.StandardPage
             <div class="control">
                 <label for="name">Name</label>
                 <input id="name" name="name" type="text" />
-                <p class="message">&nbsp;</p>
+                <p id="name-message" class="message">&nbsp;</p>
             </div>
 
             <div class="control">
                 <label for="institution">Institution</label>
                 <input id="institution" name="institution" type="text" />
-                <p class="message">&nbsp;</p>
+                <p id="institution-message" class="message">&nbsp;</p>
             </div>
 
             <div class="control">
                 <label for="email">Email</label>
                 <input id="email" name="email" type="email" />
-                <p class="message">&nbsp;</p>
+                <p id="email-message" class="message">&nbsp;</p>
             </div>
 
             <div class="control">
                 <label for="message">Message</label>
                 <textarea id="message" name="message"></textarea>
-                <p class="message">&nbsp;</p>
+                <p id="message-message" class="message">&nbsp;</p>
             </div>
 
             <div class="control">
                 <input type="submit" />
-                <p class="message">&nbsp;</p>
+                <p id="submit-message" class="message">&nbsp;</p>
             </div>
         </form>
     </article>
diff --git a/static/contact.js b/static/contact.js
index b04351c..7b9ed13 100644
--- a/static/contact.js
+++ b/static/contact.js
@@ -3,21 +3,35 @@ window.addEventListener('load', function () {
     contactForm.addEventListener('submit', function (submitEvent) {
         submitEvent.preventDefault()
         const formData = new FormData(contactForm)
-
-        const message = `
-From: ${formData.get('name')}
-Email: ${formData.get('email')}
-Institution: ${formData.get('institution')}
-Message:
-${formData.get('message')}
-        `.trim()
-
-        const toSend = { message }
-        console.log(toSend)
-        // fetch('https://api.jessebrault.com/contact/jessebrault', {
-        //     body: JSON.stringify(toSend),
-        //     headers: 'Content-Type: Application/JSON',
-        //     method: 'POST' // TODO: signal
-        // })
+        const toSend = {
+            name: formData.get('name'),
+            email: formData.get('email'),
+            institution: formData.get('institution'),
+            message: formData.get('message')
+        }
+        fetch('https://api.jessebrault.com/contact/jessebrault', {
+            body: JSON.stringify(toSend),
+            headers: {
+                'Content-type': 'application/json'
+            },
+            method: 'POST' // TODO: signal
+        })
+            .then(function (response) {
+                if (response.status === 400) {
+                    response.json().then(function (body) {
+                        body.errors.forEach(function ({ field, message }) {
+                            const element = document.getElementById(`${field}-message`)
+                            element.innerText = message
+                        })
+                    })
+                } else if (response.status === 500) {
+                    const submitMessageElement = document.getElementById('submit-message')
+                    submitMessageElement.innerText = 'There was internal server error. Please try again later.'
+                } else {
+                    const submitMessageElement = document.getElementById('submit-message')
+                    submitMessageElement.innerText = 'Your message was successfully sent!'
+                }
+            })
+            .catch(function (error) {})
     })
 })