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

@@ -15,6 +15,7 @@
         "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",
@@ -786,6 +787,16 @@
       "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",
@@ -1777,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

@@ -16,6 +16,7 @@
     "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

@@ -8,6 +8,7 @@
             </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>
@@ -20,8 +21,15 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from "vue";
 import { useAuthStore } from "@/stores/auth";
+
 const authStore = useAuthStore();
+
+// Восстанавливаем сессию при загрузке приложения
+onMounted(() => {
+    authStore.checkAuth();
+});
 </script>
 
 <style scoped>

src/api/auth.ts

@@ -1,4 +1,4 @@
-import type { RegisterRequest } from "@/types";
+import type { RegisterRequest, LoginRequest, LoginResponse } from "@/types";
 import apiClient from "./axios";
 
 export const registerUser = (userData: RegisterRequest) => {

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

@@ -29,6 +29,29 @@ const routes = [
     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({
@@ -36,10 +59,12 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to, from, next) => {
+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();
   }

src/stores/auth.ts

@@ -1,7 +1,8 @@
 import { defineStore } from "pinia";
 import { ref, computed } from "vue";
-import { registerUser as apiRegisterUser } from "@/api/auth";
-import type { RegisterRequest } from "@/types";
+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";
 
@@ -9,6 +10,7 @@ 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);
 
@@ -16,11 +18,33 @@ export const useAuthStore = defineStore("auth", () => {
   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) {
@@ -61,15 +85,32 @@ export const useAuthStore = defineStore("auth", () => {
   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
@@ -78,5 +119,7 @@ export const useAuthStore = defineStore("auth", () => {
     handleLogin,
     handleRegister,
     handleLogout,
+    fetchUserProfile,
+    checkAuth,
   };
 });

src/types.ts

@@ -19,6 +19,7 @@ export interface LoginResponse {
 
 // Тип для объекта пользователя
 export interface User {
+  id: number;
   uuid: string;
   username: string;
   email: string;
@@ -26,3 +27,15 @@ export interface User {
   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

@@ -71,6 +71,7 @@ const onSkinUpload = async () => {
         if (skinViewer) {
             skinViewer.loadSkin(URL.createObjectURL(selectedFile.value));
         }
+        await authStore.fetchUserProfile();
     } catch (e: any) {
         uploadError.value = e.response?.data || "Ошибка при загрузке файла.";
     } finally {
@@ -78,16 +79,38 @@ const onSkinUpload = async () => {
     }
 };
 
-// Инициализация 3D-вьювера при монтировании компонента
-onMounted(() => {
-    if (skinCanvas.value) {
+const setupSkinViewer = () => {
+    if (skinCanvas.value && !skinViewer) {
         skinViewer = new SkinViewer({
             canvas: skinCanvas.value,
             width: 300,
             height: 400,
-            skin: "/default_skin.png",
         });
     }
+};
+
+// Следим за изменением 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();
+    }
 });
 
 // Очистка ресурсов при размонтировании

src/views/ServersView.vue

@@ -26,6 +26,9 @@
                     <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>
@@ -44,6 +47,7 @@ interface GameServer {
     max_players: number | null;
     version_name: string | null;
     ping_proxy_server: number | null;
+    bluemap_url: string | null;
 }
 
 const servers = ref<GameServer[]>([]);
@@ -140,4 +144,20 @@ onUnmounted(() => {
     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.node.json

@@ -1,25 +1,14 @@
 {
   "compilerOptions": {
+    "composite": true,
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2022",
-    "lib": ["ES2023"],
-    "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
+    "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
+    "target": "ES2022",
+    "allowSyntheticDefaultImports": true,
     "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "types": ["node"]
   },
   "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,13 +1,13 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
-import path from "path";
+import { URL, fileURLToPath } from "node:url";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      "@": path.resolve(__dirname, "./src"),
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
     },
   },
   server: {