toolbox/api/static/js/user.js

import { getCookie, deleteCookie } from '/static/js/cookies.js';

class ClientManager {
    constructor() {
        this.userData = null;
        this.accessData = null;
        this.init();
    }

    async init() {
        try {
            // Получаем данные пользователя из cookie
            this.userData = await getCookie('toolbox_user');
            this.accessData = await getCookie('toolbox_access');


            if (!this.userData || !this.accessData) {
                console.warn('User data or access data not found in cookie');
                this.clearUserCookie();
                window.location.href = '/user/login';
            }

            // Вставляем данные пользователя в DOM
            this.renderUserInfo();

            // Инициализируем обработчики
            this.initLogoutHandler();
            this.initHoverEffects();
            this.addAvatarErrorHandler();

        } catch (error) {
            console.error('Error initializing client manager:', error);
        }
    }

    renderUserInfo() {
        if (!this.userData) {
            // Если нет данных, показываем заглушку
            this.renderFallbackUser();
            return;
        }

        // Находим элементы для обновления
        const avatar = document.querySelector('.client-avatar');
        const nameElement = document.querySelector('.client-name');
        const roleElement = document.querySelector('.client-role');

        // Обновляем аватар
        if (avatar) {
            avatar.src = this.userData.photo || 'static/images/users/default.png';
            avatar.alt = this.userData.username || 'Пользователь';
        }

        // Обновляем имя
        if (nameElement) {
            nameElement.textContent = this.userData.username || 'Неизвестный пользователь';
        }

        // Обновляем роль
        if (roleElement) {
            const role = this.accessData.title || 'Неизвестная роль';
            roleElement.textContent = role;
        }

    }

    renderFallbackUser() {
        const userCard = document.querySelector('.client-card');
        if (userCard) {
            userCard.innerHTML = `
                <div class="d-flex align-items-center gap-3">
                    <div class="position-relative">
                        <img src="images/users/default.png" 
                             alt="Гость"
                             class="client-avatar">
                        <span class="position-absolute bottom-0 end-0 bg-warning border border-2 border-white rounded-circle p-1"></span>
                    </div>
                    <div class="me-3">
                        <h6 class="client-name mb-1">Гость</h6>
                        <div class="d-flex align-items-center">
                            <span class="badge bg-warning bg-opacity-10 text-warning fs-7 px-2 py-1 me-2">
                                <i class="bi bi-exclamation-triangle me-1"></i>
                                Не авторизован
                            </span>
                        </div>
                    </div>
                    <div>
                        <a href="/login" class="btn btn-primary btn-sm">
                            <i class="bi bi-box-arrow-in-right me-1"></i>
                            Войти
                        </a>
                    </div>
                </div>
            `;
        }
    }

    initLogoutHandler() {
        const logoutBtn = document.getElementById('clientLogoutBtn');
        if (logoutBtn) {
            logoutBtn.addEventListener('click', (e) => {
                e.preventDefault();
                this.handleLogout(logoutBtn);
            });
        }
    }

    handleLogout(button) {
        // Анимация нажатия
        button.style.transform = 'scale(0.95)';

        // Добавляем иконку загрузки
        const originalContent = button.innerHTML;
        button.innerHTML = `
            <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
            Выход...
        `;
        button.disabled = true;

        // Очищаем cookie пользователя
        this.clearUserCookie();

        // Переход на страницу выхода
        setTimeout(() => {
            window.location.href = '/user/login';
        }, 800);
    }

    clearUserCookie() {
        try {
            const cookieNames = ['toolbox_user', 'toolbox_access'];

            cookieNames.forEach(cookieName => {
                deleteCookie(cookieName);
            });
        } catch (error) {
            console.warn('Error clearing cookies:', error);
        }
    }

    initHoverEffects() {
        const clientCard = document.querySelector('.client-card');
        if (clientCard) {
            clientCard.addEventListener('mouseenter', () => {
                clientCard.style.transform = 'translateY(-4px) scale(1.01)';
            });

            clientCard.addEventListener('mouseleave', () => {
                clientCard.style.transform = 'translateY(0) scale(1)';
            });
        }
    }

    addAvatarErrorHandler() {
        const avatar = document.querySelector('.client-avatar');
        if (avatar) {
            avatar.onerror = () => {
                avatar.src = 'static/images/users/default.png';
            };
        }
    }
}

// Инициализация при загрузке документа
document.addEventListener('DOMContentLoaded', () => {
    // Инициализируем менеджер пользователя
    window.clientManager = new ClientManager();

    // Добавляем анимацию появления
    const elements = document.querySelectorAll('.animate-fade-up');
    elements.forEach((el, index) => {
        el.style.animationDelay = `${index * 0.1}s`;
    });
});

// Экспорт для использования в других модулях
export { ClientManager };