304 lines
12 KiB
TypeScript
304 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select'
|
|
import { updateProfile, changePassword, updateLanguage, updateFontSize, updateShowRecentNotes } from '@/app/actions/profile'
|
|
import { toast } from 'sonner'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
|
|
const LANGUAGES = [
|
|
{ value: 'auto', label: 'Auto-detect', flag: '🌐' },
|
|
{ value: 'en', label: 'English', flag: '🇬🇧' },
|
|
{ value: 'fr', label: 'Français', flag: '🇫🇷' },
|
|
{ value: 'es', label: 'Español', flag: '🇪🇸' },
|
|
{ value: 'de', label: 'Deutsch', flag: '🇩🇪' },
|
|
{ value: 'it', label: 'Italiano', flag: '🇮🇹' },
|
|
{ value: 'pt', label: 'Português', flag: '🇵🇹' },
|
|
{ value: 'ru', label: 'Русский', flag: '🇷🇺' },
|
|
{ value: 'zh', label: '中文', flag: '🇨🇳' },
|
|
{ value: 'ja', label: '日本語', flag: '🇯🇵' },
|
|
{ value: 'ko', label: '한국어', flag: '🇰🇷' },
|
|
{ value: 'ar', label: 'العربية', flag: '🇸🇦' },
|
|
{ value: 'hi', label: 'हिन्दी', flag: '🇮🇳' },
|
|
{ value: 'nl', label: 'Nederlands', flag: '🇳🇱' },
|
|
{ value: 'pl', label: 'Polski', flag: '🇵🇱' },
|
|
{ value: 'fa', label: 'فارسی (Persian)', flag: '🇮🇷' },
|
|
]
|
|
|
|
export function ProfileForm({ user, userAISettings }: { user: any; userAISettings?: any }) {
|
|
const router = useRouter()
|
|
const [selectedLanguage, setSelectedLanguage] = useState(userAISettings?.preferredLanguage || 'auto')
|
|
const [isUpdatingLanguage, setIsUpdatingLanguage] = useState(false)
|
|
const [fontSize, setFontSize] = useState(userAISettings?.fontSize || 'medium')
|
|
const [isUpdatingFontSize, setIsUpdatingFontSize] = useState(false)
|
|
const [showRecentNotes, setShowRecentNotes] = useState(userAISettings?.showRecentNotes ?? false)
|
|
const [isUpdatingRecentNotes, setIsUpdatingRecentNotes] = useState(false)
|
|
const { t } = useLanguage()
|
|
|
|
const FONT_SIZES = [
|
|
{ value: 'small', label: t('profile.fontSizeSmall'), size: '14px' },
|
|
{ value: 'medium', label: t('profile.fontSizeMedium'), size: '16px' },
|
|
{ value: 'large', label: t('profile.fontSizeLarge'), size: '18px' },
|
|
{ value: 'extra-large', label: t('profile.fontSizeExtraLarge'), size: '20px' },
|
|
]
|
|
|
|
const handleFontSizeChange = async (size: string) => {
|
|
setIsUpdatingFontSize(true)
|
|
try {
|
|
const result = await updateFontSize(size)
|
|
if (result?.error) {
|
|
toast.error(t('profile.fontSizeUpdateFailed'))
|
|
} else {
|
|
setFontSize(size)
|
|
// Apply font size immediately
|
|
applyFontSize(size)
|
|
toast.success(t('profile.fontSizeUpdateSuccess'))
|
|
}
|
|
} catch (error) {
|
|
toast.error(t('profile.fontSizeUpdateFailed'))
|
|
} finally {
|
|
setIsUpdatingFontSize(false)
|
|
}
|
|
}
|
|
|
|
const applyFontSize = (size: string) => {
|
|
// Base font size in pixels (16px is standard)
|
|
const fontSizeMap = {
|
|
'small': '14px', // ~87% of 16px
|
|
'medium': '16px', // 100% (standard)
|
|
'large': '18px', // ~112% of 16px
|
|
'extra-large': '20px' // 125% of 16px
|
|
}
|
|
const fontSizeFactorMap = {
|
|
'small': 0.95,
|
|
'medium': 1.0,
|
|
'large': 1.1,
|
|
'extra-large': 1.25
|
|
}
|
|
const fontSizeValue = fontSizeMap[size as keyof typeof fontSizeMap] || '16px'
|
|
const fontSizeFactor = fontSizeFactorMap[size as keyof typeof fontSizeFactorMap] || 1.0
|
|
|
|
document.documentElement.style.setProperty('--user-font-size', fontSizeValue)
|
|
document.documentElement.style.setProperty('--user-font-size-factor', fontSizeFactor.toString())
|
|
localStorage.setItem('user-font-size', size)
|
|
}
|
|
|
|
// Apply saved font size on mount
|
|
useEffect(() => {
|
|
const savedFontSize = localStorage.getItem('user-font-size') || userAISettings?.fontSize || 'medium'
|
|
applyFontSize(savedFontSize as string)
|
|
}, [])
|
|
|
|
const handleLanguageChange = async (language: string) => {
|
|
setIsUpdatingLanguage(true)
|
|
try {
|
|
const result = await updateLanguage(language)
|
|
if (result?.error) {
|
|
toast.error(t('profile.languageUpdateFailed'))
|
|
} else {
|
|
setSelectedLanguage(language)
|
|
// Update localStorage and reload to apply new language
|
|
localStorage.setItem('user-language', language)
|
|
toast.success(t('profile.languageUpdateSuccess'))
|
|
// Reload page to apply new language
|
|
setTimeout(() => window.location.reload(), 500)
|
|
}
|
|
} catch (error) {
|
|
toast.error(t('profile.languageUpdateFailed'))
|
|
} finally {
|
|
setIsUpdatingLanguage(false)
|
|
}
|
|
}
|
|
|
|
const handleShowRecentNotesChange = async (enabled: boolean) => {
|
|
setIsUpdatingRecentNotes(true)
|
|
const previousValue = showRecentNotes
|
|
|
|
try {
|
|
const result = await updateShowRecentNotes(enabled)
|
|
if (result?.error) {
|
|
toast.error(result.error)
|
|
} else {
|
|
setShowRecentNotes(enabled)
|
|
toast.success(t('profile.recentNotesUpdateSuccess') || 'Paramètre mis à jour')
|
|
// Force full page reload to ensure settings are reloaded
|
|
window.location.href = '/settings/profile'
|
|
}
|
|
} catch (error: any) {
|
|
setShowRecentNotes(previousValue)
|
|
toast.error(error?.message || 'Erreur')
|
|
} finally {
|
|
setIsUpdatingRecentNotes(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t('profile.title')}</CardTitle>
|
|
<CardDescription>{t('profile.description')}</CardDescription>
|
|
</CardHeader>
|
|
<form action={async (formData) => {
|
|
const result = await updateProfile({ name: formData.get('name') as string })
|
|
if (result?.error) {
|
|
toast.error(t('profile.updateFailed'))
|
|
} else {
|
|
toast.success(t('profile.updateSuccess'))
|
|
}
|
|
}}>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label htmlFor="name" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.displayName')}</label>
|
|
<Input id="name" name="name" defaultValue={user.name} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label htmlFor="email" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.email')}</label>
|
|
<Input id="email" value={user.email} disabled className="bg-muted" />
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button type="submit">{t('general.save')}</Button>
|
|
</CardFooter>
|
|
</form>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t('profile.languagePreferences')}</CardTitle>
|
|
<CardDescription>{t('profile.languagePreferencesDescription')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="language">{t('profile.preferredLanguage')}</Label>
|
|
<Select
|
|
value={selectedLanguage}
|
|
onValueChange={handleLanguageChange}
|
|
disabled={isUpdatingLanguage}
|
|
>
|
|
<SelectTrigger id="language">
|
|
<SelectValue placeholder={t('profile.selectLanguage')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{LANGUAGES.map((lang) => (
|
|
<SelectItem key={lang.value} value={lang.value}>
|
|
<span className="flex items-center gap-2">
|
|
<span>{lang.flag}</span>
|
|
<span>{lang.label}</span>
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('profile.languageDescription')}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t('profile.displaySettings')}</CardTitle>
|
|
<CardDescription>{t('profile.displaySettingsDescription')}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="fontSize">{t('profile.fontSize')}</Label>
|
|
<Select
|
|
value={fontSize}
|
|
onValueChange={handleFontSizeChange}
|
|
disabled={isUpdatingFontSize}
|
|
>
|
|
<SelectTrigger id="fontSize">
|
|
<SelectValue placeholder={t('profile.selectFontSize')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{FONT_SIZES.map((size) => (
|
|
<SelectItem key={size.value} value={size.value}>
|
|
<span className="flex items-center gap-2">
|
|
<span>{size.label}</span>
|
|
<span className="text-xs text-muted-foreground">({size.size})</span>
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('profile.fontSizeDescription')}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pt-4 border-t">
|
|
<div className="space-y-0.5">
|
|
<Label htmlFor="showRecentNotes" className="text-base font-medium">
|
|
{t('profile.showRecentNotes') || 'Afficher la section Récent'}
|
|
</Label>
|
|
<p className="text-sm text-muted-foreground">
|
|
{t('profile.showRecentNotesDescription') || 'Afficher les notes récentes (7 derniers jours) sur la page principale'}
|
|
</p>
|
|
</div>
|
|
<Switch
|
|
id="showRecentNotes"
|
|
checked={showRecentNotes}
|
|
onCheckedChange={handleShowRecentNotesChange}
|
|
disabled={isUpdatingRecentNotes}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t('profile.changePassword')}</CardTitle>
|
|
<CardDescription>{t('profile.changePasswordDescription')}</CardDescription>
|
|
</CardHeader>
|
|
<form action={async (formData) => {
|
|
const result = await changePassword(formData)
|
|
if (result?.error) {
|
|
const msg = '_form' in result.error
|
|
? result.error._form[0]
|
|
: result.error.currentPassword?.[0] || result.error.newPassword?.[0] || result.error.confirmPassword?.[0] || t('profile.passwordChangeFailed')
|
|
toast.error(msg)
|
|
} else {
|
|
toast.success(t('profile.passwordChangeSuccess'))
|
|
// Reset form manually or redirect
|
|
const form = document.querySelector('form#password-form') as HTMLFormElement
|
|
form?.reset()
|
|
}
|
|
}} id="password-form">
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label htmlFor="currentPassword" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.currentPassword')}</label>
|
|
<Input id="currentPassword" name="currentPassword" type="password" required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label htmlFor="newPassword" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.newPassword')}</label>
|
|
<Input id="newPassword" name="newPassword" type="password" required minLength={6} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<label htmlFor="confirmPassword" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">{t('profile.confirmPassword')}</label>
|
|
<Input id="confirmPassword" name="confirmPassword" type="password" required minLength={6} />
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button type="submit">{t('profile.updatePassword')}</Button>
|
|
</CardFooter>
|
|
</form>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|