Add start app i18n support

apps/start/package.json

@@ -109,6 +109,8 @@
     "flag-icons": "^7.1.0",
     "framer-motion": "^11.0.28",
     "hamburger-react": "^2.5.0",
+    "i18next": "^26.3.1",
+    "i18next-browser-languagedetector": "^8.2.1",
     "input-otp": "^1.2.4",
     "javascript-time-ago": "^2.5.9",
     "katex": "^0.16.21",
@@ -132,6 +134,7 @@
     "react-dom": "catalog:",
     "react-grid-layout": "^1.5.2",
     "react-hook-form": "^7.50.1",
+    "react-i18next": "^17.0.8",
     "react-in-viewport": "1.0.0-beta.8",
     "react-markdown": "^10.1.0",
     "react-redux": "^8.1.3",
@@ -190,4 +193,4 @@
     "web-vitals": "^4.2.4",
     "wrangler": "4.85.0"
   }
-}
+}

apps/start/src/components/auth/or.tsx

@@ -1,10 +1,14 @@
 import { cn } from '@/utils/cn';
+import { useTranslation } from 'react-i18next';
 
 export function Or({ className }: { className?: string }) {
+  const { t } = useTranslation();
   return (
     <div className={cn('row items-center gap-4', className)}>
       <div className="h-px w-full bg-def-300" />
-      <span className="text-muted-foreground text-sm font-medium px-2">OR</span>
+      <span className="text-muted-foreground text-sm font-medium px-2">
+        {t('common.or')}
+      </span>
       <div className="h-px w-full bg-def-300" />
     </div>
   );

apps/start/src/components/auth/reset-password-form.tsx

@@ -4,6 +4,7 @@ import { zResetPassword } from '@openpanel/validation';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from '@tanstack/react-router';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import type { z } from 'zod';
 import { InputWithLabel } from '../forms/input-with-label';
@@ -13,12 +14,13 @@ const validator = zResetPassword;
 type IForm = z.infer<typeof validator>;
 
 export function ResetPasswordForm({ token }: { token: string }) {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const trpc = useTRPC();
   const mutation = useMutation(
     trpc.auth.resetPassword.mutationOptions({
       onSuccess() {
-        toast.success('Password reset successfully');
+        toast.success(t('auth.password_reset_successfully'));
         navigate({
           to: '/login',
         });
@@ -45,23 +47,23 @@ export function ResetPasswordForm({ token }: { token: string }) {
     <div className="col gap-8">
       <div>
         <h1 className="text-3xl font-bold text-foreground mb-2">
-          Reset your password
+          {t('auth.reset_your_password')}
         </h1>
         <p className="text-muted-foreground">
-          Already have an account?{' '}
+          {t('auth.already_have_account')}{' '}
           <a href="/login" className="underline">
-            Sign in
+            {t('auth.sign_in')}
           </a>
         </p>
       </div>
       <form onSubmit={onSubmit} className="col gap-6">
         <InputWithLabel
-          label="New password"
-          placeholder="New password"
+          label={t('auth.new_password')}
+          placeholder={t('auth.new_password')}
           type="password"
           {...form.register('password')}
         />
-        <Button type="submit">Reset password</Button>
+        <Button type="submit">{t('auth.reset_password')}</Button>
       </form>
     </div>
   );

apps/start/src/components/auth/share-enter-password.tsx

@@ -3,6 +3,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { type ISignInShare, zSignInShare } from '@openpanel/validation';
 import { useMutation } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import { PublicPageCard } from '../public-page-card';
 import { Button } from '../ui/button';
@@ -15,14 +16,15 @@ export function ShareEnterPassword({
   shareId: string;
   shareType?: 'overview' | 'dashboard' | 'report';
 }) {
+  const { t } = useTranslation();
   const trpc = useTRPC();
   const mutation = useMutation(
     trpc.auth.signInShare.mutationOptions({
       onSuccess() {
         window.location.reload();
       },
       onError() {
-        toast.error('Incorrect password');
+        toast.error(t('auth.incorrect_password'));
       },
     }),
   );
@@ -45,24 +47,26 @@ export function ShareEnterPassword({
 
   const typeLabel =
     shareType === 'dashboard'
-      ? 'Dashboard'
+      ? t('auth.share_type_dashboard')
       : shareType === 'report'
-        ? 'Report'
-        : 'Overview';
+        ? t('auth.share_type_report')
+        : t('auth.share_type_overview');
 
   return (
     <PublicPageCard
-      title={`${typeLabel} is locked`}
-      description={`Please enter correct password to access this ${typeLabel.toLowerCase()}`}
+      title={t('auth.share_locked_title', { type: typeLabel })}
+      description={t('auth.share_password_description', {
+        type: typeLabel.toLowerCase(),
+      })}
     >
       <form onSubmit={onSubmit} className="col gap-4">
         <Input
           {...form.register('password')}
           type="password"
-          placeholder="Enter your password"
+          placeholder={t('auth.enter_password')}
           size="large"
         />
-        <Button type="submit">Get access</Button>
+        <Button type="submit">{t('auth.get_access')}</Button>
       </form>
     </PublicPageCard>
   );

apps/start/src/components/auth/sign-in-email-form.tsx

@@ -5,6 +5,7 @@ import { zSignInEmail } from '@openpanel/validation';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate, useRouter } from '@tanstack/react-router';
 import { type SubmitHandler, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import type { z } from 'zod';
 import { InputWithLabel } from '../forms/input-with-label';
@@ -17,6 +18,7 @@ export function SignInEmailForm({
   isLastUsed,
   inviteId,
 }: { isLastUsed?: boolean; inviteId?: string }) {
+  const { t } = useTranslation();
   const trpc = useTRPC();
   const mutation = useMutation(
     trpc.auth.signInEmail.mutationOptions({
@@ -25,7 +27,7 @@ export function SignInEmailForm({
           window.location.href = '/verify';
           return;
         }
-        toast.success('Successfully signed in');
+        toast.success(t('auth.successfully_signed_in'));
         window.location.href = '/';
       },
       onError(error) {
@@ -52,23 +54,23 @@ export function SignInEmailForm({
       <InputWithLabel
         {...form.register('email')}
         error={form.formState.errors.email?.message}
-        label="Email"
+        label={t('auth.email')}
         className="bg-def-100/50 border-def-300 focus:border-highlight focus:ring-highlight/20"
       />
       <InputWithLabel
         {...form.register('password')}
         error={form.formState.errors.password?.message}
-        label="Password"
+        label={t('auth.password')}
         type="password"
         className="bg-def-100/50 border-def-300 focus:border-highlight focus:ring-highlight/20"
       />
       <div className="relative">
         <Button type="submit" size="lg" className="w-full">
-          Sign in
+          {t('auth.sign_in')}
         </Button>
         {isLastUsed && (
           <span className="absolute -top-2 right-3 text-[10px] font-medium bg-highlight text-white px-1.5 py-0.5 rounded-full leading-none">
-            Used last time
+            {t('auth.used_last_time')}
           </span>
         )}
       </div>
@@ -81,7 +83,7 @@ export function SignInEmailForm({
         }
         className="text-sm text-muted-foreground hover:text-highlight hover:underline transition-colors duration-200 text-center mt-2"
       >
-        Forgot password?
+        {t('auth.forgot_password')}
       </button>
     </form>
   );

apps/start/src/components/auth/sign-in-github.tsx

@@ -1,12 +1,14 @@
 import { useTRPC } from '@/integrations/trpc/react';
 import { useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
 import { Button } from '../ui/button';
 
 export function SignInGithub({
   type,
   inviteId,
   isLastUsed,
 }: { type: 'sign-in' | 'sign-up'; inviteId?: string; isLastUsed?: boolean }) {
+  const { t } = useTranslation();
   const trpc = useTRPC();
   const mutation = useMutation(
     trpc.auth.signInOAuth.mutationOptions({
@@ -18,8 +20,8 @@ export function SignInGithub({
     }),
   );
   const title = () => {
-    if (type === 'sign-in') return 'Sign in with Github';
-    if (type === 'sign-up') return 'Sign up with Github';
+    if (type === 'sign-in') return t('auth.sign_in_with_github');
+    if (type === 'sign-up') return t('auth.sign_up_with_github');
   };
   return (
     <div className="relative">
@@ -47,7 +49,7 @@ export function SignInGithub({
       </Button>
       {isLastUsed && (
         <span className="absolute -top-2 right-3 text-[10px] font-medium bg-highlight text-white px-1.5 py-0.5 rounded-full leading-none">
-          Used last time
+          {t('auth.used_last_time')}
         </span>
       )}
     </div>

apps/start/src/components/auth/sign-in-google.tsx

@@ -1,4 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
 import { Button } from '../ui/button';
 import { useTRPC } from '@/integrations/trpc/react';
 
@@ -11,6 +12,7 @@ export function SignInGoogle({
   inviteId?: string;
   isLastUsed?: boolean;
 }) {
+  const { t } = useTranslation();
   const trpc = useTRPC();
   const mutation = useMutation(
     trpc.auth.signInOAuth.mutationOptions({
@@ -23,10 +25,10 @@ export function SignInGoogle({
   );
   const title = () => {
     if (type === 'sign-in') {
-      return 'Sign in with Google';
+      return t('auth.sign_in_with_google');
     }
     if (type === 'sign-up') {
-      return 'Sign up with Google';
+      return t('auth.sign_up_with_google');
     }
   };
   return (
@@ -67,7 +69,7 @@ export function SignInGoogle({
       </Button>
       {isLastUsed && (
         <span className="absolute -top-2 right-3 rounded-full bg-highlight px-1.5 py-0.5 font-medium text-[10px] text-white leading-none">
-          Used last time
+          {t('auth.used_last_time')}
         </span>
       )}
     </div>

apps/start/src/components/auth/sign-up-email-form.tsx

@@ -5,6 +5,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { useRouter } from '@tanstack/react-router';
 import { type SubmitHandler, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
 import type { z } from 'zod';
 import { InputWithLabel } from '../forms/input-with-label';
@@ -16,11 +17,12 @@ type IForm = z.infer<typeof validator>;
 export function SignUpEmailForm({
   inviteId,
 }: { inviteId: string | undefined }) {
+  const { t } = useTranslation();
   const trpc = useTRPC();
   const mutation = useMutation(
     trpc.auth.signUpEmail.mutationOptions({
       async onSuccess() {
-        toast.success('Successfully signed up');
+        toast.success(t('auth.successfully_signed_up'));
         window.location.href = '/';
       },
       onError(error) {
@@ -41,45 +43,45 @@ export function SignUpEmailForm({
     <form className="col gap-4" onSubmit={form.handleSubmit(onSubmit)}>
       <div className="row gap-4 w-full flex-1">
         <InputWithLabel
-          label="First name"
+          label={t('auth.first_name')}
           className="flex-1"
           type="text"
           {...form.register('firstName')}
           error={form.formState.errors.firstName?.message}
         />
         <InputWithLabel
-          label="Last name"
+          label={t('auth.last_name')}
           className="flex-1"
           type="text"
           {...form.register('lastName')}
           error={form.formState.errors.lastName?.message}
         />
       </div>
       <InputWithLabel
-        label="Email"
+        label={t('auth.email')}
         className="w-full"
         type="email"
         {...form.register('email')}
         error={form.formState.errors.email?.message}
       />
       <div className="row gap-4 w-full">
         <InputWithLabel
-          label="Password"
+          label={t('auth.password')}
           className="flex-1"
           type="password"
           {...form.register('password')}
           error={form.formState.errors.password?.message}
         />
         <InputWithLabel
-          label="Confirm password"
+          label={t('auth.confirm_password')}
           className="flex-1"
           type="password"
           {...form.register('confirmPassword')}
           error={form.formState.errors.confirmPassword?.message}
         />
       </div>
       <Button type="submit" className="w-full" size="lg">
-        Create account
+        {t('auth.create_account')}
       </Button>
     </form>
   );