Handle additional activity events (#128)

With some IDPs like MS Azure the
oidcUser is not being set, so we can fallback to id token
to validate UI and current user

.github/workflows/build_and_push.yml

@@ -5,15 +5,16 @@ on:
       - main
     tags:
       - "**"
+  pull_request:
 
 jobs:
   build_n_push:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: setup-node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: '16'
           cache: 'npm'
@@ -26,26 +27,26 @@ jobs:
         run: CI=false npm run build
       - 
         name: Set up QEMU
-        uses: docker/setup-qemu-action@v1
+        uses: docker/setup-qemu-action@v2
       - 
         name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
       -
         name: Docker meta
         id: meta
-        uses: docker/metadata-action@v3
+        uses: docker/metadata-action@v4
         with:
           images: wiretrustee/dashboard
       -
         name: Login to DockerHub
         if: github.event_name != 'pull_request'
-        uses: docker/login-action@v1
+        uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKER_USER }}
           password: ${{ secrets.DOCKER_TOKEN }}
       -
         name: Docker build and push
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v3
         with:
           context: .
           file: docker/Dockerfile

.gitignore

@@ -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

docker/init_react_envs.sh

@@ -1,19 +1,39 @@
 #!/bin/bash
 set -e
 
-if [[ -z "${AUTH0_DOMAIN}" ]]; then
-    echo "AUTH0_DOMAIN environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_AUTHORITY}" ]]; then
+    if [[ -z "${AUTH0_DOMAIN}" ]]; then
+        echo "AUTH_AUTHORITY or AUTH0_DOMAIN environment variable must be set"
+        exit 1
+    fi
 fi
 
-if [[ -z "${AUTH0_CLIENT_ID}" ]]; then
-    echo "AUTH0_CLIENT_ID environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_CLIENT_ID}" ]]; then
+    if [[ -z "${AUTH0_CLIENT_ID}" ]]; then
+        echo "AUTH_CLIENT_ID or AUTH0_CLIENT_ID environment variable must be set"
+        exit 1
+    fi
 fi
 
-if [[ -z "${AUTH0_AUDIENCE}" ]]; then
-    echo "AUTH0_AUDIENCE environment variable must be set"
-    exit 1
+if [[ -z "${AUTH_AUDIENCE}" ]]; then
+    if [[ -z "${AUTH0_AUDIENCE}" ]]; then
+        echo "AUTH_AUDIENCE or AUTH0_AUDIENCE environment variable must be set"
+        exit 1
+    fi
+fi
+
+if [[ -z "${AUTH_SUPPORTED_SCOPES}" ]]; then
+    if [[ -z "${AUTH0_DOMAIN}" ]]; then
+        echo "AUTH_SUPPORTED_SCOPES environment variable must be set"
+        exit 1
+    fi
+fi
+
+if [[ -z "${USE_AUTH0}" ]]; then
+    if [[ -z "${AUTH0_DOMAIN}" ]]; then
+        echo "USE_AUTH0 environment variable must be set"
+        exit 1
+    fi
 fi
 
 if [[ -z "${NETBIRD_MGMT_API_ENDPOINT}" ]]; then
@@ -21,11 +41,17 @@ if [[ -z "${NETBIRD_MGMT_API_ENDPOINT}" ]]; then
     exit 1
 fi
 
-AUTH0_DOMAIN=${AUTH0_DOMAIN}
-AUTH0_CLIENT_ID=${AUTH0_CLIENT_ID}
-AUTH0_AUDIENCE=${AUTH0_AUDIENCE}
-NETBIRD_MGMT_API_ENDPOINT=${NETBIRD_MGMT_API_ENDPOINT}
-NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
+export AUTH_AUTHORITY=${AUTH_AUTHORITY:-https://$AUTH0_DOMAIN}
+export AUTH_CLIENT_ID=${AUTH_CLIENT_ID:-$AUTH0_CLIENT_ID}
+export AUTH_AUDIENCE=${AUTH_AUDIENCE:-$AUTH0_AUDIENCE}
+export AUTH_REDIRECT_URI=${AUTH_REDIRECT_URI}
+export AUTH_SILENT_REDIRECT_URI=${AUTH_SILENT_REDIRECT_URI}
+export USE_AUTH0=${USE_AUTH0:-true}
+export AUTH_SUPPORTED_SCOPES=${AUTH_SUPPORTED_SCOPES:-openid profile email api offline_access email_verified}
+
+export NETBIRD_MGMT_API_ENDPOINT=$(echo $NETBIRD_MGMT_API_ENDPOINT | sed -E 's/(:80|:443)$//')
+export NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
+export NETBIRD_HOTJAR_TRACK_ID=${NETBIRD_HOTJAR_TRACK_ID}
 
 REPO="https://github.com/netbirdio/netbird/"
 # this command will fetch the latest release e.g. v0.6.3
@@ -33,11 +59,11 @@ export NETBIRD_LATEST_VERSION=$(basename $(curl -fs -o/dev/null -w %{redirect_ur
 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"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_LATEST_VERSION \$\$NETBIRD_HOTJAR_TRACK_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI"
+
 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"
-rm "$MAIN_JS".copy
-
-
-
+envsubst "$ENV_STR" < "$OIDC_TRUSTED_DOMAINS".tmpl > "$OIDC_TRUSTED_DOMAINS"
+rm "$MAIN_JS".copy

package.json

@@ -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,29 +21,37 @@
     "antd": "^4.20.6",
     "autoprefixer": "^10.4.4",
     "axios": "^0.27.2",
+    "cidr-regex": "^3.1.1",
+    "copyfiles": "^2.4.1",
     "heroicons": "^1.0.6",
     "highlight.js": "^11.2.0",
     "history": "^5.0.1",
     "lodash": "^4.17.21",
     "postcss": "^8.4.12",
     "prop-types": "^15.7.2",
-    "react": "^18.1.0",
+    "punycode": "^2.1.1",
+    "rc-overflow": "^1.2.8",
+    "react": "^18.2.0",
     "react-dom": "^18.1.0",
-    "react-highlight": "^0.14.0",
+    "react-hotjar": "^5.1.0",
     "react-redux": "^8.0.2",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.3",
     "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",
     "redux-saga": "^1.1.3",
     "styled-components": "^5.3.5",
     "tailwindcss": "^3.0.23",
+    "ts-md5": "^1.3.1",
     "typesafe-actions": "^5.1.0",
     "typescript": "^4.6.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
+    "copy": "copyfiles -f ./node_modules/@axa-fr/react-oidc/dist/OidcServiceWorker.js ./public",
+    "copytrusted": "copyfiles -f ./public/local/OidcTrustedDomains.js ./public",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -68,6 +76,6 @@
     ]
   },
   "devDependencies": {
-    "@types/react-highlight": "^0.12.5"
+    "@types/react-syntax-highlighter": "^15.5.3"
   }
 }

public/OidcTrustedDomains.js.tmpl

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

public/local/OidcTrustedDomains.js

@@ -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:[]
+};  

run-local-keycloak.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+MGMT_PORT=$1
+
+npm run build
+docker build -f docker/Dockerfile -t netbird/dashboard-local:latest .
+
+docker rm -f netbird-dashboard
+docker run -d --name netbird-dashboard  \
+  -p 3000:80 -p 443:443 \
+  -e AUTH_AUDIENCE=netbird-client  \
+  -e AUTH_AUTHORITY=http://localhost:8080/realms/netbird  \
+  -e AUTH_CLIENT_ID=netbird-client \
+  -e USE_AUTH0=false  \
+  -e AUTH_SUPPORTED_SCOPES='openid profile email api offline_access' \
+  -e NETBIRD_MGMT_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+  -e NETBIRD_MGMT_GRPC_API_ENDPOINT=http://localhost:$MGMT_PORT \
+  netbird/dashboard-local:latest

run-local-legacy.sh

@@ -0,0 +1,16 @@
+#!/bin/bash
+
+MGMT_PORT=$1
+
+npm run build
+docker build -f docker/Dockerfile -t netbird/dashboard-local:latest .
+
+docker rm -f netbird-dashboard
+docker run -d --name netbird-dashboard  \
+ -p 3000:80 -p 443:443  \
+ -e AUTH0_AUDIENCE=http://localhost:3000/ \
+ -e AUTH0_DOMAIN=netbird-localdev.eu.auth0.com  \
+ -e AUTH0_CLIENT_ID=kBRMAOqIZ7hvpVCaypQLCJvTzkYYIXVt  \
+ -e NETBIRD_MGMT_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+ -e NETBIRD_MGMT_GRPC_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+ netbird/dashboard-local:latest

run-local.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+MGMT_PORT=$1
+
+npm run build
+docker build -f docker/Dockerfile -t netbird/dashboard-local:latest .
+
+docker rm -f netbird-dashboard
+docker run -d --name netbird-dashboard  \
+  -p 3000:80 -p 443:443 \
+  -e AUTH_AUDIENCE=http://localhost:3000/ \
+  -e AUTH_AUTHORITY=https://netbird-localdev.eu.auth0.com \
+  -e AUTH_CLIENT_ID=kBRMAOqIZ7hvpVCaypQLCJvTzkYYIXVt  \
+  -e USE_AUTH0=true \
+  -e AUTH_SUPPORTED_SCOPES='openid profile email api offline_access email_verified' \
+  -e NETBIRD_MGMT_API_ENDPOINT=http://localhost:$MGMT_PORT  \
+  -e NETBIRD_MGMT_GRPC_API_ENDPOINT=http://localhost:$MGMT_PORT \
+  netbird/dashboard-local:latest

src/App.tsx

@@ -1,45 +1,47 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {Provider} from "react-redux";
-import {Link, Redirect, Route, Switch} from 'react-router-dom';
-import {useAuth0} from "@auth0/auth0-react";
-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 {apiClient, store} from "./store";
+import {hotjar} from 'react-hotjar';
+import {getConfig} from "./config";
 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 Navbar from "./components/Navbar";
+import {Redirect, Route, Switch} from "react-router-dom";
+import {withOidcSecure} from "@axa-fr/react-oidc";
+import Peers from "./views/Peers";
+import Routes from "./views/Routes";
+import AddPeer from "./views/AddPeer";
+import SetupKeys from "./views/SetupKeys";
+import AccessControl from "./views/AccessControl";
+import Users from "./views/Users";
+import FooterComponent from "./components/FooterComponent";
+import {useGetAccessTokenSilently} from "./utils/token";
+import {User} from "./store/user/types";
+import {SecureLoading} from "./components/Loading";
+import DNS from "./views/DNS";
+import Activity from "./views/Activity";
+
+
 
 const {Header, Content} = Layout;
 
 function App() {
-
-    const {
-        isLoading,
-        isAuthenticated,
-        loginWithRedirect,
-        logout,
-        error
-    } = useAuth0();
+    const run = useRef(false)
+    const [show, setShow] = useState(false)
+    const {getAccessTokenSilently} = useGetAccessTokenSilently();
+    const {hotjarTrackID} = getConfig();
+    // @ts-ignore
+    if (hotjarTrackID && window._DATADOG_SYNTHETICS_BROWSER === undefined) {
+        hotjar.initialize(hotjarTrackID, 6);
+    }
 
     const [isOpen, setIsOpen] = useState(false);
 
-    const toggle = () => {
-        setIsOpen(!isOpen);
-    };
-
     useEffect(() => {
         const hideMenu = () => {
             if (window.innerWidth > 768 && isOpen) {
                 setIsOpen(false);
-                console.log('i resized');
             }
         };
 
@@ -48,41 +50,28 @@ function App() {
         return () => {
             window.removeEventListener('resize', hideMenu);
         };
-    });
+    }, []);
 
-    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>
-            </>
-            }
-        />
-    }
+    useEffect(() => {
+        if (!run.current) {
+            run.current = true
+            apiClient.request<User[]>('GET', `/api/users`, {getAccessTokenSilently: getAccessTokenSilently})
+                .then(() => {
+                  setShow(true)
+                })
+                .catch(e => {
+                    setShow(true)
+                    console.log(e)
+                })
+        }
 
-    if (isLoading) {
-        return <Loading padding="3em" width="50px" height="50px"/>;
-    }
-
-    if (!isAuthenticated) {
-        loginWithRedirect({})
-    }
+    }, [getAccessTokenSilently])
 
     return (
-        <Provider store={store}>
-            {isAuthenticated &&
+        <>
+            <Provider store={store}>
+                {!show && <SecureLoading padding="3em" width={50} height={50}/>}
+                {show &&
                 <Layout>
                     <Banner/>
                     <Header className="header" style={{
@@ -99,7 +88,7 @@ function App() {
                             </Col>
                         </Row>
                     </Header>
-                    <Content style={{ minHeight: "100vh"}}>
+                    <Content style={{minHeight: "100vh"}}>
                         <Switch>
                             <Route
                                 exact
@@ -110,19 +99,22 @@ 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="/routes" component={withOidcSecure(Routes)}/>
+                            <Route path="/users" component={withOidcSecure(Users)}/>
+                            <Route path="/dns" component={withOidcSecure(DNS)}/>
+                            <Route path="/activity" component={withOidcSecure(Activity)}/>
                         </Switch>
                     </Content>
                     <FooterComponent/>
                 </Layout>
-            }
-        </Provider>
-    );
+                }
+            </Provider>
+        </>
+    )
 }
 
 export default App;

src/components/AccessControlModalGroups.tsx

@@ -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";
 

src/components/AccessControlNew.tsx

@@ -1,26 +1,32 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
-import { actions as ruleActions } from '../store/rule';
+import {actions as ruleActions} from '../store/rule';
 import {
+    Button,
     Col,
-    Row,
-    Typography,
+    Divider,
+    Drawer,
+    Form,
     Input,
+    Radio,
+    RadioChangeEvent,
+    Row,
+    Select,
     Space,
-    Switch,
-    Button, Drawer, Form, Divider, Select, Tag, Radio, RadioChangeEvent
+    Tag,
+    Typography
 } from "antd";
-import {ArrowRightOutlined, CheckOutlined, CloseOutlined, FlagFilled, QuestionCircleFilled} from "@ant-design/icons";
-import type { CustomTagProps } from 'rc-select/lib/BaseSelect'
+import {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 {uniq} from "lodash"
 import {Header} from "antd/es/layout/layout";
 import {RuleObject} from "antd/lib/form";
+import {useGetAccessTokenSilently} from "../utils/token";
 
-const { Paragraph } = Typography;
-const { Option } = Select;
+const {Paragraph} = Typography;
+const {Option} = Select;
 
 interface FormRule extends Rule {
     tagSourceGroups: string[]
@@ -28,11 +34,11 @@ interface FormRule extends Rule {
 }
 
 const AccessControlNew = () => {
-    const { getAccessTokenSilently } = useAuth0()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
     const setupNewRuleVisible = useSelector((state: RootState) => state.rule.setupNewRuleVisible)
-    const groups =  useSelector((state: RootState) => state.group.data)
-    const rule =  useSelector((state: RootState) => state.rule.rule)
+    const groups = useSelector((state: RootState) => state.group.data)
+    const rule = useSelector((state: RootState) => state.rule.rule)
     const savedRule = useSelector((state: RootState) => state.rule.savedRule)
 
     const [editName, setEditName] = useState(false)
@@ -72,7 +78,7 @@ const AccessControlNew = () => {
         setTagGroups(groups?.map(g => g.name) || [])
     }, [groups])
 
-    const createRuleToSave = ():RuleToSave => {
+    const createRuleToSave = (): RuleToSave => {
         const sources = groups?.filter(g => formRule.tagSourceGroups.includes(g.name)).map(g => g.id || '') || []
         const destinations = groups?.filter(g => formRule.tagDestinationGroups.includes(g.name)).map(g => g.id || '') || []
         const sourcesNoId = formRule.tagSourceGroups.filter(s => !tagGroups.includes(s))
@@ -96,14 +102,17 @@ const AccessControlNew = () => {
         form.validateFields()
             .then((values) => {
                 const ruleToSave = createRuleToSave()
-                dispatch(ruleActions.saveRule.request({getAccessTokenSilently, payload: ruleToSave}))
+                dispatch(ruleActions.saveRule.request({
+                    getAccessTokenSilently: getAccessTokenSilently,
+                    payload: ruleToSave
+                }))
             })
             .catch((errorInfo) => {
                 console.log('errorInfo', errorInfo)
             });
     };
 
-    const setVisibleNewRule = (status:boolean) => {
+    const setVisibleNewRule = (status: boolean) => {
         dispatch(ruleActions.setSetupNewRuleVisible(status));
     }
 
@@ -121,7 +130,7 @@ const AccessControlNew = () => {
         setVisibleNewRule(false)
     }
 
-    const onChange = (data:any) => {
+    const onChange = (data: any) => {
         setFormRule({...formRule, ...data})
     }
 
@@ -139,7 +148,7 @@ const AccessControlNew = () => {
         })
     };
 
-    const handleChangeDisabled = ({ target: { value } }: RadioChangeEvent) => {
+    const handleChangeDisabled = ({target: {value}}: RadioChangeEvent) => {
         setFormRule({
             ...formRule,
             disabled: value
@@ -147,7 +156,7 @@ const AccessControlNew = () => {
     };
 
     const tagRender = (props: CustomTagProps) => {
-        const { label, value, closable, onClose } = props;
+        const {label, value, closable, onClose} = props;
         const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
             event.preventDefault();
             event.stopPropagation();
@@ -159,7 +168,7 @@ const AccessControlNew = () => {
                 onMouseDown={onPreventMouseDown}
                 closable={closable}
                 onClose={onClose}
-                style={{ marginRight: 3 }}
+                style={{marginRight: 3}}
             >
                 <strong>{value}</strong>
             </Tag>
@@ -169,12 +178,12 @@ const AccessControlNew = () => {
     const optionRender = (label: string) => {
         let peersCount = ''
         const g = groups.find(_g => _g.name === label)
-        if (g)  peersCount = ` - ${g.peers_count || 0} ${(!g.peers_count || parseInt(g.peers_count) !== 1) ? 'peers' : 'peer'} `
+        if (g) peersCount = ` - ${g.peers_count || 0} ${(!g.peers_count || parseInt(g.peers_count) !== 1) ? 'peers' : 'peer'} `
         return (
             <>
                 <Tag
                     color="blue"
-                    style={{ marginRight: 3 }}
+                    style={{marginRight: 3}}
                 >
                     <strong>{label}</strong>
                 </Tag>
@@ -186,25 +195,27 @@ const AccessControlNew = () => {
     const dropDownRender = (menu: React.ReactElement) => (
         <>
             {menu}
-            <Divider style={{ margin: '8px 0' }} />
+            <Divider style={{margin: '8px 0'}}/>
             <Row style={{padding: '0 8px 4px'}}>
                 <Col flex="auto">
                     <span style={{color: "#9CA3AF"}}>Add new group by pressing "Enter"</span>
                 </Col>
                 <Col flex="none">
                     <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1.70455 7.19176V5.89915H10.3949C10.7727 5.89915 11.1174 5.80634 11.429 5.62074C11.7405 5.43513 11.9875 5.18655 12.1697 4.875C12.3554 4.56345 12.4482 4.21875 12.4482 3.84091C12.4482 3.46307 12.3554 3.12003 12.1697 2.81179C11.9841 2.50024 11.7356 2.25166 11.424 2.06605C11.1158 1.88044 10.7727 1.78764 10.3949 1.78764H9.83807V0.5H10.3949C11.0114 0.5 11.5715 0.650805 12.0753 0.952414C12.5791 1.25402 12.9818 1.65672 13.2834 2.16051C13.585 2.6643 13.7358 3.22443 13.7358 3.84091C13.7358 4.30161 13.648 4.73414 13.4723 5.13849C13.3 5.54285 13.0613 5.89915 12.7564 6.20739C12.4515 6.51562 12.0968 6.75758 11.6925 6.93324C11.2881 7.10559 10.8556 7.19176 10.3949 7.19176H1.70455ZM4.90128 11.0646L0.382102 6.54545L4.90128 2.02628L5.79119 2.91619L2.15696 6.54545L5.79119 10.1747L4.90128 11.0646Z" fill="#9CA3AF"/>
+                        <path
+                            d="M1.70455 7.19176V5.89915H10.3949C10.7727 5.89915 11.1174 5.80634 11.429 5.62074C11.7405 5.43513 11.9875 5.18655 12.1697 4.875C12.3554 4.56345 12.4482 4.21875 12.4482 3.84091C12.4482 3.46307 12.3554 3.12003 12.1697 2.81179C11.9841 2.50024 11.7356 2.25166 11.424 2.06605C11.1158 1.88044 10.7727 1.78764 10.3949 1.78764H9.83807V0.5H10.3949C11.0114 0.5 11.5715 0.650805 12.0753 0.952414C12.5791 1.25402 12.9818 1.65672 13.2834 2.16051C13.585 2.6643 13.7358 3.22443 13.7358 3.84091C13.7358 4.30161 13.648 4.73414 13.4723 5.13849C13.3 5.54285 13.0613 5.89915 12.7564 6.20739C12.4515 6.51562 12.0968 6.75758 11.6925 6.93324C11.2881 7.10559 10.8556 7.19176 10.3949 7.19176H1.70455ZM4.90128 11.0646L0.382102 6.54545L4.90128 2.02628L5.79119 2.91619L2.15696 6.54545L5.79119 10.1747L4.90128 11.0646Z"
+                            fill="#9CA3AF"/>
                     </svg>
                 </Col>
             </Row>
         </>
     )
 
-    const toggleEditName = (status:boolean) => {
+    const toggleEditName = (status: boolean) => {
         setEditName(status);
     }
 
-    const toggleEditDescription = (status:boolean) => {
+    const toggleEditDescription = (status: boolean) => {
         setEditDescription(status);
     }
 
@@ -217,10 +228,10 @@ const AccessControlNew = () => {
     const selectValidator = (_: RuleObject, value: string[]) => {
         let hasSpaceNamed = []
         if (!value.length) {
-            return Promise.reject(new Error("Please enter ate least one group"))
+            return Promise.reject(new Error("Please enter at least one group"))
         }
 
-        value.forEach(function(v: string) {
+        value.forEach(function (v: string) {
             if (!v.trim().length) {
                 hasSpaceNamed.push(v)
             }
@@ -248,7 +259,8 @@ const AccessControlNew = () => {
                     footer={
                         <Space style={{display: 'flex', justifyContent: 'end'}}>
                             <Button onClick={onCancel} disabled={savedRule.loading}>Cancel</Button>
-                            <Button type="primary" disabled={savedRule.loading} onClick={handleFormSubmit}>{`${formRule.id ? 'Save' : 'Create'}`}</Button>
+                            <Button type="primary" disabled={savedRule.loading}
+                                    onClick={handleFormSubmit}>{`${formRule.id ? 'Save' : 'Create'}`}</Button>
                         </Space>
                     }
                 >
@@ -258,37 +270,51 @@ const AccessControlNew = () => {
                                 <Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
                                     <Row align="top">
                                         <Col flex="none" style={{display: "flex"}}>
-                                            {!editName && !editDescription && formRule.id  &&
+                                            {!editName && !editDescription && formRule.id &&
                                                 <button type="button" aria-label="Close" className="ant-drawer-close"
                                                         style={{paddingTop: 3}}
                                                         onClick={onCancel}>
-                                                    <span role="img" aria-label="close" className="anticon anticon-close">
+                                                    <span role="img" aria-label="close"
+                                                          className="anticon anticon-close">
                                                         <CloseOutlined size={16}/>
                                                     </span>
                                                 </button>
                                             }
                                         </Col>
                                         <Col flex="auto">
-                                            { !editName && formRule.id ? (
-                                                <div className={"access-control input-text ant-drawer-title"} onClick={() => toggleEditName(true)}>{formRule.id ? formRule.name : 'New Rule'}</div>
+                                            {!editName && formRule.id ? (
+                                                <div className={"access-control input-text ant-drawer-title"}
+                                                     onClick={() => toggleEditName(true)}>{formRule.id ? formRule.name : 'New Rule'}</div>
                                             ) : (
                                                 <Form.Item
                                                     name="name"
                                                     label="Name"
-                                                    rules={[{required: true, message: 'Please add a name for this access rule', whitespace: true}]}
+                                                    rules={[{
+                                                        required: true,
+                                                        message: 'Please add a name for this access rule',
+                                                        whitespace: true
+                                                    }]}
                                                 >
-                                                    <Input placeholder="Add rule name..." ref={inputNameRef} onPressEnter={() => toggleEditName(false)} onBlur={() => toggleEditName(false)} autoComplete="off"/>
+                                                    <Input placeholder="Add rule name..." ref={inputNameRef}
+                                                           onPressEnter={() => toggleEditName(false)}
+                                                           onBlur={() => toggleEditName(false)} autoComplete="off"/>
                                                 </Form.Item>
                                             )}
-                                            { !editDescription ? (
-                                                <div className={"access-control input-text ant-drawer-subtitle"} onClick={() => toggleEditDescription(true)}>{formRule.description && formRule.description.trim() !== "" ? formRule.description : 'Add description...'}</div>
+                                            {!editDescription ? (
+                                                <div className={"access-control input-text ant-drawer-subtitle"}
+                                                     onClick={() => toggleEditDescription(true)}>
+                                                    {formRule.description && formRule.description.trim() !== "" ? formRule.description : 'Add description...'}
+                                                </div>
                                             ) : (
                                                 <Form.Item
                                                     name="description"
                                                     label="Description"
                                                     style={{marginTop: 24}}
                                                 >
-                                                    <Input placeholder="Add description..." ref={inputDescriptionRef} onPressEnter={() => toggleEditDescription(false)} onBlur={() => toggleEditDescription(false)} autoComplete="off"/>
+                                                    <Input placeholder="Add description..." ref={inputDescriptionRef}
+                                                           onPressEnter={() => toggleEditDescription(false)}
+                                                           onBlur={() => toggleEditDescription(false)}
+                                                           autoComplete="off"/>
                                                 </Form.Item>
                                             )}
                                         </Col>
@@ -308,14 +334,7 @@ const AccessControlNew = () => {
                                 <Form.Item
                                     name="disabled"
                                     label="Status"
-                                    //valuePropName="checked"
                                 >
-                                    {/*<Switch
-                                        checkedChildren={<CheckOutlined />}
-                                        unCheckedChildren={<CloseOutlined />}
-
-                                        onChange={handleChangeDisabled}
-                                    />*/}
 
                                     <Radio.Group
                                         options={optionsDisabledEnabled}
@@ -329,11 +348,10 @@ const AccessControlNew = () => {
                                 <Form.Item
                                     name="tagSourceGroups"
                                     label="Source groups"
-                                    rules={[{ validator: selectValidator }]}
-                                    style={{display: 'flex'}}
+                                    rules={[{validator: selectValidator}]}
                                 >
                                     <Select mode="tags"
-                                            style={{ width: '100%' }}
+                                            style={{width: '100%'}}
                                             placeholder="Tags Mode"
                                             tagRender={tagRender}
                                             onChange={handleChangeSource}
@@ -351,11 +369,10 @@ const AccessControlNew = () => {
                                 <Form.Item
                                     name="tagDestinationGroups"
                                     label="Destination groups"
-                                    rules={[{ validator: selectValidator }]}
-                                    style={{display: 'flex'}}
+                                    rules={[{validator: selectValidator}]}
                                 >
                                     <Select
-                                        mode="tags" style={{ width: '100%' }}
+                                        mode="tags" style={{width: '100%'}}
                                         placeholder="Tags Mode"
                                         tagRender={tagRender}
                                         onChange={handleChangeDestination}
@@ -376,10 +393,14 @@ const AccessControlNew = () => {
                                     </Col>
                                     <Col flex="auto">
                                         <Paragraph>
-                                            At the moment access rules are bi-directional by default, this means both source and destination can talk to each-other in both directions. However destination peers will not be able to communicate with each other, nor will the source peers.
+                                            At the moment access rules are bi-directional by default, this means both
+                                            source and destination can talk to each-other in both directions. However
+                                            destination peers will not be able to communicate with each other, nor will
+                                            the source peers.
                                         </Paragraph>
                                         <Paragraph>
-                                            If you want to enable all peers of the same group to talk to each other - you can add that group both as a receiver and as a destination.
+                                            If you want to enable all peers of the same group to talk to each other -
+                                            you can add that group both as a receiver and as a destination.
                                         </Paragraph>
                                     </Col>
                                 </Row>
@@ -387,7 +408,8 @@ const AccessControlNew = () => {
                             <Col span={24}>
                                 <Divider></Divider>
                                 <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
-                                        href="https://docs.netbird.io/docs/overview/acls" style={{color: 'rgb(07, 114, 128)'}}>Learn
+                                        href="https://docs.netbird.io/docs/overview/acls"
+                                        style={{color: 'rgb(07, 114, 128)'}}>Learn
                                     more about access controls</Button>
                             </Col>
                         </Row>

src/components/Banner.tsx

@@ -1,20 +1,28 @@
-import { useState } from "react";
+import {useEffect, useState} from "react";
 import {Button, Col, Row, Space, Typography} from "antd";
 import { CloseOutlined } from '@ant-design/icons';
+import {Md5} from "ts-md5";
 
 const { Text } = Typography
 
 const Banner = () => {
-	const [show, setShow] = useState(true);
+	const [show, setShow] = useState(false);
+	const banner_md5_key = 'banner_md5'
+	const banner_closed_key = 'banner_closed'
 
 	const dismiss = () => {
 		setShow(false);
+		localStorage.setItem(banner_closed_key,'true');
 	};
 
+	const announcement = "New Release! Manage DNS with NetBird."
+
+	const announcement_md5 = Md5.hashStr(announcement)
+
 	const linkLearnMore = () => {
 		return (
 			<a
-				href="https://netbird.io/blog/introducing-access-control"
+				href="https://netbird.io/docs/how-to-guides/nameservers"
 				className="font-bold underline"
 				target="_blank"
 				rel="noreferrer"
@@ -22,12 +30,24 @@ const Banner = () => {
 		)
 	}
 
+	useEffect(()=>{
+		let store_banner_md5 = localStorage.getItem(banner_md5_key);
+		let stored_banner_closed = localStorage.getItem(banner_closed_key);
+
+		if((!stored_banner_closed || stored_banner_closed !== 'true') ||
+			(!store_banner_md5 || store_banner_md5 !== announcement_md5)) {
+			setShow(true);
+			localStorage.setItem(banner_md5_key,announcement_md5);
+			localStorage.setItem(banner_closed_key,'false');
+		}
+	},[])
+
 	return show ? (
 		<div className="relative bg-indigo-600 white" color="white" style={{position: "relative", padding: "0.3rem"}} >
 			<Row>
 				<Col xs={24} sm={0} lg={0}>
 					<Text className="ant-col-md-0" style={{color: "#ffffff"}}>
-						Big news! Introducing NetBird Access Control.
+						{announcement}
 					</Text>
 				</Col>
 				<Col xs={24} sm={0} lg={0}>
@@ -38,7 +58,7 @@ const Banner = () => {
 				<Col xs={0} sm={24}>
 					<Space align="center" style={{display: "flex", justifyContent: "center"}}>
 						<Text style={{color: "#ffffff"}}>
-							Big news! Introducing NetBird Access Control.
+							{announcement}
 						</Text>
 						<span>
 							{linkLearnMore()}

src/components/ButtonCopyMessage.tsx

@@ -1,24 +1,36 @@
 import {copyToClipboard} from "../utils/common";
-import {Button, message} from "antd";
-import {StepCommand} from "./addpeer/types";
-import React from "react";
+import {Button, message, Typography} from "antd";
+import React, {ReactNode} from "react";
+
+const {Text} = Typography;
 
 type Props = {
     keyMessage: string;
-    text: string;
+    toCopy: string;
+    body: ReactNode;
     messageText: string;
     styleNotification?: any;
     style?: any;
-    className?:any;
+    className?: any;
 };
 
-const ButtonCopyMessage:React.FC<Props> = ({ keyMessage, text, messageText, styleNotification, style, className}) => {
+const ButtonCopyMessage: React.FC<Props> = ({
+                                                keyMessage,
+                                                toCopy,
+                                                body,
+                                                messageText,
+                                                styleNotification,
+                                                style,
+                                                className
+                                            }) => {
     const copyTextMessage = () => {
-        copyToClipboard(text)
-        message.success({ content: `${messageText}`, key: keyMessage, duration: 1, style: (styleNotification || {}) });
+        copyToClipboard(toCopy)
+        message.success({content: `${messageText}`, key: keyMessage, duration: 1, style: (styleNotification || {})});
     }
     return (
-        <Button type="text" onClick={copyTextMessage} style={style || {}} className={className}>{text}</Button>
+        <Button type="text" onClick={copyTextMessage} style={style || {}} className={className}>
+            {body}
+        </Button>
     )
 }
 

src/components/Loading.tsx

@@ -1,17 +1,32 @@
 import React from "react";
 import loading from "../assets/bars.svg";
 import {Space} from "antd";
+import {OidcSecure} from "@axa-fr/react-oidc";
 
-type Props = {
+type LoadingProps = {
     padding?: string;
-    width?: string;
-    height?: string;
+    width?: number;
+    height?: number;
 };
 
-const Loading:React.FC<Props> = ({padding, width, height}) => (
-    <Space direction="vertical" align="center" style={{display: 'flex', padding: `${padding || `.25em`}`}}>
-        <img src={loading} alt="Loading" style={{width: `${width || '25px'}`, height: `${height || '25px'}`}}/>
+const Loading: React.FC<LoadingProps> = ({padding, width, height}) => (
+    <Space direction="vertical" align="center" style={{
+        marginTop: `-${height ? (height / 2) + "px" : '-25px'}`,
+        marginLeft: `-${width ? (width / 2) + "px" : '-25px'}`,
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        display: 'flex'
+    }}>
+        <img src={loading} alt="Loading"
+             style={{width: `${width ? width + "px" : '25px'}`, height: `${height ? height + "px" : '25px'}`}}/>
     </Space>
 );
 
 export default Loading;
+// Wrapper of Loading to handle cases when it is shown within the authenticated layout and has to trigger authentication when token expires.
+export const SecureLoading = (props: LoadingProps) => (
+    <OidcSecure>
+        <Loading {...props} />
+    </OidcSecure>
+);

src/components/LoginError.tsx

@@ -0,0 +1,57 @@
+import {useOidc, useOidcUser} from "@axa-fr/react-oidc";
+import {Anchor, Button, Col, Result, Row, Space} from "antd";
+import React from "react";
+import {getConfig} from "../config";
+import {ResultStatusType} from "antd/lib/result";
+
+const {Link} = Anchor;
+
+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") {
+
+        let title = urlParams.get("error_description")
+        let status: ResultStatusType = "warning"
+        // this comes from the auth0 rule that links accounts
+        if (title === "account linked successfully") {
+            status = "success"
+            title = "Your account has been linked successfully. Please log in again to complete the setup."
+        }
+
+        return <Result
+            status={status}
+            title={title}
+            extra={<>
+                <Space style={{
+                    display: "flex-inline",
+                    flexDirection: "column",
+                    justifyContent: "space-around",
+                    alignContent: "center"
+                }}>
+                    <h4>Already verified your email address?</h4>
+                    <a href={window.location.origin}>
+                        <Button type="primary">
+                            Continue
+                        </Button>
+                    </a>
+
+                <Button type="link" onClick={function () {
+                    logout("", {client_id: config.clientId})
+                }}>
+                    Trouble logging in? Try again.
+                </Button>
+                </Space>
+
+            </>
+            }
+        />
+    }
+    return <div>{"Login Error: User state: " + oidcUserLoadingState}</div>
+}
+
+export default LoginError;

src/components/Navbar.tsx

@@ -1,45 +1,62 @@
 import React, {useEffect, useState} from 'react';
-import {Link} from 'react-router-dom';
+import {Link, useLocation} 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 {Avatar, Button, Col, Dropdown, Grid, Menu, Row} from 'antd'
 import {ItemType} from "antd/lib/menu/hooks/useItems";
 import {AvatarSize} from "antd/es/avatar/SizeContext";
-import { UserOutlined } from '@ant-design/icons';
+import {UserOutlined} from '@ant-design/icons';
+import {useOidc, useOidcIdToken, useOidcUser} from '@axa-fr/react-oidc';
+import {getConfig} from "../config";
+import {User} from "../store/user/types";
+import {useDispatch, useSelector} from "react-redux";
+import {RootState} from "typesafe-actions";
+import {actions as userActions} from "../store/user";
+import {useGetAccessTokenSilently} from "../utils/token";
 
-const { Text } = Typography
-const { useBreakpoint } = Grid;
+const {useBreakpoint} = Grid;
 
 const Navbar = () => {
     let location = useLocation();
-    const {
-        user,
-        isAuthenticated,
-        logout,
-    } = useAuth0();
+    const config = getConfig();
+    const { logout } = useOidc();
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
+    const dispatch = useDispatch()
+
+    const {oidcUser} = useOidcUser();
+    const {idTokenPayload} = useOidcIdToken()
+    const user = oidcUser;
+    const [currentUser, setCurrentUser] = useState({} as User)
 
     const screens = useBreakpoint();
 
     const [hideMenuUser, setHideMenuUser] = useState(false)
+    const users = useSelector((state: RootState) => state.user.data)
+    const [isRefreshingUserState, setIsRefreshingUserState] = useState(false)
+
+    const items = [
+        {label: (<Link to="/peers">Peers</Link>), key: '/peers'},
+        {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="/routes">Network Routes</Link>), key: '/routes'},
+        { label: (<Link  to="/dns">DNS</Link>), key: '/dns' },
+        {label: (<Link to="/users">Users</Link>), key: '/users'},
+        {label: (<Link to="/activity">Activity</Link>), key: '/activity'}
+    ] as ItemType[]
 
     const userEmailKey = 'user-email'
     const userLogoutKey = 'user-logout'
     const userDividerKey = 'user-divider'
-    const [menuItems, setMenuItems] = useState([
-        { label: (<Link  to="/peers">Peers</Link>), key: '/peers' },
-        { 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 adminOnlyTabs = ["/setup-keys", "/acls", "/routes", "/dns", "/activity"]
+    const [menuItems, setMenuItems] = useState(items)
+    const logoutWithRedirect = () =>
+        logout("/", {client_id: config.clientId});
 
     useEffect(() => {
-        const fs = menuItems.filter(m => m?.key !== userEmailKey && m?.key !== userLogoutKey && m?.key !== userDividerKey)
+        const fs = items.filter(m => showTab(m?.key?.toString(), currentUser) && m?.key !== userEmailKey && m?.key !== userLogoutKey && m?.key !== userDividerKey)
         if (screens.xs === true) {
             setHideMenuUser(false)
-            fs.push({ type: 'divider', key: userDividerKey })
+            fs.push({type: 'divider', key: userDividerKey})
             fs.push({
                 label: (
                     <Link to="#">{user?.name}</Link>
@@ -47,13 +64,51 @@ const Navbar = () => {
                 icon: createAvatar("small"),
                 key: userEmailKey
             })
-            fs.push({ label: (<Button type="link" block onClick={logoutWithRedirect}>Logout</Button>), key: userLogoutKey })
+            fs.push({
+                label: (<Button type="link" block onClick={logoutWithRedirect}>Logout</Button>),
+                key: userLogoutKey
+            })
             setMenuItems([...fs])
             return
         }
         setMenuItems([...fs])
         setHideMenuUser(true)
-    }, [screens])
+    }, [screens, currentUser])
+
+    useEffect(() => {
+        if (users.length === 0 && !isRefreshingUserState &&
+        window.location.pathname !== '/peers' &&
+        window.location.pathname !==  '/users') {
+            setIsRefreshingUserState(true)
+            dispatch(userActions.getUsers.request({getAccessTokenSilently: getAccessTokenSilently, payload: null}))
+            return
+        }
+        if (users.length === 0 && isRefreshingUserState) {
+            return
+        }
+        let runUser = oidcUser
+        if (!oidcUser) {
+            runUser = idTokenPayload
+        }
+        setIsRefreshingUserState(false)
+        if (runUser && runUser.sub) {
+            const found = users.find(u => u.id == runUser.sub)
+            if (found) {
+                setCurrentUser(found)
+            }
+        }
+    }, [users, oidcUser])
+
+    const showTab = (key: string | undefined, user: User | undefined) => {
+        if (!user) {
+            return false
+        }
+
+        if (user.role?.toLowerCase() === "admin") {
+            return true
+        }
+        return !adminOnlyTabs.find(t => t === key)
+    }
 
     const menuUser = (
         <Menu
@@ -63,24 +118,16 @@ 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) => {
+    const createAvatar = (size: AvatarSize) => {
         return user?.picture ? (
-            <Avatar size={size} src={user?.picture} icon={<UserOutlined />} />
+            <Avatar size={size} src={user?.picture} icon={<UserOutlined/>}/>
         ) : (
             <Avatar size={size}>{(user?.name || '').slice(0, 1).toUpperCase()}</Avatar>
         )
@@ -100,7 +147,8 @@ const Navbar = () => {
                 </Col>
                 <Col flex="1 1 auto">
                     <div>
-                        <Menu mode="horizontal" selectable={true} selectedKeys={[location.pathname]} defaultSelectedKeys={[location.pathname]} items={menuItems}/>
+                        <Menu mode="horizontal" selectable={true} selectedKeys={[location.pathname]}
+                              defaultSelectedKeys={[location.pathname]} items={menuItems}/>
                     </div>
                 </Col>
                 {hideMenuUser &&

src/components/PeerUpdate.tsx

@@ -2,24 +2,28 @@ import React, {useEffect, useRef, useState} from 'react';
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
 import {actions as peerActions} from '../store/peer';
-import {Button, Col, Divider, Drawer, Form, Input, Row, Select, Space, Tag, Typography} from "antd";
+import {Button, Col, Collapse, 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 {FormPeer, Peer, PeerGroupsToSave} from "../store/peer/types";
 import {Group, GroupPeer} from "../store/group/types";
-import {CloseOutlined, EditOutlined, FlagFilled} from "@ant-design/icons";
+import {CloseOutlined, EditOutlined} from "@ant-design/icons";
 import {RuleObject} from 'antd/lib/form';
+import {useGetAccessTokenSilently} from "../utils/token";
+import {timeAgo} from "../utils/common";
 
-const { Paragraph } = Typography;
-const { Option } = Select;
+const {Paragraph} = Typography;
+const {Option} = Select;
+const {Panel} = Collapse;
+const punycode = require('punycode/')
 
 const PeerUpdate = () => {
-    const { getAccessTokenSilently } = useAuth0()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
-    const groups =  useSelector((state: RootState) => state.group.data)
-    const peer =   useSelector((state: RootState) => state.peer.peer)
-    const [formPeer, setFormPeer] = useState({} as Peer)
+    const groups = useSelector((state: RootState) => state.group.data)
+    const users = useSelector((state: RootState) => state.user.data)
+    const peer: Peer = useSelector((state: RootState) => state.peer.peer)
+    const [formPeer, setFormPeer] = useState({} as FormPeer)
     const updateGroupsVisible = useSelector((state: RootState) => state.peer.updateGroupsVisible)
     const savedGroups = useSelector((state: RootState) => state.peer.savedGroups)
     const updatedPeers = useSelector((state: RootState) => state.peer.updatedPeer)
@@ -29,6 +33,7 @@ const PeerUpdate = () => {
     const [peerGroups, setPeerGroups] = useState([] as GroupPeer[])
     const inputNameRef = useRef<any>(null)
     const [editName, setEditName] = useState(false)
+    const [estimatedName, setEstimatedName] = useState("")
     const [callingPeerAPI, setCallingPeerAPI] = useState(false)
     const [callingGroupAPI, setCallingGroupAPI] = useState(false)
     const [isSubmitRunning, setSubmitRunning] = useState(false)
@@ -47,21 +52,21 @@ const PeerUpdate = () => {
         if (callingPeerAPI && updatedPeers.success) {
             setCallingPeerAPI(false)
         }
-    },[updatedPeers])
+    }, [updatedPeers])
 
     // wait save groups to succeed
     useEffect(() => {
         if (callingGroupAPI && savedGroups.success) {
             setCallingGroupAPI(false)
         }
-    },[savedGroups])
+    }, [savedGroups])
 
     // clean temp state and close
     useEffect(() => {
         if (isSubmitRunning && !callingGroupAPI && !callingPeerAPI) {
             onCancel()
         }
-    },[callingGroupAPI,callingPeerAPI])
+    }, [callingGroupAPI, callingPeerAPI])
 
     useEffect(() => {
         if (editName) inputNameRef.current!.focus({
@@ -75,18 +80,26 @@ const PeerUpdate = () => {
         const gs_name = gs?.map(g => g.name) as string[]
         setPeerGroups(gs)
         setSelectedTagGroups(gs_name)
-        setFormPeer(peer)
-        form.setFieldsValue({
-            name: formPeer.name ? formPeer.name: peer.name,
-            groups: gs_name
-        })
+        const fPeer = {
+            ...peer,
+            name: formPeer.name ? formPeer.name : peer.name,
+            groupsNames: gs_name,
+            userEmail: users?.find(u => u.id === peer.user_id)?.email,
+            last_seen: peer.connected ? "just now" : String(timeAgo(peer.last_seen)),
+            ui_version: peer.ui_version ? peer.ui_version.replace("netbird-desktop-ui/", "") : ""
+        } as FormPeer
+        setFormPeer(fPeer)
+        form.setFieldsValue(fPeer)
     }, [peer])
 
     useEffect(() => {
         setTagGroups(groups?.map(g => g.name) || [])
     }, [groups])
 
-    const toggleEditName = (status:boolean) => {
+    useEffect(() => {
+    }, [users])
+
+    const toggleEditName = (status: boolean) => {
         setEditName(status)
     }
 
@@ -104,7 +117,7 @@ const PeerUpdate = () => {
     }, [selectedTagGroups])
 
     const tagRender = (props: CustomTagProps) => {
-        const { label, value, closable, onClose } = props;
+        const {label, value, closable, onClose} = props;
         const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
             event.preventDefault();
             event.stopPropagation();
@@ -121,7 +134,7 @@ const PeerUpdate = () => {
                 onMouseDown={onPreventMouseDown}
                 closable={tagClosable}
                 onClose={onClose}
-                style={{ marginRight: 3 }}
+                style={{marginRight: 3}}
             >
                 <strong>{value}</strong>
             </Tag>
@@ -131,12 +144,12 @@ const PeerUpdate = () => {
     const optionRender = (label: string) => {
         let peersCount = ''
         const g = groups.find(_g => _g.name === label)
-        if (g)  peersCount = ` - ${g.peers_count || 0} ${(!g.peers_count || parseInt(g.peers_count) !== 1) ? 'peers' : 'peer'} `
+        if (g) peersCount = ` - ${g.peers_count || 0} ${(!g.peers_count || parseInt(g.peers_count) !== 1) ? 'peers' : 'peer'} `
         return (
             <>
                 <Tag
                     color="blue"
-                    style={{ marginRight: 3 }}
+                    style={{marginRight: 3}}
                 >
                     <strong>{label}</strong>
                 </Tag>
@@ -148,21 +161,23 @@ const PeerUpdate = () => {
     const dropDownRender = (menu: React.ReactElement) => (
         <>
             {menu}
-            <Divider style={{ margin: '8px 0' }} />
+            <Divider style={{margin: '8px 0'}}/>
             <Row style={{padding: '0 8px 4px'}}>
                 <Col flex="auto">
                     <span style={{color: "#9CA3AF"}}>Add new group by pressing "Enter"</span>
                 </Col>
                 <Col flex="none">
                     <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M1.70455 7.19176V5.89915H10.3949C10.7727 5.89915 11.1174 5.80634 11.429 5.62074C11.7405 5.43513 11.9875 5.18655 12.1697 4.875C12.3554 4.56345 12.4482 4.21875 12.4482 3.84091C12.4482 3.46307 12.3554 3.12003 12.1697 2.81179C11.9841 2.50024 11.7356 2.25166 11.424 2.06605C11.1158 1.88044 10.7727 1.78764 10.3949 1.78764H9.83807V0.5H10.3949C11.0114 0.5 11.5715 0.650805 12.0753 0.952414C12.5791 1.25402 12.9818 1.65672 13.2834 2.16051C13.585 2.6643 13.7358 3.22443 13.7358 3.84091C13.7358 4.30161 13.648 4.73414 13.4723 5.13849C13.3 5.54285 13.0613 5.89915 12.7564 6.20739C12.4515 6.51562 12.0968 6.75758 11.6925 6.93324C11.2881 7.10559 10.8556 7.19176 10.3949 7.19176H1.70455ZM4.90128 11.0646L0.382102 6.54545L4.90128 2.02628L5.79119 2.91619L2.15696 6.54545L5.79119 10.1747L4.90128 11.0646Z" fill="#9CA3AF"/>
+                        <path
+                            d="M1.70455 7.19176V5.89915H10.3949C10.7727 5.89915 11.1174 5.80634 11.429 5.62074C11.7405 5.43513 11.9875 5.18655 12.1697 4.875C12.3554 4.56345 12.4482 4.21875 12.4482 3.84091C12.4482 3.46307 12.3554 3.12003 12.1697 2.81179C11.9841 2.50024 11.7356 2.25166 11.424 2.06605C11.1158 1.88044 10.7727 1.78764 10.3949 1.78764H9.83807V0.5H10.3949C11.0114 0.5 11.5715 0.650805 12.0753 0.952414C12.5791 1.25402 12.9818 1.65672 13.2834 2.16051C13.585 2.6643 13.7358 3.22443 13.7358 3.84091C13.7358 4.30161 13.648 4.73414 13.4723 5.13849C13.3 5.54285 13.0613 5.89915 12.7564 6.20739C12.4515 6.51562 12.0968 6.75758 11.6925 6.93324C11.2881 7.10559 10.8556 7.19176 10.3949 7.19176H1.70455ZM4.90128 11.0646L0.382102 6.54545L4.90128 2.02628L5.79119 2.91619L2.15696 6.54545L5.79119 10.1747L4.90128 11.0646Z"
+                            fill="#9CA3AF"/>
                     </svg>
                 </Col>
             </Row>
         </>
     )
 
-    const setUpdateGroupsVisible = (status:boolean) => {
+    const setUpdateGroupsVisible = (status: boolean) => {
         dispatch(peerActions.setUpdateGroupsVisible(status));
     }
 
@@ -171,27 +186,27 @@ const PeerUpdate = () => {
         setUpdateGroupsVisible(false)
         setEditName(false)
         // setSaveBtnDisabled(true)
-        setFormPeer({} as Peer)
+        setFormPeer({} as FormPeer)
         setCallingPeerAPI(false)
         setCallingPeerAPI(false)
         setSubmitRunning(false)
     }
 
-    const noUpdateToGroups = ():Boolean => {
+    const noUpdateToGroups = (): Boolean => {
         return !peerGroupsToSave.groupsToRemove.length && !peerGroupsToSave.groupsToAdd.length && !peerGroupsToSave.groupsNoId.length
     }
 
-    const noUpdateToName = ():Boolean => {
+    const noUpdateToName = (): Boolean => {
         return !formPeer.name || formPeer.name === peer.name
     }
 
-    const onChange = (data:any) => {
+    const onChange = (data: any) => {
         setFormPeer({...formPeer, ...data})
     }
 
     const handleChangeTags = (value: string[]) => {
         let validatedValues: string[] = []
-        value.forEach(function(v) {
+        value.forEach(function (v) {
             if (v.trim().length) {
                 validatedValues.push(v)
             }
@@ -199,7 +214,21 @@ const PeerUpdate = () => {
         setSelectedTagGroups(validatedValues)
     };
 
-    const createPeerToSave = ():Peer => {
+    const nameValidator = (_: RuleObject, value: string) => {
+        let punyName = punycode.toASCII(value.toLowerCase())
+        let domain = ""
+        if (formPeer.dns_label) {
+            let labelList = formPeer.dns_label.split(".")
+            if (labelList.length > 1) {
+                labelList.splice(0,1)
+                domain = "." + labelList.join(".")
+            }
+        }
+        setEstimatedName(punyName+domain)
+        return Promise.resolve()
+    }
+
+    const createPeerToSave = (): Peer => {
         return {
             id: formPeer.id,
             ssh_enabled: formPeer.ssh_enabled,
@@ -214,11 +243,17 @@ const PeerUpdate = () => {
                 if (!noUpdateToName()) {
                     const peerUpdate = createPeerToSave()
                     setCallingPeerAPI(true)
-                    dispatch(peerActions.updatePeer.request({getAccessTokenSilently, payload: peerUpdate}))
+                    dispatch(peerActions.updatePeer.request({
+                        getAccessTokenSilently: getAccessTokenSilently,
+                        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: getAccessTokenSilently,
+                        payload: peerGroupsToSave
+                    }))
                 }
             })
             .catch((errorInfo) => {
@@ -234,7 +269,7 @@ const PeerUpdate = () => {
             return Promise.reject(new Error("Please enter ate least one group"))
         }
 
-        value.forEach(function(v: string) {
+        value.forEach(function (v: string) {
             if (!v.trim().length) {
                 hasSpaceNamed.push(v)
             }
@@ -260,25 +295,28 @@ const PeerUpdate = () => {
                 <Drawer
                     forceRender={true}
                     headerStyle={{display: "none"}}
-                    visible={true}
+                    open={true}
                     bodyStyle={{paddingBottom: 80}}
                     onClose={onCancel}
                     autoFocus={true}
                     footer={
                         <Space style={{display: 'flex', justifyContent: 'end'}}>
                             <Button onClick={onCancel} disabled={savedGroups.loading}>Cancel</Button>
-                            <Button type="primary" disabled={(savedGroups.loading || updatedPeers.loading) || (noUpdateToGroups() && noUpdateToName())} onClick={handleFormSubmit}>Save</Button>
+                            <Button type="primary"
+                                    disabled={(savedGroups.loading || updatedPeers.loading) || (noUpdateToGroups() && noUpdateToName())}
+                                    onClick={handleFormSubmit}>Save</Button>
                         </Space>
                     }
                 >
-                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}>
+                    <Form layout="vertical" requiredMark={false} form={form} onValuesChange={onChange}>
                         <Row gutter={16}>
                             <Col span={24}>
                                 <Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
                                     <Row align="top">
                                         <Col flex="none" style={{display: "flex"}}>
                                             {!editName && peer.id &&
-                                                <button type="button" aria-label="Close" className="ant-drawer-close"
+                                                <button type="button" aria-label="Close" autoFocus={true}
+                                                        className="ant-drawer-close"
                                                         style={{paddingTop: 3}}
                                                         onClick={onCancel}>
                                                     <span role="img" aria-label="close"
@@ -294,46 +332,121 @@ const PeerUpdate = () => {
                                                      onClick={() => toggleEditName(true)}>{formPeer.name ? formPeer.name : peer.name}
                                                     <EditOutlined/></div>
                                             ) : (
-                                                <Form.Item
-                                                    name="name"
-                                                    label="Update Name"
-                                                    rules={[{
-                                                        required: true,
-                                                        message: 'Please add a new name for this peer',
-                                                        whitespace: true
-                                                    }]}
-                                                    style={{display: 'flex'}}
-                                                >
-                                                    <Input
-                                                        placeholder={peer.name}
-                                                        ref={inputNameRef}
-                                                        onPressEnter={() => toggleEditName(false)}
-                                                        onBlur={() => toggleEditName(false)}
-                                                        // onChange={(e) => handleChangeName(e.)}
-                                                        autoComplete="off"/>
-                                                </Form.Item>)}
+                                                <Row>
+                                                    <Space direction={"vertical"} size="small">
+                                                        <Form.Item
+                                                            name="name"
+                                                            label="Name"
+                                                            style={{margin: '1px'}}
+                                                            rules={[{
+                                                                required: true,
+                                                                message: 'Please add a new name for this peer',
+                                                                whitespace: true
+                                                            },{validator:nameValidator}]}
+                                                        >
+                                                            <Input
+                                                                placeholder={peer.name}
+                                                                ref={inputNameRef}
+                                                                onPressEnter={() => toggleEditName(false)}
+                                                                onBlur={() => toggleEditName(false)}
+                                                                autoComplete="off"
+                                                                max={59}/>
+                                                        </Form.Item>
+                                                    <Form.Item
+                                                        label="New peer domain name preview"
+                                                        tooltip="If the domain name already exists, we add an increment number suffix to it"
+                                                        style={{margin: '1px'}}
+                                                    >
+                                                        <Paragraph>
+                                                            <Tag>
+                                                                {estimatedName}
+                                                            </Tag>
+                                                        </Paragraph>
+                                                        </Form.Item>
+                                                    </Space>
+
+
+                                                </Row>
+                                            )}
                                         </Col>
                                     </Row>
 
                                 </Header>
                             </Col>
                         </Row>
-                            <Row gutter={16}>
-
+                        <Row gutter={16}>
+                            <Col span={12}>
+                                <Form.Item
+                                    name="ip"
+                                    label={<>
+                                            <span style={{
+                                                marginRight: "5px",
+                                            }}>NetBird IP</span>
+                                        <Tag
+                                            color={formPeer.connected ? "green" : "red"}>{formPeer.connected ? "online" : "offline"}</Tag>
+                                    </>}
+                                >
+                                    <Input
+                                        disabled={true}
+                                        value={formPeer.ip}
+                                        style={{color: "#5a5c5a"}}
+                                        autoComplete="off"/>
+                                </Form.Item>
+                            </Col>
+                            <Col span={12}>
+                                <Form.Item
+                                    name="last_seen"
+                                    label="Last seen"
+                                >
+                                    <Input
+                                        disabled={true}
+                                        value={formPeer.last_seen}
+                                        style={{color: "#5a5c5a"}}
+                                        autoComplete="off"/>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                        <Row gutter={16}>
                             <Col span={24}>
                                 <Form.Item
-                                    name="groups"
-                                    label="Select groups to associate with this peer"
-                                    rules={[{ validator: selectValidator }]}
-                                    style={{display: 'flex'}}
+                                    name="dns_label"
+                                    label="Domain name"
+                                >
+                                    <Input
+                                        disabled={true}
+                                        value={formPeer.userEmail}
+                                        style={{color: "#5a5c5a"}}
+                                        autoComplete="off"/>
+                                </Form.Item>
+                            </Col>
+                        </Row>
+                        <Row gutter={16}>
+                            {formPeer.user_id && (
+                                <Col span={24}>
+                                    <Form.Item
+                                        name="userEmail"
+                                        label="User"
+                                    >
+                                        <Input
+                                            disabled={true}
+                                            value={formPeer.userEmail}
+                                            style={{color: "#5a5c5a"}}
+                                            autoComplete="off"/>
+                                    </Form.Item>
+                                </Col>
+                            )}
+                            <Col span={24}>
+                                <Form.Item
+                                    name="groupsNames"
+                                    label="Select peer groups"
+                                    rules={[{validator: selectValidator}]}
+
                                 >
                                     <Select
                                         mode="tags"
-                                        style={{ width: '100%' }}
+                                        style={{width: '100%'}}
                                         placeholder="Select groups..."
                                         tagRender={tagRender}
-                                        // onDropdownVisibleChange={evaluateSubmit}
-                                        // onSelect={evaluateSubmit}
 
                                         dropdownRender={dropDownRender}
                                         onChange={handleChangeTags}>
@@ -345,7 +458,7 @@ const PeerUpdate = () => {
                                     </Select>
                                 </Form.Item>
                             </Col>
-                            <Col span={24}>
+                            {/*<Col span={24}>
                                 <Row wrap={false} gutter={12}>
                                     <Col flex="none">
                                         <FlagFilled/>
@@ -356,6 +469,69 @@ const PeerUpdate = () => {
                                         </Paragraph>
                                     </Col>
                                 </Row>
+                            </Col>*/}
+                            {/*<Col span={24}>
+                                <Divider orientation="left" plain style={{color: "#5a5c5a"}}>
+                                    System Info
+                                </Divider>
+                            </Col>*/}
+                            <Col span={24}>
+                                <Collapse onChange={onChange} bordered={false} ghost={true}
+                                          style={{color: "#5a5c5a"}}>
+                                    <Panel key="0" header="System Info">
+                                        <Row gutter={16}>
+                                            <Col span={12}>
+                                                <Form.Item
+                                                    name="hostname"
+                                                    label="Hostname"
+                                                >
+                                                    <Input
+                                                        disabled={true}
+                                                        value={formPeer.hostname}
+                                                        style={{color: "#5a5c5a"}}
+                                                        autoComplete="off"/>
+                                                </Form.Item>
+                                            </Col>
+                                            <Col span={12}>
+                                                <Form.Item
+                                                    name="os"
+                                                    label="Operating system"
+                                                >
+                                                    <Input
+                                                        disabled={true}
+                                                        value={formPeer.os}
+                                                        style={{color: "#5a5c5a"}}
+                                                        autoComplete="off"/>
+                                                </Form.Item>
+                                            </Col>
+                                            <Col span={12}>
+                                                <Form.Item
+                                                    name="version"
+                                                    label="Agent version"
+                                                >
+                                                    <Input
+                                                        disabled={true}
+                                                        value={formPeer.os}
+                                                        style={{color: "#5a5c5a"}}
+                                                        autoComplete="off"/>
+                                                </Form.Item>
+                                            </Col>
+                                            {formPeer.ui_version && (
+                                                <Col span={12}>
+                                                <Form.Item
+                                                    name="ui_version"
+                                                    label="UI version"
+                                                >
+                                                    <Input
+                                                        disabled={true}
+                                                        value={formPeer.ui_version}
+                                                        style={{color: "#5a5c5a"}}
+                                                        autoComplete="off"/>
+                                                </Form.Item>
+                                            </Col>)}
+                                        </Row>
+                                    </Panel>
+                                </Collapse>
                             </Col>
                         </Row>
                     </Form>