Refactor and enhance localization support; update language files and improve validation messages

- Updated localization files for Arabic and Traditional Chinese (Hong Kong).
- Added Arabic language support in the i18n configuration.
- Improved validation messages in the withdrawal schema.
- Refactored Vue components to ensure consistent usage of translation functions.
- Cleaned up CSS files for better formatting and consistency.

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

@@ -4,12 +4,12 @@ import { toastController } from "@ionic/vue";
 import { logoGoogle, phonePortraitOutline } from "ionicons/icons";
 import { authClient } from "@/auth";
 
-const { t } = useI18n();
-
 const emit = defineEmits<{
   (e: "success", value: string): void;
 }>();
 
+const { t } = useI18n();
+
 const model = defineModel({ type: String, required: true });
 const inputInstance = useTemplateRef<InputInstance>("inputInstance");
 
@@ -48,7 +48,7 @@ async function submitSendVerification() {
   }
   else {
     const toast = await toastController.create({
-      message: error?.message || t('auth.common.failedSendCode'),
+      message: error?.message || t("auth.common.failedSendCode"),
       duration: 1500,
       position: "bottom",
     });

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

@@ -1,20 +1,22 @@
 <script lang='ts' setup>
 import { toastController } from "@ionic/vue";
 
-const { t } = useI18n();
-
 const props = defineProps<{
   email: string;
 }>();
+
 const emit = defineEmits<{
   (e: "success", value: string): void;
 }>();
+
+const { t } = useI18n();
+
 const model = defineModel({ type: String, required: true });
 
 async function submitSignup() {
   if (model.value.length !== 6) {
     const toast = await toastController.create({
-      message: t('auth.common.validVerificationCodeError'),
+      message: t("auth.common.validVerificationCodeError"),
       duration: 1500,
       position: "bottom",
     });

src/auth/components/signup/email/step1.vue

@@ -4,12 +4,12 @@ import { toastController } from "@ionic/vue";
 import { logoGoogle, phonePortraitOutline } from "ionicons/icons";
 import { authClient } from "@/auth";
 
-const { t } = useI18n();
-
 const emit = defineEmits<{
   (e: "success", value: string): void;
 }>();
 
+const { t } = useI18n();
+
 const model = defineModel({ type: String, required: true });
 const inputInstance = useTemplateRef<InputInstance>("inputInstance");
 
@@ -48,7 +48,7 @@ async function submitSendVerification() {
   }
   else {
     const toast = await toastController.create({
-      message: error?.message || t('auth.common.failedSendCode'),
+      message: error?.message || t("auth.common.failedSendCode"),
       duration: 1500,
       position: "bottom",
     });
@@ -63,14 +63,14 @@ async function submitSendVerification() {
   <p>{{ t('auth.signup.description') }}</p>
 
   <div>
-    <ui-input 
-      ref="inputInstance" 
-      v-model="model" 
-      type="email" 
-      :placeholder="t('auth.signup.emailPlaceholder')" 
-      :error-text="t('auth.common.validEmailError')" 
-      @ion-input="validate($event.target.value as string)" 
-      @ion-blur="markTouched" 
+    <ui-input
+      ref="inputInstance"
+      v-model="model"
+      type="email"
+      :placeholder="t('auth.signup.emailPlaceholder')"
+      :error-text="t('auth.common.validEmailError')"
+      @ion-input="validate($event.target.value as string)"
+      @ion-blur="markTouched"
     />
 
     <ion-button expand="block" class="ion-margin-top" shape="round" @click="submitSendVerification">

src/auth/components/signup/email/step2.vue

@@ -3,17 +3,18 @@ import type { PropType } from "vue";
 import type { AuthUserSignup } from "@/auth/type";
 import { toastController } from "@ionic/vue";
 
-const { t } = useI18n();
-
 const emit = defineEmits<{
   (e: "success", value: AuthUserSignup): void;
 }>();
+
+const { t } = useI18n();
+
 const model = defineModel({ type: Object as PropType<AuthUserSignup>, required: true });
 
 async function submitSignup() {
   if (model.value.verificationCode.length !== 6) {
     const toast = await toastController.create({
-      message: t('auth.common.validVerificationCodeError'),
+      message: t("auth.common.validVerificationCodeError"),
       duration: 1500,
       position: "bottom",
     });

src/auth/components/signup/verification-code.vue

@@ -36,7 +36,7 @@ async function submitSignup() {
     step.value = 1;
     await modalController.dismiss(data.user);
     const toast = await toastController.create({
-      message: t('auth.signup.emailVerified'),
+      message: t("auth.signup.emailVerified"),
       duration: 1500,
       position: "bottom",
     });
@@ -45,7 +45,7 @@ async function submitSignup() {
   }
   else {
     const toast = await toastController.create({
-      message: error?.message || t('auth.common.failedVerifyCode'),
+      message: error?.message || t("auth.common.failedVerifyCode"),
       duration: 1500,
       position: "bottom",
     });