Update AddPeer tab (#47)

2026-01-26 01:21:04 +00:00 · 2022-05-26 20:29:36 +02:00
parent b647155b6a
commit 0a04b11413
9 changed files with 49 additions and 34 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,7 @@
        "@testing-library/user-event": "^12.1.10",
        "autoprefixer": "^10.4.4",
        "heroicons": "^1.0.6",
-        "highlight.js": "^11.2.0",
+        "highlight.js": "^11.5.1",
        "history": "^5.0.1",
        "nth-check": ">=2.0.1",
        "postcss": "^8.4.12",
@@ -7921,9 +7921,9 @@
      "integrity": "sha512-5bxTsG2hyNBF0l+BrFlZlR5YngQNMfl0ggJjIRkMSADBQbaZMoTg47OIQzq6f1mpEZ85HEIgSC4wt5AeFM9J2Q=="
    },
    "node_modules/highlight.js": {
-      "version": "11.5.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.0.tgz",
-      "integrity": "sha512-SM6WDj5/C+VfIY8pZ6yW6Xa0Fm1tniYVYWYW1Q/DcMnISZFrC3aQAZZZFAAZtybKNrGId3p/DNbFTtcTXXgYBw==",
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.1.tgz",
+      "integrity": "sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q==",
      "engines": {
        "node": ">=12.0.0"
      }
@@ -21876,9 +21876,9 @@
      "integrity": "sha512-5bxTsG2hyNBF0l+BrFlZlR5YngQNMfl0ggJjIRkMSADBQbaZMoTg47OIQzq6f1mpEZ85HEIgSC4wt5AeFM9J2Q=="
    },
    "highlight.js": {
-      "version": "11.5.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.0.tgz",
-      "integrity": "sha512-SM6WDj5/C+VfIY8pZ6yW6Xa0Fm1tniYVYWYW1Q/DcMnISZFrC3aQAZZZFAAZtybKNrGId3p/DNbFTtcTXXgYBw=="
+      "version": "11.5.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.1.tgz",
+      "integrity": "sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q=="
    },
    "history": {
      "version": "5.0.1",
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
    "@testing-library/user-event": "^12.1.10",
    "autoprefixer": "^10.4.4",
    "heroicons": "^1.0.6",
-    "highlight.js": "^11.2.0",
+    "highlight.js": "^11.5.1",
    "history": "^5.0.1",
    "postcss": "^8.4.12",
    "prop-types": "^15.7.2",
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -3,8 +3,8 @@ import React from 'react';
 const Footer = () => {
  return (
    <div className='flex justify-center items-center h-24 bg-gray-100 text-gray'>
-        <p className="font-mono">
-            Copyright © 2021 <a className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600" href="https://wiretrustee.com">Wiretrustee Authors</a>
+        <p>
+            Copyright © 2022 <a className="underline text-blue-600 hover:text-blue-800 visited:text-purple-600" href="https://wiretrustee.com">Wiretrustee UG & Authors</a>
        </p>
    </div>
  );
--- a/src/components/Highlight.js
+++ b/src/components/Highlight.js
@@ -2,7 +2,8 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";

 import hljs from "highlight.js";
-import "highlight.js/styles/agate.css";
+import "highlight.js/styles/mono-blue.css";
+//import "highlight.js/styles/base16/flat.css";
 import "highlight.js/lib/languages/bash";

 class Highlight extends Component {
--- a/src/components/addpeer/AddPeerTabSelector.js
+++ b/src/components/addpeer/AddPeerTabSelector.js
@@ -1,5 +1,5 @@
 import LinuxTab from "./LinuxTab";
-import {useState} from "react";
+import {useEffect, useState} from "react";
 import {classNames} from "../../utils/common";
 import WindowsTab from "./WindowsTab";
 import MacTab from "./MacTab";
@@ -14,6 +14,20 @@ const AddPeerTabSelector = ({setupKey}) => {

    const [openTab, setOpenTab] = useState(1);

+    const detectOS = () => {
+        let os = 1;
+        if (navigator.userAgent.indexOf("Win")!==-1) os=2;
+        if (navigator.userAgent.indexOf("Mac")!==-1) os=3;
+        if (navigator.userAgent.indexOf("X11")!==-1) os=1;
+        if (navigator.userAgent.indexOf("Linux")!==-1) os=1
+
+        setOpenTab(os)
+    }
+
+    useEffect(() => {
+       detectOS();
+    }, []);
+
    return (
        <div>
            <div className="hidden sm:block">
@@ -30,7 +44,7 @@ const AddPeerTabSelector = ({setupKey}) => {
                                    tab.idx === openTab
                                        ? 'border-indigo-500 text-gray-600'
                                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300',
-                                    'whitespace-nowrap py-4 px-1 border-b-2 text-sm'
+                                    'whitespace-nowrap py-4 px-1 border-b-2 text-m'
                                )}
                                aria-current={tab.idx === openTab ? 'page' : undefined}
                            >
--- a/src/components/addpeer/LinuxTab.js
+++ b/src/components/addpeer/LinuxTab.js
@@ -11,7 +11,7 @@ const LinuxTab = ({setupKey}) => {
    const steps = [
        {
            id: 1,
-            target: 'Add Netbird\'s repository:',
+            target: 'Add repository:',
            icon: ArrowCircleRightIcon,
            iconBackground: 'bg-gray-600',
            content: null,
@@ -25,16 +25,16 @@ const LinuxTab = ({setupKey}) => {
            iconBackground: 'bg-gray-600',
            content: null,
            copy: true,
-            commands: ["sudo apt-get update", "sudo apt-get install wiretrustee"]
+            commands: ["sudo apt-get update", "# for CLI only\nsudo apt-get install netbird", "# for GUI package\nsudo apt-get install netbird-ui"]
        },
        {
            id: 3,
-            target: 'Login and run Netbird:',
+            target: 'Run Netbird and log in the browser:',
            icon: ArrowCircleRightIcon,
            iconBackground: 'bg-gray-600',
            content: null,
            copy: true,
-            commands: grpcApiOrigin === '' ? ["sudo wiretrustee up --setup-key <PASTE-SETUP-KEY>"] : ["sudo wiretrustee up --setup-key <PASTE-SETUP-KEY> --management-url " + grpcApiOrigin]
+            commands: grpcApiOrigin === '' ? ["sudo netbird up"] : ["sudo netbird up --management-url " + grpcApiOrigin]
        },
        {
            id: 4,
--- a/src/components/addpeer/MacTab.js
+++ b/src/components/addpeer/MacTab.js
@@ -14,7 +14,11 @@ const MacTab = ({setupKey}) => {
            target: 'Download and install Brew (package manager):',
            icon: ArrowCircleRightIcon,
            iconBackground: 'bg-gray-600',
-            content: <button className="underline text-indigo-500" onClick={()=> window.open("https://brew.sh/", "_blank")}>https://brew.sh/</button>,
+            content: <button type="button"
+                             onClick={() => window.open("https://brew.sh/")}
+                             className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">
+                Download Brew
+            </button>,
            commands: [],
            copy: false
        },
@@ -25,16 +29,16 @@ const MacTab = ({setupKey}) => {
            iconBackground: 'bg-gray-600',
            content: null,
            copy: true,
-            commands: ["brew install wiretrustee/client/wiretrustee"]
+            commands: ["# for CLI only\nbrew install netbirdio/tap/netbird", "# for GUI package\nbrew install --cask netbirdio/tap/netbird-ui"]
        },
        {
            id: 3,
-            target: 'Login and run Netbird:',
+            target: 'Run Netbird and log in the browser:',
            icon: ArrowCircleRightIcon,
            iconBackground: 'bg-gray-600',
            content: null,
            copy: true,
-            commands: grpcApiOrigin === '' ? ["sudo wiretrustee up --setup-key <PASTE-SETUP-KEY>"] : ["sudo wiretrustee up --setup-key <PASTE-SETUP-KEY> --management-url " + grpcApiOrigin]
+            commands: grpcApiOrigin === '' ? ["sudo netbird up"] : ["sudo netbird up --management-url " + grpcApiOrigin]
        },
        {
            id: 4,
@@ -43,7 +47,7 @@ const MacTab = ({setupKey}) => {
            iconBackground: 'bg-gray-600',
            content: null,
            copy: true,
-            commands: ["sudo ipconfig getifaddr utun100"]
+            commands: ["sudo ifconfig utun100"]
        },
    ]

--- a/src/components/addpeer/WindowsTab.js
+++ b/src/components/addpeer/WindowsTab.js
@@ -9,21 +9,17 @@ const {grpcApiOrigin} = getConfig();

 const WindowsTab = ({setupKey}) => {

-    const downloadBtn = () => {
-        return <button type="button"
-                       onClick={() => window.open("https://github.com/netbirdio/netbird/releases/latest/download/netbird_installer_0.6.0_windows_amd64.exe")}
-                       className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
-        > Download Netbird
-        </button>
-    }
-
    const steps = [
        {
            id: 1,
            target: 'Download and run Windows installer:',
            icon: ArrowCircleRightIcon,
            iconBackground: 'bg-gray-600',
-            content: downloadBtn(),
+            content: <button type="button"
+                             onClick={() => window.open("https://github.com/netbirdio/netbird/releases/latest/download/netbird_installer_0.6.0_windows_amd64.exe")}
+                             className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-500 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">
+                Download Netbird
+            </button>,
            commands: [],
            copy: false
        },
@@ -38,7 +34,7 @@ const WindowsTab = ({setupKey}) => {
        },
        {
            id: 3,
-            target: 'Login with your email address.',
+            target: 'Log in your browser.',
            icon: ArrowCircleRightIcon,
            iconBackground: 'bg-gray-600',
            content: "",
--- a/src/views/AddPeer.js
+++ b/src/views/AddPeer.js
@@ -47,9 +47,9 @@ export const AddPeerComponent = () => {
                                    <span>{error.toString()}</span>
                                )}
                                {setupKeys && (<nav aria-label="Progress">
-                                    <div className="flex max-w-lg flex-col space-y-2">
+                                    {/*<div className="flex max-w-lg flex-col space-y-2">
                                        <SetupKeySelect data={setupKeys.filter(k => k.Valid)} onSelected={setSelectedKey}/>
-                                    </div>
+                                    </div>*/}
                                    <AddPeerTabSelector setupKey={selectedKey}/>
                                </nav>)}