feat(i18n): add language switcher in top-right corner for multi-language support #9

web/src/features/auth/sign-in/components/logout.tsx

@@ -19,6 +19,7 @@
 
 import { IconLogout } from '@tabler/icons-react'
 import { ConfirmDialog } from '@/components/confirm-dialog'
+import { useTranslation } from 'react-i18next'
 
 interface Props {
     open: boolean
@@ -27,6 +28,7 @@ interface Props {
 }
 
 export function LogoutConfirmDialog({ open, onOpenChange, handleConfirm }: Props) {
+    const { t } = useTranslation()
     const handleLogout = () => {
         handleConfirm();
         onOpenChange(false);
@@ -44,18 +46,18 @@ export function LogoutConfirmDialog({ open, onOpenChange, handleConfirm }: Props
                         className='mr-1 inline-block stroke-destructive'
                         size={18}
                     />{' '}
-                    Log out
+                    {t('auth.logout')}
                 </span>
             }
             desc={
                 <p>
-                    Are you sure you want to log out?
+                    {t('auth.areYouSureYouWantToLogOut')}
                     <br />
-                    You will need to log in again to access your account.
+                    {t('auth.youWillNeedToLogInAgain')}
                 </p>
             }
-            confirmText='Log out'
-            cancelBtnText='Cancel'
+            confirmText={t('auth.logout')}
+            cancelBtnText={t('common.cancel')}
         />
     )
 }

web/src/features/auth/sign-in/components/user-auth-form.tsx

@@ -40,25 +40,29 @@ import { AxiosError } from 'axios'
 import { ToastAction } from '@/components/ui/toast'
 import { useLocation, useNavigate } from '@tanstack/react-router'
 import { Button } from '@/components/button'
+import { useTranslation } from 'react-i18next'
+import i18n from '@/i18n'
 
 type UserAuthFormProps = HTMLAttributes<HTMLDivElement>
 
-const formSchema = z.object({
+const getFormSchema = (t: (key: string, options?: Record<string, any>) => string) => z.object({
   username: z
     .string(),
   password: z
     .string()
-    .min(1, { message: 'Please enter your password' })
-    .min(4, { message: 'Password must be at least 4 characters long' }),
+    .min(1, { message: t('validation.pleaseEnterPassword') })
+    .min(4, { message: t('validation.passwordMinLength', { min: 4 }) }),
 });
 
 export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
   const [isLoading, setIsLoading] = useState(false)
   const navigate = useNavigate()
+  const { t } = useTranslation()
 
   const { search } = useLocation();
   const redirect = new URLSearchParams(search).get('redirect') || '/';
 
+  const formSchema = getFormSchema(t)
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -82,19 +86,20 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
         navigate({ to: redirect });
       },
       onError: (error) => {
+        const { t } = i18n
         if (error instanceof AxiosError && error.response && error.response.status === 401) {
           toast({
             variant: "destructive",
-            title: "Login Failed",
-            description: "Invalid password. Please try again.",
-            action: <ToastAction altText="Try again">Try again</ToastAction>,
+            title: t('auth.loginFailed'),
+            description: t('auth.invalidPassword'),
+            action: <ToastAction altText={t('common.tryAgain')}>{t('common.tryAgain')}</ToastAction>,
           })
         } else {
           toast({
             variant: "destructive",
-            title: "Something went wrong",
+            title: t('auth.somethingWentWrong'),
             description: (error as Error).message,
-            action: <ToastAction altText="Try again">Try again</ToastAction>,
+            action: <ToastAction altText={t('common.tryAgain')}>{t('common.tryAgain')}</ToastAction>,
           })
         }
         setIsLoading(false)
@@ -112,7 +117,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
               name='username'
               render={({ field }) => (
                 <FormItem className='space-y-1'>
-                  <FormLabel>Username</FormLabel>
+                  <FormLabel>{t('auth.username')}</FormLabel>
                   <FormControl>
                     <Input disabled {...field} value={"root"} />
                   </FormControl>
@@ -126,7 +131,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
               render={({ field }) => (
                 <FormItem className='space-y-1'>
                   <div className='flex items-center justify-between'>
-                    <FormLabel>Password</FormLabel>
+                    <FormLabel>{t('auth.password')}</FormLabel>
                   </div>
                   <FormControl>
                     <PasswordInput placeholder='********' {...field} />
@@ -136,7 +141,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
               )}
             />
             <Button className='mt-2' loading={isLoading}>
-              Login
+              {t('auth.login')}
             </Button>
           </div>
         </form>

web/src/features/auth/sign-in/index.tsx

@@ -19,8 +19,10 @@
 
 import Logo from '@/assets/logo.svg'
 import { UserAuthForm } from './components/user-auth-form'
+import { useTranslation } from 'react-i18next'
 
 export default function SignIn() {
+  const { t } = useTranslation()
   return (
     <div className='container relative flex h-svh flex-col items-center justify-center'>
       <div className='p-8 flex flex-col items-center'>
@@ -32,7 +34,7 @@ export default function SignIn() {
           alt='Bichon Logo'
         />
         <h2 className='mb-4 text-lg font-medium text-muted-foreground'>
-          Welcome to Bichon
+          {t('auth.welcome')}
         </h2>
         <div className='mx-auto flex w-full flex-col justify-center space-y-2 sm:w-[350px]'>
           <UserAuthForm />