Refactor code structure for improved readability and maintainability

src/views/auth/login/components/email.vue

@@ -3,7 +3,7 @@ import type { GenericObject } from "vee-validate";
 import type { EmailVerifyClient } from "@/api/types";
 import { toastController } from "@ionic/vue";
 import { Field, Form } from "vee-validate";
-import * as yup from "yup";
+import { z } from "zod";
 import { authClient, emailSchema } from "@/auth";
 
 const emit = defineEmits<{
@@ -19,7 +19,7 @@ const canResend = computed(() => countdown.value === 0 && !isSending.value);
 const email = ref("");
 const emailError = ref("");
 
-let timer: number | null = null;
+let timer: NodeJS.Timeout | null = null;
 
 function startCountdown() {
   countdown.value = 60;
@@ -42,7 +42,7 @@ async function sendOtp() {
   }
 
   try {
-    await yup.string().email().validate(emailValue);
+    await z.string().email().parseAsync(emailValue);
   }
   catch {
     emailError.value = t("auth.login.validation.emailInvalid");

src/views/auth/login/components/phone-number.vue

@@ -3,10 +3,10 @@ import type { GenericObject } from "vee-validate";
 import type { PhoneNumberVerifyClient } from "@/api/types";
 import type { PhoneCountry } from "@/auth/type";
 import { toastController } from "@ionic/vue";
-import { toTypedSchema } from "@vee-validate/yup";
+import { toTypedSchema } from "@vee-validate/zod";
 import { chevronDown } from "ionicons/icons";
 import { Field, Form } from "vee-validate";
-import * as yup from "yup";
+import { z } from "zod";
 import { authClient, countries } from "@/auth";
 import Country from "./country.vue";
 
@@ -42,19 +42,18 @@ function validatePhoneNumber(phone: string): boolean {
   return currentCountry.value.pattern.test(phone);
 }
 
-const schema = computed(() => toTypedSchema(yup.object({
-  phoneNumber: yup
-    .string()
-    .required(t("auth.login.validation.phoneNumberRequired"))
-    .test(
-      "phone-format",
+const schema = computed(() => toTypedSchema(z.object({
+  phoneNumber: z
+    .string({ message: t("auth.login.validation.phoneNumberRequired") })
+    .min(1, t("auth.login.validation.phoneNumberRequired"))
+    .refine(
+      value => validatePhoneNumber(value),
       t("auth.login.validation.phoneNumberInvalid"),
-      value => !value || validatePhoneNumber(value),
     ),
-  code: yup
-    .string()
-    .required(t("auth.login.validation.codeRequired"))
-    .matches(/^\d{6}$/, t("auth.login.validation.codeInvalid")),
+  code: z
+    .string({ message: t("auth.login.validation.codeRequired") })
+    .min(1, t("auth.login.validation.codeRequired"))
+    .regex(/^\d{6}$/, t("auth.login.validation.codeInvalid")),
 })));
 
 function startCountdown() {