chore(locale): config i18n & multi lang for auth page (#131)

* chore(locale): config i18n & multi lang for auth page

* chore: refactor comment

---------

Co-authored-by: huynam-dana <[email protected]>

Author: huynamboz

public/locales/US.json

@@ -0,0 +1,56 @@
+{
+  "auth": {
+    "welcome_back": "Welcome Back",
+    "new_day_description": "Today is a new day. It's your day. You shape it.",
+    "sign_in_description": "Sign in to start managing your projects",
+    "register_account": "Register account",
+    "register_description": "Sign up to start managing your projects",
+    "reset_password": "Reset Password",
+    "reset_password_description": "Enter your new password to reset it",
+    "forgot_password": "Forgot password",
+    "forgot_password_description": "Enter your email to reset password",
+    "forgot_password_sent": "A password reset link has been sent to {email}. Click the link to complete the password reset. If you still haven't received the email, please hit resend below.",
+    "name": "Name",
+    "name_placeholder": "Enter name...",
+    "email": "Email",
+    "email_placeholder": "Enter email...",
+    "password": "Password",
+    "password_placeholder": "Enter password...",
+    "confirm_password": "Confirm password",
+    "confirm_password_placeholder": "Enter confirm password...",
+    "sign_in": "Sign in",
+    "sign_up": "Sign Up",
+    "submit": "Submit",
+    "resend": "Resend",
+    "come_back": "Come back",
+    "or": "Or",
+    "sign_in_with_google": "Sign in with Google",
+    "no_account": "Don't you have an account?",
+    "have_account": "If you have an account?",
+    "email_required": "Email is required",
+    "email_must_not_blank": "Email must not be blank",
+    "name_required": "Name is required",
+    "password_required": "Password is required",
+    "confirm_password_required": "Confirm password is required",
+    "password_min_length": "Password must be at least 6 characters",
+    "password_uppercase": "Password must contain uppercase letter",
+    "passwords_must_match": "Passwords must match",
+    "registration_success": "Success",
+    "registration_success_message": "Registration successful check email to confirm account",
+    "register_failed": "Register failed",
+    "confirm_success": "Success",
+    "confirm_success_message": "Registration confirmed successfully, please proceed to login",
+    "confirm_failed": "Confirm failed",
+    "reset_success": "Success",
+    "reset_success_message": "Reset password successful",
+    "reset_failed": "Failed",
+    "reset_expired": "Expired password recovery link",
+    "reset_error": "Reset failed",
+    "forgot_success": "Success",
+    "forgot_success_message": "Resend email success",
+    "forgot_failed": "Resend email failed",
+    "forgot_failed_message": "Send forgot password error",
+    "resend_failed": "Failed",
+    "resend_failed_message": "Resend email failed"
+  }
+}

public/locales/VN.json

@@ -0,0 +1,56 @@
+{
+  "auth": {
+    "welcome_back": "Chào Mừng Trở Lại",
+    "new_day_description": "Hôm nay là một ngày mới. Đó là ngày của bạn. Bạn tạo nên nó.",
+    "sign_in_description": "Đăng nhập để bắt đầu quản lý dự án của bạn",
+    "register_account": "Đăng ký tài khoản",
+    "register_description": "Đăng ký để bắt đầu quản lý dự án của bạn",
+    "reset_password": "Đặt Lại Mật Khẩu",
+    "reset_password_description": "Nhập mật khẩu mới của bạn để đặt lại",
+    "forgot_password": "Quên mật khẩu",
+    "forgot_password_description": "Nhập email của bạn để đặt lại mật khẩu",
+    "forgot_password_sent": "Liên kết đặt lại mật khẩu đã được gửi đến {email}. Nhấp vào liên kết để hoàn tất việc đặt lại mật khẩu. Nếu bạn vẫn chưa nhận được email, vui lòng nhấn gửi lại bên dưới.",
+    "name": "Tên",
+    "name_placeholder": "Nhập tên...",
+    "email": "Email",
+    "email_placeholder": "Nhập email...",
+    "password": "Mật khẩu",
+    "password_placeholder": "Nhập mật khẩu...",
+    "confirm_password": "Xác nhận mật khẩu",
+    "confirm_password_placeholder": "Nhập lại mật khẩu...",
+    "sign_in": "Đăng nhập",
+    "sign_up": "Đăng ký",
+    "submit": "Gửi",
+    "resend": "Gửi lại",
+    "come_back": "Quay lại",
+    "or": "Hoặc",
+    "sign_in_with_google": "Đăng nhập với Google",
+    "no_account": "Bạn chưa có tài khoản?",
+    "have_account": "Bạn đã có tài khoản?",
+    "email_required": "Email là bắt buộc",
+    "email_must_not_blank": "Email không được để trống",
+    "name_required": "Tên là bắt buộc",
+    "password_required": "Mật khẩu là bắt buộc",
+    "confirm_password_required": "Xác nhận mật khẩu là bắt buộc",
+    "password_min_length": "Mật khẩu phải có ít nhất 6 ký tự",
+    "password_uppercase": "Mật khẩu phải chứa chữ hoa",
+    "passwords_must_match": "Mật khẩu phải khớp nhau",
+    "registration_success": "Thành công",
+    "registration_success_message": "Đăng ký thành công, kiểm tra email để xác nhận tài khoản",
+    "register_failed": "Đăng ký thất bại",
+    "confirm_success": "Thành công",
+    "confirm_success_message": "Xác nhận đăng ký thành công, vui lòng tiến hành đăng nhập",
+    "confirm_failed": "Xác nhận thất bại",
+    "reset_success": "Thành công",
+    "reset_success_message": "Đặt lại mật khẩu thành công",
+    "reset_failed": "Thất bại",
+    "reset_expired": "Liên kết khôi phục mật khẩu đã hết hạn",
+    "reset_error": "Đặt lại mật khẩu thất bại",
+    "forgot_success": "Thành công",
+    "forgot_success_message": "Gửi email thành công",
+    "forgot_failed": "Gửi email thất bại",
+    "forgot_failed_message": "Lỗi gửi email quên mật khẩu",
+    "resend_failed": "Thất bại",
+    "resend_failed_message": "Gửi lại email thất bại"
+  }
+}

public/locales/en.json

@@ -5,15 +5,18 @@ import { useForm } from 'vee-validate'
 import * as yup from 'yup'
 import { useAuthStore } from '@/stores/auth'
 import { googleTokenLogin } from 'vue3-google-login'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 const { handleSubmit } = useForm({
   validationSchema: yup.object({
-    email: yup.string().email().required('Email is required'),
+    email: yup.string().email().required(t('auth.email_required')),
     password: yup
       .string()
-      .required('Password is required')
-      .min(6, 'Password must be at least 6 characters')
-      .matches(/[A-Z]/, 'Password must contain uppercase letter'),
+      .required(t('auth.password_required'))
+      .min(6, t('auth.password_min_length'))
+      .matches(/[A-Z]/, t('auth.password_uppercase')),
   }),
 })
 
@@ -40,28 +43,28 @@ const loginGoogle = () => {
           @submit="onSubmit"
         >
           <div class="flex items-center gap-0.5 mb-4">
-            <h1 class="text-[344054] text-lg font-semibold mt-3">Welcome Back</h1>
+            <h1 class="text-[344054] text-lg font-semibold mt-3">{{ $t('auth.welcome_back') }}</h1>
           </div>
           <div>
-            <h2 class="mt-1 text-[#667085]">Today is a new day. It's your day. You shape it.</h2>
-            <h2 class="mt-1 text-[#667085]">Sign in to start managing your projects</h2>
+            <h2 class="mt-1 text-[#667085]">{{ $t('auth.new_day_description') }}</h2>
+            <h2 class="mt-1 text-[#667085]">{{ $t('auth.sign_in_description') }}</h2>
           </div>
           <div class="mt-6">
             <div class="form-data">
-              <label for="email">Email</label>
+              <label for="email">{{ $t('auth.email') }}</label>
               <InputValidation
                 id="email"
-                placeholder="Enter email..."
+                :placeholder="$t('auth.email_placeholder')"
                 type="email"
                 name="email"
                 class="h-10 mt-1 bg-slate-50 border-slate-200 outline-none"
               />
             </div>
             <div class="form-data mt-3">
-              <label for="password">Password</label>
+              <label for="password">{{ $t('auth.password') }}</label>
               <InputValidation
                 id="password"
-                placeholder="Enter password..."
+                :placeholder="$t('auth.password_placeholder')"
                 type="password"
                 name="password"
                 class="h-10 mt-1 bg-slate-50 border-slate-200 outline-none"
@@ -73,7 +76,7 @@ const loginGoogle = () => {
               class="text-[#0921D9] text-xs font-normal"
               to="/password/forgot"
             >
-              Forgot Password?
+              {{ $t('auth.forgot_password') }}
             </RouterLink>
           </div>
           <Button
@@ -84,11 +87,11 @@ const loginGoogle = () => {
               v-if="isLoading"
               class="i-svg-spinners-ring-resize"
             ></span>
-            Sign in
+            {{ $t('auth.sign_in') }}
           </Button>
           <div class="flex items-center gap-2 w-full mt-8">
             <span class="h-px bg-slate-200 w-full"></span>
-            <p class="text-base">Or</p>
+            <p class="text-base">{{ $t('auth.or') }}</p>
             <span class="h-px bg-slate-200 w-full"></span>
           </div>
         </form>
@@ -102,16 +105,16 @@ const loginGoogle = () => {
             src="@/assets/img/google-logo.png"
             alt=""
           />
-          Sign in with Google
+          {{ $t('auth.sign_in_with_google') }}
         </Button>
 
         <div class="flex justify-center mt-6">
-          <p>Don't you have an account?</p>
+          <p>{{ $t('auth.no_account') }}</p>
           <RouterLink
             class="ml-[6px] text-[#0921D9] font-normal"
             to="/register"
           >
-            Sign up
+            {{ $t('auth.sign_up') }}
           </RouterLink>
         </div>
       </div>

public/locales/vi.json

@@ -6,7 +6,9 @@ import { Button } from '@/components/ui/button'
 import { useForm } from 'vee-validate'
 import * as yup from 'yup'
 import { showToast } from '@/utils/toast'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const errorEmail = ref()
 const isForgot = ref(false)
 const isCountdown = ref(false)
@@ -17,21 +19,21 @@ const isLoading = ref(false)
 const handleForgot = async () => {
   try {
     if (!email.value) {
-      errorEmail.value = 'Email must not be blank'
+      errorEmail.value = t('auth.email_must_not_blank')
       return
     }
     await forgotPasswordApi(email.value)
     isLoading.value = true
     showToast({
-      title: 'Success',
-      description: 'Resend email success',
+      title: t('auth.forgot_success'),
+      description: t('auth.forgot_success_message'),
       variant: 'default',
     })
     isForgot.value = true
   } catch (error) {
     showToast({
-      title: 'Resend email failed',
-      description: `${((error as any).data?.error?.message as string) || 'Send forgot password error'}`,
+      title: t('auth.forgot_failed'),
+      description: `${((error as any).data?.error?.message as string) || t('auth.forgot_failed_message')}`,
       variant: 'destructive',
     })
   } finally {
@@ -43,8 +45,8 @@ const handleResentEmail = async (time: number) => {
   try {
     await forgotPasswordApi(email.value)
     showToast({
-      title: 'Success',
-      description: 'Resend email success',
+      title: t('auth.forgot_success'),
+      description: t('auth.forgot_success_message'),
       variant: 'default',
     })
     isForgot.value = true
@@ -53,8 +55,8 @@ const handleResentEmail = async (time: number) => {
     startTimer()
   } catch (error) {
     showToast({
-      title: 'Failed',
-      description: 'Resend email failed',
+      title: t('auth.resend_failed'),
+      description: t('auth.resend_failed_message'),
       variant: 'default',
     })
   }
@@ -83,7 +85,7 @@ const checkSecond = (sec: number) => {
 
 const { errors, defineField } = useForm({
   validationSchema: yup.object({
-    email: yup.string().email().required('Email is required'),
+    email: yup.string().email().required(t('auth.email_required')),
   }),
 })
 
@@ -102,22 +104,24 @@ const [email, emailAttrs] = defineField('email')
           <h2 class="text-lg font-semibold">Quizzfly</h2>
         </div>
         <div class="flex flex-col items-start gap-2 mb-2 mt-6">
-          <h1 class="text-[344054] text-lg font-semibold">Forgot password</h1>
-          <h1
+          <h1 class="text-[344054] text-lg font-semibold">{{ $t('auth.forgot_password') }}</h1>
+          <i18n-t
             v-if="isForgot"
+            keypath="auth.forgot_password_sent"
+            tag="h1"
             class="text-[344054] text-sm font-medium"
           >
-            A password reset link has been sent to <span class="text-primary">{{ email }}</span
-            >. Click the link to complete the password reset. If you still haven't received the
-            email, please hit resend below.
-          </h1>
+            <template #email>
+              <span class="text-primary">{{ email }}</span>
+            </template>
+          </i18n-t>
         </div>
         <div>
           <h2
             v-if="!isForgot"
             class="mt-1 text-[#667085]"
           >
-            Enter your email to reset password
+            {{ $t('auth.forgot_password_description') }}
           </h2>
         </div>
         <div class="mt-6">
@@ -126,12 +130,12 @@ const [email, emailAttrs] = defineField('email')
             class="form-data"
             @submit.prevent="handleForgot"
           >
-            <label for="email">Email</label>
+            <label for="email">{{ $t('auth.email') }}</label>
             <Input
               v-if="!isForgot"
               id="email"
               v-model="email"
-              placeholder="Enter email..."
+              :placeholder="$t('auth.email_placeholder')"
               v-bind="emailAttrs"
               :invalid="errors.email"
               type="email"
@@ -150,7 +154,7 @@ const [email, emailAttrs] = defineField('email')
                 v-if="isLoading"
                 class="i-svg-spinners-ring-resize"
               ></span>
-              Submit
+              {{ $t('auth.submit') }}
             </Button>
           </form>
           <Button
@@ -160,7 +164,7 @@ const [email, emailAttrs] = defineField('email')
             :disable-cache="isCountdown"
             @click="handleResentEmail(5)"
           >
-            Resend
+            {{ $t('auth.resend') }}
           </Button>
           <div class="flex items-center justify-center w-full">
             <div
@@ -178,7 +182,7 @@ const [email, emailAttrs] = defineField('email')
             class="text-[#0921D9] text-xs font-semibold"
             to="/login"
           >
-            Come back
+            {{ $t('auth.come_back') }}
           </RouterLink>
         </div>
       </div>