Merge pull request #71 from JimTheCat/CU-8696ybq3g_Integrate-Frontend…

…-with-Backend_Patryk-Kosiski

feature: Integrate FE with BE

frontend/.env.development

@@ -0,0 +1,2 @@
+# .env.development
+VITE_API_URL=http://localhost:8080

frontend/package.json

@@ -27,15 +27,18 @@
     "@tiptap/pm": "^2.10.0",
     "@tiptap/react": "^2.10.0",
     "@tiptap/starter-kit": "^2.10.0",
+    "axios": "^1.7.9",
     "dayjs": "^1.11.13",
     "i18next": "^23.16.1",
+    "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.3",
     "react-router": "^6.27.0",
     "react-router-dom": "^6.27.0",
     "react-tsparticles": "^2.12.2",
-    "tsparticles": "^2.12.0"
+    "tsparticles": "^2.12.0",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",

frontend/src/Components/Buttons/LogOut/LogOut.tsx

@@ -0,0 +1,28 @@
+import {Button} from "@mantine/core";
+import {IconLogout} from "@tabler/icons-react";
+import {useAuthStore} from "../../../Services/authStore.ts";
+import {useNavigate} from "react-router-dom";
+
+export const LogOut = () => {
+
+  const auth = useAuthStore();
+  const navigate = useNavigate();
+
+  return (
+    <Button
+      variant={"subtle"}
+      size={"md"}
+      leftSection={<IconLogout/>}
+      autoContrast
+      fullWidth
+      justify={"flex-start"}
+      color={"gray"}
+      onClick={() => {
+        auth.logout();
+        navigate('/login');
+      }}
+    >
+      Wyloguj się
+    </Button>
+  );
+}

frontend/src/Components/CenterContainer/CenterContainer.tsx

@@ -0,0 +1,16 @@
+import {Center, Flex} from "@mantine/core";
+import React from "react";
+
+type ICenterContainer = {
+  children: React.ReactNode;
+}
+
+export const CenterContainer = (props: ICenterContainer) => {
+  return (
+    <Center h={'100vh'}>
+      <Flex direction={'column'} align={'center'} justify={'center'}>
+        {props.children}
+      </Flex>
+    </Center>
+  );
+}

frontend/src/Components/CenterContainer/index.tsx

@@ -0,0 +1 @@
+export * from './CenterContainer';

frontend/src/Components/ContainerVhVw/ContainerVhVw.tsx

@@ -6,6 +6,10 @@ interface IContainerVhVw {
   children: ReactNode;
 }
 
+/**
+ * @deprecated ContainerVhVw is deprecated due to bugs with displaying children nodes with raw html components and Mantine dependency.
+ * Use CenterContainer instead which is more stable and is fully based on Mantine.
+ */
 export const ContainerVhVw = (props: IContainerVhVw) => {
   return (
     <div style={{width: props.vw + 'vw', height: props.vh + 'vh'}}>

frontend/src/Components/InnerHtmlHandler/index.tsx

@@ -0,0 +1 @@
+export * from './InnerHtmlHandler';

frontend/src/Components/Navbar/Navbar.tsx

@@ -1,9 +1,8 @@
 import {AppShell, Avatar, Box, Card, Group, Image, Stack, Text} from "@mantine/core";
-import MeowHubLogo from "../../../public/mh_logo.svg";
+import MeowHubLogo from "../../Assets/mh_logo.svg";
 import {MenuButton} from "../Buttons/Menu";
 import {
   IconHome,
-  IconLogout,
   IconMail,
   IconPencil,
   IconSettings,
@@ -13,17 +12,27 @@ import {
   IconUsersGroup,
   IconZoom
 } from "@tabler/icons-react";
+import {LogOut} from "../Buttons/LogOut/LogOut.tsx";
+import {useAuthStore} from "../../Services/authStore.ts";
+import {useNavigate} from "react-router-dom";
 
 export const Navbar = () => {
 
-  const nickname = "Placeholder name";
+  const auth = useAuthStore();
+  const nickname = auth.user?.login;
+  const navigate = useNavigate();
+
+  const handleProfileClick = () => {
+    navigate(`/profile/${auth.user?.tag}`);
+  }
 
   return (
     <>
 
       {/*Logo*/}
       <AppShell.Section>
-        <Card p={"xs"} mb={"lg"} withBorder radius={"md"}>
+        <Card p={"xs"} mb={"lg"} withBorder radius={"md"} style={{cursor: "pointer"}}
+              onClick={() => navigate("/mainpage")}>
           <Image
             src={MeowHubLogo}
             alt="MeowHub Logo"
@@ -35,7 +44,7 @@ export const Navbar = () => {
 
       {/*Profile*/}
       <AppShell.Section>
-        <Card p={"xs"} withBorder>
+        <Card p={"xs"} withBorder style={{cursor: "pointer"}} onClick={handleProfileClick}>
           <Group>
             <Avatar radius={180} size={"xl"}/>
             <Stack justify={"center"} gap={0}>
@@ -69,7 +78,7 @@ export const Navbar = () => {
             </Box>
             <Box>
               <MenuButton icon={<IconSettings/>} text={"Ustawienia"} href={"/settings"}/>
-              <MenuButton icon={<IconLogout/>} text={"Wyloguj się"}/>
+              <LogOut/>
             </Box>
           </Stack>
         </Card>

frontend/src/Components/ProtectedRoute/ProtectedRoute.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import {Navigate, Outlet} from 'react-router-dom';
+import {useAuthStore} from "../../Services/authStore.ts";
+
+export const ProtectedRoute: React.FC = () => {
+  const {token} = useAuthStore();
+  return token ? <Outlet/> : <Navigate to="/login"/>;
+};

frontend/src/Components/ProtectedRoute/index.tsx

@@ -0,0 +1 @@
+export * from './ProtectedRoute';

frontend/src/Components/PublicRoute/PublicRoute.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import {Navigate, Outlet} from "react-router-dom";
+
+interface PublicRouteProps {
+  isAuthenticated: boolean;
+  redirectPath?: string;
+}
+
+export const PublicRoute: React.FC<PublicRouteProps> = ({isAuthenticated, redirectPath = "/mainpage",}) => {
+  if (isAuthenticated) {
+    return <Navigate to={redirectPath} replace/>;
+  }
+  return <Outlet/>;
+};

frontend/src/Components/PublicRoute/index.tsx

@@ -0,0 +1 @@
+export * from './PublicRoute';

frontend/src/Components/RichEditor/index.tsx

@@ -0,0 +1 @@
+export * from './RichEditor';