voice

.claude/settings.local.json

@@ -7,7 +7,8 @@
       "Bash(npx prisma generate:*)",
       "Bash(npm run build:*)",
       "Bash(docker-compose up:*)",
-      "Bash(npx prisma migrate:*)"
+      "Bash(npx prisma migrate:*)",
+      "Bash(tree:*)"
     ]
   }
 }

admin/src/api/analytics.ts

@@ -1,55 +1,21 @@
 import { adminApiClient } from './client'
 
+// Dashboard stats from backend /api/admin/analytics/dashboard
 export interface DashboardStats {
   users: number
-  cards: number
+  activeUsers: number
-  packs: number
+  rooms: number
-  enabledPacks: number
+  activeRooms: number
-  payments: number
+  questionPacks: number
-}
+  publicPacks: number
-
+  gamesPlayed: number
-export interface RecentUser {
+  gamesToday: number
-  id: number
-  name?: string
-  email?: string
-  createdAt?: string
-}
-
-export interface TopPack {
-  id: number
-  title: string
-  cards: number
-  enabled: boolean
-}
-
-export interface ChartDataPoint {
-  date: string
-  registrations?: number
-  revenue?: number
-}
-
-export interface DashboardData {
-  stats: DashboardStats
-  recentUsers: RecentUser[]
-  topPacks: TopPack[]
 }
 
 export const analyticsApi = {
   // Get dashboard analytics
-  getDashboard: async (): Promise<DashboardData> => {
+  getDashboard: async (): Promise<DashboardStats> => {
-    const response = await adminApiClient.get('/api/v2/admin/analytics/dashboard')
+    const response = await adminApiClient.get('/api/admin/analytics/dashboard')
-    return response.data
-  },
-
-  // Get user registration chart data
-  getUsersChart: async (): Promise<{ data: ChartDataPoint[]; period: string }> => {
-    const response = await adminApiClient.get('/api/v2/admin/analytics/users/chart')
-    return response.data
-  },
-
-  // Get revenue chart data
-  getRevenueChart: async (): Promise<{ data: ChartDataPoint[]; period: string; currency: string }> => {
-    const response = await adminApiClient.get('/api/v2/admin/analytics/revenue/chart')
     return response.data
   },
 }

admin/src/api/packs.ts

@@ -43,7 +43,7 @@ export const packsApi = {
     showDisabled?: boolean
   }): Promise<PaginatedResponse<CardPackPreviewDto>> => {
     try {
-      const response = await adminApiClient.get('/api/v2/admin/packs', {
+      const response = await adminApiClient.get('/api/admin/packs', {
         params: {
           page: params?.page || 1,
           limit: params?.limit || 20,
@@ -82,7 +82,7 @@ export const packsApi = {
   // Get pack details by ID for editing
   getPack: async (packId: string): Promise<EditCardPackDto> => {
     try {
-      const response = await adminApiClient.get(`/api/v2/admin/packs/${packId}`)
+      const response = await adminApiClient.get(`/api/admin/packs/${packId}`)
       return response.data
     } catch (error) {
       const axiosError = error as AxiosError<{ error?: string; message?: string }>
@@ -110,7 +110,7 @@ export const packsApi = {
   // Create or update pack
   upsertPack: async (pack: EditCardPackDto): Promise<{ success: boolean; pack: EditCardPackDto }> => {
     try {
-      const response = await adminApiClient.post('/api/v2/admin/packs', pack)
+      const response = await adminApiClient.post('/api/admin/packs', pack)
       return response.data
     } catch (error) {
       const axiosError = error as AxiosError<{ error?: string; message?: string; field?: string; details?: string }>
@@ -146,7 +146,7 @@ export const packsApi = {
   // Delete pack
   deletePack: async (packId: string): Promise<{ success: boolean; message: string }> => {
     try {
-      const response = await adminApiClient.delete(`/api/v2/admin/packs/${packId}`)
+      const response = await adminApiClient.delete(`/api/admin/packs/${packId}`)
       return response.data
     } catch (error) {
       const axiosError = error as AxiosError<{ error?: string; message?: string }>

admin/src/api/users.ts

@@ -1,44 +1,36 @@
 import { adminApiClient } from './client'
-import type { UserDto, PaginatedResponse, PaymentDto } from '@/types/models'
+import type { UserDto, PaginatedResponse } from '@/types/models'
 
 export const usersApi = {
   // Get all users with pagination
   getUsers: async (params?: {
     page?: number
     limit?: number
-    ids?: string[]
   }): Promise<PaginatedResponse<UserDto>> => {
-    const response = await adminApiClient.get('/api/v2/admin/users', {
+    const response = await adminApiClient.get('/api/admin/users', {
       params: {
         page: params?.page || 1,
         limit: params?.limit || 20,
-        ids: params?.ids?.join(','),
       },
     })
     return response.data
   },
 
-  // Get user IDs list
+  // Get single user by ID
-  getUserIds: async (): Promise<string[]> => {
+  getUser: async (userId: string): Promise<UserDto> => {
-    const response = await adminApiClient.get('/api/v2/admin/users/ids')
+    const response = await adminApiClient.get(`/api/admin/users/${userId}`)
-    return response.data.ids
+    return response.data
   },
 
-  // Get user purchases
+  // Update user
-  getUserPurchases: async (userId: string): Promise<PaymentDto[]> => {
+  updateUser: async (userId: string, user: Partial<UserDto>): Promise<UserDto> => {
-    const response = await adminApiClient.get(`/api/v2/admin/users/${userId}/purchases`)
+    const response = await adminApiClient.patch(`/api/admin/users/${userId}`, user)
-    return response.data.payments
-  },
-
-  // Create or update user
-  upsertUser: async (user: UserDto): Promise<{ result: boolean }> => {
-    const response = await adminApiClient.post('/api/v2/admin/users', user)
     return response.data
   },
 
   // Delete user
-  deleteUser: async (userId: string): Promise<{ result: boolean }> => {
+  deleteUser: async (userId: string): Promise<{ message: string }> => {
-    const response = await adminApiClient.delete(`/api/v2/admin/users/${userId}`)
+    const response = await adminApiClient.delete(`/api/admin/users/${userId}`)
     return response.data
   },
 }

admin/src/pages/DashboardPage.tsx

@@ -1,9 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
-import { Users, FileText, Package, DollarSign, TrendingUp, Clock } from 'lucide-react'
+import { Users, Package, TrendingUp, Activity } from 'lucide-react'
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar } from 'recharts'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
+import { analyticsApi, type DashboardStats } from '@/api/analytics'
-import { analyticsApi, type DashboardData, type ChartDataPoint } from '@/api/analytics'
 import { useAuthStore } from '@/stores/authStore'
 
 export default function DashboardPage() {
@@ -12,24 +10,12 @@ export default function DashboardPage() {
   // Only make requests if authenticated and token exists
   const isReady = isAuthenticated && !!token && !!localStorage.getItem('admin_token')
 
-  const { data: dashboardData, isLoading: dashboardLoading } = useQuery<DashboardData>({
+  const { data: dashboardData, isLoading: dashboardLoading } = useQuery<DashboardStats>({
     queryKey: ['dashboard'],
     queryFn: analyticsApi.getDashboard,
     enabled: isReady,
   })
 
-  const { data: usersChartData } = useQuery<{ data: ChartDataPoint[] }>({
-    queryKey: ['users-chart'],
-    queryFn: analyticsApi.getUsersChart,
-    enabled: isReady,
-  })
-
-  const { data: revenueChartData } = useQuery<{ data: ChartDataPoint[] }>({
-    queryKey: ['revenue-chart'],
-    queryFn: analyticsApi.getRevenueChart,
-    enabled: isReady,
-  })
-
   if (dashboardLoading) {
     return (
       <div className="space-y-6">
@@ -72,7 +58,7 @@ export default function DashboardPage() {
             <Users className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{dashboardData?.stats.users || 0}</div>
+            <div className="text-2xl font-bold">{dashboardData?.users || 0}</div>
             <p className="text-xs text-muted-foreground">
               Registered users
             </p>
@@ -81,165 +67,96 @@ export default function DashboardPage() {
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Cards</CardTitle>
+            <CardTitle className="text-sm font-medium">Active Users</CardTitle>
-            <FileText className="h-4 w-4 text-muted-foreground" />
+            <Activity className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{dashboardData?.stats.cards || 0}</div>
+            <div className="text-2xl font-bold">{dashboardData?.activeUsers || 0}</div>
             <p className="text-xs text-muted-foreground">
-              Game cards created
+              Active in last 7 days
             </p>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Active Packs</CardTitle>
+            <CardTitle className="text-sm font-medium">Question Packs</CardTitle>
             <Package className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{dashboardData?.stats.enabledPacks || 0}</div>
+            <div className="text-2xl font-bold">{dashboardData?.publicPacks || 0}</div>
             <p className="text-xs text-muted-foreground">
-              of {dashboardData?.stats.packs || 0} total packs
+              of {dashboardData?.questionPacks || 0} total packs
             </p>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Total Payments</CardTitle>
+            <CardTitle className="text-sm font-medium">Games Today</CardTitle>
-            <DollarSign className="h-4 w-4 text-muted-foreground" />
+            <TrendingUp className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{dashboardData?.stats.payments || 0}</div>
+            <div className="text-2xl font-bold">{dashboardData?.gamesToday || 0}</div>
             <p className="text-xs text-muted-foreground">
-              Successful transactions
+              of {dashboardData?.gamesPlayed || 0} total games
             </p>
           </CardContent>
         </Card>
       </div>
 
-      {/* Charts */}
+      {/* Rooms Stats */}
       <div className="grid gap-4 md:grid-cols-2">
         <Card>
           <CardHeader>
-            <CardTitle>User Registrations</CardTitle>
+            <CardTitle>Room Statistics</CardTitle>
             <CardDescription>
-              Daily user registrations for the last 30 days
+              Current room status overview
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {usersChartData?.data && (
-              <ResponsiveContainer width="100%" height={300}>
-                <LineChart data={usersChartData.data}>
-                  <CartesianGrid strokeDasharray="3 3" />
-                  <XAxis
-                    dataKey="date"
-                    tickFormatter={(value) => new Date(value).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
-                  />
-                  <YAxis />
-                  <Tooltip
-                    labelFormatter={(value) => new Date(value).toLocaleDateString()}
-                    formatter={(value: number | undefined) => [value ?? 0, 'Registrations']}
-                  />
-                  <Line
-                    type="monotone"
-                    dataKey="registrations"
-                    stroke="#8884d8"
-                    strokeWidth={2}
-                    dot={{ fill: '#8884d8' }}
-                  />
-                </LineChart>
-              </ResponsiveContainer>
-            )}
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle>Revenue Trend</CardTitle>
-            <CardDescription>
-              Daily revenue for the last 30 days
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            {revenueChartData?.data && (
-              <ResponsiveContainer width="100%" height={300}>
-                <BarChart data={revenueChartData.data}>
-                  <CartesianGrid strokeDasharray="3 3" />
-                  <XAxis
-                    dataKey="date"
-                    tickFormatter={(value) => new Date(value).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
-                  />
-                  <YAxis />
-                  <Tooltip
-                    labelFormatter={(value) => new Date(value).toLocaleDateString()}
-                    formatter={(value: number | undefined) => [`$${value ?? 0}`, 'Revenue']}
-                  />
-                  <Bar dataKey="revenue" fill="#82ca9d" />
-                </BarChart>
-              </ResponsiveContainer>
-            )}
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Recent Users and Top Packs */}
-      <div className="grid gap-4 md:grid-cols-2">
-        <Card>
-          <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Clock className="h-5 w-5" />
-              Recent Users
-            </CardTitle>
-            <CardDescription>
-              Latest user registrations
             </CardDescription>
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {dashboardData?.recentUsers.slice(0, 5).map((user) => (
+              <div className="flex items-center justify-between">
-                <div key={user.id} className="flex items-center justify-between">
                 <div>
-                    <p className="font-medium">{user.name || 'No name'}</p>
+                  <p className="font-medium">Total Rooms</p>
-                    <p className="text-sm text-muted-foreground">{user.email || 'No email'}</p>
+                  <p className="text-sm text-muted-foreground">All time</p>
                 </div>
-                  <div className="text-sm text-muted-foreground">
+                <div className="text-2xl font-bold">{dashboardData?.rooms || 0}</div>
-                    {user.createdAt ? new Date(user.createdAt).toLocaleDateString() : 'N/A'}
               </div>
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Active Rooms</p>
+                  <p className="text-sm text-muted-foreground">Currently playing or waiting</p>
+                </div>
+                <div className="text-2xl font-bold text-green-600">{dashboardData?.activeRooms || 0}</div>
               </div>
-              )) || (
-                <p className="text-muted-foreground">No recent users</p>
-              )}
             </div>
           </CardContent>
         </Card>
 
         <Card>
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
+            <CardTitle>Game Statistics</CardTitle>
-              <TrendingUp className="h-5 w-5" />
-              Popular Packs
-            </CardTitle>
             <CardDescription>
-              Most popular card packs
+              Overall game activity
             </CardDescription>
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {dashboardData?.topPacks.map((pack) => (
+              <div className="flex items-center justify-between">
-                <div key={pack.id} className="flex items-center justify-between">
                 <div>
-                    <p className="font-medium">{pack.title}</p>
+                  <p className="font-medium">Total Games</p>
-                    <p className="text-sm text-muted-foreground">{pack.cards} cards</p>
+                  <p className="text-sm text-muted-foreground">All time completed games</p>
                 </div>
-                  <Badge variant={pack.enabled ? "default" : "secondary"}>
+                <div className="text-2xl font-bold">{dashboardData?.gamesPlayed || 0}</div>
-                    {pack.enabled ? 'Active' : 'Disabled'}
+              </div>
-                  </Badge>
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Today's Games</p>
+                  <p className="text-sm text-muted-foreground">Completed today</p>
+                </div>
+                <div className="text-2xl font-bold text-blue-600">{dashboardData?.gamesToday || 0}</div>
               </div>
-              )) || (
-                <p className="text-muted-foreground">No packs available</p>
-              )}
             </div>
           </CardContent>
         </Card>

admin/src/types/models.ts

@@ -29,28 +29,20 @@ export interface CardPackPreviewDto {
   order?: number
 }
 
+// User model matching backend Prisma schema
 export interface UserDto {
-  id?: number
+  id: string
-  name?: string
   email?: string
-  admin: boolean
+  name?: string
-  packs: string[]
+  role: 'USER' | 'ADMIN'
-  purchases: string[]
+  telegramId?: string
-  subscription?: boolean
+  createdAt: string
-  subscriptionFeatures: string[]
+  gamesPlayed: number
-  userDataDto?: unknown
+  gamesWon: number
-  userSettingsDto?: unknown
+  totalPoints: number
 }
 
-export interface PaymentDto {
+// Note: PaymentDto removed - no payment system exists in the backend
-  id: string
-  userId: string
-  amount: number
-  currency: string
-  status: string
-  createdAt: string
-  updatedAt: string
-}
 
 export interface SubscriptionPlanAdminDto {
   id: string

backend/src/admin/auth/admin-auth.service.ts

@@ -362,7 +362,30 @@ export class AdminAuthService implements OnModuleInit {
     });
 
     if (!user) {
-      // Create admin user for password login
+      // Check if email is already taken by another user
+      const existingUserWithEmail = await this.prisma.user.findUnique({
+        where: { email: adminUsername },
+      });
+
+      if (existingUserWithEmail) {
+        // If email exists but with different telegramId, update it
+        user = await this.prisma.user.update({
+          where: { id: existingUserWithEmail.id },
+          data: {
+            telegramId: passwordAdminTelegramId,
+            role: 'ADMIN',
+            name: 'Admin',
+          },
+          select: {
+            id: true,
+            email: true,
+            name: true,
+            role: true,
+            telegramId: true,
+          },
+        });
+      } else {
+        // Create new admin user for password login
         user = await this.prisma.user.create({
           data: {
             telegramId: passwordAdminTelegramId,
@@ -378,6 +401,7 @@ export class AdminAuthService implements OnModuleInit {
             telegramId: true,
           },
         });
+      }
     } else if (user.role !== 'ADMIN') {
       // Upgrade to admin if needed
       await this.prisma.user.update({

src/components/NameInputModal.css

@@ -0,0 +1,191 @@
+.name-input-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(5px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.name-input-modal-content {
+  background: rgba(20, 20, 30, 0.95);
+  backdrop-filter: blur(20px);
+  border-radius: 20px;
+  padding: clamp(20px, 3vh, 30px);
+  max-width: 450px;
+  width: 100%;
+  border: 2px solid rgba(255, 215, 0, 0.3);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  position: relative;
+}
+
+.name-input-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: clamp(15px, 2vh, 20px);
+}
+
+.name-input-modal-title {
+  color: #ffd700;
+  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
+  margin: 0;
+  text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+}
+
+.name-input-modal-close {
+  background: rgba(255, 107, 107, 0.2);
+  color: #ff6b6b;
+  border: 2px solid rgba(255, 107, 107, 0.5);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  font-size: 2rem;
+  line-height: 1;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+}
+
+.name-input-modal-close:hover {
+  background: rgba(255, 107, 107, 0.4);
+  border-color: #ff6b6b;
+  transform: scale(1.1);
+}
+
+.name-input-modal-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.name-input-modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.name-input-modal-description {
+  color: rgba(255, 255, 255, 0.9);
+  text-align: center;
+  font-size: clamp(0.95rem, 2vw, 1.1rem);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.name-input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.name-input-field {
+  width: 100%;
+  padding: 15px 20px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 2px solid rgba(255, 215, 0, 0.3);
+  border-radius: 12px;
+  color: #ffffff;
+  font-size: 1.1rem;
+  transition: all 0.3s ease;
+  box-sizing: border-box;
+}
+
+.name-input-field:focus {
+  outline: none;
+  border-color: #ffd700;
+  background: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
+}
+
+.name-input-field::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.name-input-error {
+  color: #ff6b6b;
+  font-size: 0.9rem;
+  margin: 0;
+  text-align: center;
+}
+
+.name-input-modal-footer {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+.name-input-submit-button,
+.name-input-cancel-button {
+  padding: 12px 24px;
+  border-radius: 10px;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 2px solid transparent;
+}
+
+.name-input-submit-button {
+  background: rgba(255, 215, 0, 0.2);
+  color: #ffd700;
+  border-color: rgba(255, 215, 0, 0.5);
+}
+
+.name-input-submit-button:hover:not(:disabled) {
+  background: rgba(255, 215, 0, 0.3);
+  border-color: #ffd700;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
+}
+
+.name-input-submit-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.name-input-cancel-button {
+  background: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.8);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.name-input-cancel-button:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.5);
+}
+
+@media (max-width: 768px) {
+  .name-input-modal-content {
+    padding: 20px;
+  }
+
+  .name-input-modal-title {
+    font-size: 1.5rem;
+  }
+
+  .name-input-modal-close {
+    width: 35px;
+    height: 35px;
+    font-size: 1.5rem;
+  }
+
+  .name-input-modal-footer {
+    flex-direction: column;
+  }
+
+  .name-input-submit-button,
+  .name-input-cancel-button {
+    width: 100%;
+  }
+}
+

src/components/NameInputModal.jsx

@@ -0,0 +1,109 @@
+import React, { useState, useEffect } from 'react';
+import './NameInputModal.css';
+
+const NameInputModal = ({ isOpen, onSubmit, onCancel }) => {
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+
+  // Сброс формы при открытии модального окна
+  useEffect(() => {
+    if (isOpen) {
+      setName('');
+      setError('');
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const trimmedName = name.trim();
+    
+    if (!trimmedName) {
+      setError('Введите имя');
+      return;
+    }
+
+    if (trimmedName.length > 50) {
+      setError('Имя слишком длинное (максимум 50 символов)');
+      return;
+    }
+
+    setError('');
+    onSubmit(trimmedName);
+  };
+
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget && onCancel) {
+      onCancel();
+    }
+  };
+
+  return (
+    <div className="name-input-modal-backdrop" onClick={handleBackdropClick}>
+      <div className="name-input-modal-content">
+        <div className="name-input-modal-header">
+          <h2 className="name-input-modal-title">Введите ваше имя</h2>
+          {onCancel && (
+            <button className="name-input-modal-close" onClick={onCancel}>
+              ×
+            </button>
+          )}
+        </div>
+        
+        <form className="name-input-modal-form" onSubmit={handleSubmit}>
+          <div className="name-input-modal-body">
+            <p className="name-input-modal-description">
+              Чтобы присоединиться к комнате, введите ваше имя
+            </p>
+            
+            <div className="name-input-group">
+              <input
+                type="text"
+                value={name}
+                onChange={(e) => {
+                  setName(e.target.value);
+                  setError('');
+                }}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter') {
+                    handleSubmit(e);
+                  }
+                }}
+                placeholder="Ваше имя"
+                className="name-input-field"
+                autoFocus
+                maxLength={50}
+              />
+              {error && (
+                <p className="name-input-error">{error}</p>
+              )}
+            </div>
+          </div>
+
+          <div className="name-input-modal-footer">
+            <button
+              type="submit"
+              className="name-input-submit-button primary"
+              disabled={!name.trim()}
+            >
+              Продолжить
+            </button>
+            {onCancel && (
+              <button
+                type="button"
+                onClick={onCancel}
+                className="name-input-cancel-button secondary"
+              >
+                Отмена
+              </button>
+            )}
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default NameInputModal;
+

src/pages/CreateRoom.jsx

@@ -3,10 +3,11 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { useRoom } from '../hooks/useRoom';
 import { questionsApi } from '../services/api';
+import NameInputModal from '../components/NameInputModal';
 
 const CreateRoom = () => {
   const navigate = useNavigate();
-  const { user } = useAuth();
+  const { user, loginAnonymous, loading: authLoading } = useAuth();
   const { createRoom, loading: roomLoading } = useRoom();
 
   const [questionPacks, setQuestionPacks] = useState([]);
@@ -18,6 +19,27 @@ const CreateRoom = () => {
     timerDuration: 30,
   });
   const [loading, setLoading] = useState(true);
+  const [isNameModalOpen, setIsNameModalOpen] = useState(false);
+
+  // Проверка авторизации и показ модального окна для ввода имени
+  useEffect(() => {
+    if (!authLoading && !user) {
+      setIsNameModalOpen(true);
+    } else if (user) {
+      setIsNameModalOpen(false);
+    }
+  }, [authLoading, user]);
+
+  // Обработка ввода имени и авторизация
+  const handleNameSubmit = async (name) => {
+    try {
+      await loginAnonymous(name);
+      setIsNameModalOpen(false);
+    } catch (error) {
+      console.error('Login error:', error);
+      alert('Ошибка при авторизации. Попробуйте еще раз.');
+    }
+  };
 
   useEffect(() => {
     const fetchPacks = async () => {
@@ -31,12 +53,16 @@ const CreateRoom = () => {
       }
     };
 
+    if (user) {
       fetchPacks();
+    } else {
+      setLoading(false);
+    }
   }, [user]);
 
   const handleCreateRoom = async () => {
     if (!user) {
-      alert('Войдите в систему для создания комнаты');
+      setIsNameModalOpen(true);
       return;
     }
 
@@ -142,6 +168,12 @@ const CreateRoom = () => {
           <button onClick={() => navigate('/')}>Назад</button>
         </div>
       </div>
+      
+      <NameInputModal
+        isOpen={isNameModalOpen}
+        onSubmit={handleNameSubmit}
+        onCancel={null}
+      />
     </div>
   );
 };

src/pages/RoomPage.jsx

@@ -5,11 +5,12 @@ import { useRoom } from '../hooks/useRoom';
 import { questionsApi } from '../services/api';
 import QRCode from 'qrcode';
 import QRModal from '../components/QRModal';
+import NameInputModal from '../components/NameInputModal';
 
 const RoomPage = () => {
   const { roomCode } = useParams();
   const navigate = useNavigate();
-  const { user } = useAuth();
+  const { user, loginAnonymous, loading: authLoading } = useAuth();
   const {
     room,
     participants,
@@ -22,6 +23,7 @@ const RoomPage = () => {
   const [qrCode, setQrCode] = useState('');
   const [joined, setJoined] = useState(false);
   const [isQRModalOpen, setIsQRModalOpen] = useState(false);
+  const [isNameModalOpen, setIsNameModalOpen] = useState(false);
   const [questionPacks, setQuestionPacks] = useState([]);
   const [selectedPackId, setSelectedPackId] = useState('');
   const [loadingPacks, setLoadingPacks] = useState(false);
@@ -51,6 +53,26 @@ const RoomPage = () => {
     }
   }, [roomCode]);
 
+  // Проверка авторизации и показ модального окна для ввода имени
+  useEffect(() => {
+    if (!authLoading && !user && room && !loading) {
+      setIsNameModalOpen(true);
+    } else if (user) {
+      setIsNameModalOpen(false);
+    }
+  }, [authLoading, user, room, loading]);
+
+  // Обработка ввода имени и авторизация
+  const handleNameSubmit = async (name) => {
+    try {
+      await loginAnonymous(name);
+      setIsNameModalOpen(false);
+    } catch (error) {
+      console.error('Login error:', error);
+      alert('Ошибка при авторизации. Попробуйте еще раз.');
+    }
+  };
+
   useEffect(() => {
     const handleJoin = async () => {
       if (room && user && !joined) {
@@ -247,6 +269,12 @@ const RoomPage = () => {
         qrCode={qrCode}
         roomCode={roomCode}
       />
+      
+      <NameInputModal
+        isOpen={isNameModalOpen}
+        onSubmit={handleNameSubmit}
+        onCancel={null}
+      />
     </div>
   );
 };