Added email API endpoint

This commit is contained in:
2025-01-20 17:18:54 +00:00
parent b404fe12a2
commit 1a9f240b14
2 changed files with 57 additions and 13 deletions

View File

@@ -2,6 +2,8 @@
import { Send, Loader2 } from "lucide-svelte"; import { Send, Loader2 } from "lucide-svelte";
import "$lib/styles/ContactForm.scss"; import "$lib/styles/ContactForm.scss";
export let emailEndpointApi;
let formData = { let formData = {
name: "", name: "",
email: "", email: "",
@@ -33,11 +35,15 @@
if (!validateForm()) return; if (!validateForm()) return;
isSubmitting = true; isSubmitting = true;
// Simulate API call - replace with your actual API endpoint await new Promise(async (resolve, reject) => {
await new Promise((resolve) => setTimeout(resolve, 1500)); try {
isSubmitting = false; await dispatch_email(
formData.name,
formData.email,
formData.subject,
formData.message,
);
submitted = true; submitted = true;
// Reset form // Reset form
formData = { formData = {
name: "", name: "",
@@ -45,8 +51,40 @@
subject: "", subject: "",
message: "", message: "",
}; };
resolve();
} catch (error) {
console.error("Error:", error);
reject(error);
} finally {
isSubmitting = false;
}
});
}; };
async function dispatch_email(name, email, subject, message) {
try {
const response = await fetch(emailEndpointApi, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name,
email,
subject,
message,
}),
});
if (!response.ok) throw new Error("Failed to send message");
// Handle success (clear form, show success message, etc.)
} catch (error) {
// Handle error
console.error("Error:", error);
}
}
const handleInput = (e) => { const handleInput = (e) => {
const target = e.target; const target = e.target;
formData[target.name] = target.value; formData[target.name] = target.value;

View File

@@ -5,6 +5,9 @@
import ContactForm from "$lib/components/ContactForm.svelte"; import ContactForm from "$lib/components/ContactForm.svelte";
import { CDN } from "$lib/constants"; import { CDN } from "$lib/constants";
const EMAIL_ENDPOINT =
"https://bst564m4ws3ouxg27nqrpfqv5a0jbhxi.lambda-url.eu-west-1.on.aws/";
</script> </script>
<div class="contact-page"> <div class="contact-page">
@@ -20,7 +23,10 @@
community. Please use the form below to email our corresponding community. Please use the form below to email our corresponding
researcher and they will reply as soon as they are able. researcher and they will reply as soon as they are able.
</p> </p>
<ContactForm class="contact-form" /> <ContactForm
class="contact-form"
emailEndpointApi={EMAIL_ENDPOINT}
/>
</div> </div>
<div class="contact-image-column"> <div class="contact-image-column">
<img <img