Add public installation page (#248)

* remove duplicate group on select view to change the logic from name to id

* fix group bug and add grouping on DNS

* fix setup key issue

.gitignore

@@ -26,6 +26,6 @@ yarn-error.log*
 src/auth_config.json
 .idea
 .eslintcache
-src/.local-config.json
+src/.local-config*.json
 /public/OidcServiceWorker.js
 /public/OidcTrustedDomains.js

docker/init_react_envs.sh

@@ -22,6 +22,10 @@ if [[ -z "${AUTH_AUDIENCE}" ]]; then
     fi
 fi
 
+if [[ "${AUTH_AUDIENCE}" == "none" ]]; then
+    unset AUTH_AUDIENCE
+fi
+
 if [[ -z "${AUTH_SUPPORTED_SCOPES}" ]]; then
     if [[ -z "${AUTH0_DOMAIN}" ]]; then
         echo "AUTH_SUPPORTED_SCOPES environment variable must be set"
@@ -43,6 +47,7 @@ fi
 
 export AUTH_AUTHORITY=${AUTH_AUTHORITY:-https://$AUTH0_DOMAIN}
 export AUTH_CLIENT_ID=${AUTH_CLIENT_ID:-$AUTH0_CLIENT_ID}
+export AUTH_CLIENT_SECRET=${AUTH_CLIENT_SECRET}
 export AUTH_AUDIENCE=${AUTH_AUDIENCE:-$AUTH0_AUDIENCE}
 export AUTH_REDIRECT_URI=${AUTH_REDIRECT_URI}
 export AUTH_SILENT_REDIRECT_URI=${AUTH_SILENT_REDIRECT_URI}
@@ -53,11 +58,12 @@ export NETBIRD_MGMT_API_ENDPOINT=$(echo $NETBIRD_MGMT_API_ENDPOINT | sed -E 's/(
 export NETBIRD_MGMT_GRPC_API_ENDPOINT=${NETBIRD_MGMT_GRPC_API_ENDPOINT}
 export NETBIRD_HOTJAR_TRACK_ID=${NETBIRD_HOTJAR_TRACK_ID}
 export NETBIRD_TOKEN_SOURCE=${NETBIRD_TOKEN_SOURCE:-accessToken}
+export NETBIRD_DRAG_QUERY_PARAMS=${NETBIRD_DRAG_QUERY_PARAMS:-false}
 
 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_HOTJAR_TRACK_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE"
+ENV_STR="\$\$USE_AUTH0 \$\$AUTH_AUDIENCE \$\$AUTH_AUTHORITY \$\$AUTH_CLIENT_ID \$\$AUTH_CLIENT_SECRET \$\$AUTH_SUPPORTED_SCOPES \$\$NETBIRD_MGMT_API_ENDPOINT \$\$NETBIRD_MGMT_GRPC_API_ENDPOINT \$\$NETBIRD_HOTJAR_TRACK_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI \$\$NETBIRD_TOKEN_SOURCE \$\$NETBIRD_DRAG_QUERY_PARAMS"
 
 MAIN_JS=$(find /usr/share/nginx/html/static/js/main.*js)
 OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"

package.json

@@ -39,6 +39,7 @@
     "react-redux": "^8.0.2",
     "react-router-dom": "^5.3.3",
     "react-scripts": "^5.0.1",
+    "react-select": "^5.7.3",
     "react-syntax-highlighter": "^15.5.0",
     "react-table": "^7.7.0",
     "redux": "^4.2.0",

src/.local-config.json.bac

@@ -0,0 +1,11 @@
+{
+  "auth0Auth": "true",
+  "authAuthority": "https://netbird-localdev.eu.auth0.com",
+  "authClientId": "kBRMAOqIZ7hvpVCaypQLCJvTzkYYIXVt",
+  "authScopesSupported": "openid profile email api offline_access email_verified",
+  "authAudience": "http://localhost:3000/",
+
+  "apiOrigin": "http://0.0.0.0",
+  "grpcApiOrigin": "http://0.0.0.0:80",
+  "latestVersion": "v0.6.3"
+}

src/App.tsx

@@ -70,16 +70,7 @@ function App() {
 
     return (
         <>
-        <ConfigProvider
-            theme={{
-                token: {
-                    borderRadius: 4,
-                    colorPrimary: "#1890ff",
-                    fontFamily: "Arial"
-                },
-                components: {Badge: {fontSizeSM: 20}},
-            }}
-        >
+
             <Provider store={store}>
                 {!show && <SecureLoading padding="3em" width={50} height={50}/>}
                 {show &&
@@ -124,8 +115,6 @@ function App() {
                     </Layout>
                 }
             </Provider>
-
-        </ConfigProvider>
         </>
     )
 }

src/assets/direct_bi.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="29.435" height="7.636" viewBox="0 0 29.435 7.636">
-  <path id="direct_bi" d="M3.64,8.158-.178,4.34,3.64.522,4.3,1.17l-2.7,2.7h25.89l-2.7-2.7.656-.648L29.257,4.34,27.213,6.384,25.439,8.158,24.783,7.5l2.7-2.693H1.595L4.3,7.5Z" transform="translate(0.178 -0.522)" fill="#1e429f"/>
+<svg width="39" height="6" viewBox="0 0 39 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.451731 2.66267C0.315048 2.79935 0.315048 3.02096 0.451731 3.15764L2.67912 5.38503C2.8158 5.52171 3.03741 5.52171 3.17409 5.38503C3.31078 5.24835 3.31078 5.02674 3.17409 4.89006L1.19419 2.91016L3.17409 0.930257C3.31078 0.793574 3.31078 0.571966 3.17409 0.435282C3.03741 0.298599 2.8158 0.298599 2.67912 0.435282L0.451731 2.66267ZM38.3807 3.15764C38.5174 3.02096 38.5174 2.79935 38.3807 2.66267L36.1533 0.435282C36.0166 0.298599 35.795 0.298599 35.6583 0.435282C35.5216 0.571966 35.5216 0.793574 35.6583 0.930257L37.6382 2.91016L35.6583 4.89006C35.5216 5.02674 35.5216 5.24835 35.6583 5.38503C35.795 5.52171 36.0166 5.52171 36.1533 5.38503L38.3807 3.15764ZM0.699219 3.26016H38.1332V2.56016H0.699219V3.26016Z" fill="#03543F"/>
 </svg>

src/assets/direct_out.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="29.497" height="7.636" viewBox="0 0 29.497 7.636">
-  <path id="direct_out" d="M26.589,8l-.656-.656,2.7-2.693H.91V3.713H28.635l-2.7-2.7.656-.648,3.818,3.818Z" transform="translate(-0.91 -0.364)" fill="#03543f"/>
+<svg width="39" height="6" viewBox="0 0 39 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3807 3.15764C38.5174 3.02096 38.5174 2.79935 38.3807 2.66267L36.1533 0.435282C36.0166 0.298599 35.795 0.298599 35.6583 0.435282C35.5216 0.571966 35.5216 0.793574 35.6583 0.930257L37.6382 2.91016L35.6583 4.89006C35.5216 5.02674 35.5216 5.24835 35.6583 5.38503C35.795 5.52171 36.0166 5.52171 36.1533 5.38503L38.3807 3.15764ZM0.699219 3.26016H38.1332V2.56016H0.699219V3.26016Z" fill="#1E429F"/>
 </svg>

src/assets/forward_default.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3846 3.68889C38.5213 3.55221 38.5213 3.3306 38.3846 3.19392L36.1572 0.966532C36.0205 0.829849 35.7989 0.829849 35.6622 0.966532C35.5255 1.10322 35.5255 1.32482 35.6622 1.46151L37.6421 3.44141L35.6622 5.42131C35.5255 5.55799 35.5255 5.7796 35.6622 5.91628C35.7989 6.05296 36.0205 6.05296 36.1572 5.91628L38.3846 3.68889ZM0.703125 3.79141H38.1371V3.09141H0.703125V3.79141Z" fill="#D9D9D9"/>
+</svg>

src/assets/in_bound.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.615425 3.3111C0.478741 3.44779 0.478741 3.66939 0.615425 3.80608L2.84281 6.03346C2.97949 6.17015 3.2011 6.17015 3.33778 6.03346C3.47447 5.89678 3.47447 5.67517 3.33778 5.53849L1.35789 3.55859L3.33778 1.57869C3.47447 1.44201 3.47447 1.2204 3.33778 1.08372C3.2011 0.947033 2.97949 0.947033 2.84281 1.08372L0.615425 3.3111ZM38.2969 3.20859L0.862911 3.20859L0.862911 3.90859L38.2969 3.90859L38.2969 3.20859Z" fill="#2B4DA5"/>
+</svg>

src/assets/out_bound_blue.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3807 3.68889C38.5174 3.55221 38.5174 3.3306 38.3807 3.19392L36.1533 0.966532C36.0166 0.829849 35.795 0.829849 35.6583 0.966532C35.5216 1.10322 35.5216 1.32482 35.6583 1.46151L37.6382 3.44141L35.6583 5.42131C35.5216 5.55799 35.5216 5.7796 35.6583 5.91628C35.795 6.05296 36.0166 6.05296 36.1533 5.91628L38.3807 3.68889ZM0.699219 3.79141L38.1332 3.79141V3.09141L0.699219 3.09141V3.79141Z" fill="#2B4DA5"/>
+</svg>

src/assets/out_bound_green.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.3846 3.68889C38.5213 3.55221 38.5213 3.3306 38.3846 3.19392L36.1572 0.966532C36.0205 0.829849 35.7989 0.829849 35.6622 0.966532C35.5255 1.10322 35.5255 1.32482 35.6622 1.46151L37.6421 3.44141L35.6622 5.42131C35.5255 5.55799 35.5255 5.7796 35.6622 5.91628C35.7989 6.05296 36.0205 6.05296 36.1572 5.91628L38.3846 3.68889ZM0.703125 3.79141H38.1371V3.09141H0.703125V3.79141Z" fill="#03543F"/>
+</svg>

src/assets/reverse_default.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.615425 3.3111C0.478741 3.44779 0.478741 3.66939 0.615425 3.80608L2.84281 6.03346C2.97949 6.17015 3.2011 6.17015 3.33778 6.03346C3.47447 5.89678 3.47447 5.67517 3.33778 5.53849L1.35789 3.55859L3.33778 1.57869C3.47447 1.44201 3.47447 1.2204 3.33778 1.08372C3.2011 0.947033 2.97949 0.947033 2.84281 1.08372L0.615425 3.3111ZM38.2969 3.20859L0.862911 3.20859L0.862911 3.90859L38.2969 3.90859L38.2969 3.20859Z" fill="#D9D9D9"/>
+</svg>

src/assets/reverse_green.svg

@@ -0,0 +1,3 @@
+<svg width="39" height="7" viewBox="0 0 39 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.615425 3.3111C0.478741 3.44779 0.478741 3.66939 0.615425 3.80608L2.84281 6.03346C2.97949 6.17015 3.2011 6.17015 3.33778 6.03346C3.47447 5.89678 3.47447 5.67517 3.33778 5.53849L1.35789 3.55859L3.33778 1.57869C3.47447 1.44201 3.47447 1.2204 3.33778 1.08372C3.2011 0.947033 2.97949 0.947033 2.84281 1.08372L0.615425 3.3111ZM38.2969 3.20859L0.862911 3.20859L0.862911 3.90859L38.2969 3.90859L38.2969 3.20859Z" fill="#03543F"/>
+</svg>

src/components/FooterComponent.tsx

@@ -6,7 +6,7 @@ const { Footer } = Layout
 export default () => {
   return (
       <Footer style={{ textAlign: 'center',  bottom: "0"}}>
-          Copyright © 2022 <a href="https://netbird.io">NetBird Authors</a>
+          Copyright © 2023 <a href="https://netbird.io">NetBird Authors</a>
       </Footer>
   );
-};
+};

src/components/Navbar.tsx

@@ -1,185 +1,243 @@
-import React, {useEffect, useState} from 'react';
-import {Link, useLocation} from 'react-router-dom';
+import React, { useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
 import logo from "../assets/logo.png";
-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, useOidcIdToken, useOidcUser} from '@axa-fr/react-oidc';
-import {getConfig} from "../config";
-import {User} from "../store/user/types";
-import {useDispatch, useSelector} from "react-redux";
-import {RootState} from "typesafe-actions";
-import {actions as userActions} from "../store/user";
-import {useGetTokenSilently} from "../utils/token";
-import {actions as personalAccessTokenActions} from "../store/personal-access-token";
+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, useOidcIdToken, useOidcUser } from "@axa-fr/react-oidc";
+import { getConfig } from "../config";
+import { User } from "../store/user/types";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "typesafe-actions";
+import { actions as userActions } from "../store/user";
+import { useGetTokenSilently } from "../utils/token";
+import { actions as personalAccessTokenActions } from "../store/personal-access-token";
 
-const {useBreakpoint} = Grid;
+const { useBreakpoint } = Grid;
 
 const Navbar = () => {
-    let location = useLocation();
-    const config = getConfig();
-    const { logout } = useOidc();
-    const {getTokenSilently} = useGetTokenSilently()
-    const dispatch = useDispatch()
+  let location = useLocation();
+  const config = getConfig();
+  const { logout } = useOidc();
+  const { getTokenSilently } = useGetTokenSilently();
+  const dispatch = useDispatch();
 
-    const {oidcUser} = useOidcUser();
-    const {idTokenPayload} = useOidcIdToken()
-    const user = oidcUser;
-    const [currentUser, setCurrentUser] = useState({} as User)
+  const { oidcUser } = useOidcUser();
+  const { idTokenPayload } = useOidcIdToken();
+  const user = oidcUser;
+  const [currentUser, setCurrentUser] = useState({} as User);
 
-    const screens = useBreakpoint();
+  const screens = useBreakpoint();
 
-    const [hideMenuUser, setHideMenuUser] = useState(false)
-    const users = useSelector((state: RootState) => state.user.data)
-    const [isRefreshingUserState, setIsRefreshingUserState] = useState(false)
+  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 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 adminOnlyTabs = ["/setup-keys", "/acls", "/routes", "/dns", "/activity", "/settings"]
-    const [menuItems, setMenuItems] = useState(items)
-    const logoutWithRedirect = () =>
-        logout("/", {client_id: config.clientId});
+  const userEmailKey = "user-email";
+  const userLogoutKey = "user-logout";
+  const userDividerKey = "user-divider";
+  const adminOnlyTabs = [
+    "/setup-keys",
+    "/acls",
+    "/routes",
+    "/dns",
+    "/activity",
+    "/settings",
+  ];
+  const [menuItems, setMenuItems] = useState(items);
+  const logoutWithRedirect = () => {
+    let lRemove = [
+      "peerFilter",
+      "setupKeysFilter",
+      "accessControlFilter",
+      "routesFilter",
+      "nameServerFilter",
+      "userFilter",
+      "serviceUserFilter",
+      "activityFilter",
+    ];
+    lRemove.forEach((element) => {
+      localStorage.removeItem(element);
+    });
+    logout("/", { client_id: config.clientId });
+  };
 
-    const openPersonalUserPage = () => {
-        dispatch(userActions.setUser({
-            id: currentUser.id,
-            email: currentUser.email,
-            role: currentUser.role,
-            auto_groups: currentUser.auto_groups ? currentUser.auto_groups : [],
-            name: currentUser.name,
-            is_current: currentUser.is_current,
-            is_service_user: currentUser.is_service_user,
-        } as User));
-        dispatch(userActions.setUserTabOpen("Users"));
-        dispatch(userActions.setEditUserPopupVisible(true));
-    }
-
-    useEffect(() => {
-        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({
-                label: (
-                    <Link to="#">{user?.name}</Link>
-                ),
-                icon: createAvatar("small"),
-                key: userEmailKey
-            })
-            fs.push({
-                label: (<Button type="link" block onClick={logoutWithRedirect}>Logout</Button>),
-                key: userLogoutKey
-            })
-            setMenuItems([...fs])
-            return
-        }
-        setMenuItems([...fs])
-        setHideMenuUser(true)
-    }, [screens, currentUser])
-
-    useEffect(() => {
-        if (users.length === 0 && !isRefreshingUserState &&
-        window.location.pathname !== '/peers' &&
-        window.location.pathname !==  '/users') {
-            setIsRefreshingUserState(true)
-            dispatch(userActions.getUsers.request({getAccessTokenSilently: getTokenSilently, 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
-            items={[
-                {
-                    label: (<Link to="/users" onClick={openPersonalUserPage}>{user?.email}</Link>),
-                    key: '0',
-                },
-                {
-                    label: (<Link to="/logout" onClick={logoutWithRedirect}>Logout</Link>),
-                    key: '1',
-                }
-            ]}
-        />
+  const openPersonalUserPage = () => {
+    dispatch(
+      userActions.setUser({
+        id: currentUser.id,
+        email: currentUser.email,
+        role: currentUser.role,
+        auto_groups: currentUser.auto_groups ? currentUser.auto_groups : [],
+        name: currentUser.name,
+        is_current: currentUser.is_current,
+        is_service_user: currentUser.is_service_user,
+      } as User)
     );
+    dispatch(userActions.setUserTabOpen("Users"));
+    dispatch(userActions.setEditUserPopupVisible(true));
+  };
 
-    const createAvatar = (size: AvatarSize) => {
-        return user?.picture ? (
-            <Avatar size={size} src={user?.picture} icon={<UserOutlined/>}/>
-        ) : (
-            <Avatar size={size}>{(user?.name || '').slice(0, 1).toUpperCase()}</Avatar>
-        )
+  useEffect(() => {
+    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({
+        label: <Link to="#">{user?.name}</Link>,
+        icon: createAvatar("small"),
+        key: userEmailKey,
+      });
+      fs.push({
+        label: (
+          <Button type="link" block onClick={logoutWithRedirect}>
+            Logout
+          </Button>
+        ),
+        key: userLogoutKey,
+      });
+      setMenuItems([...fs]);
+      return;
+    }
+    setMenuItems([...fs]);
+    setHideMenuUser(true);
+  }, [screens, currentUser]);
+
+  useEffect(() => {
+    if (
+      users.length === 0 &&
+      !isRefreshingUserState &&
+      window.location.pathname !== "/peers" &&
+      window.location.pathname !== "/users"
+    ) {
+      setIsRefreshingUserState(true);
+      dispatch(
+        userActions.getUsers.request({
+          getAccessTokenSilently: getTokenSilently,
+          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;
     }
 
-    return (
-        <>
-            <Row justify="space-evenly" align="middle">
-                <Col flex="0 1 60px">
-                    <Link id="logo" to="/">
-                        <img
-                            alt="logo"
-                            style={{width: "55px"}}
-                            src={logo}
-                        />
-                    </Link>
-                </Col>
-                <Col flex="1 1 auto">
-                    <div>
-                        <Menu mode="horizontal" selectable={true} selectedKeys={[location.pathname]}
-                              onSelect={(e) => {
-                                  dispatch(userActions.setUser(null as unknown as User));
-                                  dispatch(personalAccessTokenActions.resetPersonalAccessTokens(null))
-                              }}
-                              defaultSelectedKeys={[location.pathname]} items={menuItems}/>
-                    </div>
-                </Col>
-                {hideMenuUser &&
-                    <Col>
-                        <Dropdown overlay={menuUser} placement="bottomRight" trigger={['click']}>
-                            {createAvatar("large")}
-                        </Dropdown>
-                    </Col>
-                }
-            </Row>
-        </>
+    if (user.role?.toLowerCase() === "admin") {
+      return true;
+    }
+    return !adminOnlyTabs.find((t) => t === key);
+  };
+
+  const menuUser = (
+    <Menu
+      items={[
+        {
+          label: (
+            <Link to="/users" onClick={openPersonalUserPage}>
+              {user?.email}
+            </Link>
+          ),
+          key: "0",
+        },
+        {
+          label: (
+            <Link to="/logout" onClick={logoutWithRedirect}>
+              Logout
+            </Link>
+          ),
+          key: "1",
+        },
+      ]}
+    />
+  );
+
+  const createAvatar = (size: AvatarSize) => {
+    return user?.picture ? (
+      <Avatar size={size} src={user?.picture} icon={<UserOutlined />} />
+    ) : (
+      <Avatar size={size}>
+        {(user?.name || "").slice(0, 1).toUpperCase()}
+      </Avatar>
     );
+  };
+
+  return (
+    <>
+      <Row justify="space-evenly" align="middle">
+        <Col flex="0 1 60px">
+          <Link id="logo" to="/">
+            <img alt="logo" style={{ width: "55px" }} src={logo} />
+          </Link>
+        </Col>
+        <Col flex="1 1 auto">
+          <div>
+            <Menu
+              mode="horizontal"
+              selectable={true}
+              selectedKeys={[location.pathname]}
+              onSelect={(e) => {
+                dispatch(userActions.setUser(null as unknown as User));
+                dispatch(
+                  personalAccessTokenActions.resetPersonalAccessTokens(null)
+                );
+              }}
+              defaultSelectedKeys={[location.pathname]}
+              items={menuItems}
+            />
+          </div>
+        </Col>
+        {hideMenuUser && (
+          <Col>
+            <Dropdown
+              overlay={menuUser}
+              placement="bottomRight"
+              trigger={["click"]}
+            >
+              {createAvatar("large")}
+            </Dropdown>
+          </Col>
+        )}
+      </Row>
+    </>
+  );
 };
 
 export default Navbar;