Add Personal account
This commit is contained in:
38
CHANGELOG.md
38
CHANGELOG.md
@@ -1,5 +1,43 @@
|
||||
# 📝 История изменений MC Panel
|
||||
|
||||
## Версия 2.1 - Личный кабинет (14.01.2026)
|
||||
|
||||
### ✨ Новые возможности
|
||||
|
||||
#### 👤 Личный кабинет
|
||||
- Кнопка "Личный кабинет" в header рядом с "Тикеты"
|
||||
- Три вкладки: Обзор, Имя пользователя, Пароль
|
||||
- Статистика профиля (серверы, тикеты, роль)
|
||||
- Список своих серверов
|
||||
- Изменение имени пользователя с подтверждением паролем
|
||||
- Изменение пароля с проверкой
|
||||
- Показ/скрытие паролей в формах
|
||||
|
||||
#### 🔐 Безопасность
|
||||
- Проверка уникальности имени пользователя
|
||||
- Автоматическое обновление владельцев серверов при смене имени
|
||||
- Автоматическое обновление доступов к серверам
|
||||
- Новый JWT токен при смене имени
|
||||
- Хеширование паролей (bcrypt)
|
||||
|
||||
#### 📊 Статистика профиля
|
||||
- Общее количество серверов
|
||||
- Мои серверы (владелец)
|
||||
- Доступные серверы
|
||||
- Статистика по тикетам (всего, на рассмотрении, в работе, закрыто)
|
||||
- Информация о роли
|
||||
|
||||
### 📁 Новые файлы
|
||||
- `frontend/src/components/Profile.jsx` - компонент личного кабинета
|
||||
- `PROFILE_SYSTEM.md` - документация личного кабинета
|
||||
|
||||
### 🔧 API Endpoints
|
||||
- `PUT /api/profile/username` - изменить имя пользователя
|
||||
- `PUT /api/profile/password` - изменить пароль
|
||||
- `GET /api/profile/stats` - получить статистику профиля
|
||||
|
||||
---
|
||||
|
||||
## Версия 2.0 - Система тикетов (14.01.2026)
|
||||
|
||||
### ✨ Новые возможности
|
||||
|
||||
228
PROFILE_SYSTEM.md
Normal file
228
PROFILE_SYSTEM.md
Normal file
@@ -0,0 +1,228 @@
|
||||
# 👤 Система личного кабинета
|
||||
|
||||
## Что добавлено
|
||||
|
||||
### ✅ Новые возможности
|
||||
|
||||
1. **Личный кабинет** - полноценная система управления профилем
|
||||
2. **Три вкладки**:
|
||||
- 📊 **Обзор** - статистика и информация о профиле
|
||||
- 👤 **Имя пользователя** - изменение имени пользователя
|
||||
- 🔒 **Пароль** - изменение пароля
|
||||
|
||||
3. **Кнопка "Личный кабинет"** в header рядом с кнопкой "Тикеты"
|
||||
|
||||
### 📊 Вкладка "Обзор"
|
||||
|
||||
#### Информация о пользователе
|
||||
- Имя пользователя
|
||||
- Роль (Администратор, Тех. поддержка, Пользователь)
|
||||
- Цветной бейдж роли
|
||||
|
||||
#### Статистика
|
||||
- **Серверы**:
|
||||
- Всего серверов
|
||||
- Мои серверы (владелец)
|
||||
- Доступные серверы
|
||||
|
||||
- **Тикеты**:
|
||||
- Всего тикетов
|
||||
- На рассмотрении
|
||||
- В работе
|
||||
- Закрыто
|
||||
|
||||
- **Роль**:
|
||||
- Название роли
|
||||
- Описание прав
|
||||
|
||||
#### Список серверов
|
||||
- Отображение всех серверов пользователя
|
||||
- Название и ID сервера
|
||||
- Красивые карточки
|
||||
|
||||
### 👤 Вкладка "Имя пользователя"
|
||||
|
||||
#### Возможности
|
||||
- Просмотр текущего имени
|
||||
- Ввод нового имени (минимум 3 символа)
|
||||
- Подтверждение паролем
|
||||
- Автоматический перелогин с новым именем
|
||||
|
||||
#### Безопасность
|
||||
- Проверка уникальности имени
|
||||
- Проверка пароля
|
||||
- Обновление владельцев серверов
|
||||
- Обновление доступов к серверам
|
||||
- Новый JWT токен
|
||||
|
||||
### 🔒 Вкладка "Пароль"
|
||||
|
||||
#### Возможности
|
||||
- Ввод текущего пароля
|
||||
- Ввод нового пароля (минимум 6 символов)
|
||||
- Подтверждение нового пароля
|
||||
- Показ/скрытие паролей
|
||||
|
||||
#### Безопасность
|
||||
- Проверка текущего пароля
|
||||
- Проверка совпадения новых паролей
|
||||
- Хеширование пароля (bcrypt)
|
||||
|
||||
## 🚀 Как использовать
|
||||
|
||||
### Открытие личного кабинета
|
||||
1. Нажмите кнопку "Личный кабинет" в header
|
||||
2. Откроется страница с тремя вкладками
|
||||
|
||||
### Просмотр статистики
|
||||
1. Откройте вкладку "Обзор"
|
||||
2. Посмотрите информацию о профиле
|
||||
3. Посмотрите статистику по серверам и тикетам
|
||||
4. Посмотрите список своих серверов
|
||||
|
||||
### Изменение имени пользователя
|
||||
1. Откройте вкладку "Имя пользователя"
|
||||
2. Введите новое имя (минимум 3 символа)
|
||||
3. Введите текущий пароль для подтверждения
|
||||
4. Нажмите "Изменить имя пользователя"
|
||||
5. Вы будете автоматически перелогинены
|
||||
|
||||
⚠️ **Важно**: После изменения имени:
|
||||
- Обновятся все серверы, где вы владелец
|
||||
- Обновятся все доступы к серверам
|
||||
- Вы получите новый токен авторизации
|
||||
|
||||
### Изменение пароля
|
||||
1. Откройте вкладку "Пароль"
|
||||
2. Введите текущий пароль
|
||||
3. Введите новый пароль (минимум 6 символов)
|
||||
4. Подтвердите новый пароль
|
||||
5. Нажмите "Изменить пароль"
|
||||
|
||||
⚠️ **Важно**: После изменения пароля используйте новый пароль для входа.
|
||||
|
||||
## 📁 Новые файлы
|
||||
|
||||
### Backend
|
||||
- Добавлены endpoints в `backend/main.py`:
|
||||
- `PUT /api/profile/username` - изменить имя пользователя
|
||||
- `PUT /api/profile/password` - изменить пароль
|
||||
- `GET /api/profile/stats` - получить статистику профиля
|
||||
|
||||
### Frontend
|
||||
- `frontend/src/components/Profile.jsx` - компонент личного кабинета
|
||||
|
||||
## 🎨 Интерфейс
|
||||
|
||||
### Вкладки
|
||||
- Современный дизайн с вкладками
|
||||
- Плавные переходы между вкладками
|
||||
- Адаптивный дизайн
|
||||
|
||||
### Карточки статистики
|
||||
- Цветные иконки
|
||||
- Числовые показатели
|
||||
- Детальная информация
|
||||
|
||||
### Формы
|
||||
- Валидация полей
|
||||
- Показ/скрытие паролей
|
||||
- Предупреждения о последствиях
|
||||
- Кнопки с индикацией загрузки
|
||||
|
||||
## 🔧 Технические детали
|
||||
|
||||
### API Endpoints
|
||||
|
||||
#### PUT /api/profile/username
|
||||
Изменить имя пользователя
|
||||
|
||||
**Request:**
|
||||
```json
|
||||
{
|
||||
"new_username": "NewUsername",
|
||||
"password": "current_password"
|
||||
}
|
||||
```
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"message": "Имя пользователя изменено",
|
||||
"access_token": "new_jwt_token",
|
||||
"username": "NewUsername"
|
||||
}
|
||||
```
|
||||
|
||||
#### PUT /api/profile/password
|
||||
Изменить пароль
|
||||
|
||||
**Request:**
|
||||
```json
|
||||
{
|
||||
"old_password": "old_password",
|
||||
"new_password": "new_password"
|
||||
}
|
||||
```
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"message": "Пароль изменён"
|
||||
}
|
||||
```
|
||||
|
||||
#### GET /api/profile/stats
|
||||
Получить статистику профиля
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"username": "username",
|
||||
"role": "user",
|
||||
"owned_servers": [
|
||||
{
|
||||
"name": "server1",
|
||||
"displayName": "My Server"
|
||||
}
|
||||
],
|
||||
"accessible_servers": [],
|
||||
"tickets": {
|
||||
"total": 5,
|
||||
"pending": 2,
|
||||
"in_progress": 1,
|
||||
"closed": 2
|
||||
},
|
||||
"total_servers": 1
|
||||
}
|
||||
```
|
||||
|
||||
### Безопасность
|
||||
|
||||
#### Изменение имени пользователя
|
||||
1. Проверка пароля
|
||||
2. Проверка уникальности нового имени
|
||||
3. Обновление владельцев серверов
|
||||
4. Обновление доступов к серверам
|
||||
5. Создание нового JWT токена
|
||||
|
||||
#### Изменение пароля
|
||||
1. Проверка текущего пароля
|
||||
2. Проверка длины нового пароля (минимум 6 символов)
|
||||
3. Хеширование нового пароля (bcrypt)
|
||||
|
||||
## ✅ Готово!
|
||||
|
||||
Система личного кабинета полностью интегрирована в MC Panel. Пользователи могут:
|
||||
- Просматривать статистику своего профиля
|
||||
- Изменять имя пользователя
|
||||
- Изменять пароль
|
||||
- Видеть свои серверы и тикеты
|
||||
|
||||
### Доступ к личному кабинету
|
||||
Кнопка "Личный кабинет" доступна всем пользователям в header рядом с кнопкой "Тикеты".
|
||||
|
||||
### Учётные данные по умолчанию
|
||||
- **Логин**: Sofa12345
|
||||
- **Пароль**: arkonsad123
|
||||
- **Роль**: admin
|
||||
126
backend/main.py
126
backend/main.py
@@ -266,7 +266,7 @@ async def update_user_role(username: str, data: dict, user: dict = Depends(get_c
|
||||
raise HTTPException(404, "Пользователь не найден")
|
||||
|
||||
new_role = data.get("role")
|
||||
if new_role not in ["admin", "user"]:
|
||||
if new_role not in ["admin", "user", "support"]:
|
||||
raise HTTPException(400, "Неверная роль")
|
||||
|
||||
users[username]["role"] = new_role
|
||||
@@ -274,6 +274,130 @@ async def update_user_role(username: str, data: dict, user: dict = Depends(get_c
|
||||
|
||||
return {"message": "Роль обновлена"}
|
||||
|
||||
# API для личного кабинета
|
||||
@app.put("/api/profile/username")
|
||||
async def update_username(data: dict, user: dict = Depends(get_current_user)):
|
||||
"""Изменить имя пользователя"""
|
||||
new_username = data.get("new_username", "").strip()
|
||||
password = data.get("password", "")
|
||||
|
||||
if not new_username:
|
||||
raise HTTPException(400, "Имя пользователя не может быть пустым")
|
||||
|
||||
if len(new_username) < 3:
|
||||
raise HTTPException(400, "Имя пользователя должно быть не менее 3 символов")
|
||||
|
||||
users = load_users()
|
||||
|
||||
# Проверяем пароль
|
||||
if not verify_password(password, users[user["username"]]["password"]):
|
||||
raise HTTPException(400, "Неверный пароль")
|
||||
|
||||
# Проверяем, не занято ли новое имя
|
||||
if new_username in users and new_username != user["username"]:
|
||||
raise HTTPException(400, "Это имя пользователя уже занято")
|
||||
|
||||
# Сохраняем данные пользователя
|
||||
old_username = user["username"]
|
||||
user_data = users[old_username]
|
||||
|
||||
# Удаляем старую запись и создаём новую
|
||||
del users[old_username]
|
||||
user_data["username"] = new_username
|
||||
users[new_username] = user_data
|
||||
|
||||
# Обновляем владельцев серверов
|
||||
for server_dir in SERVERS_DIR.iterdir():
|
||||
if server_dir.is_dir():
|
||||
config = load_server_config(server_dir.name)
|
||||
if config.get("owner") == old_username:
|
||||
config["owner"] = new_username
|
||||
save_server_config(server_dir.name, config)
|
||||
|
||||
# Обновляем доступы к серверам у других пользователей
|
||||
for username, user_info in users.items():
|
||||
if "servers" in user_info and old_username in user_info.get("servers", []):
|
||||
user_info["servers"] = [new_username if s == old_username else s for s in user_info["servers"]]
|
||||
|
||||
save_users(users)
|
||||
|
||||
# Создаём новый токен
|
||||
new_token = create_access_token({"sub": new_username, "role": user_data["role"]})
|
||||
|
||||
return {
|
||||
"message": "Имя пользователя изменено",
|
||||
"access_token": new_token,
|
||||
"username": new_username
|
||||
}
|
||||
|
||||
@app.put("/api/profile/password")
|
||||
async def update_password(data: dict, user: dict = Depends(get_current_user)):
|
||||
"""Изменить пароль"""
|
||||
old_password = data.get("old_password", "")
|
||||
new_password = data.get("new_password", "")
|
||||
|
||||
if not old_password or not new_password:
|
||||
raise HTTPException(400, "Заполните все поля")
|
||||
|
||||
if len(new_password) < 6:
|
||||
raise HTTPException(400, "Новый пароль должен быть не менее 6 символов")
|
||||
|
||||
users = load_users()
|
||||
|
||||
# Проверяем старый пароль
|
||||
if not verify_password(old_password, users[user["username"]]["password"]):
|
||||
raise HTTPException(400, "Неверный старый пароль")
|
||||
|
||||
# Устанавливаем новый пароль
|
||||
users[user["username"]]["password"] = get_password_hash(new_password)
|
||||
save_users(users)
|
||||
|
||||
return {"message": "Пароль изменён"}
|
||||
|
||||
@app.get("/api/profile/stats")
|
||||
async def get_profile_stats(user: dict = Depends(get_current_user)):
|
||||
"""Получить статистику профиля"""
|
||||
users = load_users()
|
||||
user_data = users.get(user["username"], {})
|
||||
|
||||
# Подсчитываем серверы пользователя
|
||||
owned_servers = []
|
||||
accessible_servers = []
|
||||
|
||||
for server_dir in SERVERS_DIR.iterdir():
|
||||
if server_dir.is_dir():
|
||||
config = load_server_config(server_dir.name)
|
||||
if config.get("owner") == user["username"]:
|
||||
owned_servers.append({
|
||||
"name": server_dir.name,
|
||||
"displayName": config.get("displayName", server_dir.name)
|
||||
})
|
||||
elif user["username"] in user_data.get("servers", []) or user["role"] == "admin":
|
||||
accessible_servers.append({
|
||||
"name": server_dir.name,
|
||||
"displayName": config.get("displayName", server_dir.name)
|
||||
})
|
||||
|
||||
# Подсчитываем тикеты
|
||||
tickets = load_tickets()
|
||||
user_tickets = [t for t in tickets.values() if t["author"] == user["username"]]
|
||||
|
||||
tickets_stats = {
|
||||
"total": len(user_tickets),
|
||||
"pending": len([t for t in user_tickets if t["status"] == "pending"]),
|
||||
"in_progress": len([t for t in user_tickets if t["status"] == "in_progress"]),
|
||||
"closed": len([t for t in user_tickets if t["status"] == "closed"])
|
||||
}
|
||||
|
||||
return {
|
||||
"username": user["username"],
|
||||
"role": user["role"],
|
||||
"owned_servers": owned_servers,
|
||||
"accessible_servers": accessible_servers,
|
||||
"tickets": tickets_stats,
|
||||
"total_servers": len(owned_servers) + len(accessible_servers)
|
||||
}
|
||||
|
||||
# API для серверов
|
||||
@app.get("/api/servers")
|
||||
async def get_servers(user: dict = Depends(get_current_user)):
|
||||
|
||||
@@ -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`}
|
||||
|
||||
468
frontend/src/components/Profile.jsx
Normal file
468
frontend/src/components/Profile.jsx
Normal file
@@ -0,0 +1,468 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { User, Lock, Server, MessageSquare, Shield, TrendingUp, Eye, EyeOff } from 'lucide-react';
|
||||
import axios from 'axios';
|
||||
import { API_URL } from '../config';
|
||||
|
||||
export default function Profile({ token, user, theme, onUsernameChange }) {
|
||||
const [stats, setStats] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [activeTab, setActiveTab] = useState('overview');
|
||||
|
||||
// Форма смены имени
|
||||
const [usernameForm, setUsernameForm] = useState({
|
||||
new_username: '',
|
||||
password: ''
|
||||
});
|
||||
const [usernameLoading, setUsernameLoading] = useState(false);
|
||||
const [showUsernamePassword, setShowUsernamePassword] = useState(false);
|
||||
|
||||
// Форма смены пароля
|
||||
const [passwordForm, setPasswordForm] = useState({
|
||||
old_password: '',
|
||||
new_password: '',
|
||||
confirm_password: ''
|
||||
});
|
||||
const [passwordLoading, setPasswordLoading] = useState(false);
|
||||
const [showOldPassword, setShowOldPassword] = useState(false);
|
||||
const [showNewPassword, setShowNewPassword] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadStats();
|
||||
}, []);
|
||||
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
const { data } = await axios.get(`${API_URL}/api/profile/stats`, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
setStats(data);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('Ошибка загрузки статистики:', error);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUsernameChange = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!usernameForm.new_username.trim() || !usernameForm.password) {
|
||||
alert('Заполните все поля');
|
||||
return;
|
||||
}
|
||||
|
||||
setUsernameLoading(true);
|
||||
try {
|
||||
const { data } = await axios.put(
|
||||
`${API_URL}/api/profile/username`,
|
||||
usernameForm,
|
||||
{ headers: { Authorization: `Bearer ${token}` } }
|
||||
);
|
||||
|
||||
// Обновляем токен
|
||||
localStorage.setItem('token', data.access_token);
|
||||
|
||||
alert('Имя пользователя успешно изменено!');
|
||||
setUsernameForm({ new_username: '', password: '' });
|
||||
|
||||
// Уведомляем родительский компонент
|
||||
if (onUsernameChange) {
|
||||
onUsernameChange(data.access_token, data.username);
|
||||
}
|
||||
|
||||
loadStats();
|
||||
} catch (error) {
|
||||
alert(error.response?.data?.detail || 'Ошибка изменения имени пользователя');
|
||||
} finally {
|
||||
setUsernameLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePasswordChange = async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!passwordForm.old_password || !passwordForm.new_password || !passwordForm.confirm_password) {
|
||||
alert('Заполните все поля');
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordForm.new_password !== passwordForm.confirm_password) {
|
||||
alert('Новые пароли не совпадают');
|
||||
return;
|
||||
}
|
||||
|
||||
if (passwordForm.new_password.length < 6) {
|
||||
alert('Новый пароль должен быть не менее 6 символов');
|
||||
return;
|
||||
}
|
||||
|
||||
setPasswordLoading(true);
|
||||
try {
|
||||
await axios.put(
|
||||
`${API_URL}/api/profile/password`,
|
||||
{
|
||||
old_password: passwordForm.old_password,
|
||||
new_password: passwordForm.new_password
|
||||
},
|
||||
{ headers: { Authorization: `Bearer ${token}` } }
|
||||
);
|
||||
|
||||
alert('Пароль успешно изменён!');
|
||||
setPasswordForm({ old_password: '', new_password: '', confirm_password: '' });
|
||||
} catch (error) {
|
||||
alert(error.response?.data?.detail || 'Ошибка изменения пароля');
|
||||
} finally {
|
||||
setPasswordLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getRoleName = (role) => {
|
||||
switch (role) {
|
||||
case 'admin':
|
||||
return 'Администратор';
|
||||
case 'support':
|
||||
return 'Тех. поддержка';
|
||||
default:
|
||||
return 'Пользователь';
|
||||
}
|
||||
};
|
||||
|
||||
const getRoleColor = (role) => {
|
||||
switch (role) {
|
||||
case 'admin':
|
||||
return 'bg-blue-500/20 text-blue-500 border-blue-500/50';
|
||||
case 'support':
|
||||
return 'bg-purple-500/20 text-purple-500 border-purple-500/50';
|
||||
default:
|
||||
return 'bg-gray-500/20 text-gray-500 border-gray-500/50';
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className={`h-full ${theme.primary} ${theme.text} flex items-center justify-center`}>
|
||||
<div className="text-center">
|
||||
<div className="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4" />
|
||||
<p className={theme.textSecondary}>Загрузка профиля...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`h-full ${theme.primary} ${theme.text} p-6 overflow-y-auto`}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold mb-2">Личный кабинет</h1>
|
||||
<p className={theme.textSecondary}>Управление профилем и настройками</p>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className={`${theme.secondary} ${theme.border} border rounded-2xl mb-6 p-2 flex gap-2`}>
|
||||
<button
|
||||
onClick={() => setActiveTab('overview')}
|
||||
className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
|
||||
activeTab === 'overview'
|
||||
? `${theme.accent} text-white`
|
||||
: `${theme.hover}`
|
||||
}`}
|
||||
>
|
||||
<TrendingUp className="w-4 h-4 inline mr-2" />
|
||||
Обзор
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('username')}
|
||||
className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
|
||||
activeTab === 'username'
|
||||
? `${theme.accent} text-white`
|
||||
: `${theme.hover}`
|
||||
}`}
|
||||
>
|
||||
<User className="w-4 h-4 inline mr-2" />
|
||||
Имя пользователя
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('password')}
|
||||
className={`flex-1 px-4 py-3 rounded-xl font-medium transition ${
|
||||
activeTab === 'password'
|
||||
? `${theme.accent} text-white`
|
||||
: `${theme.hover}`
|
||||
}`}
|
||||
>
|
||||
<Lock className="w-4 h-4 inline mr-2" />
|
||||
Пароль
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Overview Tab */}
|
||||
{activeTab === 'overview' && (
|
||||
<div className="space-y-6">
|
||||
{/* User Info Card */}
|
||||
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className={`${theme.accent} p-4 rounded-2xl`}>
|
||||
<User className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold">{stats?.username}</h2>
|
||||
<div className={`inline-flex items-center gap-2 px-3 py-1 rounded-lg border mt-2 ${getRoleColor(stats?.role)}`}>
|
||||
<Shield className="w-4 h-4" />
|
||||
<span className="font-medium">{getRoleName(stats?.role)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Servers */}
|
||||
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className={`${theme.accent} p-3 rounded-xl`}>
|
||||
<Server className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-sm ${theme.textSecondary}`}>Всего серверов</p>
|
||||
<p className="text-2xl font-bold">{stats?.total_servers || 0}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className={theme.textSecondary}>Мои серверы:</span>
|
||||
<span className="font-medium">{stats?.owned_servers?.length || 0}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className={theme.textSecondary}>Доступные:</span>
|
||||
<span className="font-medium">{stats?.accessible_servers?.length || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tickets */}
|
||||
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className={`${theme.accent} p-3 rounded-xl`}>
|
||||
<MessageSquare className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-sm ${theme.textSecondary}`}>Мои тикеты</p>
|
||||
<p className="text-2xl font-bold">{stats?.tickets?.total || 0}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-yellow-500">На рассмотрении:</span>
|
||||
<span className="font-medium">{stats?.tickets?.pending || 0}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-blue-500">В работе:</span>
|
||||
<span className="font-medium">{stats?.tickets?.in_progress || 0}</span>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-green-500">Закрыто:</span>
|
||||
<span className="font-medium">{stats?.tickets?.closed || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Role Info */}
|
||||
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className={`${theme.accent} p-3 rounded-xl`}>
|
||||
<Shield className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className={`text-sm ${theme.textSecondary}`}>Ваша роль</p>
|
||||
<p className="text-xl font-bold">{getRoleName(stats?.role)}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`text-sm ${theme.textSecondary}`}>
|
||||
{stats?.role === 'admin' && 'Полный доступ ко всем функциям панели'}
|
||||
{stats?.role === 'support' && 'Доступ к системе тикетов и поддержке'}
|
||||
{stats?.role === 'user' && 'Доступ к своим серверам и тикетам'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Servers List */}
|
||||
{stats?.owned_servers?.length > 0 && (
|
||||
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6`}>
|
||||
<h3 className="text-lg font-bold mb-4">Мои серверы</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{stats.owned_servers.map((server) => (
|
||||
<div
|
||||
key={server.name}
|
||||
className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Server className="w-5 h-5" />
|
||||
<div>
|
||||
<p className="font-medium">{server.displayName}</p>
|
||||
<p className={`text-xs ${theme.textSecondary}`}>{server.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Username Tab */}
|
||||
{activeTab === 'username' && (
|
||||
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6 max-w-2xl mx-auto`}>
|
||||
<h2 className="text-xl font-bold mb-6">Изменить имя пользователя</h2>
|
||||
<form onSubmit={handleUsernameChange} className="space-y-4">
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
|
||||
Текущее имя пользователя
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={stats?.username}
|
||||
disabled
|
||||
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.textSecondary} cursor-not-allowed`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
|
||||
Новое имя пользователя
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={usernameForm.new_username}
|
||||
onChange={(e) => setUsernameForm({ ...usernameForm, new_username: e.target.value })}
|
||||
placeholder="Введите новое имя"
|
||||
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
|
||||
/>
|
||||
<p className={`text-xs ${theme.textSecondary} mt-1`}>
|
||||
Минимум 3 символа
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
|
||||
Подтвердите паролем
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showUsernamePassword ? 'text' : 'password'}
|
||||
value={usernameForm.password}
|
||||
onChange={(e) => setUsernameForm({ ...usernameForm, password: e.target.value })}
|
||||
placeholder="Введите текущий пароль"
|
||||
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowUsernamePassword(!showUsernamePassword)}
|
||||
className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
|
||||
>
|
||||
{showUsernamePassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
|
||||
<p className={`text-sm ${theme.textSecondary}`}>
|
||||
⚠️ После изменения имени пользователя вы будете автоматически перелогинены с новым именем.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={usernameLoading}
|
||||
className={`w-full ${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl font-medium text-white transition disabled:opacity-50`}
|
||||
>
|
||||
{usernameLoading ? 'Изменение...' : 'Изменить имя пользователя'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Password Tab */}
|
||||
{activeTab === 'password' && (
|
||||
<div className={`${theme.card} ${theme.border} border rounded-2xl p-6 max-w-2xl mx-auto`}>
|
||||
<h2 className="text-xl font-bold mb-6">Изменить пароль</h2>
|
||||
<form onSubmit={handlePasswordChange} className="space-y-4">
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
|
||||
Текущий пароль
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showOldPassword ? 'text' : 'password'}
|
||||
value={passwordForm.old_password}
|
||||
onChange={(e) => setPasswordForm({ ...passwordForm, old_password: e.target.value })}
|
||||
placeholder="Введите текущий пароль"
|
||||
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowOldPassword(!showOldPassword)}
|
||||
className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
|
||||
>
|
||||
{showOldPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
|
||||
Новый пароль
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={showNewPassword ? 'text' : 'password'}
|
||||
value={passwordForm.new_password}
|
||||
onChange={(e) => setPasswordForm({ ...passwordForm, new_password: e.target.value })}
|
||||
placeholder="Введите новый пароль"
|
||||
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 pr-12 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewPassword(!showNewPassword)}
|
||||
className={`absolute right-3 top-1/2 -translate-y-1/2 ${theme.textSecondary} hover:${theme.text} transition`}
|
||||
>
|
||||
{showNewPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
<p className={`text-xs ${theme.textSecondary} mt-1`}>
|
||||
Минимум 6 символов
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className={`block text-sm font-medium mb-2 ${theme.text}`}>
|
||||
Подтвердите новый пароль
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={passwordForm.confirm_password}
|
||||
onChange={(e) => setPasswordForm({ ...passwordForm, confirm_password: e.target.value })}
|
||||
placeholder="Повторите новый пароль"
|
||||
className={`w-full ${theme.input} ${theme.border} border rounded-xl px-4 py-3 ${theme.text} focus:outline-none focus:ring-2 focus:ring-blue-500 transition`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={`${theme.tertiary} ${theme.border} border rounded-xl p-4`}>
|
||||
<p className={`text-sm ${theme.textSecondary}`}>
|
||||
⚠️ После изменения пароля используйте новый пароль для входа в систему.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={passwordLoading}
|
||||
className={`w-full ${theme.accent} ${theme.accentHover} px-6 py-3 rounded-xl font-medium text-white transition disabled:opacity-50`}
|
||||
>
|
||||
{passwordLoading ? 'Изменение...' : 'Изменить пароль'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
19
ГОТОВО.md
19
ГОТОВО.md
@@ -7,7 +7,7 @@
|
||||
- **Новый**: Sofa12345 / arkonsad123
|
||||
|
||||
### 2. Добавлена система тикетов 🎫
|
||||
- Кнопка "Тикеты" в header рядом с "Пользователи"
|
||||
- Кнопка "Тикеты" в header
|
||||
- Создание тикетов с темой и описанием
|
||||
- Чат для общения в тикете
|
||||
- Три статуса:
|
||||
@@ -21,7 +21,16 @@
|
||||
- Возможность отвечать на тикеты
|
||||
- Отдельный бейдж в интерфейсе
|
||||
|
||||
### 4. Улучшено управление пользователями
|
||||
### 4. Добавлен личный кабинет 👤
|
||||
- Кнопка "Личный кабинет" в header рядом с "Тикеты"
|
||||
- Три вкладки:
|
||||
- 📊 Обзор - статистика профиля
|
||||
- 👤 Имя пользователя - изменение имени
|
||||
- 🔒 Пароль - изменение пароля
|
||||
- Статистика по серверам и тикетам
|
||||
- Список своих серверов
|
||||
|
||||
### 5. Улучшено управление пользователями
|
||||
- Выпадающий список для выбора роли
|
||||
- Три роли: Пользователь, Тех. поддержка, Администратор
|
||||
- Цветные индикаторы ролей
|
||||
@@ -80,6 +89,9 @@ http://localhost:3000
|
||||
- ✅ Создание тикетов
|
||||
- ✅ Общение в своих тикетах
|
||||
- ✅ Смена темы интерфейса
|
||||
- ✅ Личный кабинет с статистикой
|
||||
- ✅ Изменение имени пользователя
|
||||
- ✅ Изменение пароля
|
||||
|
||||
### Для тех. поддержки
|
||||
- ✅ Все возможности пользователя
|
||||
@@ -110,6 +122,7 @@ MC Panel/
|
||||
│ ├── themes.js # Конфигурация тем
|
||||
│ └── components/
|
||||
│ ├── Auth.jsx # Авторизация
|
||||
│ ├── Profile.jsx # Личный кабинет
|
||||
│ ├── Tickets.jsx # Список тикетов
|
||||
│ ├── TicketChat.jsx # Чат тикета
|
||||
│ ├── CreateTicketModal.jsx # Создание тикета
|
||||
@@ -121,6 +134,7 @@ MC Panel/
|
||||
│
|
||||
└── Документация/
|
||||
├── ГОТОВО.md # Этот файл
|
||||
├── PROFILE_SYSTEM.md # Документация личного кабинета
|
||||
├── TICKETS_SYSTEM.md # Документация системы тикетов
|
||||
├── CHANGELOG.md # История изменений
|
||||
└── БЫСТРЫЙ_СТАРТ.md # Быстрый старт
|
||||
@@ -160,6 +174,7 @@ MC Panel/
|
||||
- ✅ Система пользователей
|
||||
- ✅ Система тикетов
|
||||
- ✅ Роль тех. поддержки
|
||||
- ✅ Личный кабинет
|
||||
- ✅ 5 тем оформления
|
||||
- ✅ Современный интерфейс
|
||||
|
||||
|
||||
183
ЛИЧНЫЙ_КАБИНЕТ_ГОТОВ.md
Normal file
183
ЛИЧНЫЙ_КАБИНЕТ_ГОТОВ.md
Normal file
@@ -0,0 +1,183 @@
|
||||
# ✅ Личный кабинет готов!
|
||||
|
||||
## 🎉 Что добавлено
|
||||
|
||||
### Кнопка "Личный кабинет"
|
||||
Расположена в header рядом с кнопкой "Тикеты". Доступна всем пользователям.
|
||||
|
||||
### Три вкладки
|
||||
|
||||
#### 1. 📊 Обзор
|
||||
**Информация о пользователе:**
|
||||
- Имя пользователя
|
||||
- Роль с цветным бейджем
|
||||
- Аватар
|
||||
|
||||
**Статистика:**
|
||||
- 🖥️ **Серверы**: всего, мои, доступные
|
||||
- 🎫 **Тикеты**: всего, на рассмотрении, в работе, закрыто
|
||||
- 🛡️ **Роль**: название и описание прав
|
||||
|
||||
**Список серверов:**
|
||||
- Все серверы пользователя
|
||||
- Название и ID
|
||||
- Красивые карточки
|
||||
|
||||
#### 2. 👤 Имя пользователя
|
||||
**Возможности:**
|
||||
- Просмотр текущего имени
|
||||
- Ввод нового имени (минимум 3 символа)
|
||||
- Подтверждение паролем
|
||||
- Автоматический перелогин
|
||||
|
||||
**Что обновляется:**
|
||||
- Владельцы серверов
|
||||
- Доступы к серверам
|
||||
- JWT токен
|
||||
|
||||
#### 3. 🔒 Пароль
|
||||
**Возможности:**
|
||||
- Ввод текущего пароля
|
||||
- Ввод нового пароля (минимум 6 символов)
|
||||
- Подтверждение нового пароля
|
||||
- Показ/скрытие паролей (иконка глаза)
|
||||
|
||||
**Безопасность:**
|
||||
- Проверка текущего пароля
|
||||
- Проверка совпадения новых паролей
|
||||
- Хеширование (bcrypt)
|
||||
|
||||
## 🚀 Как использовать
|
||||
|
||||
### Открыть личный кабинет
|
||||
1. Войдите в панель
|
||||
2. Нажмите кнопку "Личный кабинет" в header
|
||||
3. Откроется страница с вкладками
|
||||
|
||||
### Посмотреть статистику
|
||||
1. Откройте вкладку "Обзор"
|
||||
2. Посмотрите информацию о профиле
|
||||
3. Посмотрите статистику
|
||||
4. Посмотрите список серверов
|
||||
|
||||
### Изменить имя пользователя
|
||||
1. Откройте вкладку "Имя пользователя"
|
||||
2. Введите новое имя (минимум 3 символа)
|
||||
3. Введите текущий пароль
|
||||
4. Нажмите "Изменить имя пользователя"
|
||||
5. Вы будете автоматически перелогинены
|
||||
|
||||
⚠️ **Важно**: После изменения имени обновятся все серверы и доступы.
|
||||
|
||||
### Изменить пароль
|
||||
1. Откройте вкладку "Пароль"
|
||||
2. Введите текущий пароль
|
||||
3. Введите новый пароль (минимум 6 символов)
|
||||
4. Подтвердите новый пароль
|
||||
5. Нажмите "Изменить пароль"
|
||||
|
||||
⚠️ **Важно**: После изменения пароля используйте новый пароль для входа.
|
||||
|
||||
## 🎨 Дизайн
|
||||
|
||||
### Современный интерфейс
|
||||
- Вкладки с плавными переходами
|
||||
- Цветные карточки статистики
|
||||
- Иконки для каждого раздела
|
||||
- Адаптивный дизайн
|
||||
|
||||
### Формы
|
||||
- Валидация полей
|
||||
- Показ/скрытие паролей
|
||||
- Предупреждения
|
||||
- Индикация загрузки
|
||||
|
||||
### Цветовые схемы
|
||||
- Работает со всеми 5 темами
|
||||
- Градиентный логотип
|
||||
- Цветные бейджи ролей
|
||||
|
||||
## 📋 API Endpoints
|
||||
|
||||
### PUT /api/profile/username
|
||||
Изменить имя пользователя
|
||||
|
||||
```bash
|
||||
curl -X PUT http://localhost:8000/api/profile/username \
|
||||
-H "Authorization: Bearer YOUR_TOKEN" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"new_username": "NewUsername",
|
||||
"password": "current_password"
|
||||
}'
|
||||
```
|
||||
|
||||
### PUT /api/profile/password
|
||||
Изменить пароль
|
||||
|
||||
```bash
|
||||
curl -X PUT http://localhost:8000/api/profile/password \
|
||||
-H "Authorization: Bearer YOUR_TOKEN" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"old_password": "old_password",
|
||||
"new_password": "new_password"
|
||||
}'
|
||||
```
|
||||
|
||||
### GET /api/profile/stats
|
||||
Получить статистику профиля
|
||||
|
||||
```bash
|
||||
curl -X GET http://localhost:8000/api/profile/stats \
|
||||
-H "Authorization: Bearer YOUR_TOKEN"
|
||||
```
|
||||
|
||||
## 🔐 Безопасность
|
||||
|
||||
### Изменение имени
|
||||
1. ✅ Проверка пароля
|
||||
2. ✅ Проверка уникальности
|
||||
3. ✅ Обновление владельцев серверов
|
||||
4. ✅ Обновление доступов
|
||||
5. ✅ Новый JWT токен
|
||||
|
||||
### Изменение пароля
|
||||
1. ✅ Проверка текущего пароля
|
||||
2. ✅ Проверка длины (минимум 6 символов)
|
||||
3. ✅ Хеширование (bcrypt)
|
||||
|
||||
## ✅ Готово!
|
||||
|
||||
Личный кабинет полностью интегрирован в MC Panel. Все пользователи могут:
|
||||
- 📊 Просматривать статистику
|
||||
- 👤 Изменять имя пользователя
|
||||
- 🔒 Изменять пароль
|
||||
- 🖥️ Видеть свои серверы
|
||||
- 🎫 Видеть статистику по тикетам
|
||||
|
||||
### Тестирование
|
||||
|
||||
1. **Войдите в панель**
|
||||
- Логин: Sofa12345
|
||||
- Пароль: arkonsad123
|
||||
|
||||
2. **Откройте личный кабинет**
|
||||
- Нажмите кнопку "Личный кабинет"
|
||||
|
||||
3. **Посмотрите статистику**
|
||||
- Вкладка "Обзор"
|
||||
|
||||
4. **Измените имя (опционально)**
|
||||
- Вкладка "Имя пользователя"
|
||||
- Введите новое имя и пароль
|
||||
|
||||
5. **Измените пароль (опционально)**
|
||||
- Вкладка "Пароль"
|
||||
- Введите старый и новый пароли
|
||||
|
||||
## 🎯 Что дальше?
|
||||
|
||||
Система личного кабинета готова к использованию. Теперь пользователи могут полностью управлять своим профилем!
|
||||
|
||||
**Наслаждайтесь! 🚀**
|
||||
Reference in New Issue
Block a user