Fix add peer popup tab layout on mobile (#154)

Related changes for netbirdio/netbird#700

.github/workflows/build_and_push.yml

@@ -11,10 +11,10 @@ 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'
@@ -22,34 +22,31 @@ jobs:
       - name: Install dependecies
         run: npm install
 
-      - name: List dependencies
-        run: npm list
-
       - name: Build 
         # skiping fail on warning for now
         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

README.md

@@ -36,24 +36,43 @@ Disclaimer. We believe that proper user management system is not a trivial task
 use Auth0 service that covers all our needs (user management, social login, JTW for the management API).
 Auth0 so far is the only 3rd party dependency that can't be really self-hosted.
 
-1. install [Docker](https://docs.docker.com/get-docker/)
-2. register [Auth0](https://auth0.com/) account
-3. running Wiretrustee UI Dashboard requires the following Auth0 environmental variables to be set (see docker command below):
+1. Install [Docker](https://docs.docker.com/get-docker/)
+2. Register [Auth0](https://auth0.com/) account
+3. Running Wiretrustee UI Dashboard requires the following Auth0 environmental variables to be set (see docker command below):
 
-   ```AUTH0_DOMAIN``` ```AUTH0_CLIENT_ID``` ```AUTH0_AUDIENCE```
+   `AUTH0_DOMAIN` `AUTH0_CLIENT_ID` `AUTH0_AUDIENCE`
 
    To obtain these, please use [Auth0 React SDK Guide](https://auth0.com/docs/quickstart/spa/react/01-login#configure-auth0) up until "Configure Allowed Web Origins"
 
-4. Wiretrustee UI Dashboard uses Wiretrustee Management Service HTTP API, so setting ```WIRETRUSTEE_MGMT_API_ENDPOINT``` is required. Most likely it will be ```http://localhost:33071``` if you are hosting Management API on the same server.
+4. Wiretrustee UI Dashboard uses Wiretrustee Management Service HTTP API, so setting `NETBIRD_MGMT_API_ENDPOINT` is required. Most likely it will be `http://localhost:33071` if you are hosting Management API on the same server.
 5. Run docker container without SSL (Let's Encrypt):
 
-   ```docker run -d --name wiretrustee-dashboard --rm -p 80:80 -p 443:443  -e AUTH0_DOMAIN=<SET YOUR AUTH DOMAIN> -e AUTH0_CLIENT_ID=<SET YOUR CLIENT ID> -e AUTH0_AUDIENCE=<SET YOUR AUDIENCE> -e  WIRETRUSTEE_MGMT_API_ENDPOINT=<SET YOUR MANAGEMETN API URL> wiretrustee/dashboard:main```
+   ```shell
+   docker run -d --name wiretrustee-dashboard \
+     --rm -p 80:80 -p 443:443 \
+     -e AUTH0_DOMAIN=<SET YOUR AUTH DOMAIN> \
+     -e AUTH0_CLIENT_ID=<SET YOUR CLIENT ID> \
+     -e AUTH0_AUDIENCE=<SET YOUR AUDIENCE> \
+     -e NETBIRD_MGMT_API_ENDPOINT=<SET YOUR MANAGEMETN API URL> \
+     wiretrustee/dashboard:main
+   ```
 6. Run docker container with SSL (Let's Encrypt):
 
-   ```docker run -d --name wiretrustee-dashboard --rm -p 80:80 -p 443:443 -e NGINX_SSL_PORT=443 -e LETSENCRYPT_DOMAIN=<YOUR PUBLIC DOMAIN> -e LETSENCRYPT_EMAIL=<YOUR EMAIL>  -e AUTH0_DOMAIN=<SET YOUR AUTH DOMAIN> -e AUTH0_CLIENT_ID=<SET YOUR CLEITN ID> -e AUTH0_AUDIENCE=<SET YOUR AUDIENCE> -e  WIRETRUSTEE_MGMT_API_ENDPOINT=<SET YOUR MANAGEMETN API URL> wiretrustee/dashboard:main```
+   ```shell
+   docker run -d --name wiretrustee-dashboard \
+     --rm -p 80:80 -p 443:443 \
+     -e NGINX_SSL_PORT=443 \
+     -e LETSENCRYPT_DOMAIN=<YOUR PUBLIC DOMAIN> \
+     -e LETSENCRYPT_EMAIL=<YOUR EMAIL> \
+     -e AUTH0_DOMAIN=<SET YOUR AUTH DOMAIN> \
+     -e AUTH0_CLIENT_ID=<SET YOUR CLEITN ID> \
+     -e AUTH0_AUDIENCE=<SET YOUR AUDIENCE> \
+     -e NETBIRD_MGMT_API_ENDPOINT=<SET YOUR MANAGEMETN API URL> \
+     wiretrustee/dashboard:main
+   ```
 
 ## How to run local development
 1. Install node 16
-2. create and update the src/.local-config.json file. This file should contain values to be replaced from src/config.json
+2. create and update the `src/.local-config.json` file. This file should contain values to be replaced from `src/config.json`
 3. run `npm install`
-4. run `npm run start dev`
+4. run `npm run start dev`

docker/init_react_envs.sh

@@ -44,19 +44,20 @@ fi
 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
-export NETBIRD_LATEST_VERSION=$(basename $(curl -fs -o/dev/null -w %{redirect_url} ${REPO}releases/latest))
 echo "NetBird latest version: ${NETBIRD_LATEST_VERSION}"
 
 # replace ENVs in the config
-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"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$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

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
+    "@ant-design/icons": "^4.8.0",
     "@axa-fr/react-oidc": "^5.14.0",
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
@@ -18,7 +18,7 @@
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.25",
-    "antd": "^4.20.6",
+    "antd": "^5.3.1",
     "autoprefixer": "^10.4.4",
     "axios": "^0.27.2",
     "cidr-regex": "^3.1.1",
@@ -27,11 +27,15 @@
     "highlight.js": "^11.2.0",
     "history": "^5.0.1",
     "lodash": "^4.17.21",
+    "moment": "^2.29.4",
     "postcss": "^8.4.12",
     "prop-types": "^15.7.2",
+    "punycode": "^2.1.1",
     "rc-overflow": "^1.2.8",
     "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.1.0",
+    "react-hotjar": "^5.1.0",
     "react-redux": "^8.0.2",
     "react-router-dom": "^5.3.3",
     "react-scripts": "^5.0.1",
@@ -42,6 +46,7 @@
     "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"

public/index.html

@@ -5,6 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <meta name="robots" content="noindex">
     <meta
       name="description"
       content="NetBird Management Dashboard"

public/robots.txt

@@ -1,3 +1,3 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
-Disallow:
+Disallow: /

src/App.tsx

@@ -1,23 +1,40 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {Provider} from "react-redux";
-import {Redirect, Route, Switch} from 'react-router-dom';
-import Navbar from './components/Navbar';
-import Peers from './views/Peers';
-import FooterComponent from './components/FooterComponent';
-import SetupKeys from "./views/SetupKeys";
-import AddPeer from "./views/AddPeer";
-import Users from './views/Users';
-import AccessControl from './views/AccessControl';
-import Routes from './views/Routes';
+import {apiClient, store} from "./store";
+import {hotjar} from 'react-hotjar';
+import {getConfig} from "./config";
 import Banner from "./components/Banner";
-import {store} from "./store";
-import { Col, Layout, Row} from 'antd';
+import {Col, ConfigProvider, Layout, Row} from "antd";
 import {Container} from "./components/Container";
-import {withOidcSecure} from '@axa-fr/react-oidc';
+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";
+import Settings from "./views/Settings";
+
 
 const {Header, Content} = Layout;
 
 function App() {
+    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);
 
@@ -25,7 +42,6 @@ function App() {
         const hideMenu = () => {
             if (window.innerWidth > 768 && isOpen) {
                 setIsOpen(false);
-                console.log('i resized');
             }
         };
 
@@ -34,49 +50,82 @@ function App() {
         return () => {
             window.removeEventListener('resize', hideMenu);
         };
-    });
+    }, []);
+
+    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)
+                })
+        }
+
+    }, [getAccessTokenSilently])
 
     return (
-        <Provider store={store}>
-                <Layout>
-                    <Banner/>
-                    <Header className="header" style={{
-                        display: "flex",
-                        flexDirection: "column",
-                        justifyContent: "space-around",
-                        alignContent: "center"
-                    }}>
-                        <Row justify="space-around" align="middle">
-                            <Col span={24}>
-                                <Container>
-                                    <Navbar/>
-                                </Container>
-                            </Col>
-                        </Row>
-                    </Header>
-                    <Content style={{ minHeight: "100vh"}}>
-                        <Switch>
-                            <Route
-                                exact
-                                path="/"
-                                render={() => {
-                                    return (
-                                        <Redirect to="/peers"/>
-                                    )
-                                }}
-                            />
-                            <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)}/>
-                        </Switch>
-                    </Content>
-                    <FooterComponent/>
-                </Layout>
-        </Provider>
-    );
+        <>
+        <ConfigProvider
+            theme={{
+                token: {
+                    borderRadius: 4,
+                    colorPrimary: "#1890ff",
+                    fontFamily: "Arial"
+                },
+            }}
+        >
+            <Provider store={store}>
+                {!show && <SecureLoading padding="3em" width={50} height={50}/>}
+                {show &&
+                    <Layout>
+                        <Banner/>
+                        <Header className="header" style={{
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "space-around",
+                            alignContent: "center"
+                        }}>
+                            <Row justify="space-around" align="middle">
+                                <Col span={24}>
+                                    <Container>
+                                        <Navbar/>
+                                    </Container>
+                                </Col>
+                            </Row>
+                        </Header>
+                        <Content style={{minHeight: "100vh"}}>
+                            <Switch>
+                                <Route
+                                    exact
+                                    path="/"
+                                    render={() => {
+                                        return (
+                                            <Redirect to="/peers"/>
+                                        )
+                                    }}
+                                />
+                                <Route path='/peers' exact component={withOidcSecure(Peers)}/>
+                                <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)}/>
+                                <Route path="/settings" component={withOidcSecure(Settings)}/>
+                            </Switch>
+                        </Content>
+                        <FooterComponent/>
+                    </Layout>
+                }
+            </Provider>
+
+        </ConfigProvider>
+        </>
+    )
 }
 
 export default App;

src/components/AccessControlModalGroups.tsx

@@ -16,7 +16,7 @@ const AccessControlModalGroups:React.FC<Props> = ({data, title, visible, onCance
 
     return (
         <>
-            <Modal title={title} visible={isModalVisible} onCancel={() => onCancel()} footer={null}>
+            <Modal title={title} open={isModalVisible} onCancel={() => onCancel()} footer={null}>
                 <List
                     itemLayout="horizontal"
                     dataSource={data as Group[] | undefined}

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 { uniq } from "lodash"
+import {uniq} from "lodash"
 import {Header} from "antd/es/layout/layout";
 import {RuleObject} from "antd/lib/form";
-import {useOidcAccessToken} from "@axa-fr/react-oidc";
+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 {accessToken} = useOidcAccessToken()
+    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:accessToken, 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>
@@ -322,10 +348,10 @@ const AccessControlNew = () => {
                                 <Form.Item
                                     name="tagSourceGroups"
                                     label="Source groups"
-                                    rules={[{ validator: selectValidator }]}
+                                    rules={[{validator: selectValidator}]}
                                 >
                                     <Select mode="tags"
-                                            style={{ width: '100%' }}
+                                            style={{width: '100%'}}
                                             placeholder="Tags Mode"
                                             tagRender={tagRender}
                                             onChange={handleChangeSource}
@@ -343,10 +369,10 @@ const AccessControlNew = () => {
                                 <Form.Item
                                     name="tagDestinationGroups"
                                     label="Destination groups"
-                                    rules={[{ validator: selectValidator }]}
+                                    rules={[{validator: selectValidator}]}
                                 >
                                     <Select
-                                        mode="tags" style={{ width: '100%' }}
+                                        mode="tags" style={{width: '100%'}}
                                         placeholder="Tags Mode"
                                         tagRender={tagRender}
                                         onChange={handleChangeDestination}
@@ -367,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>
@@ -378,8 +408,7 @@ 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
-                                    more about access controls</Button>
+                                        href="https://docs.netbird.io/docs/overview/acls">Learn more about access controls</Button>
                             </Col>
                         </Row>
                     </Form>

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/docs/how-to-guides/network-routes"
+				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"}}>
-						New Release! Access private networks with the Network Routes feature.
+						{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"}}>
-							New Release! Access private networks with the Network Routes feature.
+							{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

@@ -1,35 +1,57 @@
-import {OidcUserStatus, useOidc, useOidcUser} from "@axa-fr/react-oidc";
-import {Button, Result} from "antd";
+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 {logout} = useOidc();
     const config = getConfig();
-    const { oidcUserLoadingState } = useOidcUser();
+    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="warning"
-            title={urlParams.get("error_description")}
+            status={status}
+            title={title}
             extra={<>
-                <a href={window.location.origin}>
-                    <Button type="primary">
-                        Try again
-                    </Button>
-                </a>
-                <Button type="primary" onClick={function () {
-                    logout("",{client_id:config.clientId})
+                <Space style={{
+                    display: "flex-inline",
+                    flexDirection: "column",
+                    justifyContent: "space-around",
+                    alignContent: "center"
                 }}>
-                    Log out
+                    <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>
+    return <div>{"Login Error: User state: " + oidcUserLoadingState}</div>
 }
 
 export default LoginError;

src/components/Navbar.tsx

@@ -1,49 +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 {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 { useOidc,useOidcUser } from '@axa-fr/react-oidc';
+import {UserOutlined} from '@ant-design/icons';
+import {useOidc, useOidcIdToken, useOidcUser} from '@axa-fr/react-oidc';
 import {getConfig} from "../config";
-const { Text } = Typography
-const { useBreakpoint } = Grid;
+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 {useBreakpoint} = Grid;
 
 const Navbar = () => {
     let location = useLocation();
     const config = getConfig();
-    const {
-        isAuthenticated,
-        logout,
-    } = useOidc();
+    const { logout } = useOidc();
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
+    const dispatch = useDispatch()
 
-    const { oidcUser } = useOidcUser();
+    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="/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'},
+        {label: (<Link to="/settings">Settings</Link>), key: '/settings'}
+    ] 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="/routes">Network Routes</Link>), key: '/routes' },
-        { label: (<Link  to="/users">Users</Link>), key: '/users' }
-    ] as ItemType[])
+    const adminOnlyTabs = ["/setup-keys", "/acls", "/routes", "/dns", "/activity", "/settings"]
+    const [menuItems, setMenuItems] = useState(items)
     const logoutWithRedirect = () =>
-        logout("/",{client_id:config.clientId});
+        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>
@@ -51,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) {
+            const found = users.find(u => u.is_current ? u.is_current : runUser.sub ? u.id == runUser.sub : false)
+            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
@@ -67,16 +118,16 @@ const Navbar = () => {
                     key: '0',
                 },
                 {
-                    label: (<Link  to="/logout" onClick={logoutWithRedirect}>Logout</Link>),
+                    label: (<Link to="/logout" onClick={logoutWithRedirect}>Logout</Link>),
                     key: '1',
                 }
             ]}
         />
     );
 
-    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>
         )
@@ -96,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/RouteUpdate.tsx

@@ -1,46 +1,63 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
-import { actions as routeActions } from '../store/route';
+import {actions as routeActions} from '../store/route';
 import {
+    Button,
     Col,
-    Row,
+    Divider,
+    Drawer,
+    Form,
     Input,
     InputNumber,
+    Radio,
+    Row,
+    Select,
+    SelectProps,
     Space,
     Switch,
-    SelectProps,
-    Button, Drawer, Form, Divider, Select, Radio, Typography
+    Typography
 } from "antd";
 import {CloseOutlined, FlagFilled, QuestionCircleFilled} from "@ant-design/icons";
-import {Route} from "../store/route/types";
+import {Route, RouteToSave} from "../store/route/types";
 import {Header} from "antd/es/layout/layout";
 import {RuleObject} from "antd/lib/form";
-import {useOidcAccessToken} from "@axa-fr/react-oidc";
 import cidrRegex from 'cidr-regex';
 import {
+    initPeerMaps,
     masqueradeDisabledMSG,
     peerToPeerIP,
-    initPeerMaps,
     routePeerSeparator,
     transformGroupedDataTable
 } from '../utils/routes'
+import {useGetAccessTokenSilently} from "../utils/token";
+import {useGetGroupTagHelpers} from "../utils/groups";
 
-const { Paragraph } = Typography;
+const {Paragraph} = Typography;
 
 interface FormRoute extends Route {
 }
 
 const RouteUpdate = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {
+        tagRender,
+        handleChangeTags,
+        dropDownRender,
+        optionRender,
+        tagGroups,
+        getExistingAndToCreateGroupsLists,
+        getGroupNamesFromIDs,
+        selectValidator
+    } = useGetGroupTagHelpers()
+    const {Option} = Select;
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
     const setupNewRouteVisible = useSelector((state: RootState) => state.route.setupNewRouteVisible)
     const setupNewRouteHA = useSelector((state: RootState) => state.route.setupNewRouteHA)
-    const peers =  useSelector((state: RootState) => state.peer.data)
-    const route =  useSelector((state: RootState) => state.route.route)
-    const routes =  useSelector((state: RootState) => state.route.data)
+    const peers = useSelector((state: RootState) => state.peer.data)
+    const route = useSelector((state: RootState) => state.route.route)
+    const routes = useSelector((state: RootState) => state.route.data)
     const savedRoute = useSelector((state: RootState) => state.route.savedRoute)
-    // const [groupedDataTable, setGroupedDataTable] = useState([] as GroupedDataTable[]);
     const [previousRouteKey, setPreviousRouteKey] = useState("")
     const [editName, setEditName] = useState(false)
     const [editDescription, setEditDescription] = useState(false)
@@ -56,13 +73,14 @@ const RouteUpdate = () => {
     const [masqueradeMSG, setMasqueradeMSG] = useState(defaultMasqueradeMSG)
     const defaultStatusMSG = "Status"
     const [statusMSG, setStatusMSG] = useState(defaultStatusMSG)
-    const [peerNameToIP, peerIPToName] = initPeerMaps(peers);
+    const [peerNameToIP, peerIPToName, peerIPToID] = initPeerMaps(peers);
+    const [newRoute, setNewRoute] = useState(false)
 
     const optionsDisabledEnabled = [{label: 'Enabled', value: true}, {label: 'Disabled', value: false}]
 
     useEffect(() => {
-        if (setupNewRouteHA) {
-            setRoutingPeerMSG("Add additional routing peer")
+        if (!newRoute ) {
+            setRoutingPeerMSG(defaultRoutingPeerMSG)
             setMasqueradeMSG("Update Masquerade")
             setStatusMSG("Update Status")
         } else {
@@ -71,7 +89,7 @@ const RouteUpdate = () => {
             setStatusMSG(defaultStatusMSG)
             setPreviousRouteKey("")
         }
-    }, [setupNewRouteHA])
+    }, [newRoute])
 
     useEffect(() => {
         if (editName) inputNameRef.current!.focus({
@@ -90,33 +108,41 @@ const RouteUpdate = () => {
 
         const fRoute = {
             ...route,
+            groups: getGroupNamesFromIDs(route.groups)
         } as FormRoute
         setFormRoute(fRoute)
-        setPreviousRouteKey(fRoute.network_id+fRoute.network)
+        setPreviousRouteKey(fRoute.network_id + fRoute.network)
+        if (!route.network_id) {
+            setNewRoute(true)
+        } else {
+            setNewRoute(false)
+        }
         form.setFieldsValue(fRoute)
     }, [route])
 
     peers.forEach((p) => {
-        let os:string
+        let os: string
         os = p.os
         if (!os.toLowerCase().startsWith("darwin") && !os.toLowerCase().startsWith("windows")) {
             options?.push({
-                label: peerToPeerIP(p.name,p.ip),
-                value: peerToPeerIP(p.name,p.ip),
+                label: peerToPeerIP(p.name, p.ip),
+                value: peerToPeerIP(p.name, p.ip),
                 disabled: false
             })
         }
     })
 
-    const createRouteToSave = (inputRoute:FormRoute):Route => {
+    const createRouteToSave = (inputRoute: FormRoute): RouteToSave => {
         let peerIDList = inputRoute.peer.split(routePeerSeparator)
-        let peerID:string
+        let peerID: string
         if (peerIDList[1]) {
-            peerID = peerIDList[1]
+            peerID = peerIPToID[peerIDList[1]]
         } else {
-            peerID = peerNameToIP[inputRoute.peer]
+            peerID = peerIPToID[peerNameToIP[inputRoute.peer]]
         }
 
+        let [ existingGroups, groupsToCreate ] = getExistingAndToCreateGroupsLists(inputRoute.groups)
+
         return {
             id: inputRoute.id,
             network: inputRoute.network,
@@ -125,8 +151,10 @@ const RouteUpdate = () => {
             peer: peerID,
             enabled: inputRoute.enabled,
             masquerade: inputRoute.masquerade,
-            metric: inputRoute.metric
-        } as Route
+            metric: inputRoute.metric,
+            groups: existingGroups,
+            groupsToCreate: groupsToCreate,
+        } as RouteToSave
     }
 
     const handleFormSubmit = () => {
@@ -134,13 +162,16 @@ const RouteUpdate = () => {
             .then(() => {
                 if (!setupNewRouteHA || formRoute.peer != '') {
                     const routeToSave = createRouteToSave(formRoute)
-                    dispatch(routeActions.saveRoute.request({getAccessTokenSilently:accessToken, payload: routeToSave}))
+                    dispatch(routeActions.saveRoute.request({
+                        getAccessTokenSilently: getAccessTokenSilently,
+                        payload: routeToSave
+                    }))
                 } else {
-                    let groupedDataTable = transformGroupedDataTable(routes,peerIPToName)
+                    let groupedDataTable = transformGroupedDataTable(routes, peers)
                     groupedDataTable.forEach((group) => {
                         if (group.key == previousRouteKey) {
                             group.groupedRoutes.forEach((route) => {
-                                let updateRoute:FormRoute = {
+                                let updateRoute: FormRoute = {
                                     ...formRoute,
                                     id: route.id,
                                     peer: route.peer,
@@ -148,7 +179,10 @@ const RouteUpdate = () => {
                                     enabled: (formRoute.enabled != group.enabled) ? formRoute.enabled : route.enabled
                                 }
                                 const routeToSave = createRouteToSave(updateRoute)
-                                dispatch(routeActions.saveRoute.request({getAccessTokenSilently:accessToken, payload: routeToSave}))
+                                dispatch(routeActions.saveRoute.request({
+                                    getAccessTokenSilently: getAccessTokenSilently,
+                                    payload: routeToSave
+                                }))
                             })
                         }
                     })
@@ -160,11 +194,11 @@ const RouteUpdate = () => {
             });
     };
 
-    const setVisibleNewRoute = (status:boolean) => {
+    const setVisibleNewRoute = (status: boolean) => {
         dispatch(routeActions.setSetupNewRouteVisible(status));
     }
 
-    const setSetupNewRouteHA = (status:boolean) => {
+    const setSetupNewRouteHA = (status: boolean) => {
         dispatch(routeActions.setSetupNewRouteHA(status));
     }
 
@@ -183,23 +217,24 @@ const RouteUpdate = () => {
         setVisibleNewRoute(false)
         setSetupNewRouteHA(false)
         setPreviousRouteKey("")
+        setNewRoute(false)
     }
 
-    const onChange = (data:any) => {
+    const onChange = (data: any) => {
         setFormRoute({...formRoute, ...data})
     }
 
-    const dropDownRender = (menu: React.ReactElement) => (
+    const peerDropDownRender = (menu: React.ReactElement) => (
         <>
             {menu}
         </>
     )
 
-    const toggleEditName = (status:boolean) => {
+    const toggleEditName = (status: boolean) => {
         setEditName(status);
     }
 
-    const toggleEditDescription = (status:boolean) => {
+    const toggleEditDescription = (status: boolean) => {
         setEditDescription(status);
     }
 
@@ -215,61 +250,96 @@ const RouteUpdate = () => {
         return Promise.resolve()
     }
 
+    const peerValidator = (_: RuleObject, value: string) => {
+
+        if (value == "" && newRoute) {
+            return Promise.reject(new Error("Please select routing one peer"))
+        }
+
+        return Promise.resolve()
+    }
+
+    const selectPreValidator = (obj: RuleObject, value: string[]) => {
+       if (setupNewRouteHA && formRoute.peer == '') {
+           let [, newGroups ] = getExistingAndToCreateGroupsLists(value)
+           if (newGroups.length > 0) {
+               return Promise.reject(new Error("You can't add new Groups from the group update view, please remove:\"" + newGroups +"\""))
+           }
+       }
+       return selectValidator(obj, value)
+    }
+
     return (
         <>
             {route &&
                 <Drawer
                     headerStyle={{display: "none"}}
                     forceRender={true}
-                    visible={setupNewRouteVisible}
+                    open={setupNewRouteVisible}
                     bodyStyle={{paddingBottom: 80}}
                     onClose={onCancel}
                     autoFocus={true}
                     footer={
                         <Space style={{display: 'flex', justifyContent: 'end'}}>
                             <Button onClick={onCancel} disabled={savedRoute.loading}>Cancel</Button>
-                            <Button type="primary" disabled={savedRoute.loading} onClick={handleFormSubmit}>{`${formRoute.network_id ? 'Save' : 'Create'}`}</Button>
+                            <Button type="primary" disabled={savedRoute.loading}
+                                    onClick={handleFormSubmit}>{`${newRoute ? 'Create' : 'Save'}`}</Button>
                         </Space>
                     }
                 >
-                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}>
+                    <Form layout="vertical" form={form} requiredMark={false} 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 && !editDescription && formRoute.id  &&
+                                            {!editName && !editDescription && formRoute.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 && formRoute.id ? (
-                                                <div className={"access-control input-text ant-drawer-title"} onClick={() => toggleEditName(true)}>{formRoute.id ? formRoute.network_id : 'New Route'}</div>
+                                            {!editName && formRoute.id ? (
+                                                <div className={"access-control input-text ant-drawer-title"}
+                                                     onClick={() => toggleEditName(true)}>{formRoute.id ? formRoute.network_id : 'New Route'}</div>
                                             ) : (
                                                 <Form.Item
                                                     name="network_id"
                                                     label="Network Identifier"
                                                     tooltip="You can enable high-availability by assigning the same network identifier and network CIDR to multiple routes"
-                                                    rules={[{required: true, message: 'Please add an identifier for this access route', whitespace: true}]}
+                                                    rules={[{
+                                                        required: true,
+                                                        message: 'Please add an identifier for this access route',
+                                                        whitespace: true
+                                                    }]}
                                                 >
-                                                    <Input placeholder="e.g. aws-eu-central-1-vpc" ref={inputNameRef} disabled={!setupNewRouteHA} onPressEnter={() => toggleEditName(false)} onBlur={() => toggleEditName(false)} autoComplete="off" maxLength={40}/>
+                                                    <Input placeholder="e.g. aws-eu-central-1-vpc" ref={inputNameRef}
+                                                           disabled={!setupNewRouteHA && !newRoute}
+                                                           onPressEnter={() => toggleEditName(false)}
+                                                           onBlur={() => toggleEditName(false)} autoComplete="off"
+                                                           maxLength={40}/>
                                                 </Form.Item>
                                             )}
-                                            { !editDescription ? (
-                                                <div className={"access-control input-text ant-drawer-subtitle"} onClick={() => toggleEditDescription(true)}>{formRoute.description && formRoute.description.trim() !== "" ? formRoute.description : 'Add description...'}</div>
+                                            {!editDescription ? (
+                                                <div className={"access-control input-text ant-drawer-subtitle"}
+                                                     onClick={() => toggleEditDescription(true)}>{formRoute.description && formRoute.description.trim() !== "" ? formRoute.description : 'Add description...'}</div>
                                             ) : (
                                                 <Form.Item
                                                     name="description"
                                                     label="Description"
                                                     style={{marginTop: 24}}
                                                 >
-                                                    <Input placeholder="Add description..." ref={inputDescriptionRef} disabled={!setupNewRouteHA} onPressEnter={() => toggleEditDescription(false)} onBlur={() => toggleEditDescription(false)} autoComplete="off" maxLength={200}/>
+                                                    <Input placeholder="Add description..." ref={inputDescriptionRef}
+                                                           disabled={!setupNewRouteHA && !newRoute}
+                                                           onPressEnter={() => toggleEditDescription(false)}
+                                                           onBlur={() => toggleEditDescription(false)}
+                                                           autoComplete="off" maxLength={200}/>
                                                 </Form.Item>
                                             )}
 
@@ -293,7 +363,8 @@ const RouteUpdate = () => {
                                     tooltip="Use CIDR notation. e.g. 192.168.10.0/24 or 172.16.0.0/16"
                                     rules={[{validator: networkRangeValidator}]}
                                 >
-                                    <Input placeholder="e.g. 172.16.0.0/16" disabled={!setupNewRouteHA} autoComplete="off" minLength={9} maxLength={43}/>
+                                    <Input placeholder="e.g. 172.16.0.0/16" disabled={!setupNewRouteHA && !newRoute}
+                                           autoComplete="off" minLength={9} maxLength={43}/>
                                 </Form.Item>
                             </Col>
                             <Col span={24}>
@@ -314,14 +385,15 @@ const RouteUpdate = () => {
                                     name="peer"
                                     label={routingPeerMSG}
                                     tooltip="Assign a peer as a routing peer for the Network CIDR"
+                                    rules={[{validator:peerValidator}]}
                                 >
                                     <Select
-                                            showSearch
-                                            style={{ width: '100%' }}
-                                            placeholder="Select Peer"
-                                            dropdownRender={dropDownRender}
-                                            options={options}
-                                            allowClear={true}
+                                        showSearch
+                                        style={{width: '100%'}}
+                                        placeholder="Select Peer"
+                                        dropdownRender={peerDropDownRender}
+                                        options={options}
+                                        allowClear={true}
                                     />
                                 </Form.Item>
                             </Col>
@@ -331,7 +403,7 @@ const RouteUpdate = () => {
                                     label={masqueradeMSG}
                                     tooltip={masqueradeDisabledMSG}
                                 >
-                                    <Switch size={"small"} disabled={!setupNewRouteHA} checked={formRoute.masquerade}/>
+                                    <Switch size={"small"} disabled={!setupNewRouteHA && !newRoute} checked={formRoute.masquerade}/>
                                 </Form.Item>
                             </Col>
                             <Col span={24}>
@@ -343,6 +415,28 @@ const RouteUpdate = () => {
                                     <InputNumber min={1} max={9999} autoComplete="off"/>
                                 </Form.Item>
                             </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="groups"
+                                    label="Distribution groups"
+                                    tooltip="NetBird will advertise this route to peers that belong to the following groups"
+                                    rules={[{validator: selectPreValidator}]}
+                                >
+                                    <Select mode="tags"
+                                            style={{width: '100%'}}
+                                            placeholder="Associate groups with the network route"
+                                            tagRender={tagRender}
+                                            onChange={handleChangeTags}
+                                            dropdownRender={dropDownRender}
+                                    >
+                                        {
+                                            tagGroups.map(m =>
+                                                <Option key={m}>{optionRender(m)}</Option>
+                                            )
+                                        }
+                                    </Select>
+                                </Form.Item>
+                            </Col>
                             <Col span={24}>
                                 <Row wrap={false} gutter={12}>
                                     <Col flex="none">
@@ -350,7 +444,8 @@ const RouteUpdate = () => {
                                     </Col>
                                     <Col flex="auto">
                                         <Paragraph>
-                                            You can enable high-availability by assigning the same network identifier and network CIDR to multiple routes.
+                                            You can enable high-availability by assigning the same network identifier
+                                            and network CIDR to multiple routes.
                                         </Paragraph>
                                     </Col>
                                 </Row>
@@ -358,8 +453,7 @@ const RouteUpdate = () => {
                             <Col span={24}>
                                 <Divider></Divider>
                                 <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
-                                        href="https://netbird.io/docs/how-to-guides/network-routes" style={{color: 'rgb(07, 114, 128)'}}>Learn
-                                    more about network routes</Button>
+                                        href="https://netbird.io/docs/how-to-guides/network-routes">Learn more about network routes</Button>
                             </Col>
                         </Row>
                     </Form>

src/components/SetupKeyNew.tsx

@@ -10,7 +10,8 @@ import {
     Drawer,
     Form,
     Input,
-    List,
+    InputNumber,
+    List, Modal,
     Radio,
     Row,
     Select,
@@ -20,24 +21,29 @@ import {
 } from "antd";
 import {RootState} from "typesafe-actions";
 import {CloseOutlined, EditOutlined, QuestionCircleFilled} from "@ant-design/icons";
-import {SetupKey, SetupKeyToSave} from "../store/setup-key/types";
-import {useOidcAccessToken} from "@axa-fr/react-oidc";
+import {FormSetupKey, SetupKey, SetupKeyToSave} from "../store/setup-key/types";
 import {Header} from "antd/es/layout/layout";
-import {formatDate, timeAgo} from "../utils/common";
+import {checkExpiresIn, formatDate, timeAgo} from "../utils/common";
 import {RuleObject} from "antd/lib/form";
 import {CustomTagProps} from "rc-select/lib/BaseSelect";
 import {Group} from "../store/group/types";
+import {useGetAccessTokenSilently} from "../utils/token";
+import ExpiresInInput, {expiresInToSeconds, ExpiresInValue} from "../views/ExpiresInInput";
+import moment from "moment";
 
 const {Option} = Select;
 
 const {Text} = Typography;
 
+const ExpiresInDefault: ExpiresInValue = {number: 30, interval: "day"}
+
 const customExpiresFormat: DatePickerProps['format'] = value => {
     return formatDate(value)
 }
 
 const customLastUsedFormat: DatePickerProps['format'] = value => {
-    if (value.toString().startsWith("0001")) {
+    if (value.year() == 1) {
+        // 1st of Jan 0001
         return "never"
     }
     let ago = timeAgo(value.toString())
@@ -47,12 +53,8 @@ const customLastUsedFormat: DatePickerProps['format'] = value => {
     return ago
 }
 
-interface FormSetupKey extends SetupKey {
-    autoGroupNames: string[]
-}
-
 const SetupKeyNew = () => {
-    const {accessToken} = useOidcAccessToken()
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
     const setupNewKeyVisible = useSelector((state: RootState) => state.setupKey.setupNewKeyVisible)
     const setupKey = useSelector((state: RootState) => state.setupKey.setupKey)
@@ -84,7 +86,7 @@ const SetupKeyNew = () => {
             allGroups.set(g.id!, g)
         })
 
-        let formKeyGroups :string[] = []
+        let formKeyGroups: string[] = []
 
         if (setupKey.auto_groups) {
             formKeyGroups = setupKey.auto_groups.filter(g => allGroups.get(g)).map(g => allGroups.get(g)!.name)
@@ -93,6 +95,9 @@ const SetupKeyNew = () => {
         const fSetupKey = {
             ...setupKey,
             autoGroupNames: setupKey.auto_groups ? formKeyGroups : [],
+            expiresInFormatted: ExpiresInDefault,
+            exp: moment(setupKey.expires),
+            last: moment(setupKey.last_used)
         } as FormSetupKey
         setFormSetupKey(fSetupKey)
         form.setFieldsValue(fSetupKey)
@@ -101,23 +106,28 @@ const SetupKeyNew = () => {
     const createSetupKeyToSave = (): SetupKeyToSave => {
         const autoGroups = groups?.filter(g => formSetupKey.autoGroupNames.includes(g.name)).map(g => g.id || '') || []
         // find groups that do not yet exist (newly added by the user)
-        const allGroupsNames : string[] = groups?.map(g => g.name);
+        const allGroupsNames: string[] = groups?.map(g => g.name);
         const groupsToCreate = formSetupKey.autoGroupNames.filter(s => !allGroupsNames.includes(s))
+
+        let expiresIn = expiresInToSeconds(formSetupKey.expiresInFormatted)
         return {
             id: formSetupKey.id,
             name: formSetupKey.name,
             type: formSetupKey.type,
             auto_groups: autoGroups,
             revoked: formSetupKey.revoked,
-            groupsToCreate: groupsToCreate
+            groupsToCreate: groupsToCreate,
+            expires_in: expiresIn,
+            usage_limit: formSetupKey.usage_limit
         } as SetupKeyToSave
     }
+
     const handleFormSubmit = () => {
         form.validateFields()
             .then((values) => {
                 let setupKeyToSave = createSetupKeyToSave()
                 dispatch(setupKeyActions.saveSetupKey.request({
-                    getAccessTokenSilently: accessToken,
+                    getAccessTokenSilently: getAccessTokenSilently,
                     payload: setupKeyToSave
                 }))
             })
@@ -134,12 +144,15 @@ const SetupKeyNew = () => {
         if (savedSetupKey.loading) return
         dispatch(setupKeyActions.setSetupKey({
             name: "",
-            type: "reusable",
+            type: "one-off",
             key: "",
             last_used: "",
             expires: "",
             state: "valid",
-            auto_groups: new Array()
+            auto_groups: new Array(),
+            usage_limit: 0,
+            used_times: 0,
+            expires_in: 0
         } as SetupKey))
         setFormSetupKey({} as FormSetupKey)
         setVisibleNewSetupKey(false)
@@ -242,24 +255,42 @@ const SetupKeyNew = () => {
         </>
     )
 
+    const changesDetected = (): boolean => {
+        return formSetupKey.name == null || formSetupKey.name !== setupKey.name || groupsChanged()
+            || formSetupKey.usage_limit !== setupKey.usage_limit
+    }
+
+    const groupsChanged = (): boolean => {
+        if (formSetupKey.autoGroupNames.length != setupKey.auto_groups.length) {
+            return true
+        }
+        const formGroupIds = groups?.filter(g => formSetupKey.autoGroupNames.includes(g.name)).map(g => g.id || '') || []
+
+        return setupKey.auto_groups?.filter(g => !formGroupIds.includes(g)).length > 0
+    }
+
     return (
         <>
             {setupKey &&
                 <Drawer
                     forceRender={true}
                     headerStyle={{display: "none"}}
-                    visible={setupNewKeyVisible}
+                    open={setupNewKeyVisible}
                     bodyStyle={{paddingBottom: 80}}
                     onClose={onCancel}
                     footer={
                         <Space style={{display: 'flex', justifyContent: 'end'}}>
                             <Button disabled={savedSetupKey.loading} onClick={onCancel}>Cancel</Button>
-                            <Button type="primary" disabled={savedSetupKey.loading}
+                            <Button type="primary" disabled={savedSetupKey.loading || !changesDetected()}
                                     onClick={handleFormSubmit}>{`${formSetupKey.id ? 'Save' : 'Create'}`}</Button>
                         </Space>
                     }
                 >
-                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}>
+                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}
+                          initialValues={{
+                              expiresInFormatted: ExpiresInDefault,
+                          }}
+                    >
                         <Row gutter={16}>
                             <Col span={24}>
                                 <Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
@@ -316,6 +347,7 @@ const SetupKeyNew = () => {
                                     >
                                         <Input
                                             disabled={true}
+                                            style={{color: "#5a5c5a"}}
                                             autoComplete="off"/>
                                     </Form.Item>
                                 </Col>
@@ -324,11 +356,12 @@ const SetupKeyNew = () => {
                             {setupKey.id && formSetupKey.name &&
                                 <Col span={12}>
                                     <Form.Item
-                                        name="expires"
+                                        name="exp"
                                         label="Expires"
                                         tooltip="The expiration date of the key"
                                     >
-                                        <DatePicker disabled={true} style={{width: '100%'}}
+                                        <DatePicker disabled={true}
+                                                    style={{width: "100%", color: "#5a5c5a"}}
                                                     format={customExpiresFormat}/>
                                     </Form.Item>
                                 </Col>
@@ -336,11 +369,12 @@ const SetupKeyNew = () => {
                             {setupKey.id && formSetupKey.name &&
                                 <Col span={12}>
                                     <Form.Item
-                                        name="last_used"
+                                        name="last"
                                         label="Last Used"
                                         tooltip="The last time the key was used"
                                     >
-                                        <DatePicker disabled={true} style={{width: '100%'}}
+                                        <DatePicker disabled={true}
+                                                    style={{width: "100%", color: "#5a5c5a"}}
                                                     format={customLastUsedFormat}/>
                                     </Form.Item>
                                 </Col>
@@ -357,6 +391,14 @@ const SetupKeyNew = () => {
                                                 size="large"
                                                 bordered
                                             >
+                                                <List.Item>
+                                                    <Radio value={"one-off"}>
+                                                        <Space direction="vertical" size="small">
+                                                            <Text strong>One-off</Text>
+                                                            <Text>This key can be used only once</Text>
+                                                        </Space>
+                                                    </Radio>
+                                                </List.Item>
                                                 <List.Item>
                                                     <Radio value={"reusable"}>
                                                         <Space direction="vertical" size="small">
@@ -366,14 +408,6 @@ const SetupKeyNew = () => {
                                                         </Space>
                                                     </Radio>
                                                 </List.Item>
-                                                <List.Item>
-                                                    <Radio value={"one-off"}>
-                                                        <Space direction="vertical" size="small">
-                                                            <Text strong>One-off</Text>
-                                                            <Text>This key can be used only once</Text>
-                                                        </Space>
-                                                    </Radio>
-                                                </List.Item>
                                             </List>
 
                                         </Space>
@@ -381,6 +415,38 @@ const SetupKeyNew = () => {
 
                                 </Form.Item>
                             </Col>
+                            {!setupKey.id &&
+                                <Col span={24}>
+                                    <Form.Item name="expiresInFormatted" label="Expires In"
+                                               rules={[{validator: checkExpiresIn}]}>
+                                        <ExpiresInInput options={
+                                            Array.of(
+                                                {key: "day", title: "Days"},
+                                                {key: "month", title: "Months"},
+                                                {key: "year", title: "Years"})
+                                        }/>
+                                    </Form.Item>
+                                </Col>}
+                            <Col span={12}>
+                                <Form.Item name="usage_limit"
+                                           label="Usage Limit"
+                                           tooltip="Limit the number of times this key can be used. Use 0 for unlimited use."
+                                >
+                                    <InputNumber min={0} defaultValue={0}
+                                                 disabled={setupKey.id || formSetupKey.type !== "reusable"}
+                                                 style={{width: "100%"}}
+                                    />
+                                </Form.Item>
+                            </Col>
+                            <Col span={12}>
+                                <Form.Item name="used_times"
+                                           label="Used Times"
+                                >
+                                    <InputNumber min={0} defaultValue={0} disabled={true}
+                                                 style={{width: "100%"}}
+                                    />
+                                </Form.Item>
+                            </Col>
                             <Col span={24}>
                                 <Form.Item
                                     name="autoGroupNames"
@@ -394,7 +460,7 @@ const SetupKeyNew = () => {
                                             tagRender={tagRender}
                                             onChange={handleChangeTags}
                                             dropdownRender={dropDownRender}
-                                            // enabled only when we have a new key !setupkey.id or when the key is valid
+                                        // enabled only when we have a new key !setupkey.id or when the key is valid
                                             disabled={!(!setupKey.id || setupKey.valid)}
                                     >
                                         {
@@ -408,9 +474,7 @@ const SetupKeyNew = () => {
                             <Col span={24}>
                                 <Divider></Divider>
                                 <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
-                                        href="https://netbird.io/docs/overview/setup-keys"
-                                        style={{color: 'rgb(07, 114, 128)'}}>Learn
-                                    more about setup keys</Button>
+                                        href="https://netbird.io/docs/overview/setup-keys">Learn more about setup keys</Button>
                             </Col>
                         </Row>
                     </Form>

src/components/UserUpdate.tsx

@@ -0,0 +1,414 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {useDispatch, useSelector} from "react-redux";
+import {Alert, Button, Col, Divider, Drawer, Form, Input, Modal, Row, Select, Space, Tag, Typography} from "antd";
+import {RootState} from "typesafe-actions";
+import {CloseOutlined, EditOutlined, ExclamationCircleOutlined} from "@ant-design/icons";
+import {Header} from "antd/es/layout/layout";
+import {Group} from "../store/group/types";
+import {FormUser, User, UserToSave} from "../store/user/types";
+import {RuleObject} from "antd/lib/form";
+import {CustomTagProps} from "rc-select/lib/BaseSelect";
+import {actions as userActions} from "../store/user";
+import {useGetAccessTokenSilently} from "../utils/token";
+import {useOidcUser} from "@axa-fr/react-oidc";
+
+const {Paragraph} = Typography;
+
+const {confirm} = Modal;
+
+const {Option} = Select;
+
+const UserUpdate = () => {
+    const {oidcUser} = useOidcUser();
+    const {getAccessTokenSilently} = useGetAccessTokenSilently()
+    const dispatch = useDispatch()
+    const user = useSelector((state: RootState) => state.user.user)
+    const savedUser = useSelector((state: RootState) => state.user.savedUser)
+    const groups = useSelector((state: RootState) => state.group.data)
+    const users = useSelector((state: RootState) => state.user.data)
+    const updateUserDrawerVisible = useSelector((state: RootState) => state.user.updateUserDrawerVisible)
+    const [selectedTagGroups, setSelectedTagGroups] = useState([] as string[])
+    const [tagGroups, setTagGroups] = useState([] as string[])
+    const [editName, setEditName] = useState(false)
+    const inputNameRef = useRef<any>(null)
+
+    const [formUser, setFormUser] = useState({} as FormUser)
+    const [currentUser, setCurrentUser] = useState({} as User)
+    const [form] = Form.useForm()
+
+    useEffect(() => {
+        if (editName) inputNameRef.current!.focus({
+            cursor: 'end',
+        });
+    }, [editName]);
+
+    const toggleEditName = (status: boolean) => {
+        setEditName(status);
+    }
+
+    useEffect(() => {
+        setTagGroups(groups?.filter(g => g.name != "All").map(g => g.name) || [])
+    }, [groups])
+    useEffect(() => {
+        if (oidcUser && oidcUser.sub) {
+            const found = users.find(u => u.id == oidcUser.sub)
+            if (found) {
+                setCurrentUser(found)
+            }
+        } else {
+            setCurrentUser({} as User)
+        }
+
+    }, [oidcUser, users])
+
+    useEffect(() => {
+        if (!user) return
+
+        let allGroups = new Map<string, Group>();
+        groups.forEach(g => {
+            allGroups.set(g.id!, g)
+        })
+
+        if (!user.auto_groups) {
+            user.auto_groups = []
+        }
+        let formKeyGroups = user.auto_groups.filter(g => allGroups.get(g)).map(g => allGroups.get(g)!.name)
+
+        const fUser = {
+            ...user,
+            autoGroupsNames: user.auto_groups ? formKeyGroups : [],
+        } as FormUser
+        setFormUser(fUser)
+        form.setFieldsValue(fUser)
+    }, [user])
+
+    const selectValidator = (_: RuleObject, value: string[]) => {
+        let hasSpaceNamed = []
+
+        value.forEach(function (v: string) {
+            if (!v.trim().length) {
+                hasSpaceNamed.push(v)
+            }
+        })
+
+        if (hasSpaceNamed.length) {
+            return Promise.reject(new Error("Group names with just spaces are not allowed"))
+        }
+
+        return Promise.resolve()
+    }
+
+    const tagRender = (props: CustomTagProps) => {
+        const {label, value, closable, onClose} = props;
+        const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+
+        return (
+            <Tag
+                color="blue"
+                onMouseDown={onPreventMouseDown}
+                closable={closable}
+                onClose={onClose}
+                style={{marginRight: 3}}
+            >
+                <strong>{value}</strong>
+            </Tag>
+        );
+    }
+
+    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'} `
+        return (
+            <>
+                <Tag
+                    color="blue"
+                    style={{marginRight: 3}}
+                >
+                    <strong>{label}</strong>
+                </Tag>
+                <span style={{fontSize: ".85em"}}>{peersCount}</span>
+            </>
+        )
+    }
+
+    const dropDownRender = (menu: React.ReactElement) => (
+        <>
+            {menu}
+            <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"/>
+                    </svg>
+                </Col>
+            </Row>
+        </>
+    )
+
+    const handleChangeTags = (value: string[]) => {
+        let validatedValues: string[] = []
+        value.forEach(function (v) {
+            if (v.trim().length) {
+                validatedValues.push(v)
+            }
+        })
+        setSelectedTagGroups(validatedValues)
+    };
+
+    const createUserToSave = (): UserToSave => {
+        const autoGroups = groups?.filter(g => formUser.autoGroupsNames.includes(g.name)).map(g => g.id || '') || []
+        // find groups that do not yet exist (newly added by the user)
+        const allGroupsNames: string[] = groups?.map(g => g.name);
+        const groupsToCreate = formUser.autoGroupsNames.filter(s => !allGroupsNames.includes(s))
+        return {
+            id: formUser.id,
+            email: formUser.email,
+            role: formUser.role,
+            name: formUser.name,
+            groupsToCreate: groupsToCreate,
+            auto_groups: autoGroups,
+        } as UserToSave
+    }
+
+    const showConfirmChangeRole = (userToSave: UserToSave) => {
+        let content = <Paragraph>With this action, you will remove the administrative privileges of your user.
+            Your user will be limited to read-only operations in this account. Are you sure?</Paragraph>
+        let contentModule = <div>{content}</div>
+
+        let name = formUser ? formUser.email : ''
+        confirm({
+            icon: <ExclamationCircleOutlined/>,
+            title: "Update user \"" + name + "\"",
+            width: 600,
+            content: contentModule,
+            okType: 'danger',
+            onOk() {
+                dispatch(userActions.saveUser.request({
+                    getAccessTokenSilently: getAccessTokenSilently,
+                    payload: userToSave
+                }))
+            },
+            onCancel() {
+            },
+        });
+    }
+
+    // check if currentUser (who is doing the modification) removes the administrative privileges from themselves
+    const isShowConfirmWarning = (userToSave: UserToSave): boolean => {
+        return currentUser.id == userToSave.id && currentUser.role === "admin" && userToSave.role !== "admin"
+    }
+
+    const handleFormSubmit = () => {
+        form.validateFields()
+            .then((values) => {
+                let userToSave = createUserToSave()
+                if (isShowConfirmWarning(userToSave)) {
+                    showConfirmChangeRole(userToSave)
+                } else {
+                    dispatch(userActions.saveUser.request({
+                        getAccessTokenSilently: getAccessTokenSilently,
+                        payload: userToSave
+                    }))
+                }
+            })
+            .catch((errorInfo) => {
+                console.log('errorInfo', errorInfo)
+            });
+    };
+
+    const onCancel = () => {
+        if (savedUser.loading) return
+        dispatch(userActions.setUser({
+            id: "",
+            email: "",
+            role: "",
+            status: "",
+            auto_groups: [],
+            name: user.name,
+            is_current: user.is_current,
+        } as User));
+        setFormUser({} as FormUser)
+        toggleEditName(false)
+        dispatch(userActions.setUpdateUserDrawerVisible(false));
+    }
+
+    const onChange = (data: any) => {
+        setFormUser({...formUser, ...data})
+    }
+
+    const changesDetected = (): boolean => {
+        return emailChanged() || nameChanged() || groupsChanged() || roleChanged()
+    }
+
+    const emailChanged = (): boolean => {
+        return formUser.email !== user.email
+    }
+
+    const roleChanged = (): boolean => {
+        return formUser.role !== user.role
+    }
+
+    const nameChanged = (): boolean => {
+        return formUser.name !== user.name
+    }
+
+    const groupsChanged = (): boolean => {
+        if (!formUser.autoGroupsNames) {
+            return false
+        }
+        if (formUser.autoGroupsNames.length != user.auto_groups.length) {
+            return true
+        }
+        const formGroupIds = groups?.filter(g => formUser.autoGroupsNames.includes(g.name)).map(g => g.id || '') || []
+
+        return user.auto_groups?.filter(g => !formGroupIds.includes(g)).length > 0
+    }
+
+    return (
+        <>
+            {user &&
+                <Drawer
+                    forceRender={true}
+                    headerStyle={{display: "none"}}
+                    open={updateUserDrawerVisible}
+                    bodyStyle={{paddingBottom: 80}}
+                    onClose={onCancel}
+                    footer={
+                        <Space style={{display: 'flex', justifyContent: 'end'}}>
+                            <Button disabled={savedUser.loading} onClick={onCancel}>Cancel</Button>
+                            <Button type="primary" disabled={savedUser.loading || !changesDetected()}
+                                    onClick={handleFormSubmit}>{`${formUser.id ? 'Save' : 'Invite'}`}</Button>
+                        </Space>
+                    }
+                >
+                    <Form layout="vertical" hideRequiredMark form={form} onValuesChange={onChange}
+                          initialValues={{
+                              ["role"]: formUser.role
+                          }}
+                    >
+                        <Row gutter={16}>
+                            <Col span={24}>
+                                <Header style={{margin: "-32px -24px 20px -24px", padding: "24px 24px 0 24px"}}>
+                                    <Row align="top">
+                                        {/*Close Icon*/}
+                                        <Col flex="none" style={{display: "flex"}}>
+                                            {!editName && user.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">
+                                                        <CloseOutlined size={16}/>
+                                                    </span>
+                                                </button>
+                                            }
+                                        </Col>
+                                        {/* Name Label*/}
+                                        <Col flex="auto">
+                                            {!editName && user.id && formUser.name !== "" ? (
+                                                <div className={"access-control input-text ant-drawer-title"}
+                                                     onClick={() => toggleEditName(true)}>{formUser.name ? formUser.name : formUser.name}
+                                                    <EditOutlined/></div>
+                                            ) : (
+                                                <Form.Item
+                                                    name="name"
+                                                    label="Name"
+                                                    rules={[{
+                                                        required: false,
+                                                        message: 'Please add a new name for this user',
+                                                        whitespace: true
+                                                    }]}
+                                                >
+                                                    <Input
+                                                        placeholder={formUser.name}
+                                                        ref={inputNameRef}
+                                                        onPressEnter={() => toggleEditName(false)}
+                                                        onBlur={() => toggleEditName(false)}
+                                                        autoComplete="off"/>
+                                                </Form.Item>)}
+                                        </Col>
+                                    </Row>
+                                </Header>
+                            </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="email"
+                                    label="Email"
+                                >
+                                    <Input
+                                        disabled={user.id}
+                                        value={formUser.email}
+                                        style={{color: "#5a5c5a"}}
+                                        autoComplete="off"/>
+                                </Form.Item>
+                            </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="role"
+                                    label="Role"
+                                >
+                                    <Select
+                                        style={{width: '100%'}}
+                                        disabled={(currentUser.role != null && currentUser.role !== "admin") || formUser.is_current}>
+                                        <Option value="admin">admin</Option>
+                                        <Option value="user">user</Option>
+                                    </Select>
+                                </Form.Item>
+                            </Col>
+                            <Col span={24}>
+                                <Form.Item
+                                    name="autoGroupsNames"
+                                    label="Auto-assigned groups"
+                                    tooltip="Every peer enrolled with this user will be automatically added to these groups"
+                                    rules={[{validator: selectValidator}]}
+                                >
+                                    <Select mode="tags"
+                                            style={{width: '100%'}}
+                                            placeholder="Associate groups with the user"
+                                            tagRender={tagRender}
+                                            onChange={handleChangeTags}
+                                            disabled={currentUser.role != null && currentUser.role !== "admin"}
+                                            dropdownRender={dropDownRender}
+                                    >
+                                        {
+                                            tagGroups.map(m =>
+                                                <Option key={m}>{optionRender(m)}</Option>
+                                            )
+                                        }
+                                    </Select>
+                                </Form.Item>
+                            </Col>
+                            <Col span={24}>
+                                <Divider></Divider>
+                            </Col>
+                            {currentUser && currentUser.role !== "admin" && (
+                                <div>
+                                    <Col span={24}>
+                                        <Alert
+                                            message={<div style={{color: "#5a5c5a"}}>
+                                                You are not an administrator, therefore you can't update users.</div>}
+                                            showIcon={false}
+                                            type="warning"/>
+                                    </Col>
+                                    <br></br>
+                                </div>
+                            )}
+                        </Row>
+                    </Form>
+
+                </Drawer>
+            }
+        </>
+    )
+}
+
+export default UserUpdate