gdpr stuff and finalizations

Author: Tschonti

packages/client/src/api/hooks/authHooks.ts

@@ -10,3 +10,5 @@ export const useUserDataQuery = (enabled: boolean) =>
 
 export const useValidateUserRolesMutation = () =>
   useMutation<AuthToken, PontozoError>(async () => (await functionAxios.get<AuthToken>('auth/verify')).data)
+
+export const usePurgeUserMutation = () => useMutation<unknown, PontozoError>(async () => (await functionAxios.delete('users')).data)

packages/client/src/api/hooks/emailRecipientHooks.ts

@@ -8,6 +8,10 @@ export const useUpdateEmailPreferencesMutation = () => {
   )
 }
 
+export const useOptOutEmailPreferencesMutation = () => {
+  return useMutation<unknown, PontozoError>(async () => (await functionAxios.patch(`/emails/optOut`)).data)
+}
+
 export const useFetchEmailPreferencesMutation = () => {
   return useMutation<EmailRecipient, PontozoError>(async () => (await functionAxios.get(`/emails/mine`)).data)
 }

packages/client/src/components/Footer.tsx

@@ -1,52 +1,58 @@
-import { Box, Container, Flex, HStack, Link, Stack, Text } from '@chakra-ui/react'
+import { Box, Container, Flex, HStack, Link, Stack, Text, VStack } from '@chakra-ui/react'
 import { FC } from 'react'
 import { FaEnvelope, FaGithub, FaGlobe, FaLinkedin } from 'react-icons/fa'
-import { HashLink } from 'react-router-hash-link'
 import { ColorfulExternalLink } from './commons/ColorfulExternalLink'
+import { ColorfulHashLink } from './commons/ColorfulHashLink'
 
 export const Footer: FC = () => {
   return (
     <Box as="footer" borderTop="1px" borderTopColor="gray.300" bg="white">
       <Container
         py={5}
         as={Flex}
-        alignItems={{ base: 'center', md: 'flex-end' }}
+        alignItems="center"
         justifyContent="space-around"
         direction={{ base: 'column', md: 'row' }}
         maxW="6xl"
+        gap={2}
       >
-        <Stack direction={{ base: 'column', md: 'row' }} spacing={2} justify="center" align="center">
-          <Text textAlign="center">
-            Készítette:{' '}
-            <Link href="https://github.com/Tschonti" color="brand.500" isExternal>
-              Fekete Sámuel
-            </Link>{' '}
-            az{' '}
-            <Link href="https://mtfsz.hu" color="brand.500" isExternal>
-              MTFSZ
-            </Link>{' '}
-            megbízásából.{' '}
-            <HashLink to="/faq#impressum" style={{ color: '#0a723a' }}>
-              Impresszum
-            </HashLink>
-          </Text>
-        </Stack>
+        <VStack spacing={0} justify="center" align="center">
+          <ColorfulHashLink to="/faq#privacy-notice">Adatkezelési tájékoztató</ColorfulHashLink>
+          <ColorfulHashLink to="/faq#cookie-notice">Süti tájékoztató</ColorfulHashLink>
+          <ColorfulHashLink to="/faq#impressum">Impresszum</ColorfulHashLink>
+        </VStack>
 
-        <HStack mt={{ base: 2, md: 0 }} spacing={2} justify="space-evenly">
-          <Text textAlign="center">&copy; {new Date().getFullYear()}</Text>
-          <ColorfulExternalLink url="https://github.com/Tschonti/pontozo" hoverColor="brand.500">
-            <FaGithub size={25} />
-          </ColorfulExternalLink>
-          <ColorfulExternalLink url="https://github.com/Tschonti" hoverColor="brand.500">
-            <FaGlobe size={25} />
-          </ColorfulExternalLink>
-          <ColorfulExternalLink url="mailto:feketesamu@gmail.com" hoverColor="brand.500">
-            <FaEnvelope size={25} />
-          </ColorfulExternalLink>
-          <ColorfulExternalLink url="https://www.linkedin.com/in/samuel-fekete/" hoverColor="brand.500">
-            <FaLinkedin size={25} />
-          </ColorfulExternalLink>
-        </HStack>
+        <VStack spacing={0}>
+          <Stack direction={{ base: 'column', md: 'row' }} spacing={0} justify="center" align="center">
+            <Text textAlign="center">
+              Készítette:{' '}
+              <Link href="https://github.com/Tschonti" color="brand.500" isExternal>
+                Fekete Sámuel
+              </Link>{' '}
+              az{' '}
+              <Link href="https://mtfsz.hu" color="brand.500" isExternal>
+                MTFSZ
+              </Link>{' '}
+              megbízásából.
+            </Text>
+          </Stack>
+          <Text textAlign="center">&copy; 2023-{new Date().getFullYear()}</Text>
+
+          <HStack mt={2} spacing={2} justify="space-evenly">
+            <ColorfulExternalLink url="https://github.com/Tschonti/pontozo" hoverColor="brand.500">
+              <FaGithub size={25} />
+            </ColorfulExternalLink>
+            <ColorfulExternalLink url="https://github.com/Tschonti" hoverColor="brand.500">
+              <FaGlobe size={25} />
+            </ColorfulExternalLink>
+            <ColorfulExternalLink url="mailto:feketesamu@gmail.com" hoverColor="brand.500">
+              <FaEnvelope size={25} />
+            </ColorfulExternalLink>
+            <ColorfulExternalLink url="https://www.linkedin.com/in/samuel-fekete/" hoverColor="brand.500">
+              <FaLinkedin size={25} />
+            </ColorfulExternalLink>
+          </HStack>
+        </VStack>
       </Container>
     </Box>
   )

packages/client/src/components/commons/ColorfulHashLink.tsx

@@ -0,0 +1,21 @@
+import { ReactNode, useState } from 'react'
+import { HashLink } from 'react-router-hash-link'
+
+type Props = {
+  to: string
+  children: ReactNode
+}
+
+export const ColorfulHashLink = ({ children, to }: Props) => {
+  const [hovered, setHovered] = useState(false)
+  return (
+    <HashLink
+      to={to}
+      style={{ color: '#0a723a', textDecoration: hovered ? 'underline' : 'none' }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      {children}
+    </HashLink>
+  )
+}

packages/client/src/pages/faq/FAQ.page.tsx

@@ -4,18 +4,30 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
   Box,
   Button,
   Heading,
   HStack,
   Image,
   Link,
   Text,
+  useDisclosure,
+  useToast,
   VStack,
 } from '@chakra-ui/react'
+import { useRef } from 'react'
 import { Helmet } from 'react-helmet'
-import { FaEnvelope, FaGithub, FaLinkedin } from 'react-icons/fa'
+import { FaEnvelope, FaExclamationTriangle, FaGithub, FaLinkedin } from 'react-icons/fa'
+import { useAuthContext } from 'src/api/contexts/useAuthContext'
+import { usePurgeUserMutation } from 'src/api/hooks/authHooks'
 import { ColorfulExternalLink } from 'src/components/commons/ColorfulExternalLink'
+import { PATHS } from 'src/util/paths'
 
 const faqItems: { title: string; paragraphs: string[] }[] = [
   {
@@ -47,23 +59,53 @@ const faqItems: { title: string; paragraphs: string[] }[] = [
     Amennyiben senki sem értékelte a versenyt, nem fog megjelenni a listában.`,
     ],
   },
+  {
+    title: 'Meg mernék esküdni, hogy az egyik verseny pontszáma korábban még más volt. Hogy lehetséges ez?',
+    paragraphs: [
+      `Habár próbáljuk elkerülni, időnként (főleg a kezdeti időszakban) előfordulhat, hogy szezon közben változtatunk a szempontok súlyain,
+      majd újraszámoljuk a versenyek eredményeit. Egy verseny eredmény oldalán mindig látod, hogy mikor lett kiszámolva a jelenlegi ponszám.
+      Azt azonban garantáljuk, hogy azonos szezonban lévő versenyek mindigy ugyanazon szempontok és súlyok alapján lettek kiértékelve.`,
+    ],
+  },
   {
     title: 'Valóban anonim az értékelésem?',
     paragraphs: [
       `A rendszer felhasználókhoz kapcsol minden értékelést, ez elengedhetetlen ahhoz, hogy később szerkeszd vagy megtekintsd a saját értékelésed.
       Az értékelések publikus eredményei azonban csak az összesített értékeléseket tartalmazzák, azok soha nem vezethetőek vissza egy adott személyre.
       Az adatbázisban tárolt, felhasználókhoz köthető értékelési adatokat harmadik féllel (például versenyrendezői csapattal) soha nem osztjuk meg.
-      Ez igaz a szempontokra leadott és a szöveges értékelésekre is. Fenntartjuk a jogát, hogy amennyiben egy szöveges értékelést nem tartunk konstruktívank, töröljük azt.`,
+      Ez igaz a szempontokra leadott és a szöveges értékelésekre is. Fenntartjuk a jogát, hogy amennyiben egy szöveges értékelést nem tartunk konstruktívnak, töröljük azt.`,
     ],
   },
 ]
 
 export const FAQPage = () => {
+  const { isLoggedIn, onLogout } = useAuthContext()
+  const { isLoading, mutateAsync } = usePurgeUserMutation()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const cancelRef = useRef(null)
+  const toast = useToast()
+
+  const onPurge = async () => {
+    try {
+      await mutateAsync()
+      toast({ title: 'Az adataidat sikeresen töröltük.', status: 'success' })
+      onClose()
+      onLogout(PATHS.FAQ)
+    } catch (e) {
+      console.error(e)
+      toast({ title: 'A fiókod törlése nem sikerült', status: 'error' })
+    }
+  }
   return (
     <VStack gap={4} alignItems="flex-start">
       <Helmet title="Pontoz-O | GYIK" />
       <Heading>Gyakran Ismételt Kérdések</Heading>
-      <Accordion w="100%" bg="white" defaultIndex={[...faqItems.map((_, i) => i), faqItems.length]} allowMultiple>
+      <Accordion
+        w="100%"
+        bg="white"
+        defaultIndex={[...faqItems.map((_, i) => i), faqItems.length, faqItems.length + 1, faqItems.length + 2]}
+        allowMultiple
+      >
         {faqItems.map((q) => (
           <AccordionItem key={q.title}>
             <h2>
@@ -97,7 +139,7 @@ export const FAQPage = () => {
           <AccordionPanel pb={4} justifyItems="center">
             <VStack justifyItems="center">
               <Image width={250} height={250} src="/img/samu.jpg" rounded="100%" />
-              <Heading fontSize={50} transform="auto" skewX={-10} style={{ fontVariant: 'small-caps' }}>
+              <Heading textAlign="center" fontSize={50} transform="auto" skewX={-10} style={{ fontVariant: 'small-caps' }}>
                 Fekete Sámuel
               </Heading>
               <HStack>
@@ -164,6 +206,108 @@ export const FAQPage = () => {
             </VStack>
           </AccordionPanel>
         </AccordionItem>
+        <AccordionItem>
+          <h2 id="privacy-notice">
+            <AccordionButton>
+              <Box fontWeight="bold" as="span" flex="1" textAlign="left">
+                Hogyan kezeli az alkalmazás az adataimat?
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </h2>
+          <AccordionPanel pb={4} justifyItems="center">
+            <VStack alignItems="flex-start">
+              <Text textAlign="justify">
+                A rendszer elsődleges adatforrása az MTFSZ adatbázisa. Bejelentkezéskor innen kérjük le a felhasználó adatait, azonban azok
+                közül kizárólag az e-mail címet, az MTFSZ személy azonosítót és a születési dátumot tároljuk. Az e-mail címet kizárólag
+                rendszerértesítések küldése érdekében tároljuk. Amennyiben semmiképpen nem szeretnél e-mailben értesítést kapni, a
+                profilodon található Értesítési beállítások menüben törölheted az e-mail címed.
+              </Text>
+
+              <Text textAlign="justify">
+                Az adatokat a Microsoft Azure Poland Central nevű régiójában (adatközpontjában) tároljuk, harmadik félnek soha nem adjuk ki.
+                Amennyiben szeretnéd az összes, hozzád kapcsolható adatot törölni a rendszerből, nyomd meg az alábbi gombot. Ezzel az e-mail
+                címed és az általad leadott értékelések törlésre kerülnek, valamint ki leszel jelentkeztetve. Ha újra bejelentkezel, ismét
+                használhatod az alkalmazást, azonban a korábban törölt értékeléseid nem visszaállíthatóak. Az általad értékelt versenyek
+                értékelési eredményeit nem befolyásolja az értékeléseid törlése, hiszen azok az értékelés lezárultakor számolódnak ki és nem
+                tartalmaznak személyre visszavezethető adatot. Ha viszont a későbbiekben egy verseny pontszáma valamilyen okból
+                újraszámolódik, akkor már a te értékelésed nélkül fog ez megtörténni.
+              </Text>
+              <Button
+                alignSelf="center"
+                onClick={onOpen}
+                isDisabled={!isLoggedIn}
+                color="white"
+                bg="black"
+                _hover={{ bg: 'gray.700' }}
+                leftIcon={<FaExclamationTriangle />}
+                aria-label="Fiókom és adataim törlése"
+              >
+                Fiókom és adataim törlése
+              </Button>
+              <AlertDialog isOpen={isOpen} leastDestructiveRef={cancelRef} onClose={onClose}>
+                <AlertDialogOverlay>
+                  <AlertDialogContent>
+                    <AlertDialogHeader fontSize="lg" fontWeight="bold">
+                      Fiókom és adataim törlése
+                    </AlertDialogHeader>
+
+                    <AlertDialogBody textAlign="justify">
+                      Biztos vagy benne? Ezzel az e-mail címed és az általad leadott értékelések törlésre kerülnek, valamint ki leszel
+                      jelentkeztetve. Ha újra bejelentkezel, ismét használhatod az alkalmazást, azonban a korábban törölt értékeléseid nem
+                      visszaállíthatóak. Az általad értékelt versenyek értékelési eredményeit nem befolyásolja az értékeléseid törlése,
+                      hiszen azok az értékelés lezárultakor számolódnak ki és nem tartalmaznak személyre visszavezethető adatot. Ha viszont
+                      a későbbiekben egy verseny pontszáma valamilyen okból újraszámolódik, akkor már a te értékelésed nélkül fog ez
+                      megtörténni.
+                    </AlertDialogBody>
+
+                    <AlertDialogFooter>
+                      <Button ref={cancelRef} onClick={onClose}>
+                        Mégse
+                      </Button>
+                      <Button
+                        colorScheme="red"
+                        onClick={onPurge}
+                        ml={3}
+                        color="white"
+                        bg="black"
+                        isLoading={isLoading}
+                        _hover={{ bg: 'gray.700' }}
+                        leftIcon={<FaExclamationTriangle />}
+                      >
+                        Törlés
+                      </Button>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialogOverlay>
+              </AlertDialog>
+            </VStack>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <h2 id="cookie-notice">
+            <AccordionButton>
+              <Box fontWeight="bold" as="span" flex="1" textAlign="left">
+                Használ sütiket az alkalmazás?
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </h2>
+          <AccordionPanel pb={4} justifyItems="center">
+            <VStack alignItems="flex-start">
+              <Text textAlign="justify">
+                Az alkalmazás elsősorban a működéshez elegendhetetlen sütiket használ. Sütiben tároljuk a téged azonosító tokent, mely
+                kijelentkezéskor vagy 7 nap után törlődik a böngésződből.
+              </Text>
+
+              <Text textAlign="justify">
+                Ezen kívül az oldal forgalmát a Microsoft Azure Application Insights rendszere méri, mely szintén használ sütiket a
+                felhasználók azonosításához. Időnként az IP-cím is küldésre kerül, azonban ezt soha nem tárolja, csak az egyes kérésekhez ez
+                alapján tud geolokációs információt (ország, régió, város) rendelni.
+              </Text>
+            </VStack>
+          </AccordionPanel>
+        </AccordionItem>
       </Accordion>
     </VStack>
   )