Initial commit

frontend/src/App.jsx

@@ -0,0 +1,392 @@
+import { useState, useEffect } from 'react';
+import { Server, Play, Square, Terminal, FolderOpen, HardDrive, Settings, Plus, Users as UsersIcon, LogOut, Menu, X } from 'lucide-react';
+import Console from './components/Console';
+import FileManager from './components/FileManager';
+import Stats from './components/Stats';
+import ServerSettings from './components/ServerSettings';
+import CreateServerModal from './components/CreateServerModal';
+import Users from './components/Users';
+import Auth from './components/Auth';
+import ErrorBoundary from './components/ErrorBoundary';
+import ThemeSelector from './components/ThemeSelector';
+import axios from 'axios';
+import { API_URL } from './config';
+import { getTheme } from './themes';
+
+function App() {
+  const [token, setToken] = useState(localStorage.getItem('token'));
+  const [user, setUser] = useState(null);
+  const [servers, setServers] = useState([]);
+  const [selectedServer, setSelectedServer] = useState(null);
+  const [activeTab, setActiveTab] = useState('console');
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showUsers, setShowUsers] = useState(false);
+  const [connectionError, setConnectionError] = useState(false);
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'dark');
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+
+  const currentTheme = getTheme(theme);
+
+  useEffect(() => {
+    if (token) {
+      loadUser();
+      loadServers();
+      const interval = setInterval(loadServers, 5000);
+      return () => clearInterval(interval);
+    }
+  }, [token]);
+
+  const loadUser = async () => {
+    try {
+      const { data } = await axios.get(`${API_URL}/api/auth/me`, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      setUser(data);
+    } catch (error) {
+      console.error('Ошибка загрузки пользователя:', error);
+      handleLogout();
+    }
+  };
+
+  const loadServers = async () => {
+    try {
+      const { data } = await axios.get(`${API_URL}/api/servers`, {
+        headers: { Authorization: `Bearer ${token}` }
+      });
+      setServers(data);
+      setConnectionError(false);
+    } catch (error) {
+      console.error('Ошибка загрузки серверов:', error);
+      if (error.response?.status === 401) {
+        handleLogout();
+      } else {
+        setConnectionError(true);
+      }
+    }
+  };
+
+  const handleLogin = async (username, password, isLogin) => {
+    const endpoint = isLogin ? '/api/auth/login' : '/api/auth/register';
+    const { data } = await axios.post(`${API_URL}${endpoint}`, {
+      username,
+      password
+    });
+    
+    localStorage.setItem('token', data.access_token);
+    setToken(data.access_token);
+    setUser({ username: data.username, role: data.role });
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    setToken(null);
+    setUser(null);
+    setServers([]);
+    setSelectedServer(null);
+  };
+
+  const handleServerDeleted = () => {
+    setSelectedServer(null);
+    loadServers();
+  };
+
+  const handleThemeChange = (newTheme) => {
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+  };
+
+  const startServer = async (serverName) => {
+    try {
+      const response = await axios.post(
+        `${API_URL}/api/servers/${serverName}/start`,
+        {},
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      console.log('Сервер запущен:', response.data);
+      setTimeout(() => {
+        loadServers();
+      }, 1000);
+    } catch (error) {
+      console.error('Ошибка запуска сервера:', error);
+      alert(error.response?.data?.detail || 'Ошибка запуска сервера');
+    }
+  };
+
+  const stopServer = async (serverName) => {
+    try {
+      const response = await axios.post(
+        `${API_URL}/api/servers/${serverName}/stop`,
+        {},
+        { headers: { Authorization: `Bearer ${token}` } }
+      );
+      console.log('Сервер остановлен:', response.data);
+      setTimeout(() => {
+        loadServers();
+      }, 1000);
+    } catch (error) {
+      console.error('Ошибка остановки сервера:', error);
+      alert(error.response?.data?.detail || 'Ошибка остановки сервера');
+    }
+  };
+
+  if (!token) {
+    return <Auth onLogin={handleLogin} />;
+  }
+
+  if (showUsers) {
+    return (
+      <div className={`min-h-screen ${currentTheme.primary} ${currentTheme.text} transition-colors duration-300`}>
+        <header className={`${currentTheme.secondary} ${currentTheme.border} border-b backdrop-blur-sm bg-opacity-95 sticky top-0 z-40`}>
+          <div className="px-6 py-4">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-3">
+                  <div className={`${currentTheme.accent} p-2 rounded-lg`}>
+                    <Server className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <h1 className="text-xl font-bold">MC Panel</h1>
+                    <p className={`text-xs ${currentTheme.textSecondary}`}>Управление серверами</p>
+                  </div>
+                </div>
+              </div>
+              <div className="flex items-center gap-3">
+                <div className={`px-3 py-1.5 rounded-lg ${currentTheme.card} ${currentTheme.border} border`}>
+                  <span className={`text-sm ${currentTheme.textSecondary}`}>
+                    {user?.username}
+                  </span>
+                  <span className={`ml-2 text-xs px-2 py-0.5 rounded ${currentTheme.accent} text-white`}>
+                    {user?.role === 'admin' ? 'Админ' : 'Пользователь'}
+                  </span>
+                </div>
+                <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
+                <button
+                  onClick={() => setShowUsers(false)}
+                  className={`${currentTheme.card} ${currentTheme.hover} px-4 py-2 rounded-lg transition flex items-center gap-2`}
+                >
+                  <Server className="w-4 h-4" />
+                  Серверы
+                </button>
+                <button
+                  onClick={handleLogout}
+                  className={`${currentTheme.danger} hover:opacity-90 px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
+                >
+                  <LogOut className="w-4 h-4" />
+                  Выход
+                </button>
+              </div>
+            </div>
+          </div>
+        </header>
+        <Users token={token} theme={currentTheme} />
+      </div>
+    );
+  }
+
+  return (
+    <div className={`min-h-screen ${currentTheme.primary} ${currentTheme.text} transition-colors duration-300`}>
+      {/* Header */}
+      <header className={`${currentTheme.secondary} ${currentTheme.border} border-b backdrop-blur-sm bg-opacity-95 sticky top-0 z-40`}>
+        <div className="px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <button
+                onClick={() => setSidebarOpen(!sidebarOpen)}
+                className={`lg:hidden ${currentTheme.hover} p-2 rounded-lg transition`}
+              >
+                {sidebarOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+              </button>
+              <div className="flex items-center gap-3">
+                <div className={`${currentTheme.accent} p-2 rounded-lg`}>
+                  <Server className="w-6 h-6 text-white" />
+                </div>
+                <div>
+                  <h1 className={`text-xl font-bold bg-gradient-to-r ${currentTheme.gradient} bg-clip-text text-transparent`}>MC Panel</h1>
+                  <p className={`text-xs ${currentTheme.textSecondary}`}>Управление серверами</p>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              {connectionError && (
+                <div className="bg-red-500 bg-opacity-20 border border-red-500 px-3 py-1.5 rounded-lg text-sm text-red-400">
+                  ⚠️ Нет связи
+                </div>
+              )}
+              <div className={`px-3 py-1.5 rounded-lg ${currentTheme.card} ${currentTheme.border} border`}>
+                <span className={`text-sm ${currentTheme.textSecondary}`}>
+                  {user?.username}
+                </span>
+                <span className={`ml-2 text-xs px-2 py-0.5 rounded ${currentTheme.accent} text-white`}>
+                  {user?.role === 'admin' ? 'Админ' : 'Пользователь'}
+                </span>
+              </div>
+              <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
+              {user?.role === 'admin' && (
+                <button
+                  onClick={() => setShowUsers(true)}
+                  className={`${currentTheme.accent} ${currentTheme.accentHover} px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
+                >
+                  <UsersIcon className="w-4 h-4" />
+                  <span className="hidden sm:inline">Пользователи</span>
+                </button>
+              )}
+              <button
+                onClick={handleLogout}
+                className={`${currentTheme.danger} hover:opacity-90 px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
+              >
+                <LogOut className="w-4 h-4" />
+                <span className="hidden sm:inline">Выход</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div className="flex h-[calc(100vh-89px)]">
+        {/* Sidebar */}
+        <aside className={`${sidebarOpen ? 'w-80' : 'w-0'} ${currentTheme.secondary} ${currentTheme.border} border-r transition-all duration-300 overflow-hidden`}>
+          <div className="p-4 h-full flex flex-col">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold">Мои серверы</h2>
+              <button
+                onClick={() => setShowCreateModal(true)}
+                className={`${currentTheme.accent} ${currentTheme.accentHover} p-2 rounded-lg transition text-white`}
+                title="Создать сервер"
+              >
+                <Plus className="w-4 h-4" />
+              </button>
+            </div>
+            
+            <div className="flex-1 overflow-y-auto space-y-2">
+              {servers.map((server) => (
+                <div
+                  key={server.name}
+                  className={`p-4 rounded-lg cursor-pointer transition-all duration-200 ${
+                    selectedServer === server.name
+                      ? `${currentTheme.accent} text-white shadow-lg`
+                      : `${currentTheme.card} ${currentTheme.hover}`
+                  }`}
+                  onClick={() => setSelectedServer(server.name)}
+                >
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="font-medium truncate">{server.displayName}</span>
+                    <div className="flex items-center gap-2">
+                      <span
+                        className={`w-2 h-2 rounded-full ${
+                          server.status === 'running' ? 'bg-green-400 animate-pulse' : 'bg-gray-500'
+                        }`}
+                      />
+                    </div>
+                  </div>
+                  <div className="flex gap-2">
+                    {server.status === 'stopped' ? (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          startServer(server.name);
+                        }}
+                        className="flex-1 bg-green-600 hover:bg-green-700 py-1.5 rounded-lg text-sm flex items-center justify-center gap-1.5 text-white transition"
+                      >
+                        <Play className="w-3.5 h-3.5" />
+                        Запустить
+                      </button>
+                    ) : (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          stopServer(server.name);
+                        }}
+                        className="flex-1 bg-red-600 hover:bg-red-700 py-1.5 rounded-lg text-sm flex items-center justify-center gap-1.5 text-white transition"
+                      >
+                        <Square className="w-3.5 h-3.5" />
+                        Остановить
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ))}
+              {servers.length === 0 && (
+                <div className={`text-center py-12 ${currentTheme.textSecondary}`}>
+                  <Server className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                  <p className="text-sm">Нет серверов</p>
+                  <p className="text-xs mt-1">Создайте первый сервер</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </aside>
+
+        {/* Main Content */}
+        <main className="flex-1 flex flex-col overflow-hidden">
+          {selectedServer ? (
+            <>
+              {/* Tabs */}
+              <div className={`${currentTheme.secondary} ${currentTheme.border} border-b flex overflow-x-auto`}>
+                {[
+                  { id: 'console', icon: Terminal, label: 'Консоль' },
+                  { id: 'files', icon: FolderOpen, label: 'Файлы' },
+                  { id: 'stats', icon: HardDrive, label: 'Статистика' },
+                  { id: 'settings', icon: Settings, label: 'Настройки' },
+                ].map((tab) => (
+                  <button
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id)}
+                    className={`px-6 py-4 flex items-center gap-2 transition-all duration-200 border-b-2 ${
+                      activeTab === tab.id
+                        ? `${currentTheme.accent.replace('bg-', 'border-')} ${currentTheme.text}`
+                        : `border-transparent ${currentTheme.textSecondary} ${currentTheme.hover}`
+                    }`}
+                  >
+                    <tab.icon className="w-4 h-4" />
+                    <span className="font-medium">{tab.label}</span>
+                  </button>
+                ))}
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 overflow-hidden">
+                <ErrorBoundary>
+                  {activeTab === 'console' && <Console serverName={selectedServer} token={token} theme={currentTheme} />}
+                  {activeTab === 'files' && <FileManager serverName={selectedServer} token={token} theme={currentTheme} />}
+                  {activeTab === 'stats' && <Stats serverName={selectedServer} token={token} theme={currentTheme} />}
+                  {activeTab === 'settings' && (
+                    <ServerSettings 
+                      serverName={selectedServer}
+                      token={token}
+                      user={user}
+                      theme={currentTheme}
+                      onDeleted={handleServerDeleted}
+                    />
+                  )}
+                </ErrorBoundary>
+              </div>
+            </>
+          ) : (
+            <div className="flex-1 flex items-center justify-center">
+              <div className="text-center">
+                <div className={`${currentTheme.card} p-8 rounded-2xl ${currentTheme.border} border`}>
+                  <Server className={`w-16 h-16 mx-auto mb-4 ${currentTheme.textSecondary} opacity-50`} />
+                  <p className="text-xl font-medium mb-2">Выберите сервер</p>
+                  <p className={`text-sm ${currentTheme.textSecondary}`}>
+                    Выберите сервер из списка слева или создайте новый
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+        </main>
+      </div>
+
+      {showCreateModal && (
+        <CreateServerModal
+          token={token}
+          theme={currentTheme}
+          onClose={() => setShowCreateModal(false)}
+          onCreated={loadServers}
+        />
+      )}
+    </div>
+  );
+}
+
+export default App;