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

keycloak register

Browse Source
This commit is contained in:
mattyl006 2022-08-29 16:49:27 +02:00
parent 3dce0b5ce5
commit 59cb564dac
5 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/elements/ButtonLink.js
View File

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

16
src/components/elements/MobileNavMenu.js
View File

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

16
src/components/elements/NavBar/NavBar.js
View File

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

6
src/components/sections/Hero.js
View File

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

3
src/services/KeyCloakService.js
View File

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