polish contact page

src/routes/contact/+page.server.ts

@@ -1,81 +1,84 @@
-import { env } from '$env/dynamic/private';
-import { fail } from '@sveltejs/kit';
-import { createTransport } from 'nodemailer';
-import type { Actions } from './$types';
-import { logger } from '$lib/server/logger';
+import { env } from "$env/dynamic/private";
+import { fail } from "@sveltejs/kit";
+import { createTransport } from "nodemailer";
+import type { Actions } from "./$types";
+import { logger } from "$lib/server/logger";
 
 export const actions = {
 	default: async ({ request }) => {
 		const form = await request.formData();
 
-		if (!form.has('name')) {
+		if (!form.has("name")) {
 			return fail(400, { name: null, missing: true });
 		}
 
-		if (!form.has('email')) {
+		if (!form.has("email")) {
 			return fail(400, { email: null, missing: true });
 		}
 
-		if (!form.has('subject')) {
+		if (!form.has("subject")) {
 			return fail(400, { subject: null, missing: true });
 		}
 
-		if (!form.has('message')) {
+		if (!form.has("message")) {
 			return fail(400, { message: null, missing: true });
 		}
 
-		const name = form.get('name');
-		if (typeof name !== 'string') {
+		const name = form.get("name");
+		if (typeof name !== "string") {
 			return fail(400, { name, incorrect: true });
 		}
 
-		const email = form.get('email');
-		if (typeof email !== 'string') {
+		const email = form.get("email");
+		if (typeof email !== "string") {
 			return fail(400, { email, incorrect: true });
 		}
 
-		const subject = form.get('subject');
-		if (typeof subject !== 'string') {
+		const subject = form.get("subject");
+		if (typeof subject !== "string") {
 			return fail(400, { subject, incorrect: true });
 		}
 
-		const message = form.get('message');
-		if (typeof message !== 'string') {
+		const message = form.get("message");
+		if (typeof message !== "string") {
 			return fail(400, { message, incorrect: true });
 		}
 
 		const transport = createTransport({
 			host: env.MAIL_TRANSPORT_HOST,
-			port: isNaN(Number(env.MAIL_TRANSPORT_PORT)) ? 587 : Number(env.MAIL_TRANSPORT_PORT),
+			port: isNaN(Number(env.MAIL_TRANSPORT_PORT))
+				? 587
+				: Number(env.MAIL_TRANSPORT_PORT),
 			auth: {
 				user: env.MAIL_TRANSPORT_USER,
-				pass: env.MAIL_TRANSPORT_PASS
-			}
+				pass: env.MAIL_TRANSPORT_PASS,
+			},
 		});
 
 		try {
 			const info1 = await transport.sendMail({
-				from: 'no-reply@benjaminpalko.ca',
+				from: "no-reply@benjaminpalko.ca",
 				to: email,
 				subject: `Thank you for reaching out`,
-				text: `Hello ${name}!\n\nThank you for reaching out! I will be sure to get back to you ASAP.\n\nCheers,\nBenjamin`
+				text: `Hello ${name}!\n\nThank you for reaching out! I will be sure to get back to you ASAP.\n\nCheers,\nBenjamin`,
 			});
 
 			const info2 = await transport.sendMail({
 				from: email,
-				to: 'contact@benjaminpalko.ca',
+				to: "contact@benjaminpalko.ca",
 				subject: subject,
-				text: message
+				text: message,
 			});
 
 			return {
 				response: {
 					accepted: [...info1.accepted, ...info2.accepted],
-					rejected: [...info1.rejected, ...info2.rejected]
-				}
+					rejected: [...info1.rejected, ...info2.rejected],
+				},
 			};
 		} catch (error) {
 			logger.error(error);
+			fail(400, { incorrect: true });
 		}
-	}
+	},
 } satisfies Actions;

src/routes/contact/+page.svelte

@@ -11,11 +11,27 @@
 	} from '@lucide/svelte';
 	import type { PageProps } from './$types';
 
+	let loading = $state(false);
+
 	let { form }: PageProps = $props();
+
+	$inspect(form);
 </script>
 
-<form id="contact" method="post" use:enhance>
-	<div class="mx-auto grid max-w-3xl gap-4 py-8 sm:grid-flow-col sm:grid-cols-3 sm:grid-rows-6">
+<form
+	id="contact"
+	method="post"
+	use:enhance={() => {
+		loading = true;
+		return async ({ update }) => {
+			loading = false;
+			update();
+		};
+	}}
+>
+	<div class="mx-auto grid max-w-2xl gap-8 py-8 sm:grid-flow-col sm:grid-cols-3 sm:grid-rows-6">
+		<h2 class="col-span-full text-center text-4xl font-light">Reach out! 🤝</h2>
+
 		<div class="col-span-full">
 			{#if form?.response?.rejected.length ?? 0 > 0}
 				<div role="alert" class="alert alert-error w-full">
@@ -35,23 +51,22 @@
 			{/if}
 		</div>
 
-		<h2 class="col-span-full text-3xl font-light">Reach out! 🤝</h2>
-
 		<label class="input input-bordered col-span-full flex w-full items-center sm:col-span-1">
 			<UserRound />
-			<input name="name" type="text" class="grow" placeholder="Full Name" />
+			<input required name="name" type="text" class="grow" placeholder="Full Name" />
 		</label>
 		<label class="input input-bordered col-span-full flex w-full items-center gap-2 sm:col-span-1">
 			<Mail />
-			<input name="email" type="text" class="grow" placeholder="Your Email" />
+			<input required name="email" type="email" class="grow" placeholder="Your Email" />
 		</label>
 		<label class="input input-bordered col-span-full flex w-full items-center gap-2 sm:col-span-1">
 			<Croissant />
-			<input name="subject" type="text" class="grow" placeholder="Subject" />
+			<input required name="subject" type="text" class="grow" placeholder="Subject" />
 		</label>
 
 		<div class="row-span-3 sm:col-span-2">
 			<textarea
+				required
 				name="message"
 				form="contact"
 				class="textarea textarea-bordered h-full w-full resize-none"
@@ -59,6 +74,19 @@
 			></textarea>
 		</div>
 
-		<button type="submit" class="btn btn-primary col-span0">Send Message <Send size={20} /></button>
+		<button
+			disabled={loading}
+			type="submit"
+			class="btn btn-primary col-span0 transition-colors duration-400"
+		>
+			<div class="w-6">
+				{#if loading}
+					<span class="loading loading-spinner"></span>
+				{:else}
+					<Send size={20} />
+				{/if}
+			</div>
+			Send Message
+		</button>
 	</div>
 </form>