Policy Privacy PopUpMessage

src/App.js

@@ -47,7 +47,7 @@ const App = () => {
   const popUpMessageHandler = (header, message, confirmHandler) => {
     setPopUpHeader(header);
     setPopUpMessage(message);
-    if (confirmHandler !== null) {
+    if (confirmHandler !== null && confirmHandler !== undefined) {
       setConfirmPopUpHandler(() => confirmHandler());
     } else {
       setConfirmPopUpHandler(null);
@@ -104,10 +104,15 @@ const App = () => {
           <Routes>
             <Route
               path={`${CHALLENGE_PAGE}/:challengeId`}
-              element={<Challenge popUpMessageHandler={popUpMessageHandler} />}
+              element={<Challenge />}
             />
             <Route path={CHALLENGES_PAGE} element={<Challenges />} />
-            <Route path={POLICY_PRIVACY_PAGE} element={<PolicyPrivacy />} />
+            <Route
+              path={POLICY_PRIVACY_PAGE}
+              element={
+                <PolicyPrivacy popUpMessageHandler={popUpMessageHandler} />
+              }
+            />
             {KeyCloakService.isLoggedIn() ? (
               <>
                 <Route exact path="/" element={<Challenges />} />

src/pages/Challenge.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import {Container, FlexColumn, FlexRow, Svg} from '../utils/containers';
+import { Container, FlexColumn, FlexRow, Svg } from '../utils/containers';
-import {useParams} from 'react-router-dom';
+import { useParams } from 'react-router-dom';
-import {H1, H2, Medium} from '../utils/fonts';
+import { H1, H2, Medium } from '../utils/fonts';
 import theme from '../utils/theme';
 import MobileChallengeMenu from '../components/specific_challenge/MobileChallengeMenu';
 import Leaderboard from '../components/specific_challenge/Leaderboard/Leaderboard';
@@ -11,13 +11,13 @@ import MyEntries from '../components/specific_challenge/MyEntries/MyEntries';
 import Submit from '../components/specific_challenge/Submit';
 import Media from 'react-media';
 import DesktopChallengeMenu from '../components/specific_challenge/DesktopChallengeMenu';
-import {RENDER_ICO} from '../utils/globals';
+import { RENDER_ICO } from '../utils/globals';
 import textIco from '../assets/text_ico.svg';
 import getChallengeInfo from '../api/getChallengeInfo';
 import Loading from '../components/generic/Loading';
 import getUser from '../api/getUser';
 
-const Challenge = (props) => {
+const Challenge = () => {
   const challengeName = useParams().challengeId;
   const [challenge, setChallenge] = React.useState([]);
   const [section, setSection] = React.useState(0);
@@ -32,31 +32,56 @@ const Challenge = (props) => {
   const sectionRender = () => {
     switch (section) {
       case 0:
-                return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric} user={user}/>;
+        return (
+          <Leaderboard
+            challengeName={challengeName}
+            mainMetric={challenge.mainMetric}
+            user={user}
+          />
+        );
       case 1:
-                return <Readme challengeName={challengeName} metric={challenge.mainMetric}
+        return (
-                               description={challenge.description} deadline={challenge.deadline}/>;
+          <Readme
+            challengeName={challengeName}
+            metric={challenge.mainMetric}
+            description={challenge.description}
+            deadline={challenge.deadline}
+          />
+        );
       case 2:
-                return <HowTo challengeName={challengeName} user={user}/>;
+        return <HowTo challengeName={challengeName} user={user} />;
       case 3:
-                return <MyEntries challengeName={challengeName}/>;
+        return <MyEntries challengeName={challengeName} />;
       case 4:
-                return <Submit popUpMessageHandler={props.popUpMessageHandler} challengeName={challengeName}
+        return <Submit challengeName={challengeName} setLoading={setLoading} />;
-                               setLoading={setLoading}/>;
       default:
-                return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric}/>;
+        return (
+          <Leaderboard
+            challengeName={challengeName}
+            mainMetric={challenge.mainMetric}
+          />
+        );
     }
   };
 
   const mobileRender = () => {
     return (
-            <FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'>
+      <FlexColumn
-                <Loading visible={loading}/>
+        minHeight="100vh"
-                <H1 as='h1' margin='0 0 8px 0' textAlign='center'>
+        gap="12px"
+        alignmentY="flex-start"
+        padding="66px 0 0 0"
+      >
+        <Loading visible={loading} />
+        <H1 as="h1" margin="0 0 8px 0" textAlign="center">
           {challenge.title}
         </H1>
-                <MobileChallengeMenu setSection={setSection} section={section}/>
+        <MobileChallengeMenu setSection={setSection} section={section} />
-                <Container width='75%' height='1px' backgroundColor={theme.colors.dark}/>
+        <Container
+          width="75%"
+          height="1px"
+          backgroundColor={theme.colors.dark}
+        />
         {sectionRender()}
       </FlexColumn>
     );
@@ -66,32 +91,46 @@ const Challenge = (props) => {
     if (!loading) {
       return (
         <>
-                    <DesktopChallengeMenu setSection={setSection} section={section}/>
+          <DesktopChallengeMenu setSection={setSection} section={section} />
-                    <FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 24px 64px 310px' id='start'>
+          <FlexColumn
-                        <FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
+            minHeight="100vh"
-                            <FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>
+            alignmentY="flex-start"
-                                <H1 as='h1'>
+            padding="64px 24px 64px 310px"
-                                    {challenge.title}
+            id="start"
-                                </H1>
+          >
-                                <Medium as='p'>
+            <FlexRow gap="32px" margin="0 0 32px 0" padding="16px">
-                                    {challenge.description}
+              <FlexColumn alignmentX="flex-start" gap="24px" maxWidth="500px">
-                                </Medium>
+                <H1 as="h1">{challenge.title}</H1>
+                <Medium as="p">{challenge.description}</Medium>
               </FlexColumn>
-                            <Svg src={challenge.type ? RENDER_ICO(challenge.type) : textIco}
+              <Svg
-                                 width='120px' height='120px' size='contain'/>
+                src={challenge.type ? RENDER_ICO(challenge.type) : textIco}
+                width="120px"
+                height="120px"
+                size="contain"
+              />
             </FlexRow>
-                        <Container width='55%' height='1px' backgroundColor={theme.colors.dark}/>
+            <Container
+              width="55%"
+              height="1px"
+              backgroundColor={theme.colors.dark}
+            />
             {sectionRender()}
           </FlexColumn>
         </>
       );
     } else {
       return (
-                <FlexColumn position='fixed' top='0' left='0' width='100%' height='100vh' zIndex='10'>
+        <FlexColumn
-                    <H2 as='h1'>
+          position="fixed"
-                        Submission processing...
+          top="0"
-                    </H2>
+          left="0"
-                    <Loading/>
+          width="100%"
+          height="100vh"
+          zIndex="10"
+        >
+          <H2 as="h1">Submission processing...</H2>
+          <Loading />
         </FlexColumn>
       );
     }
@@ -99,12 +138,8 @@ const Challenge = (props) => {
 
   return (
     <>
-            <Media query={theme.mobile}>
+      <Media query={theme.mobile}>{mobileRender()}</Media>
-                {mobileRender()}
+      <Media query={theme.desktop}>{desktopRender()}</Media>
-            </Media>
-            <Media query={theme.desktop}>
-                {desktopRender()}
-            </Media>
     </>
   );
 };

src/pages/PolicyPrivacy.js

@@ -39,7 +39,15 @@ const PolicyPrivacyStyle = styled(FlexColumn)`
   }
 `;
 
-const PolicyPrivacy = () => {
+const PolicyPrivacy = (props) => {
+  React.useEffect(() => {
+    props.popUpMessageHandler(
+      'Policy privacy',
+      'Please read the service policy below and accept its terms and conditions to create an account using the button at the bottom of the page.'
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const listItemsContent = [
     'The right of access to personal data, including the right to obtain a copy of that data, is granted under the grounds and conditions set out in Article 15 of the RODO,',
     'The right to request the rectification (amendment) of personal data shall be exercised within the grounds and under the conditions set out in Article 16 RODO,',
@@ -50,13 +58,21 @@ const PolicyPrivacy = () => {
     'The right to lodge a complaint with the supervisory authority (President of the Office for Personal Data Protection),',
   ];
 
+  const doRegister = () => {
+    localStorage.setItem('privacyPolicy', 'accept');
+    KeyCloakService.doRegister();
+  };
+
   const renderButtons = () => {
     return (
       <FlexRow margin="32px 0 0 0" gap="48px" width="90%">
         <Button
           handler={() => {
-            localStorage.setItem('privacyPolicy', 'accept');
+            props.popUpMessageHandler(
-            KeyCloakService.doLogin();
+              'Reminder',
+              'Remember to check your spam mailbox to confirm your account.',
+              () => doRegister
+            );
           }}
           width="72px"
           height="32px"