Decrease length of the hidden setup key prefix (#195)

https://github.com/netbirdio/dashboard/issues/187

package-lock.json

@@ -10395,9 +10395,9 @@
       }
     },
     "node_modules/json5": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
       "bin": {
         "json5": "lib/cli.js"
       },
@@ -15701,9 +15701,9 @@
       }
     },
     "node_modules/tsconfig-paths/node_modules/json5": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+      "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
       "dependencies": {
         "minimist": "^1.2.0"
       },
@@ -16110,9 +16110,9 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.74.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
-      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
+      "version": "5.76.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.1.tgz",
+      "integrity": "sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==",
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",
@@ -24411,9 +24411,9 @@
       }
     },
     "json5": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz",
-      "integrity": "sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA=="
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="
     },
     "jsonfile": {
       "version": "6.1.0",
@@ -28108,9 +28108,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -28411,9 +28411,9 @@
       "integrity": "sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w=="
     },
     "webpack": {
-      "version": "5.74.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
-      "integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
+      "version": "5.76.1",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.76.1.tgz",
+      "integrity": "sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==",
       "requires": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^0.0.51",

src/components/Banner.tsx

@@ -22,7 +22,7 @@ const Banner = () => {
 	const linkLearnMore = () => {
 		return (
 			<a
-				href="https://netbird.io/docs/how-to-guides/nameservers"
+				href="https://docs.netbird.io/how-to/manage-dns-in-your-network"
 				className="font-bold underline"
 				target="_blank"
 				rel="noreferrer"

src/components/NameServerGroupUpdate.tsx

@@ -604,7 +604,7 @@ const NameServerGroupUpdate = () => {
                                 <Col span={24}>
                                     <Divider></Divider>
                                     <Button icon={<QuestionCircleFilled/>} type="link" target="_blank"
-                                            href="https://netbird.io/docs/how-to-guides/nameservers">Learn more about nameservers</Button>
+                                            href="https://docs.netbird.io/how-to/manage-dns-in-your-network">Learn more about nameservers</Button>
                                 </Col>
                             </Row>
                         </Form>) :

src/components/RouteUpdate.tsx

@@ -458,7 +458,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">Learn more about network routes</Button>
+                                        href="https://docs.netbird.io/how-to/routing-traffic-to-private-networks">Learn more about network routes</Button>
                             </Col>
                         </Row>
                     </Form>

src/components/popups/AddPATPopup.tsx

@@ -193,10 +193,10 @@ const AddPATPopup = () => {
                                 </Form.Item>
                                 <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Should be between 1 and 365 days</Paragraph>
                             </Col>
-                            {/*<Col span={24}>*/}
-                            {/*    <Button icon={<QuestionCircleFilled/>} type="link" target="_blank" disabled={true} style={{marginTop: "20px", marginBottom: "20px"}}*/}
-                            {/*            href="https://netbird.io/docs/overview/personal-access-tokens">Learn more about personal access tokens</Button>*/}
-                            {/*</Col>*/}
+                            <Col span={24}>
+                                <Button icon={<QuestionCircleFilled/>} type="link" target="_blank" disabled={true} style={{marginTop: "20px", marginBottom: "20px"}}
+                                        href="https://docs.netbird.io/how-to/access-netbird-public-api">Learn more about personal access tokens</Button>
+                            </Col>
                         </Row>
                     </Form>}
                     {showPlainToken &&

src/components/popups/InviteUserPopup.tsx

@@ -21,6 +21,7 @@ import {actions as groupActions} from "../../store/group";
 import {User, UserToSave} from "../../store/user/types";
 import {RuleObject} from "antd/lib/form";
 import {CustomTagProps} from "rc-select/lib/BaseSelect";
+import {QuestionCircleFilled} from "@ant-design/icons";
 
 const {Title, Text, Paragraph} = Typography;
 const {Option} = Select;
@@ -298,10 +299,10 @@ const InviteUserPopup = () => {
                                     </Select>
                                 </Form.Item>
                             </Col>
-                            {/*<Col span={24}>*/}
-                            {/*    <Button icon={<QuestionCircleFilled/>} type="link" target="_blank" disabled={true} style={{marginTop: "20px", marginBottom: "20px"}}*/}
-                            {/*            href="https://netbird.io/docs/overview/personal-access-tokens">Learn more about user</Button>*/}
-                            {/*</Col>*/}
+                            <Col span={24}>
+                                <Button icon={<QuestionCircleFilled/>} type="link" target="_blank" disabled={true} style={{marginTop: "20px", marginBottom: "20px"}}
+                                        href="https://docs.netbird.io/how-to/access-netbird-public-api">Learn more about user</Button>
+                            </Col>
                         </Row>
                     </Form>
                 </Container>

src/components/popups/addpeer/addpeer/AddPeerPopup.tsx

@@ -10,6 +10,7 @@ import WindowsTab from "./WindowsTab";
 import MacTab from "./MacTab";
 import Link from "antd/lib/typography/Link";
 import DockerTab from "./DockerTab";
+import AndroidTab from "./AndroidTab";
 
 type Props = {
     greeting?: string;
@@ -48,14 +49,14 @@ export const AddPeerPopup: React.FC<Props> = ({
         },
         {
             key: "3",
-            label: <span><AppleFilled/>macOS</span>,
+            label: <span><AppleFilled/>MacOS</span>,
             children: <MacTab/>,
         },
-        /*{
+        {
             key: "4",
             label: <span><AndroidFilled/>Android</span>,
-            children: <></>,
-        },*/
+            children: <AndroidTab/>,
+        },
         {
             key: "5",
             label: <span><Icon component={DockerSVG}/>Docker</span>,
@@ -91,7 +92,7 @@ export const AddPeerPopup: React.FC<Props> = ({
             After that you should be connected. Add more devices to your network or manage your existing devices in the
             admin panel.
             If you have further questions check out our {<Link target="_blank"
-                                                               href={"https://netbird.io/docs/getting-started/installation"}>installation
+                                                               href={"https://docs.netbird.io/how-to/getting-started#installation"}>installation
             guide</Link>}
         </Paragraph>
     </>

src/components/popups/addpeer/addpeer/AndroidTab.tsx

@@ -0,0 +1,51 @@
+import React, {useState} from 'react';
+
+import {Button, Image, Typography} from "antd";
+import TabSteps from "./TabSteps";
+import { StepCommand } from "./types"
+import googleplay from '../../../../assets/google-play-badge.png';
+const {Text} = Typography;
+
+export const AndroidTab = () => {
+
+    const [steps, setSteps] = useState([
+        {
+            key: 1,
+            title: 'Download and install the application from Google Play Store:',
+            commands: (
+                <a href="https://play.google.com/store/apps/details?id=io.netbird.client" target="_blank">
+                    <Image width="12em" preview={false} style={{marginTop: "5px"}} src={googleplay}/>
+                </a>
+            ),
+            copied: false
+        } as StepCommand,
+        {
+            key: 2,
+            title: 'Run the application and click on the "Connect" button in the middle of the screen',
+            commands: '',
+            copied: false,
+            showCopyButton: false
+        },
+        {
+            key: 3,
+            title: 'Sign up using your email address',
+            commands: '',
+            copied: false,
+            showCopyButton: false
+        }
+    ])
+
+    return (
+        <div style={{marginTop: 10}}>
+            <Text style={{fontWeight: "bold"}}>
+                Install on Android
+            </Text>
+            <div style={{marginTop: 5}}>
+                <TabSteps stepsItems={steps}/>
+            </div>
+
+        </div>
+    )
+}
+
+export default AndroidTab

src/components/popups/addpeer/addpeer/DockerTab.tsx

@@ -31,7 +31,7 @@ export const DockerTab = () => {
             key: 3,
             title: "Read docs",
             commands: (
-                <Link href="https://netbird.io/docs/getting-started/installation#running-netbird-in-docker" target="_blank">Running NetBird in Docker</Link>
+                <Link href="https://docs.netbird.io/how-to/getting-started#running-net-bird-in-docker" target="_blank">Running NetBird in Docker</Link>
             ),
             copied: false,
             showCopyButton: false

src/components/popups/addpeer/addpeer/LinuxTab.tsx

@@ -12,7 +12,7 @@ export const OtherTab = () => {
             key: 1,
             title: 'For other installation options check our documentation.',
             commands: (
-                <Button type="primary" href={`https://netbird.io/docs/getting-started/installation#binary-install`} target="_blank">
+                <Button type="primary" href={`https://docs.netbird.io/how-to/getting-started#binary-install`} target="_blank">
                     Documentation
                 </Button>
             ),

src/components/popups/addpeer/addpeer/MacTab.tsx

@@ -1,12 +1,14 @@
 import React, {useState} from 'react';
 
-import {Button, Typography} from "antd";
+import {Button, Divider, Row, Tooltip, Typography} from "antd";
 import TabSteps from "./TabSteps";
 import {StepCommand} from "./types"
 import {formatNetBirdUP} from "./common"
 import {Collapse} from "antd";
 import SyntaxHighlighter from "react-syntax-highlighter";
-const { Panel } = Collapse;
+import {QuestionCircleOutlined} from "@ant-design/icons";
+
+const {Panel} = Collapse;
 
 const {Text} = Typography;
 
@@ -15,10 +17,28 @@ export const LinuxTab = () => {
     const [quickSteps, setQuickSteps] = useState([
         {
             key: 1,
-            title: 'Download and run installer:',
+            title: (
+                <Row>
+                    <Text>Download and run MacOS installer: </Text>
+                    <Tooltip title={
+                        <text>If you don't know what chip your Mac has, you can find out by clicking on the Apple logo
+                            in the top left corner of your screen and selecting 'About This Mac'. For more information
+                            click <a href="https://support.apple.com/en-us/HT211814" target="_blank">here</a></text>
+                    }
+                             className={"ant-form-item-tooltip"}>
+                        <QuestionCircleOutlined
+                            style={{color: "rgba(0, 0, 0, 0.45)", cursor: "help", marginLeft: "3px"}}/>
+                    </Tooltip>
+                </Row>
+
+            ),
             commands: (
-                <Button style={{marginTop: "5px"}} type="primary" href="https://pkgs.netbird.io/windows/x64"
-                        target="_blank">Download NetBird</Button>
+                <Row style={{paddingTop: "5px"}}>
+                    <Button style={{marginRight: "10px"}} type="primary" href="https://pkgs.netbird.io/macos/amd64">Download
+                        for Intel</Button>
+                    <Button style={{marginRight: "10px"}} type="default" href="https://pkgs.netbird.io/macos/arm64">Download
+                        for M1 & M2</Button>
+                </Row>
             ),
             copied: false
         } as StepCommand,
@@ -78,35 +98,38 @@ export const LinuxTab = () => {
             showCopyButton: true
         } as StepCommand
     ])
-
     return (
         <div style={{marginTop: 10}}>
             <Text style={{fontWeight: "bold"}}>
-                Install with one command
+                Install on MacOS
             </Text>
-            <div style={{fontSize: ".85em", marginTop: 5, marginBottom: 25}}>
-                <SyntaxHighlighter language="bash">
-                    curl -fsSL https://pkgs.netbird.io/install.sh | sh
-                </SyntaxHighlighter>
-            </div>
-            <Text style={{fontWeight: "bold"}}>
-                Or install manually with HomeBrew
-            </Text>
-            <div style={{marginTop: 5}}>
-                <TabSteps stepsItems={steps}/>
-            </div>
-        </div>
-    /*<div style={{marginTop: 5}}>
+            <div style={{marginTop: 5, marginBottom: 5}}>
                 <TabSteps stepsItems={quickSteps}/>
-            </div>*/
-        /*<div style={{marginTop: 10}}>
-            <Text style={{fontWeight: "bold"}}>
-                Install on macOS with Homebrew
-            </Text>
-            <div style={{marginTop: 5}}>
-                <TabSteps stepsItems={steps}/>
             </div>
-        </div>*/
+            <div style={{marginTop: 0}}/>
+            {/*<Divider style={{marginTop: "5px"}} />*/}
+            <Collapse bordered={false} style={{backgroundColor: "unset"}}>
+                <Panel className="CustomPopupCollapse" header={<Text strong={true}>Or install via command line</Text>}
+                       key="1">
+                    <div style={{marginLeft: "25px"}}>
+                        <Text style={{fontWeight: "bold"}}>
+                            Install with one command
+                        </Text>
+                        <div style={{fontSize: ".85em", marginTop: 5, marginBottom: 25}}>
+                            <SyntaxHighlighter language="bash">
+                                curl -fsSL https://pkgs.netbird.io/install.sh | sh
+                            </SyntaxHighlighter>
+                        </div>
+                        <Text style={{fontWeight: "bold"}}>
+                            Or install manually with HomeBrew
+                        </Text>
+                        <div style={{marginTop: 5}}>
+                            <TabSteps stepsItems={steps}/>
+                        </div>
+                    </div>
+                </Panel>
+            </Collapse>
+        </div>
     )
 }
 

src/index.css

@@ -5,6 +5,7 @@ body {
   background-color: #f0f2f5;
 }
 
+  
 .ant-layout-header {
   background: #fff;
   padding: 0;
@@ -23,12 +24,12 @@ body {
   border: none;
 }
 
-.ant-menu-horizontal > .ant-menu-item a {
+.ant-menu-horizontal>.ant-menu-item a {
   color: rgba(107, 114, 128, 1);
   font-weight: 500;
 }
 
-.ant-menu-horizontal > .ant-menu-item-selected a {
+.ant-menu-horizontal>.ant-menu-item-selected a {
   color: rgba(17, 24, 39, 1);
 }
 
@@ -47,23 +48,25 @@ body {
   flex-wrap: wrap;
   align-items: flex-start;
 }
+
 .space-align-block {
   flex: none;
   margin: 8px 4px;
   padding: 4px;
   border: none;
 }
+
 .space-align-block .mock-block {
   display: inline-block;
   padding: 32px 8px 16px;
   background: rgba(150, 150, 150, 0.2);
 }
 
-.bg-indigo-600{
+.bg-indigo-600 {
   background-color: rgb(79, 70, 229);
 }
 
-.card-table-no-placeholder .ant-table-placeholder{
+.card-table-no-placeholder .ant-table-placeholder {
   display: none;
 }
 
@@ -75,9 +78,10 @@ body {
   height: 200px;
 }
 
-.card-table .ant-table-ping-left:not(.ant-table-has-fix-left) .ant-table-container::before  {
+.card-table .ant-table-ping-left:not(.ant-table-has-fix-left) .ant-table-container::before {
   box-shadow: none;
 }
+
 .card-table .ant-table-ping-right:not(.ant-table-has-fix-right) .ant-table-container::after {
   box-shadow: none;
 }
@@ -119,15 +123,17 @@ body {
   margin: 24px 0;
 }
 
-.ant-steps-item-icon{
+.ant-steps-item-icon {
   background: #EBEBEB !important;
   border-color: #EBEBEB !important;
 }
-.ant-steps-icon-dot{
+
+.ant-steps-icon-dot {
   background: #EBEBEB !important;
   border-color: #EBEBEB !important;
 }
-.ant-steps-icon  {
+
+.ant-steps-icon {
   background: #EBEBEB !important;
   border: none;
   color: black !important;
@@ -145,10 +151,16 @@ td.non-highlighted-table-column {
   background-color: #FFFFFF !important;
 }
 
-.ant-table-tbody > tr.ant-table-row:hover > td {
+.ant-table-tbody>tr.ant-table-row:hover>td {
   background: #FAFAFA !important;
 }
 
 .ant-table-thead .ant-table-cell {
   font-weight: normal !important;
+}
+
+.CustomPopupCollapse .ant-collapse-content-box,
+.CustomPopupCollapse .ant-collapse-header {
+  padding-left: 0 !important;
+  padding-top: 0 !important;
 }

src/store/index.ts

@@ -5,6 +5,7 @@ import { composeWithDevTools } from 'redux-devtools-extension';
 import { sagas as peerSagas } from './peer';
 import { sagas as setupKeySagas } from './setup-key';
 import { sagas as userSagas } from './user';
+import { sagas as policySagas } from './policy';
 import { sagas as ruleSagas } from './rule';
 import { sagas as groupSagas } from './group';
 import { sagas as routeSagas } from './route';
@@ -28,6 +29,7 @@ sagaMiddleware.run(peerSagas);
 sagaMiddleware.run(setupKeySagas);
 sagaMiddleware.run(userSagas);
 sagaMiddleware.run(ruleSagas);
+sagaMiddleware.run(policySagas);
 sagaMiddleware.run(groupSagas);
 sagaMiddleware.run(routeSagas);
 sagaMiddleware.run(nameserverGroupSagas);
@@ -36,4 +38,4 @@ sagaMiddleware.run(dnsSettingsSagas);
 sagaMiddleware.run(accountSagas);
 sagaMiddleware.run(personalAccessTokenSagas);
 
-export { apiClient, rootReducer, store };
+export { apiClient, rootReducer, store };

src/store/policy/actions.ts

@@ -0,0 +1,34 @@
+import { ActionType, createAction, createAsyncAction } from 'typesafe-actions';
+import { Policy, PolicyToSave } from './types';
+import { ApiError, CreateResponse, DeleteResponse, RequestPayload } from '../../services/api-client/types';
+
+const actions = {
+    getPolicies: createAsyncAction(
+        'GET_POLICIES_REQUEST',
+        'GET_POLICIES_SUCCESS',
+        'GET_POLICIES_FAILURE',
+    )<RequestPayload<null>, Policy[], ApiError>(),
+
+    savePolicy: createAsyncAction(
+        'SAVE_POLICY_REQUEST',
+        'SAVE_POLICY_SUCCESS',
+        'SAVE_POLICY_FAILURE',
+    )<RequestPayload<PolicyToSave>, CreateResponse<Policy | null>, CreateResponse<Policy | null>>(),
+    setSavedPolicy: createAction('SET_CREATE_POLICY')<CreateResponse<Policy | null>>(),
+    resetSavedPolicy: createAction('RESET_CREATE_POLICY')<null>(),
+
+    deletePolicy: createAsyncAction(
+        'DELETE_POLICY_REQUEST',
+        'DELETE_POLICY_SUCCESS',
+        'DELETE_POLICY_FAILURE'
+    )<RequestPayload<string>, DeleteResponse<string | null>, DeleteResponse<string | null>>(),
+    setDeletedPolicy: createAction('SET_DELETED_POLICY')<DeleteResponse<string | null>>(),
+    resetDeletedPolicy: createAction('RESET_DELETED_POLICY')<null>(),
+    removePolicy: createAction('REMOVE_POLICY')<string>(),
+
+    setPolicy: createAction('SET_POLICY')<Policy>(),
+    setSetupNewPolicyVisible: createAction('SET_SETUP_NEW_POLICY_VISIBLE')<boolean>()
+};
+
+export type ActionTypes = ActionType<typeof actions>;
+export default actions;

src/store/policy/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 };