basic AI front epta
This commit is contained in:
arrelin
228
frontend/src/pages/AdminPanel.tsx
Normal file
228
frontend/src/pages/AdminPanel.tsx
Normal file
@@ -0,0 +1,228 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { authApi, familyApi } from '../api/client';
|
||||
import { useStore } from '../store/useStore';
|
||||
|
||||
export default function AdminPanel() {
|
||||
const navigate = useNavigate();
|
||||
const { isAdmin, setIsAdmin, logout: storeLogout } = useStore();
|
||||
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [username, setUsername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [loginError, setLoginError] = useState('');
|
||||
|
||||
const [newFamilyName, setNewFamilyName] = useState('');
|
||||
const [families, setFamilies] = useState<Array<{ id: number; name: string }>>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isAdmin) {
|
||||
setIsAuthenticated(true);
|
||||
loadFamilies();
|
||||
}
|
||||
}, [isAdmin]);
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoginError('');
|
||||
|
||||
try {
|
||||
const response = await authApi.login({ username, password });
|
||||
if (response.data.success && response.data.is_admin) {
|
||||
setIsAdmin(true);
|
||||
setIsAuthenticated(true);
|
||||
loadFamilies();
|
||||
} else {
|
||||
setLoginError('Доступ запрещен. Требуются права администратора.');
|
||||
}
|
||||
} catch (err) {
|
||||
setLoginError('Неверные учетные данные');
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await authApi.logout();
|
||||
storeLogout();
|
||||
setIsAuthenticated(false);
|
||||
setUsername('');
|
||||
setPassword('');
|
||||
navigate('/');
|
||||
} catch (err) {
|
||||
console.error('Logout error:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const loadFamilies = async () => {
|
||||
try {
|
||||
const response = await familyApi.getAll();
|
||||
setFamilies(response.data);
|
||||
} catch (err) {
|
||||
console.error('Error loading families:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateFamily = async () => {
|
||||
if (!newFamilyName.trim()) return;
|
||||
|
||||
try {
|
||||
await familyApi.create({ name: newFamilyName });
|
||||
setNewFamilyName('');
|
||||
loadFamilies();
|
||||
} catch (err) {
|
||||
alert('Ошибка создания семьи');
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteFamily = async (id: number) => {
|
||||
if (!confirm('Удалить семью?')) return;
|
||||
|
||||
try {
|
||||
await familyApi.delete(id);
|
||||
loadFamilies();
|
||||
} catch (err) {
|
||||
alert('Ошибка удаления семьи');
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
|
||||
<div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-6 text-center">
|
||||
Вход в админ панель
|
||||
</h1>
|
||||
|
||||
{loginError && (
|
||||
<div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
|
||||
{loginError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Логин
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Пароль
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
|
||||
>
|
||||
Войти
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="w-full mt-4 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition"
|
||||
>
|
||||
Назад
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 py-12 px-4">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-gray-900">
|
||||
Админ панель
|
||||
</h1>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
|
||||
>
|
||||
Выход
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-8 mb-6">
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mb-4">
|
||||
Создать новую семью
|
||||
</h2>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Название семьи"
|
||||
value={newFamilyName}
|
||||
onChange={(e) => setNewFamilyName(e.target.value)}
|
||||
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
<button
|
||||
onClick={handleCreateFamily}
|
||||
className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
|
||||
>
|
||||
Создать
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-md p-8">
|
||||
<h2 className="text-2xl font-semibold text-gray-900 mb-4">
|
||||
Список семей
|
||||
</h2>
|
||||
|
||||
{families.length === 0 ? (
|
||||
<p className="text-gray-500 text-center py-4">
|
||||
Семьи не найдены
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{families.map((family) => (
|
||||
<div
|
||||
key={family.id}
|
||||
className="flex justify-between items-center p-4 bg-gray-50 rounded-lg"
|
||||
>
|
||||
<span className="text-lg font-medium text-gray-900">
|
||||
{family.name}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleDeleteFamily(family.id)}
|
||||
className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition"
|
||||
>
|
||||
Удалить
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => navigate('/')}
|
||||
className="mt-6 px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition"
|
||||
>
|
||||
На главную
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user