From 88bac001d8805267104310d9339da72380c2c99d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Nicou=C3=A9?= <contact@paulnicoue.com>
Date: Mon, 30 Jan 2023 12:34:53 +0100
Subject: [PATCH] Add honeypot to contact form

---
 components/ContactForm.vue | 11 +++++++----
 server/api/contact.post.js |  5 +++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/ContactForm.vue b/components/ContactForm.vue
index e0a9309..ba95c33 100644
--- a/components/ContactForm.vue
+++ b/components/ContactForm.vue
@@ -29,6 +29,7 @@
                 <VeeError name="message" as="p" />
             </Transition>
         </div>
+        <VeeField name="honeypot" type="hidden" />
         <button class="contact-form__button">
             <span class="contact-form__button-text">Envoyer</span>
             <svg class="contact-form__button-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
@@ -42,7 +43,7 @@
         <Transition name="validation">
             <div class="contact-form__validation" v-if="isValidated" v-click-outside="hideValidationMessage">
                 <p class="contact-form__validation-success" v-if="isSuccessful">Votre message a bien été envoyé !</p>
-                <p class="contact-form__validation-error" v-else>Oups ! Une erreur est survenue...</p>
+                <p class="contact-form__validation-error" v-else>Une erreur est survenue... Veuillez me contacter à l'adresse e-mail contact@paulnicoue.com</p>
             </div>
         </Transition>
     </VeeForm>
@@ -72,7 +73,9 @@
             .required('Veuillez saisir le sujet de votre message.'),
         message: yupString()
             .min(10, 'Votre message doit comprendre au moins ${min} caractères.')
-            .required('Veuillez saisir votre message.')
+            .required('Veuillez saisir votre message.'),
+        honeypot: yupString()
+            .max(0)
     });
 
     // Form validation
@@ -92,7 +95,7 @@
     const sendEmail = async (values) => {
         isLoading.value = true;
         try {
-            const response = await $fetch('/api/contact', {
+            await $fetch('/api/contact', {
                 method: 'post',
                 body: {
                     name: values.name,
@@ -219,7 +222,7 @@
     .validation-enter-to,
     .validation-leave-from {
         opacity: 1;
-        max-height: calc(2 * (var(--caption-font-size) * var(--line-height)));
+        max-height: calc(3 * (var(--caption-font-size) * var(--line-height)));
     }
 
     .loader-enter-from,
diff --git a/server/api/contact.post.js b/server/api/contact.post.js
index bc4b5bf..b4e42b8 100644
--- a/server/api/contact.post.js
+++ b/server/api/contact.post.js
@@ -36,8 +36,9 @@ export default defineEventHandler(async (event) => {
         console.log(response.body);
     } catch (error) {
         console.log(error.statusCode);
+    } finally {
+        // End response without providing data
+        event.node.res.end();
     }
 
-    // End response without providing data
-    event.node.res.end();
 });