feat(client): add auth logic

client/src/pages/AccountsPage.tsx

@@ -3,6 +3,10 @@ import { useState } from 'react';
 import ContentDrawer from '../components/ContentDrawer';
 import UserCreate from '../components/UserCreate';
 import { useTranslation } from 'react-i18next';
+import { Button } from 'antd';
+import { UserService } from '../services/userService';
+import { User } from '../types/user';
+import { AuthService } from '../services/authService';
 
 export default function AccountsPage() {
   const { t } = useTranslation();
@@ -11,6 +15,8 @@ export default function AccountsPage() {
   const showDrawer = () => setOpen(true);
   const closeDrawer = () => setOpen(false);
 
+  const [accounts, setAccounts] = useState<User[]>([]);
+
   return (
     <>
       <Header

client/src/pages/LoginPage.tsx

@@ -5,7 +5,7 @@ import {
   EyeTwoTone,
   UserOutlined,
 } from '@ant-design/icons';
-import { AuthService } from '../services/auth';
+import { AuthService } from '../services/authService';
 import { Auth } from '../types/auth';
 import { useNavigate } from 'react-router-dom';
 

client/src/pages/MainLayout.tsx

@@ -9,8 +9,6 @@ import RunningProcessesPage from './RunningProcessesPage';
 import AccountsPage from './AccountsPage';
 import EventsListPage from './EventsListPage';
 import ConfigurationPage from './ConfigurationPage';
-import { useSetUserSelector } from '../store/user';
-import { UserService } from '../services/user';
 
 export default function MainLayout() {
   const navigate = useNavigate();
@@ -21,8 +19,6 @@ export default function MainLayout() {
   const [width, setWidth] = useState<number | string>('15%');
   const [collapsedWidth, setCollapsedWidth] = useState(50);
 
-  const setUser = useSetUserSelector();
-
   const calculateWidths = () => {
     const windowWidth = window.innerWidth;
     const expanded = Math.min(Math.max(windowWidth * 0.15, 180), 240);
@@ -58,21 +54,6 @@ export default function MainLayout() {
     navigate(key);
   }
 
-  useEffect(() => {
-    const token = localStorage.getItem('accessToken');
-    if (!token) {
-      navigate('/login');
-    } else {
-      if (localStorage.getItem('user')) {
-        setUser(JSON.parse(localStorage.getItem('user') as string));
-      } else {
-        UserService.getProfile().then((user) => {
-          setUser(user);
-        });
-      }
-    }
-  }, []);
-
   return (
     <Layout style={{ minHeight: '100vh' }}>
       <Sider

client/src/pages/ProtectedRoute.tsx

@@ -1,8 +1,19 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 // ProtectedRoute.js
-import { Outlet } from 'react-router-dom';
-import React from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { useUserSelector } from '../store/userStore';
 
 const ProtectedRoute = (): React.JSX.Element => {
+  const navigate = useNavigate();
+  const user = useUserSelector();
+
+  useEffect(() => {
+    if (!user?.id) {
+      navigate('/login');
+    }
+  }, [user]);
+
   return <Outlet />;
 };
 export default ProtectedRoute;