nikita
@@ -1,730 +1,5 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { agentApiService } from "@/modules/agent";
|
||||
import type { TokenUser, TokenCreate, TokenUpdatePermissions, TokenPasswordReset } from "@/modules/agent";
|
||||
import { FiUsers, FiUserPlus, FiEdit2, FiTrash2, FiUnlock, FiLock, FiKey, FiX, FiCheck, FiSearch } from "react-icons/fi";
|
||||
import { AdminPanel } from "@/modules/admin";
|
||||
|
||||
export const AdminPage: React.FC = () => {
|
||||
const [users, setUsers] = useState<TokenUser[]>([]);
|
||||
const [inactiveUsers, setInactiveUsers] = useState<TokenUser[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<"active" | "inactive">("active");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
// Modal states
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [showEditModal, setShowEditModal] = useState(false);
|
||||
const [showPasswordModal, setShowPasswordModal] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState<TokenUser | null>(null);
|
||||
|
||||
// Form states
|
||||
const [createData, setCreateData] = useState<TokenCreate>({
|
||||
login: "",
|
||||
name: "",
|
||||
last_name: "",
|
||||
password: "",
|
||||
permission_admin: false,
|
||||
permission_manage_agent: false,
|
||||
permission_view: false,
|
||||
is_active: false,
|
||||
});
|
||||
|
||||
const [editData, setEditData] = useState<TokenUpdatePermissions>({
|
||||
is_active: false,
|
||||
permission_admin: false,
|
||||
permission_manage_agent: false,
|
||||
permission_view: false,
|
||||
});
|
||||
|
||||
const [passwordData, setPasswordData] = useState<TokenPasswordReset>({
|
||||
new_password: "",
|
||||
});
|
||||
|
||||
const fetchUsers = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const [active, inactive] = await Promise.all([
|
||||
agentApiService.getUsers(),
|
||||
agentApiService.getInactiveUsers(),
|
||||
]);
|
||||
setUsers(active);
|
||||
setInactiveUsers(inactive);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Ошибка при загрузке пользователей");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, [fetchUsers]);
|
||||
|
||||
const handleCreateUser = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
try {
|
||||
await agentApiService.createUser(createData);
|
||||
setSuccessMessage("Пользователь успешно создан");
|
||||
setShowCreateModal(false);
|
||||
setCreateData({
|
||||
login: "",
|
||||
name: "",
|
||||
last_name: "",
|
||||
password: "",
|
||||
permission_admin: false,
|
||||
permission_manage_agent: false,
|
||||
permission_view: false,
|
||||
is_active: false,
|
||||
});
|
||||
await fetchUsers();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Ошибка при создании пользователя");
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdatePermissions = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!selectedUser) return;
|
||||
|
||||
setError(null);
|
||||
try {
|
||||
await agentApiService.updateUserPermissions(selectedUser.login, editData);
|
||||
setSuccessMessage("Права пользователя обновлены");
|
||||
setShowEditModal(false);
|
||||
await fetchUsers();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Ошибка при обновлении прав");
|
||||
}
|
||||
};
|
||||
|
||||
const handleResetPassword = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!selectedUser) return;
|
||||
|
||||
setError(null);
|
||||
try {
|
||||
await agentApiService.resetUserPassword(selectedUser.login, passwordData);
|
||||
setSuccessMessage("Пароль изменен");
|
||||
setShowPasswordModal(false);
|
||||
setPasswordData({ new_password: "" });
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Ошибка при сбросе пароля");
|
||||
}
|
||||
};
|
||||
|
||||
const handleActivateUser = async (login: string) => {
|
||||
setError(null);
|
||||
try {
|
||||
await agentApiService.activateUser(login);
|
||||
setSuccessMessage("Пользователь активирован");
|
||||
await fetchUsers();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Ошибка при активации пользователя");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeactivateUser = async (login: string) => {
|
||||
setError(null);
|
||||
try {
|
||||
await agentApiService.deactivateUser(login);
|
||||
setSuccessMessage("Пользователь деактивирован");
|
||||
await fetchUsers();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Ошибка при деактивации пользователя");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteUser = async (login: string) => {
|
||||
if (!confirm(`Вы уверены, что хотите удалить пользователя ${login}?`)) return;
|
||||
|
||||
setError(null);
|
||||
try {
|
||||
await agentApiService.deleteUser(login);
|
||||
setSuccessMessage("Пользователь удален");
|
||||
await fetchUsers();
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : "Ошибка при удалении пользователя");
|
||||
}
|
||||
};
|
||||
|
||||
const openEditModal = (user: TokenUser) => {
|
||||
setSelectedUser(user);
|
||||
setEditData({
|
||||
is_active: user.is_active,
|
||||
permission_admin: user.permission_admin,
|
||||
permission_manage_agent: user.permission_manage_agent,
|
||||
permission_view: user.permission_view,
|
||||
});
|
||||
setShowEditModal(true);
|
||||
};
|
||||
|
||||
const openPasswordModal = (user: TokenUser) => {
|
||||
setSelectedUser(user);
|
||||
setPasswordData({ new_password: "" });
|
||||
setShowPasswordModal(true);
|
||||
};
|
||||
|
||||
const filteredUsers = (activeTab === "active" ? users : inactiveUsers).filter(
|
||||
(user) =>
|
||||
user.login.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
user.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
user.last_name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
|
||||
const inputStyle: React.CSSProperties = {
|
||||
width: "100%",
|
||||
padding: "10px 12px",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "8px",
|
||||
backgroundColor: "var(--input-bg)",
|
||||
color: "var(--text-primary)",
|
||||
fontSize: "14px",
|
||||
};
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
display: "block",
|
||||
marginBottom: "8px",
|
||||
color: "var(--text-secondary)",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
};
|
||||
|
||||
const buttonBaseStyle: React.CSSProperties = {
|
||||
padding: "8px 16px",
|
||||
borderRadius: "8px",
|
||||
border: "none",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
cursor: "pointer",
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: "6px",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen py-8 px-4"
|
||||
style={{ backgroundColor: "var(--bg-primary)" }}
|
||||
>
|
||||
<div style={{ maxWidth: "1200px", margin: "0 auto" }}>
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div
|
||||
className="w-14 h-14 rounded-xl flex items-center justify-center"
|
||||
style={{ backgroundColor: "var(--bg-secondary)" }}
|
||||
>
|
||||
<FiUsers className="w-7 h-7" style={{ color: "var(--accent)" }} />
|
||||
</div>
|
||||
<div>
|
||||
<h1
|
||||
className="text-3xl font-bold mb-1"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Управление пользователями
|
||||
</h1>
|
||||
<p style={{ color: "var(--text-secondary)", fontSize: "16px" }}>
|
||||
Администрирование учетных записей
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
{successMessage && (
|
||||
<div
|
||||
className="mb-6 p-4 rounded-lg border text-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--success-bg)",
|
||||
borderColor: "var(--success-border)",
|
||||
color: "var(--success-text)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>{successMessage}</span>
|
||||
<button onClick={() => setSuccessMessage(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "inherit" }}>
|
||||
<FiX size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && (
|
||||
<div
|
||||
className="mb-6 p-4 rounded-lg border text-sm"
|
||||
style={{
|
||||
backgroundColor: "var(--error-bg)",
|
||||
borderColor: "var(--error-border)",
|
||||
color: "var(--error-text)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<span>{error}</span>
|
||||
<button onClick={() => setError(null)} style={{ background: "none", border: "none", cursor: "pointer", color: "inherit" }}>
|
||||
<FiX size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tabs and Actions */}
|
||||
<div className="mb-6">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setActiveTab("active")}
|
||||
className="px-4 py-2 rounded-lg border transition-all font-medium"
|
||||
style={{
|
||||
backgroundColor: activeTab === "active" ? "var(--accent)" : "var(--input-bg)",
|
||||
color: activeTab === "active" ? "var(--accent-text)" : "var(--text-primary)",
|
||||
borderColor: activeTab === "active" ? "var(--accent)" : "var(--border)",
|
||||
}}
|
||||
>
|
||||
Активные ({users.length})
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab("inactive")}
|
||||
className="px-4 py-2 rounded-lg border transition-all font-medium"
|
||||
style={{
|
||||
backgroundColor: activeTab === "inactive" ? "var(--accent)" : "var(--input-bg)",
|
||||
color: activeTab === "inactive" ? "var(--accent-text)" : "var(--text-primary)",
|
||||
borderColor: activeTab === "inactive" ? "var(--accent)" : "var(--border)",
|
||||
}}
|
||||
>
|
||||
Неактивные ({inactiveUsers.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Create Button */}
|
||||
<button
|
||||
onClick={() => setShowCreateModal(true)}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-lg transition-all font-medium"
|
||||
style={{
|
||||
backgroundColor: "var(--button-primary)",
|
||||
color: "var(--button-primary-text)",
|
||||
boxShadow: "0 4px 14px var(--shadow-color)",
|
||||
}}
|
||||
>
|
||||
<FiUserPlus size={16} />
|
||||
Создать пользователя
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="relative">
|
||||
<FiSearch
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: "12px",
|
||||
top: "50%",
|
||||
transform: "translateY(-50%)",
|
||||
color: "var(--text-muted)",
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Поиск по логину, имени или фамилии..."
|
||||
className="w-full pl-10 pr-4 py-2.5 rounded-lg border"
|
||||
style={{
|
||||
backgroundColor: "var(--input-bg)",
|
||||
borderColor: "var(--border)",
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Users Table */}
|
||||
{isLoading ? (
|
||||
<div className="text-center py-12" style={{ color: "var(--text-secondary)" }}>
|
||||
Загрузка...
|
||||
</div>
|
||||
) : filteredUsers.length === 0 ? (
|
||||
<div
|
||||
className="text-center py-12 rounded-xl border border-dashed"
|
||||
style={{ color: "var(--text-muted)", borderColor: "var(--border)" }}
|
||||
>
|
||||
Пользователи не найдены
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
className="rounded-xl border overflow-hidden"
|
||||
style={{
|
||||
backgroundColor: "var(--card-bg)",
|
||||
borderColor: "var(--border)",
|
||||
}}
|
||||
>
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: "var(--bg-secondary)" }}>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Логин</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Имя</th>
|
||||
<th className="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Фамилия</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Админ</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Управление</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Просмотр</th>
|
||||
<th className="px-4 py-3 text-center text-xs font-semibold uppercase tracking-wider" style={{ color: "var(--text-secondary)" }}>Действия</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredUsers.map((user, index) => (
|
||||
<tr
|
||||
key={user.id}
|
||||
className="border-t"
|
||||
style={{
|
||||
borderColor: "var(--border)",
|
||||
backgroundColor: index % 2 === 0 ? "var(--card-bg)" : "var(--bg-secondary)",
|
||||
}}
|
||||
>
|
||||
<td className="px-4 py-3 font-mono text-sm" style={{ color: "var(--text-primary)" }}>{user.login}</td>
|
||||
<td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>{user.name}</td>
|
||||
<td className="px-4 py-3 text-sm" style={{ color: "var(--text-primary)" }}>{user.last_name}</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{user.permission_admin ? (
|
||||
<FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
|
||||
) : (
|
||||
<FiX style={{ color: "var(--error-text)", display: "inline" }} />
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{user.permission_manage_agent ? (
|
||||
<FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
|
||||
) : (
|
||||
<FiX style={{ color: "var(--error-text)", display: "inline" }} />
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
{user.permission_view ? (
|
||||
<FiCheck style={{ color: "var(--success-text)", display: "inline" }} />
|
||||
) : (
|
||||
<FiX style={{ color: "var(--error-text)", display: "inline" }} />
|
||||
)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-center">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<button
|
||||
onClick={() => openEditModal(user)}
|
||||
className="p-2 rounded-lg transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--accent)",
|
||||
color: "var(--accent-text)",
|
||||
}}
|
||||
title="Редактировать права"
|
||||
>
|
||||
<FiEdit2 size={14} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => openPasswordModal(user)}
|
||||
className="p-2 rounded-lg transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--warning-bg)",
|
||||
color: "var(--warning-text)",
|
||||
}}
|
||||
title="Сбросить пароль"
|
||||
>
|
||||
<FiKey size={14} />
|
||||
</button>
|
||||
{activeTab === "active" ? (
|
||||
<button
|
||||
onClick={() => handleDeactivateUser(user.login)}
|
||||
className="p-2 rounded-lg transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--warning-bg)",
|
||||
color: "var(--warning-text)",
|
||||
}}
|
||||
title="Деактивировать"
|
||||
>
|
||||
<FiLock size={14} />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => handleActivateUser(user.login)}
|
||||
className="p-2 rounded-lg transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--success-bg)",
|
||||
color: "var(--success-text)",
|
||||
border: "1px solid var(--success-border)",
|
||||
}}
|
||||
title="Активировать"
|
||||
>
|
||||
<FiUnlock size={14} />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={() => handleDeleteUser(user.login)}
|
||||
className="p-2 rounded-lg transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--error-bg)",
|
||||
color: "var(--error-text)",
|
||||
border: "1px solid var(--error-border)",
|
||||
}}
|
||||
title="Удалить"
|
||||
>
|
||||
<FiTrash2 size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Create User Modal */}
|
||||
{showCreateModal && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div
|
||||
className="rounded-2xl shadow-2xl border w-full max-w-md"
|
||||
style={{ backgroundColor: "var(--card-bg)" }}
|
||||
>
|
||||
<div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
|
||||
<h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>Создать пользователя</h2>
|
||||
<button onClick={() => setShowCreateModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
|
||||
<FiX size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleCreateUser} className="p-6 space-y-4">
|
||||
<div>
|
||||
<label style={labelStyle}>Логин *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={createData.login}
|
||||
onChange={(e) => setCreateData({ ...createData, login: e.target.value })}
|
||||
required
|
||||
style={inputStyle}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={labelStyle}>Имя *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={createData.name}
|
||||
onChange={(e) => setCreateData({ ...createData, name: e.target.value })}
|
||||
required
|
||||
style={inputStyle}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={labelStyle}>Фамилия *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={createData.last_name}
|
||||
onChange={(e) => setCreateData({ ...createData, last_name: e.target.value })}
|
||||
required
|
||||
style={inputStyle}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={labelStyle}>Пароль *</label>
|
||||
<input
|
||||
type="password"
|
||||
value={createData.password}
|
||||
onChange={(e) => setCreateData({ ...createData, password: e.target.value })}
|
||||
required
|
||||
style={inputStyle}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={createData.permission_admin}
|
||||
onChange={(e) => setCreateData({ ...createData, permission_admin: e.target.checked })}
|
||||
/>
|
||||
<span style={{ color: "var(--text-primary)" }}>Администратор</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={createData.permission_manage_agent}
|
||||
onChange={(e) => setCreateData({ ...createData, permission_manage_agent: e.target.checked })}
|
||||
/>
|
||||
<span style={{ color: "var(--text-primary)" }}>Управление агентами</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={createData.permission_view}
|
||||
onChange={(e) => setCreateData({ ...createData, permission_view: e.target.checked })}
|
||||
/>
|
||||
<span style={{ color: "var(--text-primary)" }}>Просмотр</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={createData.is_active}
|
||||
onChange={(e) => setCreateData({ ...createData, is_active: e.target.checked })}
|
||||
/>
|
||||
<span style={{ color: "var(--text-primary)" }}>Активен сразу</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowCreateModal(false)}
|
||||
className="flex-1 px-4 py-2 rounded-lg border transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--input-bg)",
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 rounded-lg transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--button-primary)",
|
||||
color: "var(--button-primary-text)",
|
||||
}}
|
||||
>
|
||||
Создать
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Edit Permissions Modal */}
|
||||
{showEditModal && selectedUser && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div
|
||||
className="rounded-2xl shadow-2xl border w-full max-w-md"
|
||||
style={{ backgroundColor: "var(--card-bg)" }}
|
||||
>
|
||||
<div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
|
||||
<h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>
|
||||
Редактировать: {selectedUser.login}
|
||||
</h2>
|
||||
<button onClick={() => setShowEditModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
|
||||
<FiX size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleUpdatePermissions} className="p-6 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editData.permission_admin || false}
|
||||
onChange={(e) => setEditData({ ...editData, permission_admin: e.target.checked })}
|
||||
/>
|
||||
<span style={{ color: "var(--text-primary)" }}>Администратор</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editData.permission_manage_agent || false}
|
||||
onChange={(e) => setEditData({ ...editData, permission_manage_agent: e.target.checked })}
|
||||
/>
|
||||
<span style={{ color: "var(--text-primary)" }}>Управление агентами</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editData.permission_view || false}
|
||||
onChange={(e) => setEditData({ ...editData, permission_view: e.target.checked })}
|
||||
/>
|
||||
<span style={{ color: "var(--text-primary)" }}>Просмотр</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editData.is_active || false}
|
||||
onChange={(e) => setEditData({ ...editData, is_active: e.target.checked })}
|
||||
/>
|
||||
<span style={{ color: "var(--text-primary)" }}>Активен</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowEditModal(false)}
|
||||
className="flex-1 px-4 py-2 rounded-lg border transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--input-bg)",
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 rounded-lg transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--button-primary)",
|
||||
color: "var(--button-primary-text)",
|
||||
}}
|
||||
>
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Reset Password Modal */}
|
||||
{showPasswordModal && selectedUser && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div
|
||||
className="rounded-2xl shadow-2xl border w-full max-w-md"
|
||||
style={{ backgroundColor: "var(--card-bg)" }}
|
||||
>
|
||||
<div className="flex items-center justify-between p-6 border-b" style={{ borderColor: "var(--border)" }}>
|
||||
<h2 className="text-xl font-bold" style={{ color: "var(--text-primary)" }}>
|
||||
Сброс пароля: {selectedUser.login}
|
||||
</h2>
|
||||
<button onClick={() => setShowPasswordModal(false)} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-secondary)" }}>
|
||||
<FiX size={24} />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleResetPassword} className="p-6 space-y-4">
|
||||
<div>
|
||||
<label style={labelStyle}>Новый пароль *</label>
|
||||
<input
|
||||
type="password"
|
||||
value={passwordData.new_password}
|
||||
onChange={(e) => setPasswordData({ new_password: e.target.value })}
|
||||
required
|
||||
style={inputStyle}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPasswordModal(false)}
|
||||
className="flex-1 px-4 py-2 rounded-lg border transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--input-bg)",
|
||||
color: "var(--text-primary)",
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="flex-1 px-4 py-2 rounded-lg transition-all"
|
||||
style={{
|
||||
backgroundColor: "var(--button-primary)",
|
||||
color: "var(--button-primary-text)",
|
||||
}}
|
||||
>
|
||||
Сбросить
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
export const AdminPage = () => {
|
||||
return <AdminPanel />;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user