From d64645599d8c6d1fdbf5225cbc8896e6d51ee9bc Mon Sep 17 00:00:00 2001 From: Alexey Date: Sat, 3 Jan 2026 15:46:06 +0200 Subject: [PATCH] front --- static/base/css/style.css | 189 ++---- static/base/js/app.js | 581 +++++++++++++----- static/base/main.html | 7 +- static/blocks/menu/top1/content.md | 1 + static/blocks/pages/login/script.js | 4 +- static/blocks/pages/session/content.md | 19 + static/blocks/pages/session/script.js | 67 ++ static/blocks/pages/session/style.css | 78 +++ static/blocks/pages/userSlava/login/script.js | 4 +- 9 files changed, 643 insertions(+), 307 deletions(-) create mode 100644 static/blocks/pages/session/content.md create mode 100644 static/blocks/pages/session/script.js create mode 100644 static/blocks/pages/session/style.css diff --git a/static/base/css/style.css b/static/base/css/style.css index ae51487..69c460a 100644 --- a/static/base/css/style.css +++ b/static/base/css/style.css @@ -1,120 +1,33 @@ -body { - font-family: system-ui, sans-serif; - margin: 0; - display: flex; - flex-direction: column; - min-height: 100vh; -} - -header { - display: flex; - align-items: center; - justify-content: space-between; - background: #333; - color: white; - padding: 10px 15px; - position: relative; -} - -footer { - background: #333; - color: white; - text-align: center; - padding: 10px; -} - -main { - flex: 1; - padding: 20px; - max-width: 1000px; - margin: 0 auto; -} - +body {font-family: system-ui, sans-serif; margin: 0; display: flex; flex-direction: column; min-height: 100vh;} +header {display: flex; align-items: center; justify-content: space-between; background: #333; color: white; padding: 10px 15px; position: relative;} +footer {background: #333; color: white; text-align: center; padding: 10px;} +main {flex: 1; padding: 20px; max-width: 1000px; margin: 0 auto;} +button {cursor:pointer; border-radius: 8px; border: 1px solid #ccc; background:#e4e4e4; padding: 10px 12px; font-size: 16px;} +button:hover {background: #aa92f8;} +input {background: #ffffff; padding: 10px 12px; font-size: 15px; border-radius: 8px; border: 1px solid #ccc; transition: border 0.2s, box-shadow 0.2s; width:200px;} +input:focus {border-color: #7f57ff; box-shadow: 0 0 0 2px rgba(127, 87, 255, 0.2); outline: none;} +select{background: #ffffff; padding: 10px 12px; font-size: 15px; border-radius: 8px; border: 1px solid #ccc; transition: border 0.2s, box-shadow 0.2s; width:225px;} +select:focus {border-color: #7f57ff; box-shadow: 0 0 0 2px rgba(127, 87, 255, 0.2); outline: none;} /* навигация */ -nav ul { - list-style: none; - display: flex; - gap: 20px; - margin: 0; - padding: 0; -} - -nav a { - color: white; - text-decoration: none; - font-weight: 500; -} - -nav a:hover { - text-decoration: underline; -} - +nav ul {list-style: none; display: flex; gap: 20px; margin: 0; padding: 0;} +nav a {color: white; text-decoration: none; font-weight: 500;} +nav a:hover {text-decoration: underline;} /* бургер */ -.burger { - display: none; - flex-direction: column; - justify-content: center; - gap: 5px; - width: 30px; - height: 25px; - background: none; - border: none; - cursor: pointer; -} - -.burger span { - display: block; - height: 3px; - width: 100%; - background: white; - border-radius: 2px; - transition: 0.3s; -} - -.burger.active span:nth-child(1) { - transform: translateY(8px) rotate(45deg); -} - -.burger.active span:nth-child(2) { - opacity: 0; -} - -.burger.active span:nth-child(3) { - transform: translateY(-8px) rotate(-45deg); -} - +.burger {display: none; flex-direction: column; justify-content: center; gap: 5px; width: 30px; height: 25px; background: none; border: none; cursor: pointer;} +.burger span {display: block; height: 3px; width: 100%; background: white; border-radius: 2px; transition: 0.3s;} +.burger.active span:nth-child(1) {transform: translateY(8px) rotate(45deg);} +.burger.active span:nth-child(2) {opacity: 0;} +.burger.active span:nth-child(3) {transform: translateY(-8px) rotate(-45deg);} /* сетка */ -.grid-3 { - display: grid; - grid-template-columns: 15% 70% 15%; - gap: 20px; - margin-top: 20px; -} +.grid-3 {display: grid; grid-template-columns: 15% 70% 15%; gap: 20px; margin-top: 20px;} +.grid-block {background: #f5f5f5; padding: 15px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);} +/* Полупрозрачный фон */ +.overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;} -.grid-block { - background: #f5f5f5; - padding: 15px; - border-radius: 10px; - box-shadow: 0 2px 5px rgba(0,0,0,0.1); -} - /* Полупрозрачный фон */ - .overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0,0,0,0.5); - display: flex; - justify-content: center; - align-items: center; - z-index: 1000; - } - - /* Окна */ +/* Окна */ /* Message */ -.window-popup { width:400px; height:150px; background:#fff; border-radius:10px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px; box-shadow:0 0 10px rgba(0,0,0,0.3); } -.window-popup button { margin-top:20px; padding:5px 10px; cursor:pointer; } +.window-popup {width:400px; height:150px; background:#fff; border-radius:10px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:20px; box-shadow:0 0 10px rgba(0,0,0,0.3); } + /* Menu */ .window-menu { position:absolute; background:#fff; border-radius:10px; border:1px solid rgba(0,0,0,0.12); box-shadow:0 6px 18px rgba(0,0,0,0.12); min-width:160px; z-index:9999; overflow:hidden; } @@ -135,39 +48,29 @@ nav a:hover { /* адаптив */ @media (max-width: 425px) { - .grid-3 { - grid-template-columns: 1fr; - } - - .burger { - display: flex; - } - - nav { - position: absolute; - top: 100%; - left: 0; - width: 100%; - background: #222; - display: none; - flex-direction: column; - text-align: center; - padding: 10px 0; - z-index: 10; - } - - nav.open { - display: flex; - animation: slideDown 0.3s ease; - } - - nav ul { - flex-direction: column; - gap: 10px; - } - + .grid-3 {grid-template-columns: 1fr;} + .burger {display: flex;} + nav {position: absolute; top: 100%; left: 0; width: 100%; background: #222; display: none; flex-direction: column; text-align: center; padding: 10px 0; z-index: 10;} + nav.open {display: flex; animation: slideDown 0.3s ease;} + nav ul {flex-direction: column; gap: 10px;} @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } } +.ui-overlay {position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center;} +.ui-alert {background: #fff; padding: 20px; border-radius: 16px; min-width: 300px; font-family: sans-serif; text-align: center;} +/* .ui-alert button {margin-top: 20px; border: 1px solid #ccc; padding: 8px 16px; cursor: pointer; border-radius: 8px;} */ +.ui-popup-list {position: fixed; background: #fff; border: 1px solid #ccc; border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.15); z-index: 1000;} +.ui-popup-list .icon {width: 16px; text-align: center;} +.ui-popup-list div {padding: 8px 12px; cursor: pointer; display: flex; align-items: center;} +.ui-popup-list div:hover {background: #eee;} +.ui-window {background: #fff; padding: 16px; border-radius: 8px; min-width: 300px; font-family: sans-serif; width: 360px;} +.ui-window .header {display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 10px; cursor: move; user-select: none;} +.ui-window .row {display: flex; justify-content: space-between; padding: 4px 0;} +/* Tabs */ +.tabs {display: flex; border-bottom: 1px solid #ccc; margin-bottom: 10px;} +.tab {padding: 6px 12px; cursor: pointer;} +.tab.active {border-bottom: 2px solid #0078d7; font-weight: bold;} +.tab-content {display: none;} +.tab-content.active {display: block;} diff --git a/static/base/js/app.js b/static/base/js/app.js index 75801b1..5c126a4 100644 --- a/static/base/js/app.js +++ b/static/base/js/app.js @@ -1,117 +1,126 @@ /*********************************************************************** - * ГЛОБАЛЬНОЕ СОСТОЯНИЕ + * access-token хранится только в памяти (без localStorage) **********************************************************************/ -let accessToken = null; // access-token хранится только в памяти (без localStorage) +let accessToken = null; + /*********************************************************************** - * sendRequest УНИВЕРСАЛЬНАЯ ФУНКЦИЯ ДЛЯ ОТПРАВКИ HTTP-ЗАПРОСОВ - * - * sendRequest(url, options) - * - автоматически добавляет Content-Type и credentials - * - автоматически превращает body в JSON - * - проверяет response.ok - * - пробрасывает текст ошибки - * - возвращает JSON-ответ + * user объект в котором хранятся данные пользователя **********************************************************************/ -//let accessToken = ""; // access только в памяти - -async function apiProtected(path, options = {}) { - const send = async () => - fetch(path, { - ...options, - headers: { - ...(options.headers || {}), - Authorization: "Bearer " + accessToken, - "Content-Type": "application/json" - } - }); - - let r = await send(); - - if ((r.status === 401)) { - // обновляем access - const rr = await fetch("/api/users/refresh", { - method: "POST", - credentials: "include" - }); - - if (!rr.ok) throw "refresh failed"; - - const j = await rr.json(); - accessToken = j.access_token; - - r = await send(); - } - - if (!r.ok) throw await r.text(); - return r.json(); +const user = { + id: 0, + name: "" } - -async function sendRequest(url, options = {}) { - // Базовые параметры +/*********************************************************************** + * apiProtected — это удобная функция для защищённых API-запросов, + * которая: + * + * - Подставляет стандартные и пользовательские настройки запроса. + * - Добавляет Authorization с токеном. + * - Автоматически сериализует JSON-тело. + * - Парсит ответ. + * - Обрабатывает устаревший токен (401) и повторяет запрос. + * - Выбрасывает ошибки для внешнего try...catch. + ***********************************************************************/ +async function apiProtected(path, options = {}) { + // Базовые настройки const defaultOptions = { + //method: "GET", headers: { "Content-Type": "application/json" }, credentials: "include" }; - // Объединяем настройки const finalOptions = { ...defaultOptions, ...options, headers: { ...defaultOptions.headers, ...(options.headers || {}) } }; - - // Если тело — объект, превращаем в JSON + // Если есть тело и это объект — сериализуем if (finalOptions.body && typeof finalOptions.body === "object") { finalOptions.body = JSON.stringify(finalOptions.body); } - - let response; - try { - response = await fetch(url, finalOptions); - } catch (err) { - // Сетевые ошибки (сервер не доступен, нет интернета, CORS и т.д.) - return { - ok: false, - status: 0, - data: err.toString() - }; - } - - // Читаем тело ответа только один раз - let text = await response.text(); - let data; - try { - data = JSON.parse(text); - } catch { - data = text; - } - - return { - ok: response.ok, - status: response.status, - data + // Вспомогательная функция отправки запроса + const send = async () => { + try { + // Добавляем Authorization, если токен есть + if (accessToken) { + finalOptions.headers.Authorization = `Bearer ${accessToken}`; + } + // Отправляем fetch запрос. + const res = await fetch(path, finalOptions); + const text = await res.text(); + let data; + // Пытаемся распарсить ответ как JSON, если не получается + // — возвращаем текст. + try { + data = JSON.parse(text); + } catch { + data = text; + } + return { res, data }; + } catch (err) { + return { res: null, data: err.toString() }; + } }; + // Первый запрос + let { res, data } = await send(); + // Если 401 — обновляем токен и повторяем + if (res && res.status === 401) { + await refreshAccess(); // обновляем accessToken + ({ res, data } = await send()); // повторный запрос + } + // Если всё равно ошибка — кидаем + if (!res || !res.ok) { + throw { status: res ? res.status : 0, data }; + } + return data; // возвращаем распарсенный JSON или текст } +/*************************************************************************** + * refreshAccess() Обнавление токенов: + * + * - Отправляет POST на /api/users/refresh, используя refresh-токен в cookie. + * - Проверяет успешность ответа. + * - Сохраняет новый access-токен. + * - Декодирует токен, чтобы получить user_id. + * - Обновляет глобальные данные о пользователе (id и name). + ****************************************************************************/ +async function refreshAccess (){ + //Отправка запроса на обновление токена + const rr = await fetch("/api/auth/refresh", { + method: "POST", + credentials: "include" + }); + // Проверка ответа + if (!rr.ok) throw "refresh failed"; + // Получение нового токена + const j = await rr.json(); + accessToken = j.access_token; + // Декодирование payload JWT + const payload = JSON.parse( + atob(accessToken.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")) + ); + // Обновление данных пользователя + user.id = payload.user_id; + user.name = (await getUserDataByID(user.id)).name; +} - -/******************************************************************** - * loadMenu функция загрузки блока меню страницы в формате Markdown * - ********************************************************************/ +/******************************************************************************** + * loadMenu функция загрузки блока меню страницы в формате Markdown + ********************************************************************************/ async function loadMenu() { await loadBlock("menu/top1", "header"); } -/******************************************************************** - * loadPage функция загрузки блока страницы в формате Markdown * - ********************************************************************/ +/******************************************************************************** + * loadPage функция загрузки блока страницы в формате Markdown + ********************************************************************************/ async function loadPage(path) { await loadBlock(path, "content"); } -/******************************************************************** - * loadMdScript функция загрузки Markdown библиотеки * - ********************************************************************/ +/********************************************************************************* + * loadMdScript функция загрузки Markdown библиотеки + *********************************************************************************/ function loadMdScript(src) { return new Promise((resolve, reject) => { const script = document.createElement('script'); @@ -123,24 +132,32 @@ async function loadMenu() { }); } -/******************************************************************** - * loadBlock функция загрузки блока в формате Markdown * - ********************************************************************/ +/********************************************************************************** + * loadBlock — это универсальная функция для динамического контента: + * + * - Находит контейнер по id. + * - Очищает старый контент и связанные скрипты/стили. + * - Запрашивает блок через apiProtected. + * - Преобразует Markdown в HTML. + * - Добавляет CSS и JS динамически. + * - Вызывает pageInit() блока, если есть. + * - Обрабатывает ошибки. + **********************************************************************************/ async function loadBlock(path, block_Name) { + // Получаем контейнер блока const container = document.getElementById(block_Name); -if (!container) { - //console.warn(`loadBlock: контейнер #${block_Name} не найден — игнорируем`); - return; -} + if (!container) { + return; + } + // Обработка пути path = path.replace(/\/$/, ""); - //console.log(path); if (!container) { console.error(`loadBlock ERROR: element #${block_Name} not found`); return; } const blockName = path === "pages" ? "pages/home" : path; - //console.log(blockName); try { + // Очистка контейнера и старых динамических стилей/скриптов container.innerHTML = ''; document.querySelectorAll('style[data-dynamic], script[data-dynamic]').forEach(el => { const name = el.getAttribute('data-dynamic'); @@ -148,28 +165,27 @@ if (!container) { el.remove(); } }); - const response = await sendRequest(`/api/block/${blockName}`); - if (!response.ok) { - throw new Error(`Failed to load block: ${response.status}`); - } - + // Получение блока с сервера + const response = await apiProtected(`/api/block/${blockName}`, {method: "GET"}); // Динамически подгружаем markdown-it, если он ещё не загружен if (!window.markdownit) { await loadMdScript('/static/js/markdown-it.min.js'); } - - const { content: mdContent, css, js } = response.data; + const { content: mdContent, css, js } = response; // Преобразуем markdown в HTML if (mdContent) { const md = window.markdownit({ html: true, linkify: true, typographer: true }); container.innerHTML = md.render(mdContent); + container?.id?.match(/^loadedBlock_\d+_view$/) && (document.getElementById(container.id.replace('_view', '_html')).innerHTML = mdContent); } + // Добавление CSS блока if (css) { const style = document.createElement('style'); style.dataset.dynamic = block_Name; style.textContent = css; document.head.appendChild(style); } + // Добавление JS блока if (js) { const script = document.createElement('script'); script.dataset.dynamic = block_Name; @@ -185,24 +201,35 @@ if (!container) { `; document.body.appendChild(script); } + // Обработка ошибок } catch (err) { console.error(err); container.innerHTML = "

блок не найден

"; } } -// SPA-навигация +/***************************************************************************** + * SPA-навигация + *****************************************************************************/ function navigateTo(url, target) { const clean = url.replace(/^\//, ""); history.pushState({}, "", "/" + clean); loadBlock("pages/" + clean, target); } -// Поддержка кнопки "назад/вперед" +/***************************************************************************** + * Поддержка кнопки "назад/вперед" + *****************************************************************************/ window.addEventListener("popstate", () => {loadBlock(location.pathname);}); -// Обработка истории браузера + +/***************************************************************************** + * Обработка истории браузера + *****************************************************************************/ window.addEventListener("popstate", () => loadBlock(window.location.pathname)); -// Инициализация после загрузки DOM + +/***************************************************************************** + * Инициализация после загрузки DOM + *****************************************************************************/ window.onload = async function () { let url = window.location.href; // Убираем слеш в конце, если он есть @@ -215,13 +242,14 @@ window.onload = async function () { await loadMenu(); await loadPage("pages"+window.location.pathname); }; -// Перехватчик ссылок + +/***************************************************************************** + * Перехватчик ссылок + *****************************************************************************/ window.addEventListener("click", (event) => { const a = event.target.closest("a"); if (!a) return; - const href = a.getAttribute("href"); - // игнорируем внешние ссылки и mailto: if (!href || href.startsWith("http") || href.startsWith("mailto:")) return; const target = a.dataset.target || "content"; // default = content @@ -229,64 +257,305 @@ window.addEventListener("click", (event) => { navigateTo(href, target); }); -//popup - function popup(message, afterClose){ - // Создаём overlay - const overlay = document.createElement('div'); - overlay.className = 'overlay'; - // Создаём popup - const popup = document.createElement('div'); - popup.className = 'popup'; - // Добавляем текст - const text = document.createElement('div'); - text.textContent = message; - // Добавляем кнопку закрытия - const closeBtn = document.createElement('button'); - closeBtn.textContent = 'Закрыть'; - closeBtn.addEventListener('click', () => { - overlay.remove(); - if (typeof afterClose === 'function') { - afterClose(); // ← ВАША ФУНКЦИЯ ПОСЛЕ ЗАКРЫТИЯ - } - }); - } -//popupMenu - function popupMenu(message, afterClose){ - // Создаём popupMenu - const popupMenu = document.createElement('div'); - popup.className = 'popup_Menu'; - // Добавляем текст - const text = document.createElement('div'); - text.textContent = message; - // Добавляем кнопку закрытия - const closeBtn = document.createElement('button'); - closeBtn.textContent = 'Закрыть'; - closeBtn.addEventListener('click', () => { - overlay.remove(); - if (typeof afterClose === 'function') { - afterClose(); // ← ВАША ФУНКЦИЯ ПОСЛЕ ЗАКРЫТИЯ - } - }); - - popup.appendChild(text); - popup.appendChild(closeBtn); - overlay.appendChild(popup); - document.body.appendChild(overlay); - }; - - /* ------------------- Переключение видимости пароля ------------------- */ +/***************************************************************************** + * Переключение видимости пароля + *****************************************************************************/ document.addEventListener("click", (e) => { if (!e.target.classList.contains("toggle-pass")) return; -//console.log("toggle"); +console.log("toggle"); const input = e.target.previousElementSibling; if (!input) return; if (input.type === "password") { input.type = "text"; - e.target.textContent = "🙈"; + e.target.textContent = "*";//🔓 } else { input.type = "password"; - e.target.textContent = "👁"; + e.target.textContent = "A";//🔒 } }); + +/***************************************************************************** + * Получение данных пользователя. Пример использования: + * btn.onclick = async function () { + * const user = await getUserDataByID(3); + * alert(user.name); + * }; + *****************************************************************************/ +async function getUserDataByID(id) { + const data = await apiProtected( + `/api/users/getUserData?userid=${encodeURIComponent(id)}&by=id` + ); + return { + id: data.ID, + name: data.Username + } +} + +/****************************************************************************** + * Функция userLogin: + * + * - пытается залогиниться через API, + * - возвращает accessToken при успехе, + * - бросает понятные ошибки (INVALID_CREDENTIALS, LOGIN_FAILED) при неудаче. + ******************************************************************************/ +async function userLogin(username, password) { + try { + // Запрос логина + const r = await apiProtected(`/api/auth/login`, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify({ + username, + password + }) + }); + // Проверка access token + if (!r?.access_token) { + throw new Error("Token not received"); + } + const payload = JSON.parse( + atob(r.access_token.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")) + ); + // Успешный результат + user.name = username; + user.id = payload.user_id; + return { + accessToken: r.access_token + }; + // Обработка ошибок (catch) + } catch (err) { + // err — объект { status, data } из apiProtected + if (err?.status === 401) { + throw new Error("INVALID_CREDENTIALS"); + } + // Неверный логин / пароль + console.error("Login error:", err); + throw new Error("LOGIN_FAILED"); + } +} + +/****************************************************************************** + * userLogout — это функция выхода пользователя из системы. + ******************************************************************************/ +async function userLogout() { + accessToken = ""; + await fetch("/api/auth/logout", { method: "POST", credentials: "include" }); +}; + +/****************************************************************************** + * userRegister функция которая: + * + * - регистрирует нового пользователя, + * - возвращает ответ сервера при успехе, + * - преобразует HTTP-ошибки в бизнес-ошибки, понятные UI. + ******************************************************************************/ +async function userRegister(username, password) { + try { + // Запрос регистрации + const data = await apiProtected("/api/auth/register", { + method: "POST", + body: { + username, + password + } + }); + // Успешный результат + return data; + // Перехват ошибок + } catch (err) { + // Сюда прилетают ошибки, брошенные apiProtected: + // Логирование + console.error("Register error:", err); + // Маппинг HTTP → бизнес-ошибки + // Некорректные данные + if (err?.status === 400) { + throw new Error("BAD_REQUEST"); + } + // Пользователь уже существует + if (err?.status === 409) { + throw new Error("USER_EXISTS"); + } + // Любая другая ошибка + throw new Error("REGISTER_FAILED"); + } +} + +/*************************************************************************** + * Класса UIComponents это статический UI-helper, который: + * + * - не хранит состояние приложения + * - не зависит от фреймворков + * - создаёт всплывающие UI-элементы поверх страницы + * + * Содержит методы: + * + * - UIComponents.showAlert(...) + * - UIComponents.confirm(...) + * - UIComponents.showPopupList(...) + * - UIComponents.showFileProperties(...) + ***************************************************************************/ +class UIComponents { + /* ============== 1. АЛЕРТ С ОВЕРЛЕЕМ ============== */ + /* Показывает модальное окно с кнопкой OK. + с затемняющим фоном, который перекрывает страницу*/ + static showAlert(message) {//, title = 'Сообщение' + const overlay = document.createElement('div'); + overlay.className = 'ui-overlay'; + + const alertBox = document.createElement('div'); + alertBox.className = 'window-popup';//ui-alert + + alertBox.innerHTML = + //

${title}

+ `

${message}

+ + `; + + alertBox.querySelector('button').onclick = () => { + overlay.remove(); + }; + + overlay.appendChild(alertBox); + document.body.appendChild(overlay); + } + + /*==================== 2. confirm ===================== */ + /* Аналог window.confirm */ + static confirm(message, title = 'Подтверждение') { + return new Promise(resolve => { + const overlay = document.createElement('div'); + overlay.className = 'ui-overlay'; + + const box = document.createElement('div'); + box.className = 'ui-alert'; + + box.innerHTML = ` +

${title}

+

${message}

+
+ + +
+ `; + + const close = (result) => { + overlay.remove(); + resolve(result); + }; + + box.querySelector('[data-yes]').onclick = () => close(true); + box.querySelector('[data-no]').onclick = () => close(false); + + overlay.appendChild(box); + document.body.appendChild(overlay); + }); +} + + + /* ========== 3. ПОПАП СПИСОК ========== */ +static showPopupList(items = {}, x = 0, y = 0) { + // Удаляем предыдущий popup + if (UIComponents.currentPopup) { + UIComponents.currentPopup.remove(); + UIComponents.currentPopup = null; + } + + const popup = document.createElement('div'); + popup.className = 'ui-popup-list'; + popup.style.left = x + 'px'; + popup.style.top = y + 'px'; + + for (const [name, fn] of Object.entries(items)) { + const el = document.createElement('div'); + el.textContent = name; + el.onclick = () => { + fn(); // вызываем конкретную функцию + popup.remove(); + UIComponents.currentPopup = null; + }; + popup.appendChild(el); + } + + document.body.appendChild(popup); + UIComponents.currentPopup = popup; + + const removePopup = () => { + if (UIComponents.currentPopup) { + UIComponents.currentPopup.remove(); + UIComponents.currentPopup = null; + } + document.removeEventListener('click', removePopup); + }; + setTimeout(() => document.addEventListener('click', removePopup), 0); +} + + /* ========== 4. ОКНО "СВОЙСТВА ФАЙЛА" ========== */ + static showFileProperties(general = {}, details = {}) { + const overlay = document.createElement('div'); + overlay.className = 'ui-overlay'; + + const win = document.createElement('div'); + win.className = 'ui-window'; + win.style.position = 'absolute'; + + const rows = obj => + Object.entries(obj) + .map(([k, v]) => `
${k}${v}
`) + .join(''); + + win.innerHTML = ` +
+ Свойства + +
+ +
+
Общие
+
Подробно
+
+ +
${rows(general)}
+
${rows(details)}
+ `; + + win.querySelector('button').onclick = () => overlay.remove(); + + /* tabs */ + win.querySelectorAll('.tab').forEach(tab => { + tab.onclick = () => { + win.querySelectorAll('.tab, .tab-content') + .forEach(e => e.classList.remove('active')); + + tab.classList.add('active'); + win.querySelector('#' + tab.dataset.tab).classList.add('active'); + }; + }); + + /* drag */ + const header = win.querySelector('.header'); + header.onmousedown = (e) => { + const r = win.getBoundingClientRect(); + const dx = e.clientX - r.left; + const dy = e.clientY - r.top; + + document.onmousemove = e => + Object.assign(win.style, { + left: e.clientX - dx + 'px', + top: e.clientY - dy + 'px' + }); + + document.onmouseup = () => document.onmousemove = null; + }; + + overlay.appendChild(win); + document.body.appendChild(overlay); + + win.style.left = 'calc(50% - 180px)'; + win.style.top = '20%'; + } +} + diff --git a/static/base/main.html b/static/base/main.html index 1b0d744..90c31a1 100644 --- a/static/base/main.html +++ b/static/base/main.html @@ -1,12 +1,11 @@ - - - JWT SPA project + + TS Web @@ -18,7 +17,7 @@
diff --git a/static/blocks/menu/top1/content.md b/static/blocks/menu/top1/content.md index 4d471c7..07fdc81 100644 --- a/static/blocks/menu/top1/content.md +++ b/static/blocks/menu/top1/content.md @@ -17,5 +17,6 @@
  • GPT
  • ACL
  • Сообщения popup
    • +
  • Сессия
    • diff --git a/static/blocks/pages/login/script.js b/static/blocks/pages/login/script.js index 21fb028..342c00d 100644 --- a/static/blocks/pages/login/script.js +++ b/static/blocks/pages/login/script.js @@ -12,7 +12,7 @@ async function UserLogin() { const p = document.getElementById("password").value; try { - const r = await fetch("/api/users/login", { + const r = await fetch("/api/auth/login", { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, @@ -35,7 +35,7 @@ async function UserLogin() { async function UserLogout() { try { - await fetch("/api/users/logout", { method: "POST", credentials: "include" }); + await fetch("/api/auth/logout", { method: "POST", credentials: "include" }); accessToken = ""; alert("logged out"); } catch (err) { diff --git a/static/blocks/pages/session/content.md b/static/blocks/pages/session/content.md new file mode 100644 index 0000000..1719c5b --- /dev/null +++ b/static/blocks/pages/session/content.md @@ -0,0 +1,19 @@ +
    + +# Вход в систему + +Пожалуйста, введите ваши данные для входа. + +
    + + + + + +
    +
    + +
    +

    + +
    \ No newline at end of file diff --git a/static/blocks/pages/session/script.js b/static/blocks/pages/session/script.js new file mode 100644 index 0000000..53ca771 --- /dev/null +++ b/static/blocks/pages/session/script.js @@ -0,0 +1,67 @@ +async function initUser() { + try { + // Если нет токена, делаем refresh + if (!accessToken) { + await refreshAccess (); + } + // Проверяем, получили ли токен + if (!accessToken) throw new Error("no token"); + // выводим имя пользователя + user_info.innerHTML = `Вы зашли как: ${user.name}.
    Ваш ID:${user.id}`; + // Показываем блок пользователя + showUser() + } catch (e) { + // Показываем блок логина + showLogin() + console.error(e); + } +} + + +function showLogin() { + login_block.classList.remove("hiden_block"); + user_block.classList.add("hiden_block"); +} + +function showUser() { + login_block.classList.add("hiden_block"); + user_block.classList.remove("hiden_block"); +} +initUser(); + +/* --------------------------- Логин ------------------------------- */ + +async function onLoginClick() { + try { + const { accessToken: token } = await userLogin( + username.value.trim(), + password.value + ); + + accessToken = token; + // UIComponents.showAlert("Вы успешно вошли как "+user.name+".
    Ваш ID:"+user.id); + + username.value = ""; + password.value = ""; + + } catch (e) { + switch (e.message) { + case "INVALID_CREDENTIALS": + UIComponents.showAlert("Неверный логин или пароль"); + break; + case "BAD_REQUEST": + UIComponents.showAlert("Некорректный запрос"); + break; + default: + UIComponents.showAlert("Ошибка при логине"); + } + } + initUser(); +} + +/* ------------------- Кнопки ------------------- */ +logout_btn.onclick = async () => { + await userLogout(); // вызываем существующую функцию + initUser(); // делаем своё +}; +login_btn.onclick = onLoginClick; \ No newline at end of file diff --git a/static/blocks/pages/session/style.css b/static/blocks/pages/session/style.css new file mode 100644 index 0000000..ea167ec --- /dev/null +++ b/static/blocks/pages/session/style.css @@ -0,0 +1,78 @@ + .hiden_block{ + display:none; + } + + .form1 { + background: #fff; + padding: 10px; + border-radius: 16px; + box-shadow: 0 4px 20px rgba(0,0,0,0.1); + /*max-width: 250px; + width: 100%;*/ + width: 250px; + } + + .form1 h1 { + margin-top: 0; + text-align: center; + font-size: 26px; + color: #333; + } + + .form1 p { + text-align: center; + color: #666; + margin-bottom: 25px; + } + + .form1 .grid-block h3 { + margin-bottom: 15px; + color: #444; + text-align: center; + } + + .form1 form { + display: flex; + flex-direction: column; + gap: 14px; + } + + .form1 label { + font-size: 15px; + color: #555; + } + + .form1 input { + padding: 10px 12px; + font-size: 15px; + border-radius: 8px; + border: 1px solid #ccc; + transition: border 0.2s, box-shadow 0.2s; + } + + .form1 input:focus { + border-color: #7f57ff; + box-shadow: 0 0 0 2px rgba(127, 87, 255, 0.2); + outline: none; + } + + .form1 button { + width: 100%; + padding: 10px 12px; + font-size: 16px; + background:#e4e4e4; + /* color: white; */ + border: 1px solid #ccc; + border-radius: 8px; + cursor: pointer; + margin-top: 10px; + transition: background 0.25s, transform 0.1s; + } + + .form1 button:hover { + background: #aa92f8; + } + + .form1 button:active { + transform: scale(0.98); + } \ No newline at end of file diff --git a/static/blocks/pages/userSlava/login/script.js b/static/blocks/pages/userSlava/login/script.js index fe045b9..8f32888 100644 --- a/static/blocks/pages/userSlava/login/script.js +++ b/static/blocks/pages/userSlava/login/script.js @@ -12,14 +12,14 @@ btn_prot.onclick = async () => { async function UserLogout() { accessToken = ""; - await fetch("/api/users/logout", { method: "POST", credentials: "include" }); + await fetch("/api/auth/logout", { method: "POST", credentials: "include"}); }; async function UserLogin() { const u = log_user.value, p = log_pass.value; - const r = await fetch("/api/users/login", { + const r = await fetch("/api/auth/login", { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" },