Skip to content

Commit dc07ae0

Browse files
MrMatAPMrMatAP
committed
Introduced react API
1 parent d87ded6 commit dc07ae0

File tree

11 files changed

+1964
-1538
lines changed

11 files changed

+1964
-1538
lines changed

‎ui/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,5 @@
2121
npm-debug.log*
2222
yarn-debug.log*
2323
yarn-error.log*
24+
25+
src/configuration.js

‎ui/public/favicon.ico‎

-1.04 KB
Binary file not shown.

‎ui/src/About.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*
2+
* MIT License
3+
*
4+
* Copyright (c) 2021 MrMat
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in
14+
* all copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import { Container, Header } from 'semantic-ui-react';
26+
27+
function About() {
28+
return (
29+
<Container>
30+
<Header as='h1'>About</Header>
31+
<p>
32+
This is a simple demonstration of adding a UI to the otherwise pure RESTful service.
33+
</p>
34+
</Container>
35+
);
36+
}
37+
38+
export default About;

‎ui/src/App.css‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1-
.App {
2-
text-align: center;
3-
}
1+
/*.App {*/
2+
/* text-align: center;*/
3+
/*}*/
44

5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
5+
/*.App-logo {*/
6+
/* height: 40vmin;*/
7+
/* pointer-events: none;*/
8+
/*}*/
99

10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
10+
/*@media (prefers-reduced-motion: no-preference) {*/
11+
/* .App-logo {*/
12+
/* animation: App-logo-spin infinite 20s linear;*/
13+
/* }*/
14+
/*}*/
1515

16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
16+
/*.App-header {*/
17+
/* background-color: #282c34;*/
18+
/* min-height: 100vh;*/
19+
/* display: flex;*/
20+
/* flex-direction: column;*/
21+
/* align-items: center;*/
22+
/* justify-content: center;*/
23+
/* font-size: calc(10px + 2vmin);*/
24+
/* color: white;*/
25+
/*}*/
2626

27-
.App-link {
28-
color: #61dafb;
29-
}
27+
/*.App-link {*/
28+
/* color: #61dafb;*/
29+
/*}*/
3030

31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
38-
}
31+
/*@keyframes App-logo-spin {*/
32+
/* from {*/
33+
/* transform: rotate(0deg);*/
34+
/* }*/
35+
/* to {*/
36+
/* transform: rotate(360deg);*/
37+
/* }*/
38+
/*}*/

‎ui/src/App.js‎

Lines changed: 40 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,49 @@
1-
import React, { useState, useEffect } from 'react';
2-
import logo from './logo.svg';
1+
import React from 'react';
2+
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
3+
import {AuthenticationProvider, oidcLog, withOidcSecure} from '@axa-fr/react-oidc-context';
4+
5+
import { Menu, Segment } from 'semantic-ui-react';
6+
7+
8+
import oidcConfiguration from './configuration';
9+
10+
import Home from "./Home";
11+
import About from "./About";
12+
import Error from "./Error";
13+
import UserInfo from "./UserInfo";
14+
315
import './App.css';
416

517
function App() {
18+
let state = { activeItem: 'home' };
619

7-
const [currentGreetingV1, setCurrentGreetingV1] = useState('Unknown');
20+
return (
21+
<Router>
22+
<AuthenticationProvider configuration={oidcConfiguration} loggerLevel={oidcLog.DEBUG}>
823

9-
useEffect(() => {
10-
fetch('/api/greeting/v1/').then(res => res.json()).then(data => {
11-
setCurrentGreetingV1(data.message);
12-
})
13-
})
24+
<div>
25+
<Menu pointing secondary>
26+
<Menu.Item name='home' as={Link} to='/'>Home</Menu.Item>
27+
<Menu.Item name='about' as={Link} to='/about'>About</Menu.Item>
28+
<Menu.Item name='secure' as={Link} to='/secure'>Secure</Menu.Item>
29+
<Menu.Menu position='right'>
30+
<Menu.Item name='logout' as={Link}>Logout</Menu.Item>
31+
</Menu.Menu>
32+
</Menu>
33+
</div>
1434

15-
return (
16-
<div className="App">
17-
<p>The current greeting is {currentGreetingV1}</p>
18-
</div>
19-
);
35+
<Segment basic>
36+
<Switch>
37+
<Route exact path="/"><Home/></Route>
38+
<Route path="/about"><About/></Route>
39+
<Route path="/secure" component={withOidcSecure(UserInfo)}/>
40+
<Route path="*"><Error/></Route>
41+
</Switch>
42+
</Segment>
43+
</AuthenticationProvider>
44+
</Router>
45+
);
2046
}
2147

48+
2249
export default App;

‎ui/src/Error.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
* MIT License
3+
*
4+
* Copyright (c) 2021 MrMat
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in
14+
* all copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
function Error() {
26+
return (
27+
<div>
28+
<p>An error has occurred</p>
29+
</div>
30+
)
31+
};
32+
33+
export default Error;

‎ui/src/Home.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
* MIT License
3+
*
4+
* Copyright (c) 2021 MrMat
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in
14+
* all copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import React, {useEffect, useState} from "react";
26+
import {Header, Container} from 'semantic-ui-react';
27+
28+
function Home() {
29+
const [currentGreetingV1, setCurrentGreetingV1] = useState('Unknown');
30+
useEffect(() => {
31+
fetch('/api/greeting/v1/').then(res => res.json()).then(data => {
32+
setCurrentGreetingV1(data.message);
33+
})
34+
})
35+
36+
return (
37+
<Container>
38+
<Header as='h1'>Home</Header>
39+
<p>currentGreetingV1 is {currentGreetingV1}</p>
40+
</Container>
41+
);
42+
}
43+
44+
export default Home;

‎ui/src/UserInfo.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/*
2+
* MIT License
3+
*
4+
* Copyright (c) 2021 MrMat
5+
*
6+
* Permission is hereby granted, free of charge, to any person obtaining a copy
7+
* of this software and associated documentation files (the "Software"), to deal
8+
* in the Software without restriction, including without limitation the rights
9+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
* copies of the Software, and to permit persons to whom the Software is
11+
* furnished to do so, subject to the following conditions:
12+
*
13+
* The above copyright notice and this permission notice shall be included in
14+
* all copies or substantial portions of the Software.
15+
*
16+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22+
* SOFTWARE.
23+
*/
24+
25+
import React from 'react';
26+
import {Header, Container} from 'semantic-ui-react';
27+
import { useReactOidc } from '@axa-fr/react-oidc-context';
28+
29+
function UserInfo() {
30+
const { oidcUser } = useReactOidc();
31+
const { profile } = oidcUser;
32+
33+
return (
34+
<Container>
35+
<Header as='h1'>Secure Area</Header>
36+
<p>Hello {profile.given_name} {profile.family_name}</p>
37+
</Container>
38+
);
39+
};
40+
41+
export default UserInfo;

‎ui/src/index.css‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
body {
2-
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
6-
-webkit-font-smoothing: antialiased;
7-
-moz-osx-font-smoothing: grayscale;
8-
}
1+
/*body {*/
2+
/* margin: 0;*/
3+
/* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',*/
4+
/* 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',*/
5+
/* sans-serif;*/
6+
/* -webkit-font-smoothing: antialiased;*/
7+
/* -moz-osx-font-smoothing: grayscale;*/
8+
/*}*/
99

10-
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12-
monospace;
13-
}
10+
/*code {*/
11+
/* font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',*/
12+
/* monospace;*/
13+
/*}*/

‎ui/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3+
import 'semantic-ui-css/semantic.min.css';
34
import './index.css';
45
import App from './App';
56
import reportWebVitals from './reportWebVitals';

0 commit comments

Comments
 (0)