From 046f0a5c203dcce8155832aa08e19e03a98de4c1 Mon Sep 17 00:00:00 2001
From: JiPai <github@jipai.moe>
Date: Fri, 8 Nov 2024 12:40:31 +0800
Subject: [PATCH] feat(i18n): replace translation in Appearance

---
 .../dashboard/settings/appearance-form.tsx    | 18 ++++++++---------
 .../settings/profile/profile-form.tsx         | 19 +++++++++---------
 apps/dokploy/public/locales/en/settings.json  | 20 +++++++++++++++++--
 .../public/locales/zh-Hans/settings.json      | 20 +++++++++++++++++--
 apps/dokploy/utils/hooks/use-locale.ts        |  6 ++----
 5 files changed, 57 insertions(+), 26 deletions(-)

diff --git a/apps/dokploy/components/dashboard/settings/appearance-form.tsx b/apps/dokploy/components/dashboard/settings/appearance-form.tsx
index a64a66b0..a10b0d05 100644
--- a/apps/dokploy/components/dashboard/settings/appearance-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/appearance-form.tsx
@@ -63,7 +63,7 @@ export function AppearanceForm() {
 	useEffect(() => {
 		form.reset({
 			theme: (theme ?? "system") as AppearanceFormValues["theme"],
-			language: locale ?? "en",
+			language: locale,
 		});
 	}, [form, theme, locale]);
 	function onSubmit(data: AppearanceFormValues) {
@@ -92,9 +92,9 @@ export function AppearanceForm() {
 							render={({ field }) => {
 								return (
 									<FormItem className="space-y-1 ">
-										<FormLabel>Theme</FormLabel>
+										<FormLabel>{t("settings.appearance.theme")}</FormLabel>
 										<FormDescription>
-											Select a theme for your dashboard
+											{t("settings.appearance.themeDescription")}
 										</FormDescription>
 										<FormMessage />
 										<RadioGroup
@@ -112,7 +112,7 @@ export function AppearanceForm() {
 														<img src="/images/theme-light.svg" alt="light" />
 													</div>
 													<span className="block w-full p-2 text-center font-normal">
-														Light
+														{t("settings.appearance.themes.light")}
 													</span>
 												</FormLabel>
 											</FormItem>
@@ -125,7 +125,7 @@ export function AppearanceForm() {
 														<img src="/images/theme-dark.svg" alt="dark" />
 													</div>
 													<span className="block w-full p-2 text-center font-normal">
-														Dark
+														{t("settings.appearance.themes.dark")}
 													</span>
 												</FormLabel>
 											</FormItem>
@@ -141,7 +141,7 @@ export function AppearanceForm() {
 														<img src="/images/theme-system.svg" alt="system" />
 													</div>
 													<span className="block w-full p-2 text-center font-normal">
-														System
+														{t("settings.appearance.themes.system")}
 													</span>
 												</FormLabel>
 											</FormItem>
@@ -158,9 +158,9 @@ export function AppearanceForm() {
 							render={({ field }) => {
 								return (
 									<FormItem className="space-y-1">
-										<FormLabel>Language</FormLabel>
+										<FormLabel>{t("settings.appearance.language")}</FormLabel>
 										<FormDescription>
-											Select a language for your dashboard
+											{t("settings.appearance.languageDescription")}
 										</FormDescription>
 										<FormMessage />
 										<Select
@@ -187,7 +187,7 @@ export function AppearanceForm() {
 							}}
 						/>
 
-						<Button type="submit">Save</Button>
+						<Button type="submit">{t("settings.common.save")}</Button>
 					</form>
 				</Form>
 			</CardContent>
diff --git a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
index 910e8bcd..e90eb5e5 100644
--- a/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
+++ b/apps/dokploy/components/dashboard/settings/profile/profile-form.tsx
@@ -96,9 +96,7 @@ export const ProfileForm = () => {
 					<CardTitle className="text-xl">
 						{t("settings.profile.title")}
 					</CardTitle>
-					<CardDescription>
-						Change the details of your profile here.
-					</CardDescription>
+					<CardDescription>{t("settings.profile.description")}</CardDescription>
 				</div>
 				{!data?.is2FAEnabled ? <Enable2FA /> : <Disable2FA />}
 			</CardHeader>
@@ -111,9 +109,12 @@ export const ProfileForm = () => {
 								name="email"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Email</FormLabel>
+										<FormLabel>{t("settings.profile.email")}</FormLabel>
 										<FormControl>
-											<Input placeholder="Email" {...field} />
+											<Input
+												placeholder={t("settings.profile.email")}
+												{...field}
+											/>
 										</FormControl>
 										<FormMessage />
 									</FormItem>
@@ -124,11 +125,11 @@ export const ProfileForm = () => {
 								name="password"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Password</FormLabel>
+										<FormLabel>{t("settings.profile.password")}</FormLabel>
 										<FormControl>
 											<Input
 												type="password"
-												placeholder="Password"
+												placeholder={t("settings.profile.password")}
 												{...field}
 												value={field.value || ""}
 											/>
@@ -143,7 +144,7 @@ export const ProfileForm = () => {
 								name="image"
 								render={({ field }) => (
 									<FormItem>
-										<FormLabel>Avatar</FormLabel>
+										<FormLabel>{t("settings.profile.avatar")}</FormLabel>
 										<FormControl>
 											<RadioGroup
 												onValueChange={(e) => {
@@ -181,7 +182,7 @@ export const ProfileForm = () => {
 						</div>
 						<div>
 							<Button type="submit" isLoading={isLoading}>
-								Save
+								{t("settings.common.save")}
 							</Button>
 						</div>
 					</form>
diff --git a/apps/dokploy/public/locales/en/settings.json b/apps/dokploy/public/locales/en/settings.json
index 1b3fcdc8..c4f6f362 100644
--- a/apps/dokploy/public/locales/en/settings.json
+++ b/apps/dokploy/public/locales/en/settings.json
@@ -1,11 +1,27 @@
 {
 	"settings": {
+		"common": {
+			"save": "Save"
+		},
 		"profile": {
-			"title": "Account"
+			"title": "Account",
+			"description": "Change the details of your profile here.",
+			"email": "Email",
+			"password": "Password",
+			"avatar": "Avatar"
 		},
 		"appearance": {
 			"title": "Appearance",
-			"description": "Customize the theme of your dashboard."
+			"description": "Customize the theme of your dashboard.",
+			"theme": "Theme",
+			"themeDescription": "Select a theme for your dashboard",
+			"themes": {
+				"light": "Light",
+				"dark": "Dark",
+				"system": "System"
+			},
+			"language": "Language",
+			"languageDescription": "Select a language for your dashboard"
 		}
 	}
 }
diff --git a/apps/dokploy/public/locales/zh-Hans/settings.json b/apps/dokploy/public/locales/zh-Hans/settings.json
index 636e43c4..d426bab6 100644
--- a/apps/dokploy/public/locales/zh-Hans/settings.json
+++ b/apps/dokploy/public/locales/zh-Hans/settings.json
@@ -1,11 +1,27 @@
 {
 	"settings": {
+		"common": {
+			"save": "保存"
+		},
 		"profile": {
-			"title": "账户偏好"
+			"title": "账户偏好",
+			"description": "更改您的个人资料详情。",
+			"email": "电子邮件",
+			"password": "密码",
+			"avatar": "头像"
 		},
 		"appearance": {
 			"title": "外观",
-			"description": "自定义仪表板主题。"
+			"description": "自定义仪表板主题。",
+			"theme": "主题",
+			"themeDescription": "选择仪表板主题",
+			"themes": {
+				"light": "亮",
+				"dark": "暗",
+				"system": "系统"
+			},
+			"language": "语言",
+			"languageDescription": "选择仪表板语言"
 		}
 	}
 }
diff --git a/apps/dokploy/utils/hooks/use-locale.ts b/apps/dokploy/utils/hooks/use-locale.ts
index a07478b7..f00e0df8 100644
--- a/apps/dokploy/utils/hooks/use-locale.ts
+++ b/apps/dokploy/utils/hooks/use-locale.ts
@@ -1,13 +1,11 @@
 import Cookies from "js-cookie";
 
 const SUPPORTED_LOCALES = ["en", "zh-Hans"] as const;
+
 type Locale = (typeof SUPPORTED_LOCALES)[number];
-type PossibleLocale = (typeof SUPPORTED_LOCALES)[number] | undefined | null;
 
 export default function useLocale() {
-	const currentLocale = Cookies.get("DOKPLOY_LOCALE") as PossibleLocale;
-
-	console.log(currentLocale);
+	const currentLocale = (Cookies.get("DOKPLOY_LOCALE") ?? "en") as Locale;
 
 	const setLocale = (locale: Locale) => {
 		Cookies.set("DOKPLOY_LOCALE", locale);