model vue postulación #10
|
|
@ -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"],
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,6 +11,7 @@
|
|||
"dependencies": {
|
||||
"@astrojs/markdoc": "^0.15.10",
|
||||
"@astrojs/node": "^9.5.3",
|
||||
"@astrojs/vue": "^5.1.4",
|
||||
"@dotenvx/dotenvx": "^1.52.0",
|
||||
"@iconify-json/ph": "^1.2.2",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
|
|
@ -22,7 +23,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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
---
|
||||
|
|
@ -27,7 +28,7 @@ const background = props.bgImage || props.bgColor;
|
|||
|
||||
{props.hasInput && (
|
||||
<div class="flex gap-2 w-full mt-5">
|
||||
<Modal />
|
||||
<RegisterModal client:load />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,85 +0,0 @@
|
|||
---
|
||||
import Button from "./ui/Button.astro";
|
||||
import { Icon } from "astro-icon/components";
|
||||
const { id, title } = Astro.props;
|
||||
---
|
||||
|
||||
<!-- 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()">Registrate</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">Formulario de Registro</h3>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const loading = ref(false);
|
||||
const modalRef = ref(null);
|
||||
|
||||
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>
|
||||
<!-- BOTÓN ORIGINAL (MISMAS CLASES) -->
|
||||
<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
|
||||
</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"
|
||||
>
|
||||
<svg
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- MISMO BOTÓN, SOLO AGREGAMOS :disabled -->
|
||||
<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>
|
||||
|
|
@ -1,5 +1,13 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/strict",
|
||||
"include": [".astro/types.d.ts", "**/*"],
|
||||
"exclude": ["dist"]
|
||||
"include": [
|
||||
".astro/types.d.ts",
|
||||
"**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"dist"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"jsx": "preserve"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue