Add Personal account

frontend/src/App.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Server, Play, Square, Terminal, FolderOpen, HardDrive, Settings, Plus, Users as UsersIcon, LogOut, Menu, X, MessageSquare } from 'lucide-react';
+import { Server, Play, Square, Terminal, FolderOpen, HardDrive, Settings, Plus, Users as UsersIcon, LogOut, Menu, X, MessageSquare, UserCircle } from 'lucide-react';
 import Console from './components/Console';
 import FileManager from './components/FileManager';
 import Stats from './components/Stats';
@@ -7,6 +7,7 @@ import ServerSettings from './components/ServerSettings';
 import CreateServerModal from './components/CreateServerModal';
 import Users from './components/Users';
 import Tickets from './components/Tickets';
+import Profile from './components/Profile';
 import Auth from './components/Auth';
 import ErrorBoundary from './components/ErrorBoundary';
 import ThemeSelector from './components/ThemeSelector';
@@ -23,6 +24,7 @@ function App() {
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [showUsers, setShowUsers] = useState(false);
   const [showTickets, setShowTickets] = useState(false);
+  const [showProfile, setShowProfile] = useState(false);
   const [connectionError, setConnectionError] = useState(false);
   const [theme, setTheme] = useState(localStorage.getItem('theme') || 'dark');
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -97,6 +99,12 @@ function App() {
     localStorage.setItem('theme', newTheme);
   };
 
+  const handleUsernameChange = (newToken, newUsername) => {
+    setToken(newToken);
+    setUser({ ...user, username: newUsername });
+    loadServers();
+  };
+
   const startServer = async (serverName) => {
     try {
       const response = await axios.post(
@@ -235,6 +243,56 @@ function App() {
     );
   }
 
+  if (showProfile) {
+    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 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">
+                <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' ? 'Админ' : user?.role === 'support' ? 'Поддержка' : 'Пользователь'}
+                  </span>
+                </div>
+                <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
+                <button
+                  onClick={() => setShowProfile(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>
+        <Profile token={token} user={user} theme={currentTheme} onUsernameChange={handleUsernameChange} />
+      </div>
+    );
+  }
+
   return (
     <div className={`min-h-screen ${currentTheme.primary} ${currentTheme.text} transition-colors duration-300`}>
       {/* Header */}
@@ -273,6 +331,13 @@ function App() {
                 </span>
               </div>
               <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
+              <button
+                onClick={() => setShowProfile(true)}
+                className={`${currentTheme.accent} ${currentTheme.accentHover} px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
+              >
+                <UserCircle className="w-4 h-4" />
+                <span className="hidden sm:inline">Личный кабинет</span>
+              </button>
               <button
                 onClick={() => setShowTickets(true)}
                 className={`${currentTheme.accent} ${currentTheme.accentHover} px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}