{session.user?.name || 'No name set'}
-{session.user?.email}
-User ID: {session.user?.id}
-Hi ${name},
Your message was received.
`, - }); // If the message was sent successfully, return a 200 response - - if (sendResend.data) { - return new Response( - JSON.stringify({ - message: `Message successfully sent!`, - }), - { - status: 200, - statusText: "OK", - }, - ); // If there was an error sending the message, return a 500 response - } else { - return new Response( - JSON.stringify({ - message: `Message failed to send: ${sendResend.error}`, - }), - { - status: 500, - statusText: `Internal Server Error: ${sendResend.error}`, - }, - ); - } -}; -``` - -:::note - -Make sure to change the 'to' property in 'resend.emails.send' function, if you set up your own domain in step 2. If you skipped that step, keep the value '[delivered@resend.dev](mailto:delivered@resend.dev)'; otherwise, Resend will throw an error. - -::: - -## 5. Create an Astro Form Component - -In the `src` directory, create a new folder called `components`. Inside the `components` folder, create a new file `AstroForm.astro` and copy the provided code into it. - -```typescript ---- -export const prerender = false; - -type formData = { - name: string; - email: string; - message: string; -}; - -if (Astro.request.method === "POST") { - try { - const formData = await Astro.request.formData(); - const response = await fetch(Astro.url + "/api/sendEmail.json", { - method: "POST", - body: formData, - }); - - const data: formData = await response.json(); - - if (response.status === 200) { - console.log(data.message); - } - } catch (error) { - if (error instanceof Error) { - console.error(`Error: ${error.message}`); - } - } -} ---- - - - -``` - -This code creates an Astro component that renders a form and handles the form submission. When the form is submitted, the component will send a POST request to the `/api/sendEmail.json` endpoint created in the previous step with the form data. - -:::caution[File Extension] - -Astro requires an absolute URL, which is why you should use `Astro.url + "/api/sendEmail.json`. If you use a relative path the post request will fail. - -::: - -Additionally, adding the `export const prerender = false;` will enable SSR; otherwise, the component will be static and unable to send a post request. If you don't enable it inside the component then you will need to enable SSR via the [template directive](https://docs.astro.build/en/reference/directives-reference/). - -After creating the `AstroForm` component, add the component to your main index file located in the `src/pages` directory. Below is an example of how the main index file should look with the `AstroForm` component added. - -```typescript ---- -import AstroForm from '../components/AstroForm.astro' ---- - - - - - - - -Get started by creating your first note
-- Configure post-processing of recording transcriptions with AI models. -
-- Settings changes are auto-saved locally. -
-Server Actions
-Live Cursors
-