login/checkout
This commit is contained in:
@ -65,9 +65,11 @@
|
||||
{{ productStore.cart.total_value }}
|
||||
</p>
|
||||
</div>
|
||||
<UiButtonArrow @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))"
|
||||
class="w-full" type="fill" :arrow="true" :full="true">{{
|
||||
$t('to_checkout') }}
|
||||
<UiButtonArrow @click="() => {
|
||||
menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))
|
||||
openCart = false
|
||||
}" class="w-full" type="fill" :arrow="true" :full="true">{{
|
||||
$t('to_checkout') }}
|
||||
</UiButtonArrow>
|
||||
</div>
|
||||
<div v-else
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<div class="flex flex-col items-start gap-1">
|
||||
<p>{{ $t("country") }}</p>
|
||||
<div
|
||||
class="bg-inherit w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
|
||||
class="w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
|
||||
<div class="p-0" @click="openDrop('country')">
|
||||
<div class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
|
||||
{{ $session.currentCountryIso }} <span> <i
|
||||
@ -21,7 +21,7 @@
|
||||
</div>
|
||||
|
||||
<div v-if="dropCountry"
|
||||
class="rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 bg-inherit ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
|
||||
class="bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
|
||||
<div class="overflow-auto h-[200px] w-full">
|
||||
<p @click="() => { $session.setCountry(item.iso_code); $session.loadSession(); dropCountry = false }"
|
||||
class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
|
||||
@ -35,7 +35,7 @@
|
||||
<div class="flex flex-col items-start gap-[6px]">
|
||||
<p>{{ $t("currency") }}</p>
|
||||
<div
|
||||
class="bg-inherit w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
|
||||
class="w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
|
||||
<div class="p-0" @click="openDrop()">
|
||||
<div class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
|
||||
{{ $session.currentCurrencyIso }}<span> <i
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
|
||||
<div v-if="dropCurrency"
|
||||
class="rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 bg-inherit ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
|
||||
class="bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
|
||||
<div class="overflow-auto w-full">
|
||||
<p @click="() => { $session.setCurrency(item.iso_code); $session.loadSession(); dropCurrency = false }"
|
||||
class="w-full hover:bg-block dark:hover:bg-button pl-1 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
|
||||
|
||||
@ -18,8 +18,15 @@
|
||||
</ClientOnly>
|
||||
<div class="w-full flex items-center justify-between">
|
||||
<div class="flex items-center gap-[30px]">
|
||||
<i @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
|
||||
class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
<div>
|
||||
<i v-if="!userStore.isLogged"
|
||||
@click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
|
||||
class="uil uil-user text-[31px] cursor-pointer"></i>
|
||||
<div v-else class="py-[6px] px-3 border border-block rounded-sm">
|
||||
<!-- {{ userStore.user }} -->
|
||||
Arina Yakovenko
|
||||
</div>
|
||||
</div>
|
||||
<CartPopup />
|
||||
</div>
|
||||
<div class="flex">
|
||||
@ -74,7 +81,7 @@
|
||||
{{ item.front_menu_lang[0].name }}
|
||||
</div>
|
||||
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
|
||||
<svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
|
||||
fill="currentColor" />
|
||||
@ -119,7 +126,7 @@
|
||||
{{ item.front_menu_lang[0].name }}
|
||||
</div>
|
||||
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
|
||||
<svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
|
||||
fill="currentColor" />
|
||||
@ -179,7 +186,7 @@
|
||||
{{ item.front_menu_lang[0].name }}
|
||||
</div>
|
||||
<!-- <i class="uil uil-arrow-up-right text-[35px]"></i> -->
|
||||
<svg class="" width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg width="20" height="20" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M25.1274 1.87258C25.1274 1.3203 24.6797 0.872582 24.1274 0.872584L15.1274 0.872583C14.5751 0.872583 14.1274 1.3203 14.1274 1.87258C14.1274 2.42487 14.5751 2.87258 15.1274 2.87258L23.1274 2.87258L23.1274 10.8726C23.1274 11.4249 23.5751 11.8726 24.1274 11.8726C24.6797 11.8726 25.1274 11.4249 25.1274 10.8726L25.1274 1.87258ZM1.5 24.5L2.20711 25.2071L24.8345 2.57969L24.1274 1.87258L23.4203 1.16548L0.792893 23.7929L1.5 24.5Z"
|
||||
fill="currentColor" />
|
||||
@ -216,6 +223,7 @@ import CountryCurrencySelector from "./CountryCurrencySelector.vue";
|
||||
import LangSwitcher from "./LangSwitcher.vue";
|
||||
|
||||
const menuStore = useMenuStore();
|
||||
const userStore = useUserStore();
|
||||
const productStore = useProductStore();
|
||||
const open = ref(false);
|
||||
const colorMode = useColorMode();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<UiContainer>
|
||||
<form class="w-[85%] mx-auto" @submit.prevent="checkoutStore.sendForm">
|
||||
<div class="w-[85%] mx-auto">
|
||||
<div v-if="userStore.isLogged" class="space-25-55">
|
||||
|
||||
<div class="w-full flex items-center justify-center">
|
||||
@ -29,21 +29,21 @@
|
||||
<div class="flex flex-col gap-[30px] xl:flex-row">
|
||||
<div class="flex flex-col w-1/2 gap-[30px]">
|
||||
<CheckoutInput v-model="checkoutStore.userName" :id="1" disabled>{{ $t("first_name")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.lastName" :id="2" disabled>{{ $t("surname")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.address" :id="3" disabled>{{ $t("address")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.postCode" :id="4" disabled>{{ $t("post_code")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
</div>
|
||||
<div class="flex flex-col w-1/2 gap-[30px]">
|
||||
<CheckoutInput v-model="checkoutStore.city" :id="5" disabled>{{ $t("city")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.country" :id="6" disabled>{{ $t("country")
|
||||
}} </CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.phoneNumber" :id="7" disabled>{{ $t("phone")
|
||||
}} </CheckoutInput>
|
||||
}} </CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.accountPhoneNumber" :id="7" disabled>{{ $t("phone")
|
||||
}} </CheckoutInput>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -51,14 +51,52 @@
|
||||
<h2 class="h2-bold-bounded">
|
||||
{{ $t("Shipping details") }}
|
||||
</h2>
|
||||
<div class="relative">
|
||||
<input v-model="checkoutStore.accountPhoneNumber" type="text"
|
||||
class="border border-block placeholder:text-bg-dark dark:placeholder:text-bg-light rounded-lg px-6 h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
|
||||
<div class="relative border border-block rounded-lg px-6 h-[67px] w-full">
|
||||
<div class="flex items-center gap-[10px]">
|
||||
<div class="flex items-center gap-[25px]" v-if="!checkoutStore.vUseAccountPhoneNumber">
|
||||
<div class="flex flex-col items-start gap-[25px]">
|
||||
<div ref="dropdownIsoRef"
|
||||
class="pl-[25px] relative w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
|
||||
<div class="p-0" @click="dropIso = !dropIso">
|
||||
<div
|
||||
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
|
||||
{{ checkoutStore.selectedIso.name }} <span> <i
|
||||
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="dropIso"
|
||||
class="absolute w-full mt-2 left-0 bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
|
||||
<div class="overflow-auto h-[200px] w-full">
|
||||
<p @click="() => { checkoutStore.selectedIso = item; dropIso = false; checkoutStore.changePrefix(item.call_prefix as string) }"
|
||||
class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
|
||||
v-for="item in menuStore.countries" :key="item.iso_code">
|
||||
{{ item?.name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xl">{{ checkoutStore.currentPrefix }}</p>
|
||||
</div>
|
||||
<input
|
||||
:value="checkoutStore.vUseAccountPhoneNumber ? checkoutStore.accountPhoneNumber : checkoutStore.phoneNumber"
|
||||
:disabled="checkoutStore.vUseAccountPhoneNumber" @input="(e) => {
|
||||
if (!checkoutStore.vUseAccountPhoneNumber) {
|
||||
checkoutStore.phoneNumber = (e.target as HTMLInputElement).value;
|
||||
}
|
||||
}" type="tel" placeholder="123 xxxx xxx"
|
||||
class="placeholder:text-xl placeholder:text-gray placeholder:uppercase dark:placeholder:text-bg-light rounded-lg h-[67px] w-full focus:outline-none focus:ring-0 focus:border-0" />
|
||||
</div>
|
||||
<p v-if="checkoutStore.phoneValidation === false && !checkoutStore.vUseAccountPhoneNumber"
|
||||
class="text-red-500">Invalid phone number</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<input @change="(event: Event) => {
|
||||
const target = event.target as HTMLInputElement
|
||||
target.checked ? checkoutStore.vUseAccountPhoneNumber = true : checkoutStore.vUseAccountPhoneNumber = false
|
||||
checkoutStore.phoneValidation = null
|
||||
}" type="checkbox" class="border border-button !bg-inherit" />
|
||||
<p>{{ $t('use_account_phone') }}</p>
|
||||
</div>
|
||||
@ -119,30 +157,55 @@
|
||||
<CheckoutInput v-model="checkoutStore.vNewAddressSurname" :placeholder="$t('surname')"
|
||||
:id="11">{{ $t("surname") }}
|
||||
</CheckoutInput>
|
||||
<CheckoutInput v-model="checkoutStore.vNewAddressCountry" :placeholder="$t('country')"
|
||||
:id="12">{{ $t("country") }}
|
||||
</CheckoutInput>
|
||||
<div class="space-y-[15px]">
|
||||
<p class="pl-6">
|
||||
{{ $t("country") }}
|
||||
</p>
|
||||
<div ref="dropdownCountryRef"
|
||||
class="relative w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
|
||||
<div class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2 flex items-center justify-start"
|
||||
@click="dropCountry = !dropCountry">
|
||||
<div
|
||||
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
|
||||
{{ checkoutStore.vNewAddressCountry ?
|
||||
checkoutStore.vNewAddressCountry.name : '-' }} <span> <i
|
||||
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="dropCountry"
|
||||
class="absolute z-50 w-full mt-2 left-0 bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
|
||||
<div class="overflow-auto h-[200px] w-full">
|
||||
<p @click="() => { checkoutStore.vNewAddressCountry = item; dropCountry = false }"
|
||||
class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
|
||||
v-for="item in menuStore.countries" :key="item.iso_code">
|
||||
{{ item?.name }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CheckoutInput v-model="checkoutStore.vNewAddressCode" :placeholder="$t('post_code')"
|
||||
:id="13">{{ $t("post_code") }}
|
||||
</CheckoutInput>
|
||||
</div>
|
||||
</div>
|
||||
<form @submit.prevent="checkoutStore.uploadAddress()">
|
||||
<div>
|
||||
<span v-if="addressValidation === false" class="text-red"> {{
|
||||
$t("Remember to select a shipping address") }}</span>
|
||||
<div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
|
||||
<button type="submit"
|
||||
<button @click="checkoutStore.uploadAddress()"
|
||||
:class="['h-[40px] cursor-pointer min-w-40 rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px] bg-button text-text-dark group-hover:bg-button-hover']">
|
||||
{{ $t("add_new_address") }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
|
||||
<button
|
||||
<button @click="checkoutStore.sendForm()" :disabled="!checkoutStore.activeAddress"
|
||||
:class="['h-[40px] cursor-pointer min-w-40 rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px]', checkoutStore.activeAddress ? 'bg-button text-text-dark group-hover:bg-button-hover' : ' bg-button-disabled text-gray']">
|
||||
{{ $t("continue") }}
|
||||
</button>
|
||||
@ -158,39 +221,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</UiContainer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { LazyColorScheme } from '#components';
|
||||
import CheckoutInput from '../ui/CheckoutInput.vue';
|
||||
import { onClickOutside } from "@vueuse/core";
|
||||
|
||||
const checkoutStore = useCheckoutStore();
|
||||
const userStore = useUserStore()
|
||||
const router = useRoute();
|
||||
const menuStore = useMenuStore()
|
||||
const dropIso = ref(false)
|
||||
const dropCountry = ref(false)
|
||||
|
||||
const addressValidation = ref<null | boolean>(null);
|
||||
|
||||
watch(
|
||||
() => checkoutStore.vUseAccountPhoneNumber,
|
||||
(newValue) => {
|
||||
if (newValue == true) {
|
||||
checkoutStore.accountPhoneNumber = checkoutStore.phoneNumber;
|
||||
} else {
|
||||
checkoutStore.accountPhoneNumber = "";
|
||||
}
|
||||
}
|
||||
);
|
||||
const dropdownIsoRef = ref(null);
|
||||
const dropdownCountryRef = ref(null);
|
||||
onClickOutside(dropdownIsoRef, () => {
|
||||
dropIso.value = false
|
||||
});
|
||||
|
||||
onClickOutside(dropdownCountryRef, () => {
|
||||
dropCountry.value = false
|
||||
});
|
||||
|
||||
// fetchWithCookie(useRequestEvent(), `restricted/cart/checkout`, {
|
||||
// method: "PUT",
|
||||
// });
|
||||
|
||||
// if change needs to be applied then provide it in second argument of function below
|
||||
// $setSeoMetaFromTranslation(useStore(), {});
|
||||
|
||||
|
||||
checkoutStore.restrictedAddress()
|
||||
checkoutStore.restrictedAddressOfficial()
|
||||
checkoutStore.getCheckout()
|
||||
checkoutStore.getAddressList()
|
||||
checkoutStore.getUserData()
|
||||
</script>
|
||||
|
||||
@ -41,59 +41,37 @@
|
||||
</div>
|
||||
</UiContainer>
|
||||
|
||||
<UiContainer v-if="!userStore.vCodeVerify" class="flex py-20 sm:py-14">
|
||||
<div class="hidden xl:block rounded-2xl min-w-[50%] h-[830px]" :style="{
|
||||
<UiContainer v-if="userStore.vCodeVerify" class="flex py-20 sm:py-14">
|
||||
<div class="hidden xl:block rounded-2xl min-w-[60%] h-[830px]" :style="{
|
||||
backgroundImage: `url('/api/public/file/${component.img[0]}_l.webp')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}" />
|
||||
<div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
|
||||
<div class="space-25-55">
|
||||
<div class="space-y-[15px]">
|
||||
<div class="flex flex-wrap-reverse gap-y-4 justify-between">
|
||||
<h2 class="h2-bold-bounded">{{ $t('verify_login') }}</h2>
|
||||
<button @click="menuStore.navigateToItem()"
|
||||
class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
|
||||
$t('back_to_home') }}</button>
|
||||
</div>
|
||||
<p>{{ $t('send_code') }} <span class="text-button font-semibold">test@ma-al.com</span> {{
|
||||
<div class="flex flex-wrap-reverse gap-y-4 justify-between">
|
||||
<h2 class="h2-bold-bounded">{{ $t('verify_login') }}</h2>
|
||||
<button @click="menuStore.navigateToItem()"
|
||||
class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
|
||||
$t('back_to_home') }}</button>
|
||||
</div>
|
||||
<div class="space-y-[30px]">
|
||||
<p>{{ $t('send_code') }} <span class="text-button font-semibold">{{ userStore.email }}</span> {{
|
||||
$t('by_email') }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-[15px]">
|
||||
<p class="pl-6">{{ $t('code') }}</p>
|
||||
<input v-model="userStore.vCode" :placeholder="$t('code')" type="text"
|
||||
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
|
||||
<div class="space-y-[15px]">
|
||||
<p class="pl-6">{{ $t('code') }}</p>
|
||||
<input v-model="userStore.vCode" :placeholder="$t('code')" type="text"
|
||||
class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="py-[25px] sm:py-12 flex justify-center w-full">
|
||||
<UiButtonArrow @click="userStore.logIn()" type="fill" :arrow="true">{{ $t('confirm') }}</UiButtonArrow>
|
||||
<UiButtonArrow @click="userStore.sendFormCode(true)" type="fill" :arrow="true">{{ $t('confirm') }}
|
||||
</UiButtonArrow>
|
||||
</div>
|
||||
</div>
|
||||
</UiContainer>
|
||||
|
||||
<!-- v-if="store.vCodeVerify" -->
|
||||
<div class="max-w-[590px] w-full">
|
||||
<h3 class="mb-1 text-2xl font-bold">
|
||||
{{ $t("FrontTranslations", "Verify your login") }}
|
||||
</h3>
|
||||
<span class="text-sm font-bold text-black">
|
||||
{{ $t("FrontTranslations", "We send code to") }} <span class="text-yellow"> {{ userStore.vEmail }}</span>
|
||||
{{ $t("FrontTranslations", "by") }} e-mail.</span>
|
||||
<!-- <form
|
||||
@submit.prevent="useUserStore().sendFormCode(`${vCode}`, vEmail, useRoute().query.to ? (useRoute().query.to as string) : undefined)">
|
||||
<div class="flex flex-col w-full gap-10 mt-6">
|
||||
<BaseInput v-model="vCode" :id="1"> {{ $t("FrontTranslations", "Code") }}</BaseInput>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex">
|
||||
<BaseButtonLogin id="2" type="submit">
|
||||
{{ $t("FrontTranslations", "Confirm") }}
|
||||
</BaseButtonLogin>
|
||||
</div>
|
||||
</div>
|
||||
</form> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@ -113,7 +91,6 @@ defineProps<{
|
||||
}[]
|
||||
}
|
||||
}>();
|
||||
const store = useStore()
|
||||
const userStore = useUserStore()
|
||||
const menuStore = useMenuStore()
|
||||
</script>
|
||||
@ -9,11 +9,11 @@
|
||||
:placeholder="placeholder" :disabled="disabled"
|
||||
@input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
|
||||
@focus="$emit('focus')" @blur="$emit('blur')"
|
||||
class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2 text-button" />
|
||||
class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
|
||||
<i v-if="disabled"
|
||||
class="uil uil-lock-alt text-[22px] absolute right-6 top-1/2 -translate-y-1/2 text-gray" />
|
||||
|
||||
<div v-if="type === 'password'" class="order-2 ml-1.5 cursor-pointer" :title="!isPasswordVisible ? $t('Panel.Component.InputDefault', 'Show password') : $t('Panel.Component.InputDefault', 'Hide password')
|
||||
<div v-if="type === 'password'" class="order-2 ml-1.5 cursor-pointer" :title="!isPasswordVisible ? $t('show_password') : $t('hide_password')
|
||||
" @click="isPasswordVisible = !isPasswordVisible">
|
||||
<FaceObserver class="ml-4 text-xl leading-6" :isPasswordVisible="isPasswordVisible" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user