updated phone regex

frontend/pages/signin.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 // import
 
 import { helpers, required } from "@vuelidate/validators";
@@ -21,7 +20,7 @@ type LoginInfo = {
 // meta
 
 definePageMeta({
-    middleware: ["check-is-not-logged-in"]
+    middleware: ["check-is-not-logged-in"],
 });
 
 // state
@@ -39,13 +38,16 @@ const formRules = computed(() => {
     return {
         phone: {
             required: helpers.withMessage("Phone is required", required),
-            phoneValidator: helpers.regex(/^[1-9][0-9]{9}$/)
-        }
+            phoneValidator: helpers.withMessage(
+                "شماره تلفن وارد شده معتبر نمی باشد",
+                helpers.regex(/^[1-9][0-9]{9}$/)
+            ),
+        },
     };
 });
 
 const loginInfo = ref<LoginInfo>({
-    phone: ""
+    phone: "",
 });
 
 const formValidator$ = useVuelidate(formRules, loginInfo);
@@ -54,13 +56,17 @@ 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 } = useSignIn();
+const {
+    mutateAsync: signIn,
+    isPending: signInIsPending,
+    status: signInStatus,
+} = useSignIn();
 
 // computed
 
@@ -68,24 +74,23 @@ 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;
-
         } catch (e) {
             addToast({
                 message: "مشکلی پیش آمده",
                 options: {
-                    status: "error"
-                }
+                    status: "error",
+                },
             });
         }
     }
@@ -102,19 +107,19 @@ 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);
             updateRefreshToken(response.refresh);
-            await new Promise(resolve => setTimeout(resolve, 1000));
+            await new Promise((resolve) => setTimeout(resolve, 1000));
             await refetchAccount();
 
             addToast({
                 message: "با موفقیت وارد شدید",
                 options: {
-                    status: "success"
-                }
+                    status: "success",
+                },
             });
 
             navigateTo("/");
@@ -141,22 +146,15 @@ const resetForm = () => {
     otpCode.value = [];
     showOtp.value = false;
 };
-
 </script>
 
 <template>
-    <div class="container min-h-[700px] flex flex-col items-center justify-center">
-        <h1 class="typo-hero-2">
-            فرم ورود
-        </h1>
-        <form
-            @submit.prevent
-            class="max-w-[500px] w-full mt-12"
-        >
     <div
-                v-if="!showOtp"
-                class="flex items-center gap-2 w-full"
+        class="container min-h-[700px] flex flex-col items-center justify-center"
     >
+        <h1 class="typo-hero-2">فرم ورود</h1>
+        <form @submit.prevent class="max-w-[500px] w-full mt-12">
+            <div v-if="!showOtp" class="flex items-center gap-2 w-full">
                 <Input
                     data-testid="phone-input"
                     class="w-full"
@@ -166,20 +164,28 @@ const resetForm = () => {
                     :error="formValidator$.phone.$error"
                 >
                     <template #startItem>
-                        <span class="text-slate-500">
-                            +98
-                        </span>
+                        <span class="text-slate-500"> +98 </span>
                     </template>
                 </Input>
                 <div class="flex items-center gap-1">
-                    <Icon class="translate-y-[-1px]" name="twemoji:flag-iran" size="24" />
+                    <Icon
+                        class="translate-y-[-1px]"
+                        name="twemoji:flag-iran"
+                        size="24"
+                    />
                 </div>
             </div>
 
             <OtpInput
                 v-else
                 v-model="otpCode"
-                :status="signInStatus === 'success' ? 'success' : signInStatus === 'error' ? 'error' : 'idle'"
+                :status="
+                    signInStatus === 'success'
+                        ? 'success'
+                        : signInStatus === 'error'
+                        ? 'error'
+                        : 'idle'
+                "
                 :disabled="signInIsPending || sendOtpIsPending"
                 :autofocus="true"
                 @complete="handleLogin"
@@ -197,10 +203,7 @@ const resetForm = () => {
                 ارسال کد
             </Button>
 
-            <div
-                v-else
-                class="flex items-center w-full gap-4 mt-4"
-            >
+            <div v-else class="flex items-center w-full gap-4 mt-4">
                 <Button
                     class="rounded-full w-full mt-4"
                     type="button"
@@ -215,7 +218,11 @@ const resetForm = () => {
                     type="submit"
                     @click="resendOtp"
                     :loading="signInIsPending || sendOtpIsPending"
-                    :disabled="signInIsPending || isResendOtpBlocked || sendOtpIsPending"
+                    :disabled="
+                        signInIsPending ||
+                        isResendOtpBlocked ||
+                        sendOtpIsPending
+                    "
                 >
                     ارسال مجدد کد
                     {{ isResendOtpBlocked ? otpBlockerTimePassed : "" }}
@@ -223,13 +230,8 @@ const resetForm = () => {
             </div>
 
             <div class="flex items-center gap-2 justify-center mt-6">
-                <span>
-                    بازگشت به فروشگاه
-                </span>
-                <Icon
-                    name="ci:left-rotation"
-                    size="24"
-                />
+                <span> بازگشت به فروشگاه </span>
+                <Icon name="ci:left-rotation" size="24" />
             </div>
         </form>
     </div>