From 9a1be02c6c241da80d6cdb52006deca8318e63a2 Mon Sep 17 00:00:00 2001
From: kayjaydee <killian.dalcin@gmail.com>
Date: Wed, 8 Apr 2026 18:34:38 +0200
Subject: [PATCH] feat(03-01): create ContactForm with Zod validation and
 nodemailer SMTP server route

- ContactForm.vue: UForm + Zod schema (name/email/message) + useToast feedback
- server/api/contact.post.ts: nodemailer SMTP with server-side validation + HTML escaping
- SMTP credentials in private runtimeConfig (T-03-03)
- HTML escaping prevents XSS in email body (T-03-02)
---
 app/components/ContactForm.vue | 66 ++++++++++++++++++++++++++++++++++
 server/api/contact.post.ts     | 48 +++++++++++++++++++++++++
 2 files changed, 114 insertions(+)
 create mode 100644 app/components/ContactForm.vue
 create mode 100644 server/api/contact.post.ts

diff --git a/app/components/ContactForm.vue b/app/components/ContactForm.vue
new file mode 100644
index 0000000..e2e1a05
--- /dev/null
+++ b/app/components/ContactForm.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { FormSubmitEvent } from '@nuxt/ui'
+
+const { t } = useI18n()
+const toast = useToast()
+const loading = ref(false)
+
+const schema = z.object({
+  name: z.string().min(2, t('contact.form.validation.nameMin')),
+  email: z.string().email(t('contact.form.validation.emailInvalid')),
+  message: z.string().min(10, t('contact.form.validation.messageMin')),
+})
+
+type Schema = z.output<typeof schema>
+
+const state = reactive<Partial<Schema>>({
+  name: undefined,
+  email: undefined,
+  message: undefined,
+})
+
+async function onSubmit(event: FormSubmitEvent<Schema>) {
+  loading.value = true
+  try {
+    await $fetch('/api/contact', { method: 'POST', body: event.data })
+    toast.add({
+      title: t('contact.form.success'),
+      color: 'success',
+      icon: 'i-lucide-check',
+    })
+    // Reset form
+    state.name = undefined
+    state.email = undefined
+    state.message = undefined
+  } catch {
+    toast.add({
+      title: t('contact.form.error'),
+      color: 'error',
+      icon: 'i-lucide-alert-circle',
+    })
+  } finally {
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <UForm :schema="schema" :state="state" class="flex flex-col gap-4" @submit="onSubmit">
+    <UFormField :label="t('contact.form.name')" name="name">
+      <UInput v-model="state.name" :placeholder="t('contact.form.name')" class="w-full" />
+    </UFormField>
+
+    <UFormField :label="t('contact.form.email')" name="email">
+      <UInput v-model="state.email" type="email" :placeholder="t('contact.form.email')" class="w-full" />
+    </UFormField>
+
+    <UFormField :label="t('contact.form.message')" name="message">
+      <UTextarea v-model="state.message" :rows="5" :placeholder="t('contact.form.message')" class="w-full" />
+    </UFormField>
+
+    <UButton type="submit" :loading="loading" size="lg" class="self-start">
+      {{ t('contact.form.submit') }}
+    </UButton>
+  </UForm>
+</template>
diff --git a/server/api/contact.post.ts b/server/api/contact.post.ts
new file mode 100644
index 0000000..1eec936
--- /dev/null
+++ b/server/api/contact.post.ts
@@ -0,0 +1,48 @@
+import nodemailer from 'nodemailer'
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+  const config = useRuntimeConfig(event)
+
+  // Server-side validation (T-03-01)
+  const { name, email, message } = body
+  if (!name || typeof name !== 'string' || name.length < 2 || name.length > 100) {
+    throw createError({ statusCode: 400, message: 'Invalid name' })
+  }
+  if (!email || typeof email !== 'string' || !email.includes('@') || email.length > 200) {
+    throw createError({ statusCode: 400, message: 'Invalid email' })
+  }
+  if (!message || typeof message !== 'string' || message.length < 10 || message.length > 5000) {
+    throw createError({ statusCode: 400, message: 'Invalid message' })
+  }
+
+  const transporter = nodemailer.createTransport({
+    host: config.smtpHost,
+    port: 465,
+    secure: true,
+    auth: {
+      user: config.smtpUser,
+      pass: config.smtpPass,
+    },
+  })
+
+  // Escape HTML to prevent XSS in email body (T-03-02)
+  const escapedName = name.replace(/[&<>"']/g, (c: string) => {
+    const map: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
+    return map[c] ?? c
+  })
+  const escapedMessage = message.replace(/[&<>"']/g, (c: string) => {
+    const map: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }
+    return map[c] ?? c
+  })
+
+  await transporter.sendMail({
+    from: `"Portfolio" <${config.smtpUser}>`,
+    to: config.smtpTo,
+    subject: `Contact portfolio - ${name}`,
+    text: `De: ${name} <${email}>\n\n${message}`,
+    html: `<p><strong>De:</strong> ${escapedName} &lt;${email}&gt;</p><p>${escapedMessage.replace(/\n/g, '<br>')}</p>`,
+  })
+
+  return { success: true }
+})