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

PopUpMessage reminder for register

Browse Source
This commit is contained in:
Mateusz Tylka 2023-02-07 14:28:30 +01:00
parent d77506e520
commit fed6c15921
10 changed files with 170 additions and 284 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.js
View File

@ -25,6 +25,8 @@ const App = () => {
const [loggedBarHover, setLoggedBarHover] = React.useState(false); const [loggedBarHover, setLoggedBarHover] = React.useState(false);
const [popUpHeader, setPopUpHeader] = React.useState(''); const [popUpHeader, setPopUpHeader] = React.useState('');
const [popUpMessage, setPopUpMessage] = React.useState(''); const [popUpMessage, setPopUpMessage] = React.useState('');
const [confirmPopUpHandler, setConfirmPopUpHandler] = React.useState(null);
React.useEffect(() => { React.useEffect(() => {
if (sessionStorage.getItem('logged') !== 'yes') { if (sessionStorage.getItem('logged') !== 'yes') {
if (KeyCloakService.isLoggedIn()) { if (KeyCloakService.isLoggedIn()) {
@ -42,9 +44,14 @@ const App = () => {
}, 1500); }, 1500);
}); });
const popUpMessageHandler = (header, message) => { const popUpMessageHandler = (header, message, confirmHandler) => {
setPopUpHeader(header); setPopUpHeader(header);
setPopUpMessage(message); setPopUpMessage(message);
if (confirmHandler !== null) {
setConfirmPopUpHandler(() => confirmHandler());
} else {
setConfirmPopUpHandler(null);
}
}; };
const popUpMessageRender = () => { const popUpMessageRender = () => {
@ -53,6 +60,7 @@ const App = () => {
<PopupMessage <PopupMessage
header={popUpHeader} header={popUpHeader}
message={popUpMessage} message={popUpMessage}
confirmHandler={confirmPopUpHandler}
popUpMessageHandler={popUpMessageHandler} popUpMessageHandler={popUpMessageHandler}
/> />
); );
@ -78,7 +86,10 @@ const App = () => {
<BrowserRouter> <BrowserRouter>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
{popUpMessageRender()} {popUpMessageRender()}
<NavBar loggedBarVisibleHandler={loggedBarVisibleHandler} /> <NavBar
loggedBarVisibleHandler={loggedBarVisibleHandler}
popUpMessageHandler={popUpMessageHandler}
/>
{!IS_MOBILE() ? ( {!IS_MOBILE() ? (
<LoggedBar <LoggedBar
visible={loggedBarVisible} visible={loggedBarVisible}
@ -104,8 +115,18 @@ const App = () => {
</> </>
) : ( ) : (
<> <>
<Route exact path="/" element={<LandingPage />} /> <Route
<Route element={<LandingPage />} /> exact
path="/"
element={
<LandingPage popUpMessageHandler={popUpMessageHandler} />
}
/>
<Route
element={
<LandingPage popUpMessageHandler={popUpMessageHandler} />
}
/>
</> </>
)} )}
</Routes> </Routes>

79
src/components/auth/AuthHeader.js
View File

@ -1,79 +0,0 @@
import React from 'react';
import {FlexRow} from '../../utils/containers';
import styled from 'styled-components';
import {H3} from '../../utils/fonts';
import {Link} from 'react-router-dom';
import PropsTypes from 'prop-types';
const AuthHeaderStyle = styled(FlexRow)`
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: ${({theme}) => theme.colors.dark03};
width: 260px;
height: 48px;
justify-content: flex-start;
gap: 24px;
padding: 0 20px;
box-shadow: ${({theme}) => theme.authHeaderShadow};
@media (min-width: ${({theme}) => theme.overMobile}) {
justify-content: space-around;
width: 400px;
height: 80px;
}
h1 {
color: ${({theme}) => theme.colors.green};
}
a {
font-family: 'Kanit', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 22px;
color: ${({theme}) => theme.colors.dark};
text-decoration: none;
transition: color 0.3s ease-in-out;
&:hover {
color: ${({theme}) => theme.colors.green};
}
@media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 24px;
line-height: 26px;
}
}
`;
const AuthHeader = (props) => {
if (props.register) {
return (
<AuthHeaderStyle>
<H3 as='h1' order='2'>
Register
</H3>
<Link to='/login'>
Sign in
</Link>
</AuthHeaderStyle>
);
} else {
return (
<AuthHeaderStyle>
<H3 as='h1'>
Sign in
</H3>
<Link to='/register'>
Register
</Link>
</AuthHeaderStyle>
);
}
};
AuthHeader.propTypes = {
register: PropsTypes.bool.isRequired,
};
export default AuthHeader;

47
src/components/auth/AuthInput.js
View File

@ -1,47 +0,0 @@
import React from 'react';
import {FlexColumn, FlexRow} from '../../utils/containers';
import styled from 'styled-components';
import {Medium} from '../../utils/fonts';
const AuthInputStyle = styled(Medium)`
width: 188px;
height: 36px;
padding: 4px;
border: 1px solid ${({theme}) => theme.colors.dark05};
@media (min-width: ${({theme}) => theme.overMobile}) {
width: 310px;
height: 52px;
padding: 8px;
}
`;
const AuthLabel = styled(FlexRow)`
position: absolute;
top: -10px;
left: 14px;
background-color: ${({theme}) => theme.colors.white};
font-size: 10px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
padding: 4px;
z-index: 2;
@media (min-width: ${({theme}) => theme.overMobile}) {
font-size: 16px;
top: -14px;
}
`;
const AuthInput = (props) => {
return (
<FlexColumn position='relative'>
<AuthLabel as='label' htmlFor={props.label}>
{props.label}
</AuthLabel>
<AuthInputStyle as='input' id={props.label} name={props.label}/>
</FlexColumn>
);
};
export default AuthInput;

58
src/components/auth/AuthOption.js
View File

@ -1,58 +0,0 @@
import React from 'react';
import {FlexRow, Svg} from '../../utils/containers';
import theme from '../../utils/theme';
import PropsTypes from 'prop-types';
import {Body} from '../../utils/fonts';
import styled from 'styled-components';
import {Link} from 'react-router-dom';
const AuthOptionStyle = styled(FlexRow)`
gap: 16px;
padding: 10px 12px;
min-width: 180px;
justify-content: flex-start;
border: 1px solid ${({theme}) => theme.colors.dark03};
box-shadow: ${({theme}) => theme.shadow};
cursor: pointer;
transition: transform 0.3s ease-in-out;
* {
cursor: pointer;
}
&:hover {
transform: scale(1.05);
}
@media (min-width: ${({theme}) => theme.overMobile}) {
width: 260px;
height: 50px;
padding: 10px 24px;
gap: 40px;
}
`;
const AuthOption = (props) => {
return (
<AuthOptionStyle as={Link} to={props.to}>
<Svg width='20px' height='20px' src={props.icon} backgroundColor={theme.colors.dark}/>
<Body>
{props.children}
</Body>
</AuthOptionStyle>
);
};
AuthOption.propTypes = {
children: PropsTypes.node,
icon: PropsTypes.string,
to: PropsTypes.string,
};
AuthOption.defaultProps = {
children: '',
icon: '',
to: '#'
};
export default AuthOption;

131
src/components/content_sections/Hero.js
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import {Body, H1, Medium} from '../../utils/fonts'; import { Body, H1, Medium } from '../../utils/fonts';
import {Container, FlexColumn, FlexRow, Svg} from '../../utils/containers'; import { Container, FlexColumn, FlexRow, Svg } from '../../utils/containers';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import ButtonLink from '../generic/ButtonLink'; import ButtonLink from '../generic/ButtonLink';
import Media from 'react-media'; import Media from 'react-media';
@ -13,62 +13,81 @@ const TitleParagraph = styled(Medium)`
line-height: 28px; line-height: 28px;
`; `;
const mobileRender = () => { const Hero = (props) => {
const mobileRender = () => {
return ( return (
<FlexColumn alignmentX='flex-start' gap='24px' maxWidth='452px'> <FlexColumn alignmentX="flex-start" gap="24px" maxWidth="452px">
<H1 as="h1"> <H1 as="h1">
Welcome to Welcome to
<Container display="inline" color={theme.colors.green}> <Container display="inline" color={theme.colors.green}>
&nbsp;Gonito! &nbsp;Gonito!
</Container> </Container>
</H1> </H1>
<Body as="p"> <Body as="p">
A data challenge platform for machine learning research, A data challenge platform for machine learning research, competition,
competition, cooperation and reproducibility. cooperation and reproducibility.
</Body> </Body>
<ButtonLink as='button' onClick={KeyCloakService.doRegister}> <ButtonLink
Join us! as="button"
onClick={() =>
props.popUpMessageHandler(
'Reminder',
'Remember to check your spam mailbox to confirm your account.',
() => KeyCloakService.doRegister
)
}
>
Join us!
</ButtonLink>
</FlexColumn>
);
};
const desktopRender = () => {
return (
<FlexColumn alignmentX="flex-start" gap="24px">
<H1 as="h1">
Welcome to
<Container display="inline" color={theme.colors.green}>
&nbsp;Gonito!
</Container>
</H1>
<FlexRow gap="20px">
<Container>
<TitleParagraph as="p" maxWidth="286px" margin="0 0 20px 0">
A data challenge platform for machine learning research,
competition, cooperation and reproducibility.
</TitleParagraph>
<ButtonLink
as="button"
onClick={() =>
props.popUpMessageHandler(
'Reminder',
'Remember to check your spam mailbox to confirm your account.',
() => KeyCloakService.doRegister
)
}
>
Join us!
</ButtonLink> </ButtonLink>
</FlexColumn> </Container>
<Svg
src={codepenIco}
width="180px"
height="150px"
size="contain"
backgroundColor={theme.colors.green}
/>
</FlexRow>
</FlexColumn>
); );
};
return (
<>
<Media query={theme.mobile}>{mobileRender()}</Media>
<Media query={theme.desktop}>{desktopRender()}</Media>
</>
);
}; };
const desktopRender = () => { export default Hero;
return (
<FlexColumn alignmentX='flex-start' gap='24px'>
<H1 as="h1">
Welcome to
<Container display="inline" color={theme.colors.green}>
&nbsp;Gonito!
</Container>
</H1>
<FlexRow gap='20px'>
<Container>
<TitleParagraph as="p" maxWidth='286px' margin='0 0 20px 0'>
A data challenge platform for machine learning research,
competition, cooperation and reproducibility.
</TitleParagraph>
<ButtonLink as='button' onClick={KeyCloakService.doRegister}>
Join us!
</ButtonLink>
</Container>
<Svg src={codepenIco} width='180px' height='150px' size='contain' backgroundColor={theme.colors.green}/>
</FlexRow>
</FlexColumn>
);
};
const Hero = () => {
return (
<>
<Media query={theme.mobile}>
{mobileRender()}
</Media>
<Media query={theme.desktop}>
{desktopRender()}
</Media>
</>
);
};
export default Hero;

2
src/components/generic/Button.js
View File

@ -30,7 +30,7 @@ const Button = (props) => {
return ( return (
<ButtonStyle <ButtonStyle
as={props.as ? props.as : 'button'} as={props.as ? props.as : 'button'}
onClick={props.handler} onClick={() => props.handler()}
width={props.width} width={props.width}
height={props.height} height={props.height}
color={props.color} color={props.color}

57
src/components/generic/PopupMessage.js
View File

@ -1,30 +1,43 @@
import React from 'react'; import React from 'react';
import {FlexColumn} from '../../utils/containers'; import { FlexColumn } from '../../utils/containers';
import theme from '../../utils/theme'; import theme from '../../utils/theme';
import {Body, H3} from '../../utils/fonts'; import { Body, H3 } from '../../utils/fonts';
import Button from './Button'; import Button from './Button';
const PopupMessage = (props) => { const PopupMessage = (props) => {
return ( const confirmPopUp = () => {
<FlexColumn position='fixed' top='0' left='0' zIndex='100' if (props.confirmHandler) {
width='100%' height='100vh' backgroundColor={theme.colors.dark01}> props.confirmHandler();
<FlexColumn alignmentY='space-between' width='40%' height='50%' borderRadius='12px' }
backgroundColor={theme.colors.white} padding='56px' border={`4px solid ${theme.colors.green}`}> props.popUpMessageHandler('', '');
<FlexColumn gap='48px'> };
<H3>
{props.header} return (
</H3> <FlexColumn
<Body> position="fixed"
{props.message} top="0"
</Body> left="0"
</FlexColumn> zIndex="100"
<Button handler={() => props.popUpMessageHandler('', '')}> width="100%"
Ok height="100vh"
</Button> backgroundColor={theme.colors.dark01}
</FlexColumn> >
<FlexColumn
alignmentY="space-between"
width="60%"
borderRadius="12px"
backgroundColor={theme.colors.white}
padding="56px"
border={`4px solid ${theme.colors.green}`}
>
<FlexColumn gap="48px" margin="0 0 48px 0">
<H3>{props.header}</H3>
<Body>{props.message}</Body>
</FlexColumn> </FlexColumn>
); <Button handler={confirmPopUp}>Ok</Button>
</FlexColumn>
</FlexColumn>
);
}; };
export default PopupMessage; export default PopupMessage;

12
src/components/navigation/MobileNavMenu.js
View File

@ -73,7 +73,17 @@ const MobileNavMenu = (props) => {
<Menu as="li">Privacy policy</Menu> <Menu as="li">Privacy policy</Menu>
</FlexRow> </FlexRow>
{!KeyCloakService.isLoggedIn() ? ( {!KeyCloakService.isLoggedIn() ? (
<FlexRow as="button" onClick={KeyCloakService.doRegister} gap="16px"> <FlexRow
as="button"
onClick={() =>
props.popUpMessageHandler(
'Reminder',
'Remember to check your spam mailbox to confirm your account.',
() => KeyCloakService.doRegister
)
}
gap="16px"
>
<Svg width="16px" height="16px" src={registerIco} /> <Svg width="16px" height="16px" src={registerIco} />
<Menu as="li">Register</Menu> <Menu as="li">Register</Menu>
</FlexRow> </FlexRow>

9
src/components/navigation/NavBar/NavBar.js
View File

@ -65,7 +65,13 @@ const NavBar = (props) => {
{!KeyCloakService.isLoggedIn() ? ( {!KeyCloakService.isLoggedIn() ? (
<FlexRow <FlexRow
as="button" as="button"
onClick={KeyCloakService.doRegister} onClick={() =>
props.popUpMessageHandler(
'Reminder',
'Remember to check your spam mailbox to confirm your account.',
() => KeyCloakService.doRegister
)
}
gap="16px" gap="16px"
> >
<Svg width="16px" height="16px" src={registerIco} /> <Svg width="16px" height="16px" src={registerIco} />
@ -96,6 +102,7 @@ const NavBar = (props) => {
mobileMenuHoverFalse={mobileMenuHoverFalse} mobileMenuHoverFalse={mobileMenuHoverFalse}
translateY={navMenuTranslateY} translateY={navMenuTranslateY}
toggleNavMenu={toggleNavMenu} toggleNavMenu={toggleNavMenu}
popUpMessageHandler={props.popUpMessageHandler}
/> />
</NavBarStyle> </NavBarStyle>
); );

30
src/pages/LandingPage.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import {FlexColumn} from '../utils/containers'; import { FlexColumn } from '../utils/containers';
import Motivation from '../components/content_sections/Motivation'; import Motivation from '../components/content_sections/Motivation';
import Csi from '../components/content_sections/Csi'; import Csi from '../components/content_sections/Csi';
import Commercial from '../components/content_sections/Commercial'; import Commercial from '../components/content_sections/Commercial';
@ -19,7 +19,7 @@ const LandingPageStyle = styled(FlexColumn)`
width: 80%; width: 80%;
} }
@media (min-width: ${({theme}) => theme.overMobile}) { @media (min-width: ${({ theme }) => theme.overMobile}) {
padding: 172px 0 124px; padding: 172px 0 124px;
.main-container { .main-container {
@ -29,18 +29,18 @@ const LandingPageStyle = styled(FlexColumn)`
} }
`; `;
const LandingPage = () => { const LandingPage = (props) => {
return ( return (
<LandingPageStyle as='main'> <LandingPageStyle as="main">
<FlexColumn className='main-container'> <FlexColumn className="main-container">
<Hero/> <Hero popUpMessageHandler={props.popUpMessageHandler} />
<Motivation/> <Motivation />
<Csi/> <Csi />
<Commercial/> <Commercial />
<Partnerships/> <Partnerships />
</FlexColumn> </FlexColumn>
</LandingPageStyle> </LandingPageStyle>
); );
}; };
export default LandingPage; export default LandingPage;