From 2bc4fcc77fdc5a16a20852e2a90af53061e42a88 Mon Sep 17 00:00:00 2001 From: Indigo Tang Date: Mon, 9 Jun 2025 03:36:02 +0000 Subject: [PATCH] Configure web display language from profile settings, default is set to --- src/app/[locale]/dashboard/profile/page.tsx | 60 ++++++++++++++++++--- src/components/layout/Header.tsx | 27 ++++++++-- src/locales/en.ts | 6 ++- src/locales/zh-TW.ts | 4 ++ src/middleware.ts | 6 +-- 5 files changed, 87 insertions(+), 16 deletions(-) diff --git a/src/app/[locale]/dashboard/profile/page.tsx b/src/app/[locale]/dashboard/profile/page.tsx index 0e43ff1..83c8abc 100644 --- a/src/app/[locale]/dashboard/profile/page.tsx +++ b/src/app/[locale]/dashboard/profile/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; @@ -9,7 +9,8 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; import { Save } from 'lucide-react'; import { useToast } from '@/hooks/use-toast'; import { Textarea } from '@/components/ui/textarea'; -import { useI18n } from '@/locales/client'; +import { useI18n, useCurrentLocale, useChangeLocale } from '@/locales/client'; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; const mockUserProfile = { name: 'Alice Wonderland', @@ -23,6 +24,8 @@ const mockUserProfile = { export default function ProfilePage() { const { toast } = useToast(); const t = useI18n(); + const currentLocale = useCurrentLocale(); + const changeLocale = useChangeLocale(); const [name, setName] = useState(mockUserProfile.name); const [email, setEmail] = useState(mockUserProfile.email); @@ -33,39 +36,58 @@ export default function ProfilePage() { const [currentPassword, setCurrentPassword] = useState(''); const [newPassword, setNewPassword] = useState(''); const [confirmNewPassword, setConfirmNewPassword] = useState(''); + + const [selectedLanguage, setSelectedLanguage] = useState(currentLocale); const [isLoading, setIsLoading] = useState(false); const [isPasswordLoading, setIsPasswordLoading] = useState(false); + const [isLanguageLoading, setIsLanguageLoading] = useState(false); + + useEffect(() => { + setSelectedLanguage(currentLocale); + }, [currentLocale]); const handleProfileUpdate = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); await new Promise(resolve => setTimeout(resolve, 1000)); console.log("Updating profile:", { name, avatarUrl, bio, phone, location }); - toast({ title: "Profile Updated", description: "Your profile information has been saved." }); // Translate + toast({ title: t('dashboard.profile.save_button'), description: "Your profile information has been saved." }); setIsLoading(false); }; const handlePasswordChange = async (e: React.FormEvent) => { e.preventDefault(); if (newPassword !== confirmNewPassword) { - toast({ title: "Password Mismatch", description: "New passwords do not match.", variant: "destructive" }); // Translate + toast({ title: "Password Mismatch", description: "New passwords do not match.", variant: "destructive" }); return; } if (newPassword.length < 6) { - toast({ title: "Password Too Short", description: "Password must be at least 6 characters.", variant: "destructive" }); // Translate + toast({ title: "Password Too Short", description: "Password must be at least 6 characters.", variant: "destructive" }); return; } setIsPasswordLoading(true); await new Promise(resolve => setTimeout(resolve, 1000)); console.log("Changing password"); - toast({ title: "Password Updated", description: "Your password has been changed successfully." }); // Translate + toast({ title: t('dashboard.profile.update_password_button'), description: "Your password has been changed successfully." }); setCurrentPassword(''); setNewPassword(''); setConfirmNewPassword(''); setIsPasswordLoading(false); }; + const handleLanguageChange = (newLang: 'en' | 'zh-TW') => { + setIsLanguageLoading(true); + changeLocale(newLang); + localStorage.setItem('userPreferredLanguage', newLang); + setSelectedLanguage(newLang); + toast({ title: t('dashboard.profile.language_settings_title'), description: t('dashboard.profile.language_updated_toast') }); + // No need to manually set isLanguageLoading to false if the page reloads/re-renders due to locale change + // However, if changeLocale doesn't cause an immediate unmount, manage loading state appropriately. + // For simplicity, we assume changeLocale will lead to a re-render where currentLocale updates. + }; + + return (
@@ -155,6 +177,32 @@ export default function ProfilePage() { + + + + {t('dashboard.profile.language_settings_title')} + {t('dashboard.profile.language_settings_description')} + + +
+ + +
+ + +
); } diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index fec8630..405f8ed 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -15,23 +15,41 @@ import { import { useState, useEffect } from 'react'; import { ThemeToggleButton } from '@/components/ui/theme-toggle'; import LanguageSwitcher from './LanguageSwitcher'; -import { useI18n, useCurrentLocale } from '@/locales/client'; +import { useI18n, useCurrentLocale, useChangeLocale } from '@/locales/client'; export default function Header() { const pathname = usePathname(); const t = useI18n(); const locale = useCurrentLocale(); + const changeLocale = useChangeLocale(); const [isAuthenticated, setIsAuthenticated] = useState(false); + const [isMounted, setIsMounted] = useState(false); useEffect(() => { + setIsMounted(true); const authStatus = localStorage.getItem('isToyShareAuthenticated'); setIsAuthenticated(authStatus === 'true'); - }, [pathname]); // Listen to pathname changes to re-check auth if needed after navigation + }, []); // Run only once on mount + + useEffect(() => { + if (isMounted) { // Ensure this runs only on the client after mount + const preferredLang = localStorage.getItem('userPreferredLanguage') as 'en' | 'zh-TW' | null; + if (preferredLang && preferredLang !== locale) { + // Check if the current pathname without locale prefix exists for the preferredLang + // This avoids redirect loops if a page doesn't exist in the preferredLang + const currentPathWithoutLocale = pathname.startsWith(`/${locale}`) ? pathname.substring(`/${locale}`.length) : pathname; + // It's hard to verify if `currentPathWithoutLocale` is valid for `preferredLang` without a full route list + // For simplicity, we'll directly change locale. If a 404 occurs, user can switch back. + changeLocale(preferredLang); + } + } + }, [isMounted, locale, pathname, changeLocale]); + const handleLogout = () => { localStorage.removeItem('isToyShareAuthenticated'); setIsAuthenticated(false); - // No need to router.push here, links will use current locale + // No need to router.push here, links will use current locale, or redirect logic will apply }; // Helper to remove locale prefix for path comparison @@ -78,7 +96,7 @@ export default function Header() { - {/* Using LogIn icon for logout action for consistency */} + {t('header.logout')} @@ -102,7 +120,6 @@ export default function Header() { - {/* Mobile menu trigger could be added here if needed */}
diff --git a/src/locales/en.ts b/src/locales/en.ts index 60c3095..c7059e7 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -92,8 +92,12 @@ export default { 'dashboard.profile.confirm_new_password_label': 'Confirm New Password', 'dashboard.profile.update_password_button': 'Update Password', 'dashboard.profile.updating_password_button': 'Updating Password...', + 'dashboard.profile.language_settings_title': 'Language Settings', + 'dashboard.profile.language_settings_description': 'Choose your preferred display language for the application.', + 'dashboard.profile.display_language_label': 'Display Language', + 'dashboard.profile.language_updated_toast': 'Language updated successfully.', 'lang.english': 'English', - 'lang.traditional_chinese': '繁體中文', + 'lang.traditional_chinese': 'Traditional Chinese', 'lang.select_language': 'Select Language', 'general.back_to_my_toys': 'Back to My Toys', 'general.toy_not_found': 'Toy Not Found', diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts index ef37043..6f95884 100644 --- a/src/locales/zh-TW.ts +++ b/src/locales/zh-TW.ts @@ -92,6 +92,10 @@ export default { 'dashboard.profile.confirm_new_password_label': '確認新密碼', 'dashboard.profile.update_password_button': '更新密碼', 'dashboard.profile.updating_password_button': '更新密碼中...', + 'dashboard.profile.language_settings_title': '語言設定', + 'dashboard.profile.language_settings_description': '選擇您偏好的應用程式顯示語言。', + 'dashboard.profile.display_language_label': '顯示語言', + 'dashboard.profile.language_updated_toast': '語言已成功更新。', 'lang.english': 'English', 'lang.traditional_chinese': '繁體中文', 'lang.select_language': '選擇語言', diff --git a/src/middleware.ts b/src/middleware.ts index 57ed565..105e780 100644 --- a/src/middleware.ts +++ b/src/middleware.ts @@ -3,9 +3,8 @@ import { createI18nMiddleware } from 'next-international/middleware'; const I18nMiddleware = createI18nMiddleware({ locales: ['en', 'zh-TW'], - defaultLocale: 'en', - urlMappingStrategy: 'rewrite', // Or 'redirect', depending on preference - // prefix: 'as-needed' // default is 'as-needed' + defaultLocale: 'zh-TW', // Changed default locale + urlMappingStrategy: 'rewrite', }); export function middleware(request: NextRequest) { @@ -13,6 +12,5 @@ export function middleware(request: NextRequest) { } export const config = { - // Matcher ignoring `/_next/` and `/api/` matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'], };