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>
2025-09-21 01:06:30 +03:00
parent 62ca73b2ac
commit 196ca00194
174 changed files with 181207 additions and 179 deletions
--- a/components/auth/register-form.tsx
+++ b/components/auth/register-form.tsx
@@ -0,0 +1,200 @@
+'use client'
+
+import { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useAuth } from './auth-provider'
+import {
+  Box,
+  TextField,
+  Button,
+  Alert,
+  CircularProgress,
+  InputAdornment,
+  IconButton
+} from '@mui/material'
+import {
+  Email,
+  Lock,
+  Person,
+  Visibility,
+  VisibilityOff
+} from '@mui/icons-material'
+
+interface RegisterFormProps {
+  onSuccess?: () => void
+}
+
+export function RegisterForm({ onSuccess }: RegisterFormProps) {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [name, setName] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+  const { register } = useAuth()
+  const t = useTranslations('auth')
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    setError('')
+
+    if (password !== confirmPassword) {
+      setError(t('passwordMismatch'))
+      setLoading(false)
+      return
+    }
+
+    try {
+      const result = await register(email, password, name || undefined)
+
+      if (result.success) {
+        if (onSuccess) {
+          onSuccess()
+        }
+      } else {
+        setError(result.error || t('registerError'))
+      }
+    } catch (error) {
+      setError(t('connectionError'))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword)
+  }
+
+  const handleClickShowConfirmPassword = () => {
+    setShowConfirmPassword(!showConfirmPassword)
+  }
+
+  return (
+    <Box component="form" onSubmit={handleSubmit} sx={{ width: '100%' }}>
+      <TextField
+        fullWidth
+        type="text"
+        label={`${t('name')} ${t('optional')}`}
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        margin="normal"
+        variant="outlined"
+        disabled={loading}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <Person color="action" />
+            </InputAdornment>
+          ),
+        }}
+      />
+
+      <TextField
+        fullWidth
+        type="email"
+        label={t('email')}
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        required
+        margin="normal"
+        variant="outlined"
+        disabled={loading}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <Email color="action" />
+            </InputAdornment>
+          ),
+        }}
+      />
+
+      <TextField
+        fullWidth
+        type={showPassword ? 'text' : 'password'}
+        label={t('password')}
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        required
+        margin="normal"
+        variant="outlined"
+        disabled={loading}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <Lock color="action" />
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                edge="end"
+                disabled={loading}
+              >
+                {showPassword ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+      />
+
+      <TextField
+        fullWidth
+        type={showConfirmPassword ? 'text' : 'password'}
+        label={t('confirmPassword')}
+        value={confirmPassword}
+        onChange={(e) => setConfirmPassword(e.target.value)}
+        required
+        margin="normal"
+        variant="outlined"
+        disabled={loading}
+        error={confirmPassword !== '' && password !== confirmPassword}
+        helperText={
+          confirmPassword !== '' && password !== confirmPassword
+            ? t('passwordMismatch')
+            : ''
+        }
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <Lock color="action" />
+            </InputAdornment>
+          ),
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle confirm password visibility"
+                onClick={handleClickShowConfirmPassword}
+                edge="end"
+                disabled={loading}
+              >
+                {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+      />
+
+      {error && (
+        <Alert severity="error" sx={{ mt: 2 }}>
+          {error}
+        </Alert>
+      )}
+
+      <Button
+        type="submit"
+        fullWidth
+        variant="contained"
+        disabled={loading || (password !== confirmPassword && confirmPassword !== '')}
+        sx={{ mt: 3, mb: 2, py: 1.5 }}
+        startIcon={loading ? <CircularProgress size={20} color="inherit" /> : undefined}
+      >
+        {loading ? t('registering') : t('register')}
+      </Button>
+    </Box>
+  )
+}