Merge pull request #23 from shampiniony/auth

added login authorization + started registration

src/api/login.api.ts

@@ -0,0 +1,27 @@
+import axios from 'axios';
+import { auth } from '@/store/auth.store';
+import { apiUrl } from '@/router/router';
+
+interface LoginResponse {
+  access: string;
+  refresh: string;
+}
+
+export const login = async (email: string, password: string): Promise<LoginResponse> => {
+  try {
+    const response = await axios.post<LoginResponse>(`${apiUrl}/api/v1/users/token/`, {
+      email,
+      password,
+    });
+
+    const { access, refresh } = response.data;
+    auth.authenticated = true;
+    auth.accessToken = access;
+    axios.defaults.headers.common['Authorization'] = `Bearer ${auth.accessToken}`;
+
+    return response.data;
+  } catch (error) {
+    console.error('Error during login:', error);
+    throw new Error('Invalid username or password');
+  }
+};

src/components/admin-header.vue

@@ -20,6 +20,7 @@
         <SidebarItem :imgSrc="scheduleIcon" to="/admin/billing" title="Транзакции" :isOpen="isOpen" :isActive="isActive('/admin/billing')"/>
         <SidebarItem :imgSrc="profileIcon" to="/admin/profile" title="Профиль" :isOpen="isOpen" />
         <SidebarItem :imgSrc="plusIcon" to="/admin/add-event" title="Добавить" :isOpen="isOpen" />
+        <SidebarItem :imgSrc="personPlus" to="/admin/registration" title="Регистрация" :isOpen="isOpen" />
 
         <button @click="toggleSidebar"
           class="p-2 rounded-3xl bg-gray-200 absolute right-0 top-6 transform translate-x-1/2">
@@ -40,6 +41,7 @@ import plusIcon from '@/assets/icons/plus.icon.svg'
 import SidebarItem from './sidebar-item.vue'
 import searchIcon from '@/assets/icons/search.icon.svg'
 import logoIcon from '@/assets/logo.svg'
+import personPlus from '@/assets/icons/personplus.svg'
 import { useRoute, useRouter } from 'vue-router'
 
 const isOpen = ref(false)

src/layouts/admin.layout.vue

@@ -11,4 +11,20 @@
 <script setup>
 import AdminHeader from '@/components/admin-header.vue';
 import { auth } from '@/store/auth.store';
-</script>
+import { onMounted, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+onMounted(() => {
+  if (!auth.authenticated) {
+    router.push('/login');
+  }
+});
+
+watch(() => auth.authenticated, (newVal) => {
+  if (!newVal) {
+    router.push('/login');
+  }
+});
+</script>

src/pages/login.page.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="flex justify-center items-center h-screen bg-white">
+    <div class="bg-white p-8 rounded w-full max-w-sm">
+      <h2 class="text-2xl font-bold mb-6 text-center">LOG IN</h2>
+      <form @submit.prevent="loginUser">
+        <div class="mb-4">
+          <label class="block text-gray-700 mb-2" for="username">ЛОГИН</label>
+          <input v-model="username" type="text" id="username" class="w-full px-3 py-2 border rounded" required>
+        </div>
+        <div class="mb-6">
+          <label class="block text-gray-700 mb-2" for="password">ПАРОЛЬ</label>
+          <input v-model="password" type="password" id="password" class="w-full px-3 py-2 border rounded" required>
+        </div>
+        <button type="submit" class="w-full bg-logo-blue text-white py-2 rounded">КНОПКА</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { login } from '@/api/login.api';
+
+const username = ref('');
+const password = ref('');
+const router = useRouter();
+
+const loginUser = async () => {
+  try {
+    await login(username.value, password.value);
+    router.push({ name: 'Admin' });
+  } catch (error) {
+    console.error(error);
+    alert('Invalid username or password');
+  }
+};
+</script>
+
+<style scoped>
+.bg-logo-blue {
+  background-color: #6193b1; /* вроде тот цвет im not sure */
+}
+</style>

src/pages/registration.page.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="flex justify-center items-center h-screen bg-white">
+    <div class="bg-white p-8 rounded w-full max-w-sm ml-[200px]">
+      <h2 class="text-2xl font-bold mb-6 text-center">СОЗДАТЬ ПОЛЬЗОВАТЕЛЯ</h2>
+      <form>
+        <div class="mb-4">
+          <label class="block text-gray-700 mb-2" for="surname">ФАМИЛИЯ</label>
+          <input v-model="surname" type="text" id="surname" class="w-full px-3 py-2 border rounded" required>
+        </div>
+        <div class="mb-6">
+          <label class="block text-gray-700 mb-2" for="name">ИМЯ</label>
+          <input v-model="name" type="text" id="name" class="w-full px-3 py-2 border rounded" required>
+        </div>
+        <div class="mb-8">
+          <label class="block text-gray-700 mb-2" for="patronymic">ОТЧЕСТВО</label>
+          <input v-model="patronymic" type="text" id="patronymic" class="w-full px-3 py-2 border rounded" required>
+        </div>
+        <div class="mb-10">
+          <label class="block text-gray-700 mb-2" for="location">МЕСТО</label>
+          <input v-model="password" type="password" id="location" class="w-full px-3 py-2 border rounded" required>
+        </div>
+        <div class="mb-12">
+          <label class="block text-gray-700 mb-2" for="password">ID</label>
+          <input v-model="password" type="password" id="password" class="w-full px-3 py-2 border rounded" required>
+        </div>
+        <div class="mb-14">
+          <label class="block text-gray-700 mb-2" for="password">ТЕЛЕФОН</label>
+          <input v-model="password" type="password" id="password" class="w-full px-3 py-2 border rounded" required>
+        </div>
+        <div class="mb-16">
+          <label class="block text-gray-700 mb-2" for="password">EMAIL</label>
+          <input v-model="password" type="password" id="password" class="w-full px-3 py-2 border rounded" required>
+        </div>
+        <button type="submit" class="w-full bg-logo-blue text-white py-2 rounded">ДОБАВИТЬ</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+</script>
+
+<style scoped>
+.bg-logo-blue {
+  background-color: #6193b1;
+}
+</style>

src/router/router.ts

@@ -9,6 +9,8 @@ import PaymentPage from '@/pages/payment.page.vue';
 import NotFoundPage from '@/pages/not-found.page.vue';
 import BookingPage from '@/pages/booking.page.vue';
 import BillingsPage from '@/pages/billings.page.vue';
+import LoginPage from '@/pages/login.page.vue';
+import Registration from '@/pages/registration.page.vue';
 
 import { createRouter, createWebHistory } from 'vue-router';
 
@@ -70,7 +72,17 @@ const routes = [
         name: 'Billing',
         component: BillingsPage,
       },
+      {
+        path: 'registration',
+        name: 'Registration',
+        component: Registration,
+      }
     ],
+  }, 
+  {
+    path: '/login',
+    name: 'Login',
+    component: LoginPage,
   }
 ];
 

src/store/auth.store.ts

@@ -2,10 +2,12 @@ import { reactive } from 'vue';
 
 interface AuthStore {
   authenticated: boolean;
-  token: string;
+  accessToken: string | null;
 }
 
 export const auth = reactive<AuthStore>({
-  authenticated: true,
-  token: '',
+  authenticated: false,
+  accessToken: null,
 });
+
+export const isAuthenticated = () => auth.authenticated;