Merge pull request sinamics#496 from sinamics/translate-auth-pages

Added translations to public auth pages
tinola · Aug 17, 2024 · 71ab890 · 71ab890
2 parents 796c445 + e7690e7
commit 71ab890
Show file tree

Hide file tree

Showing 23 changed files with 526 additions and 94 deletions.
diff --git a/src/__tests__/components/loginForm.test.tsx b/src/__tests__/components/loginForm.test.tsx
@@ -1,10 +1,12 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { signIn } from "next-auth/react";
+import { NextIntlClientProvider } from "next-intl";
 import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
 import CredentialsForm from "~/components/auth/credentialsForm";
 import { ErrorCode } from "~/utils/errorCode";
+import enTranslation from "~/locales/en/common.json";
 
 jest.mock("next-auth/react", () => ({
 	signIn: jest.fn(),
@@ -20,6 +22,14 @@ jest.mock("react-hot-toast", () => ({
 	},
 }));
 
+const renderWithIntl = (ui, { locale = "en", messages = enTranslation } = {}) => {
+	return render(
+		<NextIntlClientProvider locale={locale} messages={messages}>
+			{ui}
+		</NextIntlClientProvider>,
+	);
+};
+
 describe("CredentialsForm", () => {
 	beforeEach(() => {
 		(signIn as jest.Mock).mockReset();
@@ -28,7 +38,7 @@ describe("CredentialsForm", () => {
 	});
 
 	it("updates email and password inputs on change", () => {
-		render(<CredentialsForm />);
+		renderWithIntl(<CredentialsForm />);
 
 		const emailInput = screen.getByPlaceholderText("[email protected]");
 		const passwordInput = screen.getByPlaceholderText("Enter your password");
@@ -41,7 +51,7 @@ describe("CredentialsForm", () => {
 	});
 
 	it("submits the form with correct email and password", async () => {
-		render(<CredentialsForm />);
+		renderWithIntl(<CredentialsForm />);
 
 		(signIn as jest.Mock).mockResolvedValue({ ok: true });
 
@@ -62,7 +72,7 @@ describe("CredentialsForm", () => {
 	});
 
 	it("shows TOTP input when second factor is required", async () => {
-		render(<CredentialsForm />);
+		renderWithIntl(<CredentialsForm />);
 
 		(signIn as jest.Mock).mockResolvedValue({ error: ErrorCode.SecondFactorRequired });
 
@@ -80,7 +90,7 @@ describe("CredentialsForm", () => {
 	});
 
 	it("handles error response from signIn", async () => {
-		render(<CredentialsForm />);
+		renderWithIntl(<CredentialsForm />);
 
 		const errorMessage = "Invalid credentials";
 		(signIn as jest.Mock).mockResolvedValue({ ok: false, error: errorMessage });
@@ -102,7 +112,7 @@ describe("CredentialsForm", () => {
 		const mockPush = jest.fn();
 		(useRouter as jest.Mock).mockReturnValue({ push: mockPush });
 
-		render(<CredentialsForm />);
+		renderWithIntl(<CredentialsForm />);
 
 		(signIn as jest.Mock).mockResolvedValue({ ok: true });
 
@@ -120,7 +130,7 @@ describe("CredentialsForm", () => {
 	});
 
 	it("handles network errors", async () => {
-		render(<CredentialsForm />);
+		renderWithIntl(<CredentialsForm />);
 
 		const errorMessage = "Network error";
 		(signIn as jest.Mock).mockRejectedValue(new Error(errorMessage));

diff --git a/src/components/auth/credentialsForm.tsx b/src/components/auth/credentialsForm.tsx
@@ -7,6 +7,7 @@ import Link from "next/link";
 import TOTPInput from "./totpInput";
 import FormSubmitButtons from "./formSubmitButton";
 import FormInput from "./formInput";
+import { useTranslations } from "next-intl";
 
 interface FormData {
 	email: string;
@@ -16,7 +17,7 @@ interface FormData {
 
 const CredentialsForm: React.FC = () => {
 	const router = useRouter();
-
+	const t = useTranslations();
 	const [totpCode, setTotpCode] = useState("");
 	const [showOTP, setShowOTP] = useState<boolean>(false);
 	const [loading, setLoading] = useState({ credentials: false, oauth: false });
@@ -68,12 +69,12 @@ const CredentialsForm: React.FC = () => {
 			{!showOTP && (
 				<>
 					<FormInput
-						label="Email"
+						label={t("authPages.form.email")}
 						name="email"
 						type="email"
 						value={formData.email}
 						onChange={handleChange}
-						placeholder="[email protected]"
+						placeholder={t("authPages.form.emailPlaceholder")}
 						icon={
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -87,12 +88,12 @@ const CredentialsForm: React.FC = () => {
 						}
 					/>
 					<FormInput
-						label="Password"
+						label={t("authPages.form.password")}
 						name="password"
 						type="password"
 						value={formData.password}
 						onChange={handleChange}
-						placeholder="Enter your password"
+						placeholder={t("authPages.form.passwordPlaceholder")}
 						icon={
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -114,7 +115,7 @@ const CredentialsForm: React.FC = () => {
 								href="/auth/forgotPassword"
 								className="cursor-pointer text-blue-500  hover:text-blue-700"
 							>
-								Forgot your password?
+								{t("authPages.form.forgotPassword")}
 							</Link>
 						</div>
 					</div>
@@ -124,7 +125,7 @@ const CredentialsForm: React.FC = () => {
 			<div className="pt-5">
 				<FormSubmitButtons
 					loading={loading.credentials}
-					title={showOTP ? "Verify TOTP" : "Sign in"}
+					title={showOTP ? t("authPages.form.verify2FA") : t("authPages.form.signIn")}
 				/>
 			</div>
 		</form>

diff --git a/src/components/auth/forgotPasswordForm.tsx b/src/components/auth/forgotPasswordForm.tsx
@@ -4,12 +4,14 @@ import { toast } from "react-hot-toast";
 import { useTrpcApiErrorHandler } from "~/hooks/useTrpcApiHandler";
 import FormInput from "./formInput";
 import FormSubmitButtons from "./formSubmitButton";
+import { useTranslations } from "next-intl";
 
 interface FormData {
 	email: string;
 }
 
 const ForgotPasswordForm: React.FC = () => {
+	const t = useTranslations();
 	const [loading, setLoading] = useState(false);
 	const [formData, setFormData] = useState<FormData>({
 		email: "",
@@ -47,12 +49,12 @@ const ForgotPasswordForm: React.FC = () => {
 	return (
 		<form className="space-y-5" onSubmit={submitHandler}>
 			<FormInput
-				label="Email"
+				label={t("authPages.form.email")}
 				name="email"
 				type="text"
 				value={formData.email}
 				onChange={handleChange}
-				placeholder="[email protected]"
+				placeholder={t("authPages.form.emailPlaceholder")}
 				icon={
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -66,7 +68,7 @@ const ForgotPasswordForm: React.FC = () => {
 				}
 			/>
 			<div className="pt-5">
-				<FormSubmitButtons loading={loading} title="Send Email" />
+				<FormSubmitButtons loading={loading} title={t("authPages.form.sendMail")} />
 			</div>
 		</form>
 	);

diff --git a/src/components/auth/mfaRecoveryForm.tsx b/src/components/auth/mfaRecoveryForm.tsx
@@ -4,12 +4,14 @@ import { toast } from "react-hot-toast";
 import { useTrpcApiErrorHandler } from "~/hooks/useTrpcApiHandler";
 import FormInput from "./formInput";
 import FormSubmitButtons from "./formSubmitButton";
+import { useTranslations } from "next-intl";
 
 interface FormData {
 	email: string;
 }
 
 const MfaRecoveryForm: React.FC = () => {
+	const t = useTranslations();
 	const [loading, setLoading] = useState(false);
 
 	const [formData, setFormData] = useState<FormData>({
@@ -47,12 +49,12 @@ const MfaRecoveryForm: React.FC = () => {
 	return (
 		<form className="space-y-5" onSubmit={submitHandler}>
 			<FormInput
-				label="Email"
+				label={t("authPages.form.email")}
 				name="email"
 				type="email"
 				value={formData.email}
 				onChange={handleChange}
-				placeholder="[email protected]"
+				placeholder={t("authPages.form.emailPlaceholder")}
 				icon={
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -67,7 +69,7 @@ const MfaRecoveryForm: React.FC = () => {
 			/>
 
 			<div className="pt-5">
-				<FormSubmitButtons loading={loading} title="Send Email" />
+				<FormSubmitButtons loading={loading} title={t("authPages.form.sendMail")} />
 			</div>
 		</form>
 	);

diff --git a/src/components/auth/oauthLogin.tsx b/src/components/auth/oauthLogin.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 import { useState, useEffect } from "react";
 import { toast } from "react-hot-toast";
 import cn from "classnames";
+import { useTranslations } from "next-intl";
 
 interface OAuthProvider {
 	id: string;
@@ -13,6 +14,7 @@ interface OAuthProvider {
 }
 
 const OAuthLogin: React.FC = () => {
+	const t = useTranslations();
 	const router = useRouter();
 	const [loading, setLoading] = useState(false);
 	const [providers, setProviders] = useState<Record<string, OAuthProvider>>({});
@@ -70,7 +72,9 @@ const OAuthLogin: React.FC = () => {
 					disabled={loading}
 				>
 					{loading ? <span className="loading loading-spinner"></span> : null}
-					Sign in with {provider.name}
+					{t("authPages.form.signInWith", {
+						provider: provider.name,
+					})}
 				</button>
 			))}
 		</div>

diff --git a/src/components/auth/registerForm.tsx b/src/components/auth/registerForm.tsx
@@ -5,6 +5,7 @@ import { api } from "~/utils/api";
 import { useTrpcApiErrorHandler } from "~/hooks/useTrpcApiHandler";
 import FormInput from "./formInput";
 import FormSubmitButtons from "./formSubmitButton";
+import { useTranslations } from "next-intl";
 interface FormData {
 	email: string;
 	password: string;
@@ -14,6 +15,7 @@ interface FormData {
 }
 
 const RegisterForm: React.FC = () => {
+	const t = useTranslations();
 	const router = useRouter();
 	const { invite } = router.query as { invite?: string };
 
@@ -63,21 +65,21 @@ const RegisterForm: React.FC = () => {
 		<form className="space-y-5" onSubmit={submitHandler}>
 			{invite && (
 				<FormInput
-					label="Code"
+					label={t("authPages.form.invitationCode")}
 					name="ztnetInvitationCode"
 					type="text"
 					value={formData.ztnetInvitationCode}
 					onChange={handleChange}
-					placeholder="Invitation code"
+					placeholder={t("authPages.form.invitationCodePlaceholder")}
 				/>
 			)}
 			<FormInput
-				label="Name"
+				label={t("authPages.form.name")}
 				name="name"
 				type="text"
 				value={formData.name}
 				onChange={handleChange}
-				placeholder="First & Last Name"
+				placeholder={t("authPages.form.namePlaceholder")}
 				icon={
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -90,12 +92,12 @@ const RegisterForm: React.FC = () => {
 				}
 			/>
 			<FormInput
-				label="Email"
+				label={t("authPages.form.email")}
 				name="email"
 				type="email"
 				value={formData.email}
 				onChange={handleChange}
-				placeholder="[email protected]"
+				placeholder={t("authPages.form.emailPlaceholder")}
 				icon={
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -109,12 +111,12 @@ const RegisterForm: React.FC = () => {
 				}
 			/>
 			<FormInput
-				label="Password"
+				label={t("authPages.form.password")}
 				name="password"
 				type="password"
 				value={formData.password}
 				onChange={handleChange}
-				placeholder="Enter your password"
+				placeholder={t("authPages.form.passwordPlaceholder")}
 				icon={
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -131,7 +133,7 @@ const RegisterForm: React.FC = () => {
 				}
 			/>
 			<div className="pt-5">
-				<FormSubmitButtons loading={loading} title="Sign Up" />
+				<FormSubmitButtons loading={loading} title={t("authPages.form.signUp")} />
 			</div>
 		</form>
 	);