Use Approve for approve peer modal (#312)

* add codespell github workflow

* fix some typo

.github/workflows/codespell.yml

@@ -0,0 +1,15 @@
+name: Codespell
+on: [pull_request]
+
+jobs:
+  check:
+    name: Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: codespell
+        uses: codespell-project/actions-codespell@v2
+        with:
+          only_warn: 1
+          skip: package-lock.json,*.svg

docker/README.md

@@ -1,15 +1,15 @@
 # Wiretrustee Dashboard
-Wiretrustee Dashboard is a the Wiretrustee Managemenet server UI. It allow users to signin, view setup keys and manage peers. This image is **not ready** for production use.
+Wiretrustee Dashboard is a the Wiretrustee Management server UI. It allow users to signin, view setup keys and manage peers. This image is **not ready** for production use.
 ## Tags
 ```latest``` ```vX.X.X``` not available yet.
 
-```main``` builded on every PR being merged to the repository
+```main``` built on every PR being merged to the repository
 ## How to use this image
 HTTP run:
 ```shell
 docker run -d --rm -p 80:80 wiretrustee/dashboard:main
 ```
-Using SSL certificate from Let's Encript®:
+Using SSL certificate from Let's Encrypt®:
 ```shell
 docker run -d --rm -p 80:80 -p 443:443 \
   -e LETSENCRYPT_DOMAIN=app.mydomain.com \

e2e-tests/create-test-env.sh

@@ -387,7 +387,7 @@ check_nb_domain() {
 
   if [ "$DOMAIN" == "netbird.example.com" ]; then
     echo "The NETBIRD_DOMAIN cannot be netbird.example.com" > /dev/stderr
-    retrun 1
+    return 1
   fi
   return 0
 }

e2e-tests/pages/access-control-page.ts

@@ -17,7 +17,7 @@ export class AccessControlPage {
       }
   
     async assertDefaultAccessCotrolIsCreated() {
-      await test.step('Assert that default cotrol access is created', async () => {
+      await test.step('Assert that default control access is created', async () => {
           await expect(this.defaulAccessControl).toBeVisible();
       })
     }

e2e-tests/pages/modals/add-peer-modal.ts

@@ -6,6 +6,7 @@ export class AddPeerModal {
     private readonly windowsTab = this.page.getByTestId('add-peer-modal-windows-tab')
     private readonly macTab = this.page.getByTestId('add-peer-modal-mac-tab')
     private readonly androidTab = this.page.getByTestId('add-peer-modal-android-tab')
+    private readonly iosTab = this.page.getByTestId('add-peer-modal-ios-tab')
     private readonly dockerTab = this.page.getByTestId('add-peer-modal-docker-tab')
     private readonly linuxTabText = this.page.locator('pre').filter({ hasText: 'curl -fsSL https://pkgs.netbird.io/install.sh | sh' })
     private readonly windowsDownloadButton = this.page.getByTestId('download-windows-button')
@@ -57,6 +58,13 @@ export class AddPeerModal {
         })
       }
 
+      async openIOSTab() {
+        await test.step('Open iOS tab on add peer modal', async () => {
+            await this.iosTab.click();
+
+        })
+      }
+
       async openDockerTab() {
         await test.step('Open Docker tab on add peer modal', async () => {
             await this.dockerTab.click();
@@ -94,6 +102,12 @@ export class AddPeerModal {
         })
       }
 
+      async assertiOSDownloadButtonHasCorrectLink() {
+        await test.step('Assert iOS download button has a correct link', async () => {
+            await expect(this.androidDownloadButton).toHaveAttribute('href', 'https://apps.apple.com/app/netbird-p2p-vpn/id6469329339');
+        })
+      }
+
       async assertDockerDownloadButtonHasCorrectLink() {
         await test.step('Assert Docker download button has a correct link', async () => {
             await expect(this.dockerDownloadButton).toHaveAttribute('href', 'https://docs.docker.com/engine/install/');

e2e-tests/tests/peers.test.ts

@@ -30,6 +30,11 @@ test('Test MacOS tab on a first access add peer modal / @bc', async () => {
   await addPeerModal.assertM1M2DownloadButtonHasCorrectLink();
 });
 
+test('Test iOS tab on a first access add peer modal', async () => {
+  await addPeerModal.openIOSTab();
+  await addPeerModal.assertiOSDownloadButtonHasCorrectLink();
+});
+
 test('Test Android tab on a first access add peer modal', async () => {
   await addPeerModal.openAndroidTab();
   await addPeerModal.assertAndroidDownloadButtonHasCorrectLink();

src/components/Banner.tsx

@@ -15,18 +15,18 @@ const Banner = () => {
 		localStorage.setItem(banner_closed_key,'true');
 	};
 
-	const announcement = "New Release! Manage DNS with NetBird."
+	const announcement = "NetBird is now available on the App Store."
 
 	const announcement_md5 = Md5.hashStr(announcement)
 
 	const linkLearnMore = () => {
 		return (
 			<a
-				href="https://docs.netbird.io/how-to/manage-dns-in-your-network"
+				href="https://apps.apple.com/us/app/netbird-p2p-vpn/id6469329339"
 				className="font-bold underline"
 				target="_blank"
 				rel="noreferrer"
-			><Text strong style={{color: "#ffffff"}}>Learn more&nbsp;<span aria-hidden="true">&rarr;</span></Text></a>
+			><Text strong style={{color: "#ffffff"}}>Download&nbsp;<span aria-hidden="true">&rarr;</span></Text></a>
 		)
 	}
 
@@ -36,7 +36,7 @@ const Banner = () => {
 
 		if((!stored_banner_closed || stored_banner_closed !== 'true') ||
 			(!store_banner_md5 || store_banner_md5 !== announcement_md5)) {
-			//setShow(true);
+			setShow(true);
 			localStorage.setItem(banner_md5_key,announcement_md5);
 			localStorage.setItem(banner_closed_key,'false');
 		}

src/components/NameServerGroupAdd.tsx

@@ -73,6 +73,7 @@ const NameServerGroupAdd = () => {
   const inputNameRef = useRef<any>(null);
   const inputDescriptionRef = useRef<any>(null);
   const [selectCustom, setSelectCustom] = useState(false);
+  const [matchDomains, setMatchDomains] = useState(0);
 
   useEffect(() => {
     if (editName)
@@ -87,7 +88,6 @@ const NameServerGroupAdd = () => {
         cursor: "end",
       });
   }, [editDescription]);
-
   useEffect(() => {
     if (!nsGroup) return;
 
@@ -117,6 +117,7 @@ const NameServerGroupAdd = () => {
         nameservers: [] as NameServer[],
         groups: [],
         enabled: false,
+        search_domains_enabled: false,
       } as NameServerGroup)
     );
     setEditName(false);
@@ -125,6 +126,7 @@ const NameServerGroupAdd = () => {
   };
 
   const onChange = (changedValues: any) => {
+
     if (changedValues.primary !== undefined) {
       setIsPrimary(changedValues.primary);
     }
@@ -156,6 +158,7 @@ const NameServerGroupAdd = () => {
       ],
       groups: [],
       enabled: true,
+      search_domains_enabled: false,
     },
     {
       name: cloudflareChoice,
@@ -176,6 +179,7 @@ const NameServerGroupAdd = () => {
       ],
       groups: [],
       enabled: true,
+      search_domains_enabled: false,
     },
     {
       name: quad9Choice,
@@ -196,6 +200,7 @@ const NameServerGroupAdd = () => {
       ],
       groups: [],
       enabled: true,
+      search_domains_enabled: false,
     },
   ];
 
@@ -203,6 +208,7 @@ const NameServerGroupAdd = () => {
     let nsGroupLocal = {} as NameServerGroup;
     if (value === customChoice) {
       nsGroupLocal = nsGroup;
+      nsGroupLocal.domains = [];
     } else {
       defaultDNSOptions.forEach((nsg) => {
         if (value === nsg.name) {
@@ -262,6 +268,8 @@ const NameServerGroupAdd = () => {
       groups: existingGroups,
       groupsToCreate: newGroups,
       enabled: values.enabled,
+      search_domains_enabled:
+        matchDomains > 0 ? formNSGroup.search_domains_enabled : false,
     } as NameServerGroupToSave;
   };
 
@@ -462,6 +470,7 @@ const NameServerGroupAdd = () => {
           </Col>
         </Space>
       </Row>
+      {setMatchDomains(fields.length)}
       {fields.map((field, index) => {
         return (
           <Row key={index} style={{ marginBottom: "5px" }}>
@@ -522,6 +531,13 @@ const NameServerGroupAdd = () => {
     });
   };
 
+  const handleChangeMarkDomain = (checked: boolean) => {
+    setFormNSGroup({
+      ...formNSGroup,
+      search_domains_enabled: checked,
+    });
+  };
+
   return (
     <>
       {nsGroup && (
@@ -701,6 +717,46 @@ const NameServerGroupAdd = () => {
                 <Col span={24}>
                   <Form.List name="domains">{renderDomains}</Form.List>
                 </Col>
+
+                {matchDomains > 0 && (
+                  <Col span={24}>
+                    <Form.Item name="search_domains_enabled" label="">
+                      <div
+                        style={{
+                          display: "flex",
+                          gap: "15px",
+                        }}
+                      >
+                        <Switch
+                          onChange={handleChangeMarkDomain}
+                          size="small"
+                        />
+                        <div>
+                          <label
+                            style={{
+                              color: "rgba(0, 0, 0, 0.88)",
+                              fontSize: "14px",
+                              fontWeight: "500",
+                            }}
+                          >
+                            Mark match domains as search domains
+                          </label>
+                          <Paragraph
+                            type={"secondary"}
+                            style={{
+                              marginTop: "-2",
+                              fontWeight: "400",
+                              marginBottom: "0",
+                            }}
+                          >
+                            E.g., "peer.example.com" will be accessible with
+                            "peer"
+                          </Paragraph>
+                        </div>
+                      </div>
+                    </Form.Item>
+                  </Col>
+                )}
                 <Col span={24}>
                   <label
                     style={{

src/components/Navbar.tsx

@@ -161,7 +161,7 @@ const Navbar = () => {
       return false;
     }
 
-    if (user.role?.toLowerCase() === "admin") {
+    if (user.role?.toLowerCase() === "admin" || user.role?.toLowerCase() === "owner") {
       return true;
     }
     return !adminOnlyTabs.find((t) => t === key);

src/components/PeerUpdate.tsx

@@ -197,6 +197,7 @@ const PeerUpdate = (props: any) => {
       os !== "" &&
       !os.toLowerCase().startsWith("darwin") &&
       !os.toLowerCase().startsWith("windows") &&
+      !os.toLowerCase().startsWith("ios") &&
       !os.toLowerCase().startsWith("android")
     );
   };

src/components/RouteAddNew.tsx

@@ -151,6 +151,7 @@ const RouteAddNew = (selectedPeer: any) => {
         !os.toLowerCase().startsWith("darwin") &&
         !os.toLowerCase().startsWith("windows") &&
         !os.toLowerCase().startsWith("android") &&
+        !os.toLowerCase().startsWith("ios") &&
         route &&
         !routes
           .filter((r) => r.network_id === route.network_id)

src/components/RoutePeerUpdate.tsx

@@ -100,6 +100,7 @@ const RoutePeerUpdate = () => {
       !os.toLowerCase().startsWith("darwin") &&
       !os.toLowerCase().startsWith("windows") &&
       !os.toLowerCase().startsWith("android") &&
+      !os.toLowerCase().startsWith("ios") &&
       route &&
       !routes
         .filter((r) => r.network_id === route.network_id)

src/components/RouteUpdate.tsx

@@ -96,6 +96,7 @@ const RouteAddNew = () => {
       !os.toLowerCase().startsWith("darwin") &&
       !os.toLowerCase().startsWith("windows") &&
       !os.toLowerCase().startsWith("android") &&
+      !os.toLowerCase().startsWith("ios") &&
       route &&
       !routes
         .filter((r) => r.network_id === route.network_id)

src/components/UserEdit.tsx

@@ -79,6 +79,7 @@ const UserEdit = (props: any) => {
   const [formUser, setFormUser] = useState({} as FormUser);
   const [form] = Form.useForm();
   const [isAdmin, setIsAdmin] = useState(false);
+  const [isOwner, setIsOwner] = useState(false);
 
   const [confirmModal, confirmModalContextHolder] = Modal.useModal();
 
@@ -94,15 +95,21 @@ const UserEdit = (props: any) => {
   };
 
   const createUserToSave = (values: any): UserToSave => {
-    const autoGroups =
-      groups
-        ?.filter((g) => values.autoGroupsNames.includes(g.id))
-        .map((g) => g.id || "") || [];
+    let autoGroups:string[] = []
+    if (values.autoGroupsNames) {
+      autoGroups =
+          groups
+              ?.filter((g) => values.autoGroupsNames.includes(g.id))
+              .map((g) => g.id || "") || [];
+    }
     // find groups that do not yet exist (newly added by the user)
     const allGroupsNames: string[] = groups?.map((g) => g.id || "");
-    const groupsToCreate = values.autoGroupsNames.filter(
-      (s: string) => !allGroupsNames.includes(s)
-    );
+    let groupsToCreate:string[] = []
+    if (values.autoGroupsNames) {
+      groupsToCreate = values.autoGroupsNames.filter(
+          (s: string) => !allGroupsNames.includes(s)
+      );
+    }
     let userID = user ? user.id : "";
     let isServiceUser = user ? user?.is_service_user : false;
     return {
@@ -120,7 +127,8 @@ const UserEdit = (props: any) => {
     if (users) {
       let currentUser = users.find((user) => user?.is_current);
       if (currentUser) {
-        setIsAdmin(currentUser.role === "admin");
+        setIsAdmin(currentUser.role === "admin" || currentUser.role === "owner");
+        setIsOwner(currentUser.role === "owner");
       }
     }
   }, [users]);
@@ -403,7 +411,7 @@ const UserEdit = (props: any) => {
                   >
                     <Select
                       style={{ width: "100%" }}
-                      disabled={user?.is_current}
+                      disabled={user?.is_current || user?.role === "owner"}
                     >
                       <Option value="admin">
                         <Text type={"secondary"}>admin</Text>
@@ -411,6 +419,11 @@ const UserEdit = (props: any) => {
                       <Option value="user">
                         <Text type={"secondary"}>user</Text>
                       </Option>
+                      {!user?.is_service_user && isOwner && (
+                          <Option value="owner">
+                            <Text type={"secondary"}>owner</Text>
+                          </Option>
+                      )}
                     </Select>
                   </Form.Item>
                 </Col>
@@ -473,7 +486,7 @@ const UserEdit = (props: any) => {
                         label="Block user"
                         style={{ marginRight: "50px", fontWeight: "500" }}
                       >
-                        <Switch />
+                        <Switch disabled={user?.role == "owner"} />
                       </Form.Item>
                     </Col>
                   )}

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

@@ -11,6 +11,8 @@ import MacTab from "./MacTab";
 import Link from "antd/lib/typography/Link";
 import DockerTab from "./DockerTab";
 import AndroidTab from "./AndroidTab";
+import IOSTab from "./IOSTab";
+import {IOSIcon} from "./IOSIcon";
 
 type Props = {
     greeting?: string;
@@ -54,11 +56,16 @@ export const AddPeerPopup: React.FC<Props> = ({
         },
         {
             key: "4",
+            label: <span data-testid="add-peer-modal-ios-tab"><IOSIcon/>iOS</span>,
+            children: <IOSTab/>,
+        },
+        {
+            key: "5",
             label: <span data-testid="add-peer-modal-android-tab"><AndroidFilled/>Android</span>,
             children: <AndroidTab/>,
         },
         {
-            key: "5",
+            key: "6",
             label: <span data-testid="add-peer-modal-docker-tab"><Icon component={DockerSVG}/>Docker</span>,
             children: <DockerTab/>,
         }

src/components/popups/addpeer/addpeer/IOSIcon.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Icon, { HomeOutlined } from '@ant-design/icons';
+import type { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
+import { Space } from 'antd';
+
+
+const SvgIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="15"
+         height="15"
+         viewBox="0 0 30 30"
+    >
+        <path
+            d="M 27.126316,5.731579 C 26.889474,5.1078948 26.321052,4.231579 25.51579,3.6078948 25.042106,3.2526316 24.505264,2.9052632 23.747368,2.6842106 22.926316,2.4473684 21.91579,2.368421 20.68421,2.368421 H 9.3157894 c -1.2394736,0 -2.2421052,0.078948 -3.055263,0.3236842 C 5.5026316,2.9210526 4.9421052,3.2605264 4.4842106,3.6157894 3.6789474,4.231579 3.1105264,5.1157894 2.8657894,5.7394736 2.3763158,6.9947368 2.368421,8.4157894 2.368421,9.3157894 V 20.68421 c 0,0.9 0.0079,2.321054 0.4973684,3.584212 0.244737,0.623684 0.813158,1.5 1.6184212,2.123684 0.4657894,0.355262 1.018421,0.70263 1.7763158,0.923684 0.8131578,0.236842 1.8157894,0.315788 3.055263,0.315788 H 20.68421 c 1.239474,0 2.242106,-0.07894 3.055264,-0.323684 0.757894,-0.228946 1.31842,-0.56842 1.776316,-0.923684 0.805262,-0.615788 1.373684,-1.5 1.61842,-2.123684 0.497368,-1.255262 0.497368,-2.68421 0.497368,-3.58421 V 9.3078948 c 0,-0.9 -0.0078,-2.3210526 -0.497368,-3.5842106 z M 7.3736842,19.736842 H 6.4342106 V 14.123684 H 7.3736842 Z M 6.9078948,13.176316 c -0.3157896,0 -0.5842106,-0.260527 -0.5842106,-0.584211 0,-0.323684 0.2605264,-0.58421 0.5842106,-0.58421 0.3236842,0 0.5921052,0.260526 0.5921052,0.58421 -0.0079,0.323684 -0.268421,0.584211 -0.5921052,0.584211 z m 5.6447372,6.702631 c -2.478948,0 -4.0421056,-1.768421 -4.0421056,-4.586842 0,-2.818421 1.5631576,-4.594737 4.0421056,-4.594737 2.478947,0 4.042105,1.776316 4.042105,4.594737 0,2.818421 -1.563158,4.586842 -4.042105,4.586842 z m 8.178946,0 c -1.863157,0 -3.173683,-1.026315 -3.260525,-2.557894 h 0.844736 c 0.09474,1.065789 1.097369,1.792105 2.494737,1.792105 1.33421,0 2.289474,-0.726316 2.289474,-1.728947 0,-0.828948 -0.576316,-1.326316 -1.894736,-1.657895 L 20.1,15.442105 c -1.65,-0.418421 -2.384211,-1.113158 -2.384211,-2.289473 0,-1.436843 1.294737,-2.463158 3.047369,-2.463158 1.736842,0 3,1.026315 3.055264,2.439473 h -0.844738 c -0.07894,-1.002631 -0.971052,-1.673684 -2.23421,-1.673684 -1.231579,0 -2.147369,0.686842 -2.147369,1.66579Line truncated
+        />
+    </svg>
+);
+
+export const IOSIcon = (props: Partial<CustomIconComponentProps>) => (
+    <Icon component={SvgIcon} {...props} />
+);

src/components/popups/addpeer/addpeer/IOSTab.tsx

@@ -0,0 +1,62 @@
+import React, {useState} from 'react';
+
+import {Button, Image, Typography} from "antd";
+import TabSteps from "./TabSteps";
+import { StepCommand } from "./types"
+import applestore from '../../../../assets/app-store-badge.png';
+import {getConfig} from "../../../../config";
+const { grpcApiOrigin } = getConfig();
+
+const {Text} = Typography;
+
+export const IOSTab = () => {
+
+    const [steps, setSteps] = useState([
+        {
+            key: 1,
+            title: 'Download and install the application from App Store:',
+            commands: (
+                <a data-testid="download-android-button" href="https://apps.apple.com/app/netbird-p2p-vpn/id6469329339" target="_blank">
+                    <Image width="12em" preview={false} style={{marginTop: "5px"}} src={applestore}/>
+                </a>
+            ),
+            copied: false
+        } as StepCommand,
+        ... grpcApiOrigin ? [{
+            key: 2,
+            title: 'Click on "Change Server" and enter the following "Server"',
+            commands: grpcApiOrigin,
+            commandsForCopy: grpcApiOrigin,
+            copied: false,
+            showCopyButton: false
+        }] : [],
+        {
+            key: 2 + (grpcApiOrigin ? 1 : 0),
+            title: 'Click on the "Connect" button in the middle of the screen',
+            commands: '',
+            copied: false,
+            showCopyButton: false
+        },
+        {
+            key: 3 + (grpcApiOrigin ? 1 : 0),
+            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 IOSTab

src/store/account/actions.ts

@@ -1,6 +1,6 @@
 import {ActionType, createAction, createAsyncAction} from 'typesafe-actions';
 import {Account} from './types';
-import {ApiError, ChangeResponse, RequestPayload} from '../../services/api-client/types';
+import {ApiError, ChangeResponse, DeleteResponse, RequestPayload} from '../../services/api-client/types';
 
 const actions = {
     getAccounts: createAsyncAction(
@@ -16,6 +16,13 @@ const actions = {
     )<RequestPayload<Account>, ChangeResponse<Account | null>, ChangeResponse<Account | null>>(),
     setUpdateAccount: createAction('SET_UPDATED_ACCOUNT')<ChangeResponse<Account | null>>(),
     resetUpdateAccount: createAction('RESET_UPDATED_ACCOUNT')<null>(),
+    deleteAccount: createAsyncAction(
+        'DELETE_ACCOUNT_REQUEST',
+        'DELETE_ACCOUNT_SUCCESS',
+        'DELETE_ACCOUNT_FAILURE'
+    )<RequestPayload<string>, DeleteResponse<string | null>, DeleteResponse<string | null>>(),
+    resetDeletedAccount: createAction('RESET_DELETED_ACCOUNT')<null>(),
+    setDeleteAccount: createAction('SET_DELETE_ACCOUNT')<DeleteResponse<string | null>>(),
 };