added rounded style
This commit is contained in:
Mamalizz
+34
-32
@@ -1,5 +1,4 @@
|
||||
<script lang="ts" setup>
|
||||
|
||||
// import
|
||||
|
||||
import { helpers, required } from "@vuelidate/validators";
|
||||
@@ -22,7 +21,7 @@ type LoginInfo = {
|
||||
|
||||
definePageMeta({
|
||||
layout: "none",
|
||||
middleware: ["check-is-not-logged-in"]
|
||||
middleware: ["check-is-not-logged-in"],
|
||||
});
|
||||
|
||||
// state
|
||||
@@ -43,13 +42,13 @@ const formRules = computed(() => {
|
||||
phoneValidator: helpers.withMessage(
|
||||
"شماره تلفن وارد شده معتبر نمی باشد",
|
||||
helpers.regex(/^[1-9][0-9]{9}$/)
|
||||
)
|
||||
}
|
||||
),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const loginInfo = ref<LoginInfo>({
|
||||
phone: ""
|
||||
phone: "",
|
||||
});
|
||||
|
||||
const formValidator$ = useVuelidate(formRules, loginInfo);
|
||||
@@ -58,16 +57,16 @@ const {
|
||||
timer: otpBlockerTimePassed,
|
||||
start: startOtpBlocker,
|
||||
reset: resetOtpBlocker,
|
||||
isPending: isResendOtpBlocked
|
||||
isPending: isResendOtpBlocked,
|
||||
} = useTimer({
|
||||
duration: 5000
|
||||
duration: 5000,
|
||||
});
|
||||
|
||||
const { mutateAsync: sendOtp, isPending: sendOtpIsPending } = useOtp();
|
||||
const {
|
||||
mutateAsync: signIn,
|
||||
isPending: signInIsPending,
|
||||
status: signInStatus
|
||||
status: signInStatus,
|
||||
} = useSignIn();
|
||||
|
||||
// computed
|
||||
@@ -76,14 +75,14 @@ const sendOtpHandler = async () => {
|
||||
if (!sendOtpIsPending.value) {
|
||||
try {
|
||||
await sendOtp({
|
||||
phone: `0${loginInfo.value.phone}`
|
||||
phone: `0${loginInfo.value.phone}`,
|
||||
});
|
||||
|
||||
addToast({
|
||||
message: "کد برای شما ارسال شد",
|
||||
options: {
|
||||
status: "success"
|
||||
}
|
||||
status: "success",
|
||||
},
|
||||
});
|
||||
|
||||
showOtp.value = true;
|
||||
@@ -91,8 +90,8 @@ const sendOtpHandler = async () => {
|
||||
addToast({
|
||||
message: "مشکلی پیش آمده",
|
||||
options: {
|
||||
status: "error"
|
||||
}
|
||||
status: "error",
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -109,7 +108,7 @@ const handleLogin = async () => {
|
||||
try {
|
||||
const response = await signIn({
|
||||
otp: otpCode.value.join(""),
|
||||
phone: `0${loginInfo.value.phone}`
|
||||
phone: `0${loginInfo.value.phone}`,
|
||||
});
|
||||
|
||||
updateToken(response.access);
|
||||
@@ -120,8 +119,8 @@ const handleLogin = async () => {
|
||||
addToast({
|
||||
message: "با موفقیت وارد شدید",
|
||||
options: {
|
||||
status: "success"
|
||||
}
|
||||
status: "success",
|
||||
},
|
||||
});
|
||||
|
||||
navigateTo("/");
|
||||
@@ -148,7 +147,6 @@ const resetForm = () => {
|
||||
otpCode.value = [];
|
||||
showOtp.value = false;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -157,11 +155,10 @@ const resetForm = () => {
|
||||
class="bg-[url(/img/pattern-1.png)] -z-10 size-full absolute opacity-70"
|
||||
:style="{
|
||||
backgroundSize: 150,
|
||||
mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0.3) 80%)'
|
||||
mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0.3) 80%)',
|
||||
}"
|
||||
/>
|
||||
<div class="flex items-center justify-center flex-col size-full">
|
||||
|
||||
<img
|
||||
class="aspect-square w-[300px] translate-y-[100px] animate-fade-in"
|
||||
src="/img/heymlz-seat.gif"
|
||||
@@ -169,7 +166,7 @@ const resetForm = () => {
|
||||
/>
|
||||
|
||||
<div
|
||||
class="max-w-[600px] w-full p-6 h-[400px] flex flex-col items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-xl"
|
||||
class="max-w-[600px] w-full p-6 h-[400px] flex flex-col items-center bg-white border shadow-black/10 justify-center border-slate-300 rounded-2xl"
|
||||
>
|
||||
<h1 class="typo-h-5 mt-8">شماره خود را وارد کنید</h1>
|
||||
|
||||
@@ -189,7 +186,9 @@ const resetForm = () => {
|
||||
name="twemoji:flag-iran"
|
||||
size="24"
|
||||
/>
|
||||
<span class="text-slate-500 typo-label-sm"> +98 </span>
|
||||
<span class="text-slate-500 typo-label-sm">
|
||||
+98
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</Input>
|
||||
@@ -198,12 +197,12 @@ const resetForm = () => {
|
||||
v-else
|
||||
v-model="otpCode"
|
||||
:status="
|
||||
signInStatus === 'success'
|
||||
? 'success'
|
||||
: signInStatus === 'error'
|
||||
? 'error'
|
||||
: 'idle'
|
||||
"
|
||||
signInStatus === 'success'
|
||||
? 'success'
|
||||
: signInStatus === 'error'
|
||||
? 'error'
|
||||
: 'idle'
|
||||
"
|
||||
:disabled="signInIsPending || sendOtpIsPending"
|
||||
:autofocus="true"
|
||||
@complete="handleLogin"
|
||||
@@ -237,17 +236,20 @@ const resetForm = () => {
|
||||
@click="resendOtp"
|
||||
:loading="signInIsPending || sendOtpIsPending"
|
||||
:disabled="
|
||||
signInIsPending ||
|
||||
isResendOtpBlocked ||
|
||||
sendOtpIsPending
|
||||
"
|
||||
signInIsPending ||
|
||||
isResendOtpBlocked ||
|
||||
sendOtpIsPending
|
||||
"
|
||||
>
|
||||
ارسال مجدد کد
|
||||
{{ isResendOtpBlocked ? otpBlockerTimePassed : "" }}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<NuxtLink to="/" class="flex items-center gap-2 justify-center mt-6">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="flex items-center gap-2 justify-center mt-6"
|
||||
>
|
||||
<span> بازگشت به فروشگاه </span>
|
||||
<Icon name="ci:left-rotation" size="24" />
|
||||
</NuxtLink>
|
||||
|
||||
Reference in New Issue
Block a user