111 lines
3.0 KiB
Vue
111 lines
3.0 KiB
Vue
<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>
|