added views for client profile

frontend/src/components/ProfileSideBar.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="sidebar">
+        <div :class="{ active: isActive('/profile/dashboard') }">
+            <router-link to="/profile/dashboard">
+                <p>
+                    Мой профиль
+                </p>
+            </router-link>
+        </div>
+        <div :class="{ active: isActive('/profile/rents') }">
+            <router-link to="/profile/rents">
+                <p>
+                    Мои аренды
+                </p>
+            </router-link>
+        </div>
+        <div :class="{ active: isActive('/profile/edit') }">
+            <router-link to="/profile/edit">
+                <p>
+                    Редактировать профиль
+                </p>
+            </router-link>
+        </div>
+        <div :class="{ active: isActive('/profile/change-password') }">
+            <router-link to="/profile/change-password">
+                <p>
+                    Изменить пароль
+                </p>
+            </router-link>
+        </div>
+        <div @click="logoutUser">
+            <p>
+                Выйти
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+import {logoutUser} from "@/services/authService.js";
+
+export default {
+    name: "ProfileSideBar",
+    methods: {
+        logoutUser,
+        isActive(route) {
+            return this.$route.path === route;
+        }
+    }
+}
+</script>
+
+<style scoped>
+.sidebar {
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar div {
+    padding: 8px;
+    border-left: 3px solid rgba(0, 0, 0, 0.2);
+}
+
+.sidebar div.active {
+    border-left: 3px solid #6A983C;
+}
+
+p {
+    margin-left: 8px;
+    cursor: pointer;
+    color: black;
+    font-size: 16px;
+}
+</style>

frontend/src/components/TheHeader.vue

@@ -19,7 +19,7 @@ export default {
     },
 
     methods: {
-        openProfile() {
+        openLogin() {
             this.showLoginModal = true
         },
         logout() {
@@ -47,11 +47,11 @@ export default {
             </div>
             <div class="profile-basket">
                 <button v-if="!isAuthenticated">
-                    <img src="../assets/svg/profile.svg" alt="profile" @click="openProfile"/>
-                </button>
-                <button v-if="isAuthenticated" @click="logout">
-                    Выйти
+                    <img src="../assets/svg/profile.svg" alt="profile" @click="openLogin"/>
                 </button>
+                <router-link v-if="isAuthenticated" to="/profile/dashboard">
+                    <img src="../assets/svg/profile.svg" alt="profile"/>
+                </router-link>
                 <button>
                     <img src="../assets/svg/basket.svg" alt="basket"/>
                 </button>

frontend/src/js/router.js

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 
-import {isUserAdmin} from "@/services/authService.js";
+import {isUserAdmin, isUserAuthenticated} from "@/services/authService.js";
 import HomeView from '@/views/HomeView.vue'
 import AdminOrders from "@/views/admin/AdminOrders.vue";
 import AdminEmployees from "@/views/admin/AdminEmployees.vue";
@@ -9,6 +9,10 @@ import AdminReviews from "@/views/admin/AdminReviews.vue";
 import AdminStatistics from "@/views/admin/AdminStatistics.vue";
 import AdminTools from "@/views/admin/AdminTools.vue";
 import AdminCategories from "@/views/admin/AdminCategories.vue";
+import ProfileView from "@/views/profile/ProfileView.vue";
+import MyRents from "@/views/profile/MyRents.vue";
+import EditProfile from "@/views/profile/EditProfile.vue";
+import ChangePassword from "@/views/profile/ChangePassword.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -74,6 +78,38 @@ const router = createRouter({
         requiresAdmin: true,
       },
     },
+    {
+      path: '/profile/dashboard',
+      name: 'profile-dashboard',
+      component: ProfileView,
+      meta: {
+        requiresLogin: true
+      }
+    },
+    {
+      path: '/profile/rents',
+      name: 'profile-rents',
+      component: MyRents,
+      meta: {
+        requiresLogin: true
+      }
+    },
+    {
+      path: '/profile/edit',
+      name: 'profile-edit',
+      component: EditProfile,
+      meta: {
+        requiresLogin: true
+      }
+    },
+    {
+      path: '/profile/change-password',
+      name: 'profile-change-password',
+      component: ChangePassword,
+      meta: {
+        requiresLogin: true
+      }
+    },
   ],
 })
 
@@ -83,6 +119,11 @@ router.beforeEach((to, from, next) => {
   } else {
     next();
   }
+  if (to.meta.requiresLogin && !isUserAuthenticated()){
+    next({ name: 'home' });
+  } else {
+    next();
+  }
 });
 
 export default router

frontend/src/services/authService.js

@@ -47,8 +47,10 @@ export const storeUserInfo = (token) => {
   const decodedToken = jwtDecode(token);
   const isAdmin = (decodedToken.role === "worker") || false;
   const isAuthenticated = true;
+  const id = decodedToken.sub
 
   localStorage.setItem('isAdmin', isAdmin.toString());
+  localStorage.setItem('id', id);
   localStorage.setItem('isAuthenticated', isAuthenticated.toString());
   store.commit('login')
 }
@@ -73,6 +75,10 @@ export const logoutUser = () => {
   localStorage.removeItem('access_token');
   localStorage.removeItem('isAdmin');
   localStorage.removeItem('isAuthenticated');
+  localStorage.removeItem('id')
+  store.dispatch('logout').then(() => {
+    window.location.href = '/'
+  })
 };
 
 export const refreshToken = async () => {

frontend/src/services/profileServices.js

@@ -0,0 +1,56 @@
+import axios from 'axios';
+import { useToast } from 'vue-toastification'
+
+const toast = useToast()
+
+const API_URL = 'http://localhost:8000/api/clients';
+
+
+export const getProfileData = async (userData) => {
+  try{
+    const response = await axios.get(`${API_URL}/${localStorage.getItem('id')}/private`);
+    return response.data
+  } catch (error) {
+    const errorMessage = error.response
+      ? error.response.data.message // Если есть ответ от сервера
+      : error.message || 'Ошибка соединения';
+    toast.error(errorMessage)
+    return "ERROR"
+  }
+};
+
+export const updateProfileData = async (profileData) => {
+  try{
+    const response = await axios.patch(`${API_URL}/${localStorage.getItem('id')}`, profileData, {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    toast.success("Данные успешно обновлены!")
+    return "SUCCESS"
+  } catch (error) {
+    const errorMessage = error.response
+      ? error.response.data.message // Если есть ответ от сервера
+      : error.message || 'Ошибка соединения';
+    toast.error(errorMessage)
+    return "ERROR"
+  }
+}
+
+export const changePassword = async (formData) => {
+  try{
+    const response = await axios.patch(`${API_URL}/${localStorage.getItem('id')}/password`, formData, {
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    });
+    toast.success("Пароль успешно обновлен!")
+    return "SUCCESS"
+  } catch (error) {
+    const errorMessage = error.response
+      ? error.response.data.message // Если есть ответ от сервера
+      : error.message || 'Ошибка соединения';
+    toast.error(errorMessage)
+    return "ERROR"
+  }
+}

frontend/src/views/HomeView.vue

@@ -14,7 +14,9 @@ export default{
     },
     beforeMount() {
         getAllCategories().then((res) => {
-            if (res === "ERROR") window.location.href = '/'
+            if (res === "ERROR") {
+                this.isLoading = false
+            }
             else {
                 this.isLoading = false
                 this.categories = res