create resend otp route
This commit is contained in:
HAM!DREZA
@@ -1,6 +1,5 @@
|
||||
<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
|
||||
@@ -35,25 +34,98 @@
|
||||
<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">
|
||||
|
||||
<p v-if="timer > 0" class="text-[0.7vw] px-[1vw] text-primaryGreen">
|
||||
0{{ timer }} : 00
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="text-[0.7vw] px-[1vw] text-primaryGreen cursor-pointer"
|
||||
@click="options = true"
|
||||
>
|
||||
ارسال مجدد کد
|
||||
</p>
|
||||
<div
|
||||
v-show="options"
|
||||
class="absolute -bottom-[3.5vw] space-y-[0.5vw] text-[0.7vw] px-[1vw]"
|
||||
>
|
||||
<p
|
||||
class="flex items-center gap-[0.3vw] cursor-pointer"
|
||||
@click="resendSMS"
|
||||
>
|
||||
<svg
|
||||
class="h-[1.042vw] w-[1.042vw]"
|
||||
viewBox="0 0 20 21"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M14.167 17.5833H5.83366C3.33366 17.5833 1.66699 16.3333 1.66699 13.4167V7.58333C1.66699 4.66667 3.33366 3.41667 5.83366 3.41667H14.167C16.667 3.41667 18.3337 4.66667 18.3337 7.58333V13.4167C18.3337 16.3333 16.667 17.5833 14.167 17.5833Z"
|
||||
stroke="#878787"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M14.1663 8L11.558 10.0833C10.6997 10.7667 9.29134 10.7667 8.433 10.0833L5.83301 8"
|
||||
stroke="#878787"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
ارسال از طریق پیامک
|
||||
</p>
|
||||
<p
|
||||
class="flex items-center gap-[0.3vw] cursor-pointer"
|
||||
@click="resendCall"
|
||||
>
|
||||
<svg
|
||||
class="h-[1.042vw] w-[1.042vw]"
|
||||
viewBox="0 0 20 21"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M18.3077 15.7745C18.3077 16.0745 18.241 16.3829 18.0994 16.6829C17.9577 16.9829 17.7744 17.2662 17.5327 17.5329C17.1244 17.9829 16.6744 18.3079 16.166 18.5162C15.666 18.7245 15.1244 18.8329 14.541 18.8329C13.691 18.8329 12.7827 18.6329 11.8243 18.2245C10.866 17.8162 9.90768 17.2662 8.95768 16.5745C7.99935 15.8745 7.09102 15.0995 6.22435 14.2412C5.36602 13.3745 4.59102 12.4662 3.89935 11.5162C3.21602 10.5662 2.66602 9.6162 2.26602 8.67453C1.86602 7.72453 1.66602 6.8162 1.66602 5.94953C1.66602 5.38286 1.76602 4.8412 1.96602 4.3412C2.16602 3.83287 2.48268 3.3662 2.92435 2.94953C3.45768 2.42453 4.04102 2.1662 4.65768 2.1662C4.89102 2.1662 5.12435 2.2162 5.33268 2.3162C5.54935 2.4162 5.74102 2.5662 5.89102 2.78287L7.82435 5.50787C7.97435 5.7162 8.08268 5.90786 8.15768 6.0912C8.23268 6.2662 8.27435 6.4412 8.27435 6.59953C8.27435 6.79953 8.21602 6.99953 8.09935 7.1912C7.99102 7.38286 7.83268 7.58286 7.63268 7.78286L6.99935 8.4412C6.90768 8.53286 6.86602 8.6412 6.86602 8.77453C6.86602 8.8412 6.87435 8.89953 6.89102 8.9662C6.91602 9.03286 6.94102 9.08286 6.95768 9.13286C7.10768 9.40786 7.36602 9.7662 7.73268 10.1995C8.10768 10.6329 8.50768 11.0745 8.94102 11.5162C9.39102 11.9579 9.82435 12.3662 10.266 12.7412C10.6993 13.1079 11.0577 13.3579 11.341 13.5079C11.3827 13.5245 11.4327 13.5495 11.491 13.5745C11.5577 13.5995 11.6244 13.6079 11.6994 13.6079C11.841 13.6079 11.9494 13.5579 12.041 13.4662L12.6744 12.8412C12.8827 12.6329 13.0827 12.4745 13.2744 12.3745C13.466 12.2579 13.6577 12.1995 13.866 12.1995C14.0243 12.1995 14.191 12.2329 14.3744 12.3079C14.5577 12.3829 14.7494 12.4912 14.9577 12.6329L17.716 14.5912C17.9327 14.7412 18.0827 14.9162 18.1744 15.1245C18.2577 15.3329 18.3077 15.5412 18.3077 15.7745Z"
|
||||
stroke="#878787"
|
||||
stroke-width="1.5"
|
||||
stroke-miterlimit="10"
|
||||
/>
|
||||
</svg>
|
||||
ارسال از طریق تماس تلفنی
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
class="z-[100] backdrop-blur-sm bg-white/30 p-[1vw] rounded-[0.5vw] text-red-400 text-[0.7vw] absolute w-full -top-[10vw]"
|
||||
v-for="(error, index) in errors"
|
||||
:key="index"
|
||||
>
|
||||
<span>* {{ error }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { authUser } = useAuth();
|
||||
const options = ref(false);
|
||||
const code = ref(null);
|
||||
const errors = ref([]);
|
||||
const loading = ref(false);
|
||||
const phoneNumber = useState("phoneNumber");
|
||||
const timer = ref(3);
|
||||
|
||||
async function checkOtp() {
|
||||
console.log(code);
|
||||
if (code.value == null) {
|
||||
errors.value = []
|
||||
return errors.value.push("وارد کردن کد ورود الزامی است")
|
||||
errors.value = [];
|
||||
return errors.value.push("وارد کردن کد ورود الزامی است");
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true;
|
||||
errors.value = [];
|
||||
@@ -61,20 +133,70 @@ async function checkOtp() {
|
||||
method: "POST",
|
||||
body: {
|
||||
phone: phoneNumber.value,
|
||||
code: 1234,
|
||||
code: code.value,
|
||||
},
|
||||
});
|
||||
if (data.status === 'Active') {
|
||||
if (data.status === "Active") {
|
||||
authUser.value = data;
|
||||
navigateTo('/')
|
||||
navigateTo("/");
|
||||
}
|
||||
loading.value = false;
|
||||
} catch (error) {
|
||||
console.log('client err :', error);
|
||||
console.log("client err :", error);
|
||||
loading.value = false;
|
||||
return errors.value.push(error.data.data.error)
|
||||
return errors.value.push(error.data.data.error);
|
||||
}
|
||||
};
|
||||
|
||||
async function resendSMS() {
|
||||
try {
|
||||
errors.value = [];
|
||||
const data = await $fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
body: {
|
||||
phone: phoneNumber.value,
|
||||
type: "1",
|
||||
},
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function resendCall() {
|
||||
try {
|
||||
errors.value = [];
|
||||
const data = await $fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
body: {
|
||||
phone: phoneNumber.value,
|
||||
type: "2",
|
||||
},
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
const interval = setInterval(() => {
|
||||
if (timer.value > 0) {
|
||||
timer.value--;
|
||||
}
|
||||
}, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
v-model="phone"
|
||||
type="text"
|
||||
class="loginInput"
|
||||
placeholder="شماره موبایل"
|
||||
placeholder="شماره موبایل خود را وارد کنید"
|
||||
/>
|
||||
<svg
|
||||
class="h-[1.146vw] w-[1.146vw] absolute left-[1.2vw]"
|
||||
@@ -34,10 +34,10 @@
|
||||
|
||||
<button class="greenButton w-full !mt-[1.5vw] relative" @click="login">
|
||||
<span class="loader absolute" v-if="loading"></span>
|
||||
<span v-else>ورود</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">
|
||||
<div class="backdrop-blur-sm bg-white/30 p-[1vw] rounded-[0.5vw] text-red-400 text-[0.7vw] absolute w-full -top-[10vw]" v-for="(error,index) in errors" :key="index">
|
||||
<span>* {{error}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,7 +50,6 @@ const loading = ref(false);
|
||||
const FormStatus = useState("showCheckOtpForm");
|
||||
async function login() {
|
||||
if (phone.value == null) {
|
||||
console.log("شماره موبایل الزامی است")
|
||||
errors.value = []
|
||||
return errors.value.push("شماره موبایل الزامی است")
|
||||
}
|
||||
@@ -71,7 +70,6 @@ async function login() {
|
||||
phone: phone.value,
|
||||
type: "1",
|
||||
},
|
||||
|
||||
});
|
||||
if (data.message === 'کد با موفقیت ارسال شد') {
|
||||
const phoneNumber = useState('phoneNumber', () => phone.value)
|
||||
|
||||
@@ -299,9 +299,7 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
|
||||
const {authUser} = useAuth();
|
||||
|
||||
async function logout(){
|
||||
await useFetch('/api/auth/logout', {
|
||||
headers : useRequestHeaders(['cookie']),
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="h-screen flex">
|
||||
<div class="basis-1/2 flexBox">
|
||||
<div class="w-[43.75vw] text-primaryTextColor space-y-[2vw]">
|
||||
<div class="content mb-[3vw]">
|
||||
<!-- <div class="content mb-[3vw]">
|
||||
<p class="font-bold text-[1.901vw]">ورود به Shinan Learning</p>
|
||||
<p class="text-[0.938vw] leading-[1.406vw] mt-[0.5vw]">
|
||||
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
|
||||
@@ -13,7 +13,7 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<nuxt-link class="greenButton" to="/signup">ثبت نام</nuxt-link>
|
||||
<nuxt-link class="greenButton" to="/signup">ثبت نام</nuxt-link> -->
|
||||
<login-pageLogin-svg />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,7 @@ export default defineEventHandler(async (event) => {
|
||||
'Accept': 'application/json',
|
||||
}
|
||||
});
|
||||
console.log('code sended !!!!');
|
||||
return data;
|
||||
} catch (err) {
|
||||
console.log(err.data);
|
||||
|
||||
Reference in New Issue
Block a user