PopUpMessage reminder for register

src/App.js

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

src/components/auth/AuthHeader.js

@@ -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;

src/components/auth/AuthInput.js

@@ -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;

src/components/auth/AuthOption.js

@@ -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;

src/components/content_sections/Hero.js

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

src/components/generic/Button.js

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

src/components/generic/PopupMessage.js

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

src/components/navigation/MobileNavMenu.js

@@ -73,7 +73,17 @@ const MobileNavMenu = (props) => {
           <Menu as="li">Privacy policy</Menu>
         </FlexRow>
         {!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} />
             <Menu as="li">Register</Menu>
           </FlexRow>

src/components/navigation/NavBar/NavBar.js

@@ -65,7 +65,13 @@ const NavBar = (props) => {
           {!KeyCloakService.isLoggedIn() ? (
             <FlexRow
               as="button"
-              onClick={KeyCloakService.doRegister}
+              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} />
@@ -96,6 +102,7 @@ const NavBar = (props) => {
         mobileMenuHoverFalse={mobileMenuHoverFalse}
         translateY={navMenuTranslateY}
         toggleNavMenu={toggleNavMenu}
+        popUpMessageHandler={props.popUpMessageHandler}
       />
     </NavBarStyle>
   );

src/pages/LandingPage.js

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