HAM!DREZA
103 lines
2.9 KiB
Vue
103 lines
2.9 KiB
Vue
<template>
|
|
<div class="w-[25.573vw] text-secondaryTextColor space-y-6 relative">
|
|
|
|
<p class="text-[1.502vw] border-b px-[0.5vw]">کد ورود</p>
|
|
<div class="relative flex flexBox w-full pt-[1vw]">
|
|
<input
|
|
v-model="code"
|
|
type="text"
|
|
class="loginInput"
|
|
placeholder="کد ورود را وارد کنید"
|
|
/>
|
|
<svg
|
|
class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]"
|
|
viewBox="0 0 22 22"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M11.1464 9.96418C11.0547 9.95501 10.9447 9.95501 10.8439 9.96418C8.66219 9.89084 6.92969 8.10334 6.92969 5.90334C6.92969 3.65751 8.74469 1.83334 10.9997 1.83334C13.2455 1.83334 15.0697 3.65751 15.0697 5.90334C15.0605 8.10334 13.328 9.89084 11.1464 9.96418Z"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
<path
|
|
d="M6.56414 13.3467C4.34581 14.8317 4.34581 17.2517 6.56414 18.7275C9.08497 20.4142 13.2191 20.4142 15.74 18.7275C17.9583 17.2425 17.9583 14.8225 15.74 13.3467C13.2283 11.6692 9.09414 11.6692 6.56414 13.3467Z"
|
|
stroke="#878787"
|
|
stroke-width="1.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<button class="greenButton w-full !mt-[1.5vw] relative" @click="checkOtp">
|
|
<span class="loader absolute" v-if="loading"></span>
|
|
<span v-else>ورود</span>
|
|
|
|
</button>
|
|
<div class="backdrop-blur-sm bg-white/30 p-[1vw] rounded-[0.5vw] text-red-400 text-[0.7vw] absolute w-full" v-for="(error,index) in errors" :key="index">
|
|
<span>* {{error}}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const {authUser} = useAuth();
|
|
const code = ref(null);
|
|
const errors = ref([]);
|
|
const loading = ref(false);
|
|
const phoneNumber = useState("phoneNumber");
|
|
async function checkOtp() {
|
|
if (code.value == null) {
|
|
errors.value = []
|
|
return errors.value.push("وارد کردن کد ورود الزامی است")
|
|
}
|
|
try {
|
|
loading.value = true;
|
|
errors.value = [];
|
|
const data = await $fetch("/api/auth/login-step-two", {
|
|
method: "POST",
|
|
body: {
|
|
phone: phoneNumber.value,
|
|
code: 1234,
|
|
},
|
|
});
|
|
if (data.status === 'Active') {
|
|
authUser.value = data;
|
|
navigateTo('/')
|
|
}
|
|
loading.value = false;
|
|
} catch (error) {
|
|
console.log('client err :', error);
|
|
loading.value = false;
|
|
return errors.value.push(error.data.data.error)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.loader {
|
|
top: 0.65vw;
|
|
left: 12vw;
|
|
width: 1.5vw;
|
|
height: 1.5vw;
|
|
border: 0.2vw solid #fff;
|
|
border-bottom-color: transparent;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
animation: rotation 1s linear infinite;
|
|
}
|
|
|
|
@keyframes rotation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style> |