HAM!DREZA
113 lines
3.3 KiB
Vue
113 lines
3.3 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="phone"
|
|
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="login">
|
|
<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 phone = ref(null);
|
|
const errors = ref([]);
|
|
const loading = ref(false);
|
|
const FormStatus = useState("showCheckOtpForm");
|
|
async function login() {
|
|
if (phone.value == null) {
|
|
console.log("شماره موبایل الزامی است")
|
|
errors.value = []
|
|
return errors.value.push("شماره موبایل الزامی است")
|
|
}
|
|
|
|
const pattern = /^(\+98|0)?9\d{9}$/;
|
|
|
|
if (!pattern.test(phone.value)) {
|
|
errors.value = []
|
|
return errors.value.push("فرمت شماره موبایل معتبر نیست")
|
|
};
|
|
|
|
try {
|
|
loading.value = true;
|
|
errors.value = [];
|
|
const data = await $fetch("/api/auth/login", {
|
|
method: "POST",
|
|
body: {
|
|
phone: phone.value,
|
|
type: "1",
|
|
},
|
|
|
|
});
|
|
if (data.message === 'کد با موفقیت ارسال شد') {
|
|
const phoneNumber = useState('phoneNumber', () => phone.value)
|
|
FormStatus.value = true;
|
|
}
|
|
loading.value = false;
|
|
} catch (error) {
|
|
// console.log('errrrr :',error.data.data.message)
|
|
// console.log('errrrr :', error.data.data.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> |