mirrors/netbird-dashboard
1
0
Fork 0
mirror of https://github.com/netbirdio/dashboard.git synced 2026-01-26 01:21:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace Auth0 SDK with axa-fr/react-oidc (#60)

Browse Source 
Replacing Auth0's SDK with a more generic implementation of an OIDC client.
This will allow us to use other IDP providers that follow the OIDC standards.
This commit is contained in:
Maycon Santos
2022-07-26 16:13:08 +02:00
committed by GitHub
parent 54cd75301c
commit b59865ae05
24 changed files with 19478 additions and 3531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/build_and_push.yml vendored
View File

@@ -5,6 +5,7 @@ on:
- main
tags:
- "**"
pull_request:
jobs:
build_n_push:

3
.gitignore vendored
View File

@@ -2,6 +2,7 @@
# dependencies
/node_modules
/node_modules.bkp
/.pnp
.pnp.js
@@ -26,3 +27,5 @@ src/auth_config.json
.idea
.eslintcache
src/.local-config.json
/public/OidcServiceWorker.js
/public/OidcTrustedDomains.js

5
docker/init_react_envs.sh
View File

@@ -35,9 +35,8 @@ echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
# replace ENVs in the config
ENV_STR="\$\$AUTH0_DOMAIN \$\$AUTH0_CLIENT_ID \$\$AUTH0_AUDIENCE \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_LATEST_VERSION"
MAIN_JS=$(find /usr/share/nginx/html/static/js/main.*js)
OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
cp "$MAIN_JS" "$MAIN_JS".copy
envsubst "$ENV_STR" < "$MAIN_JS".copy > "$MAIN_JS"
envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"
rm "$MAIN_JS".copy

22620
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

@@ -4,7 +4,7 @@
"private": true,
"dependencies": {
"@ant-design/icons": "^4.7.0",
"@auth0/auth0-react": "^1.6.0",
"@axa-fr/react-oidc": "^5.14.0",
"@headlessui/react": "^1.5.0",
"@heroicons/react": "^1.0.4",
"@testing-library/jest-dom": "^5.11.4",
@@ -21,6 +21,7 @@
"antd": "^4.20.6",
"autoprefixer": "^10.4.4",
"axios": "^0.27.2",
"copyfiles": "^2.4.1",
"heroicons": "^1.0.6",
"highlight.js": "^11.2.0",
"history": "^5.0.1",
@@ -29,10 +30,10 @@
"prop-types": "^15.7.2",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-highlight": "^0.14.0",
"react-redux": "^8.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"react-syntax-highlighter": "^15.5.0",
"react-table": "^7.7.0",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
@@ -44,8 +45,10 @@
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc/dist/OidcServiceWorker.js ./public",
"copytrusted": "copyfiles -f ./public/local/OidcTrustedDomains.js ./public",
"start": "npm run copy && npm run copytrusted && react-scripts start",
"build": "npm run copy && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
@@ -68,6 +71,6 @@
]
},
"devDependencies": {
"@types/react-highlight": "^0.12.5"
"@types/react-syntax-highlighter": "^15.5.3"
}
}

6
public/OidcTrustedDomains.js.tmpl Normal file
View File

@@ -0,0 +1,6 @@
// Add here trusted domains, access tokens will be send to
const trustedDomains = {
default:["$NETBIRD_MGMT_API_ENDPOINT"],
auth0:[]
};

6
public/local/OidcTrustedDomains.js Normal file
View File

@@ -0,0 +1,6 @@
// Add here trusted domains, access tokens will be send to
const trustedDomains = {
default:["http://localhost:3001","http://127.0.0.1:3001", "http://0.0.0.0:33071"],
auth0:[]
};

64
src/App.tsx
View File

@@ -1,40 +1,25 @@
import React, {useEffect, useState} from 'react';
import {Provider} from "react-redux";
import {Link, Redirect, Route, Switch} from 'react-router-dom';
import {useAuth0} from "@auth0/auth0-react";
import {Redirect, Route, Switch} from 'react-router-dom';
import Navbar from './components/Navbar';
import Peers from './views/Peers';
import FooterComponent from './components/FooterComponent';
import Loading from "./components/Loading";
import SetupKeys from "./views/SetupKeys";
import AddPeer from "./views/AddPeer";
import Users from './views/Users';
import AccessControl from './views/AccessControl';
// import Activity from './views/Activity';
import Banner from "./components/Banner";
import {store} from "./store";
import {Button, Col, Layout, Result, Row} from 'antd';
import { Col, Layout, Row} from 'antd';
import {Container} from "./components/Container";
import {withOidcSecure} from '@axa-fr/react-oidc';
const {Header, Content} = Layout;
function App() {
const {
isLoading,
isAuthenticated,
loginWithRedirect,
logout,
error
} = useAuth0();
const [isOpen, setIsOpen] = useState(false);
const toggle = () => {
setIsOpen(!isOpen);
};
useEffect(() => {
const hideMenu = () => {
if (window.innerWidth > 768 && isOpen) {
@@ -50,39 +35,8 @@ function App() {
};
});
if (error) {
return <Result
status="warning"
title={error.message}
extra={<>
<a href={window.location.origin}>
<Button type="primary">
Try again
</Button>
</a>
<Button type="primary" onClick={function () {
logout({
returnTo: window.location.origin,
})
}}>
Log out
</Button>
</>
}
/>
}
if (isLoading) {
return <Loading padding="3em" width="50px" height="50px"/>;
}
if (!isAuthenticated) {
loginWithRedirect({})
}
return (
<Provider store={store}>
{isAuthenticated &&
<Layout>
<Banner/>
<Header className="header" style={{
@@ -110,17 +64,15 @@ function App() {
)
}}
/>
<Route path='/peers' exact component={Peers}/>
<Route path="/add-peer" component={AddPeer}/>
<Route path="/setup-keys" component={SetupKeys}/>
<Route path="/acls" component={AccessControl}/>
{/*<Route path="/activity" component={Activity}/>*/}
<Route path="/users" component={Users}/>
<Route path='/peers' exact component={withOidcSecure(Peers)}/>
<Route path="/add-peer" component={withOidcSecure(AddPeer)}/>
<Route path="/setup-keys" component={withOidcSecure(SetupKeys)}/>
<Route path="/acls" component={withOidcSecure(AccessControl)}/>
<Route path="/users" component={withOidcSecure(Users)}/>
</Switch>
</Content>
<FooterComponent/>
</Layout>
}
</Provider>
);
}

4
src/components/AccessControlModalGroups.tsx
View File

@@ -1,8 +1,4 @@
import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {RootState} from "typesafe-actions";
import { actions as ruleActions } from '../store/rule';
import {string} from "prop-types";
import {Avatar, List, Modal} from "antd";
import {Group} from "../store/group/types";

6
src/components/AccessControlNew.tsx
View File

@@ -14,10 +14,10 @@ import {
import {ArrowRightOutlined, CheckOutlined, CloseOutlined, FlagFilled, QuestionCircleFilled} from "@ant-design/icons";
import type { CustomTagProps } from 'rc-select/lib/BaseSelect'
import {Rule, RuleToSave} from "../store/rule/types";
import {useAuth0} from "@auth0/auth0-react";
import { uniq } from "lodash"
import {Header} from "antd/es/layout/layout";
import {RuleObject} from "antd/lib/form";
import {useOidcAccessToken} from "@axa-fr/react-oidc";
const { Paragraph } = Typography;
const { Option } = Select;
@@ -28,7 +28,7 @@ interface FormRule extends Rule {
}
const AccessControlNew = () => {
const { getAccessTokenSilently } = useAuth0()
const {accessToken} = useOidcAccessToken()
const dispatch = useDispatch()
const setupNewRuleVisible = useSelector((state: RootState) => state.rule.setupNewRuleVisible)
const groups = useSelector((state: RootState) => state.group.data)
@@ -96,7 +96,7 @@ const AccessControlNew = () => {
form.validateFields()
.then((values) => {
const ruleToSave = createRuleToSave()
dispatch(ruleActions.saveRule.request({getAccessTokenSilently, payload: ruleToSave}))
dispatch(ruleActions.saveRule.request({getAccessTokenSilently:accessToken, payload: ruleToSave}))
})
.catch((errorInfo) => {
console.log('errorInfo', errorInfo)

35
src/components/LoginError.tsx Normal file
View File

@@ -0,0 +1,35 @@
import {OidcUserStatus, useOidc, useOidcUser} from "@axa-fr/react-oidc";
import {Button, Result} from "antd";
import React from "react";
import {getConfig} from "../config";
function LoginError() {
const { logout } = useOidc();
const config = getConfig();
const { oidcUserLoadingState } = useOidcUser();
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
if (urlParams.get("error") === "access_denied") {
return <Result
status="warning"
title={urlParams.get("error_description")}
extra={<>
<a href={window.location.origin}>
<Button type="primary">
Try again
</Button>
</a>
<Button type="primary" onClick={function () {
logout("",{client_id:config.clientId})
}}>
Log out
</Button>
</>
}
/>
}
return <div>{"Login Error: User state: "+oidcUserLoadingState}</div>
}
export default LoginError;

25
src/components/Navbar.tsx
View File

@@ -1,23 +1,26 @@
import React, {useEffect, useState} from 'react';
import {Link} from 'react-router-dom';
import logo from "../assets/logo.png";
import {useAuth0} from "@auth0/auth0-react";
import {useLocation} from 'react-router-dom';
import {Menu, Row, Col, Grid, Dropdown, Avatar, Button, Typography, Space} from 'antd'
import {ItemType} from "antd/lib/menu/hooks/useItems";
import {AvatarSize} from "antd/es/avatar/SizeContext";
import { UserOutlined } from '@ant-design/icons';
import { useOidc,useOidcUser } from '@axa-fr/react-oidc';
import {getConfig} from "../config";
const { Text } = Typography
const { useBreakpoint } = Grid;
const Navbar = () => {
let location = useLocation();
const config = getConfig();
const {
user,
isAuthenticated,
logout,
} = useAuth0();
} = useOidc();
const { oidcUser } = useOidcUser();
const user = oidcUser;
const screens = useBreakpoint();
@@ -31,10 +34,10 @@ const Navbar = () => {
{ label: (<Link to="/add-peer">Add Peer</Link>), key: '/add-peer' },
{ label: (<Link to="/setup-keys">Setup Keys</Link>), key: '/setup-keys' },
{ label: (<Link to="/acls">Access Control</Link>), key: '/acls' },
// { label: (<Link to="/activity">Activity</Link>), key: '/activity' },
{ label: (<Link to="/users">Users</Link>), key: '/users' }
] as ItemType[])
const logoutWithRedirect = () =>
logout("",{client_id:config.clientId});
useEffect(() => {
const fs = menuItems.filter(m => m?.key !== userEmailKey && m?.key !== userLogoutKey && m?.key !== userDividerKey)
if (screens.xs === true) {
@@ -63,21 +66,13 @@ const Navbar = () => {
key: '0',
},
{
label: <a onClick={e => {
logoutWithRedirect()
e.preventDefault()}
}>Logout</a>,
label: (<Link to="/logout" onClick={logoutWithRedirect}>Logout</Link>),
key: '1',
}
]}
/>
);
const logoutWithRedirect = () =>
logout({
returnTo: window.location.origin,
});
const createAvatar = (size:AvatarSize) => {
return user?.picture ? (
<Avatar size={size} src={user?.picture} icon={<UserOutlined />} />

9
src/components/PeerUpdate.tsx
View File

@@ -5,17 +5,16 @@ import {actions as peerActions} from '../store/peer';
import {Button, Col, Divider, Drawer, Form, Input, Row, Select, Space, Tag, Typography} from "antd";
import {Header} from "antd/es/layout/layout";
import type {CustomTagProps} from 'rc-select/lib/BaseSelect'
import {useAuth0} from "@auth0/auth0-react";
import {Peer, PeerGroupsToSave} from "../store/peer/types";
import {Group, GroupPeer} from "../store/group/types";
import {CloseOutlined, EditOutlined, FlagFilled} from "@ant-design/icons";
import {RuleObject} from 'antd/lib/form';
import { useOidcAccessToken } from '@axa-fr/react-oidc';
const { Paragraph } = Typography;
const { Option } = Select;
const PeerUpdate = () => {
const { getAccessTokenSilently } = useAuth0()
const { accessToken } = useOidcAccessToken()
const dispatch = useDispatch()
const groups = useSelector((state: RootState) => state.group.data)
const peer = useSelector((state: RootState) => state.peer.peer)
@@ -214,11 +213,11 @@ const PeerUpdate = () => {
if (!noUpdateToName()) {
const peerUpdate = createPeerToSave()
setCallingPeerAPI(true)
dispatch(peerActions.updatePeer.request({getAccessTokenSilently, payload: peerUpdate}))
dispatch(peerActions.updatePeer.request({getAccessTokenSilently:accessToken, payload: peerUpdate}))
}
if (peerGroupsToSave.groupsToRemove.length || peerGroupsToSave.groupsToAdd.length || peerGroupsToSave.groupsNoId.length) {
setCallingGroupAPI(true)
dispatch(peerActions.saveGroups.request({getAccessTokenSilently, payload: peerGroupsToSave}))
dispatch(peerActions.saveGroups.request({getAccessTokenSilently:accessToken, payload: peerGroupsToSave}))
}
})
.catch((errorInfo) => {

6
src/components/SetupKeyNew.tsx
View File

@@ -13,11 +13,11 @@ import {
import {RootState} from "typesafe-actions";
import {QuestionCircleFilled} from "@ant-design/icons";
import {SetupKey} from "../store/setup-key/types";
import {useAuth0} from "@auth0/auth0-react";
import {useOidcAccessToken} from "@axa-fr/react-oidc";
const { Text } = Typography;
const SetupKeyNew = () => {
const { getAccessTokenSilently } = useAuth0()
const {accessToken} = useOidcAccessToken()
const dispatch = useDispatch()
const setupNewKeyVisible = useSelector((state: RootState) => state.setupKey.setupNewKeyVisible)
const setupKey = useSelector((state: RootState) => state.setupKey.setupKey)
@@ -34,7 +34,7 @@ const SetupKeyNew = () => {
const handleFormSubmit = () => {
form.validateFields()
.then((values) => {
dispatch(setupKeyActions.createSetupKey.request({getAccessTokenSilently, payload: formSetupKey}))
dispatch(setupKeyActions.createSetupKey.request({getAccessTokenSilently:accessToken, payload: formSetupKey}))
})
.catch((errorInfo) => {
console.log('errorInfo', errorInfo)

13
src/components/addpeer/TabSteps.tsx
View File

@@ -1,9 +1,8 @@
import {useDispatch, useSelector} from "react-redux";
import Highlight from 'react-highlight';
import "highlight.js/styles/mono-blue.css";
import "highlight.js/lib/languages/bash";
import { StepCommand } from './types'
import SyntaxHighlighter from 'react-syntax-highlighter';
import { monoBlue } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import {
Typography,
Space,
@@ -12,8 +11,6 @@ import {
import {copyToClipboard} from "../../utils/common";
import {CheckOutlined, CopyOutlined} from "@ant-design/icons";
import React, {useEffect, useState} from "react";
const { Title, Text } = Typography;
const { Step } = Steps;
type Props = {
@@ -48,10 +45,10 @@ const TabSteps:React.FC<Props> = ({stepsItems}) => {
title={c.title}
description={
<Space className="nb-code" direction="vertical" size="small" style={{display: "flex"}}>
{ (c.commands && (typeof c.commands === 'string' || c.commands instanceof String)) ? (
<Highlight className='bash'>
{ (c.commands && (typeof c.commands === 'string')) ? (
<SyntaxHighlighter language="bash" style={monoBlue}>
{c.commands}
</Highlight>
</SyntaxHighlighter>
) : (
c.commands
)}

57
src/index.tsx
View File

@@ -5,36 +5,57 @@ import App from './App';
import reportWebVitals from './reportWebVitals';
import history from "./utils/history";
import { getConfig } from "./config";
import {Auth0Provider} from "@auth0/auth0-react";
import {OidcProvider, useOidc} from '@axa-fr/react-oidc';
import {BrowserRouter} from "react-router-dom";
const onRedirectCallback = (appState:any) => {
history.push(
appState && appState.returnTo ? appState.returnTo : window.location.pathname
);
};
import Loading from "./components/Loading";
import LoginError from "./components/LoginError";
const config = getConfig();
const authority = 'https://' + config.domain
const providerConfig = {
domain: config.domain,
clientId: config.clientId,
...(config.audience ? { audience: config.audience } : null),
redirectUri: window.location.origin,
useRefreshTokens: true,
onRedirectCallback,
authority: authority,
client_id: config.clientId,
redirect_uri: window.location.origin+'#callback',
refresh_time_before_tokens_expiration_in_second: 30,
silent_redirect_uri: window.location.origin + '#silent-callback',
scope: 'openid profile email api offline_access email_verified',
service_worker_relative_url:'/OidcServiceWorker.js',
service_worker_only: false,
authority_configuration: {
authorization_endpoint: authority + "/authorize",
token_endpoint: authority + "/oauth/token",
revocation_endpoint: authority + "/oauth/revoke",
end_session_endpoint: authority + "/v2/logout",
userinfo_endpoint: authority + "/userinfo"
},
...(config.audience ? {extras:{ audience: config.audience}} : null)
};
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
const loadingComponent = () => <Loading padding="3em" width="50px" height="50px"/>
root.render(
<BrowserRouter>
<Auth0Provider {...providerConfig}>
<App/>
</Auth0Provider>
</BrowserRouter>
<OidcProvider
configuration={providerConfig}
callbackSuccessComponent={loadingComponent}
authenticatingErrorComponent={LoginError}
authenticatingComponent={loadingComponent}
sessionLostComponent={loadingComponent}
loadingComponent={loadingComponent}
onSessionLost={()=>{
history.push("/peers")
}}
>
<BrowserRouter>
<App/>
</BrowserRouter>
</OidcProvider>
);
// If you want to start measuring performance in your app, pass a function

3
src/services/api-client/header-factory.ts
View File

@@ -11,7 +11,8 @@ const headersFactory = async (getAccessTokenSilently:any): Promise<RequestHeader
//const token = await getLocalItem<string>(StorageKey.token);
//const token = ''
const token = await getAccessTokenSilently()
// const token = await getAccessTokenSilently()
const token = getAccessTokenSilently
if (token) {
headers.authorization = `Bearer ${token}`;

2
src/services/api-client/types.ts
View File

@@ -1,7 +1,7 @@
import { Method } from 'axios';
export interface RequestPayload<T> {
getAccessTokenSilently: any;
getAccessTokenSilently: any | null;
payload:T;
}

18
src/views/AccessControl.tsx
View File

@@ -1,5 +1,4 @@
import React, {useEffect, useState} from 'react';
import {useAuth0, withAuthenticationRequired} from "@auth0/auth0-react";
import {
Alert,
Button, Card,
@@ -8,7 +7,6 @@ import {
Typography
} from "antd";
import {Container} from "../components/Container";
import Loading from "../components/Loading";
import {useDispatch, useSelector} from "react-redux";
import {RootState} from "typesafe-actions";
import {Rule} from "../store/rule/types";
@@ -23,7 +21,7 @@ import AccessControlNew from "../components/AccessControlNew";
import {Group} from "../store/group/types";
import AccessControlModalGroups from "../components/AccessControlModalGroups";
import tableSpin from "../components/Spin";
import {useOidcAccessToken} from '@axa-fr/react-oidc';
const { Title, Paragraph } = Typography;
const { Column } = Table;
const { confirm } = Modal;
@@ -43,7 +41,7 @@ interface GroupsToShow {
}
export const AccessControl = () => {
const { getAccessTokenSilently } = useAuth0()
const {accessToken} = useOidcAccessToken()
const dispatch = useDispatch()
const rules = useSelector((state: RootState) => state.rule.data);
@@ -108,8 +106,8 @@ export const AccessControl = () => {
}
useEffect(() => {
dispatch(ruleActions.getRules.request({getAccessTokenSilently, payload: null}));
dispatch(groupActions.getGroups.request({getAccessTokenSilently, payload: null}));
dispatch(ruleActions.getRules.request({getAccessTokenSilently:accessToken, payload: null}));
dispatch(groupActions.getGroups.request({getAccessTokenSilently:accessToken, payload: null}));
}, [])
useEffect(() => {
@@ -184,7 +182,7 @@ export const AccessControl = () => {
</Space>,
okType: 'danger',
onOk() {
dispatch(ruleActions.deleteRule.request({getAccessTokenSilently, payload: ruleToAction?.id || ''}));
dispatch(ruleActions.deleteRule.request({getAccessTokenSilently:accessToken, payload: ruleToAction?.id || ''}));
},
onCancel() {
setRuleToAction(null);
@@ -417,8 +415,4 @@ export const AccessControl = () => {
)
}
export default withAuthenticationRequired(AccessControl,
{
onRedirecting: () => <Loading/>,
}
);
export default AccessControl;

36
src/views/Activity.tsx
View File

@@ -1,36 +0,0 @@
import React from 'react';
import {withAuthenticationRequired} from "@auth0/auth0-react";
import {
Col,
Row,
Typography
} from "antd";
import {Container} from "../components/Container";
import Loading from "../components/Loading";
const { Title, Paragraph } = Typography;
export const Activity = () => {
return(
<Container style={{paddingTop: "40px"}}>
<Row>
<Col span={24}>
<Title level={4}>Activity</Title>
<Title level={5}>Monitor system activity.</Title>
<Paragraph>
Here you will be able to see activity of peers. E.g. events like Peer A has connected to Peer B.
</Paragraph>
<Paragraph>
Stay tuned.
</Paragraph>
</Col>
</Row>
</Container>
)
}
export default withAuthenticationRequired(Activity,
{
onRedirecting: () => <Loading/>,
}
);

13
src/views/AddPeer.tsx
View File

@@ -1,9 +1,6 @@
import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {useAuth0, withAuthenticationRequired} from "@auth0/auth0-react";
import Loading from "../components/Loading";
import {useDispatch} from "react-redux";
import {Container} from "../components/Container";
import {
Col,
Row,
@@ -12,7 +9,6 @@ import {
Tabs
} from "antd";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import OtherTab from "../components/addpeer/LinuxTab";
import UbuntuTab from "../components/addpeer/UbuntuTab";
import MacTab from "../components/addpeer/MacTab";
@@ -21,7 +17,6 @@ const { Title, Paragraph } = Typography;
const { TabPane } = Tabs;
export const AddPeer = () => {
const { getAccessTokenSilently } = useAuth0()
const dispatch = useDispatch()
const detectOS = () => {
@@ -69,8 +64,4 @@ export const AddPeer = () => {
)
}
export default withAuthenticationRequired(AddPeer,
{
onRedirecting: () => <Loading/>,
}
)
export default AddPeer;

20
src/views/Peers.tsx
View File

@@ -1,12 +1,11 @@
import React, {useEffect, useState} from 'react';
import {Link} from 'react-router-dom';
import {useDispatch, useSelector} from "react-redux";
import {useAuth0, withAuthenticationRequired} from "@auth0/auth0-react";
import {RootState} from "typesafe-actions";
import {actions as peerActions} from '../store/peer';
import {actions as groupActions} from '../store/group';
import Loading from "../components/Loading";
import {Container} from "../components/Container";
import { useOidcAccessToken } from '@axa-fr/react-oidc';
import {
Alert,
Button,
@@ -50,7 +49,8 @@ interface PeerDataTable extends Peer {
}
export const Peers = () => {
const { getAccessTokenSilently } = useAuth0()
const {accessToken} = useOidcAccessToken()
const dispatch = useDispatch()
const peers = useSelector((state: RootState) => state.peer.data);
@@ -104,8 +104,8 @@ export const Peers = () => {
}
useEffect(() => {
dispatch(peerActions.getPeers.request({getAccessTokenSilently, payload: null}));
dispatch(groupActions.getGroups.request({getAccessTokenSilently, payload: null}));
dispatch(peerActions.getPeers.request({getAccessTokenSilently:accessToken, payload: null}));
dispatch(groupActions.getGroups.request({getAccessTokenSilently:accessToken, payload: null}));
}, [])
useEffect(() => {
@@ -198,7 +198,7 @@ export const Peers = () => {
content: "Are you sure you want to delete peer from your account?",
okType: 'danger',
onOk() {
dispatch(peerActions.deletedPeer.request({getAccessTokenSilently, payload: peerToAction ? peerToAction.ip : ''}));
dispatch(peerActions.deletedPeer.request({getAccessTokenSilently:accessToken, payload: peerToAction ? peerToAction.ip : ''}));
},
onCancel() {
setPeerToAction(null);
@@ -226,7 +226,7 @@ export const Peers = () => {
ssh_enabled: checked,
name: record.name
} as Peer
dispatch(peerActions.updatePeer.request({getAccessTokenSilently, payload: peer}));
dispatch(peerActions.updatePeer.request({getAccessTokenSilently:accessToken, payload: peer}));
}
@@ -410,8 +410,4 @@ export const Peers = () => {
)
}
export default withAuthenticationRequired(Peers,
{
onRedirecting: () => <Loading padding="3em" width="50px" height="50px"/>,
}
);
export default Peers;

22
src/views/SetupKeys.tsx
View File

@@ -1,10 +1,9 @@
import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";
import {useAuth0, withAuthenticationRequired} from "@auth0/auth0-react";
import { RootState } from "typesafe-actions";
import { actions as setupKeyActions } from '../store/setup-key';
import Loading from "../components/Loading";
import {Container} from "../components/Container";
import {useOidcAccessToken} from '@axa-fr/react-oidc';
import {
Col,
Row,
@@ -21,12 +20,11 @@ import {
Alert, Select, Modal, Button, message, Drawer, Form, List
} from "antd";
import {SetupKey, SetupKeyRevoke} from "../store/setup-key/types";
import {filter, transform} from "lodash"
import {copyToClipboard, formatDate, formatOS, timeAgo} from "../utils/common";
import {filter} from "lodash"
import {formatDate, timeAgo} from "../utils/common";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import SetupKeyNew from "../components/SetupKeyNew";
import ButtonCopyMessage from "../components/ButtonCopyMessage";
import TableSpin from "../components/Spin";
import tableSpin from "../components/Spin";
const { Title, Text, Paragraph } = Typography;
@@ -38,7 +36,7 @@ interface SetupKeyDataTable extends SetupKey {
}
export const SetupKeys = () => {
const { getAccessTokenSilently } = useAuth0()
const {accessToken} = useOidcAccessToken()
const dispatch = useDispatch()
const setupKeys = useSelector((state: RootState) => state.setupKey.data);
@@ -81,7 +79,7 @@ export const SetupKeys = () => {
}
useEffect(() => {
dispatch(setupKeyActions.getSetupKeys.request({getAccessTokenSilently, payload: null}));
dispatch(setupKeyActions.getSetupKeys.request({getAccessTokenSilently:accessToken, payload: null}));
}, [])
useEffect(() => {
@@ -177,7 +175,7 @@ export const SetupKeys = () => {
</Space>,
okType: 'danger',
onOk() {
dispatch(setupKeyActions.deleteSetupKey.request({getAccessTokenSilently, payload: setupKeyToAction ? setupKeyToAction.id : ''}));
dispatch(setupKeyActions.deleteSetupKey.request({getAccessTokenSilently:accessToken, payload: setupKeyToAction ? setupKeyToAction.id : ''}));
},
onCancel() {
setSetupKeyToAction(null);
@@ -199,7 +197,7 @@ export const SetupKeys = () => {
</Space>,
okType: 'danger',
onOk() {
dispatch(setupKeyActions.revokeSetupKey.request({getAccessTokenSilently, payload: { id: setupKeyToAction ? setupKeyToAction.id : null,revoked: true } as SetupKeyRevoke}));
dispatch(setupKeyActions.revokeSetupKey.request({getAccessTokenSilently:accessToken, payload: { id: setupKeyToAction ? setupKeyToAction.id : null,revoked: true } as SetupKeyRevoke}));
},
onCancel() {
setSetupKeyToAction(null);
@@ -327,8 +325,4 @@ export const SetupKeys = () => {
)
}
export default withAuthenticationRequired(SetupKeys,
{
onRedirecting: () => <Loading padding="3em" width="50px" height="50px"/>,
}
);
export default SetupKeys;

18
src/views/Users.tsx
View File

@@ -1,21 +1,19 @@
import React, {useEffect, useState} from 'react';
import {useDispatch, useSelector} from "react-redux";
import { RootState } from "typesafe-actions";
import {useAuth0, withAuthenticationRequired} from "@auth0/auth0-react";
import { actions as userActions } from '../store/user';
import Loading from "../components/Loading";
import {Container} from "../components/Container";
import {useOidcAccessToken} from '@axa-fr/react-oidc';
import {
Col,
Row,
Typography,
Table,
Card,
Space, Input, Radio, Select, Alert, Tag, Dropdown
Space, Input, Select, Alert,
} from "antd";
import { User } from "../store/user/types";
import {filter} from "lodash";
import {formatOS, timeAgo} from "../utils/common";
import tableSpin from "../components/Spin";
const { Title, Paragraph } = Typography;
@@ -25,8 +23,8 @@ interface UserDataTable extends User {
key: string
}
export const Activity = () => {
const { getAccessTokenSilently } = useAuth0()
export const Users = () => {
const {accessToken} = useOidcAccessToken()
const dispatch = useDispatch()
const users = useSelector((state: RootState) => state.user.data);
@@ -47,7 +45,7 @@ export const Activity = () => {
}
useEffect(() => {
dispatch(userActions.getUsers.request({getAccessTokenSilently, payload: null}));
dispatch(userActions.getUsers.request({getAccessTokenSilently:accessToken,payload: null}));
}, [])
useEffect(() => {
setDataTable(transformDataTable(users))
@@ -129,8 +127,4 @@ export const Activity = () => {
)
}
export default withAuthenticationRequired(Activity,
{
onRedirecting: () => <Loading padding="3em" width="50px" height="50px"/>,
}
);
export default Users;