cdrdpyj/src/components/section/FormContact.vue

<script setup>
import { Icon } from "@iconify/vue";
import { createTranslator } from "../../i18n";
import { ref, computed } from "vue";
const props = defineProps({
  locale: String
});

const tl = createTranslator(props.locale);
const isLoading = ref(false);
const isSuccess = ref(false);
const isError = ref(false);

const dashOffset = ref(453);

const dashStyle = computed(() => ({
  stroke: "#1ecd97",
  fill: "white",
  strokeDasharray: 453,
  strokeDashoffset: dashOffset.value,
  transition: "stroke-dashoffset 1.2s ease"
}));

const handleSubmit = async (e) => {
  const formData = new FormData(e.target);

  isLoading.value = true;
  isSuccess.value = false;
  isError.value = false;

  try {
    const response = await fetch("/api/emailInfo/send", {
      method: "POST",
      body: formData,
    });

    if (!response.ok) throw new Error();

    e.target.reset();
    isSuccess.value = true;

    setTimeout(() => {
      isSuccess.value = false;
    }, 3500);

  } catch (error) {
    console.error(error);
    isError.value = true;

    setTimeout(() => {
      isError.value = false;
    }, 3500);

  } finally {
    setTimeout(() => {
      isLoading.value = false;
    }, 2000);
  }
};
</script>

<template>
  <form
    @submit.prevent="handleSubmit"
    class="flex flex-col gap-4"
  >
    <fieldset>

      <input
        name="nombre"
        type="text"
        :placeholder="tl('footer.form.name')"
        required
        class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
      />

      <input
        name="email"
        type="email"
        placeholder="E-Mail"
        required
        class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
      />

      <textarea
        name="mensaje"
        :placeholder="tl('footer.form.mesagge')"
        rows="5"
        required
        class="bg-[#EBE5D0] w-full py-2 px-4 mb-2 text-[#303335] placeholder:text-[#303335] focus:outline-none"
      ></textarea>

    </fieldset>

    <div class="flex flex-row justify-between items-center mt-4">

      <!-- Social Icons -->
      <ul class="flex flex-row gap-2">
        <li class="border-r pr-2">
          <a href="https://x.com/CRPazYJusticia" target="_blank">
            <Icon icon="ph:x-logo-thin" class="text-3xl" />
          </a>
        </li>

        <li class="border-r pr-2">
          <a href="https://www.instagram.com/centrodelreinodepazyjusticia/" target="_blank">
            <Icon icon="ph:instagram-logo-thin" class="text-3xl" />
          </a>
        </li>

        <li class="border-r pr-2">
          <a href="https://www.facebook.com/Centrodelreinodepazyjusticia" target="_blank">
            <Icon icon="ph:facebook-logo-thin" class="text-3xl" />
          </a>
        </li>

        <li>
          <a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank">
            <Icon icon="ph:youtube-logo-thin" class="text-3xl" />
          </a>
        </li>
      </ul>

      <!-- Submit -->
      <button
        type="submit"
        :disabled="isLoading"
        class="bg-[#003421] px-6 py-2 text-sm cursor-pointer transition duration-300"
        :class="[
          isLoading ? 'opacity-70 cursor-not-allowed' : 'hover:bg-[#EBE5D0] hover:text-[#003421]',
          isError ? 'bg-red-600 text-white' : ''
        ]"
      >
        <span v-if="isLoading" class="flex items-center gap-2">
          <span class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
          Enviando...
        </span>

        <span v-else-if="isSuccess">
          Enviado ✓
        </span>

        <span v-else-if="isError">
          Error
        </span>

        <span v-else>
          {{ tl("footer.form.button") }}
        </span>
      </button>

    </div>
  </form>
</template>

<style scoped>
.kk-submit {
  background: transparent;
  border: none;
  cursor: pointer;
}

.btn-bg {
  stroke: #c8c8c8;
  fill: white;
}

.btn-color {
  stroke-width: 4;
}

.textNode {
  fill: #48727F;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}

.checkNode {
  fill: #1ecd97;
  font-size: 22px;
}
</style>