731 lines
30 KiB
TypeScript
731 lines
30 KiB
TypeScript
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";
|
||
|
||
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>
|
||
);
|
||
};
|