Fix isAdmin check to not depend on oidc (#207 )

* remove admin check depending on oidc user on autogroups field * fix admin check on peers view
Fix Rule ports placeholder
2026-09-23 00:30:43 -07:00 · 2023-06-14 17:19:45 +02:00 · 2023-06-13 16:39:01 +02:00 · 2023-06-13 14:11:27 +02:00 · 2023-06-13 13:17:48 +02:00 · 2023-06-13 11:03:30 +02:00
59 changed files with 7434 additions and 3478 deletions
@@ -43,6 +43,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}
@@ -57,7 +58,7 @@ export NETBIRD_TOKEN_SOURCE=${NETBIRD_TOKEN_SOURCE:-accessToken}
 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"

 MAIN_JS=$(find /usr/share/nginx/html/static/js/main.*js)
 OIDC_TRUSTED_DOMAINS="/usr/share/nginx/html/OidcTrustedDomains.js"
@@ -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",
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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"
@@ -41,7 +41,7 @@ interface formNSGroup extends NameServerGroup {

 const NameServerGroupUpdate = () => {
    const {
-        tagRender,
+        blueTagRender,
        handleChangeTags,
        dropDownRender,
        optionRender,
@@ -572,7 +572,7 @@ const NameServerGroupUpdate = () => {
                                        <Select mode="tags"
                                                style={{width: '100%'}}
                                                placeholder="Associate groups with the NS group"
-                                                tagRender={tagRender}
+                                                tagRender={blueTagRender}
                                                onChange={handleChangeTags}
                                                dropdownRender={dropDownRender}
                                        >
@@ -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>) :
@@ -40,7 +40,7 @@ interface FormRoute extends Route {

 const RouteUpdate = () => {
    const {
-        tagRender,
+        blueTagRender,
        handleChangeTags,
        dropDownRender,
        optionRender,
@@ -430,7 +430,7 @@ const RouteUpdate = () => {
                                    <Select mode="tags"
                                            style={{width: '100%'}}
                                            placeholder="Associate groups with the network route"
-                                            tagRender={tagRender}
+                                            tagRender={blueTagRender}
                                            onChange={handleChangeTags}
                                            dropdownRender={dropDownRender}
                                    >
@@ -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>
@@ -0,0 +1,470 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { actions as setupKeyActions } from "../store/setup-key";
+import {
+  Button,
+  Col,
+  Divider,
+  Form,
+  Input,
+  InputNumber,
+  Row,
+  Select,
+  Breadcrumb,
+  Switch,
+  Tag,
+  Typography,
+  Card,
+} from "antd";
+import { RootState } from "typesafe-actions";
+import {
+  FormSetupKey,
+  SetupKey,
+  SetupKeyToSave,
+} from "../store/setup-key/types";
+import { 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 { useGetTokenSilently } from "../utils/token";
+import { expiresInToSeconds, ExpiresInValue } from "../views/ExpiresInInput";
+import moment from "moment";
+import { Container } from "./Container";
+import Paragraph from "antd/es/typography/Paragraph";
+import { EditOutlined, LockOutlined } from "@ant-design/icons";
+import { actions as personalAccessTokenActions } from "../store/personal-access-token";
+import {useGetGroupTagHelpers} from "../utils/groups";
+
+const { Option } = Select;
+const { Text } = Typography;
+const ExpiresInDefault: ExpiresInValue = { number: 30, interval: "day" };
+
+const customExpiresFormat = (value: Date): string | null => {
+  return formatDate(value);
+};
+
+const SetupKeyNew = () => {
+  const {
+    optionRender,
+      blueTagRender
+  } = useGetGroupTagHelpers()
+  const { getTokenSilently } = useGetTokenSilently();
+  const dispatch = useDispatch();
+
+  const setupKey = useSelector((state: RootState) => state.setupKey.setupKey);
+  const savedSetupKey = useSelector(
+    (state: RootState) => state.setupKey.savedSetupKey
+  );
+  const groups = useSelector((state: RootState) => state.group.data);
+
+  const [form] = Form.useForm();
+  const [editName, setEditName] = useState(false);
+  const [tagGroups, setTagGroups] = useState([] as string[]);
+  const [formSetupKey, setFormSetupKey] = useState({} as FormSetupKey);
+  const inputNameRef = useRef<any>(null);
+ 
+   useEffect(() => {
+     //Unmounting component clean
+     return () => {
+       setVisibleNewSetupKey(false)
+     };
+   }, []);
+  
+  useEffect(() => {
+    if (!editName) return;
+
+    inputNameRef.current!.focus({ cursor: "end" });
+  }, [editName]);
+
+  useEffect(() => {
+    setTagGroups(
+      groups?.filter((g) => g.name !== "All").map((g) => g.name) || []
+    );
+  }, [groups]);
+
+  useEffect(() => {
+    if (!setupKey) return;
+
+    const allGroups = new Map<string, Group>();
+    let formKeyGroups: string[] = [];
+    groups.forEach((g) => allGroups.set(g.id!, g));
+
+    if (setupKey.auto_groups) {
+      formKeyGroups = setupKey.auto_groups
+        .filter((g) => allGroups.get(g))
+        .map((g) => allGroups.get(g)!.name);
+    }
+
+    const fSetupKey = {
+      ...setupKey,
+      autoGroupNames: setupKey.auto_groups ? formKeyGroups : [],
+      expiresInFormatted: ExpiresInDefault,
+      exp: moment(setupKey.expires),
+      last: moment(setupKey.last_used),
+    } as FormSetupKey;
+
+    form.setFieldsValue(fSetupKey);
+    setFormSetupKey(fSetupKey);
+  }, [setupKey]);
+
+  const createSetupKeyToSave = (): SetupKeyToSave => {
+    const autoGroups =
+      groups
+        ?.filter((g) => formSetupKey.autoGroupNames.includes(g.name))
+        .map((g) => g.id || "") || [];
+    // find groups that do not yet exist (newly added by the user)
+    const allGroupsNames: string[] = groups?.map((g) => g.name);
+    const groupsToCreate = formSetupKey.autoGroupNames.filter(
+      (s) => !allGroupsNames.includes(s)
+    );
+
+    const expiresIn = expiresInToSeconds(formSetupKey.expiresInFormatted);
+    return {
+      id: formSetupKey.id,
+      name: formSetupKey.name,
+      type: formSetupKey.type,
+      auto_groups: autoGroups,
+      revoked: formSetupKey.revoked,
+      groupsToCreate: groupsToCreate,
+      expires_in: expiresIn,
+      usage_limit: formSetupKey.usage_limit,
+    } as SetupKeyToSave;
+  };
+
+  const handleFormSubmit = async () => {
+    try {
+      await form.validateFields();
+    } catch (e) {
+      const errorFields = (e as any).errorFields;
+      return console.log("errorInfo", errorFields);
+    }
+
+    const setupKeyToSave = createSetupKeyToSave();
+    dispatch(
+      setupKeyActions.saveSetupKey.request({
+        getAccessTokenSilently: getTokenSilently,
+        payload: setupKeyToSave,
+      })
+    );
+  };
+
+  const setVisibleNewSetupKey = (status: boolean) => {
+    form.resetFields();
+    dispatch(setupKeyActions.setSetupEditKeyVisible(status));
+  };
+
+  const onCancel = () => {
+    if (savedSetupKey.loading) return;
+
+    dispatch(
+      setupKeyActions.setSetupKey({
+        name: "",
+        type: "one-off",
+        key: "",
+        last_used: "",
+        expires: "",
+        state: "valid",
+        auto_groups: [] as string[],
+        usage_limit: 0,
+        used_times: 0,
+        expires_in: 0,
+      } as SetupKey)
+    );
+    setFormSetupKey({} as FormSetupKey);
+    setVisibleNewSetupKey(false);
+  };
+
+  const onChange = (data: any) => {
+    setFormSetupKey({ ...formSetupKey, ...data });
+  };
+
+  const toggleEditName = (status: boolean) => {
+    setEditName(status);
+  };
+
+  const selectValidator = (_: RuleObject, value: string[]) => {
+    let hasSpaceNamed = [];
+
+    value.forEach(function (v: string) {
+      if (!v.trim().length) {
+        hasSpaceNamed.push(v);
+      }
+    });
+
+    if (hasSpaceNamed.length) {
+      return Promise.reject(
+        new Error("Group names with just spaces are not allowed")
+      );
+    }
+
+    return Promise.resolve();
+  };
+
+  const dropDownRender = (menu: React.ReactElement) => (
+    <>
+      {menu}
+      <Divider style={{ margin: "8px 0" }} />
+      <Row style={{ padding: "0 8px 4px" }}>
+        <Col flex="auto">
+          <span style={{ color: "#9CA3AF" }}>
+            Add new group by pressing "Enter"
+          </span>
+        </Col>
+        <Col flex="none">
+          <svg
+            width="14"
+            height="12"
+            viewBox="0 0 14 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M1.70455 7.19176V5.89915H10.3949C10.7727 5.89915 11.1174 5.80634 11.429 5.62074C11.7405 5.43513 11.9875 5.18655 12.1697 4.875C12.3554 4.56345 12.4482 4.21875 12.4482 3.84091C12.4482 3.46307 12.3554 3.12003 12.1697 2.81179C11.9841 2.50024 11.7356 2.25166 11.424 2.06605C11.1158 1.88044 10.7727 1.78764 10.3949 1.78764H9.83807V0.5H10.3949C11.0114 0.5 11.5715 0.650805 12.0753 0.952414C12.5791 1.25402 12.9818 1.65672 13.2834 2.16051C13.585 2.6643 13.7358 3.22443 13.7358 3.84091C13.7358 4.30161 13.648 4.73414 13.4723 5.13849C13.3 5.54285 13.0613 5.89915 12.7564 6.20739C12.4515 6.51562 12.0968 6.75758 11.6925 6.93324C11.2881 7.10559 10.8556 7.19176 10.3949 7.19176H1.70455ZM4.90128 11.0646L0.382102 6.54545L4.90128 2.02628L5.79119 2.91619L2.15696 6.54545L5.79119 10.1747L4.90128 11.0646Z"
+              fill="#9CA3AF"
+            />
+          </svg>
+        </Col>
+      </Row>
+    </>
+  );
+
+  const changesDetected = (): boolean => {
+    return (
+      formSetupKey.name == null ||
+      formSetupKey.name !== setupKey.name ||
+      groupsChanged() ||
+      formSetupKey.usage_limit !== setupKey.usage_limit
+    );
+  };
+
+  const groupsChanged = (): boolean => {
+    if (
+      setupKey &&
+      setupKey.auto_groups &&
+      formSetupKey.autoGroupNames.length !== setupKey.auto_groups.length
+    ) {
+      return true;
+    }
+    const formGroupIds =
+      groups
+        ?.filter((g) => formSetupKey.autoGroupNames.includes(g.name))
+        .map((g) => g.id || "") || [];
+
+    return (
+      setupKey.auto_groups?.filter((g) => !formGroupIds.includes(g)).length > 0
+    );
+  };
+
+  const getFormKey = (key: string) => {
+    if (key) return key.substring(0, 4).concat("****");
+  };
+
+  const onBreadcrumbUsersClick = () => {
+    if (savedSetupKey.loading) return;
+    // dispatch(userActions.setUser(null as unknown as User));
+    dispatch(personalAccessTokenActions.resetPersonalAccessTokens(null));
+    setVisibleNewSetupKey(false);
+  };
+
+  return (
+    <>
+      <Breadcrumb
+        style={{ marginBottom: "30px" }}
+        items={[
+          {
+            title: <a onClick={onBreadcrumbUsersClick}>Setup Keys</a>,
+          },
+          {
+            title: setupKey.name,
+          },
+        ]}
+      />
+      <Card
+        bordered={true}
+        title={setupKey.name}
+        style={{ marginBottom: "7px" }}
+      >
+        <div style={{ maxWidth: "800px" }}>
+          <Form
+            layout="vertical"
+            requiredMark={false}
+            form={form}
+            onValuesChange={onChange}
+            initialValues={{
+              expiresIn: ExpiresInDefault,
+              usage_limit: 1,
+            }}
+          >
+            <Row style={{ marginTop: "10px" }}>
+              <Col
+                xs={24}
+                sm={24}
+                md={11}
+                lg={11}
+                xl={11}
+                xxl={11}
+                span={11}
+                style={{ paddingRight: "70px" }}
+              >
+                <Paragraph
+                  style={{
+                    whiteSpace: "pre-line",
+                    fontWeight: "bold",
+                    margin: 0,
+                  }}
+                >
+                  Key
+                  <Tag
+                    color={`${
+                      formSetupKey.state === "valid" ? "green" : "red"
+                    }`}
+                    style={{
+                      marginLeft: "10px",
+                      borderRadius: "2px",
+                      fontWeight: "500",
+                    }}
+                  >
+                    {formSetupKey.state}
+                  </Tag>
+                </Paragraph>
+                <Input
+                  style={{ marginTop: "8px" }}
+                  disabled
+                  value={getFormKey(formSetupKey.key)}
+                  suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
+                />
+              </Col>
+
+              <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
+                <Paragraph
+                  style={{
+                    whiteSpace: "pre-line",
+                    margin: 0,
+                    fontWeight: "bold",
+                  }}
+                >
+                  <Paragraph
+                    style={{
+                      whiteSpace: "pre-line",
+                      margin: 0,
+                      fontWeight: "bold",
+                    }}
+                  ></Paragraph>
+                  {formSetupKey.type === "one-off" ? "One-off" : "Reusable"},
+                  available uses
+                </Paragraph>
+                <Col>
+                  <Input
+                    disabled
+                    value={
+                      formSetupKey.type === "reusable" &&
+                      formSetupKey.usage_limit === 0
+                        ? "unlimited"
+                        : formSetupKey.usage_limit - formSetupKey.used_times
+                    }
+                    suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
+                    style={{ marginTop: "8px" }}
+                  />
+                </Col>
+              </Col>
+            </Row>
+
+            <Row style={{ marginTop: "30px" }}>
+              <Col
+                xs={24}
+                sm={24}
+                md={11}
+                lg={11}
+                xl={11}
+                xxl={11}
+                span={11}
+                style={{ paddingRight: "70px" }}
+              >
+                <Paragraph
+                  style={{
+                    whiteSpace: "pre-line",
+                    margin: 0,
+                    fontWeight: "bold",
+                  }}
+                >
+                  Auto-assigned groups
+                </Paragraph>
+
+                <Col span={24}>
+                  <Form.Item
+                    style={{ marginTop: "8px", marginBottom: 0 }}
+                    name="autoGroupNames"
+                    rules={[{ validator: selectValidator }]}
+                  >
+                    <Select
+                      mode="tags"
+                      style={{ width: "100%" }}
+                      placeholder="Associate groups with the key"
+                      tagRender={blueTagRender}
+                      dropdownRender={dropDownRender}
+                      // enabled only when we have a new key !setupkey.id or when the key is valid
+                      disabled={!(!setupKey.id || setupKey.valid)}
+                    >
+                      {tagGroups.map((m) => (
+                        <Option key={m}>{optionRender(m)}</Option>
+                      ))}
+                    </Select>
+                  </Form.Item>
+                </Col>
+              </Col>
+
+              <Col xs={24} sm={24} md={5} lg={5} xl={5} xxl={5} span={5}>
+                <Paragraph style={{ margin: 0, fontWeight: "bold" }}>
+                  Expires
+                </Paragraph>
+                <Row>
+                  <Input
+                    style={{ marginTop: "8px" }}
+                    disabled
+                    suffix={<LockOutlined style={{ color: "#BFBFBF" }} />}
+                    value={customExpiresFormat(new Date(formSetupKey.expires))!}
+                  />
+                </Row>
+              </Col>
+            </Row>
+
+            <Row style={{ marginTop: "40px", marginBottom: "28px" }}>
+              <Text type={"secondary"}>
+                Learn more about
+                <a
+                  target="_blank"
+                  rel="noreferrer"
+                  href="https://docs.netbird.io/how-to/register-machines-using-setup-keys"
+                >
+                  {" "}
+                  setup keys
+                </a>
+              </Text>
+            </Row>
+          </Form>
+        </div>
+        <Container
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "start",
+            padding: 0,
+            gap: "10px",
+          }}
+          key={0}
+        >
+          <Button onClick={onCancel}>Cancel</Button>
+          <Button
+            type="primary"
+            disabled={savedSetupKey.loading || !changesDetected()}
+            onClick={handleFormSubmit}
+          >
+            {`${formSetupKey.id ? "Save" : "Create"} key`}
+          </Button>
+        </Container>
+      </Card>
+    </>
+  );
+};
+
+export default SetupKeyNew;
Author	SHA1	Message	Date
pascal-fischer	addd348456	Fix isAdmin check to not depend on oidc (#207 ) * remove admin check depending on oidc user on autogroups field * fix admin check on peers view	2023-06-14 17:19:45 +02:00
braginini	a8190bfe5b	Fix Rule ports placeholder	2023-06-13 16:39:01 +02:00
braginini	9e3d9f245d	Add disabled filter option to access controls	2023-06-13 14:11:27 +02:00
Misha Bragin	e7a7a75906	Align peers count and font in the popover groups (#206 )	2023-06-13 13:17:48 +02:00
braginini	67efd47f22	Minor changes to access control layout	2023-06-13 11:03:30 +02:00
Sarooj bukhari	813cd851ca	Update access control Add New layout (#202 )	2023-06-12 09:40:04 +02:00
pascal-fischer	f44ccf3ef7	remove keydown handler from PAT popup (#203 )	2023-06-09 12:09:07 +02:00
Bethuel	899f56acdc	fix: remove any trailing / in auth authority (#201 )	2023-06-07 15:35:20 +02:00
braginini	dc2760d5ff	Fix elements alignment for the ACLs view	2023-06-06 15:07:51 +02:00
Sarooj bukhariandSarooj Bukhari	5ae4fd31f1	Udpate acceess control table layout (#199 ) Co-authored-by: Sarooj Bukhari <120650489+saroojbukhari2022@users.noreply.github.com>	2023-06-06 14:31:18 +02:00
braginini	54d9d7c768	Remove peer view header	2023-06-05 18:44:18 +02:00
braginini	3a73781fca	Merge remote-tracking branch 'origin/main'	2023-06-05 18:10:21 +02:00
braginini	f3c5d4df6a	Fix color scheme for disabled fields	2023-06-05 18:07:28 +02:00
Bethuel	b4c9135c58	support authentication with client_secret (#198 )	2023-06-05 18:02:43 +02:00
Sarooj bukhari	a280d9c67c	Update peers layout and add routes component on peers edit (#196 )	2023-06-05 15:22:03 +02:00
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