Compare commits
No commits in common. "f5f592917afc31f61f402bf65e34d885ee7febd7" and "64092ed62e6fc8faaa41cc8338e9512e84a5e5e1" have entirely different histories.
f5f592917a
...
64092ed62e
|
|
@ -23,4 +23,3 @@ pnpm-debug.log*
|
||||||
.idea/
|
.idea/
|
||||||
|
|
||||||
/generated/prisma
|
/generated/prisma
|
||||||
/prisma/*.db
|
|
||||||
|
|
@ -1,60 +1,28 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Icon } from "@iconify/vue";
|
import { Icon } from "@iconify/vue";
|
||||||
import { createTranslator } from "../../i18n";
|
import { createTranslator } from "../../i18n";
|
||||||
import { ref, computed } from "vue";
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
locale: String
|
locale: String
|
||||||
});
|
});
|
||||||
|
|
||||||
const tl = createTranslator(props.locale);
|
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 handleSubmit = async (e) => {
|
||||||
const formData = new FormData(e.target);
|
const formData = new FormData(e.target);
|
||||||
|
|
||||||
isLoading.value = true;
|
|
||||||
isSuccess.value = false;
|
|
||||||
isError.value = false;
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await fetch("/api/emailInfo/send", {
|
const response = await fetch("/api/emailInfo/send", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
body: formData,
|
body: formData,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!response.ok) throw new Error();
|
|
||||||
|
|
||||||
e.target.reset();
|
e.target.reset();
|
||||||
isSuccess.value = true;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
isSuccess.value = false;
|
|
||||||
}, 3500);
|
|
||||||
|
|
||||||
|
if (!response.ok)
|
||||||
|
throw new Error();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
isError.value = true;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
isError.value = false;
|
|
||||||
}, 3500);
|
|
||||||
|
|
||||||
} finally {
|
|
||||||
setTimeout(() => {
|
|
||||||
isLoading.value = false;
|
|
||||||
}, 2000);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -124,59 +92,11 @@ const handleSubmit = async (e) => {
|
||||||
<!-- Submit -->
|
<!-- Submit -->
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
:disabled="isLoading"
|
class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
|
||||||
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">
|
{{ tl("footer.form.button") }}
|
||||||
<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>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</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