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

Remove former ContactForm component

Browse source
This commit is contained in:
Paul Nicoué 2023-02-02 17:19:09 +01:00
parent 469c52eb97
commit 596a26537b
2 changed files with 1 additions and 241 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/ContactFormValidation.vue
View file

@ -76,7 +76,7 @@
/ auto auto;
place-content: start stretch;
place-items: start;
column-gap: 1rem;
column-gap: 2rem;
row-gap: 0.5rem;
&__button {

240
components/ContactForm_old.vue
View file

@ -1,240 +0,0 @@
<template>
<VeeForm class="contact-form" @submit="sendEmail" :validation-schema="contactFormSchema">
<div class="contact-form__name">
<label for="name">Nom</label>
<VeeField name="name" />
<Transition name="fade-in-expand-height">
<VeeError name="name" as="p" />
</Transition>
</div>
<div class="contact-form__email">
<label for="email">Adresse e-mail</label>
<VeeField name="email" />
<Transition name="fade-in-expand-height">
<VeeError name="email" as="p" />
</Transition>
</div>
<div class="contact-form__subject">
<label for="subject">Sujet</label>
<VeeField name="subject" />
<Transition name="fade-in-expand-height">
<VeeError name="subject" as="p" />
</Transition>
</div>
<div class="contact-form__message">
<label for="message">Message</label>
<VeeField name="message" as="textarea" />
<Transition name="fade-in-expand-height">
<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">
<line x1="23" y1="1" x2="10.9" y2="13.1"/>
<polygon points="23 1 15.3 23 10.9 13.1 1 8.7 23 1"/>
</svg>
</button>
<Transition name="fade-in">
<div class="contact-form__loader" aria-hidden="true" ref="loader" v-show="isLoading"></div>
</Transition>
<Transition name="fade-in-expand-height">
<div class="contact-form__validation" v-show="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>Une erreur est survenue... Veuillez me contacter à l'adresse e-mail contact@paulnicoue.com</p>
</div>
</Transition>
</VeeForm>
</template>
<script setup>
// --------------------------------------------------
// DATA
// --------------------------------------------------
// Yup schema builder
const yupObject = useNuxtApp().$yupObject;
const yupString = useNuxtApp().$yupString;
const contactFormSchema = yupObject({
name: yupString()
.min(2, 'Votre nom doit comprendre au moins ${min} caractères.')
.required('Veuillez saisir votre nom.'),
email: yupString()
.email('Veuillez saisir une adresse e-mail valide.')
.required('Veuillez saisir votre adresse e-mail.'),
subject: yupString()
.min(2, 'Le sujet de votre message doit comprendre au moins ${min} caractères.')
.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.'),
honeypot: yupString()
.max(0)
});
// Form validation
const isValidated = ref(false);
const isSuccessful = ref(undefined);
// Loader
const isLoading = ref(false);
const loader = ref();
// --------------------------------------------------
// LOGIC
// --------------------------------------------------
const sendEmail = async (values) => {
isLoading.value = true;
try {
await $fetch('/api/contact', {
method: 'post',
body: {
name: values.name,
emailAddress: values.email,
subject: values.subject,
message: values.message
}
});
isSuccessful.value = true;
} catch {
isSuccessful.value = false;
} finally {
loader.value.addEventListener('animationiteration', function hideLoader(event) {
event.currentTarget.removeEventListener('animationiteration', hideLoader);
isLoading.value = false;
isValidated.value = true;
});
}
}
const hideValidationMessage = () => isValidated.value = false;
</script>
<style lang="scss" scoped>
// --------------------------------------------------
// STYLE
// --------------------------------------------------
.contact-form {
max-width: var(--small-content-max-width);
display: grid;
grid:
'name name' auto
'email email' auto
'subject subject' auto
'message message' auto
'button loader' auto
'validation validation' auto
/ 1fr 1fr;
place-content: start;
place-items: start;
gap: 1.5rem;
&__name {
grid-area: name;
}
&__email {
grid-area: email;
}
&__subject {
grid-area: subject;
}
&__message {
grid-area: message;
}
&__name,
&__email,
&__subject,
&__message {
width: 100%;
}
&__button {
grid-area: button;
@include button-with-icon;
}
&__loader {
grid-area: loader;
place-self: center end;
width: 2.5rem;
height: 2.5rem;
border-width: 2px;
border-style: solid;
border-color: var(--accent-color) transparent;
border-radius: 50%;
animation: rotate-360 800ms ease-in-out infinite;
}
&__validation {
grid-area: validation;
&-error {
color: var(--error-color);
}
}
@media screen and (min-width: $tablet-media-query) {
grid:
'name name .' auto
'email email .' auto
'subject subject subject' auto
'message message message' auto
'button loader loader' auto
'validation validation validation' auto
/ 1fr 1fr 1fr;
}
}
// Transition components
.fade-in-expand-height {
&-enter-from,
&-leave-to {
opacity: 0;
max-height: 0;
}
&-enter-active,
&-leave-active {
transition:
opacity 600ms ease-in-out,
max-height 600ms ease-in-out;
}
&-enter-to,
&-leave-from {
max-height: calc(3 * var(--caption-font-height));
}
}
.fade-in {
&-enter-from,
&-leave-to {
opacity: 0;
}
&-enter-active,
&-leave-active {
transition: opacity 400ms ease-in-out;
}
}
</style>