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

This commit is contained in:
cfngc4594 2025-04-16 00:40:36 +08:00
parent 0b3086f333
commit 1d0b74136f
10 changed files with 141 additions and 34 deletions

View File

@ -25,6 +25,27 @@
"open": "Open Bot",
"close": "Close Bot"
},
"CredentialsSignInForm": {
"email": "Email",
"password": "Password",
"signIn": "Sign In",
"signingIn": "Signing In...",
"signInSuccess": "Signed In Successfully",
"signInFailed": "Sign In Failed",
"showPassword": "Show password",
"hidePassword": "Hide password"
},
"CredentialsSignUpForm": {
"email": "Email",
"password": "Password",
"signUp": "Sign Up",
"creatingAccount": "Creating Account...",
"signUpSuccess": "Account Created",
"signUpSuccessDescription": "You can now sign in with your credentials",
"signUpFailed": "Registration Failed",
"showPassword": "Show password",
"hidePassword": "Hide password"
},
"DetailsPage": {
"BackButton": "All Submissions",
"Time": "Submitted on",
@ -38,6 +59,7 @@
"MEDIUM": "MEDIUM",
"HARD": "HARD"
},
"GithubSignInForm": "Continue with GitHub",
"LanguageSettings": {
"en": {
"flag": "🇺🇸",
@ -82,6 +104,30 @@
"Advanced": "Advanced"
}
},
"SignInForm": {
"title": "Sign in to your account",
"description": "Enter your email below to sign in to your account",
"or": "Or",
"noAccount": "Don't have an account?",
"signUp": "Sign up"
},
"signInWithCredentials": {
"userNotFound": "User not found.",
"invalidCredentials": "Invalid credentials.",
"incorrectPassword": "Incorrect password.",
"signInFailedFallback": "Failed to sign in. Please try again."
},
"signUpWithCredentials": {
"userAlreadyExists": "User already exists.",
"registrationFailedFallback": "Registration failed. Please try again."
},
"SignUpForm": {
"title": "Sign up to your account",
"description": "Enter your email below to sign up to your account",
"or": "Or",
"haveAccount": "Already have an account?",
"signIn": "Sign in"
},
"StatusMessage": {
"PD": "Pending",
"QD": "Queued",

View File

@ -25,6 +25,27 @@
"open": "打开AI助手",
"close": "关闭AI助手"
},
"CredentialsSignInForm": {
"email": "邮箱",
"password": "密码",
"signIn": "登录",
"signingIn": "正在登录...",
"signInSuccess": "登录成功",
"signInFailed": "登录失败",
"showPassword": "显示密码",
"hidePassword": "隐藏密码"
},
"CredentialsSignUpForm": {
"email": "邮箱",
"password": "密码",
"signUp": "注册",
"creatingAccount": "正在创建账户...",
"signUpSuccess": "账户创建成功",
"signUpSuccessDescription": "你现在可以使用凭据登录",
"signUpFailed": "注册失败",
"showPassword": "显示密码",
"hidePassword": "隐藏密码"
},
"DetailsPage": {
"BackButton": "所有提交记录",
"Time": "提交于",
@ -38,6 +59,7 @@
"MEDIUM": "中等",
"HARD": "困难"
},
"GithubSignInForm": "使用 GitHub 登录",
"LanguageSettings": {
"en": {
"flag": "🇺🇸",
@ -82,6 +104,30 @@
"Advanced": "高级设置"
}
},
"SignInForm": {
"title": "登录到你的账户",
"description": "请输入你的邮箱以登录账户",
"or": "或者",
"noAccount": "还没有账户?",
"signUp": "注册"
},
"signInWithCredentials": {
"userNotFound": "未找到用户。",
"invalidCredentials": "凭据无效。",
"incorrectPassword": "密码错误。",
"signInFailedFallback": "登录失败,请重试。"
},
"signUpWithCredentials": {
"userAlreadyExists": "用户已存在。",
"registrationFailedFallback": "注册失败,请重试。"
},
"SignUpForm": {
"title": "注册你的账户",
"description": "请输入你的邮箱以注册账户",
"or": "或者",
"haveAccount": "已经有账户了?",
"signIn": "登录"
},
"StatusMessage": {
"PD": "待处理",
"QD": "排队中",

View File

@ -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") };
}
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>
);

View File

@ -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>
);

View File

@ -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>

View File

@ -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>