fix: call checkAuth on app mount to restore session from localStorage

Dockerfile

@@ -0,0 +1,15 @@
+# Build stage
+FROM node:20-alpine as build-stage
+WORKDIR /app
+COPY package*.json ./
+# Используем npm ci для надежной установки зависимостей из package-lock.json
+RUN npm ci
+COPY . .
+RUN npm run build
+
+# Production stage
+FROM nginx:stable-alpine as production-stage
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,21 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip сжатие для ускорения загрузки
+    gzip on;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+    # Для SPA: все запросы, которые не соответствуют файлу, перенаправляются на index.html
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Кэширование статических файлов
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+}

package-lock.json

@@ -10,10 +10,12 @@
       "dependencies": {
         "axios": "^1.10.0",
         "pinia": "^3.0.3",
+        "skinview3d": "^3.4.1",
         "vue": "^3.5.13",
         "vue-router": "^4.5.1"
       },
       "devDependencies": {
+        "@types/node": "^20.14.9",
         "@vitejs/plugin-vue": "^5.2.3",
         "@vue/tsconfig": "^0.7.0",
         "typescript": "~5.8.3",
@@ -785,6 +787,40 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "20.19.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.1.tgz",
+      "integrity": "sha512-jJD50LtlD2dodAEO653i3YF04NWak6jN3ky+Ri3Em3mGR39/glWiboM/IePaRbgwSfqM1TpGXfAg8ohn/4dTgA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.156.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.156.0.tgz",
+      "integrity": "sha512-733bXDSRdlrxqOmQuOmfC1UBRuJ2pREPk8sWnx9MtIJEVDQMx8U0NQO5MVVaOrjzDPyLI+cFPim2X/ss9v0+LQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "fflate": "~0.6.10",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
+    "node_modules/@types/webxr": {
+      "version": "0.5.22",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.22.tgz",
+      "integrity": "sha512-Vr6Stjv5jPRqH690f5I5GLjVk8GSsoQSYJ2FVd/3jJF7KaqfwPi3ehfBS96mlQ2kPCwZaX6U0rG2+NGHBKkA/A==",
+      "license": "MIT"
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
@@ -1261,6 +1297,12 @@
         }
       }
     },
+    "node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "license": "MIT"
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -1455,6 +1497,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "license": "MIT"
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -1656,6 +1704,23 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/skinview-utils": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/skinview-utils/-/skinview-utils-0.7.1.tgz",
+      "integrity": "sha512-4eLrMqR526ehlZbsd8SuZ/CHpS9GiH0xUMoV+PYlJVi95ZFz5HJu7Spt5XYa72DRS7wgt5qquvHZf0XZJgmu9Q==",
+      "license": "MIT"
+    },
+    "node_modules/skinview3d": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/skinview3d/-/skinview3d-3.4.1.tgz",
+      "integrity": "sha512-WVN1selfDSAoQB7msLs3ueJjW/pge3nsmbqxJeXPnN/qIJ1GJKpMZO8mavSvMojaMrmpSgOJWfYUkK9B34ts2g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "^0.156.0",
+        "skinview-utils": "^0.7.1",
+        "three": "^0.156.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1686,6 +1751,12 @@
         "node": ">=16"
       }
     },
+    "node_modules/three": {
+      "version": "0.156.1",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.156.1.tgz",
+      "integrity": "sha512-kP7H0FK9d/k6t/XvQ9FO6i+QrePoDcNhwl0I02+wmUJRNSLCUIDMcfObnzQvxb37/0Uc9TDT0T1HgsRRrO6SYQ==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.14",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
@@ -1717,6 +1788,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "6.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",

package.json

@@ -11,10 +11,12 @@
   "dependencies": {
     "axios": "^1.10.0",
     "pinia": "^3.0.3",
+    "skinview3d": "^3.4.1",
     "vue": "^3.5.13",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
+    "@types/node": "^20.14.9",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",
     "typescript": "~5.8.3",

src/App.vue

@@ -1,16 +1,37 @@
 <template>
     <header>
         <nav>
-            <router-link to="/">Главная</router-link> | <router-link to="/login">Вход</router-link> |
+            <router-link to="/">Главная</router-link> | <router-link to="/servers">Мониторинг</router-link> |
+            <template v-if="!authStore.isAuthenticated">
+                <router-link to="/login">Вход</router-link> |
                 <router-link to="/register">Регистрация</router-link>
+            </template>
+
+            <template v-else>
+                <router-link v-if="authStore.user?.role === 'admin'" to="/admin">Админ-панель</router-link> |
+                <router-link to="/account">Личный кабинет</router-link>
+                <span>Привет, {{ authStore.user?.username }}!</span> |
+                <a @click="authStore.handleLogout" href="#">Выход</a>
+            </template>
         </nav>
     </header>
     <main>
-        <!-- Здесь будут отображаться компоненты-страницы -->
         <router-view />
     </main>
 </template>
 
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { useAuthStore } from "@/stores/auth";
+
+const authStore = useAuthStore();
+
+// Восстанавливаем сессию при загрузке приложения
+onMounted(() => {
+    authStore.checkAuth();
+});
+</script>
+
 <style scoped>
 header {
     background-color: #f0f0f0;
@@ -29,4 +50,10 @@ nav a.router-link-exact-active {
 main {
     padding: 1rem;
 }
+span {
+    margin: 0 1rem;
+}
+a {
+    cursor: pointer;
+}
 </style>

src/api/auth.ts

@@ -0,0 +1,10 @@
+import type { RegisterRequest, LoginRequest, LoginResponse } from "@/types";
+import apiClient from "./axios";
+
+export const registerUser = (userData: RegisterRequest) => {
+  return apiClient.post("/register", userData);
+};
+
+export const loginUser = (credentials: LoginRequest) => {
+  return apiClient.post<LoginResponse>("/login", credentials);
+};

src/api/user.ts

@@ -0,0 +1,7 @@
+import apiClient from "./axios";
+import type { SessionProfileResponse } from "@/types";
+
+export const getUserProfile = (uuid: string) => {
+  // Этот эндпоинт не начинается с /api, поэтому указываем полный путь
+  return apiClient.get<SessionProfileResponse>(`/sessionserver/session/minecraft/profile/${uuid}`);
+};

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from "vue-router";
-import HomeView from "../views/HomeView.vue"; // Мы создадим его позже
+import HomeView from "../views/HomeView.vue";
+import { useAuthStore } from "@/stores/auth";
 
 const routes = [
   {
@@ -10,7 +11,6 @@ const routes = [
   {
     path: "/login",
     name: "login",
-    // Ленивая загрузка (lazy-loading) для страниц, которые не нужны сразу
     component: () => import("../views/LoginView.vue"),
   },
   {
@@ -18,7 +18,40 @@ const routes = [
     name: "register",
     component: () => import("../views/RegisterView.vue"),
   },
-  // Здесь будут другие роуты: личный кабинет, мониторинг и т.д.
+  {
+    path: "/account",
+    name: "account",
+    component: () => import("../views/AccountView.vue"),
+    meta: { requiresAuth: true },
+  },
+  {
+    path: "/servers",
+    name: "servers",
+    component: () => import("../views/ServersView.vue"),
+  },
+  {
+    path: "/admin",
+    name: "admin",
+    component: () => import("../views/admin/AdminLayout.vue"),
+    meta: { requiresAuth: true, requiresAdmin: true },
+    children: [
+      {
+        path: "",
+        name: "admin-dashboard",
+        component: () => import("../views/admin/DashboardView.vue"),
+      },
+      {
+        path: "users",
+        name: "admin-users",
+        component: () => import("../views/admin/UsersView.vue"),
+      },
+      {
+        path: "modpacks",
+        name: "admin-modpacks",
+        component: () => import("../views/admin/ModpacksView.vue"),
+      },
+    ],
+  },
 ];
 
 const router = createRouter({
@@ -26,4 +59,14 @@ const router = createRouter({
   routes,
 });
 
+router.beforeEach((to, _from, next) => {
+  const authStore = useAuthStore();
+  if (to.meta.requiresAuth && !authStore.isAuthenticated) {
+    next({ name: "login" });
+  } else if (to.meta.requiresAdmin && authStore.user?.role !== "admin") {
+    next({ name: "home" });
+  } else {
+    next();
+  }
+});
 export default router;

src/stores/auth.ts

@@ -0,0 +1,125 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import { registerUser as apiRegisterUser, loginUser as apiLoginUser } from "@/api/auth";
+import { getUserProfile as apiGetUserProfile } from "@/api/user";
+import type { RegisterRequest, User, LoginRequest } from "@/types";
+import router from "@/router";
+import apiClient from "@/api/axios";
+
+export const useAuthStore = defineStore("auth", () => {
+  // State
+  const user = ref<User | null>(null);
+  const token = ref<string | null>(localStorage.getItem("authToken"));
+  const skinUrl = ref<string | null>(null);
+  const isLoading = ref(false);
+  const error = ref<string | null>(null);
+
+  // === Getters ===
+  const isAuthenticated = computed(() => !!user.value && !!token.value);
+
+  // Actions
+  async function fetchUserProfile() {
+    if (!user.value) return;
+
+    try {
+      const response = await apiGetUserProfile(user.value.uuid);
+      if (response.data && response.data.properties) {
+        const textureProp = response.data.properties.find((p) => p.name === "textures");
+        if (textureProp) {
+          const textureData = JSON.parse(atob(textureProp.value));
+          if (textureData.textures?.SKIN?.url) {
+            skinUrl.value = textureData.textures.SKIN.url;
+          } else {
+            skinUrl.value = null;
+          }
+        }
+      }
+    } catch (e) {
+      console.error("Failed to fetch user profile:", e);
+      skinUrl.value = null;
+    }
+  }
+  function setAuthData(userData: User, authToken: string) {
+    user.value = userData;
+    token.value = authToken;
+    localStorage.setItem("authToken", authToken);
+    apiClient.defaults.headers.common["Authorization"] = `Bearer ${authToken}`;
+    fetchUserProfile();
+  }
+
+  async function handleLogin(credentials: LoginRequest) {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      const response = await apiLoginUser(credentials);
+      setAuthData(response.data.user, response.data.token);
+      await router.push({ name: "home" });
+    } catch (e: any) {
+      if (e.response && e.response.data) {
+        error.value = e.response.data;
+      } else {
+        error.value = "Произошла неизвестная ошибка при входе";
+      }
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  async function handleRegister(userData: RegisterRequest) {
+    isLoading.value = true;
+    error.value = null;
+    try {
+      await apiRegisterUser(userData);
+      await router.push({ name: "login" });
+    } catch (e: any) {
+      if (e.response && e.response.data) {
+        error.value = e.response.data;
+      } else {
+        error.value = "Произошла неизвестная ошибка";
+      }
+    } finally {
+      isLoading.value = false;
+    }
+  }
+  // Функция для выхода
+  function handleLogout() {
+    user.value = null;
+    token.value = null;
+    skinUrl.value = null;
+    localStorage.removeItem("authToken");
+    delete apiClient.defaults.headers.common["Authorization"];
+    router.push({ name: "login" });
+  }
+
+  async function checkAuth() {
+    isLoading.value = true;
+    if (token.value) {
+      try {
+        apiClient.defaults.headers.common["Authorization"] = `Bearer ${token.value}`;
+        const response = await apiClient.get("/api/user/me");
+        user.value = response.data;
+        await fetchUserProfile();
+      } catch (e) {
+        console.error("Session restoration failed:", e);
+        handleLogout();
+      }
+    }
+    isLoading.value = false;
+  }
+  return {
+    // State
+    user,
+    token,
+    skinUrl,
+    isLoading,
+    error,
+    // Getters
+    isAuthenticated,
+    // Actions
+    handleLogin,
+    handleRegister,
+    handleLogout,
+    fetchUserProfile,
+    checkAuth,
+  };
+});

src/types.ts

@@ -0,0 +1,41 @@
+// Тип для запроса на регистрацию, должен совпадать с бэкендом
+export interface RegisterRequest {
+  username: string;
+  email: string;
+  password: string;
+}
+
+// Тип для запроса на логин
+export interface LoginRequest {
+  login: string;
+  password: string;
+}
+
+// Тип для ответа с бэкенда
+export interface LoginResponse {
+  token: string;
+  user: User;
+}
+
+// Тип для объекта пользователя
+export interface User {
+  id: number;
+  uuid: string;
+  username: string;
+  email: string;
+  role: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ProfileProperty {
+  name: string;
+  value: string; // Base64-encoded JSON
+  signature: string;
+}
+
+export interface SessionProfileResponse {
+  id: string;
+  name: string;
+  properties: ProfileProperty[];
+}

src/views/AccountView.vue

@@ -0,0 +1,181 @@
+<template>
+    <div class="account-container">
+        <h1>Личный кабинет</h1>
+        <div v-if="authStore.user" class="user-info">
+            <p><strong>Имя пользователя:</strong> {{ authStore.user.username }}</p>
+            <p><strong>Email:</strong> {{ authStore.user.email }}</p>
+            <p><strong>Роль:</strong> {{ authStore.user.role }}</p>
+        </div>
+
+        <div class="skin-manager">
+            <h2>Управление скином</h2>
+            <div class="skin-preview">
+                <canvas ref="skinCanvas" class="skin-canvas"></canvas>
+            </div>
+            <form @submit.prevent="onSkinUpload" class="skin-upload-form">
+                <label for="skin-file">Загрузить новый скин (PNG, 64x64)</label>
+                <input id="skin-file" type="file" @change="onFileSelected" accept="image/png" />
+                <button type="submit" :disabled="!selectedFile || isLoading">
+                    {{ isLoading ? "Загрузка..." : "Загрузить" }}
+                </button>
+                <div v-if="uploadError" class="error-message">{{ uploadError }}</div>
+                <div v-if="uploadSuccess" class="success-message">Скин успешно обновлен!</div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import { useAuthStore } from "@/stores/auth";
+import { SkinViewer } from "skinview3d";
+import apiClient from "@/api/axios";
+
+const authStore = useAuthStore();
+
+// Для 3D-вьювера
+const skinCanvas = ref<HTMLCanvasElement | null>(null);
+let skinViewer: SkinViewer | null = null;
+
+// Для формы загрузки
+const selectedFile = ref<File | null>(null);
+const isLoading = ref(false);
+const uploadError = ref<string | null>(null);
+const uploadSuccess = ref(false);
+
+const onFileSelected = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files[0]) {
+        selectedFile.value = target.files[0];
+    }
+};
+
+const onSkinUpload = async () => {
+    if (!selectedFile.value) return;
+
+    isLoading.value = true;
+    uploadError.value = null;
+    uploadSuccess.value = false;
+
+    const formData = new FormData();
+    formData.append("skin", selectedFile.value);
+
+    try {
+        await apiClient.post("/user/skin", formData, {
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        });
+        uploadSuccess.value = true;
+        // Обновляем скин во вьювере после успешной загрузки
+        if (skinViewer) {
+            skinViewer.loadSkin(URL.createObjectURL(selectedFile.value));
+        }
+        await authStore.fetchUserProfile();
+    } catch (e: any) {
+        uploadError.value = e.response?.data || "Ошибка при загрузке файла.";
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const setupSkinViewer = () => {
+    if (skinCanvas.value && !skinViewer) {
+        skinViewer = new SkinViewer({
+            canvas: skinCanvas.value,
+            width: 300,
+            height: 400,
+        });
+    }
+};
+
+// Следим за изменением URL скина в сторе и обновляем вьювер
+watch(
+    () => authStore.skinUrl,
+    (newUrl) => {
+        if (skinViewer) {
+            if (newUrl) {
+                skinViewer.loadSkin(newUrl);
+            } else {
+                // Если у пользователя нет скина, показываем скин по умолчанию
+                skinViewer.loadSkin("/default_skin.png");
+            }
+        }
+    },
+    { immediate: true },
+);
+
+// Инициализация 3D-вьювера при монтировании компонента
+onMounted(() => {
+    setupSkinViewer();
+    if (!authStore.skinUrl && authStore.isAuthenticated) {
+        authStore.fetchUserProfile();
+    }
+});
+
+// Очистка ресурсов при размонтировании
+onUnmounted(() => {
+    skinViewer?.dispose();
+});
+</script>
+
+<style scoped>
+.account-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+.user-info {
+    background-color: #f9f9f9;
+    border: 1px solid #eee;
+    padding: 1rem;
+    border-radius: 8px;
+    margin-bottom: 2rem;
+}
+.skin-manager {
+    display: flex;
+    gap: 2rem;
+    align-items: flex-start;
+}
+.skin-preview {
+    flex-shrink: 0;
+}
+.skin-canvas {
+    border: 1px solid #ccc;
+    border-radius: 8px;
+}
+.skin-upload-form {
+    flex-grow: 1;
+}
+.error-message,
+.success-message {
+    margin-top: 1rem;
+    padding: 0.75rem;
+    border-radius: 4px;
+    text-align: center;
+}
+.error-message {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+.success-message {
+    background-color: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+input[type="file"] {
+    margin: 1rem 0;
+}
+button {
+    padding: 0.5rem 1rem;
+    background-color: #42b983;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+button:disabled {
+    background-color: #ccc;
+}
+</style>

src/views/LoginView.vue

@@ -1,3 +1,112 @@
 <template>
+    <div class="login-container">
+        <form @submit.prevent="onSubmit" class="login-form">
             <h1>Вход</h1>
+
+            <div class="form-group">
+                <label for="login">Имя пользователя или Email</label>
+                <input id="login" v-model="login" type="text" required />
+            </div>
+
+            <div class="form-group">
+                <label for="password">Пароль</label>
+                <input id="password" v-model="password" type="password" required />
+            </div>
+
+            <div v-if="authStore.error" class="error-message">
+                {{ authStore.error }}
+            </div>
+
+            <button type="submit" :disabled="authStore.isLoading">
+                {{ authStore.isLoading ? "Вход..." : "Войти" }}
+            </button>
+        </form>
+    </div>
 </template>
+
+<script setup lang="ts">
+import { ref, onUnmounted } from "vue";
+import { useAuthStore } from "@/stores/auth";
+
+const authStore = useAuthStore();
+
+const login = ref("");
+const password = ref("");
+
+const onSubmit = async () => {
+    if (!login.value || !password.value) {
+        return;
+    }
+    await authStore.handleLogin({
+        login: login.value,
+        password: password.value,
+    });
+};
+
+onUnmounted(() => {
+    authStore.error = null;
+});
+</script>
+
+<style scoped>
+/* Стили можно скопировать из RegisterView.vue или вынести в общий файл */
+.login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 50px;
+}
+.login-form {
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+h1 {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+.form-group {
+    margin-bottom: 1rem;
+}
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+}
+.error-message {
+    background-color: #f8d7da;
+    color: #721c24;
+    padding: 0.75rem;
+    border: 1px solid #f5c6cb;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+button {
+    width: 100%;
+    padding: 0.75rem;
+    background-color: #42b983;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+button:hover {
+    background-color: #36a476;
+}
+button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
+</style>

src/views/RegisterView.vue

@@ -1,3 +1,136 @@
 <template>
+    <div class="register-container">
+        <form @submit.prevent="onSubmit" class="register-form">
             <h1>Регистрация</h1>
+
+            <div class="form-group">
+                <label for="username">Имя пользователя</label>
+                <input id="username" v-model="username" type="text" required minlength="3" maxlength="16" pattern="^[a-zA-Z0-9_]+$" />
+                <small>От 3 до 16 символов. Только буквы, цифры и `_`.</small>
+            </div>
+
+            <div class="form-group">
+                <label for="email">Email</label>
+                <input id="email" v-model="email" type="email" required />
+            </div>
+
+            <div class="form-group">
+                <label for="password">Пароль</label>
+                <input id="password" v-model="password" type="password" required minlength="8" />
+                <small>Минимум 8 символов.</small>
+            </div>
+
+            <div v-if="authStore.error" class="error-message">
+                {{ authStore.error }}
+            </div>
+
+            <button type="submit" :disabled="authStore.isLoading">
+                {{ authStore.isLoading ? "Регистрация..." : "Зарегистрироваться" }}
+            </button>
+        </form>
+    </div>
 </template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useAuthStore } from "@/stores/auth";
+
+// Используем наш Pinia store
+const authStore = useAuthStore();
+
+// Реактивные переменные для полей формы
+const username = ref("");
+const email = ref("");
+const password = ref("");
+
+// Функция, вызываемая при отправке формы
+const onSubmit = async () => {
+    // Простая валидация на клиенте (хотя основная на бэкенде)
+    if (!username.value || !email.value || !password.value) {
+        return;
+    }
+
+    await authStore.handleRegister({
+        username: username.value,
+        email: email.value,
+        password: password.value,
+    });
+};
+</script>
+
+<style scoped>
+.register-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 50px;
+}
+
+.register-form {
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 1.5rem;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+label {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+
+input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box; /* Важно для правильного расчета ширины */
+}
+
+small {
+    display: block;
+    margin-top: 0.25rem;
+    color: #666;
+}
+
+.error-message {
+    background-color: #f8d7da;
+    color: #721c24;
+    padding: 0.75rem;
+    border: 1px solid #f5c6cb;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    text-align: center;
+}
+
+button {
+    width: 100%;
+    padding: 0.75rem;
+    background-color: #42b983;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+button:hover {
+    background-color: #36a476;
+}
+
+button:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+}
+</style>

src/views/ServersView.vue

@@ -0,0 +1,163 @@
+<template>
+    <div class="servers-container">
+        <h1>Мониторинг серверов</h1>
+        <div v-if="isLoading" class="loading">Загрузка данных...</div>
+        <div v-if="error" class="error-message">{{ error }}</div>
+
+        <div class="ping-info">
+            Ваш пинг до сервера:
+            <span v-if="clientProxyPing !== null">{{ clientProxyPing }} мс</span>
+            <span v-else>измерение...</span>
+        </div>
+
+        <div class="server-list">
+            <div v-for="server in servers" :key="server.id" class="server-card">
+                <h3>{{ server.name }}</h3>
+                <p class="motd" v-html="formatMotd(server.motd)"></p>
+                <div class="status">
+                    <span class="online-status" :class="{ 'is-online': server.player_count !== null }">
+                        {{ server.player_count !== null ? "Online" : "Offline" }}
+                    </span>
+                    <span class="players" v-if="server.player_count !== null"> {{ server.player_count }} / {{ server.max_players }} </span>
+                </div>
+                <div class="ping">
+                    Общий пинг:
+                    <span v-if="totalPing(server) !== null">{{ totalPing(server) }} мс</span>
+                    <span v-else>N/A</span>
+                </div>
+                <div class="version">{{ server.version_name }}</div>
+                <div v-if="server.bluemap_url" class="bluemap-link">
+                    <a :href="server.bluemap_url" target="_blank" rel="noopener noreferrer">Карта мира</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import apiClient from "@/api/axios";
+
+// Тип для сервера, можно вынести в types.ts
+interface GameServer {
+    id: number;
+    name: string;
+    motd: string | null;
+    player_count: number | null;
+    max_players: number | null;
+    version_name: string | null;
+    ping_proxy_server: number | null;
+    bluemap_url: string | null;
+}
+
+const servers = ref<GameServer[]>([]);
+const isLoading = ref(true);
+const error = ref<string | null>(null);
+const clientProxyPing = ref<number | null>(null);
+
+let ws: WebSocket | null = null;
+let pingInterval: number | null = null;
+
+const fetchServers = async () => {
+    try {
+        const response = await apiClient.get<GameServer[]>("/servers");
+        servers.value = response.data;
+    } catch (e) {
+        error.value = "Не удалось загрузить список серверов.";
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const setupWebSocket = () => {
+    const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${wsProtocol}//${window.location.host}/ws/ping`;
+
+    ws = new WebSocket(wsUrl);
+
+    ws.onopen = () => {
+        console.log("WebSocket connection established.");
+        pingInterval = window.setInterval(() => {
+            if (ws?.readyState === WebSocket.OPEN) {
+                ws.send(Date.now().toString());
+            }
+        }, 5000);
+    };
+
+    ws.onmessage = (event) => {
+        const serverTimestamp = parseInt(event.data, 10);
+        clientProxyPing.value = Date.now() - serverTimestamp;
+    };
+
+    ws.onclose = () => {
+        console.log("WebSocket connection closed.");
+        if (pingInterval) clearInterval(pingInterval);
+    };
+
+    ws.onerror = (err) => {
+        console.error("WebSocket error:", err);
+        error.value = "Ошибка подключения к WebSocket.";
+    };
+};
+
+const totalPing = (server: GameServer) => {
+    if (clientProxyPing.value !== null && server.ping_proxy_server !== null) {
+        return clientProxyPing.value + server.ping_proxy_server;
+    }
+    return null;
+};
+
+// Функция для форматирования MOTD с кодами цвета Minecraft
+const formatMotd = (motd: string | null) => {
+    if (!motd) return "";
+    return motd.replace(/§[0-9a-fk-or]/g, "");
+};
+
+onMounted(() => {
+    fetchServers();
+    setupWebSocket();
+});
+
+onUnmounted(() => {
+    if (ws) {
+        ws.close();
+    }
+    if (pingInterval) {
+        clearInterval(pingInterval);
+    }
+});
+</script>
+
+<style scoped>
+/* ... добавьте стили для карточек серверов ... */
+.server-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 1rem;
+}
+.server-card {
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    padding: 1rem;
+}
+.ping-info {
+    margin-bottom: 1rem;
+    font-weight: bold;
+}
+.bluemap-link {
+    margin-top: 0.5rem;
+    text-align: right;
+}
+.bluemap-link a {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    background-color: #3eaf7c;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+    font-size: 0.9em;
+}
+.bluemap-link a:hover {
+    background-color: #339265;
+}
+</style>

src/views/admin/AdminLayout.vue

@@ -0,0 +1,48 @@
+<template>
+    <div class="admin-layout">
+        <aside class="admin-sidebar">
+            <h2>Админ-панель</h2>
+            <nav>
+                <router-link :to="{ name: 'admin-dashboard' }">Дашборд</router-link>
+                <router-link :to="{ name: 'admin-users' }">Пользователи</router-link>
+                <router-link :to="{ name: 'admin-modpacks' }">Модпаки</router-link>
+            </nav>
+        </aside>
+        <main class="admin-content">
+            <router-view />
+        </main>
+    </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+.admin-layout {
+    display: flex;
+}
+.admin-sidebar {
+    width: 200px;
+    background: #f4f4f4;
+    padding: 1rem;
+    height: 100vh;
+}
+.admin-sidebar h2 {
+    margin-top: 0;
+}
+.admin-sidebar nav {
+    display: flex;
+    flex-direction: column;
+}
+.admin-sidebar nav a {
+    padding: 0.5rem 0;
+    text-decoration: none;
+    color: #333;
+}
+.admin-sidebar nav a.router-link-exact-active {
+    font-weight: bold;
+}
+.admin-content {
+    flex-grow: 1;
+    padding: 1rem;
+}
+</style>

src/views/admin/DashboardView.vue

@@ -0,0 +1 @@
+<template><h1>Дашборд</h1></template>

src/views/admin/ModpacksView.vue

@@ -0,0 +1,598 @@
+<template>
+    <div>
+        <h1>Управление модпаками</h1>
+
+        <div class="import-section">
+            <h2>Импорт нового модпака</h2>
+            <form @submit.prevent="handleImport" class="import-form">
+                <div class="form-group">
+                    <label>Тип сборки</label>
+                    <select v-model="form.importerType">
+                        <option value="simple">Простой ZIP</option>
+                        <option value="curseforge">CurseForge</option>
+                        <option value="modrinth">Modrinth (.mrpack)</option>
+                    </select>
+                </div>
+
+                <div class="form-group">
+                    <label>Метод импорта</label>
+                    <div class="radio-group">
+                        <label><input type="radio" v-model="form.importMethod" value="file" /> Файл</label>
+                        <label
+                            ><input type="radio" v-model="form.importMethod" value="url" :disabled="form.importerType !== 'curseforge'" />
+                            URL</label
+                        >
+                    </div>
+                </div>
+
+                <!-- Поля для метаданных -->
+                <div class="form-group">
+                    <label for="name">Системное имя (латиница, без пробелов)</label>
+                    <input id="name" v-model="form.name" type="text" required pattern="^[a-zA-Z0-9_]+$" />
+                </div>
+                <div class="form-group">
+                    <label for="displayName">Отображаемое имя</label>
+                    <input id="displayName" v-model="form.displayName" type="text" required />
+                </div>
+                <div class="form-group">
+                    <label for="mcVersion">Версия Minecraft</label>
+                    <input id="mcVersion" v-model="form.mcVersion" type="text" required />
+                </div>
+
+                <!-- Поля для источника -->
+                <div v-if="form.importMethod === 'file'" class="form-group">
+                    <label for="modpack-file">Файл модпака (.zip, .mrpack)</label>
+                    <input id="modpack-file" type="file" @change="onFileSelected" :required="form.importMethod === 'file'" accept=".zip,.mrpack" />
+                </div>
+                <div v-if="form.importMethod === 'url'" class="form-group">
+                    <label for="sourceUrl">URL страницы модпака на CurseForge</label>
+                    <input id="sourceUrl" v-model="form.sourceUrl" type="url" :required="form.importMethod === 'url'" />
+                </div>
+
+                <div v-if="importJob.jobId" class="job-status">
+                    <h3>Статус импорта</h3>
+                    <div class="progress-bar">
+                        <div class="progress" :style="{ width: importJob.progress + '%' }"></div>
+                    </div>
+                    <p>{{ importJob.message }} ({{ importJob.progress }}%)</p>
+                    <div v-if="importJob.status === 'failed'" class="error-message">Ошибка: {{ importJob.message }}</div>
+                    <div v-if="importJob.status === 'completed'" class="success-message">Импорт успешно завершен!</div>
+                </div>
+
+                <div v-if="error && !importJob.jobId" class="error-message">{{ error }}</div>
+                <!-- <div v-if="successMessage" class="success-message">{{ successMessage }}</div> -->
+
+                <button type="submit" :disabled="isLoading || (importJob.jobId !== null && importJob.status !== 'completed' && importJob.status !== 'failed')">
+                    {{ isLoading ? "Запуск..." : "Импортировать" }}
+                </button>
+            </form>
+        </div>
+
+        <!-- СПИСОК МОДПАКОВ -->
+        <div class="modpacks-section">
+            <h2>Существующие модпаки</h2>
+            <div v-if="modpacksLoading">Загрузка...</div>
+            <table v-else-if="modpacks.length > 0" class="modpacks-table">
+                <thead>
+                    <tr>
+                        <th>Имя</th>
+                        <th>Отображаемое имя</th>
+                        <th>MC Version</th>
+                        <th>Обновлено</th>
+                        <th>Действия</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="m in modpacks" :key="m.id">
+                        <td>{{ m.name }}</td>
+                        <td>{{ m.display_name }}</td>
+                        <td>{{ m.minecraft_version }}</td>
+                        <td>{{ formatDate(m.updated_at) }}</td>
+                        <td>
+                            <button @click="openUpdateModal(m)" class="btn-small">Обновить</button>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <p v-else>Нет модпаков</p>
+        </div>
+
+        <!-- МОДАЛЬНОЕ ОКНО ОБНОВЛЕНИЯ -->
+        <div v-if="updateModal.show" class="modal-overlay" @click.self="closeUpdateModal">
+            <div class="modal-content">
+                <h3>Обновить модпак: {{ updateModal.modpack?.name }}</h3>
+                <form @submit.prevent="handleUpdate" class="import-form">
+                    <div class="form-group">
+                        <label>Тип сборки</label>
+                        <select v-model="updateForm.importerType">
+                            <option value="simple">Простой ZIP</option>
+                            <option value="curseforge">CurseForge</option>
+                            <option value="modrinth">Modrinth (.mrpack)</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Метод импорта</label>
+                        <div class="radio-group">
+                            <label><input type="radio" v-model="updateForm.importMethod" value="file" /> Файл</label>
+                            <label><input type="radio" v-model="updateForm.importMethod" value="url" :disabled="updateForm.importerType !== 'curseforge'" /> URL</label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label>Версия Minecraft (опционально)</label>
+                        <input v-model="updateForm.mcVersion" type="text" :placeholder="updateModal.modpack?.minecraft_version" />
+                    </div>
+                    <div v-if="updateForm.importMethod === 'file'" class="form-group">
+                        <label>Файл модпака</label>
+                        <input type="file" @change="onUpdateFileSelected" accept=".zip,.mrpack" />
+                    </div>
+                    <div v-if="updateForm.importMethod === 'url'" class="form-group">
+                        <label>URL страницы модпака</label>
+                        <input v-model="updateForm.sourceUrl" type="url" />
+                    </div>
+
+                    <div v-if="updateJob.jobId" class="job-status">
+                        <div class="progress-bar">
+                            <div class="progress" :style="{ width: updateJob.progress + '%' }"></div>
+                        </div>
+                        <p>{{ updateJob.message }} ({{ updateJob.progress }}%)</p>
+                        <div v-if="updateJob.status === 'failed'" class="error-message">Ошибка: {{ updateJob.message }}</div>
+                        <div v-if="updateJob.status === 'completed'" class="success-message">Обновление завершено!</div>
+                    </div>
+
+                    <div class="modal-actions">
+                        <button type="submit" :disabled="updateLoading || (updateJob.jobId !== null && updateJob.status !== 'completed' && updateJob.status !== 'failed')">
+                            {{ updateLoading ? "Запуск..." : "Обновить" }}
+                        </button>
+                        <button type="button" @click="closeUpdateModal" class="btn-secondary">Отмена</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, watch, onMounted, onUnmounted } from "vue";
+import apiClient from "@/api/axios";
+import { useAuthStore } from "@/stores/auth";
+
+const authStore = useAuthStore();
+
+// ===== Интерфейсы =====
+interface Modpack {
+    id: number;
+    name: string;
+    display_name: string;
+    minecraft_version: string;
+    is_active: boolean;
+    created_at: string;
+    updated_at: string;
+}
+
+// ===== Состояние списка модпаков =====
+const modpacks = ref<Modpack[]>([]);
+const modpacksLoading = ref(true);
+
+// ===== Форма импорта =====
+const form = reactive({
+    name: "",
+    displayName: "",
+    mcVersion: "",
+    file: null as File | null,
+    importerType: "simple",
+    importMethod: "file",
+    sourceUrl: "",
+});
+
+const isLoading = ref(false);
+const error = ref<string | null>(null);
+const successMessage = ref<string | null>(null);
+
+// Состояние задачи импорта
+const importJob = reactive({
+    jobId: null as number | null,
+    status: "" as string,
+    progress: 0,
+    message: "" as string,
+});
+
+// ===== Модальное окно обновления =====
+const updateModal = reactive({
+    show: false,
+    modpack: null as Modpack | null,
+});
+
+const updateForm = reactive({
+    importerType: "simple",
+    importMethod: "file",
+    mcVersion: "",
+    sourceUrl: "",
+    file: null as File | null,
+});
+
+const updateLoading = ref(false);
+const updateJob = reactive({
+    jobId: null as number | null,
+    status: "" as string,
+    progress: 0,
+    message: "" as string,
+});
+
+let ws: WebSocket | null = null;
+
+// ===== Watchers =====
+watch(
+    () => form.importerType,
+    (newType) => {
+        if (newType !== "curseforge" && form.importMethod === "url") {
+            form.importMethod = "file";
+        }
+    },
+);
+
+watch(
+    () => updateForm.importerType,
+    (newType) => {
+        if (newType !== "curseforge" && updateForm.importMethod === "url") {
+            updateForm.importMethod = "file";
+        }
+    },
+);
+
+// ===== Helpers =====
+const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleString();
+};
+
+const getStatusMessage = (status: string) => {
+    switch (status) {
+        case 'pending': return 'Ожидание очереди...';
+        case 'downloading': return 'Скачивание файлов...';
+        case 'processing': return 'Обработка...';
+        case 'completed': return 'Готово';
+        case 'failed': return 'Ошибка';
+        default: return status;
+    }
+};
+
+// ===== Fetching =====
+const fetchModpacks = async () => {
+    modpacksLoading.value = true;
+    try {
+        const response = await apiClient.get<Modpack[]>("/admin/modpacks");
+        modpacks.value = response.data || [];
+    } catch (e) {
+        console.error("Failed to fetch modpacks", e);
+    } finally {
+        modpacksLoading.value = false;
+    }
+};
+
+// ===== File handlers =====
+const onFileSelected = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files[0]) {
+        form.file = target.files[0];
+    }
+};
+
+const onUpdateFileSelected = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.files && target.files[0]) {
+        updateForm.file = target.files[0];
+    }
+};
+
+// ===== WebSocket =====
+const connectWebSocket = (targetJob: { jobId: number | null; status: string; progress: number; message: string }, onComplete?: () => void) => {
+    if (ws) {
+        ws.close();
+    }
+
+    const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const host = window.location.host;
+    const url = `${protocol}//${host}/api/admin/ws/jobs?token=${authStore.token}`;
+
+    ws = new WebSocket(url);
+
+    ws.onmessage = (event) => {
+        try {
+            const data = JSON.parse(event.data);
+            if (data.job_id === targetJob.jobId) {
+                targetJob.status = data.status;
+                targetJob.progress = data.progress;
+                targetJob.message = data.error_message || getStatusMessage(data.status);
+                
+                if (data.status === 'completed') {
+                    isLoading.value = false;
+                    updateLoading.value = false;
+                    if (onComplete) onComplete();
+                } else if (data.status === 'failed') {
+                    isLoading.value = false;
+                    updateLoading.value = false;
+                }
+            }
+        } catch (e) {
+            console.error("WS parse error", e);
+        }
+    };
+
+    ws.onclose = () => {
+        console.log("WS closed");
+    };
+};
+
+// ===== Modal handlers =====
+const openUpdateModal = (modpack: Modpack) => {
+    updateModal.show = true;
+    updateModal.modpack = modpack;
+    updateForm.importerType = "simple";
+    updateForm.importMethod = "file";
+    updateForm.mcVersion = "";
+    updateForm.sourceUrl = "";
+    updateForm.file = null;
+    updateJob.jobId = null;
+    updateJob.status = "";
+    updateJob.progress = 0;
+    updateJob.message = "";
+};
+
+const closeUpdateModal = () => {
+    updateModal.show = false;
+    updateModal.modpack = null;
+};
+
+// ===== Import handler =====
+const handleImport = async () => {
+    if (form.importMethod === "file" && !form.file) {
+        error.value = "Пожалуйста, выберите файл для импорта.";
+        return;
+    }
+    if (form.importMethod === "url" && !form.sourceUrl) {
+        error.value = "Пожалуйста, введите URL.";
+        return;
+    }
+
+    isLoading.value = true;
+    error.value = null;
+    successMessage.value = null;
+    
+    importJob.jobId = null;
+    importJob.status = "";
+    importJob.progress = 0;
+    importJob.message = "";
+
+    const formData = new FormData();
+    formData.append("name", form.name);
+    formData.append("displayName", form.displayName);
+    formData.append("mcVersion", form.mcVersion);
+    formData.append("importerType", form.importerType);
+    formData.append("importMethod", form.importMethod);
+
+    if (form.importMethod === "file" && form.file) {
+        formData.append("file", form.file);
+    } else if (form.importMethod === "url") {
+        formData.append("sourceUrl", form.sourceUrl);
+    }
+
+    try {
+        const response = await apiClient.post("/admin/modpacks/import", formData, {
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        });
+        
+        if (response.status === 202 && response.data.job_id) {
+            importJob.jobId = response.data.job_id;
+            importJob.status = 'pending';
+            importJob.message = 'Задача создана...';
+            connectWebSocket(importJob, fetchModpacks);
+        } else {
+            successMessage.value = response.data;
+            isLoading.value = false;
+            fetchModpacks();
+        }
+
+    } catch (e: any) {
+        error.value = e.response?.data || "Произошла ошибка при импорте.";
+        isLoading.value = false;
+    }
+};
+
+// ===== Update handler =====
+const handleUpdate = async () => {
+    if (!updateModal.modpack) return;
+
+    if (updateForm.importMethod === "file" && !updateForm.file) {
+        return;
+    }
+    if (updateForm.importMethod === "url" && !updateForm.sourceUrl) {
+        return;
+    }
+
+    updateLoading.value = true;
+    updateJob.jobId = null;
+    updateJob.status = "";
+    updateJob.progress = 0;
+    updateJob.message = "";
+
+    const formData = new FormData();
+    formData.append("modpackName", updateModal.modpack.name);
+    formData.append("importerType", updateForm.importerType);
+    formData.append("importMethod", updateForm.importMethod);
+    if (updateForm.mcVersion) {
+        formData.append("mcVersion", updateForm.mcVersion);
+    }
+
+    if (updateForm.importMethod === "file" && updateForm.file) {
+        formData.append("file", updateForm.file);
+    } else if (updateForm.importMethod === "url") {
+        formData.append("sourceUrl", updateForm.sourceUrl);
+    }
+
+    try {
+        const response = await apiClient.post("/admin/modpacks/update", formData, {
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        });
+        
+        if (response.status === 202 && response.data.job_id) {
+            updateJob.jobId = response.data.job_id;
+            updateJob.status = 'pending';
+            updateJob.message = 'Задача создана...';
+            connectWebSocket(updateJob, () => {
+                fetchModpacks();
+            });
+        } else {
+            updateLoading.value = false;
+            fetchModpacks();
+        }
+
+    } catch (e: any) {
+        console.error("Update error", e);
+        updateLoading.value = false;
+    }
+};
+
+// ===== Lifecycle =====
+onMounted(() => {
+    fetchModpacks();
+});
+
+onUnmounted(() => {
+    if (ws) ws.close();
+});
+</script>
+
+<style scoped>
+.import-section {
+    max-width: 600px;
+    margin-top: 2rem;
+    padding: 2rem;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+}
+.import-form .form-group {
+    margin-bottom: 1rem;
+}
+.import-form label {
+    display: block;
+    margin-bottom: 0.5rem;
+}
+.import-form input,
+.import-form select {
+    width: 100%;
+    padding: 0.5rem;
+    box-sizing: border-box;
+}
+.radio-group label {
+    display: inline-block;
+    margin-right: 1rem;
+}
+.error-message,
+.success-message {
+    margin-top: 1rem;
+    padding: 0.75rem;
+    border-radius: 4px;
+    text-align: center;
+}
+.error-message {
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+.success-message {
+    background-color: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+button {
+    padding: 0.75rem 1.5rem;
+    background-color: #42b983;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+button:disabled {
+    background-color: #ccc;
+}
+
+/* Modpacks List Section */
+.modpacks-section {
+    margin-top: 2rem;
+}
+.modpacks-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+}
+.modpacks-table th,
+.modpacks-table td {
+    border: 1px solid #ddd;
+    padding: 0.75rem;
+    text-align: left;
+}
+.modpacks-table th {
+    background-color: #f5f5f5;
+}
+.btn-small {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.9em;
+}
+
+/* Modal Overlay */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+.modal-content {
+    background: white;
+    padding: 2rem;
+    border-radius: 8px;
+    max-width: 500px;
+    width: 90%;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+.modal-actions {
+    display: flex;
+    gap: 1rem;
+    margin-top: 1rem;
+}
+.btn-secondary {
+    background-color: #6c757d;
+}
+.btn-secondary:hover {
+    background-color: #5a6268;
+}
+
+/* Progress bar */
+.progress-bar {
+    height: 20px;
+    background: #eee;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+}
+.progress {
+    height: 100%;
+    background: #42b983;
+    transition: width 0.3s;
+}
+.job-status {
+    margin-top: 1rem;
+    padding: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+</style>

src/views/admin/UsersView.vue

@@ -0,0 +1,88 @@
+<template>
+    <div>
+        <h1>Управление пользователями</h1>
+        <div v-if="isLoading">Загрузка...</div>
+        <table v-else>
+            <thead>
+                <tr>
+                    <th>ID</th>
+                    <th>Username</th>
+                    <th>Email</th>
+                    <th>Роль</th>
+                    <th>Действия</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr v-for="user in users" :key="user.uuid">
+                    <td>{{ user.id }}</td>
+                    <td>{{ user.username }}</td>
+                    <td>{{ user.email }}</td>
+                    <td>
+                        <select v-model="user.role" @change="updateRole(user)">
+                            <option value="user">user</option>
+                            <option value="admin">admin</option>
+                        </select>
+                    </td>
+                    <td><button @click="updateRole(user)">Сохранить</button></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import apiClient from "@/api/axios";
+
+interface User {
+    id: number;
+    uuid: string;
+    username: string;
+    email: string;
+    role: string;
+}
+
+const users = ref<User[]>([]);
+const isLoading = ref(true);
+
+const fetchUsers = async () => {
+    isLoading.value = true;
+    try {
+        const response = await apiClient.get<User[]>("/admin/users");
+        users.value = response.data;
+    } catch (error) {
+        console.error("Failed to fetch users:", error);
+    } finally {
+        isLoading.value = false;
+    }
+};
+
+const updateRole = async (user: User) => {
+    try {
+        await apiClient.patch(`/admin/users/${user.id}/role`, { role: user.role });
+        alert(`Роль для ${user.username} обновлена.`);
+    } catch (error) {
+        console.error("Failed to update role:", error);
+        alert("Ошибка при обновлении роли.");
+        fetchUsers();
+    }
+};
+
+onMounted(fetchUsers);
+</script>
+
+<style scoped>
+table {
+    width: 100%;
+    border-collapse: collapse;
+}
+th,
+td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+th {
+    background-color: #f2f2f2;
+}
+</style>

tsconfig.app.json

@@ -9,7 +9,13 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    /* Path Aliases */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

tsconfig.node.json

@@ -1,25 +1,14 @@
 {
   "compilerOptions": {
+    "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
     "skipLibCheck": true,
-
+    "module": "ESNext",
-    /* Bundler mode */
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
+    "target": "ES2022",
-    "verbatimModuleSyntax": true,
+    "allowSyntheticDefaultImports": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
     "strict": true,
-    "noUnusedLocals": true,
+    "types": ["node"]
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
   },
   "include": ["vite.config.ts"]
 }

vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { URL, fileURLToPath } from "node:url";
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue()],
+    resolve: {
+        alias: {
+            "@": fileURLToPath(new URL("./src", import.meta.url)),
+        },
+    },
+    server: {
+        proxy: {
+            "^/api|/authserver|/sessionserver": {
+                target: "http://localhost:8080",
+                changeOrigin: true,
+            },
+        },
+    },
+});

vite.config.ts

@@ -1,15 +1,19 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
+import { URL, fileURLToPath } from "node:url";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
   server: {
-    // <-- ДОБАВЬТЕ ЭТОТ БЛОК
     proxy: {
-      // Проксируем все запросы, начинающиеся с /api, /authserver, /sessionserver
       "^/api|/authserver|/sessionserver": {
-        target: "http://localhost:8080", // Адрес вашего локального бэкенда
+        target: "http://localhost:8080",
         changeOrigin: true,
       },
     },