Compare commits
No commits in common. "f5f592917afc31f61f402bf65e34d885ee7febd7" and "64092ed62e6fc8faaa41cc8338e9512e84a5e5e1" have entirely different histories.
f5f592917a
...
64092ed62e
|
|
@ -23,4 +23,3 @@ pnpm-debug.log*
|
|||
.idea/
|
||||
|
||||
/generated/prisma
|
||||
/prisma/*.db
|
||||
|
|
@ -1,60 +1,28 @@
|
|||
<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);
|
||||
|
||||
if (!response.ok)
|
||||
throw new Error();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
isError.value = true;
|
||||
|
||||
setTimeout(() => {
|
||||
isError.value = false;
|
||||
}, 3500);
|
||||
|
||||
} finally {
|
||||
setTimeout(() => {
|
||||
isLoading.value = false;
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -124,59 +92,11 @@ const handleSubmit = async (e) => {
|
|||
<!-- 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' : ''
|
||||
]"
|
||||
class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
|
||||
>
|
||||
<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>
|
||||
{{ tl("footer.form.button") }}
|
||||
</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>
|
||||
Loading…
Reference in New Issue