add components vue footer form contact / modal register

package-lock.json

@@ -9,14 +9,15 @@
       "dependencies": {
         "@astrojs/markdoc": "^0.15.10",
         "@astrojs/node": "^9.5.3",
-        "@coreui/icons": "^3.0.1",
         "@astrojs/vue": "^5.1.4",
+        "@coreui/icons": "^3.0.1",
         "@dotenvx/dotenvx": "^1.52.0",
         "@fontsource-variable/kameron": "^5.2.8",
         "@fontsource-variable/kreon": "^5.2.8",
         "@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",
@@ -1505,6 +1506,21 @@
         "mlly": "^1.7.4"
       }
     },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",

package.json

@@ -11,14 +11,15 @@
   "dependencies": {
     "@astrojs/markdoc": "^0.15.10",
     "@astrojs/node": "^9.5.3",
-    "@coreui/icons": "^3.0.1",
     "@astrojs/vue": "^5.1.4",
+    "@coreui/icons": "^3.0.1",
     "@dotenvx/dotenvx": "^1.52.0",
     "@fontsource-variable/kameron": "^5.2.8",
     "@fontsource-variable/kreon": "^5.2.8",
     "@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",

src/components/BoxContainer.astro

@@ -28,7 +28,7 @@ const background = props.bgImage || props.bgColor;
 
     {props.hasInput && (
         <div class="flex gap-2 w-full mt-5">
-            <RegisterModal client:load />
+            <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

@@ -1,8 +1,15 @@
 <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(false);
 
 const openModal = () => {
     modalRef.value?.showModal();
@@ -38,11 +45,50 @@ const handleSubmit = async (e) => {
 </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"
     >
-  Registrate
+      {{ 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">
@@ -54,16 +100,7 @@ const handleSubmit = async (e) => {
             type="button"
             class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
           >
-        <svg
+            <Icon icon="ph:x" class="w-6 h-6" />
-            xmlns="http://www.w3.org/2000/svg"
-            class="w-6 h-6"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-        >
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-            d="M6 18L18 6M6 6l12 12" />
-        </svg>
           </button>
         </form>
 
@@ -141,3 +178,4 @@ const handleSubmit = async (e) => {
       </div>
     </dialog>
     </template>
+  </template>

src/components/section/FooterSection.astro

@@ -2,7 +2,7 @@
 import { Icon } from "astro-icon/components";
 import { Image } from "astro:assets";
 import jbp from "../../assets/DRJBP-1.webp";
-
+import FormContact from "./FormContact.vue";
 import { createTranslator, t } from '../../i18n';
 const tl = createTranslator(Astro.currentLocale);
 ---
@@ -24,71 +24,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>