From a5a742ce5544f3aec94e49348bfa2ab9be4cbafc Mon Sep 17 00:00:00 2001
From: MoonTestUse1 <crocoman7887@gmail.com>
Date: Thu, 2 Jan 2025 01:41:45 +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=B402?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/layouts/MainLayout.vue |  33 ++++++
 frontend/src/router/index.ts        |  16 +++
 frontend/src/views/HomeView.vue     |  28 ++++++
 frontend/src/views/LoginView.vue    | 149 +++++++++++++---------------
 4 files changed, 147 insertions(+), 79 deletions(-)
 create mode 100644 frontend/src/layouts/MainLayout.vue
 create mode 100644 frontend/src/views/HomeView.vue

diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
new file mode 100644
index 0000000..fffcdd8
--- /dev/null
+++ b/frontend/src/layouts/MainLayout.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="min-h-screen bg-gray-100">
+    <nav class="bg-white shadow">
+      <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">
+              <router-link to="/" class="text-xl font-bold text-gray-800">
+                IT Form Help
+              </router-link>
+            </div>
+          </div>
+          <div class="flex items-center">
+            <router-link
+              to="/login"
+              class="ml-4 px-4 py-2 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"
+            >
+              Войти
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+      <router-view></router-view>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Layout для главной страницы и страницы входа
+</script> 
\ No newline at end of file
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 9d22bcb..33052c8 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -4,6 +4,22 @@ import { useAuthStore } from '@/stores/auth';
 const router = createRouter({
   history: createWebHistory(),
   routes: [
+    {
+      path: '/',
+      component: () => import('@/layouts/MainLayout.vue'),
+      children: [
+        {
+          path: '',
+          name: 'Home',
+          component: () => import('@/views/HomeView.vue')
+        },
+        {
+          path: 'login',
+          name: 'Login',
+          component: () => import('@/views/LoginView.vue')
+        }
+      ]
+    },
     {
       path: '/admin',
       component: () => import('@/layouts/AdminLayout.vue'),
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
new file mode 100644
index 0000000..ead12a2
--- /dev/null
+++ b/frontend/src/views/HomeView.vue
@@ -0,0 +1,28 @@
+<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>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Главная страница
+</script> 
\ No newline at end of file
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index dd76400..15f45a3 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -1,98 +1,89 @@
 <template>
-  <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
-    <h2 class="text-2xl font-semibold text-slate-800 mb-4">Вход в систему</h2>
-    
-    <form @submit.prevent="handleSubmit" class="space-y-4">
+  <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>
-        <label class="block text-sm font-medium text-slate-700 mb-1">
-          Фамилия
-        </label>
-        <div class="relative">
-          <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
-            <UserIcon :size="18" class="text-slate-400" />
+        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
+          Вход для сотрудников
+        </h2>
+      </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>
+            <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="Фамилия"
+            />
           </div>
-          <input
-            v-model="lastName"
-            type="text"
-            required
-            class="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500"
-            placeholder="Введите фамилию"
-          />
-        </div>
-      </div>
-
-      <div>
-        <label class="block text-sm font-medium text-slate-700 mb-1">
-          Пароль
-        </label>
-        <div class="relative">
-          <div class="absolute inset-y-0 left-0 pl-3 flex items-center">
-            <LockIcon :size="18" class="text-slate-400" />
+          <div>
+            <label for="password" class="sr-only">Пароль</label>
+            <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="Пароль"
+            />
           </div>
-          <input
-            v-model="password"
-            type="password"
-            required
-            class="w-full pl-10 pr-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500"
-            placeholder="Введите пароль"
-          />
         </div>
-      </div>
 
-      <button
-        type="submit"
-        :disabled="isLoading"
-        class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
-      >
-        <component 
-          :is="isLoading ? LoaderIcon : LogInIcon" 
-          :size="18"
-          :class="{ 'animate-spin': isLoading }" 
-        />
-        {{ isLoading ? 'Вход...' : 'Войти' }}
-      </button>
+        <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"
+            :disabled="loading"
+          >
+            <span v-if="loading">Загрузка...</span>
+            <span v-else>Войти</span>
+          </button>
+        </div>
 
-      <div class="text-center">
-        <router-link 
-          to="/admin" 
-          class="text-sm text-blue-600 hover:text-blue-800"
-        >
-          Вход для администраторов
-        </router-link>
-      </div>
-    </form>
+        <div v-if="error" class="text-red-600 text-center">
+          {{ error }}
+        </div>
+      </form>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useAuthStore } from '@/stores/auth';
-import { UserIcon, LockIcon, LogInIcon, LoaderIcon } from 'lucide-vue-next';
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import axios from 'axios'
 
-const router = useRouter();
-const authStore = useAuthStore();
+const router = useRouter()
+const lastName = ref('')
+const password = ref('')
+const loading = ref(false)
+const error = ref('')
 
-const lastName = ref('');
-const password = ref('');
-const isLoading = ref(false);
+const handleLogin = async () => {
+  loading.value = true
+  error.value = ''
 
-async function handleSubmit() {
-  if (isLoading.value) return;
-  
-  isLoading.value = true;
   try {
-    const success = await authStore.login(lastName.value, password.value);
-    if (success) {
-      router.push('/support');
-    } else {
-      alert('Неверная фамилия или пароль');
-    }
-  } catch (error) {
-    console.error('Error:', error);
-    alert('Ошибка авторизации');
+    const response = await axios.post('/api/auth/login', {
+      last_name: lastName.value,
+      password: password.value
+    })
+
+    // Сохраняем данные сотрудника и токен
+    localStorage.setItem('employee', JSON.stringify(response.data))
+    localStorage.setItem('token', response.data.access_token)
+
+    // Перенаправляем на страницу заявок
+    router.push('/requests')
+  } catch (e: any) {
+    error.value = e.response?.data?.detail || 'Произошла ошибка при входе'
   } finally {
-    isLoading.value = false;
+    loading.value = false
   }
 }
 </script>