Merge pull request #13 from moevm/frontend-IGI

Frontend igi
moevm · Dec 22, 2024 · 6e0d410 · 6e0d410
2 parents 09a4590 + 40c57b9
commit 6e0d410
Show file tree

Hide file tree

Showing 9 changed files with 334 additions and 21 deletions.
diff --git a/frontend/components/TextField.vue b/frontend/components/TextField.vue
@@ -1,18 +1,45 @@
 <template>
     <v-text-field
     :label="label"
+    :type="type"
+    v-model="inputValue"
+    @input="$emit('input', $event)"
     solo
     class="text-field"
     elevation="4"
-    ></v-text-field>
+    :messages="messages"
+    >
+    </v-text-field>
 </template>
 
 <script>
     export default {
         props: {
             label: {
-            type: String,
-            required: true
+                type: String,
+                required: true
+            },
+            type: {
+                type: String,
+                default: 'text'
+            },
+            value: {
+                type: String,
+                default: ''
+            },
+            messages: {
+                type: String,
+                default: ''
+            }
+        },
+        computed: {
+            inputValue: {
+                get() {
+                    return this.value;
+                },
+                set(value) {
+                    this.$emit('input', value);
+                }
             }
         }
     }
@@ -38,4 +65,12 @@
         box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25), inset 0 2px 4px 0 rgba(0, 0, 0, 0.25) !important;
         border-radius: 20px;
     }
+    .text-field .v-messages {
+        color: #B65B5B; /* Устанавливаем цвет текста в красный */
+        font-size: 14px;
+        margin-top: 4px;
+    }
+    .text-field .v-input__control .v-input__slot input {
+        font-size: 20px; /* Устанавливаем размер текста в поле ввода */
+    }
 </style>
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
@@ -4,8 +4,7 @@ export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   publicRuntimeConfig: {
     backendHost: process.env.BACKEND_HOST,
-    backendPort: process.env.BACKEND_PORT,
-    shit: process.env
+    backendPort: process.env.BACKEND_PORT
   },
   head: {
     titleTemplate: '%s - frontend',
@@ -30,6 +29,8 @@ export default {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
   plugins: [
+    '~/plugins/axios.js',
+    {src: '~/plugins/auth.js', mode: 'client'}
   ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
@@ -43,7 +44,11 @@ export default {
 
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [
+    '@nuxtjs/axios'
   ],
+  axios: {
+    baseURL: `http://${process.env.BACKEND_HOST}:${process.env.BACKEND_PORT}`
+  },
 
   // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
   vuetify: {
@@ -70,7 +75,7 @@ export default {
           secondary: '#9FADBF',
           info: '#DEDEDF',
           warning: '#FF9800',
-          error: '#F44336',
+          error: '#B65B5B',
           success: '#4CAF50'
         },
       }

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -9,6 +9,7 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@nuxtjs/axios": "^5.13.6",
     "core-js": "^3.25.3",
     "nuxt": "^2.15.8",
     "serve": "^14.2.4",

diff --git a/frontend/pages/signin.vue b/frontend/pages/signin.vue
@@ -9,11 +9,13 @@
           <TextField
             label="Почта"
             v-model="email"
+            :messages="emailMessages"
           />
           <TextField
             label="Пароль"
             v-model="password"
             type="password"
+            :messages="passwordMessages"
           />
           <Btn label="Вход" class="custom-margin" @click="handleRegistration"/>
           <div style="display: inline; text-align: center;">
@@ -31,24 +33,46 @@ export default {
   data() {
     return {
       email: '',
-      password: ''
+      password: '',
+      emailMessages: '',
+      passwordMessages: ''
     }
   },
   methods: {
     async handleRegistration() {
       const { email, password } = this;
-      const backendUrl = `${this.$config.backendHost}:${this.$config.backendPort}/signInDto`;
-      try {
-        const response = await this.$axios.post(backendUrl, { email, password });
-        if (response.status === 200) {
-          console.log('Успешная авторизация:', response.data);
-          // Здесь можно перенаправить пользователя на другую страницу
-          this.$router.push('/');
-        } else {
-          console.error('Ошибка авторизации:', response.data);
-        }
-      } catch (error) {
+      const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+      if (!emailRegExp.test(email)) {
+        this.emailMessages = 'Некорректный email';
+        this.passwordMessages = '';
+        return;
+      }
+      const response = await this.$axios.post('/api/auth/signIn', { email, password });
+      localStorage.setItem('access_token', response.data.access_token);
+      console.log(response);
+      if (response.status === 200) {
+        console.log('Успешная авторизация');
+        this.password = '';
+        this.email = '';
+        this.passwordMessages = '';
+        this.emailMessages = '';
+        this.$router.push('/');
+      }
+      else {
         console.error('Ошибка при отправке данных:', error);
+        if (error.response.status === 404) {
+          this.emailMessages = 'Пользователя с такой почтой не существует';
+          this.passwordMessages = '';
+        }
+        else if (error.response.status === 401) {
+          this.emailMessages = '';
+          this.passwordMessages = 'Неверный пароль';
+        }
+        else {
+          console.error('Что то пошло не так:', error, response);
+          this.passwordMessages = 'Что то пошло не так';
+          this.emailMessages = 'Что то пошло не так';          
+        }
       }
     }
   }