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

simple login and logout with keycloak templaate

Browse Source
This commit is contained in:
mattyl006 2022-08-29 15:57:29 +02:00
parent 3584df00c5
commit 16d0b28a58
10 changed files with 60 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@ -11,7 +11,7 @@ import Register from './pages/auth/Register';
import Login from './pages/auth/Login';
import LoginWithEmail from './pages/auth/LoginWithEmail';
import RegisterWithEmail from './pages/auth/RegisterWithEmail';
import UserService from './services/UserService';
import KeyCloakService from './services/KeyCloakService';
const App = () => {
return (
@ -27,7 +27,7 @@ const App = () => {
<Route path={CHALLENGES_PAGE} element={<Challenges/>}/>
{
UserService.isLoggedIn() ? <>
KeyCloakService.isLoggedIn() ? <>
<Route exact path='/' element={<Challenges/>}/>
<Route element={<Challenges/>}/>
</> : <>

18
src/api/loginTest.js Normal file
View File

@ -0,0 +1,18 @@
const loginTest = () => {
let data = {
client_id: 'Id_of_your_client',
username: 'test',
password: 'test',
grant_type: 'password'
};
fetch('http://0.0.0.0:8080/auth/realms/test/protocol/openid-connect/token', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
}).then(res => {
console.log('Request complete! response:', res);
});
};
export default loginTest;

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

@ -8,6 +8,7 @@ import styled from 'styled-components';
import {Link} from 'react-router-dom';
import {CHALLENGES_PAGE} from '../../utils/globals';
import PropsTypes from 'prop-types';
import KeyCloakService from '../../services/KeyCloakService';
const MobileNavMenuStyle = styled(FlexColumn)`
gap: 32px;
@ -21,7 +22,7 @@ const MobileNavMenuStyle = styled(FlexColumn)`
align-items: flex-start;
z-index: 3;
a {
a, button {
cursor: pointer;
div {
@ -63,12 +64,20 @@ const MobileNavMenu = (props) => {
Register
</Menu>
</FlexRow>
<FlexRow as={Link} to='/login' gap='16px'>
<Svg width='16px' height='16px' src={loginIco}/>
<Menu as='li'>
Sign in
</Menu>
</FlexRow>
{KeyCloakService.isLoggedIn() ?
<FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
<Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
<Menu as='li'>
Sign out
</Menu>
</FlexRow> :
<FlexRow as='button' onClick={KeyCloakService.doLogin} gap='16px'>
<Svg width='16px' height='16px' src={loginIco}/>
<Menu as='li'>
Sign in
</Menu>
</FlexRow>
}
</MobileNavMenuStyle>
</TransBack>
);

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

@ -11,6 +11,7 @@ import registerIco from '../../../assets/register_ico.svg';
import {CHALLENGES_PAGE} from '../../../utils/globals';
import cupIco from '../../../assets/cup_ico.svg';
import NavBarStyle from './NavBarStyle';
import KeyCloakService from '../../../services/KeyCloakService';
const MenuButton = styled(Container)`
width: 20px;
@ -55,12 +56,20 @@ const NavBar = () => {
Register
</Menu>
</FlexRow>
<FlexRow as={Link} to='/login' gap='16px'>
<Svg width='16px' height='16px' src={loginIco}/>
<Menu as='li'>
Sign in
</Menu>
</FlexRow>
{KeyCloakService.isLoggedIn() ?
<FlexRow as='button' onClick={KeyCloakService.doLogout} gap='16px'>
<Svg width='16px' height='16px' src={loginIco} rotate='180deg'/>
<Menu as='li'>
Sign out
</Menu>
</FlexRow> :
<FlexRow as='button' onClick={KeyCloakService.doLogin} gap='16px'>
<Svg width='16px' height='16px' src={loginIco}/>
<Menu as='li'>
Sign in
</Menu>
</FlexRow>
}
</FlexRow>
</FlexRow>
<MobileNavMenu translateY={navMenuTranslateY} toggleNavMenu={toggleNavMenu}/>

2
src/components/elements/NavBar/NavBarStyle.js
View File

@ -23,7 +23,7 @@ const NavBarStyle = styled(Container)`
.ul-desktop {
display: flex;
a {
a, button {
cursor: pointer;
div {

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

@ -7,7 +7,6 @@ import {Link} from 'react-router-dom';
import Media from 'react-media';
import codepenIco from '../../assets/codepen_ico.svg';
import styled from 'styled-components';
import UserService from '../../services/UserService';
const TitleParagraph = styled(Medium)`
font-size: 20px;
@ -52,12 +51,6 @@ const desktopRender = () => {
<ButtonLink as={Link} to='/'>
Join us!
</ButtonLink>
<button onClick={UserService.doLogin}>
test keycloak login
</button>
<button onClick={() => console.log(UserService.isLoggedIn())}>
isLoggedIn
</button>
</Container>
<Svg src={codepenIco} width='212px' height='180px' backgroundColor={theme.colors.green}/>
</FlexRow>

4
src/index.js
View File

@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import './normalize.css';
import App from './App';
import UserService from './services/UserService';
import KeyCloakService from './services/KeyCloakService';
import HttpService from './services/HttpService';
const root = ReactDOM.createRoot(document.getElementById('root'));
@ -14,5 +14,5 @@ const renderApp = () => root.render(
</React.StrictMode>
);
UserService.initKeycloak(renderApp);
KeyCloakService.initKeycloak(renderApp);
HttpService.configure();

7
src/pages/Challanges/Challenges.js
View File

@ -12,7 +12,6 @@ import cupIco from '../../assets/cup_ico.svg';
import getChallenges from '../../api/getChallenges';
import {CALC_PAGES} from '../../utils/globals';
import Loading from '../../components/elements/Loading';
import UserService from '../../services/UserService';
const Challenges = () => {
const [pageNr, setPageNr] = React.useState(1);
@ -121,12 +120,6 @@ const Challenges = () => {
<H1 as='h1'>
Challenges
</H1>
<button onClick={UserService.doLogout}>
test keycloak logout
</button>
<button onClick={() => console.log(UserService.isLoggedIn())}>
isLoggedIn
</button>
<Body margin='0 0 12px 0' maxWidth='400px'>
Increase your machine learning skills by competing in our exciting challenges.
</Body>

8
src/services/HttpService.js
View File

@ -1,5 +1,5 @@
import axios from 'axios';
import UserService from './UserService';
import KeyCloakService from './KeyCloakService';
const HttpMethods = {
GET: 'GET',
@ -11,12 +11,12 @@ const _axios = axios.create();
const configure = () => {
_axios.interceptors.request.use((config) => {
if (UserService.isLoggedIn()) {
if (KeyCloakService.isLoggedIn()) {
const cb = () => {
config.headers.Authorization = `Bearer ${UserService.getToken()}`;
config.headers.Authorization = `Bearer ${KeyCloakService.getToken()}`;
return Promise.resolve(config);
};
return UserService.updateToken(cb);
return KeyCloakService.updateToken(cb);
}
});
};

4
src/services/UserService.js → src/services/KeyCloakService.js
View File

@ -40,7 +40,7 @@ const getUsername = () => _kc.tokenParsed?.preferred_username;
const hasRole = (roles) => roles.some((role) => _kc.hasRealmRole(role));
const UserService = {
const KeyCloakService = {
initKeycloak,
doLogin,
doLogout,
@ -51,4 +51,4 @@ const UserService = {
hasRole,
};
export default UserService;
export default KeyCloakService;