From 596a26537bad9d1dd90d333e2975031d9fe67a42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20Nicou=C3=A9?= <contact@paulnicoue.com>
Date: Thu, 2 Feb 2023 17:19:09 +0100
Subject: [PATCH] Remove former ContactForm component

---
 components/ContactFormValidation.vue |   2 +-
 components/ContactForm_old.vue       | 240 ---------------------------
 2 files changed, 1 insertion(+), 241 deletions(-)
 delete mode 100644 components/ContactForm_old.vue

diff --git a/components/ContactFormValidation.vue b/components/ContactFormValidation.vue
index 316cf70..2c3f112 100644
--- a/components/ContactFormValidation.vue
+++ b/components/ContactFormValidation.vue
@@ -76,7 +76,7 @@
             / auto auto;
         place-content: start stretch;
         place-items: start;
-        column-gap: 1rem;
+        column-gap: 2rem;
         row-gap: 0.5rem;
 
         &__button {
diff --git a/components/ContactForm_old.vue b/components/ContactForm_old.vue
deleted file mode 100644
index 25fc700..0000000
--- a/components/ContactForm_old.vue
+++ /dev/null
@@ -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>