fix: conflicts
This commit is contained in:
nikita
@@ -1,21 +1,24 @@
|
||||
import React, { useState } from "react";
|
||||
import { SSHAgentForm } from "../modules/agent/ui/SSHAgentForm";
|
||||
import { agentApiService } from "../modules/agent/api/agent.api.service";
|
||||
import { FiPlusCircle, FiSend } from "react-icons/fi";
|
||||
|
||||
interface SSHAgentConfig {
|
||||
user: string;
|
||||
ip: string;
|
||||
authMethod: string;
|
||||
sshKey?: string;
|
||||
password?: string;
|
||||
extraFields: { key: string; value: string }[];
|
||||
deployType: string;
|
||||
}
|
||||
import type { SSHAgentConfig } from "../modules/agent/ui/SSHAgentForm";
|
||||
import type {
|
||||
DeployAgentsRequest,
|
||||
DeployResult,
|
||||
} from "../modules/agent/types/agent.types";
|
||||
import {
|
||||
FiPlusCircle,
|
||||
FiSend,
|
||||
FiCheck,
|
||||
FiX,
|
||||
FiAlertCircle,
|
||||
} from "react-icons/fi";
|
||||
|
||||
const createEmptyAgentConfig = (): SSHAgentConfig => ({
|
||||
agentLabel: "",
|
||||
user: "",
|
||||
ip: "",
|
||||
port: 22,
|
||||
authMethod: "key",
|
||||
sshKey: "",
|
||||
password: "",
|
||||
@@ -51,7 +54,9 @@ export const AddAgentsPage: React.FC = () => {
|
||||
|
||||
// Валидация
|
||||
const isValid = agents.every((agent) => {
|
||||
if (!agent.user || !agent.ip) return false;
|
||||
if (!agent.agentLabel || !agent.user || !agent.ip || !agent.port)
|
||||
return false;
|
||||
if (agent.port < 1 || agent.port > 65535) return false;
|
||||
if (agent.authMethod === "key" && !agent.sshKey) return false;
|
||||
if (agent.authMethod === "password" && !agent.password) return false;
|
||||
return true;
|
||||
@@ -67,21 +72,52 @@ export const AddAgentsPage: React.FC = () => {
|
||||
setSubmitError(null);
|
||||
|
||||
try {
|
||||
// Получаем текущих агентов для проверки подключения
|
||||
const currentAgents = await agentApiService.getAgents();
|
||||
console.log("Current agents:", currentAgents);
|
||||
// Преобразуем данные из формы в формат API
|
||||
const deployData: DeployAgentsRequest = {
|
||||
servers: agents.map((agent) => ({
|
||||
agentLabel: agent.agentLabel,
|
||||
ip: agent.ip,
|
||||
user: agent.user,
|
||||
port: agent.port,
|
||||
authMethod: agent.authMethod as "key" | "password",
|
||||
deployType: (agent.deployType === "deploy"
|
||||
? "docker"
|
||||
: agent.deployType) as "docker" | "binary",
|
||||
...(agent.authMethod === "key"
|
||||
? { sshKey: agent.sshKey }
|
||||
: { password: agent.password }),
|
||||
})),
|
||||
};
|
||||
|
||||
// TODO: Реальный API вызов для развертывания агентов
|
||||
// Пока выводим список подключенных агентов
|
||||
setSubmitMessage(
|
||||
`Успешно подключено ${currentAgents.length} агент(ов). Серверы: ${agents.length}`,
|
||||
);
|
||||
setAgents([createEmptyAgentConfig()]);
|
||||
// Вызываем API для развертывания агентов
|
||||
const response = await agentApiService.deployAgents(deployData);
|
||||
|
||||
// Формируем сообщение о результатах
|
||||
const successCount = response.results.filter(
|
||||
(r: DeployResult) => r.success,
|
||||
).length;
|
||||
const failCount = response.results.length - successCount;
|
||||
|
||||
if (failCount === 0) {
|
||||
setSubmitMessage(
|
||||
`Успешно развернуто ${successCount} агент(ов) на ${agents.length} сервер(ах)`,
|
||||
);
|
||||
setAgents([createEmptyAgentConfig()]);
|
||||
} else {
|
||||
const errorMsg = response.results
|
||||
.filter((r: DeployResult) => !r.success)
|
||||
.map(
|
||||
(r: DeployResult) => `${r.ip}: ${r.error || "Неизвестная ошибка"}`,
|
||||
)
|
||||
.join("\n");
|
||||
setSubmitMessage(`Успешно: ${successCount}, Ошибки: ${failCount}`);
|
||||
setSubmitError(`Ошибки при развертывании:\n${errorMsg}`);
|
||||
}
|
||||
} catch (error) {
|
||||
setSubmitError(
|
||||
error instanceof Error
|
||||
? error.message
|
||||
: "Ошибка при подключении к серверам",
|
||||
: "Ошибка при развертывании агентов",
|
||||
);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
@@ -167,20 +203,26 @@ export const AddAgentsPage: React.FC = () => {
|
||||
color: "var(--success-text)",
|
||||
}}
|
||||
>
|
||||
{submitMessage}
|
||||
<div className="flex items-start gap-2">
|
||||
<FiCheck className="mt-0.5 flex-shrink-0" size={16} />
|
||||
<span>{submitMessage}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{submitError && (
|
||||
<div
|
||||
className="mb-6 p-4 rounded-lg border text-sm"
|
||||
className="mb-6 p-4 rounded-lg border text-sm whitespace-pre-wrap"
|
||||
style={{
|
||||
backgroundColor: "var(--error-bg)",
|
||||
borderColor: "var(--error-border)",
|
||||
color: "var(--error-text)",
|
||||
}}
|
||||
>
|
||||
{submitError}
|
||||
<div className="flex items-start gap-2">
|
||||
<FiAlertCircle className="mt-0.5 flex-shrink-0" size={16} />
|
||||
<span>{submitError}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -0,0 +1,730 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -5,7 +5,7 @@ import { useAuthStore } from "@/modules/auth/store/useAuthStore";
|
||||
|
||||
export const RegisterPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const { register, isLoading, error, clearError, token } = useAuthStore();
|
||||
const { register, isLoading, error, clearError } = useAuthStore();
|
||||
const [formData, setFormData] = useState({
|
||||
login: "",
|
||||
password: "",
|
||||
@@ -14,12 +14,7 @@ export const RegisterPage: React.FC = () => {
|
||||
lastName: "",
|
||||
});
|
||||
const [passwordError, setPasswordError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (token) {
|
||||
navigate("/");
|
||||
}
|
||||
}, [token, navigate]);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
@@ -38,7 +33,17 @@ export const RegisterPage: React.FC = () => {
|
||||
firstName: formData.firstName,
|
||||
lastName: formData.lastName,
|
||||
});
|
||||
navigate("/");
|
||||
setSuccessMessage("Аккаунт успешно создан! Теперь вы можете войти.");
|
||||
setFormData({
|
||||
login: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
});
|
||||
setTimeout(() => {
|
||||
navigate("/auth");
|
||||
}, 2000);
|
||||
} catch (err) {
|
||||
// Error is handled by store
|
||||
}
|
||||
@@ -82,7 +87,10 @@ export const RegisterPage: React.FC = () => {
|
||||
className="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center"
|
||||
style={{ backgroundColor: "var(--bg-secondary)" }}
|
||||
>
|
||||
<FiUserPlus className="w-8 h-8" style={{ color: "var(--accent)" }} />
|
||||
<FiUserPlus
|
||||
className="w-8 h-8"
|
||||
style={{ color: "var(--accent)" }}
|
||||
/>
|
||||
</div>
|
||||
<h1
|
||||
className="text-3xl font-bold mb-2"
|
||||
@@ -109,6 +117,20 @@ export const RegisterPage: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Success Message */}
|
||||
{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)",
|
||||
}}
|
||||
>
|
||||
{successMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* Name Fields */}
|
||||
@@ -293,8 +315,16 @@ export const RegisterPage: React.FC = () => {
|
||||
className="mt-2 text-sm flex items-center gap-1"
|
||||
style={{ color: "var(--error-text)" }}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
|
||||
<svg
|
||||
className="w-4 h-4"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
{passwordError}
|
||||
</p>
|
||||
@@ -311,7 +341,8 @@ export const RegisterPage: React.FC = () => {
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!isLoading) {
|
||||
e.currentTarget.style.backgroundColor = "var(--button-primary-hover)";
|
||||
e.currentTarget.style.backgroundColor =
|
||||
"var(--button-primary-hover)";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
|
||||
@@ -0,0 +1,423 @@
|
||||
import React, { useState } from "react";
|
||||
import { agentApiService } from "@/modules/agent/api/agent.api.service";
|
||||
import { FiKey, FiPlus, FiTrash2, FiCopy, FiCheck, FiX } from "react-icons/fi";
|
||||
|
||||
interface RegistrationTokenForm {
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface RegistrationResult {
|
||||
label: string;
|
||||
token: string;
|
||||
}
|
||||
|
||||
export const RegistrationTokenPage: React.FC = () => {
|
||||
const [tokens, setTokens] = useState<RegistrationTokenForm[]>([
|
||||
{ label: "" },
|
||||
]);
|
||||
const [results, setResults] = useState<RegistrationResult[]>([]);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [successMessage, setSuccessMessage] = useState<string | null>(null);
|
||||
const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
|
||||
|
||||
const handleTokenChange = (index: number, label: string) => {
|
||||
const newTokens = [...tokens];
|
||||
newTokens[index] = { label };
|
||||
setTokens(newTokens);
|
||||
};
|
||||
|
||||
const handleAddToken = () => {
|
||||
setTokens([...tokens, { label: "" }]);
|
||||
};
|
||||
|
||||
const handleRemoveToken = (index: number) => {
|
||||
const newTokens = tokens.filter((_, i) => i !== index);
|
||||
setTokens(newTokens);
|
||||
};
|
||||
|
||||
const handleCopyToken = async (token: string, index: number) => {
|
||||
await navigator.clipboard.writeText(token);
|
||||
setCopiedIndex(index);
|
||||
setTimeout(() => setCopiedIndex(null), 2000);
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Валидация
|
||||
const validTokens = tokens.filter((t) => t.label.trim());
|
||||
if (validTokens.length === 0) {
|
||||
setError("Введите хотя бы одну метку для токена");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
setSuccessMessage(null);
|
||||
setResults([]);
|
||||
|
||||
try {
|
||||
const createdTokens: RegistrationResult[] = [];
|
||||
|
||||
for (const tokenData of validTokens) {
|
||||
const response = await agentApiService.createRegistrationToken({
|
||||
label: tokenData.label,
|
||||
});
|
||||
|
||||
// API возвращает объект с токеном
|
||||
const token = response.token || Object.values(response)[0] as string;
|
||||
|
||||
createdTokens.push({
|
||||
label: tokenData.label,
|
||||
token,
|
||||
});
|
||||
}
|
||||
|
||||
setResults(createdTokens);
|
||||
setSuccessMessage(
|
||||
`Успешно создано ${createdTokens.length} токен(ов)`
|
||||
);
|
||||
setTokens([{ label: "" }]);
|
||||
} catch (err) {
|
||||
setError(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Ошибка при создании токенов"
|
||||
);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
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",
|
||||
transition: "border-color 0.2s, box-shadow 0.2s",
|
||||
};
|
||||
|
||||
const labelStyle: React.CSSProperties = {
|
||||
display: "block",
|
||||
marginBottom: "8px",
|
||||
color: "var(--text-secondary)",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen py-8 px-4"
|
||||
style={{ backgroundColor: "var(--bg-primary)" }}
|
||||
>
|
||||
<div style={{ maxWidth: "900px", 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)" }}
|
||||
>
|
||||
<FiKey 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>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
{/* Token Forms */}
|
||||
<div className="space-y-5">
|
||||
{tokens.map((token, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-2xl shadow-lg border"
|
||||
style={{
|
||||
backgroundColor: "var(--card-bg)",
|
||||
borderColor: "var(--border)",
|
||||
padding: "24px",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "20px",
|
||||
paddingBottom: "16px",
|
||||
borderBottom: "1px solid var(--border)",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
|
||||
<div
|
||||
className="w-10 h-10 rounded-lg flex items-center justify-center"
|
||||
style={{ backgroundColor: "var(--bg-secondary)" }}
|
||||
>
|
||||
<FiKey style={{ color: "var(--accent)", fontSize: "20px" }} />
|
||||
</div>
|
||||
<h3
|
||||
style={{
|
||||
margin: 0,
|
||||
color: "var(--text-primary)",
|
||||
fontSize: "18px",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Токен #{index + 1}
|
||||
</h3>
|
||||
</div>
|
||||
{tokens.length > 1 && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveToken(index)}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-lg transition-all"
|
||||
style={{
|
||||
background: "var(--error-bg)",
|
||||
color: "var(--error-text)",
|
||||
border: "1px solid var(--error-border)",
|
||||
cursor: "pointer",
|
||||
fontSize: "14px",
|
||||
fontWeight: 500,
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = "var(--error-text)";
|
||||
e.currentTarget.style.color = "#fff";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = "var(--error-bg)";
|
||||
e.currentTarget.style.color = "var(--error-text)";
|
||||
}}
|
||||
>
|
||||
<FiTrash2 size={14} />
|
||||
Удалить
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Label Input */}
|
||||
<div>
|
||||
<label style={labelStyle}>
|
||||
<span
|
||||
style={{ display: "flex", alignItems: "center", gap: "6px" }}
|
||||
>
|
||||
<FiKey size={14} />
|
||||
Метка токена *
|
||||
</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={token.label}
|
||||
onChange={(e) => handleTokenChange(index, e.target.value)}
|
||||
required
|
||||
style={inputStyle}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = "var(--border-focus)";
|
||||
e.currentTarget.style.boxShadow = `0 0 0 3px var(--border-focus)30`;
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = "var(--border)";
|
||||
e.currentTarget.style.boxShadow = "none";
|
||||
}}
|
||||
placeholder="agent-production-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Add Token Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleAddToken}
|
||||
className="w-full flex items-center justify-center gap-2 py-3.5 px-4 rounded-xl border-2 border-dashed transition-all mb-6 font-medium"
|
||||
style={{
|
||||
borderColor: "var(--border)",
|
||||
backgroundColor: "transparent",
|
||||
color: "var(--accent)",
|
||||
fontSize: "15px",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = "var(--accent)";
|
||||
e.currentTarget.style.backgroundColor = "var(--accent)10";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = "var(--border)";
|
||||
e.currentTarget.style.backgroundColor = "transparent";
|
||||
}}
|
||||
>
|
||||
<FiPlus size={18} />
|
||||
Добавить ещё один токен
|
||||
</button>
|
||||
|
||||
{/* 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>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full flex items-center justify-center gap-2 px-4 py-3.5 rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed font-medium text-base mb-8"
|
||||
style={{
|
||||
backgroundColor: isSubmitting
|
||||
? "var(--bg-secondary)"
|
||||
: "var(--button-primary)",
|
||||
color: "var(--button-primary-text)",
|
||||
boxShadow: isSubmitting
|
||||
? "none"
|
||||
: "0 4px 14px var(--shadow-color)",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!isSubmitting) {
|
||||
e.currentTarget.style.backgroundColor =
|
||||
"var(--button-primary-hover)";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = isSubmitting
|
||||
? "var(--bg-secondary)"
|
||||
: "var(--button-primary)";
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<div className="w-5 h-5 border-2 border-current border-t-transparent rounded-full animate-spin" />
|
||||
Создание токенов...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FiKey size={18} />
|
||||
Создать {tokens.filter((t) => t.label.trim()).length || 1} токен(ов)
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Results */}
|
||||
{results.length > 0 && (
|
||||
<div>
|
||||
<h2
|
||||
className="text-xl font-bold mb-4"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
Созданные токены
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{results.map((result, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-xl border p-4"
|
||||
style={{
|
||||
backgroundColor: "var(--card-bg)",
|
||||
borderColor: "var(--border)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span
|
||||
className="font-medium"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
>
|
||||
{result.label}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleCopyToken(result.token, index)}
|
||||
className="flex items-center gap-2 px-3 py-1.5 rounded-lg transition-all text-xs font-medium"
|
||||
style={{
|
||||
backgroundColor:
|
||||
copiedIndex === index
|
||||
? "var(--success-text)"
|
||||
: "var(--accent)",
|
||||
color:
|
||||
copiedIndex === index
|
||||
? "#fff"
|
||||
: "var(--accent-text)",
|
||||
}}
|
||||
>
|
||||
{copiedIndex === index ? (
|
||||
<>
|
||||
<FiCheck size={12} />
|
||||
Скопировано
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FiCopy size={12} />
|
||||
Копировать
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<code
|
||||
className="block p-3 rounded-lg text-xs font-mono break-all"
|
||||
style={{
|
||||
backgroundColor: "var(--bg-secondary)",
|
||||
color: "var(--accent)",
|
||||
border: "1px solid var(--border)",
|
||||
}}
|
||||
>
|
||||
{result.token}
|
||||
</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user