From a2225419d7ccabf05bccf7bd9f4b971cce08ba74 Mon Sep 17 00:00:00 2001
From: MoonTestUse1 <crocoman7887@gmail.com>
Date: Thu, 2 Jan 2025 02:13:55 +0600
Subject: [PATCH] =?UTF-8?q?=D1=87=D0=B8=D0=BD=D0=B8=D0=BC=20=D0=B1=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B409?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/AdminDashboardView.vue | 105 ++++++++++++++++++----
 frontend/src/views/AdminLoginView.vue     |  65 ++++++++++----
 frontend/src/views/HomeView.vue           |  48 +++++-----
 frontend/src/views/LoginView.vue          |  76 ++++++++++------
 4 files changed, 211 insertions(+), 83 deletions(-)

diff --git a/frontend/src/views/AdminDashboardView.vue b/frontend/src/views/AdminDashboardView.vue
index 56008b7..b443589 100644
--- a/frontend/src/views/AdminDashboardView.vue
+++ b/frontend/src/views/AdminDashboardView.vue
@@ -1,24 +1,99 @@
 <template>
-  <div class="min-h-full">
-    <header class="bg-white shadow">
-      <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-        <h1 class="text-3xl font-bold text-gray-900">
-          Панель администратора
-        </h1>
-      </div>
-    </header>
-    <main>
-      <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-        <div class="px-4 py-6 sm:px-0">
-          <div class="border-4 border-dashed border-gray-200 rounded-lg h-96 flex items-center justify-center">
-            <p class="text-gray-500">Здесь будет содержимое панели администратора</p>
+  <div class="min-h-screen bg-gray-100">
+    <!-- Верхняя панель -->
+    <nav class="bg-white shadow-sm">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex justify-between h-16">
+          <div class="flex">
+            <div class="flex-shrink-0 flex items-center">
+              <h1 class="text-xl font-bold text-gray-900">IT Support Admin</h1>
+            </div>
+          </div>
+          <div class="flex items-center">
+            <button
+              @click="handleLogout"
+              class="ml-3 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500"
+            >
+              Выйти
+            </button>
           </div>
         </div>
       </div>
-    </main>
+    </nav>
+
+    <!-- Основной контент -->
+    <div class="py-6">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="bg-white shadow rounded-lg divide-y divide-gray-200">
+          <!-- Статистика -->
+          <div class="px-6 py-5">
+            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
+              Общая статистика
+            </h3>
+            <div class="grid grid-cols-1 gap-5 sm:grid-cols-3">
+              <div class="bg-purple-50 overflow-hidden shadow rounded-lg">
+                <div class="px-4 py-5 sm:p-6">
+                  <dt class="text-sm font-medium text-purple-600 truncate">
+                    Всего заявок
+                  </dt>
+                  <dd class="mt-1 text-3xl font-semibold text-purple-900">
+                    0
+                  </dd>
+                </div>
+              </div>
+
+              <div class="bg-indigo-50 overflow-hidden shadow rounded-lg">
+                <div class="px-4 py-5 sm:p-6">
+                  <dt class="text-sm font-medium text-indigo-600 truncate">
+                    Активные заявки
+                  </dt>
+                  <dd class="mt-1 text-3xl font-semibold text-indigo-900">
+                    0
+                  </dd>
+                </div>
+              </div>
+
+              <div class="bg-green-50 overflow-hidden shadow rounded-lg">
+                <div class="px-4 py-5 sm:p-6">
+                  <dt class="text-sm font-medium text-green-600 truncate">
+                    Решенные заявки
+                  </dt>
+                  <dd class="mt-1 text-3xl font-semibold text-green-900">
+                    0
+                  </dd>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Последние заявки -->
+          <div class="px-6 py-5">
+            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
+              Последние заявки
+            </h3>
+            <div class="bg-white shadow overflow-hidden sm:rounded-md">
+              <div class="p-4 text-center text-gray-500">
+                Пока нет заявок
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-// Здесь будет логика панели администратора
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const handleLogout = async () => {
+  // Очищаем данные администратора
+  localStorage.removeItem('admin_token')
+  localStorage.removeItem('is_admin')
+  
+  // Перенаправляем на страницу входа
+  await router.push('/admin')
+}
 </script> 
\ No newline at end of file
diff --git a/frontend/src/views/AdminLoginView.vue b/frontend/src/views/AdminLoginView.vue
index 14edb69..ecac50d 100644
--- a/frontend/src/views/AdminLoginView.vue
+++ b/frontend/src/views/AdminLoginView.vue
@@ -1,35 +1,46 @@
 <template>
-  <div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-    <div class="max-w-md w-full space-y-8">
-      <div>
-        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
-          Вход для администратора
+  <div class="min-h-screen bg-gradient-to-br from-purple-600 to-indigo-500 flex items-center justify-center p-4">
+    <div class="max-w-md w-full bg-white rounded-xl shadow-2xl p-8">
+      <div class="text-center mb-8">
+        <h2 class="text-3xl font-bold text-gray-900">
+          Панель администратора
         </h2>
+        <p class="mt-2 text-gray-600">
+          Вход в систему управления
+        </p>
       </div>
-      <form class="mt-8 space-y-6" @submit.prevent="handleLogin">
-        <div class="rounded-md shadow-sm -space-y-px">
-          <div>
-            <label for="username" class="sr-only">Имя пользователя</label>
+
+      <form @submit.prevent="handleLogin" class="space-y-6">
+        <div>
+          <label for="username" class="block text-sm font-medium text-gray-700">
+            Имя пользователя
+          </label>
+          <div class="mt-1">
             <input
               id="username"
               v-model="username"
               name="username"
               type="text"
               required
-              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-              placeholder="Имя пользователя"
+              class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500"
+              placeholder="Введите имя пользователя"
             />
           </div>
-          <div>
-            <label for="password" class="sr-only">Пароль</label>
+        </div>
+
+        <div>
+          <label for="password" class="block text-sm font-medium text-gray-700">
+            Пароль
+          </label>
+          <div class="mt-1">
             <input
               id="password"
               v-model="password"
               name="password"
               type="password"
               required
-              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-              placeholder="Пароль"
+              class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-purple-500 focus:border-purple-500"
+              placeholder="Введите пароль"
             />
           </div>
         </div>
@@ -37,17 +48,33 @@
         <div>
           <button
             type="submit"
-            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200"
+            :class="{ 'opacity-75 cursor-not-allowed': loading }"
             :disabled="loading"
           >
-            <span v-if="loading">Загрузка...</span>
-            <span v-else>Войти</span>
+            <span v-if="loading">
+              <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              Вход...
+            </span>
+            <span v-else>Войти в панель управления</span>
           </button>
         </div>
 
-        <div v-if="error" class="text-red-600 text-center">
+        <div v-if="error" class="rounded-lg bg-red-50 p-4 text-sm text-red-700">
           {{ error }}
         </div>
+
+        <div class="text-center">
+          <router-link 
+            to="/" 
+            class="text-sm text-purple-600 hover:text-purple-500"
+          >
+            Вернуться на главную
+          </router-link>
+        </div>
       </form>
     </div>
   </div>
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index ead12a2..2f75d80 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -1,28 +1,34 @@
 <template>
-  <div class="text-center">
-    <h1 class="text-4xl font-bold text-gray-900 mb-8">
-      Добро пожаловать в IT Form Help
-    </h1>
-    <p class="text-xl text-gray-600 mb-8">
-      Система поддержки и обработки IT-заявок
-    </p>
-    <div class="space-x-4">
-      <router-link
-        to="/login"
-        class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
-      >
-        Войти как сотрудник
-      </router-link>
-      <router-link
-        to="/admin/login"
-        class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50"
-      >
-        Войти как администратор
-      </router-link>
+  <div class="min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center p-4">
+    <div class="max-w-md w-full bg-white rounded-xl shadow-2xl p-8">
+      <div class="text-center">
+        <h1 class="text-4xl font-bold text-gray-900 mb-2">IT Support Portal</h1>
+        <p class="text-lg text-gray-600 mb-8">Система поддержки IT департамента</p>
+      </div>
+
+      <div class="space-y-4">
+        <router-link 
+          to="/login" 
+          class="block w-full py-3 px-4 text-center text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors duration-200 font-medium shadow-md hover:shadow-lg"
+        >
+          Вход для сотрудников
+        </router-link>
+
+        <router-link 
+          to="/admin" 
+          class="block w-full py-3 px-4 text-center text-indigo-700 bg-indigo-100 hover:bg-indigo-200 rounded-lg transition-colors duration-200 font-medium border-2 border-indigo-200"
+        >
+          Вход для администраторов
+        </router-link>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-// Главная страница
+// Очищаем токены при входе на главную страницу
+localStorage.removeItem('token')
+localStorage.removeItem('admin_token')
+localStorage.removeItem('employee')
+localStorage.removeItem('is_admin')
 </script> 
\ No newline at end of file
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 727ca40..b7bb1a5 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -1,35 +1,46 @@
 <template>
-  <div class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
-    <div class="max-w-md w-full space-y-8">
-      <div>
-        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
+  <div class="min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center p-4">
+    <div class="max-w-md w-full bg-white rounded-xl shadow-2xl p-8">
+      <div class="text-center mb-8">
+        <h2 class="text-3xl font-bold text-gray-900">
           Вход для сотрудников
         </h2>
+        <p class="mt-2 text-gray-600">
+          Введите свои учетные данные
+        </p>
       </div>
-      <form class="mt-8 space-y-6" @submit.prevent="handleLogin">
-        <div class="rounded-md shadow-sm -space-y-px">
-          <div>
-            <label for="last-name" class="sr-only">Фамилия</label>
+
+      <form @submit.prevent="handleLogin" class="space-y-6">
+        <div>
+          <label for="last-name" class="block text-sm font-medium text-gray-700">
+            Фамилия
+          </label>
+          <div class="mt-1">
             <input
               id="last-name"
               v-model="lastName"
               name="last-name"
               type="text"
               required
-              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-              placeholder="Фамилия"
+              class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+              placeholder="Введите фамилию"
             />
           </div>
-          <div>
-            <label for="password" class="sr-only">Пароль</label>
+        </div>
+
+        <div>
+          <label for="password" class="block text-sm font-medium text-gray-700">
+            Пароль
+          </label>
+          <div class="mt-1">
             <input
               id="password"
               v-model="password"
               name="password"
               type="password"
               required
-              class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
-              placeholder="Пароль"
+              class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
+              placeholder="Введите пароль"
             />
           </div>
         </div>
@@ -37,17 +48,33 @@
         <div>
           <button
             type="submit"
-            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
+            :class="{ 'opacity-75 cursor-not-allowed': loading }"
             :disabled="loading"
           >
-            <span v-if="loading">Загрузка...</span>
+            <span v-if="loading">
+              <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              Вход...
+            </span>
             <span v-else>Войти</span>
           </button>
         </div>
 
-        <div v-if="error" class="text-red-600 text-center">
+        <div v-if="error" class="rounded-lg bg-red-50 p-4 text-sm text-red-700">
           {{ error }}
         </div>
+
+        <div class="text-center">
+          <router-link 
+            to="/" 
+            class="text-sm text-indigo-600 hover:text-indigo-500"
+          >
+            Вернуться на главную
+          </router-link>
+        </div>
       </form>
     </div>
   </div>
@@ -56,13 +83,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import axios, { AxiosError } from 'axios'
-
-interface LoginResponse {
-  access_token: string
-  token_type: string
-  [key: string]: any
-}
+import axios from 'axios'
 
 const router = useRouter()
 const lastName = ref('')
@@ -76,7 +97,7 @@ const handleLogin = async () => {
 
   try {
     console.log('Отправка запроса на авторизацию...')
-    const response = await axios.post<LoginResponse>('/api/auth/login', {
+    const response = await axios.post('/api/auth/login', {
       last_name: lastName.value,
       password: password.value
     })
@@ -89,10 +110,9 @@ const handleLogin = async () => {
     console.log('Перенаправление на /requests...')
     // Перенаправляем на страницу заявок
     await router.push('/requests')
-  } catch (e) {
+  } catch (e: any) {
     console.error('Ошибка при авторизации:', e)
-    const axiosError = e as AxiosError<{ detail: string }>
-    error.value = axiosError.response?.data?.detail || 'Неверная фамилия или пароль'
+    error.value = e.response?.data?.detail || 'Неверная фамилия или пароль'
   } finally {
     loading.value = false
   }