fix: conflicts

frontend/src/app/providers/layout/navigation/navigation.tsx

@@ -1,5 +1,14 @@
 import { useNavigate, useLocation } from "react-router-dom";
-import { FaHome, FaServer, FaPalette, FaUser, FaCode } from "react-icons/fa";
+import { FaCode } from "react-icons/fa";
+import {
+  FaHome,
+  FaServer,
+  FaPalette,
+  FaUser,
+  FaUsers,
+  FaRocket,
+  FaKey,
+} from "react-icons/fa";
 import { useAuthStore } from "@/modules/auth/store/useAuthStore";
 
 export const Navigation = () => {
@@ -11,6 +20,9 @@ export const Navigation = () => {
     { path: "/", label: "Главная", icon: FaHome },
     { path: "/add-agents", label: "Агенты", icon: FaServer },
     { path: "/templates", label: "Шаблоны", icon: FaCode },
+    { path: "/add-agents", label: "Деплой", icon: FaRocket },
+    { path: "/registration", label: "Регистрация", icon: FaKey },
+    { path: "/admin", label: "Админка", icon: FaUsers, adminOnly: true },
     { path: "/themes", label: "Темы", icon: FaPalette },
   ];
 
@@ -41,7 +53,12 @@ export const Navigation = () => {
 
         {/* Навигация */}
         <div className="flex items-center gap-1">
-          {navItems.map((item) => {
+          {navItems
+            .filter((item) => {
+              if (item.adminOnly && !user?.permission_admin) return false;
+              return true;
+            })
+            .map((item) => {
               const Icon = item.icon;
               const active = isActive(item.path);
               return (

frontend/src/app/providers/routing/routing.tsx

@@ -10,6 +10,8 @@ import { DefaultLayout } from "@/shared/layouts/DefaultLayout";
 import { AddAgentsPage } from "@/pages/add-agents.page";
 import { IDEPage } from "@/pages/ide.page";
 import { TemplatesPage } from "@/pages/templates.page";
+import { AdminPage } from "@/pages/admin.page";
+import { RegistrationTokenPage } from "@/pages/registration.page";
 
 export const mockGraphData: GraphData = {
   nodes: [
@@ -120,6 +122,8 @@ export const Routing = () => {
           <Route path="/" element={<HomePage />} />
           <Route path="/themes" element={<ThemesPage />} />
           <Route path="/add-agents" element={<AddAgentsPage />} />
+          <Route path="/registration" element={<RegistrationTokenPage />} />
+          <Route path="/admin" element={<AdminPage />} />
           <Route path="/IDE" element={<IDEPage />} />
           <Route path="/templates" element={<TemplatesPage />} />
         </Route>

frontend/src/modules/agent/api/agent.api.service.ts

@@ -7,6 +7,12 @@ import type {
   LogFilters,
   InsertLogRequest,
   InsertLogsRequest,
+  TokenUpdate,
+  TokenUpdatePermissions,
+  TokenPasswordReset,
+  RegistrationRequest,
+  DeployAgentsRequest,
+  DeployResponse,
 } from "../types/agent.types";
 
 class AgentApiService {
@@ -20,7 +26,9 @@ class AgentApiService {
   }
 
   async getUsers(): Promise<TokenUser[]> {
-    const response = await apiClient.get<TokenUser[]>(`${this.authBasePath}/tokens`);
+    const response = await apiClient.get<TokenUser[]>(
+      `${this.authBasePath}/tokens`,
+    );
     return response.data;
   }
 
@@ -60,17 +68,85 @@ class AgentApiService {
   }
 
   async getDistinctAgents(): Promise<string[]> {
-    const response = await apiClient.get<string[]>(`${this.logsBasePath}/agents`);
+    const response = await apiClient.get<string[]>(
+      `${this.logsBasePath}/agents`,
+    );
     return response.data;
   }
 
   async getDistinctLevels(): Promise<string[]> {
-    const response = await apiClient.get<string[]>(`${this.logsBasePath}/levels`);
+    const response = await apiClient.get<string[]>(
+      `${this.logsBasePath}/levels`,
+    );
     return response.data;
   }
 
   async getDistinctServices(): Promise<string[]> {
-    const response = await apiClient.get<string[]>(`${this.logsBasePath}/services`);
+    const response = await apiClient.get<string[]>(
+      `${this.logsBasePath}/services`,
+    );
+    return response.data;
+  }
+
+  // User management methods
+  async getUserByLogin(login: string): Promise<TokenUser> {
+    const response = await apiClient.get<TokenUser>(
+      `${this.authBasePath}/users/${login}`,
+    );
+    return response.data;
+  }
+
+  async getInactiveUsers(): Promise<TokenUser[]> {
+    const response = await apiClient.get<TokenUser[]>(
+      `${this.authBasePath}/users/inactive`,
+    );
+    return response.data;
+  }
+
+  async updateUser(login: string, data: TokenUpdate): Promise<void> {
+    await apiClient.put(`${this.authBasePath}/users/${login}`, data);
+  }
+
+  async updateUserPermissions(
+    login: string,
+    data: TokenUpdatePermissions,
+  ): Promise<void> {
+    await apiClient.put(
+      `${this.authBasePath}/users/${login}/permissions`,
+      data,
+    );
+  }
+
+  async resetUserPassword(
+    login: string,
+    data: TokenPasswordReset,
+  ): Promise<void> {
+    await apiClient.put(`${this.authBasePath}/users/${login}/password`, data);
+  }
+
+  async activateUser(login: string): Promise<void> {
+    await apiClient.post(`${this.authBasePath}/users/${login}/activate`);
+  }
+
+  async deactivateUser(login: string): Promise<void> {
+    await apiClient.post(`${this.authBasePath}/users/${login}/deactivate`);
+  }
+
+  async createRegistrationToken(
+    data: RegistrationRequest,
+  ): Promise<Record<string, string>> {
+    const response = await apiClient.post<Record<string, string>>(
+      `${this.basePath}/register-token`,
+      data,
+    );
+    return response.data;
+  }
+
+  async deployAgents(data: DeployAgentsRequest): Promise<DeployResponse> {
+    const response = await apiClient.post<DeployResponse>(
+      `${this.basePath}/deploy`,
+      data,
+    );
     return response.data;
   }
 }

frontend/src/modules/agent/index.ts

@@ -15,4 +15,12 @@ export type {
   InsertLogRequest,
   InsertLogsRequest,
   LogFilters,
+  TokenUpdate,
+  TokenUpdatePermissions,
+  TokenPasswordReset,
+  RegistrationRequest,
+  DeployResult,
+  DeployAgentsRequest,
+  AgentDeployConfig,
+  DeployResponse,
 } from "./types/agent.types";

frontend/src/modules/agent/types/agent.types.ts

@@ -74,3 +74,51 @@ export interface LogFilters {
   limit?: number;
   offset?: number;
 }
+
+export interface TokenUpdate {
+  name?: string;
+  last_name?: string;
+}
+
+export interface TokenUpdatePermissions {
+  is_active?: boolean;
+  permission_admin?: boolean;
+  permission_manage_agent?: boolean;
+  permission_view?: boolean;
+}
+
+export interface TokenPasswordReset {
+  new_password: string;
+}
+
+export interface RegistrationRequest {
+  label: string;
+}
+
+export interface DeployResult {
+  agent_label: string;
+  error?: string;
+  ip: string;
+  success: boolean;
+  token?: string;
+}
+
+export interface DeployAgentsRequest {
+  servers: AgentDeployConfig[];
+}
+
+export interface AgentDeployConfig {
+  agentLabel: string;
+  authMethod: "key" | "password";
+  deployType: "docker" | "binary";
+  ip: string;
+  password?: string;
+  port?: number;
+  sshKey?: string;
+  user: string;
+}
+
+export interface DeployResponse {
+  message?: string;
+  results: DeployResult[];
+}

frontend/src/modules/agent/ui/SSHAgentForm.tsx

@@ -7,6 +7,7 @@ import {
   FiPlus,
   FiTrash2,
   FiSettings,
+  FiLink,
 } from "react-icons/fi";
 import { SiDocker } from "react-icons/si";
 import { FiPackage, FiUploadCloud } from "react-icons/fi";
@@ -20,8 +21,10 @@ interface ExtraField {
 }
 
 export interface SSHAgentConfig {
+  agentLabel: string;
   user: string;
   ip: string;
+  port: number;
   authMethod: AuthMethod;
   sshKey?: string;
   password?: string;
@@ -189,11 +192,31 @@ export const SSHAgentForm: React.FC<SSHAgentFormProps> = ({
       </div>
 
       <div style={{ display: "grid", gap: "20px" }}>
-        {/* User и IP */}
+        {/* Agent Label */}
+        <div>
+          <label style={labelStyle}>
+            <span style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+              <FiServer size={14} />
+              Метка агента *
+            </span>
+          </label>
+          <input
+            type="text"
+            value={config.agentLabel}
+            onChange={(e) => handleChange("agentLabel", e.target.value)}
+            required
+            style={inputBaseStyle}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            placeholder="production-server-1"
+          />
+        </div>
+
+        {/* User, IP и Port */}
         <div
           style={{
             display: "grid",
-            gridTemplateColumns: "1fr 1fr",
+            gridTemplateColumns: "1fr 1fr 1fr",
             gap: "16px",
           }}
         >
@@ -238,6 +261,31 @@ export const SSHAgentForm: React.FC<SSHAgentFormProps> = ({
               placeholder="192.168.1.1"
             />
           </div>
+
+          <div>
+            <label style={labelStyle}>
+              <span
+                style={{ display: "flex", alignItems: "center", gap: "6px" }}
+              >
+                <FiLink size={14} />
+                Порт *
+              </span>
+            </label>
+            <input
+              type="number"
+              value={config.port}
+              onChange={(e) =>
+                handleChange("port", parseInt(e.target.value) || 22)
+              }
+              required
+              min={1}
+              max={65535}
+              style={inputBaseStyle}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              placeholder="22"
+            />
+          </div>
         </div>
 
         {/* Метод аутентификации */}
@@ -457,7 +505,7 @@ export const SSHAgentForm: React.FC<SSHAgentFormProps> = ({
           <div
             style={{
               display: "grid",
-              gridTemplateColumns: "1fr 1fr 1fr",
+              gridTemplateColumns: "1fr 1fr",
               gap: "8px",
             }}
           >

frontend/src/modules/auth/store/useAuthStore.ts

@@ -17,12 +17,18 @@ const login = async (credentials: LoginCredentials): Promise<LoginResponse> => {
   return response.data;
 };
 
-const register = async (data: RegisterData): Promise<LoginResponse> => {
+const register = async (
-  const response = await apiClient.post<LoginResponse>("/auth/register", {
+  data: RegisterData,
+): Promise<Record<string, string>> => {
+  const response = await apiClient.post<Record<string, string>>("/auth/token", {
     login: data.login,
     password: data.password,
     name: data.firstName,
     last_name: data.lastName,
+    is_active: data.is_active,
+    permission_admin: data.permission_admin,
+    permission_manage_agent: data.permission_manage_agent,
+    permission_view: data.permission_view,
   });
   return response.data;
 };
@@ -62,9 +68,10 @@ export const useAuthStore = create<AuthState>()(
       register: async (data: RegisterData) => {
         set({ isLoading: true, error: null });
         try {
-          const response = await register(data);
+          await register(data);
-          const user = mapResponseToUser(response);
+          // После регистрации пользователь не авторизуется автоматически
-          set({ user, token: response.token, isLoading: false });
+          // Нужно войти через /auth/login
+          set({ isLoading: false });
         } catch (error) {
           set({
             error:

frontend/src/modules/auth/types/auth.types.ts

@@ -8,6 +8,10 @@ export interface RegisterData {
   password: string;
   firstName: string;
   lastName: string;
+  is_active?: boolean;
+  permission_admin?: boolean;
+  permission_manage_agent?: boolean;
+  permission_view?: boolean;
 }
 
 export interface LoginResponse {

frontend/src/pages/add-agents.page.tsx

@@ -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";
+import type { SSHAgentConfig } from "../modules/agent/ui/SSHAgentForm";
-
+import type {
-interface SSHAgentConfig {
+  DeployAgentsRequest,
-  user: string;
+  DeployResult,
-  ip: string;
+} from "../modules/agent/types/agent.types";
-  authMethod: string;
+import {
-  sshKey?: string;
+  FiPlusCircle,
-  password?: string;
+  FiSend,
-  extraFields: { key: string; value: string }[];
+  FiCheck,
-  deployType: string;
+  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 {
-      // Получаем текущих агентов для проверки подключения
+      // Преобразуем данные из формы в формат API
-      const currentAgents = await agentApiService.getAgents();
+      const deployData: DeployAgentsRequest = {
-      console.log("Current agents:", currentAgents);
+        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 вызов для развертывания агентов
+      // Вызываем 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(
-        `Успешно подключено ${currentAgents.length} агент(ов). Серверы: ${agents.length}`,
+          `Успешно развернуто ${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>
           )}
 

frontend/src/pages/admin.page.tsx

@@ -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>
+  );
+};

frontend/src/pages/register.page.tsx

@@ -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);
-
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
-  useEffect(() => {
-    if (token) {
-      navigate("/");
-    }
-  }, [token, navigate]);
 
   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">
+                  <svg
-                    <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" />
+                    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) => {

frontend/src/pages/registration.page.tsx

@@ -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>
+  );
+};