forms are working

MetaProvide · Aug 16, 2024 · 932c3a3 · 932c3a3
1 parent d260681
commit 932c3a3
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 47 deletions.
diff --git a/assets/styles/main.css b/assets/styles/main.css
@@ -62,6 +62,11 @@ body {
   font-size: 12px;
   padding-bottom: 64px;
   position: relative;
+  color: var(--mp-color-black);
+  background-color: var(--mp-color-white);
+}
+
+.hejbit-body {
   color: var(--mp-color-white);
   background-color: var(--mp-color-black);
 }

diff --git a/hejbit/start.html b/hejbit/start.html
@@ -58,7 +58,7 @@
     <script src="../assets/javascript/carousel.js" defer></script>
   </head>
 
-  <body>
+<body class="hejbit-body">
     <nav>
       <input class="checkbox" type="checkbox" name="" id="" />
       <div class="hamburger-lines">
@@ -201,57 +201,36 @@ <h2 class="form-title">
     <script>
       document
         .getElementById("trial-license-form")
-        .addEventListener("submit", function (event) {
+        .addEventListener("submit", async function (event) {
           event.preventDefault();
 
-          const messageElement = document.getElementById("form-message");
-
           const formData = new FormData(event.target);
-          const formDataString = Array.from(formData.entries())
-            .map(([key, value]) => `${key}: ${value}`)
-            .join("\n");
-
-          const name = formData.get("name");
-          const email = formData.get("email");
+          const messageElement = document.getElementById("form-message");
 
-          // Simulating a successful submission (replace with actual submission logic)
-          fetch("https://api.brevo.com/v3/smtp/email", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              // This is bad but it works for now. TODO: Get the API key from the environment variables using backend
-              "api-key":
-                "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",
-            },
-            body: JSON.stringify({
-              sender: {
-                name: "Hejbit by MetaProvide",
-                email: "[email protected]",
-              },
-              to: [{ email: email, name: name }],
-              subject: "Thank you for requesting a trail license!",
-              htmlContent: `<h1>Hello ${name}</h1><p>Thank you for reaching out. We will get back to you shortly. You have sent us the following information:</p><p>${formDataString}</p>`,
-              params: {
-                name: name,
-                formDataString: formDataString,
-              },
-            }),
-          })
-            .then((response) => {
-              if (response.ok) {
-                messageElement.innerHTML =
-                  '<p class="message-success">Your request has been submitted successfully!</p>';
-              } else {
-                messageElement.innerHTML =
-                  '<p class="message-fail">There was an error submitting your request. Please try again.</p>';
+          try {
+            const response = await fetch(
+              "https://mailer-vercel.vercel.app/api/send-email-license",
+              {
+                method: "POST",
+                body: JSON.stringify(Object.fromEntries(formData)),
+                headers: {
+                  "Content-Type": "application/json",
+                },
               }
+            );
 
-              // Remove the message after 5 seconds
-              setTimeout(() => {
-                messageElement.innerHTML = "";
-              }, 5000);
-            })
-            .catch((error) => {
+            const result = await response.json();
+
+            if (response.ok) {
+              messageElement.innerHTML =
+                '<p class="message-success">Your message was sent successfully!</p>';
+            } else {
+              messageElement.innerHTML =
+                '<p class="message-fail">There was an error: ' +
+                result.message +
+                "</p>";
+            }
+          } catch(error) {
               messageElement.innerHTML =
                 '<p class="message-fail">There was an error submitting your request. Please try again.</p>';
               console.error("Error:", error);
@@ -260,7 +239,7 @@ <h2 class="form-title">
               setTimeout(() => {
                 messageElement.innerHTML = "";
               }, 5000);
-            });
+            };
         });
     </script>
   </body>