Merge branch 'main' of https://github.com/moevm/nosql2h24-loans

frontend/src/components/Notification.vue

@@ -0,0 +1,87 @@
+<template>
+    <div v-if="visible" class="notification-container">
+      <div class="notification" :class="type">
+        <p>{{ message }}</p>
+        <button @click="closeNotification">Ок</button>
+      </div>
+    </div>
+  </template>
+
+  <script>
+  export default {
+    name: "Notification",
+    props: {
+      message: {
+        type: String,
+        required: true,
+      },
+      type: {
+        type: String,
+        default: "info",
+      },
+      visible: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    methods: {
+      closeNotification() {
+        this.$emit("close");
+      },
+    },
+  };
+  </script>
+
+
+  <style scoped>
+  .notification-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.4);
+    z-index: 1000;
+  }
+  
+  .notification {
+    background-color: #f9f9f9;
+    padding: 20px 30px;
+    border-radius: 10px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    max-width: 90%;
+    width: 400px;
+    font-family: Arial, sans-serif;
+    color: #5d001e;
+    font-size: 25px; 
+  }
+  
+  .notification.success {
+    border: 2px solid #e3afbc;
+  }
+  
+  .notification.error {
+    border: 2px solid #5d001e;
+  }
+  
+  .notification button {
+    margin-top: 20px;
+    padding: 12px 25px;
+    background-color: #5d001e;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 18px;
+  }
+  
+  .notification button:hover {
+    background-color: #e3afbc;
+    color: #5d001e;
+  }
+  </style>
+

frontend/src/components/SortArrow.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="sort-arrow">
+      <!-- Стрелка вверх -->
+      <div 
+        class="triangle-up" 
+        :class="{ active: sortDirection === 1, inactive: sortDirection === 0 }" 
+      ></div>
+
+      <!-- Стрелка вниз -->
+      <div 
+        class="triangle-down" 
+        :class="{ active: sortDirection === -1, inactive: sortDirection === 0 }" 
+      ></div>
+    </div>
+  </template>
+
+  <script>
+  export default {
+    name: 'SortArrow',
+    props: {
+      sortDirection: {
+        type: Number,
+        required: true
+      }
+    }
+  };
+  </script>
+
+  <style scoped>
+  .sort-arrow {
+    display: inline-flex;
+    flex-direction: column; /* Стрелки будут располагаться одна над другой */
+    align-items: center;
+    justify-content: center;
+    gap: 5px; /* Расстояние между стрелками */
+    position: absolute; /* Расположение стрелок относительно родительского элемента */
+    margin-left: 10px; /* Отступ от текста */
+    top: 50%; /* Выравнивание по вертикали на середину текста */
+    transform: translateY(-50%); /* Центрирование по вертикали */
+    z-index: 10; /* Убедитесь, что стрелки будут наверху */
+  }
+  
+  /* Стрелка вверх */
+  .triangle-up {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-bottom: 6px solid #e3afbc; /* Розовая стрелка вверх */
+  }
+  
+  /* Стрелка вниз */
+  .triangle-down {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 6px solid #e3afbc; /* Розовая стрелка вниз */
+  }
+  
+  .triangle-up.active {
+    border-bottom-color: #5d001e;
+  }
+  .triangle-down.active {
+    border-top-color: #5d001e;
+  }
+  .triangle-up.inactive {
+    border-bottom-color: #e3afbc;
+  }
+  .triangle-down.inactive {
+    border-top-color: #e3afbc;
+  }
+  </style>
+

frontend/src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import Login from '../views/Login.vue';
+import Register from '../views/Register.vue';
 import ClientMain from '../views/client/Main.vue';
 import AdminMain from '../views/admin/Main.vue';
 import ClientCredit from '../views/client/Credit.vue';
@@ -12,6 +13,7 @@ import ClientLoanApplication from '../views/client/LoanApplication.vue';
 const routes = [
   // { path: '/', redirect: '/login' },
   { path: '/login', component: Login, meta: { hideNavBar: true } },
+  { path: '/register', component: Register, meta: { hideNavBar: true } },
   { path: '/client/main', component: ClientMain },
   { path: '/admin/main', component: AdminMain },
   { path: '/client/credit', component: ClientCredit },

frontend/src/views/Login.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="form-container">
+    <div class="header">
+      <img src="../../public/favicon.png" class="logo" />
+      <h1 class="title">SCAM-BANK</h1>
+    </div>
     <form @submit.prevent="submitForm">
       <div class="form-group">
         <label for="email">Email:</label>
@@ -11,22 +15,39 @@
       </div>
       <Button text="Войти" />
     </form>
+    <div class="link-to-register">
+      Еще нет аккаунта? 
+      <router-link to="/register">Зарегистрируйтесь</router-link>
+    </div>
+
+    <Notification
+      ref="notification"
+      :message="notificationMessage"
+      :type="notificationType"
+      :visible="notificationVisible"
+      @close="onNotificationClose"
+    />
   </div>
 </template>
 
 <script>
 import Button from '../components/Button.vue';
 import axios from 'axios';
+import Notification from '../components/Notification.vue';
 
 export default {
   name: 'Login',
   components: {
-    Button
+    Button,
+    Notification
   },
   data() {
     return {
       email: '',
-      password: ''
+      password: '',
+      notificationMessage: '',
+      notificationType: 'info',
+      notificationVisible: false,
     };
   },
   methods: {
@@ -36,24 +57,33 @@ export default {
           email: this.email,
           password: this.password
         });
-        
+
         if (response.data.token) {
-          localStorage.setItem('authToken', true);
+          localStorage.setItem('authToken', response.data.token);
           localStorage.setItem('userId', response.data.userId);
           localStorage.setItem('userType', response.data.userType);
+
           this.$router.push(`/${response.data.userType}/main`);
         }
-      } 
-      catch (error) {
+      } catch (error) {
         if (error.response && error.response.status === 401) {
-          alert('Неверный email или пароль'); 
-        } 
-        else {
-          alert('Произошла ошибка. Пожалуйста, попробуйте позже.');
+          this.showNotification('Неверный email или пароль', 'error');
+        } else {
+          this.showNotification('Произошла ошибка. Пожалуйста, попробуйте позже.', 'error');
           console.log(error);
         }
       }
-    }
+    },
+
+    showNotification(message, type) {
+      this.notificationMessage = message;
+      this.notificationType = type;
+      this.notificationVisible = true;
+    },
+
+    onNotificationClose() {
+      this.notificationVisible = false;
+    },
   }
 };
 </script>
@@ -70,11 +100,29 @@ body, html {
 
 .form-container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100vh;
 }
 
+.header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 20px;
+}
+
+.logo {
+  width: 60px;
+  height: auto;
+}
+
+.title {
+  font-size: 3rem;
+  font-weight: bold;
+}
+
 form {
   display: flex;
   flex-direction: column;
@@ -100,4 +148,18 @@ input {
   border: 1px solid #ccc;
   border-radius: 4px;
 }
+
+.link-to-register {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.link-to-register a {
+  color: #9A1750;
+  text-decoration: none;
+}
+
+.link-to-register a:hover {
+  text-decoration: underline;
+}
 </style>