Policy Privacy PopUpMessage
This commit is contained in:
parent
fed6c15921
commit
fb7acca7ef
11
src/App.js
11
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 />} />
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import {Container, FlexColumn, FlexRow, Svg} from '../utils/containers';
|
||||
import {useParams} from 'react-router-dom';
|
||||
import {H1, H2, Medium} from '../utils/fonts';
|
||||
import { Container, FlexColumn, FlexRow, Svg } from '../utils/containers';
|
||||
import { useParams } from 'react-router-dom';
|
||||
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}
|
||||
description={challenge.description} deadline={challenge.deadline}/>;
|
||||
return (
|
||||
<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}
|
||||
setLoading={setLoading}/>;
|
||||
return <Submit challengeName={challengeName} 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'>
|
||||
<Loading visible={loading}/>
|
||||
<H1 as='h1' margin='0 0 8px 0' textAlign='center'>
|
||||
<FlexColumn
|
||||
minHeight="100vh"
|
||||
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}/>
|
||||
<Container width='75%' height='1px' backgroundColor={theme.colors.dark}/>
|
||||
<MobileChallengeMenu setSection={setSection} section={section} />
|
||||
<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}/>
|
||||
<FlexColumn minHeight='100vh' alignmentY='flex-start' padding='64px 24px 64px 310px' id='start'>
|
||||
<FlexRow gap='32px' margin='0 0 32px 0' padding='16px'>
|
||||
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='500px'>
|
||||
<H1 as='h1'>
|
||||
{challenge.title}
|
||||
</H1>
|
||||
<Medium as='p'>
|
||||
{challenge.description}
|
||||
</Medium>
|
||||
<DesktopChallengeMenu setSection={setSection} section={section} />
|
||||
<FlexColumn
|
||||
minHeight="100vh"
|
||||
alignmentY="flex-start"
|
||||
padding="64px 24px 64px 310px"
|
||||
id="start"
|
||||
>
|
||||
<FlexRow gap="32px" margin="0 0 32px 0" padding="16px">
|
||||
<FlexColumn alignmentX="flex-start" gap="24px" maxWidth="500px">
|
||||
<H1 as="h1">{challenge.title}</H1>
|
||||
<Medium as="p">{challenge.description}</Medium>
|
||||
</FlexColumn>
|
||||
<Svg src={challenge.type ? RENDER_ICO(challenge.type) : textIco}
|
||||
width='120px' height='120px' size='contain'/>
|
||||
<Svg
|
||||
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'>
|
||||
<H2 as='h1'>
|
||||
Submission processing...
|
||||
</H2>
|
||||
<Loading/>
|
||||
<FlexColumn
|
||||
position="fixed"
|
||||
top="0"
|
||||
left="0"
|
||||
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}>
|
||||
{mobileRender()}
|
||||
</Media>
|
||||
<Media query={theme.desktop}>
|
||||
{desktopRender()}
|
||||
</Media>
|
||||
<Media query={theme.mobile}>{mobileRender()}</Media>
|
||||
<Media query={theme.desktop}>{desktopRender()}</Media>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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');
|
||||
KeyCloakService.doLogin();
|
||||
props.popUpMessageHandler(
|
||||
'Reminder',
|
||||
'Remember to check your spam mailbox to confirm your account.',
|
||||
() => doRegister
|
||||
);
|
||||
}}
|
||||
width="72px"
|
||||
height="32px"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user