add change language

src/routes/auth/forgot.vue

@@ -2,16 +2,16 @@
     <div class="w-full">
         <form @submit.prevent="onFormSubmit" class="flex flex-col gap-4 w-full">
             <div class="text-sm text-gray-600 mb-2">
-                Enter your email address and we'll send you a link to reset your password.
+                {{ t('auth.forgot.description') }}
             </div>
 
             <div class="flex flex-col gap-1">
-                <label for="email" class="text-sm font-medium text-gray-700">Email address</label>
-                <AppInput id="email" v-model="form.email" type="email" placeholder="you@example.com" />
+                <label for="email" class="text-sm font-medium text-gray-700">{{ t('auth.forgot.email') }}</label>
+                <AppInput id="email" v-model="form.email" type="email" :placeholder="t('auth.forgot.placeholders.email')" />
                 <p v-if="errors.email" class="text-xs text-red-500 mt-0.5">{{ errors.email }}</p>
             </div>
 
-            <AppButton type="submit" class="w-full">Send Reset Link</AppButton>
+            <AppButton type="submit" class="w-full">{{ t('auth.forgot.sendResetLink') }}</AppButton>
 
             <div class="text-center mt-2">
                 <router-link to="/login" replace
@@ -20,7 +20,7 @@
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                             d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                     </svg>
-                    Back to Sign in
+                    {{ t('auth.forgot.backToSignIn') }}
                 </router-link>
             </div>
         </form>
@@ -31,9 +31,11 @@
 import { client } from '@/api/client';
 import { useAppToast } from '@/composables/useAppToast';
 import { reactive } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { z } from 'zod';
 
 const toast = useAppToast();
+const { t } = useI18n();
 
 const form = reactive({
     email: ''
@@ -42,7 +44,7 @@ const form = reactive({
 const errors = reactive<{ email?: string }>({});
 
 const schema = z.object({
-    email: z.string().min(1, { message: 'Email is required.' }).email({ message: 'Invalid email address.' })
+    email: z.string().min(1, { message: t('auth.forgot.errors.emailRequired') }).email({ message: t('auth.forgot.errors.emailInvalid') })
 });
 
 const onFormSubmit = () => {
@@ -59,10 +61,20 @@ const onFormSubmit = () => {
 
     client.auth.forgotPasswordCreate({ email: form.email })
         .then(() => {
-            toast.add({ severity: 'success', summary: 'Success', detail: 'Reset link sent', life: 3000 });
+            toast.add({
+                severity: 'success',
+                summary: t('auth.forgot.toast.successSummary'),
+                detail: t('auth.forgot.toast.successDetail'),
+                life: 3000,
+            });
         })
         .catch((error) => {
-            toast.add({ severity: 'error', summary: 'Error', detail: error.message || 'An error occurred', life: 3000 });
+            toast.add({
+                severity: 'error',
+                summary: t('auth.forgot.toast.errorSummary'),
+                detail: error.message || t('auth.forgot.toast.errorDetail'),
+                life: 3000,
+            });
         });
 };
 </script>