public/lab11/task1/script.js - main - Cooolprogrammers/web-nodejs-labs

public/lab11/task1/script.js
183 строки6 KB
darkvoid6@mail.ru
ЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ
18 дек 2025, 07:59
18 дек 2025, 07:59f2c4f06
const API_BASE = '/api/lab11';

// --- INIT ---
document.addEventListener('DOMContentLoaded', () => {
    checkAuth();
});

// --- CORE FUNCTIONS ---

// Проверка наличия токена при загрузке
function checkAuth() {
    const token = localStorage.getItem('token');
    const userJson = localStorage.getItem('user');

    const guestPanel = document.getElementById('guestPanel');
    const userPanel = document.getElementById('userPanel');
    const status = document.getElementById('authStatus');

    if (token && userJson) {
        // Авторизован
        const user = JSON.parse(userJson);
        guestPanel.classList.add('hidden');
        userPanel.classList.remove('hidden');

        status.textContent = `Авторизован: ${user.login}`;
        status.className = 'status-badge status-online';

        document.getElementById('currentUser').textContent = user.login;
        document.getElementById('currentRole').textContent = user.role;
        document.getElementById('tokenPreview').textContent = token.substring(0, 30) + '...';
    } else {
        // Гость
        guestPanel.classList.remove('hidden');
        userPanel.classList.add('hidden');

        status.textContent = 'Не авторизован';
        status.className = 'status-badge status-offline';
    }
}

// Универсальная функция запроса с логированием
async function apiCall(endpoint, method, body = null) {
    const token = localStorage.getItem('token');
    const headers = { 'Content-Type': 'application/json' };

    // Добавляем токен, если есть
    if (token) {
        headers['Authorization'] = `Bearer ${token}`;
    }

    // Логируем запрос
    logRequest(method, endpoint, body, headers);

    try {
        const options = { method, headers };
        if (body) options.body = JSON.stringify(body);

        const res = await fetch(`${API_BASE}${endpoint}`, options);
        let data;

        // Пробуем парсить JSON, если пусто - текст
        try {
            data = await res.json();
        } catch (e) {
            data = { text: res.statusText };
        }

        // Логируем ответ
        logResponse(res.status, data);

        // Обработка 401 (Токен протух)
        if (res.status === 401 && token) {
            log('SYSTEM', 'Токен истек или невалиден. Выполняю Logout.');
            doLogout();
        }

        return { status: res.status, data };
    } catch (err) {
        logResponse('ERR', { error: err.message });
        return null;
    }
}

// --- ACTIONS ---

// 1. Регистрация
document.getElementById('regForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = new FormData(e.target);
    const body = Object.fromEntries(form.entries());

    await apiCall('/register', 'POST', body);
});

// 2. Логин
document.getElementById('loginForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = new FormData(e.target);
    const body = Object.fromEntries(form.entries());

    const result = await apiCall('/login', 'POST', body);

    if (result && result.status === 200) {
        // Сохраняем токен
        localStorage.setItem('token', result.data.token);
        localStorage.setItem('user', JSON.stringify(result.data.user));

        checkAuth(); // Обновляем UI
        log('SYSTEM', 'Токен сохранен в LocalStorage. Авторизация успешна.');
    }
});

// 3. Выход (Вариант А)
function doLogout() {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    checkAuth();
    log('SYSTEM', 'Токен удален из LocalStorage (Logout выполнен).');
}

// 4. Профиль
async function getProfile() {
    await apiCall('/profile', 'GET');
}

// 5. Админ данные
async function getAdminData() {
    await apiCall('/users', 'GET');
}

// 6. Смена пароля
document.getElementById('changePassForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = new FormData(e.target);
    const body = Object.fromEntries(form.entries());

    const result = await apiCall('/change-password', 'POST', body);
    if (result.status === 200) {
        e.target.reset();
    }
});


// --- LOGGING UI ---

function logRequest(method, url, body, headers) {
    const box = document.getElementById('consoleOutput');
    const time = new Date().toLocaleTimeString();

    const html = `
        <div class="log-entry">
            <div style="color: #60a5fa">➜ [REQUEST] ${time}</div>
            <div class="title"><span class="method ${method}">${method}</span> ${url}</div>
            ${body ? `<div class="json-block">${JSON.stringify(body, null, 2)}</div>` : ''}
            <div style="font-size:0.8em; color: #666; margin-top:5px">Headers: ${JSON.stringify(headers)}</div>
        </div>
    `;
    box.insertAdjacentHTML('afterbegin', html);
}

function logResponse(status, data) {
    const box = document.getElementById('consoleOutput');
    const isSuccess = status >= 200 && status < 300;
    const colorClass = isSuccess ? 'success' : 'error';

    const html = `
        <div class="log-entry ${colorClass}">
            <div style="color: ${isSuccess ? '#34d399' : '#f87171'}">⬅ [RESPONSE] Status: ${status}</div>
            <div class="json-block">${JSON.stringify(data, null, 2)}</div>
        </div>
    `;
    box.insertAdjacentHTML('afterbegin', html);
}

function log(type, msg) {
    const box = document.getElementById('consoleOutput');
    const html = `<div class="log-entry system"><span class="method">${type}</span> ${msg}</div>`;
    box.insertAdjacentHTML('afterbegin', html);
}

function clearLogs() {
    document.getElementById('consoleOutput').innerHTML = '';
}