diff --git a/src/new-frontend/public/vite.svg b/src/new-frontend/public/vite.svg
deleted file mode 100644
index e7b8dfb..0000000
--- a/src/new-frontend/public/vite.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/new-frontend/src/components/Common/ActionsMenu.tsx b/src/new-frontend/src/components/Common/ActionsMenu.tsx
index 267b48e..e1999d0 100644
--- a/src/new-frontend/src/components/Common/ActionsMenu.tsx
+++ b/src/new-frontend/src/components/Common/ActionsMenu.tsx
@@ -12,7 +12,7 @@ import Delete from './DeleteAlert';
interface ActionsMenuProps {
type: string;
id: number;
- disabled: boolean;
+ disabled?: boolean;
}
const ActionsMenu: React.FC = ({ type, id, disabled }) => {
diff --git a/src/new-frontend/src/components/UserSettings/DeleteConfirmation.tsx b/src/new-frontend/src/components/UserSettings/DeleteConfirmation.tsx
index 6aa846a..ad7bf33 100644
--- a/src/new-frontend/src/components/UserSettings/DeleteConfirmation.tsx
+++ b/src/new-frontend/src/components/UserSettings/DeleteConfirmation.tsx
@@ -47,7 +47,7 @@ const DeleteConfirmation: React.FC = ({ isOpen, onClose }) => {
- All your account data will be permanently deleted. If you're sure, please click 'Confirm' to proceed.
+ All your account data will be permanently deleted. If you are sure, please click 'Confirm' to proceed.
diff --git a/src/new-frontend/src/hooks/useAuth.tsx b/src/new-frontend/src/hooks/useAuth.tsx
index 36a3ac2..29f1020 100644
--- a/src/new-frontend/src/hooks/useAuth.tsx
+++ b/src/new-frontend/src/hooks/useAuth.tsx
@@ -4,19 +4,23 @@ import { useUsersStore } from '../store/users-store';
import { useItemsStore } from '../store/items-store';
import { useNavigate } from 'react-router-dom';
+const isLoggedIn = () => {
+ return localStorage.getItem('access_token') !== null;
+};
+
const useAuth = () => {
- const { user, getUser, resetUser } = useUserStore();
+ const { getUser, resetUser } = useUserStore();
const { resetUsers } = useUsersStore();
const { resetItems } = useItemsStore();
const navigate = useNavigate();
-
const login = async (data: AccessToken) => {
const response = await LoginService.loginAccessToken({
formData: data,
});
localStorage.setItem('access_token', response.access_token);
await getUser();
+ navigate('/');
};
const logout = () => {
@@ -27,11 +31,8 @@ const useAuth = () => {
navigate('/login');
};
- const isLoggedIn = () => {
- return user !== null;
- };
-
- return { login, logout, isLoggedIn };
+ return { login, logout };
}
+export { isLoggedIn };
export default useAuth;
\ No newline at end of file
diff --git a/src/new-frontend/src/main.tsx b/src/new-frontend/src/main.tsx
index 146cbb5..f49e1f3 100644
--- a/src/new-frontend/src/main.tsx
+++ b/src/new-frontend/src/main.tsx
@@ -6,14 +6,9 @@ import { createStandaloneToast } from '@chakra-ui/toast';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { OpenAPI } from './client';
-import Admin from './pages/Admin';
-import Dashboard from './pages/Dashboard';
-import ErrorPage from './pages/ErrorPage';
-import Items from './pages/Items';
-import Login from './pages/Login';
-import RecoverPassword from './pages/RecoverPassword';
-import Root from './pages/Root';
-import Profile from './pages/UserSettings';
+import { isLoggedIn } from './hooks/useAuth';
+import privateRoutes from './routes/private_route';
+import publicRoutes from './routes/public_route';
import theme from './theme';
@@ -23,19 +18,8 @@ OpenAPI.TOKEN = async () => {
}
const router = createBrowserRouter([
- {
- path: '/',
- element: ,
- errorElement: ,
- children: [
- { path: '/', element: },
- { path: 'items', element: },
- { path: 'admin', element: },
- { path: 'settings', element: },
- ],
- },
- { path: 'login', element: , errorElement: , },
- { path: 'recover-password', element: , errorElement: , },
+ isLoggedIn() ? privateRoutes() : {},
+ ...publicRoutes(),
]);
const { ToastContainer } = createStandaloneToast();
diff --git a/src/new-frontend/src/pages/Layout.tsx b/src/new-frontend/src/pages/Layout.tsx
index db28150..ac35d2f 100644
--- a/src/new-frontend/src/pages/Layout.tsx
+++ b/src/new-frontend/src/pages/Layout.tsx
@@ -6,18 +6,19 @@ import { Outlet } from 'react-router-dom';
import Sidebar from '../components/Common/Sidebar';
import UserMenu from '../components/Common/UserMenu';
import { useUserStore } from '../store/user-store';
+import { isLoggedIn } from '../hooks/useAuth';
const Layout: React.FC = () => {
const { getUser } = useUserStore();
useEffect(() => {
- const token = localStorage.getItem('access_token');
- if (token) {
- (async () => {
+ const fetchUser = async () => {
+ if (isLoggedIn()) {
await getUser();
- })();
- }
- }, [getUser]);
+ }
+ };
+ fetchUser();
+ }, []);
return (
diff --git a/src/new-frontend/src/routes/private_route.tsx b/src/new-frontend/src/routes/private_route.tsx
new file mode 100644
index 0000000..8fbe34f
--- /dev/null
+++ b/src/new-frontend/src/routes/private_route.tsx
@@ -0,0 +1,21 @@
+import Admin from '../pages/Admin';
+import Dashboard from '../pages/Dashboard';
+import ErrorPage from '../pages/ErrorPage';
+import Items from '../pages/Items';
+import Layout from '../pages/Layout';
+import UserSettings from '../pages/UserSettings';
+
+export default function privateRoutes() {
+
+ return {
+ path: '/',
+ element: ,
+ errorElement: ,
+ children: [
+ { path: '/', element: },
+ { path: 'items', element: },
+ { path: 'admin', element: },
+ { path: 'settings', element: },
+ ],
+ };
+}
diff --git a/src/new-frontend/src/routes/public_route.tsx b/src/new-frontend/src/routes/public_route.tsx
new file mode 100644
index 0000000..8b4dd4c
--- /dev/null
+++ b/src/new-frontend/src/routes/public_route.tsx
@@ -0,0 +1,13 @@
+import ErrorPage from '../pages/ErrorPage';
+import Login from '../pages/Login';
+import RecoverPassword from '../pages/RecoverPassword';
+
+export default function publicRoutes() {
+ return [
+ { path: '/login', element: , errorElement: },
+ { path: 'recover-password', element: , errorElement: },
+ // TODO: complete this
+ // { path: '*', element: }
+ ];
+}
+
diff --git a/src/new-frontend/src/theme.tsx b/src/new-frontend/src/theme.tsx
index cc62ba1..b741399 100644
--- a/src/new-frontend/src/theme.tsx
+++ b/src/new-frontend/src/theme.tsx
@@ -1,13 +1,12 @@
-import { extendTheme } from "@chakra-ui/react"
+import { extendTheme } from '@chakra-ui/react'
const theme = extendTheme({
colors: {
ui: {
- main: "#009688",
- secondary: "#EDF2F7",
+ main: '#009688',
+ secondary: '#EDF2F7',
success: '#48BB78',
danger: '#E53E3E',
- focus: 'red',
}
},
components: {
@@ -22,15 +21,6 @@ const theme = extendTheme({
},
},
},
- Input: {
- baseStyle: {
- field: {
- _focus: {
- borderColor: 'ui.focus',
- },
- },
- },
- },
},
});