From 51b16ab3d6a083d60433ba31a626b55423a0f632 Mon Sep 17 00:00:00 2001
From: Archibald <arigirekash@gmail.com>
Date: Tue, 13 May 2025 14:13:28 +0500
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=B1=D1=80=D0=BE?=
 =?UTF-8?q?=D1=81=20=D0=BD=D0=B0=20gittea?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 API/app/main.py             |   2 +-
 WEB/src/pages/HomePage.vue  |  39 ++++++-
 WEB/src/pages/LoginPage.vue | 216 ++++++++++++++++++++++++++++++++----
 WEB/src/router/index.js     |  24 ++--
 4 files changed, 240 insertions(+), 41 deletions(-)

diff --git a/API/app/main.py b/API/app/main.py
index 808a764..8d351b0 100644
--- a/API/app/main.py
+++ b/API/app/main.py
@@ -15,7 +15,7 @@ def start_app():
 
     api_app.add_middleware(
         CORSMiddleware,
-        allow_origins=["*"],
+        allow_origins=["http://localhost:5173"],
         allow_credentials=True,
         allow_methods=["*"],
         allow_headers=["*"],
diff --git a/WEB/src/pages/HomePage.vue b/WEB/src/pages/HomePage.vue
index 9262e47..b522d70 100644
--- a/WEB/src/pages/HomePage.vue
+++ b/WEB/src/pages/HomePage.vue
@@ -1,11 +1,44 @@
 <script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
+const router = useRouter()
+
+// Реактивное вычисление статуса авторизации
+const isAuthenticated = computed(() => !!localStorage.getItem('access_token'))
+
+const goToLogin = () => router.push('/login')
+const logout = () => {
+  localStorage.removeItem('access_token')
+  router.go(0) // Принудительное обновление страницы для обновления состояния
+}
 </script>
 
 <template>
-12345
+  <div class="home-page q-pa-md q-gutter-md">
+    <h4 class="text-center">Добро пожаловать!</h4>
+
+    <div v-if="isAuthenticated" class="q-gutter-sm">
+      <q-btn label="Редактировать профиль" color="secondary" />
+      <q-btn label="Выход" color="negative" @click="logout" />
+    </div>
+
+    <q-btn
+        v-else
+        label="Авторизация"
+        color="primary"
+        @click="goToLogin"
+    />
+  </div>
 </template>
 
 <style scoped>
-
-</style>
\ No newline at end of file
+.home-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  gap: 20px;
+}
+</style>
diff --git a/WEB/src/pages/LoginPage.vue b/WEB/src/pages/LoginPage.vue
index f6e8ffa..ba483f6 100644
--- a/WEB/src/pages/LoginPage.vue
+++ b/WEB/src/pages/LoginPage.vue
@@ -1,19 +1,41 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
 import { Notify } from 'quasar'
-import loginUser from "../api/auth/loginRequest.js";
+import loginUser from "../api/auth/loginRequest.js"
 
 const router = useRouter()
-
 const login = ref('')
 const password = ref('')
 const loading = ref(false)
 
+const marqueeTrack = ref(null)
+const marqueeText = ref(null)
+const animationDuration = ref(7) // секунд
+
+// Динамически рассчитываем длительность анимации в зависимости от ширины текста
+const updateAnimation = () => {
+  if (marqueeTrack.value && marqueeText.value) {
+    const textWidth = marqueeText.value.offsetWidth
+    const containerWidth = marqueeTrack.value.offsetWidth / 2
+    // Скорость: 100px/sec (можно подстроить)
+    const speed = 100
+    animationDuration.value = (textWidth + containerWidth) / speed
+    marqueeTrack.value.style.setProperty('--marquee-width', `${textWidth}px`)
+    marqueeTrack.value.style.setProperty('--marquee-duration', `${animationDuration.value}s`)
+  }
+}
+
+onMounted(() => {
+  setTimeout(updateAnimation, 100) // Дать DOM отрисоваться
+  window.addEventListener('resize', updateAnimation)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateAnimation)
+})
+
 const authorisation = async () => {
-
   loading.value = true
-
   try {
     const accessToken = await loginUser({
       login: login.value,
@@ -24,14 +46,16 @@ const authorisation = async () => {
 
     Notify.create({
       type: 'positive',
-      message: 'Успешный вход!'
+      message: 'Успешный вход!',
+      icon: 'check_circle'
     })
 
-    router.push('/dashboard')
+    router.push('/')
   } catch (error) {
     Notify.create({
       type: 'negative',
-      message: error.message || 'Ошибка входа'
+      message: error.message || 'Ошибка входа',
+      icon: 'error'
     })
   } finally {
     loading.value = false
@@ -39,12 +63,30 @@ const authorisation = async () => {
 }
 </script>
 
-
 <template>
-  <div class="fullscreen flex flex-center bg-grey-2">
-    <q-card class="q-pa-lg shadow-2" style="width: 350px">
+  <div class="fullscreen flex flex-center bg-violet-strong">
+    <q-card class="q-pa-xl shadow-violet card-animate violet-card" style="width: 370px; max-width: 92vw;">
       <q-card-section>
-        <div class="text-h6 text-center">Вход</div>
+        <div class="marquee-outer q-mb-md">
+          <div
+              class="marquee-track"
+              ref="marqueeTrack"
+          >
+            <div
+                class="marquee-text text-h5 text-weight-bold text-center text-violet-strong"
+                ref="marqueeText"
+            >
+              <q-icon name="key" size="32px" class="q-mr-sm text-violet-accent"/>
+              Добро пожаловать
+            </div>
+            <div
+                class="marquee-text text-h5 text-weight-bold text-center text-violet-strong"
+            >
+              <q-icon name="key" size="32px" class="q-mr-sm text-violet-accent"/>
+              Добро пожаловать
+            </div>
+          </div>
+        </div>
       </q-card-section>
 
       <q-card-section>
@@ -56,27 +98,46 @@ const authorisation = async () => {
               dense
               outlined
               autofocus
-              class="q-mb-md"
+              class="q-mb-md lavender-input"
               lazy-rules="ondemand"
               :rules="[ val => (val && val.length > 0) || 'Введите логин' ]"
-          />
+              :disable="loading"
+              rounded
+              color="deep-purple-5"
+          >
+            <template #prepend>
+              <q-icon name="person" :color="'deep-purple-5'"/>
+            </template>
+          </q-input>
           <q-input
               v-model="password"
               type="password"
               label="Пароль"
               dense
               outlined
-              class="q-mb-lg"
+              class="q-mb-lg lavender-input"
               lazy-rules="ondemand"
               :rules="[ val => (val && val.length > 0) || 'Введите пароль' ]"
-          />
+              :disable="loading"
+              rounded
+              color="deep-purple-5"
+          >
+            <template #prepend>
+              <q-icon name="lock" :color="'deep-purple-5'"/>
+            </template>
+          </q-input>
 
           <q-btn
               label="Войти"
               type="submit"
-              color="primary"
-              class="full-width"
+              color="deep-purple-5"
+              class="full-width q-mt-sm btn-rounded shimmer-btn"
               :loading="loading"
+              unelevated
+              size="lg"
+              icon="arrow_forward"
+              no-caps
+              rounded
           />
         </q-form>
       </q-card-section>
@@ -85,7 +146,122 @@ const authorisation = async () => {
 </template>
 
 <style scoped>
-.fullscreen {
-  height: 100vh;
+.bg-violet-strong {
+  background: linear-gradient(135deg, #4f046f 0%, #7c3aed 100%);
+  min-height: 100vh;
+}
+
+.violet-card {
+  border-radius: 22px;
+  background: #ede9fe;
+  box-shadow: 0 6px 32px 0 rgba(124, 58, 237, 0.13), 0 1.5px 6px 0 rgba(124, 58, 237, 0.10);
+}
+
+.card-animate {
+  animation: fadeInUp 0.7s cubic-bezier(.39, .575, .565, 1) both;
+}
+@keyframes fadeInUp {
+  0% { opacity: 0; transform: translateY(40px);}
+  100% { opacity: 1; transform: none;}
+}
+
+/* Бегущая строка на всю ширину карточки, без видимых полей */
+.marquee-outer {
+  width: 100%;
+  height: 42px;
+  border-radius: 14px;
+  background: transparent;
+  box-shadow: none;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.marquee-track {
+  --marquee-width: 370px;
+  --marquee-duration: 7s;
+  display: flex;
+  align-items: center;
+  will-change: transform;
+  animation: marquee-move var(--marquee-duration) linear infinite;
+}
+
+
+.marquee-text {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  font-family: 'Montserrat', 'Roboto', sans-serif;
+  font-size: 1.25rem;
+  padding: 0 1rem;
+  line-height: 42px;
+}
+
+@keyframes marquee-move {
+  0%   { transform: translateX(0); }
+  100% { transform: translateX(calc(-1 * var(--marquee-width, 370px))); }
+}
+
+.q-input,
+.q-field__control,
+.q-field__native,
+.q-field__inner {
+  border-radius: 14px !important;
+}
+
+.btn-rounded {
+  border-radius: 16px;
+}
+
+.shimmer-btn {
+  position: relative;
+  overflow: hidden;
+  transition: box-shadow 0.2s;
+}
+.shimmer-btn::after {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: linear-gradient(
+      120deg,
+      rgba(167, 139, 250, 0.2) 0%,
+      rgba(167, 139, 250, 0.6) 50%,
+      rgba(167, 139, 250, 0.2) 100%
+  );
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+  z-index: 1;
+}
+.shimmer-btn:hover::after {
+  opacity: 1;
+  animation: shimmer 1.2s infinite linear;
+}
+@keyframes shimmer {
+  0% { transform: translateX(-60%) skewX(-20deg);}
+  100% { transform: translateX(60%) skewX(-20deg);}
+}
+.shimmer-btn:hover {
+  box-shadow: 0 0 18px 0 #a78bfa, 0 1.5px 6px 0 rgba(124, 58, 237, 0.10);
+}
+.shimmer-btn:active {
+  background: #ede9fe !important;
+}
+
+.lavender-input .q-field__control,
+.lavender-input .q-field__native,
+.lavender-input .q-field__inner {
+  background: #f6f0ff !important;
+}
+
+.text-violet-strong {
+  color: #4f046f;
+}
+.text-violet-accent {
+  color: #a78bfa;
 }
 </style>
diff --git a/WEB/src/router/index.js b/WEB/src/router/index.js
index 1b89a3f..6011359 100644
--- a/WEB/src/router/index.js
+++ b/WEB/src/router/index.js
@@ -1,20 +1,13 @@
 import {createRouter, createWebHistory} from 'vue-router'
-// import DashboardPage from '@/pages/DashboardPage.vue'
-import LoginPage from "../pages/LoginPage.vue";
-import HomePage from "../pages/HomePage.vue"; // пример
+import LoginPage from "../pages/LoginPage.vue"
+import HomePage from "../pages/HomePage.vue"
 
 const routes = [
     {
-        path: '/', component: HomePage,
-        meta: {requiresAuth: true}
+        path: '/',
+        component: HomePage
     },
-
-    {path: '/login', component: LoginPage},
-    // {
-    //     path: '/dashboard',
-    //     component: DashboardPage,
-    //     meta: { requiresAuth: true } // требовать авторизацию
-    // }
+    {path: '/login', component: LoginPage}
 ]
 
 const router = createRouter({
@@ -22,14 +15,11 @@ const router = createRouter({
     routes
 })
 
-// Навешиваем перехватчик навигации
 router.beforeEach((to, from, next) => {
     const isAuthenticated = !!localStorage.getItem('access_token')
 
-    if (to.meta.requiresAuth && !isAuthenticated) {
-        next('/login')
-    } else if (to.path === '/login' && isAuthenticated) {
-        next('/dashboard')
+    if (to.path === '/login' && isAuthenticated) {
+        next('/')  // теперь редирект на главную страницу
     } else {
         next()
     }