From b12de1e9c0a7a2b6ec498116a9100f03bad16c04 Mon Sep 17 00:00:00 2001 From: Web-serfer Date: Thu, 7 May 2026 20:37:05 +0500 Subject: [PATCH] =?UTF-8?q?=D0=9D=D0=BE=D0=B2=D1=8B=D0=B5=20=D0=BF=D1=80?= =?UTF-8?q?=D0=B0=D0=B2=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/layout/header/Header.astro | 71 +++++++++++++++++-- .../components/layout/header/UserMenu.astro | 25 ++++++- 2 files changed, 88 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/layout/header/Header.astro b/frontend/src/components/layout/header/Header.astro index 49f4036..14f5225 100644 --- a/frontend/src/components/layout/header/Header.astro +++ b/frontend/src/components/layout/header/Header.astro @@ -274,6 +274,22 @@ import { COMPANY } from "@constants"; .mobile-auth-block { display: flex; align-items: center; + transition: all 0.3s ease-out; + } + + /* Анимация плавного исчезновения */ + .mobile-auth-block.fade-out { + opacity: 0; + transform: scale(0.8); + pointer-events: none; + } + + .mobile-auth-block.fade-out-complete { + opacity: 0; + width: 0; + padding: 0; + margin: 0; + overflow: hidden; } /* Кнопка входа - круглая иконка */ @@ -287,6 +303,7 @@ import { COMPANY } from "@constants"; background: transparent; border: 2px solid #1e3050; border-radius: 50%; + transition: all 0.3s ease-out; color: #1e3050; text-decoration: none; transition: all 0.3s ease; @@ -517,14 +534,26 @@ import { COMPANY } from "@constants"; `; document.getElementById('mobile-logout-btn')?.addEventListener('click', async () => { + const mobileAuthBlock = document.getElementById('mobile-auth-block'); + + // Запускаем анимацию плавного исчезновения + if (mobileAuthBlock) { + mobileAuthBlock.classList.add('fade-out'); + } + + // Ждем завершения анимации + await new Promise(resolve => setTimeout(resolve, 300)); + try { await fetch('/api/auth/logout', { method: 'POST' }); } catch (e) { console.error('Logout error:', e); } - // Очищаем localStorage полностью - localStorage.clear(); + // Очищаем только данные авторизации, НЕ трогаем cookie_consent + localStorage.removeItem('auth_token'); + localStorage.removeItem('user'); + localStorage.removeItem('pocketbase_auth'); // Удаляем cookie pb_auth всеми возможными способами const cookieName = 'pb_auth'; @@ -539,9 +568,8 @@ import { COMPANY } from "@constants"; }); }); - // Альтернативный способ - перезапись пустым значением + // Альтернативный способ document.cookie = 'pb_auth=; path=/; max-age=0'; - document.cookie = 'pb_auth=; path=/; expires=1970-01-01'; document.querySelector('.header-right')?.classList.remove('auth-active'); window.location.reload(); @@ -550,14 +578,27 @@ import { COMPANY } from "@constants"; // Обработчик выхода document.getElementById('logout-btn')?.addEventListener('click', async () => { + // Находим блок user-display + const userDisplay = document.querySelector('.user-display'); + + // Запускаем анимацию плавного исчезновения + if (userDisplay) { + userDisplay.classList.add('fade-out'); + } + + // Ждем завершения анимации + await new Promise(resolve => setTimeout(resolve, 300)); + try { await fetch('/api/auth/logout', { method: 'POST' }); } catch (e) { console.error('Logout error:', e); } - // Очищаем localStorage полностью - localStorage.clear(); + // Очищаем только данные авторизации, НЕ трогаем cookie_consent + localStorage.removeItem('auth_token'); + localStorage.removeItem('user'); + localStorage.removeItem('pocketbase_auth'); // Удаляем cookie pb_auth всеми возможными способами const cookieName = 'pb_auth'; @@ -622,7 +663,25 @@ import { COMPANY } from "@constants"; display: flex; align-items: center; gap: 0.5rem; + transition: all 0.3s ease-out; } + + /* Анимация плавного исчезновения для десктопа */ + .user-display.fade-out { + opacity: 0; + transform: scale(0.8); + pointer-events: none; + } + + .user-display.fade-out-complete { + opacity: 0; + width: 0; + gap: 0; + margin: 0; + padding: 0; + overflow: hidden; + } + .user-avatar { width: 36px; height: 36px; diff --git a/frontend/src/components/layout/header/UserMenu.astro b/frontend/src/components/layout/header/UserMenu.astro index 78ea01b..22e4eb4 100644 --- a/frontend/src/components/layout/header/UserMenu.astro +++ b/frontend/src/components/layout/header/UserMenu.astro @@ -35,6 +35,14 @@ const firstLetter = userName ? userName.charAt(0).toUpperCase() : userEmail?.cha display: flex; align-items: center; gap: 0.75rem; + transition: all 0.3s ease-out; + } + + /* Анимация плавного исчезновения */ + .user-menu.fade-out { + opacity: 0; + transform: scale(0.9); + pointer-events: none; } .user-avatar { @@ -99,6 +107,17 @@ const firstLetter = userName ? userName.charAt(0).toUpperCase() : userEmail?.cha const logoutBtn = document.getElementById('logout-btn'); logoutBtn?.addEventListener('click', async () => { + // Находим блок user-menu + const userMenu = document.querySelector('.user-menu'); + + // Запускаем анимацию плавного исчезновения + if (userMenu) { + userMenu.classList.add('fade-out'); + } + + // Ждем завершения анимации + await new Promise(resolve => setTimeout(resolve, 300)); + try { await fetch('/api/auth/logout', { method: 'POST', @@ -107,8 +126,10 @@ const firstLetter = userName ? userName.charAt(0).toUpperCase() : userEmail?.cha console.error('Logout error:', e); } - // Очищаем localStorage полностью - localStorage.clear(); + // Очищаем только данные авторизации, НЕ трогаем cookie_consent + localStorage.removeItem('auth_token'); + localStorage.removeItem('user'); + localStorage.removeItem('pocketbase_auth'); // Удаляем cookie pb_auth всеми возможными способами const cookieName = 'pb_auth';