front
This commit is contained in:
@@ -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;}
|
||||
|
||||
@@ -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;
|
||||
// Вспомогательная функция отправки запроса
|
||||
const send = async () => {
|
||||
try {
|
||||
response = await fetch(url, finalOptions);
|
||||
} catch (err) {
|
||||
// Сетевые ошибки (сервер не доступен, нет интернета, CORS и т.д.)
|
||||
return {
|
||||
ok: false,
|
||||
status: 0,
|
||||
data: err.toString()
|
||||
};
|
||||
// Добавляем Authorization, если токен есть
|
||||
if (accessToken) {
|
||||
finalOptions.headers.Authorization = `Bearer ${accessToken}`;
|
||||
}
|
||||
|
||||
// Читаем тело ответа только один раз
|
||||
let text = await response.text();
|
||||
// Отправляем fetch запрос.
|
||||
const res = await fetch(path, finalOptions);
|
||||
const text = await res.text();
|
||||
let data;
|
||||
// Пытаемся распарсить ответ как JSON, если не получается
|
||||
// — возвращаем текст.
|
||||
try {
|
||||
data = JSON.parse(text);
|
||||
} catch {
|
||||
data = text;
|
||||
}
|
||||
|
||||
return {
|
||||
ok: response.ok,
|
||||
status: response.status,
|
||||
data
|
||||
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} не найден — игнорируем`);
|
||||
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 = "<h2>блок не найден</h2>";
|
||||
}
|
||||
}
|
||||
|
||||
// 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 =
|
||||
//<h3>${title}</h3>
|
||||
`<p>${message}</p>
|
||||
<button>OK</button>
|
||||
`;
|
||||
|
||||
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 = `
|
||||
<h3>${title}</h3>
|
||||
<p>${message}</p>
|
||||
<div style="display:flex;justify-content:center;gap:12px;margin-top:16px">
|
||||
<button data-yes>Да</button>
|
||||
<button data-no>Нет</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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]) => `<div class="row"><span>${k}</span><span>${v}</span></div>`)
|
||||
.join('');
|
||||
|
||||
win.innerHTML = `
|
||||
<div class="header">
|
||||
<span>Свойства</span>
|
||||
<button>×</button>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<div class="tab active" data-tab="general">Общие</div>
|
||||
<div class="tab" data-tab="details">Подробно</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-content active" id="general">${rows(general)}</div>
|
||||
<div class="tab-content" id="details">${rows(details)}</div>
|
||||
`;
|
||||
|
||||
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%';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<base href="/">
|
||||
<link rel="icon" type="image/png" href="/static/img/favicon.png">
|
||||
<title>JWT SPA project</title>
|
||||
<link rel="icon" type="image/png" href="/img/favicon.png">
|
||||
<title>TS Web</title>
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<script defer src="/static/js/app.js"></script>
|
||||
</head>
|
||||
@@ -18,7 +17,7 @@
|
||||
<main id="content"></main>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 Go Markdown SPA</p>
|
||||
<p>© 2025 TriggersSmith web</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -17,5 +17,6 @@
|
||||
<li><a href="/gpt" data-link="true" data-target="content">GPT</a></li>
|
||||
<li><a href="/ACL" data-link="true" data-target="content">ACL</a></li>
|
||||
<li><a href="/userSlava/popup" data-link="true" data-target="content">Сообщения popup</a></li>
|
||||
<li><a href="/session" data-link="true" data-target="content">Сессия</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
19
static/blocks/pages/session/content.md
Normal file
19
static/blocks/pages/session/content.md
Normal file
@@ -0,0 +1,19 @@
|
||||
<div class="form1" id="login_block">
|
||||
|
||||
# Вход в систему
|
||||
|
||||
Пожалуйста, введите ваши данные для входа.
|
||||
|
||||
<div class="grid-block">
|
||||
<label for="username">Имя пользователя</label>
|
||||
<input type="text" id="username" name="username" required>
|
||||
<label for="password">Пароль</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
<button type="submit" id="login_btn">Войти</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form1" id="user_block">
|
||||
<p id="user_info"></p>
|
||||
<button id="logout_btn">Выйти</button>
|
||||
</div>
|
||||
67
static/blocks/pages/session/script.js
Normal file
67
static/blocks/pages/session/script.js
Normal file
@@ -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}. </br> Ваш 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+".</br> Ваш 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;
|
||||
78
static/blocks/pages/session/style.css
Normal file
78
static/blocks/pages/session/style.css
Normal file
@@ -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);
|
||||
}
|
||||
@@ -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" },
|
||||
|
||||
Reference in New Issue
Block a user