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 "$lib/styles/ContactForm.scss";
export let emailEndpointApi;
let formData = {
name: "",
email: "",
@@ -33,20 +35,56 @@
if (!validateForm()) return;
isSubmitting = true;
// Simulate API call - replace with your actual API endpoint
await new Promise((resolve) => setTimeout(resolve, 1500));
isSubmitting = false;
submitted = true;
// Reset form
formData = {
name: "",
email: "",
subject: "",
message: "",
};
await new Promise(async (resolve, reject) => {
try {
await dispatch_email(
formData.name,
formData.email,
formData.subject,
formData.message,
);
submitted = true;
// Reset form
formData = {
name: "",
email: "",
subject: "",
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 target = e.target;
formData[target.name] = target.value;

View File

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