refactor(i18n): replace hardcoded texts with i18n message keys for auth

src/actions/auth.ts

@@ -4,12 +4,15 @@ import bcrypt from "bcrypt";
 import prisma from "@/lib/prisma";
 import { signIn } from "@/lib/auth";
 import { authSchema } from "@/lib/zod";
+import { getTranslations } from "next-intl/server";
 import { CredentialsSignInFormValues } from "@/components/credentials-sign-in-form";
 import { CredentialsSignUpFormValues } from "@/components/credentials-sign-up-form";
 
 const saltRounds = 10;
 
 export async function signInWithCredentials(formData: CredentialsSignInFormValues, redirectTo?: string) {
+  const t = await getTranslations("signInWithCredentials");
+
   try {
     // Parse credentials using authSchema for validation
     const { email, password } = await authSchema.parseAsync(formData);
@@ -19,35 +22,37 @@ export async function signInWithCredentials(formData: CredentialsSignInFormValue
 
     // Check if the user exists
     if (!user) {
-      throw new Error("User not found.");
+      throw new Error(t("userNotFound"));
     }
 
     // Check if the user has a password
     if (!user.password) {
-      throw new Error("Invalid credentials.");
+      throw new Error(t("invalidCredentials"));
     }
 
     // Check if the password matches
     const passwordMatch = await bcrypt.compare(password, user.password);
     if (!passwordMatch) {
-      throw new Error("Incorrect password.");
+      throw new Error(t("incorrectPassword"));
     }
 
     await signIn("credentials", { ...formData, redirectTo, redirect: !!redirectTo });
     return { success: true };
   } catch (error) {
-    return { error: error instanceof Error ? error.message : "Failed to sign in. Please try again." };
+    return { error: error instanceof Error ? error.message : t("signInFailedFallback") };
   }
 }
 
 export async function signUpWithCredentials(formData: CredentialsSignUpFormValues) {
+  const t = await getTranslations("signUpWithCredentials");
+
   try {
     const validatedData = await authSchema.parseAsync(formData);
 
     // Check if user already exists
     const existingUser = await prisma.user.findUnique({ where: { email: validatedData.email } });
     if (existingUser) {
-      throw new Error("User already exists");
+      throw new Error(t("userAlreadyExists"));
     }
 
     // Hash password and create user
@@ -64,7 +69,7 @@ export async function signUpWithCredentials(formData: CredentialsSignUpFormValue
 
     return { success: true };
   } catch (error) {
-    return { error: error instanceof Error ? error.message : "Registration failed. Please try again." };
+    return { error: error instanceof Error ? error.message : t("registrationFailedFallback") };
   }
 }
 

src/components/avatar-button.tsx

@@ -1,4 +1,3 @@
-import { LogOut } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,6 +7,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { LogOutIcon } from "lucide-react";
 import { auth, signOut } from "@/lib/auth";
 import { getTranslations } from "next-intl/server";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -65,7 +65,7 @@ export async function AvatarButton() {
             <DropdownMenuGroup>
               <SettingsButton />
               <DropdownMenuItem onClick={handleLogOut}>
-                <LogOut />
+                <LogOutIcon />
                 {t("LogOut")}
               </DropdownMenuItem>
             </DropdownMenuGroup>

src/components/credentials-sign-in-form.tsx

@@ -12,6 +12,7 @@ import {
 import { toast } from "sonner";
 import { authSchema } from "@/lib/zod";
 import { useForm } from "react-hook-form";
+import { useTranslations } from "next-intl";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { useState, useTransition } from "react";
@@ -26,6 +27,7 @@ export function CredentialsSignInForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const redirectTo = searchParams.get("redirectTo");
+  const t = useTranslations("CredentialsSignInForm");
   const [isPending, startTransition] = useTransition();
   const [isVisible, setIsVisible] = useState(false);
 
@@ -44,11 +46,11 @@ export function CredentialsSignInForm() {
       const result = await signInWithCredentials(data);
 
       if (result?.error) {
-        toast.error("Sign In Failed", {
+        toast.error(t("signInFailed"), {
           description: result.error,
         });
       } else {
-        toast.success("Signed In Successfully");
+        toast.success(t("signInSuccess"));
         router.push(redirectTo || "/");
       }
     });
@@ -62,7 +64,7 @@ export function CredentialsSignInForm() {
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Email</FormLabel>
+              <FormLabel>{t("email")}</FormLabel>
               <FormControl>
                 <div className="relative">
                   <Input className="peer pe-9" {...field} />
@@ -81,7 +83,7 @@ export function CredentialsSignInForm() {
           name="password"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Password</FormLabel>
+              <FormLabel>{t("password")}</FormLabel>
               <FormControl>
                 <div className="relative">
                   <Input
@@ -93,7 +95,7 @@ export function CredentialsSignInForm() {
                     className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
                     type="button"
                     onClick={toggleVisibility}
-                    aria-label={isVisible ? "Hide password" : "Show password"}
+                    aria-label={isVisible ? t("hidePassword") : t("showPassword")}
                     aria-pressed={isVisible}
                     aria-controls="password"
                   >
@@ -111,7 +113,7 @@ export function CredentialsSignInForm() {
         />
 
         <Button type="submit" disabled={isPending} className="w-full">
-          {isPending ? "Signing In..." : "Sign In"}
+          {isPending ? t("signingIn") : t("signIn")}
         </Button>
       </form>
     </Form>

src/components/credentials-sign-up-form.tsx

@@ -12,6 +12,7 @@ import {
 import { toast } from "sonner";
 import { authSchema } from "@/lib/zod";
 import { useForm } from "react-hook-form";
+import { useTranslations } from "next-intl";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { useState, useTransition } from "react";
@@ -26,6 +27,7 @@ export function CredentialsSignUpForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const redirectTo = searchParams.get("redirectTo");
+  const t = useTranslations("CredentialsSignUpForm");
   const [isPending, startTransition] = useTransition();
   const [isVisible, setIsVisible] = useState(false);
 
@@ -44,12 +46,12 @@ export function CredentialsSignUpForm() {
       const result = await signUpWithCredentials(data);
 
       if (result?.error) {
-        toast.error("Registration Failed", {
+        toast.error(t("signUpFailed"), {
           description: result.error,
         });
       } else {
-        toast.success("Account Created", {
-          description: "You can now sign in with your credentials",
+        toast.success(t("signUpSuccess"), {
+          description: t("signUpSuccessDescription"),
         });
         router.push(`/sign-in?${redirectTo}`)
       }
@@ -64,7 +66,7 @@ export function CredentialsSignUpForm() {
           name="email"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Email</FormLabel>
+              <FormLabel>{t("email")}</FormLabel>
               <FormControl>
                 <div className="relative">
                   <Input className="peer pe-9" {...field} />
@@ -83,7 +85,7 @@ export function CredentialsSignUpForm() {
           name="password"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Password</FormLabel>
+              <FormLabel>{t("password")}</FormLabel>
               <FormControl>
                 <div className="relative">
                   <Input
@@ -95,7 +97,7 @@ export function CredentialsSignUpForm() {
                     className="text-muted-foreground/80 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md transition-[color,box-shadow] outline-none focus:z-10 focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
                     type="button"
                     onClick={toggleVisibility}
-                    aria-label={isVisible ? "Hide password" : "Show password"}
+                    aria-label={isVisible ? t("hidePassword") : t("showPassword")}
                     aria-pressed={isVisible}
                     aria-controls="password"
                   >
@@ -113,7 +115,7 @@ export function CredentialsSignUpForm() {
         />
 
         <Button type="submit" disabled={isPending} className="w-full">
-          {isPending ? "Creating Account..." : "Sign Up"}
+          {isPending ? t("creatingAccount") : t("signUp")}
         </Button>
       </form>
     </Form>

src/components/github-sign-in-form.tsx

@@ -1,10 +1,12 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { signInWithGithub } from "@/actions/auth";
 import { useSearchParams } from "next/navigation";
 
 export function GithubSignInForm() {
+  const t = useTranslations();
   const searchParams = useSearchParams();
   const redirectTo = searchParams.get("redirectTo");
   const signInAction = signInWithGithub.bind(null, redirectTo || "/");
@@ -18,7 +20,7 @@ export function GithubSignInForm() {
             fill="currentColor"
           />
         </svg>
-        Continue with GitHub
+        {t("GithubSignInForm")}
       </Button>
     </form>
   );

src/components/settings-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Settings } from "lucide-react";
+import { SettingsIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useSettingsStore } from "@/stores/useSettingsStore";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
@@ -11,7 +11,7 @@ export function SettingsButton() {
 
   return (
     <DropdownMenuItem onClick={() => setDialogOpen(true)}>
-      <Settings />
+      <SettingsIcon />
       {t("Settings")}
     </DropdownMenuItem>
   );

src/components/sign-in-form.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useRouter, useSearchParams } from "next/navigation";
 import { GithubSignInForm } from "@/components/github-sign-in-form";
 import { CredentialsSignInForm } from "@/components/credentials-sign-in-form";
@@ -7,6 +8,7 @@ import { CredentialsSignInForm } from "@/components/credentials-sign-in-form";
 export function SignInForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const t = useTranslations("SignInForm");
 
   const handleSignUp = () => {
     const params = new URLSearchParams(searchParams.toString());
@@ -16,25 +18,25 @@ export function SignInForm() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col items-center gap-2 text-center">
-        <h1 className="text-2xl font-bold">Sign in to your account</h1>
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
         <p className="text-balance text-sm text-muted-foreground">
-          Enter your email below to sign in to your account
+          {t("description")}
         </p>
       </div>
       <CredentialsSignInForm />
       <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
+          {t("or")}
         </span>
       </div>
       <GithubSignInForm />
       <div className="text-center text-sm">
-        Don&apos;t have an account?{" "}
+        {t("noAccount")}{" "}
         <button
           onClick={handleSignUp}
           className="underline underline-offset-4"
         >
-          Sign up
+          {t("signUp")}
         </button>
       </div>
     </div>

src/components/sign-up-form.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useTranslations } from "next-intl";
 import { useRouter, useSearchParams } from "next/navigation";
 import { GithubSignInForm } from "@/components/github-sign-in-form";
 import { CredentialsSignUpForm } from "@/components/credentials-sign-up-form";
@@ -7,6 +8,7 @@ import { CredentialsSignUpForm } from "@/components/credentials-sign-up-form";
 export function SignUpForm() {
   const router = useRouter();
   const searchParams = useSearchParams();
+  const t = useTranslations("SignUpForm");
 
   const handleSignIn = () => {
     const params = new URLSearchParams(searchParams.toString());
@@ -16,25 +18,25 @@ export function SignUpForm() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col items-center gap-2 text-center">
-        <h1 className="text-2xl font-bold">Sign up to your account</h1>
+        <h1 className="text-2xl font-bold">{t("title")}</h1>
         <p className="text-balance text-sm text-muted-foreground">
-          Enter your email below to sign up to your account
+          {t("description")}
         </p>
       </div>
       <CredentialsSignUpForm />
       <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
+          {t("or")}
         </span>
       </div>
       <GithubSignInForm />
       <div className="text-center text-sm">
-        Already have an account?{" "}
+        {t("haveAccount")}{" "}
         <button
           onClick={handleSignIn}
           className="underline underline-offset-4"
         >
-          Sign in
+          {t("signIn")}
         </button>
       </div>
     </div>