Disable banner (#146)

prevent update for own user

use the is_current for label

removed unused imports

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

@@ -53,13 +53,10 @@ 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}
 
-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 \$\$NETBIRD_HOTJAR_TRACK_ID \$\$AUTH_REDIRECT_URI \$\$AUTH_SILENT_REDIRECT_URI"
+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"

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

@@ -20,6 +20,8 @@ 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";
 
 
 
@@ -105,6 +107,8 @@ function App() {
                             <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/>

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/Banner.tsx

@@ -36,7 +36,7 @@ const Banner = () => {
 
 		if((!stored_banner_closed || stored_banner_closed !== 'true') ||
 			(!store_banner_md5 || store_banner_md5 !== announcement_md5)) {
-			setShow(true);
+			//setShow(true);
 			localStorage.setItem(banner_md5_key,announcement_md5);
 			localStorage.setItem(banner_closed_key,'false');
 		}

src/components/Navbar.tsx

@@ -5,7 +5,7 @@ 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 {useOidc, useOidcIdToken, useOidcUser} from '@axa-fr/react-oidc';
 import {getConfig} from "../config";
 import {User} from "../store/user/types";
 import {useDispatch, useSelector} from "react-redux";
@@ -23,6 +23,7 @@ const Navbar = () => {
     const dispatch = useDispatch()
 
     const {oidcUser} = useOidcUser();
+    const {idTokenPayload} = useOidcIdToken()
     const user = oidcUser;
     const [currentUser, setCurrentUser] = useState({} as User)
 
@@ -39,13 +40,15 @@ const Navbar = () => {
         {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="/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"]
+    const adminOnlyTabs = ["/setup-keys", "/acls", "/routes", "/dns", "/activity", "/settings"]
     const [menuItems, setMenuItems] = useState(items)
     const logoutWithRedirect = () =>
         logout("/", {client_id: config.clientId});
@@ -84,9 +87,13 @@ const Navbar = () => {
         if (users.length === 0 && isRefreshingUserState) {
             return
         }
+        let runUser = oidcUser
+        if (!oidcUser) {
+            runUser = idTokenPayload
+        }
         setIsRefreshingUserState(false)
-        if (oidcUser && oidcUser.sub) {
-            const found = users.find(u => u.id == oidcUser.sub)
+        if (runUser) {
+            const found = users.find(u => u.is_current ? u.is_current : runUser.sub ? u.id == runUser.sub : false)
             if (found) {
                 setCurrentUser(found)
             }

src/components/PeerUpdate.tsx

@@ -2,7 +2,7 @@ import React, {useEffect, useRef, useState} from 'react';
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
 import {actions as peerActions} from '../store/peer';
-import {Button, Col, Collapse, Divider, Drawer, Form, Input, Row, Select, Space, Tag, Typography} from "antd";
+import {Button, Col, Collapse, Divider, Drawer, Form, Input, Radio, Row, Select, Space, Tag, Typography} from "antd";
 import {Header} from "antd/es/layout/layout";
 import type {CustomTagProps} from 'rc-select/lib/BaseSelect'
 import {FormPeer, Peer, PeerGroupsToSave} from "../store/peer/types";
@@ -18,6 +18,7 @@ const {Panel} = Collapse;
 const punycode = require('punycode/')
 
 const PeerUpdate = () => {
+
     const {getAccessTokenSilently} = useGetAccessTokenSilently()
     const dispatch = useDispatch()
     const groups = useSelector((state: RootState) => state.group.data)
@@ -200,6 +201,10 @@ const PeerUpdate = () => {
         return !formPeer.name || formPeer.name === peer.name
     }
 
+    const noUpdateToLoginExpiration = (): Boolean => {
+        return formPeer.login_expiration_enabled === peer.login_expiration_enabled
+    }
+
     const onChange = (data: any) => {
         setFormPeer({...formPeer, ...data})
     }
@@ -232,7 +237,8 @@ const PeerUpdate = () => {
         return {
             id: formPeer.id,
             ssh_enabled: formPeer.ssh_enabled,
-            name: formPeer.name
+            name: formPeer.name,
+            login_expiration_enabled: formPeer.login_expiration_enabled
         } as Peer
     }
 
@@ -240,7 +246,7 @@ const PeerUpdate = () => {
         form.validateFields()
             .then((values) => {
                 setSubmitRunning(true)
-                if (!noUpdateToName()) {
+                if (!noUpdateToName() || !noUpdateToLoginExpiration()) {
                     const peerUpdate = createPeerToSave()
                     setCallingPeerAPI(true)
                     dispatch(peerActions.updatePeer.request({
@@ -248,7 +254,7 @@ const PeerUpdate = () => {
                         payload: peerUpdate
                     }))
                 }
-                if (peerGroupsToSave.groupsToRemove.length || peerGroupsToSave.groupsToAdd.length || peerGroupsToSave.groupsNoId.length) {
+                if (!noUpdateToGroups()) {
                     setCallingGroupAPI(true)
                     dispatch(peerActions.saveGroups.request({
                         getAccessTokenSilently: getAccessTokenSilently,
@@ -303,7 +309,7 @@ const PeerUpdate = () => {
                         <Space style={{display: 'flex', justifyContent: 'end'}}>
                             <Button onClick={onCancel} disabled={savedGroups.loading}>Cancel</Button>
                             <Button type="primary"
-                                    disabled={(savedGroups.loading || updatedPeers.loading) || (noUpdateToGroups() && noUpdateToName())}
+                                    disabled={(savedGroups.loading || updatedPeers.loading) || (noUpdateToGroups() && noUpdateToName() && noUpdateToLoginExpiration())}
                                     onClick={handleFormSubmit}>Save</Button>
                         </Space>
                     }
@@ -435,6 +441,20 @@ const PeerUpdate = () => {
                                     </Form.Item>
                                 </Col>
                             )}
+                            <Col span={24}>
+                                <Form.Item
+                                    name="login_expiration_enabled"
+                                    label="Login expiration"
+                                    tooltip="When login expires, the user has to re-authenticate this peer. This only applies to peers added with the SSO login."
+                                >
+                                    <Radio.Group
+                                        options={[{label: 'Enabled', value: true}, {label: 'Disabled', value: false}]}
+                                        optionType="button"
+                                        buttonStyle="solid"
+                                        disabled={!formPeer.user_id}
+                                    />
+                                </Form.Item>
+                            </Col>
                             <Col span={24}>
                                 <Form.Item
                                     name="groupsNames"
@@ -458,23 +478,6 @@ const PeerUpdate = () => {
                                     </Select>
                                 </Form.Item>
                             </Col>
-                            {/*<Col span={24}>
-                                <Row wrap={false} gutter={12}>
-                                    <Col flex="none">
-                                        <FlagFilled/>
-                                    </Col>
-                                    <Col flex="auto">
-                                        <Paragraph>
-                                            Every peer is part of the group All, thus you can't remove it.
-                                        </Paragraph>
-                                    </Col>
-                                </Row>
-                            </Col>*/}
-                            {/*<Col span={24}>
-                                <Divider orientation="left" plain style={{color: "#5a5c5a"}}>
-                                    System Info
-                                </Divider>
-                            </Col>*/}
                             <Col span={24}>
                                 <Collapse onChange={onChange} bordered={false} ghost={true}
                                           style={{color: "#5a5c5a"}}>

src/components/RouteUpdate.tsx

@@ -73,14 +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 (!newRoute ) {
-            setRoutingPeerMSG("Add additional routing peer")
+            setRoutingPeerMSG(defaultRoutingPeerMSG)
             setMasqueradeMSG("Update Masquerade")
             setStatusMSG("Update Status")
         } else {
@@ -136,9 +136,9 @@ const RouteUpdate = () => {
         let peerIDList = inputRoute.peer.split(routePeerSeparator)
         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)
@@ -167,7 +167,7 @@ const RouteUpdate = () => {
                         payload: routeToSave
                     }))
                 } else {
-                    let groupedDataTable = transformGroupedDataTable(routes, peerIPToName)
+                    let groupedDataTable = transformGroupedDataTable(routes, peers)
                     groupedDataTable.forEach((group) => {
                         if (group.key == previousRouteKey) {
                             group.groupedRoutes.forEach((route) => {

src/components/SetupKeyNew.tsx

@@ -23,18 +23,18 @@ import {RootState} from "typesafe-actions";
 import {CloseOutlined, EditOutlined, QuestionCircleFilled} from "@ant-design/icons";
 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, {ExpiresInValue} from "../views/ExpiresInInput";
+import ExpiresInInput, {expiresInToSeconds, ExpiresInValue} from "../views/ExpiresInInput";
 
 const {Option} = Select;
 
 const {Text} = Typography;
 
-const ExpiresInDefault: ExpiresInValue = {number: 30, interval: "Days"}
+const ExpiresInDefault: ExpiresInValue = {number: 30, interval: "day"}
 
 const customExpiresFormat: DatePickerProps['format'] = value => {
     return formatDate(value)
@@ -117,31 +117,6 @@ const SetupKeyNew = () => {
             usage_limit: formSetupKey.usage_limit
         } as SetupKeyToSave
     }
-    const expiresInToSeconds = (expiresIn: ExpiresInValue): number => {
-        if (!expiresIn.number || !expiresIn.interval) {
-            return 0
-        }
-        let multiplier = 0
-        switch (expiresIn.interval.toLowerCase()) {
-            case "day":
-                multiplier = 24 * 3600
-                break
-            case "week":
-                multiplier = 7 * 24 * 3600
-                break
-            case "month":
-                multiplier = 30 * 24 * 3600
-                break
-            case "year":
-                multiplier = 365 * 24 * 3600
-                break
-            default:
-                multiplier = 0
-        }
-
-        return expiresIn.number * multiplier
-
-    }
 
     const handleFormSubmit = () => {
         form.validateFields()
@@ -290,13 +265,6 @@ const SetupKeyNew = () => {
         return setupKey.auto_groups?.filter(g => !formGroupIds.includes(g)).length > 0
     }
 
-    const checkExpiresIn = (_: any, value: { number: number }) => {
-        if (value.number > 0) {
-            return Promise.resolve();
-        }
-        return Promise.reject(new Error("Expiration must be greater than zero"));
-    };
-
     return (
         <>
             {setupKey &&
@@ -447,7 +415,12 @@ const SetupKeyNew = () => {
                                 <Col span={24}>
                                     <Form.Item name="expiresInFormatted" label="Expires In"
                                                rules={[{validator: checkExpiresIn}]}>
-                                        <ExpiresInInput/>
+                                        <ExpiresInInput options={
+                                            Array.of(
+                                                {key: "day", title: "Days"},
+                                                {key: "month", title: "Months"},
+                                                {key: "year", title: "Years"})
+                                        }/>
                                     </Form.Item>
                                 </Col>}
                             <Col span={12}>
@@ -455,7 +428,8 @@ const SetupKeyNew = () => {
                                            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"}
+                                    <InputNumber min={0} defaultValue={0}
+                                                 disabled={setupKey.id || formSetupKey.type !== "reusable"}
                                                  style={{width: "100%"}}
                                     />
                                 </Form.Item>

src/components/UserUpdate.tsx

@@ -12,7 +12,7 @@ import {actions as userActions} from "../store/user";
 import {useGetAccessTokenSilently} from "../utils/token";
 import {useOidcUser} from "@axa-fr/react-oidc";
 
-const {Paragraph, Text} = Typography;
+const {Paragraph} = Typography;
 
 const {confirm} = Modal;
 
@@ -233,7 +233,8 @@ const UserUpdate = () => {
             role: "",
             status: "",
             auto_groups: [],
-            name: user.name
+            name: user.name,
+            is_current: user.is_current,
         } as User));
         setFormUser({} as FormUser)
         toggleEditName(false)
@@ -357,7 +358,7 @@ const UserUpdate = () => {
                                 >
                                     <Select
                                         style={{width: '100%'}}
-                                        disabled={currentUser.role != null && currentUser.role !== "admin"}>
+                                        disabled={(currentUser.role != null && currentUser.role !== "admin") || formUser.is_current}>
                                         <Option value="admin">admin</Option>
                                         <Option value="user">user</Option>
                                     </Select>

src/components/addpeer/MacTab.tsx

@@ -30,13 +30,23 @@ export const LinuxTab = () => {
         } as StepCommand,
         {
             key: 3,
+            title: 'Start NetBird daemon:',
+            commands: [
+                `sudo netbird service install`,
+                `sudo netbird service start`
+            ].join('\n'),
+            copied: false,
+            showCopyButton: true
+        } as StepCommand,
+        {
+            key: 4,
             title: 'Run NetBird and log in the browser:',
             commands: formatNetBirdUP(),
             copied: false,
             showCopyButton: true
         } as StepCommand,
         {
-            key: 4,
+            key: 5,
             title: 'Get your IP address:',
             commands: [
                 `sudo ifconfig utun100`

src/components/addpeer/WindowsTab.tsx

@@ -3,18 +3,15 @@ import React, {useState} from 'react';
 import { Button } from "antd";
 import TabSteps from "./TabSteps";
 import { StepCommand } from "./types"
-import {getConfig} from "../../config";
-const {latestVersion} = getConfig();
 
 export const WindowsTab = () => {
 
-    const releaseVersion = latestVersion ? latestVersion.replace("v", "") : "0.6.3"
     const [steps, setSteps] = useState([
         {
             key: 1,
             title: 'Download and run Windows installer:',
             commands: (
-                <Button type="primary" href={`https://github.com/netbirdio/netbird/releases/download/v${releaseVersion}/netbird_installer_${releaseVersion}_windows_amd64.exe`} target="_blank">Download NetBird</Button>
+                <Button type="primary" href="https://pkgs.netbird.io/windows/x64" target="_blank">Download NetBird</Button>
             ),
             copied: false
         } as StepCommand,

src/config.json

@@ -7,7 +7,6 @@
 
   "apiOrigin": "$NETBIRD_MGMT_API_ENDPOINT",
   "grpcApiOrigin": "$NETBIRD_MGMT_GRPC_API_ENDPOINT",
-  "latestVersion": "$NETBIRD_LATEST_VERSION",
   "hotjarTrackID": "$NETBIRD_HOTJAR_TRACK_ID",
   "redirectURI": "$AUTH_REDIRECT_URI",
   "silentRedirectURI": "$AUTH_SILENT_REDIRECT_URI"

src/config.ts

@@ -28,7 +28,6 @@ export function getConfig() {
     scopesSupported: configJson.authScopesSupported,
     apiOrigin: configJson.apiOrigin,
     grpcApiOrigin: configJson.grpcApiOrigin,
-    latestVersion: configJson.latestVersion,
     audience: configJson.authAudience,
     hotjarTrackID: configJson.hotjarTrackID,
     redirectURI: redirectURI,

src/services/api-client/api-request.ts

@@ -3,12 +3,6 @@ import axios from 'axios';
 import {ApiError, ApiRequestParams, ApiResponse} from './types';
 import {headersFactory, RequestHeader} from './header-factory';
 
-/*axios.interceptors.response.use(undefined, err => {
-  let res = err.response;
-  if (res.status === 401) {
-  }
-})*/
-
 async function apiRequest<T>(params: ApiRequestParams): Promise<ApiResponse<T>> {
   const data = params.data ? (params.data as any).payload : undefined;
   const url = `${params.urlBase}${params.url}`;

src/store/account/actions.ts

@@ -0,0 +1,23 @@
+import {ActionType, createAction, createAsyncAction} from 'typesafe-actions';
+import {Account} from './types';
+import {ApiError, ChangeResponse, RequestPayload} from '../../services/api-client/types';
+
+const actions = {
+    getAccounts: createAsyncAction(
+        'GET_ACCOUNTS_REQUEST',
+        'GET_ACCOUNTS_SUCCESS',
+        'GET_ACCOUNTS_FAILURE',
+    )<RequestPayload<null>, Account[], ApiError>(),
+
+    updateAccount: createAsyncAction(
+        'UPDATE_ACCOUNT',
+        'UPDATE_ACCOUNT_SUCCESS',
+        'UPDATE_ACCOUNT_FAILURE',
+    )<RequestPayload<Account>, ChangeResponse<Account | null>, ChangeResponse<Account | null>>(),
+    setUpdateAccount: createAction('SET_UPDATED_ACCOUNT')<ChangeResponse<Account | null>>(),
+    resetUpdateAccount: createAction('RESET_UPDATED_ACCOUNT')<null>(),
+};
+
+
+export type ActionTypes = ActionType<typeof actions>;
+export default actions;

src/store/account/index.ts

@@ -0,0 +1,7 @@
+import actions, { ActionTypes as _actionTypes } from './actions';
+import reducer from './reducer';
+import sagas from './sagas';
+
+export type ActionTypes = _actionTypes;
+
+export { actions, reducer, sagas };

src/store/account/reducer.ts

@@ -0,0 +1,54 @@
+import { createReducer } from 'typesafe-actions';
+import { combineReducers } from 'redux';
+import { Account } from './types';
+import actions, { ActionTypes } from './actions';
+import {ApiError, ChangeResponse} from "../../services/api-client/types";
+
+type StateType = Readonly<{
+  data: Account[] | null;
+  loading: boolean;
+  failed: ApiError | null;
+  savedAccount: ChangeResponse<Account | null>;
+}>;
+
+const initialState: StateType = {
+  data: [],
+  loading: false,
+  failed: null,
+  savedAccount: <ChangeResponse<Account | null>>{
+    loading: false,
+    success: false,
+    failure: false,
+    error: null,
+    data : null
+  },
+};
+
+const data = createReducer<Account[], ActionTypes>(initialState.data as Account[])
+  .handleAction(actions.getAccounts.success,(_, action) => action.payload)
+  .handleAction(actions.getAccounts.failure, () => []);
+
+const loading = createReducer<boolean, ActionTypes>(initialState.loading)
+    .handleAction(actions.getAccounts.request, () => true)
+    .handleAction(actions.getAccounts.success, () => false)
+    .handleAction(actions.getAccounts.failure, () => false);
+
+const failed = createReducer<ApiError | null, ActionTypes>(initialState.failed)
+    .handleAction(actions.getAccounts.request, () => null)
+    .handleAction(actions.getAccounts.success, () => null)
+    .handleAction(actions.getAccounts.failure, (store, action) => action.payload);
+
+const updatedAccount = createReducer<ChangeResponse<Account | null>, ActionTypes>(initialState.savedAccount)
+    .handleAction(actions.updateAccount.request, () => initialState.savedAccount)
+    .handleAction(actions.updateAccount.success, (store, action) => action.payload)
+    .handleAction(actions.updateAccount.failure, (store, action) => action.payload)
+    .handleAction(actions.setUpdateAccount, (store, action) => action.payload)
+    .handleAction(actions.resetUpdateAccount, () => initialState.savedAccount)
+
+
+export default combineReducers({
+  data,
+  loading,
+  failed,
+  updatedAccount
+});