host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add honeypot to contact form

Browse source
This commit is contained in:
Paul Nicoué 2023-01-30 12:34:53 +01:00
parent d3465c6ea3
commit 88bac001d8
2 changed files with 10 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

11
components/ContactForm.vue
View file

@ -29,6 +29,7 @@
<VeeError name="message" as="p" /> <VeeError name="message" as="p" />
</Transition> </Transition>
</div> </div>
<VeeField name="honeypot" type="hidden" />
<button class="contact-form__button"> <button class="contact-form__button">
<span class="contact-form__button-text">Envoyer</span> <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"> <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"> <Transition name="validation">
<div class="contact-form__validation" v-if="isValidated" v-click-outside="hideValidationMessage"> <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-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> </div>
</Transition> </Transition>
</VeeForm> </VeeForm>
@ -72,7 +73,9 @@
.required('Veuillez saisir le sujet de votre message.'), .required('Veuillez saisir le sujet de votre message.'),
message: yupString() message: yupString()
.min(10, 'Votre message doit comprendre au moins ${min} caractères.') .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 // Form validation
@ -92,7 +95,7 @@
const sendEmail = async (values) => { const sendEmail = async (values) => {
isLoading.value = true; isLoading.value = true;
try { try {
const response = await $fetch('/api/contact', { await $fetch('/api/contact', {
method: 'post', method: 'post',
body: { body: {
name: values.name, name: values.name,
@ -219,7 +222,7 @@
.validation-enter-to, .validation-enter-to,
.validation-leave-from { .validation-leave-from {
opacity: 1; 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, .loader-enter-from,

5
server/api/contact.post.js
View file

@ -36,8 +36,9 @@ export default defineEventHandler(async (event) => {
console.log(response.body); console.log(response.body);
} catch (error) { } catch (error) {
console.log(error.statusCode); console.log(error.statusCode);
} } finally {
// End response without providing data // End response without providing data
event.node.res.end(); event.node.res.end();
}
}); });