nikita
@@ -120,6 +120,26 @@ export const Navigation = () => {
|
|||||||
{isDark ? <FaSun size={12} /> : <FaMoon size={12} />}
|
{isDark ? <FaSun size={12} /> : <FaMoon size={12} />}
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
{/* Админка */}
|
||||||
|
<button
|
||||||
|
onClick={() => navigate("/admin")}
|
||||||
|
className="p-1.5 rounded-lg transition-colors"
|
||||||
|
style={{
|
||||||
|
backgroundColor:
|
||||||
|
location.pathname === "/admin"
|
||||||
|
? "var(--accent)"
|
||||||
|
: "var(--bg-secondary)",
|
||||||
|
color:
|
||||||
|
location.pathname === "/admin"
|
||||||
|
? "var(--accent-text)"
|
||||||
|
: "var(--text-secondary)",
|
||||||
|
border: "1px solid var(--border)",
|
||||||
|
}}
|
||||||
|
title="Админка"
|
||||||
|
>
|
||||||
|
<FaUsers size={12} />
|
||||||
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
logout();
|
logout();
|
||||||
|
|||||||
@@ -0,0 +1,68 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { FaUsers, FaShieldAlt } from "react-icons/fa";
|
||||||
|
import { useAdminStore } from "./store/useAdminStore";
|
||||||
|
import { UserCard } from "./components/UserCard";
|
||||||
|
|
||||||
|
export const AdminPanel: React.FC = () => {
|
||||||
|
const users = useAdminStore((s) => s.users);
|
||||||
|
|
||||||
|
const activeCount = users.filter((u) => u.is_active).length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ padding: "24px", maxWidth: "900px", margin: "0 auto" }}>
|
||||||
|
{/* Header */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
marginBottom: "24px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "40px",
|
||||||
|
height: "40px",
|
||||||
|
borderRadius: "8px",
|
||||||
|
backgroundColor: "var(--accent)",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FaShieldAlt size={18} style={{ color: "var(--accent-text)" }} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1
|
||||||
|
style={{
|
||||||
|
fontSize: "18px",
|
||||||
|
fontWeight: 600,
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
margin: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Управление пользователями
|
||||||
|
</h1>
|
||||||
|
<span style={{ fontSize: "12px", color: "var(--text-secondary)" }}>
|
||||||
|
{activeCount} / {users.length} активных
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Users list */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: "12px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{users.map((user) => (
|
||||||
|
<UserCard key={user.id} user={user} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,172 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { FaUser, FaCheck, FaTimes } from "react-icons/fa";
|
||||||
|
import type { AdminUser, PermissionKey } from "../types";
|
||||||
|
import { useAdminStore } from "../store/useAdminStore";
|
||||||
|
|
||||||
|
interface UserCardProps {
|
||||||
|
user: AdminUser;
|
||||||
|
}
|
||||||
|
|
||||||
|
const permissions: { key: PermissionKey; label: string }[] = [
|
||||||
|
{ key: "permission_view", label: "View" },
|
||||||
|
{ key: "permission_manage_agent", label: "Manage Agent" },
|
||||||
|
{ key: "permission_admin", label: "Admin" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const UserCard: React.FC<UserCardProps> = ({ user }) => {
|
||||||
|
const toggleActive = useAdminStore((s) => s.toggleActive);
|
||||||
|
const togglePermission = useAdminStore((s) => s.togglePermission);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: "16px",
|
||||||
|
backgroundColor: "var(--card-bg)",
|
||||||
|
border: "1px solid var(--border)",
|
||||||
|
borderRadius: "8px",
|
||||||
|
transition: "all 0.2s",
|
||||||
|
opacity: user.is_active ? 1 : 0.6,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Header: User info + Active toggle */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
marginBottom: "16px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "40px",
|
||||||
|
height: "40px",
|
||||||
|
borderRadius: "50%",
|
||||||
|
backgroundColor: user.is_active
|
||||||
|
? "var(--accent)"
|
||||||
|
: "var(--text-muted)",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<FaUser size={16} style={{ color: "var(--card-bg)" }} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: "14px",
|
||||||
|
fontWeight: 600,
|
||||||
|
color: "var(--text-primary)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.name} {user.last_name}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: "12px",
|
||||||
|
color: "var(--text-secondary)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.login}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Active toggle */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "8px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontSize: "11px",
|
||||||
|
color: user.is_active
|
||||||
|
? "var(--success-text, #22c55e)"
|
||||||
|
: "var(--error-text, #ef4444)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user.is_active ? "Active" : "Inactive"}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => toggleActive(user.id)}
|
||||||
|
style={{
|
||||||
|
width: "40px",
|
||||||
|
height: "22px",
|
||||||
|
borderRadius: "11px",
|
||||||
|
border: "none",
|
||||||
|
backgroundColor: user.is_active ? "#22c55e" : "#6b7280",
|
||||||
|
cursor: "pointer",
|
||||||
|
position: "relative",
|
||||||
|
transition: "background-color 0.2s",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "16px",
|
||||||
|
height: "16px",
|
||||||
|
borderRadius: "50%",
|
||||||
|
backgroundColor: "#fff",
|
||||||
|
position: "absolute",
|
||||||
|
top: "3px",
|
||||||
|
left: user.is_active ? "21px" : "3px",
|
||||||
|
transition: "left 0.2s",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Permissions */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
gap: "16px",
|
||||||
|
paddingTop: "12px",
|
||||||
|
borderTop: "1px solid var(--border)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{permissions.map(({ key, label }) => (
|
||||||
|
<label
|
||||||
|
key={key}
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "6px",
|
||||||
|
cursor: "pointer",
|
||||||
|
fontSize: "12px",
|
||||||
|
color: "var(--text-secondary)",
|
||||||
|
userSelect: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
onClick={() => togglePermission(user.id, key)}
|
||||||
|
style={{
|
||||||
|
width: "18px",
|
||||||
|
height: "18px",
|
||||||
|
borderRadius: "4px",
|
||||||
|
border: "1px solid",
|
||||||
|
borderColor: user[key] ? "var(--accent)" : "var(--border)",
|
||||||
|
backgroundColor: user[key] ? "var(--accent)" : "transparent",
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
transition: "all 0.15s",
|
||||||
|
cursor: "pointer",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{user[key] && (
|
||||||
|
<FaCheck size={10} style={{ color: "var(--accent-text, #fff)" }} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{label}
|
||||||
|
</label>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
export { AdminPanel } from "./AdminPanel";
|
||||||
|
export { useAdminStore } from "./store/useAdminStore";
|
||||||
|
export type { AdminUser } from "./types";
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
import { create } from "zustand";
|
||||||
|
import type { AdminUser, PermissionKey } from "../types";
|
||||||
|
|
||||||
|
const mockUsers: AdminUser[] = [
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
login: "admin",
|
||||||
|
name: "Иван",
|
||||||
|
last_name: "Петров",
|
||||||
|
is_active: true,
|
||||||
|
permission_admin: true,
|
||||||
|
permission_manage_agent: true,
|
||||||
|
permission_view: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2",
|
||||||
|
login: "operator",
|
||||||
|
name: "Анна",
|
||||||
|
last_name: "Сидорова",
|
||||||
|
is_active: true,
|
||||||
|
permission_admin: false,
|
||||||
|
permission_manage_agent: true,
|
||||||
|
permission_view: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3",
|
||||||
|
login: "viewer",
|
||||||
|
name: "Сергей",
|
||||||
|
last_name: "Козлов",
|
||||||
|
is_active: true,
|
||||||
|
permission_admin: false,
|
||||||
|
permission_manage_agent: false,
|
||||||
|
permission_view: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4",
|
||||||
|
login: "dev_user",
|
||||||
|
name: "Мария",
|
||||||
|
last_name: "Новикова",
|
||||||
|
is_active: false,
|
||||||
|
permission_admin: false,
|
||||||
|
permission_manage_agent: true,
|
||||||
|
permission_view: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
interface AdminState {
|
||||||
|
users: AdminUser[];
|
||||||
|
toggleActive: (id: string) => void;
|
||||||
|
togglePermission: (id: string, permission: PermissionKey) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useAdminStore = create<AdminState>((set) => ({
|
||||||
|
users: mockUsers,
|
||||||
|
|
||||||
|
toggleActive: (id: string) =>
|
||||||
|
set((state) => ({
|
||||||
|
users: state.users.map((u) =>
|
||||||
|
u.id === id ? { ...u, is_active: !u.is_active } : u,
|
||||||
|
),
|
||||||
|
})),
|
||||||
|
|
||||||
|
togglePermission: (id: string, permission: PermissionKey) =>
|
||||||
|
set((state) => ({
|
||||||
|
users: state.users.map((u) =>
|
||||||
|
u.id === id ? { ...u, [permission]: !u[permission] } : u,
|
||||||
|
),
|
||||||
|
})),
|
||||||
|
}));
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
export interface AdminUser {
|
||||||
|
id: string;
|
||||||
|
login: string;
|
||||||
|
name: string;
|
||||||
|
last_name: string;
|
||||||
|
is_active: boolean;
|
||||||
|
permission_admin: boolean;
|
||||||
|
permission_manage_agent: boolean;
|
||||||
|
permission_view: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type PermissionKey =
|
||||||
|
| "permission_admin"
|
||||||
|
| "permission_manage_agent"
|
||||||
|
| "permission_view";
|
||||||
@@ -1,730 +1,5 @@
|
|||||||
import React, { useState, useEffect, useCallback } from "react";
|
import { AdminPanel } from "@/modules/admin";
|
||||||
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 = () => {
|
export const AdminPage = () => {
|
||||||
const [users, setUsers] = useState<TokenUser[]>([]);
|
return <AdminPanel />;
|
||||||
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>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user