Fix authentication state persistence and admin role display
- Implement complete authentication system with JWT token validation - Add auth provider with persistent login state across page refreshes - Create multilingual login/register forms with Material-UI components - Fix token validation using raw SQL queries to bypass Prisma sync issues - Add comprehensive error handling for expired/invalid tokens - Create profile and settings pages with full i18n support - Add proper user role management (admin/user) with database sync - Implement secure middleware with CSRF protection and auth checks - Add debug endpoints for troubleshooting authentication issues - Fix Zustand store persistence for authentication state 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andupetcu
230
app/[locale]/settings/page.tsx
Normal file
230
app/[locale]/settings/page.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { useTranslations, useLocale } from 'next-intl'
|
||||
import { useAuth } from '@/hooks/use-auth'
|
||||
import { ProtectedRoute } from '@/components/auth/protected-route'
|
||||
import {
|
||||
Container,
|
||||
Paper,
|
||||
Box,
|
||||
Typography,
|
||||
Switch,
|
||||
FormControlLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Grid,
|
||||
Card,
|
||||
CardContent,
|
||||
Divider,
|
||||
Alert,
|
||||
Button
|
||||
} from '@mui/material'
|
||||
import {
|
||||
Settings as SettingsIcon,
|
||||
Palette,
|
||||
TextFields,
|
||||
Language,
|
||||
Notifications,
|
||||
Security,
|
||||
Save
|
||||
} from '@mui/icons-material'
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { user } = useAuth()
|
||||
const locale = useLocale()
|
||||
const t = useTranslations('settings')
|
||||
const [settings, setSettings] = useState({
|
||||
theme: user?.theme || 'light',
|
||||
fontSize: user?.fontSize || 'medium',
|
||||
notifications: true,
|
||||
emailUpdates: false,
|
||||
language: locale
|
||||
})
|
||||
const [message, setMessage] = useState('')
|
||||
|
||||
const handleSettingChange = (setting: string, value: any) => {
|
||||
setSettings(prev => ({
|
||||
...prev,
|
||||
[setting]: value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
// TODO: Implement settings update API
|
||||
await new Promise(resolve => setTimeout(resolve, 1000)) // Placeholder
|
||||
setMessage(t('settingsSaved'))
|
||||
} catch (error) {
|
||||
setMessage(t('settingsError'))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<ProtectedRoute>
|
||||
<Container maxWidth="md" sx={{ py: 4 }}>
|
||||
<Paper elevation={3} sx={{ p: 4 }}>
|
||||
{/* Header */}
|
||||
<Box textAlign="center" mb={4}>
|
||||
<SettingsIcon sx={{ fontSize: 48, color: 'primary.main', mb: 2 }} />
|
||||
<Typography variant="h4" component="h1" gutterBottom>
|
||||
{t('title')}
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
{t('subtitle')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Divider sx={{ mb: 4 }} />
|
||||
|
||||
<Grid container spacing={3}>
|
||||
{/* Appearance Settings */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card variant="outlined">
|
||||
<CardContent>
|
||||
<Box display="flex" alignItems="center" mb={3}>
|
||||
<Palette sx={{ mr: 1, color: 'primary.main' }} />
|
||||
<Typography variant="h6">
|
||||
{t('appearance')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>{t('theme')}</InputLabel>
|
||||
<Select
|
||||
value={settings.theme}
|
||||
label={t('theme')}
|
||||
onChange={(e) => handleSettingChange('theme', e.target.value)}
|
||||
>
|
||||
<MenuItem value="light">{t('themes.light')}</MenuItem>
|
||||
<MenuItem value="dark">{t('themes.dark')}</MenuItem>
|
||||
<MenuItem value="auto">{t('themes.auto')}</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>{t('fontSize')}</InputLabel>
|
||||
<Select
|
||||
value={settings.fontSize}
|
||||
label={t('fontSize')}
|
||||
onChange={(e) => handleSettingChange('fontSize', e.target.value)}
|
||||
startAdornment={<TextFields sx={{ mr: 1 }} />}
|
||||
>
|
||||
<MenuItem value="small">{t('fontSizes.small')}</MenuItem>
|
||||
<MenuItem value="medium">{t('fontSizes.medium')}</MenuItem>
|
||||
<MenuItem value="large">{t('fontSizes.large')}</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/* Language & Notifications */}
|
||||
<Grid item xs={12} md={6}>
|
||||
<Card variant="outlined">
|
||||
<CardContent>
|
||||
<Box display="flex" alignItems="center" mb={3}>
|
||||
<Language sx={{ mr: 1, color: 'primary.main' }} />
|
||||
<Typography variant="h6">
|
||||
{t('languageAndNotifications')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 3 }}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel>{t('language')}</InputLabel>
|
||||
<Select
|
||||
value={settings.language}
|
||||
label={t('language')}
|
||||
onChange={(e) => handleSettingChange('language', e.target.value)}
|
||||
>
|
||||
<MenuItem value="ro">{t('languages.ro')}</MenuItem>
|
||||
<MenuItem value="en">{t('languages.en')}</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={settings.notifications}
|
||||
onChange={(e) => handleSettingChange('notifications', e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label={t('notifications')}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mb: 2 }}>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Switch
|
||||
checked={settings.emailUpdates}
|
||||
onChange={(e) => handleSettingChange('emailUpdates', e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label={t('emailUpdates')}
|
||||
/>
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
|
||||
{/* Security Settings */}
|
||||
<Grid item xs={12}>
|
||||
<Card variant="outlined">
|
||||
<CardContent>
|
||||
<Box display="flex" alignItems="center" mb={3}>
|
||||
<Security sx={{ mr: 1, color: 'primary.main' }} />
|
||||
<Typography variant="h6">
|
||||
{t('security')}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
|
||||
{t('passwordSecurity')}
|
||||
</Typography>
|
||||
|
||||
<Button variant="outlined" disabled>
|
||||
{t('changePasswordSoon')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Save Button */}
|
||||
<Box textAlign="center" mt={4}>
|
||||
<Button
|
||||
variant="contained"
|
||||
size="large"
|
||||
startIcon={<Save />}
|
||||
onClick={handleSave}
|
||||
sx={{ px: 4 }}
|
||||
>
|
||||
{t('saveSettings')}
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{/* Success/Error Message */}
|
||||
{message && (
|
||||
<Alert
|
||||
severity={message.includes(t('settingsError')) ? 'error' : 'success'}
|
||||
sx={{ mt: 3 }}
|
||||
onClose={() => setMessage('')}
|
||||
>
|
||||
{message}
|
||||
</Alert>
|
||||
)}
|
||||
</Paper>
|
||||
</Container>
|
||||
</ProtectedRoute>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user