Merge pull request 'model vue postulación' (#10) from status-postulacion into main

Reviewed-on: #10

astro.config.mjs

@@ -6,6 +6,8 @@ import markdoc from "@astrojs/markdoc";
 import icon from "astro-icon";
 import node from "@astrojs/node";
 
+import vue from "@astrojs/vue";
+
 // https://astro.build/config
 export default defineConfig({
   vite: {
@@ -14,7 +16,7 @@ export default defineConfig({
 
   //base: '/mockup/',
 
-  integrations: [markdoc(), icon()],
+  integrations: [markdoc(), icon(), vue()],
 
   i18n: {
     locales: ["es", "en", "fr", "he", "uk", "pt-br"],

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@astrojs/markdoc": "^0.15.10",
     "@astrojs/node": "^9.5.3",
+    "@astrojs/vue": "^5.1.4",
     "@coreui/icons": "^3.0.1",
     "@dotenvx/dotenvx": "^1.52.0",
     "@fontsource-variable/kameron": "^5.2.8",
@@ -18,6 +19,7 @@
     "@fontsource-variable/rokkitt": "^5.2.8",
     "@fontsource/poppins": "^5.2.7",
     "@iconify-json/ph": "^1.2.2",
+    "@iconify/vue": "^5.0.0",
     "@tailwindcss/vite": "^4.1.18",
     "@unpic/astro": "^1.0.2",
     "astro": "^5.17.1",
@@ -27,7 +29,8 @@
     "dayjs": "^1.11.19",
     "googleapis": "^171.4.0",
     "swiper": "^12.1.0",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.1.18",
+    "vue": "^3.5.28"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.19",

src/components/BoxContainer.astro

@@ -2,7 +2,8 @@
 const { props } = Astro.props;
 import { Icon } from "astro-icon/components";
 import Button from "./ui/Button.astro";
-import Modal from "./Modal.astro";
+import RegisterModal from "../components/RegisterModal.vue";
+
 const background = props.bgImage || props.bgColor;
 
 ---
@@ -26,8 +27,8 @@ const background = props.bgImage || props.bgColor;
     )}
 
     {props.hasInput && (
-        <div class="flex gap-2 w-full mt-5" title={props.buttonLabel}>
+        <div class="flex gap-2 w-full mt-5">
-           <Modal />
+            <RegisterModal client:load locale={Astro.currentLocale} />
         </div>
     )}
     </div>

src/components/Modal.astro

@@ -1,89 +0,0 @@
----
-import Button from "./ui/Button.astro";
-import { Icon } from "astro-icon/components";
-const { id, title } = Astro.props;
-
-import { createTranslator, t } from '../i18n';
-const tl = createTranslator(Astro.currentLocale);
----
-
-<!-- Open the modal using ID.showModal() method -->
-<button class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg" onclick="my_modal_5.showModal()">{tl("info.register")}</button>
-<dialog id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
-  <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
-    <form method="dialog">
-            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"><Icon name="ph:x" class="text-2xl" /></button>
-    </form>
-    <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center uppercase">{tl("info.modal.title")}</h3>
-    <p class="text-lg font-primary text-center mt-10">{tl("info.modal.text")}</p>
-    <!-- <div class="form py-4 mt-6 ">
-
-        <form id="voluteenFrom"
-            action="/api/emailPostulacion/send"
-            method="post"
-            class="flex flex-col gap-2 place-items-center">
-
-            <label class="input rounded-none bg-white">
-                <span>Nombres <span class="text-error">*</span></span>
-                <input name="nombres" type="text" placeholder="Nombres"
-                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-                    required />
-            </label>
-
-            <label class="input rounded-none bg-white">
-                <span>Apellidos <span class="text-error">*</span></span>
-                <input name="apellidos" type="text" placeholder="Apellidos"
-                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-                    required />
-            </label>
-
-            <label class="input rounded-none bg-white">
-                <span>País</span>
-                <input name="pais" type="text" placeholder="Pais"
-                    class="w-full max-w-xs rounded-none" />
-            </label>
-
-            <label class="input rounded-none bg-white">
-                <span>Lugar</span>
-                <input name="lugar" type="text" placeholder="Lugar"
-                    class="w-full max-w-xs rounded-none" />
-            </label>
-
-            <label class="input rounded-none bg-white">
-                <span>Dirección</span>
-                <input name="direccion" type="text" placeholder="Dirección"
-                    class="w-full max-w-xs rounded-none" />
-            </label>
-
-            <label class="input rounded-none bg-white">
-                <span>Teléfono <span class="text-error">*</span></span>
-                <input name="telefono" type="text" placeholder="Teléfono"
-                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-                    required />
-            </label>
-
-            <label class="input validator rounded-none bg-white">
-                <span>Email <span class="text-error">*</span></span>
-                <input name="email" type="email"
-                    placeholder="Ingresa Correo Electrónico"
-                    class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
-                    required />
-            </label>
-
-            <button type="submit"
-                class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
-                Enviar
-            </button>
-
-        </form>
-
-
-    </div> -->
-  </div>
-</dialog>
-
-<script>
-    
-
-
-</script>

src/components/RegisterModal.vue

@@ -0,0 +1,181 @@
+<script setup>
+import { ref} from "vue";
+import { Icon } from '@iconify/vue'
+const props = defineProps({
+  locale: String
+})
+import { createTranslator, t } from "../i18n";
+const tl = createTranslator(props.locale);
+
+const loading = ref(false);
+const modalRef = ref(null);
+const isFormPendiente = ref(true);
+
+const openModal = () => {
+    modalRef.value?.showModal();
+};
+
+const closeModal = () => {
+    modalRef.value?.close();
+};
+
+const handleSubmit = async (e) => {
+  e.preventDefault();
+
+  loading.value = true;
+  
+  const formData = new FormData(e.target);
+
+  try {
+    const response = await fetch("/api/emailPostulacion/send", {
+      method: "POST",
+      body: formData,
+    });
+
+    if (!response.ok) throw new Error();
+
+  } catch (error) {
+    console.error(error);
+  } finally {
+    e.target.reset();
+    loading.value = false;
+    closeModal();
+  }
+};
+</script>
+
+<template>
+  <template v-if="isFormPendiente">
+
+    <button
+      @click="openModal"
+      class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
+    >
+      {{ tl("info.register") }}
+    </button>
+
+
+    <dialog
+      ref="modalRef"
+      class="modal modal-bottom sm:modal-middle p-8"
+    >
+      <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
+
+        <!-- Botón cerrar -->
+        <button
+          type="button"
+          @click="closeModal"
+          class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+        >
+          <Icon icon="ph:x" class="text-2xl" />
+        </button>
+
+        <!-- Título -->
+        <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center uppercase">
+          {{ tl("info.modal.title") }}
+        </h3>
+
+        <!-- Texto -->
+        <p class="text-lg font-primary text-center mt-10">
+          {{ tl("info.modal.text") }}
+        </p>
+
+      </div>
+    </dialog>
+  </template>
+  <template v-else>
+    <button
+    @click="openModal"
+    class="btn rounded-none p-7 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase text-lg"
+  >
+    {{ tl("info.register") }}
+  </button>
+
+    <dialog ref="modalRef" id="my_modal_5" class="modal modal-bottom sm:modal-middle p-8">
+      <div class="modal-box bg-[#EBE6D2] text-[#22523F] rounded-none p-8">
+
+        <form method="dialog">
+          <button
+            v-on:click="closeModal"
+            type="button"
+            class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+          >
+            <Icon icon="ph:x" class="w-6 h-6" />
+          </button>
+        </form>
+
+        <h3 class="text-lg font-bold lg:text-2xl font-secondary text-center">
+          Formulario de Registro
+        </h3>
+
+        <div class="form py-4 mt-6 ">
+
+          <form
+            id="voluteenFrom"
+            action="/api/emailPostulacion/send"
+            method="post"
+            @submit="handleSubmit"
+            class="flex flex-col gap-2 place-items-center">
+
+            <label class="input rounded-none bg-white">
+              <span>Nombres <span class="text-error">*</span></span>
+              <input name="nombres" type="text" placeholder="Nombres"
+                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+                required />
+            </label>
+
+            <label class="input rounded-none bg-white">
+              <span>Apellidos <span class="text-error">*</span></span>
+              <input name="apellidos" type="text" placeholder="Apellidos"
+                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+                required />
+            </label>
+
+            <label class="input rounded-none bg-white">
+              <span>País</span>
+              <input name="pais" type="text" placeholder="Pais"
+                class="w-full max-w-xs rounded-none" />
+            </label>
+
+            <label class="input rounded-none bg-white">
+              <span>Lugar</span>
+              <input name="lugar" type="text" placeholder="Lugar"
+                class="w-full max-w-xs rounded-none" />
+            </label>
+
+            <label class="input rounded-none bg-white">
+              <span>Dirección</span>
+              <input name="direccion" type="text" placeholder="Dirección"
+                class="w-full max-w-xs rounded-none" />
+            </label>
+
+            <label class="input rounded-none bg-white">
+              <span>Teléfono <span class="text-error">*</span></span>
+              <input name="telefono" type="text" placeholder="Teléfono"
+                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+                required />
+            </label>
+
+            <label class="input validator rounded-none bg-white">
+              <span>Email <span class="text-error">*</span></span>
+              <input name="email" type="email"
+                placeholder="Ingresa Correo Electrónico"
+                class="w-full max-w-xs rounded-none invalid:border-error focus:invalid:border-error"
+                required />
+            </label>
+
+            <button
+              type="submit"
+              :disabled="loading"
+              class="btn mt-4 bg-[#22523F] text-[#EBE6D2] border-0 hover:bg-[#EBE6D2]/90 hover:text-tertiary uppercase rounded-none">
+
+              {{ loading ? "Enviando..." : "Enviar" }}
+
+            </button>
+          </form>
+
+        </div>
+      </div>
+    </dialog>
+    </template>
+  </template>

src/components/section/FooterSection.astro

@@ -1,7 +1,8 @@
 ---
 import { Icon } from "astro-icon/components";
 import { Image } from "astro:assets";
-import jbp from "@assets/DRJBP-1.webp";
+import jbp from "../../assets/DRJBP-1.webp";
+import FormContact from "./FormContact.vue";
 
 import { createTranslator, t } from '../../i18n';
 const tl = createTranslator(Astro.currentLocale);
@@ -24,71 +25,7 @@ const tl = createTranslator(Astro.currentLocale);
 
       <p class="text-lg font-light mb-10 break-words" set:html={tl("footer.text2")}></p>
 
-      <!-- FORMULARIO -->
+      <FormContact client:load locale ={Astro.currentLocale}/>
-      <form method="POST" action="/api/emailInfo/send" 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">
-
-          <ul class="flex flex-row gap-2">
-            <li class="border-r pr-2">
-              <a href="https://x.com/CRPazYJusticia" target="_blank">
-                <Icon name="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 name="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 name="ph:facebook-logo-thin" class="text-3xl" />
-              </a>
-            </li>
-            <li>
-              <a href="https://www.youtube.com/@CentrodelReinodePazyJusticia" target="_blank">
-                <Icon name="ph:youtube-logo-thin" class="text-3xl" />
-              </a>
-            </li>
-          </ul>
-
-          <button
-            type="submit"
-            class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
-          >
-            {tl("footer.form.button")}
-          </button>
-
-        </div>
-      </form>
       
     </div>
 

src/components/section/FormContact.vue

@@ -0,0 +1,102 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { createTranslator } from "../../i18n";
+
+const props = defineProps({
+  locale: String
+});
+
+const tl = createTranslator(props.locale);
+
+const handleSubmit = async (e) => {
+  const formData = new FormData(e.target);
+
+  try {
+    const response = await fetch("/api/emailInfo/send", {
+      method: "POST",
+      body: formData,
+    });
+
+    e.target.reset();
+    
+    if (!response.ok)
+        throw new Error();
+  } catch (error) {
+    console.error(error);
+  }
+};
+</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"
+        class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
+      >
+        {{ tl("footer.form.button") }}
+      </button>
+
+    </div>
+  </form>
+</template>