feat: полноценный мультипользовательский режим (users, JWT, изолированные задачи)

2026-08-09 10:50:04 +03:00
parent a47514648c
commit 8a3f3c749f
7 changed files with 581 additions and 195 deletions
@@ -10,24 +10,30 @@
 </head>
 <body class="bg-slate-100 text-slate-800 h-[100dvh] w-full flex flex-col font-sans overflow-hidden">

-    <!-- Окно авторизации c гостевым входом -->
+    <!-- Окно авторизации / Регистрации -->
    <div id="auth-modal" class="fixed inset-0 bg-slate-900/80 backdrop-blur-md z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-2xl p-6 sm:p-8 max-w-md w-full shadow-2xl border border-slate-200">
            <div class="flex items-center space-x-3 mb-6">
                <div class="bg-indigo-600 text-white p-3 rounded-xl">
-                    <i class="fa-solid fa-lock text-xl"></i>
+                    <i class="fa-solid fa-user-shield text-xl"></i>
                </div>
                <div>
                    <h2 class="text-lg font-bold text-slate-900">SCUD Orion AI</h2>
-                    <p class="text-xs text-slate-500">Авторизация в системе</p>
+                    <p id="auth-title" class="text-xs text-slate-500">Авторизация в системе</p>
                </div>
            </div>

            <form id="auth-form" onsubmit="handleLogin(event)" class="space-y-4">
                <div>
-                    <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-2">API Token</label>
-                    <input type="password" id="auth-token-input" placeholder="Введите API токен..."
-                        class="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-3 text-sm text-slate-900 focus:outline-none focus:border-indigo-600 focus:bg-white transition">
+                    <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1">Имя пользователя</label>
+                    <input type="text" id="auth-username-input" placeholder="Введите логин..." required
+                        class="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-sm text-slate-900 focus:outline-none focus:border-indigo-600 focus:bg-white transition">
+                </div>
+
+                <div>
+                    <label class="block text-xs font-semibold text-slate-700 uppercase tracking-wider mb-1">Пароль</label>
+                    <input type="password" id="auth-password-input" placeholder="Введите пароль..." required
+                        class="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-sm text-slate-900 focus:outline-none focus:border-indigo-600 focus:bg-white transition">
                </div>

                <div id="auth-error" class="hidden text-xs text-red-600 font-medium bg-red-50 p-3 rounded-xl border border-red-200">
@@ -36,16 +42,22 @@

                <button type="submit" id="auth-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white font-semibold py-3 rounded-xl text-sm transition shadow-md flex items-center justify-center gap-2">
                    <i class="fa-solid fa-right-to-bracket"></i>
-                    <span>Войти с токеном</span>
+                    <span id="auth-submit-text">Войти в систему</span>
                </button>
            </form>

-            <div class="relative my-5">
+            <div class="mt-3 text-center">
+                <button type="button" id="auth-toggle-btn" onclick="toggleAuthMode()" class="text-xs text-indigo-600 hover:underline font-medium">
+                    Создать новый аккаунт
+                </button>
+            </div>
+
+            <div class="relative my-4">
                <div class="absolute inset-0 flex items-center"><div class="w-full border-t border-slate-200"></div></div>
                <div class="relative flex justify-center text-xs uppercase"><span class="bg-white px-2 text-slate-400 font-medium">Или</span></div>
            </div>

-            <button onclick="enableGuestMode()" class="w-full bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold py-3 rounded-xl text-sm transition border border-slate-300 flex items-center justify-center gap-2">
+            <button onclick="enableGuestMode()" class="w-full bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold py-2.5 rounded-xl text-xs transition border border-slate-300 flex items-center justify-center gap-2">
                <i class="fa-solid fa-user-ninja"></i>
                <span>Войти как гость (Локальный ИИ)</span>
            </button>
@@ -66,7 +78,11 @@

        <div class="flex items-center space-x-2">
            <span id="guest-badge" class="hidden text-[10px] text-amber-700 font-semibold bg-amber-50 px-2 py-0.5 rounded-full border border-amber-200">
-                Гостевой режим
+                Гость
+            </span>
+
+            <span id="username-badge" class="hidden text-xs text-indigo-700 font-bold bg-indigo-50 px-2.5 py-1 rounded-full border border-indigo-200">
+                Admin
            </span>

            <button id="tasks-drawer-btn" onclick="toggleDrawer()" class="bg-indigo-600 active:bg-indigo-700 text-white px-3 py-1.5 rounded-xl text-xs font-semibold flex items-center gap-1.5 shadow-sm">
@@ -88,7 +104,7 @@
                    <i class="fa-solid fa-robot mr-1"></i> ИИ-Ассистент
                </p>
                <p class="text-slate-800 text-xs sm:text-sm leading-relaxed">
-                    Привет! Задавайте вопросы нейросети прямо в чат.
+                    Привет! У каждого пользователя свое изолированное пространство задач. Вы можете задавать вопросы нейросети или ставить персональные задачи.
                </p>
            </div>
        </div>
@@ -115,7 +131,7 @@
    <aside id="task-drawer" class="fixed right-0 top-0 h-full w-full sm:w-[420px] bg-white border-l border-slate-200 shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 flex flex-col">
        <div class="p-3.5 border-b border-slate-200 flex justify-between items-center bg-slate-50 shrink-0">
            <h2 class="font-bold text-slate-800 flex items-center gap-2 text-sm">
-                <i class="fa-solid fa-list-check text-indigo-600"></i> Реестр задач
+                <i class="fa-solid fa-list-check text-indigo-600"></i> Мой реестр задач
            </h2>
            <div class="flex items-center gap-3">
                <button onclick="loadTasks()" class="text-xs text-slate-500 hover:text-indigo-600 transition p-1" title="Обновить">
@@ -135,11 +151,10 @@
        </div>

        <div id="tasks-container" class="flex-1 overflow-y-auto p-3.5 space-y-3 bg-slate-50/50 pb-8">
-            <div class="text-center text-slate-400 py-8 text-xs">Загрузка задач...</div>
+            <div class="text-center text-slate-400 py-8 text-xs">Загрузка ваших задач...</div>
        </div>
    </aside>

-    <!-- Порядок подключения модулей JS -->
    <script src="/static/js/auth.js"></script>
    <script src="/static/js/tasks.js"></script>
    <script src="/static/js/chat.js"></script>
@@ -3,6 +3,7 @@ const SESSION_ID = "web_session_main";
 const STORAGE_KEY = 'scud_chat_input_history';

 let API_TOKEN = localStorage.getItem(AUTH_TOKEN_KEY) || "";
+let CURRENT_USERNAME = localStorage.getItem('scud_username') || "";
 let IS_GUEST = localStorage.getItem('scud_is_guest') === 'true';
 let currentFilter = 'ALL';
 let allTasks = [];
@@ -57,15 +58,9 @@ document.addEventListener('DOMContentLoaded', () => {
        hideAuthModal();
        updateUIState();
    } else if (API_TOKEN) {
-        verifyToken(API_TOKEN).then(isValid => {
-            if (isValid) {
-                hideAuthModal();
-                updateUIState();
-                loadTasks();
-            } else {
-                showAuthModal();
-            }
-        });
+        hideAuthModal();
+        updateUIState();
+        loadTasks();
    } else {
        showAuthModal();
    }
@@ -1,3 +1,5 @@
+let authMode = 'login'; // 'login' или 'register'
+
 function showAuthModal() {
    document.getElementById('auth-modal').classList.remove('hidden');
 }
@@ -6,37 +8,71 @@ function hideAuthModal() {
    document.getElementById('auth-modal').classList.add('hidden');
 }

-async function verifyToken(token) {
-    try {
-        const res = await fetch('/api/v1/tasks', {
-            headers: { 'Authorization': `Bearer ${token}` }
-        });
-        return res.status === 200;
-    } catch (err) {
-        return false;
+function setAuthMode(mode) {
+    authMode = mode;
+    const titleEl = document.getElementById('auth-title');
+    const submitBtnText = document.getElementById('auth-submit-text');
+    const toggleBtn = document.getElementById('auth-toggle-btn');
+    const errorEl = document.getElementById('auth-error');
+
+    errorEl.classList.add('hidden');
+
+    if (mode === 'register') {
+        titleEl.innerText = "Регистрация нового пользователя";
+        submitBtnText.innerText = "Зарегистрироваться";
+        toggleBtn.innerText = "Уже есть аккаунт? Войти";
+    } else {
+        titleEl.innerText = "Авторизация в системе";
+        submitBtnText.innerText = "Войти в систему";
+        toggleBtn.innerText = "Создать новый аккаунт";
    }
 }

+function toggleAuthMode() {
+    setAuthMode(authMode === 'login' ? 'register' : 'login');
+}
+
 async function handleLogin(e) {
    e.preventDefault();
-    const tokenInput = document.getElementById('auth-token-input');
+    const usernameInput = document.getElementById('auth-username-input');
+    const passwordInput = document.getElementById('auth-password-input');
    const errorEl = document.getElementById('auth-error');
-    const token = tokenInput.value.trim();

-    if (!token) return;
+    const username = usernameInput.value.trim();
+    const password = passwordInput.value;
+
+    if (!username || !password) return;

    errorEl.classList.add('hidden');
-    const isValid = await verifyToken(token);
+    const endpoint = authMode === 'register' ? '/api/v1/auth/register' : '/api/v1/auth/login';

-    if (isValid) {
-        API_TOKEN = token;
-        IS_GUEST = false;
-        localStorage.setItem(AUTH_TOKEN_KEY, token);
-        localStorage.removeItem('scud_is_guest');
-        hideAuthModal();
-        updateUIState();
-        loadTasks();
-    } else {
+    try {
+        const res = await fetch(endpoint, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ username, password })
+        });
+
+        const data = await res.json();
+
+        if (res.status === 200) {
+            API_TOKEN = data.token;
+            CURRENT_USERNAME = data.username;
+            IS_GUEST = false;
+
+            localStorage.setItem(AUTH_TOKEN_KEY, data.token);
+            localStorage.setItem('scud_username', data.username);
+            localStorage.removeItem('scud_is_guest');
+
+            hideAuthModal();
+            updateUIState();
+            loadTasks();
+        } else {
+            errorEl.innerText = data.detail || "Ошибка авторизации";
+            errorEl.classList.remove('hidden');
+        }
+    } catch (err) {
+        errorEl.innerText = "Ошибка соединения с сервером";
        errorEl.classList.remove('hidden');
    }
 }
@@ -44,6 +80,7 @@ async function handleLogin(e) {
 function enableGuestMode() {
    IS_GUEST = true;
    API_TOKEN = "";
+    CURRENT_USERNAME = "Гость";
    localStorage.setItem('scud_is_guest', 'true');
    hideAuthModal();
    updateUIState();
@@ -51,22 +88,29 @@ function enableGuestMode() {

 function logout() {
    localStorage.removeItem(AUTH_TOKEN_KEY);
+    localStorage.removeItem('scud_username');
    localStorage.removeItem('scud_is_guest');
    API_TOKEN = "";
+    CURRENT_USERNAME = "";
    IS_GUEST = false;
-    document.getElementById('auth-token-input').value = "";
    showAuthModal();
 }

 function updateUIState() {
    const tasksBtn = document.getElementById('tasks-drawer-btn');
    const guestBadge = document.getElementById('guest-badge');
-    
+    const usernameBadge = document.getElementById('username-badge');
+
    if (IS_GUEST) {
        if (tasksBtn) tasksBtn.classList.add('hidden');
        if (guestBadge) guestBadge.classList.remove('hidden');
+        if (usernameBadge) usernameBadge.classList.add('hidden');
    } else {
        if (tasksBtn) tasksBtn.classList.remove('hidden');
        if (guestBadge) guestBadge.classList.add('hidden');
+        if (usernameBadge) {
+            usernameBadge.innerText = CURRENT_USERNAME || 'User';
+            usernameBadge.classList.remove('hidden');
+        }
    }
 }