diff --git a/e2e-tests/pages/modals/add-peer-modal.ts b/e2e-tests/pages/modals/add-peer-modal.ts
index a2d0ea9..1687059 100644
--- a/e2e-tests/pages/modals/add-peer-modal.ts
+++ b/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/');
diff --git a/e2e-tests/tests/peers.test.ts b/e2e-tests/tests/peers.test.ts
index 4e4c156..4306c6e 100644
--- a/e2e-tests/tests/peers.test.ts
+++ b/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();
diff --git a/src/assets/app-store-badge.png b/src/assets/app-store-badge.png
new file mode 100644
index 0000000..e3de46f
Binary files /dev/null and b/src/assets/app-store-badge.png differ
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 7cf9346..9811f4a 100644
--- a/src/components/Banner.tsx
+++ b/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 (
Learn more →
+ >Download →
)
}
@@ -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');
}
diff --git a/src/components/popups/addpeer/addpeer/AddPeerPopup.tsx b/src/components/popups/addpeer/addpeer/AddPeerPopup.tsx
index 3530bd6..3945fb6 100644
--- a/src/components/popups/addpeer/addpeer/AddPeerPopup.tsx
+++ b/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 = ({
},
{
key: "4",
+ label: iOS,
+ children: ,
+ },
+ {
+ key: "5",
label: Android,
children: ,
},
{
- key: "5",
+ key: "6",
label: Docker,
children: ,
}
diff --git a/src/components/popups/addpeer/addpeer/IOSIcon.tsx b/src/components/popups/addpeer/addpeer/IOSIcon.tsx
new file mode 100644
index 0000000..c9902d4
--- /dev/null
+++ b/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 = () => (
+
+);
+
+export const IOSIcon = (props: Partial) => (
+
+);
diff --git a/src/components/popups/addpeer/addpeer/IOSTab.tsx b/src/components/popups/addpeer/addpeer/IOSTab.tsx
new file mode 100644
index 0000000..7bf3eb7
--- /dev/null
+++ b/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: (
+
+
+
+ ),
+ 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 (
+
+
+ Install on Android
+
+
+
+
+
+