paulnicoue/components/ContactForm_old.vue

<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>