From 6856e4d7202d2af6e19e57acf207bebe244b197c Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 13 Mar 2025 01:38:51 +0330
Subject: [PATCH] added rounded style

---
 frontend/pages/signin.vue | 66 ++++++++++++++++++++-------------------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/frontend/pages/signin.vue b/frontend/pages/signin.vue
index f2786c8..b00e574 100644
--- a/frontend/pages/signin.vue
+++ b/frontend/pages/signin.vue
@@ -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>