databayt · abdout · Apr 25, 2026
diff --git a/src/components/auth/join/form.tsx b/src/components/auth/join/form.tsx
@@ -26,10 +26,13 @@ import { register } from "./action";
 import { FormError } from "../error/form-error";
 import { FormSuccess } from "../form-success";
 import { Social } from "../social";
+import { useTranslations } from "@/lib/use-translations";
+
 export const RegisterForm = ({
   className,
   ...props
 }: React.ComponentPropsWithoutRef<"div">) => {
+  const { t } = useTranslations();
   const [error, setError] = useState<string | undefined>("");
   const [success, setSuccess] = useState<string | undefined>("");
   const [isPending, startTransition] = useTransition();
@@ -68,7 +71,7 @@ export const RegisterForm = ({
             <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-6">
               <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
                 <span className="relative z-10 bg-background px-2 text-muted-foreground">
-                  Or continue with
+                  {t.auth.orContinueWith}
                 </span>
               </div>
 
@@ -82,7 +85,7 @@ export const RegisterForm = ({
                         <Input
                           {...field}
                           disabled={isPending}
-                          placeholder="Name"
+                          placeholder={t.auth.name}
                         />
                       </FormControl>
                       <FormMessage />
@@ -98,7 +101,7 @@ export const RegisterForm = ({
                         <Input
                           {...field}
                           disabled={isPending}
-                          placeholder="Email"
+                          placeholder={t.auth.email}
                           type="email"
                         />
                       </FormControl>
@@ -115,7 +118,7 @@ export const RegisterForm = ({
                         <Input
                           {...field}
                           disabled={isPending}
-                          placeholder="Password"
+                          placeholder={t.auth.password}
                           type="password"
                         />
                       </FormControl>
@@ -127,18 +130,18 @@ export const RegisterForm = ({
                 <FormError message={error} />
                 <FormSuccess message={success} />
 
-                <Button 
-                  disabled={isPending} 
-                  type="submit" 
+                <Button
+                  disabled={isPending}
+                  type="submit"
                   className="w-full h-11 text-base"
                 >
-                  Join
+                  {t.auth.join}
                 </Button>
               </div>
 
               <div className="text-center text-sm">
                 <Link href="/auth/login" className="hover:underline underline-offset-4">
-                  Already have an account?
+                  {t.auth.alreadyHaveAccount}
                 </Link>
               </div>
             </form>

diff --git a/src/components/auth/login/form.tsx b/src/components/auth/login/form.tsx
@@ -29,15 +29,17 @@ import { login } from "./action";
 import { FormError } from "../error/form-error";
 import { FormSuccess } from "../form-success";
 import { Social } from "../social";
+import { useTranslations } from "@/lib/use-translations";
 
 export const LoginForm = ({
   className,
   ...props
 }: React.ComponentPropsWithoutRef<"div">) => {
+  const { t } = useTranslations();
   const searchParams = useSearchParams();
   const callbackUrl = searchParams.get("callbackUrl");
   const urlError = searchParams.get("error") === "OAuthAccountNotLinked"
-    ? "Email already in use with different provider!"
+    ? t.auth.errors.oauthAccountNotLinked
     : "";
 
   const [showTwoFactor, setShowTwoFactor] = useState(false);
@@ -72,7 +74,7 @@ export const LoginForm = ({
             setShowTwoFactor(true);
           }
         })
-        .catch(() => setError("Something went wrong"));
+        .catch(() => setError(t.auth.errors.somethingWentWrong));
     });
   };
 
@@ -93,7 +95,7 @@ export const LoginForm = ({
             <form onSubmit={form.handleSubmit(onSubmit)} className="grid gap-6">
               <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
                 <span className="relative z-10 bg-background px-2 text-muted-foreground">
-                  Or continue with
+                  {t.auth.orContinueWith}
                 </span>
               </div>
 
@@ -108,8 +110,7 @@ export const LoginForm = ({
                           <Input
                             {...field}
                             disabled={isPending}
-                            placeholder="Two Factor Code"
-
+                            placeholder={t.auth.twoFactorCode}
                           />
                         </FormControl>
                         <FormMessage />
@@ -129,7 +130,7 @@ export const LoginForm = ({
                               id="email"
                               type="email"
                               disabled={isPending}
-                              placeholder="Email"
+                              placeholder={t.auth.email}
                             />
                           </FormControl>
                           <FormMessage />
@@ -147,14 +148,14 @@ export const LoginForm = ({
                               id="password"
                               type="password"
                               disabled={isPending}
-                              placeholder="Password"
+                              placeholder={t.auth.password}
                             />
                           </FormControl>
                           <Link
                             href="/auth/reset"
                             className="text-sm text-start hover:underline underline-offset-4"
                           >
-                            Forgot password?
+                            {t.auth.forgotPassword}
                           </Link>
                           <FormMessage />
                         </FormItem>
@@ -167,13 +168,13 @@ export const LoginForm = ({
                 <FormSuccess message={success} />
 
                 <Button disabled={isPending} type="submit" className="w-full h-11 text-base">
-                  {showTwoFactor ? "Confirm" : "Login"}
+                  {showTwoFactor ? t.common.confirm : t.common.login}
                 </Button>
               </div>
-              
+
               <div className="text-center text-sm">
                 <Link href="/join" className="hover:underline underline-offset-4">
-                  Don&apos;t have an account?
+                  {t.auth.dontHaveAccount}
                 </Link>
               </div>
             </form>

diff --git a/src/components/auth/password/form.tsx b/src/components/auth/password/form.tsx
@@ -26,11 +26,13 @@ import { NewPasswordSchema } from "../validation";
 import { newPassword } from "./action";
 import { FormError } from "../error/form-error";
 import { FormSuccess } from "../form-success";
+import { useTranslations } from "@/lib/use-translations";
 
 export const NewPasswordForm = ({
   className,
   ...props
 }: React.ComponentPropsWithoutRef<"div">) => {
+  const { t } = useTranslations();
   const searchParams = useSearchParams();
   const token = searchParams.get("token");
 
@@ -62,7 +64,7 @@ export const NewPasswordForm = ({
     <div className={cn("flex flex-col gap-6 min-w-[200px] md:min-w-[350px]", className)} {...props}>
       <Card className="border-none shadow-none bg-background">
         <CardHeader className="text-center">
-          <h1 className="text-xl font-semibold">Enter a new password</h1>
+          <h1 className="text-xl font-semibold">{t.auth.enterNewPassword}</h1>
         </CardHeader>
         <CardContent>
           <Form {...form}>
@@ -77,7 +79,7 @@ export const NewPasswordForm = ({
                         <Input
                           {...field}
                           disabled={isPending}
-                          placeholder="New Password"
+                          placeholder={t.auth.newPassword}
                           type="password"
                         />
                       </FormControl>
@@ -89,18 +91,18 @@ export const NewPasswordForm = ({
                 <FormError message={error} />
                 <FormSuccess message={success} />
 
-                <Button 
-                  disabled={isPending} 
-                  type="submit" 
+                <Button
+                  disabled={isPending}
+                  type="submit"
                   className="w-full h-11 text-base"
                 >
-                  Reset password
+                  {t.auth.resetPassword}
                 </Button>
               </div>
 
               <div className="text-center text-sm">
                 <Link href="/login" className="hover:underline underline-offset-4">
-                  Back to login
+                  {t.auth.backToLogin}
                 </Link>
               </div>
             </form>

diff --git a/src/components/auth/reset/form.tsx b/src/components/auth/reset/form.tsx
@@ -25,11 +25,13 @@ import { ResetSchema } from "../validation";
 import { reset } from "./action";
 import { FormError } from "../error/form-error";
 import { FormSuccess } from "../form-success";
+import { useTranslations } from "@/lib/use-translations";
 
 export const ResetForm = ({
   className,
   ...props
 }: React.ComponentPropsWithoutRef<"div">) => {
+  const { t } = useTranslations();
   const [error, setError] = useState<string | undefined>("");
   const [success, setSuccess] = useState<string | undefined>("");
   const [isPending, startTransition] = useTransition();
@@ -71,9 +73,8 @@ export const ResetForm = ({
                         <Input
                           {...field}
                           disabled={isPending}
-                          placeholder="Email"
+                          placeholder={t.auth.email}
                           type="email"
-
                         />
                       </FormControl>
                       <FormMessage />
@@ -84,18 +85,18 @@ export const ResetForm = ({
                 <FormError message={error} />
                 <FormSuccess message={success} />
 
-                <Button 
-                  disabled={isPending} 
-                  type="submit" 
+                <Button
+                  disabled={isPending}
+                  type="submit"
                   className="w-full h-11 text-base"
                 >
-                  Reset password
+                  {t.auth.resetPassword}
                 </Button>
               </div>
 
               <div className="text-center text-sm">
                 <Link href="/login" className="hover:underline underline-offset-4">
-                  Back to login
+                  {t.auth.backToLogin}
                 </Link>
               </div>
             </form>

diff --git a/src/components/internationalization/ar.json b/src/components/internationalization/ar.json
@@ -59,7 +59,18 @@
     "enterEmail": "أدخل بريدك الإلكتروني",
     "enterPassword": "أدخل كلمة المرور",
     "welcomeBack": "مرحباً بعودتك",
-    "createNewAccount": "إنشاء حساب جديد"
+    "createNewAccount": "إنشاء حساب جديد",
+    "name": "الاسم",
+    "newPassword": "كلمة مرور جديدة",
+    "enterNewPassword": "أدخل كلمة مرور جديدة",
+    "twoFactorCode": "رمز التحقق الثنائي",
+    "orContinueWith": "أو تابع باستخدام",
+    "backToLogin": "العودة لتسجيل الدخول",
+    "join": "انضم",
+    "errors": {
+      "oauthAccountNotLinked": "البريد الإلكتروني مستخدم بالفعل مع مزود مختلف!",
+      "somethingWentWrong": "حدث خطأ ما"
+    }
   },
   "marketing": {
     "hero": {

diff --git a/src/components/internationalization/en.json b/src/components/internationalization/en.json
@@ -59,7 +59,18 @@
     "enterEmail": "Enter your email",
     "enterPassword": "Enter your password",
     "welcomeBack": "Welcome back",
-    "createNewAccount": "Create a new account"
+    "createNewAccount": "Create a new account",
+    "name": "Name",
+    "newPassword": "New Password",
+    "enterNewPassword": "Enter a new password",
+    "twoFactorCode": "Two Factor Code",
+    "orContinueWith": "Or continue with",
+    "backToLogin": "Back to login",
+    "join": "Join",
+    "errors": {
+      "oauthAccountNotLinked": "Email already in use with different provider!",
+      "somethingWentWrong": "Something went wrong"
+    }
   },
   "marketing": {
     "hero": {

diff --git a/src/components/wizard/theme.tsx b/src/components/wizard/theme.tsx
@@ -13,6 +13,7 @@ import { cn } from "@/lib/utils";
 import { Icons } from "@/components/icons";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 import { useConfig } from "@/hooks/use-config";
+import { useTranslations } from "@/lib/use-translations";
 // Make sure Customizer doesn't cause unnecessary re-renders
 import CustomizerUI from "./cutomizer";
 const MemoizedCustomizer = React.memo(CustomizerUI);
@@ -48,6 +49,7 @@ interface ThemeSelectorProps {
 
 const ThemeSelector: React.FC<ThemeSelectorProps> = () => {
   const [config] = useConfig();
+  const { t } = useTranslations();
 
   const getPrimaryButtonStyle = React.useMemo<StyleProps>(
     () => ({
@@ -129,15 +131,15 @@ const ThemeSelector: React.FC<ThemeSelectorProps> = () => {
               </div>
               <div className="relative flex justify-center text-xs uppercase">
                 <span className="bg-card px-2 text-muted-foreground">
-                  Or continue with
+                  {t.auth.orContinueWith}
                 </span>
               </div>
             </div>
             <div className="grid gap-2">
               <Input
                 id="email"
                 type="email"
-                placeholder="Email"
+                placeholder={t.auth.email}
                 className={cn(
                   "appearance-none", // Remove browser default styling
                   "border border-gray-300", // Default border