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

lower case of the Create key button
Change edit key on group from popup to page (#194 )
2026-09-23 00:30:43 -07:00 · 2023-06-02 11:06:05 +02:00 · 2023-06-02 10:53:47 +02:00 · 2023-06-01 16:51:51 +02:00 · 2023-06-01 12:08:58 +02:00 · 2023-06-01 09:49:10 +02:00
43 changed files with 3502 additions and 1668 deletions
@@ -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",
@@ -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"
@@ -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>) :
@@ -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>
@@ -130,27 +130,25 @@ const AddPATPopup = () => {
                }
                width={460}
            >
-                <Container style={{textAlign: "start"}}>
+                <Container style={{textAlign: "start", marginLeft: "-15px", marginRight: "-15px"}}>
                    <Paragraph
-                        style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px", fontWeight: "500"}}>
-                        {showPlainToken ? "Token created successfully!" : "Create a Personal Access Token"}
+                        style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px"}}>
+                        {showPlainToken ? "Token created successfully!" : "Create token"}
                    </Paragraph>
                    {!showPlainToken && <Paragraph type={"secondary"}
                               style={{
                                   textAlign: "start",
-                                   fontSize: "14px",
                                   whiteSpace: "pre-line",
                                   marginTop: "-23px",
                                   paddingBottom: "25px",
                               }}>
-                        {"This token can be used to authenticate against" + "\n" + "NetBird's Public API."}
+                        {"Use this token to access NetBird's public API"}
                    </Paragraph>}
                    {showPlainToken && <Paragraph type={"secondary"} style={{
                        textAlign: "start",
-                        fontSize: "14px",
                        whiteSpace: "pre-line",
-                        marginTop: "40px",
-                    }}>{"This token will not be shown again, so be sure to copy it and" + "\n" + "store in a secure location."}</Paragraph>}
+                        marginTop: "25px",
+                    }}>{"This token won't be shown again, so be sure to copy and store it in a secure location"}</Paragraph>}
                    {!showPlainToken && <Form layout="vertical" hideRequiredMark form={form}
                                              initialValues={{
                                                  expires_in: ExpiresInDefault,
@@ -160,14 +158,14 @@ const AddPATPopup = () => {
                            <Col span={24}>
                                <Row align="top">
                                    <Col flex="auto">
-                                        <Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "-8px"}}>Token name</Paragraph>
-                                        <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Create a name to identify the token easily</Paragraph>
+                                        <Paragraph style={{fontWeight: "bold", marginTop: "-10px"}}>Name</Paragraph>
+                                        <Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Set an easily identifiable name for your token</Paragraph>
                                        <Form.Item
                                            name="name"
                                            style={{marginTop: "-10px"}}
                                            rules={[{
                                                required: true,
-                                                message: 'Please add a name for this personal access token',
+                                                message: 'Please add a name for this token',
                                                whitespace: true
                                            }]}
                                        >
@@ -179,9 +177,9 @@ const AddPATPopup = () => {
                                    </Col>
                                </Row>
                            </Col>
-                            <Col span={24} style={{textAlign: "left"}}>
-                                <Paragraph style={{fontSize: "16px", fontWeight: "500"}}>Expires in</Paragraph>
-                                <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Number of days this token is valid for</Paragraph>
+                            <Col span={24} style={{textAlign: "left", marginTop: "10px"}}>
+                                <Paragraph style={{fontWeight: "bold", marginTop: "-10px"}}>Expires in</Paragraph>
+                                <Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Number of days this token will be valid for</Paragraph>
                                <Form.Item
                                    name="expires_in"
                                    style={{marginTop: "-10px"}}
@@ -195,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 &&
@@ -199,10 +199,10 @@ const AddServiceUserPopup = () => {
                }
                width={460}
            >
-                <Container style={{textAlign: "start"}}>
+                <Container style={{textAlign: "start", marginLeft: "-15px", marginRight: "-15px"}}>
                    <Paragraph
-                        style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px", fontWeight: "500"}}>
-                        {"Add Service User"}
+                        style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px"}}>
+                        {"Add service user"}
                    </Paragraph>
                    <Paragraph type={"secondary"}
                               style={{
@@ -211,7 +211,7 @@ const AddServiceUserPopup = () => {
                                   marginTop: "-23px",
                                   paddingBottom: "25px",
                               }}>
-                        {"Service Users are non-login users that are not associated with any specific person."}
+                        {"Service users are non-login users that are not associated with any specific person."}
                    </Paragraph>
                    <Form layout="vertical" hideRequiredMark form={form}
                          initialValues={{
@@ -220,8 +220,8 @@ const AddServiceUserPopup = () => {
                    >
                        <Row gutter={16}>
                            <Col span={24}>
-                                <Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "-10px"}}>Name</Paragraph>
-                                <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Set a name to easily identify the user</Paragraph>
+                                <Paragraph style={{fontWeight: "bold", marginTop: "-10px"}}>Name</Paragraph>
+                                <Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Set a name to easily identify the user</Paragraph>
                                <Form.Item
                                    name="name"
                                    rules={[{
@@ -232,14 +232,14 @@ const AddServiceUserPopup = () => {
                                    style={{marginTop: "-8px"}}
                                >
                                    <Input
-                                        placeholder={'for example "Ansible User"'}
+                                        placeholder={'for example "Ansible user"'}
                                        ref={inputNameRef}
                                        autoComplete="off"/>
                                </Form.Item>
                            </Col>
                            <Col span={24}>
-                                <Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "0px"}}>Role</Paragraph>
-                                <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Set a role for the user to assign dashboard access permissions</Paragraph>
+                                <Paragraph style={{fontWeight: "bold", marginTop: "0px"}}>Role</Paragraph>
+                                <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-15px"}}>Set a role for the user to assign access permissions</Paragraph>
                                <Form.Item
                                    name="role"
                                    rules={[{
@@ -256,8 +256,8 @@ const AddServiceUserPopup = () => {
                                </Form.Item>
                            </Col>
                            {/*<Col span={24}>*/}
-                            {/*    <Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "0px"}}>Auto-assigned groups</Paragraph>*/}
-                            {/*    <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Add groups, that will be assigned to peers added by this user</Paragraph>*/}
+                            {/*    <Paragraph style={{fontWeight: "bold", marginTop: "0px"}}>Auto-assigned groups</Paragraph>*/}
+                            {/*    <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-15px"}}>Add groups, that will be assigned to peers added by this user</Paragraph>*/}
                            {/*    <Form.Item*/}
                            {/*        name="autoGroupsNames"*/}
                            {/*        label="Auto-assigned groups"*/}
@@ -12,7 +12,6 @@ import {
    Typography
 } from "antd";
 import {Container} from "../Container";
-import {CloseOutlined} from "@ant-design/icons";
 import React, {useEffect, useRef, useState} from "react";
 import {useDispatch, useSelector} from "react-redux";
 import {RootState} from "typesafe-actions";
@@ -20,9 +19,9 @@ import {useGetTokenSilently} from "../../utils/token";
 import {actions as userActions} from "../../store/user";
 import {actions as groupActions} from "../../store/group";
 import {User, UserToSave} from "../../store/user/types";
-import {Header} from "antd/es/layout/layout";
 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;
@@ -200,10 +199,10 @@ const InviteUserPopup = () => {
                }
                width={460}
            >
-                <Container style={{textAlign: "start"}}>
+                <Container style={{textAlign: "start", marginLeft: "-15px", marginRight: "-15px"}}>
                    <Paragraph
                        style={{textAlign: "start", whiteSpace: "pre-line", fontSize: "22px", fontWeight: "500"}}>
-                        {"Invite User"}
+                        {"Invite user"}
                    </Paragraph>
                    <Paragraph type={"secondary"}
                               style={{
@@ -222,8 +221,8 @@ const InviteUserPopup = () => {
                    >
                        <Row gutter={16}>
                            <Col span={24}>
-                                <Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "-10px"}}>Name</Paragraph>
-                                <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Set a name to easily identify the user</Paragraph>
+                                <Paragraph style={{fontWeight: "bold", marginTop: "-10px"}}>Name</Paragraph>
+                                <Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Set a name to easily identify the user</Paragraph>
                                <Form.Item
                                    name="name"
                                    rules={[{
@@ -240,8 +239,8 @@ const InviteUserPopup = () => {
                                </Form.Item>
                            </Col>
                            <Col span={24}>
-                                <Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "0px"}}>Email</Paragraph>
-                                <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Provide the email address of the user</Paragraph>
+                                <Paragraph style={{ fontWeight: "bold", marginTop: "0px"}}>Email</Paragraph>
+                                <Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Provide the email address of the user</Paragraph>
                                <Form.Item
                                    name="email"
                                    rules={[{
@@ -259,8 +258,8 @@ const InviteUserPopup = () => {
                                </Form.Item>
                            </Col>
                            <Col span={24}>
-                                <Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "0px"}}>Role</Paragraph>
-                                <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Set a role for the user to assign dashboard access permissions</Paragraph>
+                                <Paragraph style={{ fontWeight: "bold", marginTop: "0px"}}>Role</Paragraph>
+                                <Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Set a role for the user to assign access permissions</Paragraph>
                                <Form.Item
                                    name="role"
                                    rules={[{
@@ -277,8 +276,8 @@ const InviteUserPopup = () => {
                                </Form.Item>
                            </Col>
                            <Col span={24}>
-                                <Paragraph style={{fontSize: "16px", fontWeight: "500", marginTop: "0px"}}>Auto-assigned groups</Paragraph>
-                                <Paragraph type={"secondary"} style={{fontSize: "14px", marginTop: "-18px"}}>Add groups, that will be assigned to peers added by this user</Paragraph>
+                                <Paragraph style={{fontWeight: "bold", marginTop: "0px"}}>Auto-assigned groups</Paragraph>
+                                <Paragraph type={"secondary"} style={{marginTop: "-15px"}}>Add groups, that will be assigned to peers added by this user</Paragraph>
                                <Form.Item
                                    name="autoGroupsNames"
                                    tooltip="Every peer enrolled with this user will be automatically added to these groups"
@@ -300,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>
@@ -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>
    </>
@@ -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
@@ -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
@@ -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>
            ),
@@ -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>
    )
 }

@@ -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;
 }
@@ -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 };
@@ -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;
Author	SHA1	Message	Date
Misha Bragin	5caf06b086	Decrease length of the hidden setup key prefix (#195 )	2023-06-02 11:06:05 +02:00
braginini	95af1c4e32	lower case of the Create key button	2023-06-02 10:53:47 +02:00
Sarooj bukhari	d247e7f3ed	Change edit key on group from popup to page (#194 )	2023-06-01 16:51:51 +02:00
Sarooj bukhari	391e534253	Show setupkey once on creation (#191 )	2023-06-01 12:08:58 +02:00
Sarooj bukhari	a7f64d4a15	Update setup key edit layout (#190 ) https://github.com/netbirdio/dashboard/issues/187	2023-06-01 09:49:10 +02:00
Givi Khojanashvili	53ed514803	ACL to firewall rules (#163 ) ACL based on the firewall rules	2023-06-01 10:06:08 +04:00
pascal-fischer	6cadce1598	Add pkg installer to MacOS popup (#188 )	2023-05-30 19:05:29 +02:00
pascal-fischer	c03d4b8a4b	Fix peers views in safari	2023-05-30 13:42:29 +02:00
dependabot[bot]	bc1053fbb4	Bump json5 from 1.0.1 to 1.0.2 (#124 )	2023-05-29 13:58:20 +02:00
dependabot[bot]	d154bfb799	Bump webpack from 5.74.0 to 5.76.1 (#148 )	2023-05-29 13:57:48 +02:00
pascal-fischer	67fd2fcb2e	Update links to docs (#182 )	2023-05-24 17:31:57 +02:00
Misha Bragin	f4933e45ee	Add peer on Android (#185 )	2023-05-19 21:42:13 +02:00
Misha Bragin	331dd2b429	Make it more visible that user can be blocked (#184 )	2023-05-19 12:40:08 +02:00
Misha Bragin	3a8106c1e7	Track block/unblock user activity (#181 )	2023-05-17 09:53:46 +02:00
Misha Bragin	b595e0d6a8	Switch to activate/deactivate a user (#179 ) This PR adds a switch to deactivate (or block) a user. Only admins can block/unblock users. Users can't block themselves.	2023-05-15 16:57:35 +02:00
pascal-fischer	33621cae5d	remove href- from breadcrumbs (#180 )	2023-05-15 14:28:14 +02:00
Maycon Santos	360d807008	Enable creating service user for all domains (#178 ) Removed unnecessary check from create button.	2023-05-14 11:56:14 +02:00
Misha Bragin	6f8897ffa5	Make breadcrumbs look like links (#176 )	2023-05-10 18:48:11 +02:00
pascal-fischer	75d5f804c5	fix dropdown button in lists to only show ellipsis (#175 )	2023-05-10 16:45:47 +02:00
pascal-fischer	f7cac02a2d	reduce api calls on user edit (#174 )	2023-05-10 16:44:43 +02:00
Misha Bragin	ec40730cb2	Fix setup key layout (#172 )	2023-05-08 17:49:27 +02:00
Misha Bragin	7f3648861b	Fix popups layout (#171 )	2023-05-08 12:30:53 +02:00
Crusadero	b50464db43	Setup keys screen (#167 )	2023-05-07 18:39:28 +02:00
pascal-fischer	1eb5ccc131	displaying proper groups and name on route peer update (#169 )	2023-05-05 15:50:39 +02:00