Merge pull request #77 from JimTheCat/CU-8692r5m3u_Add-cookie-notific…

…ation-and-logic-for-cookies_Patryk-Kosiski

feature: Create cookie notification

frontend/src/Components/CookiesPopup/CookiesPopup.tsx

@@ -0,0 +1,43 @@
+import {useEffect, useState} from 'react';
+import {Button, Group, Modal, Text, UnstyledButton} from '@mantine/core';
+
+export const CookiesPopup = () => {
+  const [opened, setOpened] = useState<boolean>(false);
+
+  useEffect(() => {
+    const hasAcceptedCookies = localStorage.getItem('cookiesAccepted');
+    if (!hasAcceptedCookies && !window.location.pathname.includes('/privacy')) {
+      setOpened(true);
+    }
+  }, []);
+
+  const handleAccept = () => {
+    localStorage.setItem('cookiesAccepted', 'true'); // Save to local storage
+    setOpened(false);
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={() => setOpened(false)}
+      title="Używamy ciasteczek 🍪"
+      centered
+      closeOnEscape={false}
+      closeOnClickOutside={false}
+      withCloseButton={false}
+      size="md"
+    >
+      <Text>
+        Nasza strona korzysta z ciasteczek w celu zapewnienia najlepszej jakości usług. Kontynuując
+        przeglądanie, akceptujesz naszą <UnstyledButton c={'blue'} onClick={() => window.open("/privacy", '_blank')}>politykę
+        prywatności</UnstyledButton>.
+      </Text>
+
+      <Group justify="flex-end" mt="md">
+        <Button onClick={handleAccept} color="blue">
+          Akceptuję
+        </Button>
+      </Group>
+    </Modal>
+  );
+}

frontend/src/Components/CookiesPopup/index.tsx

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

frontend/src/Pages/Root/Root.tsx

@@ -28,6 +28,7 @@ export const Root = () => {
         <Route path="/login" element={<Login/>}/>
         <Route path="/register" element={<Register/>}/>
         <Route path="/passwordrecovery" element={<Recovery/>}/>
+        <Route path="/privacy" element={<div>Privacy</div>}/>
       </Route>
 
       {/*Protected routes*/}

frontend/src/main.tsx

@@ -11,6 +11,7 @@ import {BrowserRouter} from "react-router-dom";
 import {I18nextProvider} from "react-i18next";
 import {i18nInitializer} from "./Services/Utils";
 import {ThemeProvider} from "./Providers/ThemeProvider.tsx";
+import {CookiesPopup} from "./Components/CookiesPopup";
 
 i18nInitializer();
 
@@ -27,6 +28,7 @@ createRoot(document.getElementById('root')!).render(
       <ThemeProvider>
         <BrowserRouter>
           <I18nextProvider i18n={i18next}>
+            <CookiesPopup/>
             <App/>
           </I18nextProvider>
         </BrowserRouter>