s444498/gonito-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Policy Privacy PopUpMessage

Browse Source
This commit is contained in:
Mateusz Tylka 2023-02-07 15:18:56 +01:00
parent fed6c15921
commit fb7acca7ef
3 changed files with 150 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.js
View File

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

211
src/pages/Challenge.js
View File

@ -1,7 +1,7 @@
import React from 'react'; 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 theme from '../utils/theme';
import MobileChallengeMenu from '../components/specific_challenge/MobileChallengeMenu'; import MobileChallengeMenu from '../components/specific_challenge/MobileChallengeMenu';
import Leaderboard from '../components/specific_challenge/Leaderboard/Leaderboard'; import Leaderboard from '../components/specific_challenge/Leaderboard/Leaderboard';
@ -11,102 +11,137 @@ import MyEntries from '../components/specific_challenge/MyEntries/MyEntries';
import Submit from '../components/specific_challenge/Submit'; import Submit from '../components/specific_challenge/Submit';
import Media from 'react-media'; import Media from 'react-media';
import DesktopChallengeMenu from '../components/specific_challenge/DesktopChallengeMenu'; 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 textIco from '../assets/text_ico.svg';
import getChallengeInfo from '../api/getChallengeInfo'; import getChallengeInfo from '../api/getChallengeInfo';
import Loading from '../components/generic/Loading'; import Loading from '../components/generic/Loading';
import getUser from '../api/getUser'; import getUser from '../api/getUser';
const Challenge = (props) => { const Challenge = () => {
const challengeName = useParams().challengeId; const challengeName = useParams().challengeId;
const [challenge, setChallenge] = React.useState([]); const [challenge, setChallenge] = React.useState([]);
const [section, setSection] = React.useState(0); const [section, setSection] = React.useState(0);
const [loading, setLoading] = React.useState(true); const [loading, setLoading] = React.useState(true);
const [user, setUser] = React.useState(''); const [user, setUser] = React.useState('');
React.useEffect(() => { React.useEffect(() => {
getChallengeInfo(setChallenge, setLoading, challengeName); getChallengeInfo(setChallenge, setLoading, challengeName);
getUser(setUser); getUser(setUser);
}, [challengeName]); }, [challengeName]);
const sectionRender = () => { const sectionRender = () => {
switch (section) { switch (section) {
case 0: case 0:
return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric} user={user}/>;
case 1:
return <Readme challengeName={challengeName} metric={challenge.mainMetric}
description={challenge.description} deadline={challenge.deadline}/>;
case 2:
return <HowTo challengeName={challengeName} user={user}/>;
case 3:
return <MyEntries challengeName={challengeName}/>;
case 4:
return <Submit popUpMessageHandler={props.popUpMessageHandler} challengeName={challengeName}
setLoading={setLoading}/>;
default:
return <Leaderboard challengeName={challengeName} mainMetric={challenge.mainMetric}/>;
}
};
const mobileRender = () => {
return ( return (
<FlexColumn minHeight='100vh' gap='12px' alignmentY='flex-start' padding='66px 0 0 0'> <Leaderboard
<Loading visible={loading}/> challengeName={challengeName}
<H1 as='h1' margin='0 0 8px 0' textAlign='center'> mainMetric={challenge.mainMetric}
{challenge.title} user={user}
</H1> />
<MobileChallengeMenu setSection={setSection} section={section}/>
<Container width='75%' height='1px' backgroundColor={theme.colors.dark}/>
{sectionRender()}
</FlexColumn>
); );
}; case 1:
return (
const desktopRender = () => { <Readme
if (!loading) { challengeName={challengeName}
return ( metric={challenge.mainMetric}
<> description={challenge.description}
<DesktopChallengeMenu setSection={setSection} section={section}/> deadline={challenge.deadline}
<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'> case 2:
<H1 as='h1'> return <HowTo challengeName={challengeName} user={user} />;
{challenge.title} case 3:
</H1> return <MyEntries challengeName={challengeName} />;
<Medium as='p'> case 4:
{challenge.description} return <Submit challengeName={challengeName} setLoading={setLoading} />;
</Medium> default:
</FlexColumn> return (
<Svg src={challenge.type ? RENDER_ICO(challenge.type) : textIco} <Leaderboard
width='120px' height='120px' size='contain'/> challengeName={challengeName}
</FlexRow> mainMetric={challenge.mainMetric}
<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>
);
}
};
const mobileRender = () => {
return ( return (
<> <FlexColumn
<Media query={theme.mobile}> minHeight="100vh"
{mobileRender()} gap="12px"
</Media> alignmentY="flex-start"
<Media query={theme.desktop}> padding="66px 0 0 0"
{desktopRender()} >
</Media> <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}
/>
{sectionRender()}
</FlexColumn>
); );
};
const desktopRender = () => {
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>
</FlexColumn>
<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}
/>
{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>
);
}
};
return (
<>
<Media query={theme.mobile}>{mobileRender()}</Media>
<Media query={theme.desktop}>{desktopRender()}</Media>
</>
);
}; };
export default Challenge; export default Challenge;

22
src/pages/PolicyPrivacy.js
View File

@ -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 = [ 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 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,', '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),', '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 = () => { const renderButtons = () => {
return ( return (
<FlexRow margin="32px 0 0 0" gap="48px" width="90%"> <FlexRow margin="32px 0 0 0" gap="48px" width="90%">
<Button <Button
handler={() => { handler={() => {
localStorage.setItem('privacyPolicy', 'accept'); props.popUpMessageHandler(
KeyCloakService.doLogin(); 'Reminder',
'Remember to check your spam mailbox to confirm your account.',
() => doRegister
);
}} }}
width="72px" width="72px"
height="32px" height="32px"