feat(fullstack): Add contact form

legalconsenthub/app/pages/contact.vue

@@ -0,0 +1,110 @@
+<template>
+  <UDashboardPanel id="contact">
+    <template #header>
+      <UDashboardNavbar :title="$t('contact.title')">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div class="flex flex-col gap-6 w-full lg:max-w-4xl mx-auto p-6">
+        <!-- Introduction Card -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('contact.header') }}</h3>
+              <p class="text-sm text-muted mt-1">{{ $t('contact.description') }}</p>
+            </div>
+          </template>
+        </UCard>
+
+        <!-- Contact Form -->
+        <UCard>
+          <template #header>
+            <div>
+              <h3 class="text-lg font-semibold text-highlighted">{{ $t('contact.form.title') }}</h3>
+              <p class="text-sm text-muted mt-1">{{ $t('contact.form.description') }}</p>
+            </div>
+          </template>
+
+          <form class="space-y-4" @submit.prevent="handleSubmit">
+            <UFormField :label="$t('contact.form.subject')" required>
+              <UInput
+                v-model="subject"
+                :placeholder="$t('contact.form.subjectPlaceholder')"
+                :disabled="isSubmitting"
+                class="w-full"
+                aria-required="true"
+              />
+            </UFormField>
+
+            <UFormField :label="$t('contact.form.message')" required>
+              <ContactEditor
+                v-model="message"
+                :disabled="isSubmitting"
+                :placeholder="$t('contact.form.messagePlaceholder')"
+              />
+            </UFormField>
+
+            <UButton
+              type="submit"
+              :label="$t('contact.form.submit')"
+              :loading="isSubmitting"
+              :disabled="isSubmitting || !isFormValid"
+              color="primary"
+            />
+          </form>
+        </UCard>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+import { useContact } from '~/composables'
+
+definePageMeta({
+  layout: 'default'
+})
+
+const { t: $t } = useI18n()
+const toast = useToast()
+const { sendContactMessage } = useContact()
+
+const subject = ref('')
+const message = ref('')
+const isSubmitting = ref(false)
+
+const isFormValid = computed(() => {
+  return subject.value.trim().length > 0 && message.value.trim().length > 0
+})
+
+async function handleSubmit() {
+  if (!isFormValid.value) return
+
+  isSubmitting.value = true
+  try {
+    await sendContactMessage(subject.value, message.value)
+
+    toast.add({
+      title: $t('contact.success.title'),
+      description: $t('contact.success.description'),
+      color: 'success'
+    })
+
+    // Reset form
+    subject.value = ''
+    message.value = ''
+  } catch {
+    toast.add({
+      title: $t('common.error'),
+      description: $t('contact.error.description'),
+      color: 'error'
+    })
+  } finally {
+    isSubmitting.value = false
+  }
+}
+</script>