add. Closes #8

components/EmailForm.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="max-w-md mx-auto p-6 rounded-lg shadow-md text-gray-900">
+    <h2 class="text-2xl font-bold mb-6 text-primary text-center">Заполните контактные данные</h2>
+
+    <form @submit.prevent="onSubmit" class="space-y-4">
+      <div>
+        <label for="to" class="block text-sm font-medium text-primary mb-2"> Ваш e-mail: </label>
+        <input
+          id="to"
+          v-model="to"
+          type="email"
+          required
+          placeholder="email@example.com"
+          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-gray-900"
+        />
+      </div>
+
+      <UiButton type="submit" :disabled="isLoading" class="w-[400px]">
+        <span v-if="isLoading">Перехожу...</span>
+        <span v-else>Перейти к оплате</span>
+      </UiButton>
+    </form>
+
+    <div v-if="status" class="mt-4 p-3 rounded-md" :class="statusClass">
+      {{ status }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const mail = useMail()
+
+const to = ref('')
+const status = ref('')
+const isLoading = ref(false)
+
+const statusClass = computed(() => {
+  if (status.value.includes('Ошибка')) {
+    return 'bg-red-100 text-red-700 border border-red-200'
+  }
+  if (status.value.includes('отправлено') || status.value.includes('подписка')) {
+    return 'bg-green-100 text-green-700 border border-green-200'
+  }
+  return 'bg-blue-100 text-blue-700 border border-blue-200'
+})
+
+async function onSubmit() {
+  if (!to.value) {
+    status.value = 'Пожалуйста, введите ваш e-mail'
+    return
+  }
+
+  isLoading.value = true
+  status.value = ''
+
+  try {
+    const emailData = {
+      to: to.value,
+      subject: 'Новая подписка на рассылку книги!',
+      text: `Пользователь с e-mail: ${to.value} подписался на рассылку книги.`,
+    }
+
+    await mail.send(emailData)
+
+    status.value = 'Успешная подписка! Проверьте вашу почту.'
+
+    // Очищаем форму
+    to.value = ''
+  } catch (error) {
+    console.error('Ошибка отправки письма:', error)
+    status.value = `Ошибка отправки: ${error.message || 'Неизвестная ошибка'}`
+  } finally {
+    isLoading.value = false
+  }
+}
+</script>