keycloak register

src/components/elements/ButtonLink.js

@@ -28,18 +28,22 @@ const ButtonLinkStyle = styled(Label)`
 
 const ButtonLink = (props) => {
     return (
-        <ButtonLinkStyle>
+        <ButtonLinkStyle as={props.as} onClick={props.onClick}>
             {props.children}
         </ButtonLinkStyle>
     );
 };
 
 ButtonLink.propTypes = {
+    as: PropsTypes.string,
+    onClick: PropsTypes.func,
     children: PropsTypes.node,
 };
 
 ButtonLink.defaultProps = {
     children: '',
+    as: 'div',
+    onClick: null,
 };
 
 export default ButtonLink;

src/components/elements/MobileNavMenu.js

@@ -58,12 +58,13 @@ const MobileNavMenu = (props) => {
                         Challenges
                     </Menu>
                 </FlexRow>
-                <FlexRow as={Link} to='/register' gap='16px'>
-                    <Svg width='16px' height='16px' src={registerIco}/>
-                    <Menu as='li'>
-                        Register
-                    </Menu>
-                </FlexRow>
+                {!KeyCloakService.isLoggedIn() ?
+                    <FlexRow as='button' onClick={KeyCloakService.doRegister} gap='16px'>
+                        <Svg width='16px' height='16px' src={registerIco}/>
+                        <Menu as='li'>
+                            Register
+                        </Menu>
+                    </FlexRow> : ''}
                 {KeyCloakService.isLoggedIn() ?
                     <FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
                         <Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
@@ -76,8 +77,7 @@ const MobileNavMenu = (props) => {
                         <Menu as='li'>
                             Sign in
                         </Menu>
-                    </FlexRow>
-                }
+                    </FlexRow>}
             </MobileNavMenuStyle>
         </TransBack>
     );

src/components/elements/NavBar/NavBar.js

@@ -50,12 +50,13 @@ const NavBar = () => {
                             Challenges
                         </Menu>
                     </FlexRow>
-                    <FlexRow as={Link} to='/register' gap='16px'>
-                        <Svg width='16px' height='16px' src={registerIco}/>
-                        <Menu as='li'>
-                            Register
-                        </Menu>
-                    </FlexRow>
+                    {!KeyCloakService.isLoggedIn() ?
+                        <FlexRow as='button' onClick={KeyCloakService.doRegister} gap='16px'>
+                            <Svg width='16px' height='16px' src={registerIco}/>
+                            <Menu as='li'>
+                                Register
+                            </Menu>
+                        </FlexRow> : ''}
                     {KeyCloakService.isLoggedIn() ?
                         <FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
                             <Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
@@ -68,8 +69,7 @@ const NavBar = () => {
                             <Menu as='li'>
                                 Sign in
                             </Menu>
-                        </FlexRow>
-                    }
+                        </FlexRow>}
                 </FlexRow>
             </FlexRow>
             <MobileNavMenu translateY={navMenuTranslateY} toggleNavMenu={toggleNavMenu}/>

src/components/sections/Hero.js

@@ -3,10 +3,10 @@ import {Body, H1, Medium} from '../../utils/fonts';
 import {Container, FlexColumn, FlexRow, Svg} from '../../utils/containers';
 import theme from '../../utils/theme';
 import ButtonLink from '../elements/ButtonLink';
-import {Link} from 'react-router-dom';
 import Media from 'react-media';
 import codepenIco from '../../assets/codepen_ico.svg';
 import styled from 'styled-components';
+import KeyCloakService from '../../services/KeyCloakService';
 
 const TitleParagraph = styled(Medium)`
   font-size: 20px;
@@ -26,7 +26,7 @@ const mobileRender = () => {
                 A data challenge platform for machine learning research,
                 competition, cooperation and reproducibility.
             </Body>
-            <ButtonLink as={Link} to='/'>
+            <ButtonLink as='button' onClick={KeyCloakService.doRegister}>
                 Join us!
             </ButtonLink>
         </FlexColumn>
@@ -48,7 +48,7 @@ const desktopRender = () => {
                         A data challenge platform for machine learning research,
                         competition, cooperation and reproducibility.
                     </TitleParagraph>
-                    <ButtonLink as={Link} to='/'>
+                    <ButtonLink as='button' onClick={KeyCloakService.doRegister}>
                         Join us!
                     </ButtonLink>
                 </Container>

src/services/KeyCloakService.js

@@ -27,6 +27,8 @@ const doLogout = _kc.logout;
 
 const getToken = () => _kc.token;
 
+const doRegister = _kc.register;
+
 const isLoggedIn = () => {
     return _kc.authenticated;
 };
@@ -49,6 +51,7 @@ const KeyCloakService = {
     updateToken,
     getUsername,
     hasRole,
+    doRegister
 };
 
 export default KeyCloakService;