Add Personal account
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user