refactor(i18n): Optimize internationalization configuration and add new translation items
- Add internationalization support to the LoadingState component - Implement internationalization translations in the Profile page - Use internationalized text in the TestEmailDialog component - Update English and Chinese translation files by adding new translation entries
This commit is contained in:
YiZixuan
@@ -1,5 +1,7 @@
|
||||
import {useLanguage} from "@/contexts/LanguageContext.tsx";
|
||||
|
||||
export function LoadingState() {
|
||||
const { t } = useLanguage();
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen bg-background text-foreground">
|
||||
<div className="flex flex-col items-center text-center py-8 px-4 rounded-lg shadow-lg bg-card animate-fade-in">
|
||||
@@ -7,8 +9,8 @@ export function LoadingState() {
|
||||
<div className="absolute w-12 h-12 rounded-full border-4 border-primary/20"></div>
|
||||
<div className="w-12 h-12 rounded-full border-4 border-t-primary border-r-transparent border-b-transparent border-l-transparent animate-spin"></div>
|
||||
</div>
|
||||
<h3 className="text-xl font-medium mb-1">Loading server data</h3>
|
||||
<p className="text-muted-foreground">Please wait while we retrieve your information...</p>
|
||||
<h3 className="text-xl font-medium mb-1">{t("loadingServerData")}</h3>
|
||||
<p className="text-muted-foreground">{t("retrievingYourInformation")}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -194,9 +194,7 @@ const TestEmailDialog: React.FC<TestEmailDialogProps> = ({
|
||||
{/* Info message */}
|
||||
<Alert>
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertDescription>
|
||||
This will send a test email using your configured SMTP settings. Make sure SMTP is properly configured first.
|
||||
</AlertDescription>
|
||||
<AlertDescription>{t("testEmailAlert", "settings")}</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
|
||||
@@ -214,7 +212,7 @@ const TestEmailDialog: React.FC<TestEmailDialogProps> = ({
|
||||
) : (
|
||||
<Mail className="h-4 w-4" />
|
||||
)}
|
||||
{isLoading ? t("sending", "settings") : t("send", "common")}
|
||||
{isLoading ? t("sending", "settings") : t("send", "settings")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
|
||||
@@ -10,8 +10,11 @@ import { User } from "@/services/userService";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useSidebar } from "@/contexts/SidebarContext";
|
||||
import {useLanguage} from "@/contexts/LanguageContext.tsx";
|
||||
|
||||
const Profile = () => {
|
||||
const { t } = useLanguage()
|
||||
|
||||
// Use shared sidebar state
|
||||
const { sidebarCollapsed, toggleSidebar } = useSidebar();
|
||||
|
||||
@@ -84,12 +87,12 @@ const Profile = () => {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<div className="text-center">
|
||||
<p>Please login to view your profile</p>
|
||||
<p>{t("loginToViewProfile")}</p>
|
||||
<button
|
||||
onClick={() => navigate("/login")}
|
||||
className="mt-4 px-4 py-2 bg-primary text-white rounded"
|
||||
>
|
||||
Go to Login
|
||||
{t("goToLogin")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,7 +113,7 @@ const Profile = () => {
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-full">
|
||||
<Loader2 className="h-12 w-12 animate-spin text-primary" />
|
||||
<span className="ml-2">Loading user data...</span>
|
||||
<span className="ml-2">{t("loadingUserData")}</span>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex flex-col items-center justify-center h-full">
|
||||
@@ -121,7 +124,7 @@ const Profile = () => {
|
||||
onClick={() => fetchUserData()}
|
||||
className="px-4 py-2 bg-primary text-primary-foreground rounded-md"
|
||||
>
|
||||
Retry
|
||||
{t("retry")}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
@@ -136,4 +139,4 @@ const Profile = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
export default Profile;
|
||||
|
||||
@@ -78,4 +78,10 @@ export const maintenanceTranslations: MaintenanceTranslations = {
|
||||
selectNotificationChannel: 'Add a notification channel',
|
||||
enableNotificationsFirst: 'Enable notifications first to select channel',
|
||||
updateMaintenance: 'Update Maintenance',
|
||||
loginToViewProfile: 'Please login to view your profile',
|
||||
goToLogin: 'Go to Login',
|
||||
loadingUserData: 'Loading user data...',
|
||||
retry: 'Retry',
|
||||
loadingServerData: 'Loading server data...',
|
||||
retrievingYourInformation: 'Please wait while we retrieve your information...',
|
||||
};
|
||||
|
||||
@@ -37,8 +37,12 @@ export const settingsTranslations: SettingsTranslations = {
|
||||
selectCollection: "Select collection",
|
||||
toEmailAddress: "To email address",
|
||||
enterEmailAddress: "Enter email address",
|
||||
send: "Send",
|
||||
sending: "Sending...",
|
||||
|
||||
testEmailSettings: "Test Email Settings",
|
||||
testEmailDescription: "Test whether the current Email Settings are available",
|
||||
testEmailAlert: "This will send a test email using your configured SMTP settings. Make sure SMTP is properly configured first.",
|
||||
|
||||
// General Settings - Actions and status
|
||||
save: "Save Changes",
|
||||
saving: "Saving...",
|
||||
|
||||
@@ -76,4 +76,10 @@ export interface MaintenanceTranslations {
|
||||
selectNotificationChannel: string;
|
||||
enableNotificationsFirst: string;
|
||||
updateMaintenance: string;
|
||||
loginToViewProfile: string;
|
||||
goToLogin: string;
|
||||
loadingUserData: string;
|
||||
retry: string;
|
||||
loadingServerData: string;
|
||||
retrievingYourInformation: string;
|
||||
}
|
||||
|
||||
@@ -21,7 +21,7 @@ export interface SettingsTranslations {
|
||||
smtpAuthMethod: string;
|
||||
enableTLS: string;
|
||||
localName: string;
|
||||
|
||||
|
||||
// General Settings - Test Email
|
||||
testEmail: string;
|
||||
sendTestEmail: string;
|
||||
@@ -35,8 +35,12 @@ export interface SettingsTranslations {
|
||||
selectCollection: string;
|
||||
toEmailAddress: string;
|
||||
enterEmailAddress: string;
|
||||
send: string;
|
||||
sending: string;
|
||||
|
||||
testEmailSettings: string;
|
||||
testEmailDescription: string;
|
||||
testEmailAlert: string;
|
||||
|
||||
// General Settings - Actions and status
|
||||
save: string;
|
||||
saving: string;
|
||||
|
||||
@@ -78,4 +78,10 @@ export const maintenanceTranslations: MaintenanceTranslations = {
|
||||
selectNotificationChannel: '添加通知渠道',
|
||||
enableNotificationsFirst: '首先启用通知以选择频道',
|
||||
updateMaintenance: '更新维护',
|
||||
loginToViewProfile: '请登录查看您的个人资料',
|
||||
goToLogin: '立即登录',
|
||||
loadingUserData: '正在加载用户数据...',
|
||||
retry: '重试',
|
||||
loadingServerData: '正在加载服务器数据...',
|
||||
retrievingYourInformation: '正在获取您的信息，请稍候...',
|
||||
};
|
||||
|
||||
@@ -37,8 +37,12 @@ export const settingsTranslations: SettingsTranslations = {
|
||||
selectCollection: "选择集合",
|
||||
toEmailAddress: "收件人邮箱地址",
|
||||
enterEmailAddress: "输入收件人邮箱地址",
|
||||
send: "发送",
|
||||
sending: "发送中...",
|
||||
|
||||
testEmailSettings: "测试邮箱配置",
|
||||
testEmailDescription: "测试当前的邮箱设置是否可用",
|
||||
testEmailAlert: "这将使用您配置的SMTP设置发送一封测试邮件。请确保SMTP已正确配置。",
|
||||
|
||||
// General Settings - Actions and status
|
||||
save: "保存变更",
|
||||
saving: "保存中...",
|
||||
|
||||
Reference in New Issue
Block a user