Add option to install netbird after creating a setup key

heisbrot · heisbrot · commit 57e71a330e5c · 2025-01-14T16:19:02.000+01:00
diff --git a/src/modules/setup-keys/SetupKeyModal.tsx b/src/modules/setup-keys/SetupKeyModal.tsx
@@ -23,7 +23,7 @@ import { cn } from "@utils/helpers";
 import { trim } from "lodash";
 import {
   AlarmClock,
-  CopyIcon,
+  DownloadIcon,
   ExternalLinkIcon,
   MonitorSmartphoneIcon,
   PlusCircle,
@@ -35,6 +35,7 @@ import SetupKeysIcon from "@/assets/icons/SetupKeysIcon";
 import useCopyToClipboard from "@/hooks/useCopyToClipboard";
 import { SetupKey } from "@/interfaces/SetupKey";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
+import SetupModal from "@/modules/setup-netbird-modal/SetupModal";
 
 type Props = {
   children?: React.ReactNode;
@@ -49,6 +50,7 @@ export default function SetupKeyModal({
 }: Readonly<Props>) {
   const [successModal, setSuccessModal] = useState(false);
   const [setupKey, setSetupKey] = useState<SetupKey>();
+  const [installModal, setInstallModal] = useState(false);
   const [, copy] = useCopyToClipboard(setupKey?.key);
 
   const handleSuccess = (setupKey: SetupKey) => {
@@ -62,6 +64,15 @@ export default function SetupKeyModal({
         {children && <ModalTrigger asChild>{children}</ModalTrigger>}
         <SetupKeyModalContent onSuccess={handleSuccess} />
       </Modal>
+
+      <Modal
+        open={installModal}
+        onOpenChange={setInstallModal}
+        key={installModal ? 1 : 0}
+      >
+        <SetupModal showClose={true} setupKey={setupKey?.key} />
+      </Modal>
+
       <Modal
         open={successModal}
         onOpenChange={(open) => {
@@ -118,10 +129,10 @@ export default function SetupKeyModal({
                 variant={"primary"}
                 className={"w-full"}
                 data-cy={"setup-key-copy"}
-                onClick={() => copy(copyMessage)}
+                onClick={() => setInstallModal(true)}
               >
-                <CopyIcon size={14} />
-                Copy to clipboard
+                <DownloadIcon size={14} />
+                Install NetBird
               </Button>
             </div>
           </ModalFooter>
diff --git a/src/modules/setup-netbird-modal/DockerTab.tsx b/src/modules/setup-netbird-modal/DockerTab.tsx
@@ -10,7 +10,11 @@ import Link from "next/link";
 import React from "react";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
 
-export default function DockerTab() {
+type Props = {
+  setupKey?: string;
+};
+
+export default function DockerTab({ setupKey }: Readonly<Props>) {
   return (
     <TabsContent value={String(OperatingSystem.DOCKER)}>
       <TabsContentPadding>
@@ -42,7 +46,10 @@ export default function DockerTab() {
               <Code.Line>
                 {" "}
                 -e NB_SETUP_KEY=
-                <span className={"text-netbird"}>SETUP_KEY</span> \
+                <span className={"text-netbird"}>
+                  {setupKey ?? "SETUP_KEY"}
+                </span>{" "}
+                \
               </Code.Line>
               <Code.Line> -v netbird-client:/etc/netbird \</Code.Line>
               {GRPC_API_ORIGIN && (
diff --git a/src/modules/setup-netbird-modal/LinuxTab.tsx b/src/modules/setup-netbird-modal/LinuxTab.tsx
@@ -13,8 +13,13 @@ import { getNetBirdUpCommand } from "@utils/netbird";
 import { TerminalSquareIcon } from "lucide-react";
 import React from "react";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
+import { SetupKeyParameter } from "@/modules/setup-netbird-modal/SetupModal";
 
-export default function LinuxTab() {
+type Props = {
+  setupKey?: string;
+};
+
+export default function LinuxTab({ setupKey }: Readonly<Props>) {
   return (
     <TabsContent value={String(OperatingSystem.LINUX)}>
       <TabsContentPadding>
@@ -27,9 +32,12 @@ export default function LinuxTab() {
             <Code>curl -fsSL https://pkgs.netbird.io/install.sh | sh</Code>
           </Steps.Step>
           <Steps.Step step={2} line={false}>
-            <p>Run NetBird and log in the browser</p>
+            <p>Run NetBird {!setupKey && "and log in the browser"}</p>
             <Code>
-              <Code.Line>{getNetBirdUpCommand()}</Code.Line>
+              <Code.Line>
+                {getNetBirdUpCommand()}
+                <SetupKeyParameter setupKey={setupKey} />
+              </Code.Line>
             </Code>
           </Steps.Step>
         </Steps>
@@ -78,9 +86,12 @@ export default function LinuxTab() {
                   </Code>
                 </Steps.Step>
                 <Steps.Step step={3} line={false}>
-                  <p>Run NetBird and log in the browser</p>
+                  <p>Run NetBird {!setupKey && "and log in the browser"}</p>
                   <Code>
-                    <Code.Line>{getNetBirdUpCommand()}</Code.Line>
+                    <Code.Line>
+                      {getNetBirdUpCommand()}
+                      <SetupKeyParameter setupKey={setupKey} />
+                    </Code.Line>
                   </Code>
                 </Steps.Step>
               </Steps>
diff --git a/src/modules/setup-netbird-modal/MacOSTab.tsx b/src/modules/setup-netbird-modal/MacOSTab.tsx
@@ -23,8 +23,12 @@ import {
 import Link from "next/link";
 import React from "react";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
+import { SetupKeyParameter } from "@/modules/setup-netbird-modal/SetupModal";
 
-export default function MacOSTab() {
+type Props = {
+  setupKey?: string;
+};
+export default function MacOSTab({ setupKey }: Readonly<Props>) {
   return (
     <TabsContent value={String(OperatingSystem.APPLE)}>
       <TabsContentPadding>
@@ -98,15 +102,29 @@ export default function MacOSTab() {
             </Steps.Step>
           )}
 
-          <Steps.Step step={GRPC_API_ORIGIN ? 3 : 2}>
-            <p>
-              {/* eslint-disable-next-line react/no-unescaped-entities */}
-              Click on "Connect" from the NetBird icon in your system tray
-            </p>
-          </Steps.Step>
-          <Steps.Step step={GRPC_API_ORIGIN ? 4 : 3} line={false}>
-            <p>Sign up using your email address</p>
-          </Steps.Step>
+          {setupKey ? (
+            <Steps.Step step={GRPC_API_ORIGIN ? 3 : 2} line={false}>
+              <p>Open Terminal and run NetBird</p>
+              <Code>
+                <Code.Line>
+                  {getNetBirdUpCommand()}
+                  <SetupKeyParameter setupKey={setupKey} />
+                </Code.Line>
+              </Code>
+            </Steps.Step>
+          ) : (
+            <>
+              <Steps.Step step={GRPC_API_ORIGIN ? 3 : 2}>
+                <p>
+                  {/* eslint-disable-next-line react/no-unescaped-entities */}
+                  Click on "Connect" from the NetBird icon in your system tray
+                </p>
+              </Steps.Step>
+              <Steps.Step step={GRPC_API_ORIGIN ? 4 : 3} line={false}>
+                <p>Sign up using your email address</p>
+              </Steps.Step>
+            </>
+          )}
         </Steps>
       </TabsContentPadding>
       <Separator />
@@ -125,9 +143,12 @@ export default function MacOSTab() {
                   </Code>
                 </Steps.Step>
                 <Steps.Step step={2} line={false}>
-                  <p>Run NetBird and log in the browser</p>
+                  <p>Run NetBird {!setupKey && "and log in the browser"}</p>
                   <Code>
-                    <Code.Line>{getNetBirdUpCommand()}</Code.Line>
+                    <Code.Line>
+                      {getNetBirdUpCommand()}
+                      <SetupKeyParameter setupKey={setupKey} />
+                    </Code.Line>
                   </Code>
                 </Steps.Step>
               </Steps>
@@ -179,9 +200,12 @@ export default function MacOSTab() {
                   </Code>
                 </Steps.Step>
                 <Steps.Step step={4} line={false}>
-                  <p>Run NetBird and log in the browser</p>
+                  <p>Run NetBird {!setupKey && "and log in the browser"}</p>
                   <Code>
-                    <Code.Line>{getNetBirdUpCommand()}</Code.Line>
+                    <Code.Line>
+                      {getNetBirdUpCommand()}
+                      <SetupKeyParameter setupKey={setupKey} />
+                    </Code.Line>
                   </Code>
                 </Steps.Step>
               </Steps>
diff --git a/src/modules/setup-netbird-modal/SetupModal.tsx b/src/modules/setup-netbird-modal/SetupModal.tsx
@@ -5,6 +5,7 @@ import { ModalContent, ModalFooter } from "@components/modal/Modal";
 import Paragraph from "@components/Paragraph";
 import SmallParagraph from "@components/SmallParagraph";
 import { Tabs, TabsList, TabsTrigger } from "@components/Tabs";
+import { cn } from "@utils/helpers";
 import { ExternalLinkIcon } from "lucide-react";
 import { usePathname } from "next/navigation";
 import React from "react";
@@ -31,27 +32,36 @@ type OidcUserInfo = {
 type Props = {
   showClose?: boolean;
   user?: OidcUserInfo;
+  setupKey?: string;
 };
 
-export default function SetupModal({ showClose = true, user }: Props) {
+export default function SetupModal({
+  showClose = true,
+  user,
+  setupKey,
+}: Readonly<Props>) {
   return (
     <ModalContent showClose={showClose}>
-      <SetupModalContent user={user} />
+      <SetupModalContent user={user} setupKey={setupKey} />
     </ModalContent>
   );
 }
 
+type SetupModalContentProps = {
+  user?: OidcUserInfo;
+  header?: boolean;
+  footer?: boolean;
+  tabAlignment?: "center" | "start" | "end";
+  setupKey?: string;
+};
+
 export function SetupModalContent({
   user,
   header = true,
   footer = true,
   tabAlignment = "center",
-}: {
-  user?: OidcUserInfo;
-  header?: boolean;
-  footer?: boolean;
-  tabAlignment?: "center" | "start" | "end";
-}) {
+  setupKey,
+}: Readonly<SetupModalContentProps>) {
   const os = useOperatingSystem();
   const [isFirstRun] = useLocalStorage<boolean>("netbird-first-run", true);
   const pathname = usePathname();
@@ -60,24 +70,33 @@ export function SetupModalContent({
   return (
     <>
       {header && (
-        <div className={"text-center pb-8 pt-4 px-8"}>
-          <h2 className={"text-3xl max-w-lg mx-auto"}>
+        <div className={"text-center pb-5 pt-4 px-8"}>
+          <h2
+            className={cn(
+              "max-w-lg mx-auto",
+              setupKey ? "text-2xl" : "text-3xl",
+            )}
+          >
             {isFirstRun && !isInstallPage ? (
               <>
                 Hello {user?.given_name || "there"}! 👋 <br />
                 {`It's time to add your first device.`}
               </>
             ) : (
-              <>Install NetBird</>
+              <>Install NetBird with Setup Key</>
             )}
           </h2>
-          <Paragraph className={"max-w-xs mx-auto mt-3"}>
-            To get started, install NetBird and log in with your email account.
+          <Paragraph
+            className={cn("mx-auto mt-3", setupKey ? "max-w-sm" : "max-w-xs")}
+          >
+            {setupKey
+              ? "To get started, install and run NetBird with your recently created setup key as a parameter."
+              : "To get started, install NetBird and log in with your email account."}
           </Paragraph>
         </div>
       )}
 
-      <Tabs defaultValue={String(os)}>
+      <Tabs defaultValue={String(setupKey ? OperatingSystem.LINUX : os)}>
         <TabsList justify={tabAlignment} className={"pt-2 px-3"}>
           <TabsTrigger value={String(OperatingSystem.LINUX)}>
             <ShellIcon
@@ -103,22 +122,28 @@ export function SetupModalContent({
             />
             macOS
           </TabsTrigger>
-          <TabsTrigger value={String(OperatingSystem.IOS)}>
-            <IOSIcon
-              className={
-                "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
-              }
-            />
-            iOS
-          </TabsTrigger>
-          <TabsTrigger value={String(OperatingSystem.ANDROID)}>
-            <AndroidIcon
-              className={
-                "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
-              }
-            />
-            Android
-          </TabsTrigger>
+
+          {!setupKey && (
+            <>
+              <TabsTrigger value={String(OperatingSystem.IOS)}>
+                <IOSIcon
+                  className={
+                    "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+                  }
+                />
+                iOS
+              </TabsTrigger>
+              <TabsTrigger value={String(OperatingSystem.ANDROID)}>
+                <AndroidIcon
+                  className={
+                    "fill-nb-gray-500 group-data-[state=active]/trigger:fill-netbird transition-all"
+                  }
+                />
+                Android
+              </TabsTrigger>
+            </>
+          )}
+
           <TabsTrigger value={String(OperatingSystem.DOCKER)}>
             <DockerIcon
               className={
@@ -128,12 +153,19 @@ export function SetupModalContent({
             Docker
           </TabsTrigger>
         </TabsList>
-        <LinuxTab />
-        <WindowsTab />
-        <MacOSTab />
-        <AndroidTab />
-        <IOSTab />
-        <DockerTab />
+
+        <LinuxTab setupKey={setupKey} />
+        <WindowsTab setupKey={setupKey} />
+        <MacOSTab setupKey={setupKey} />
+
+        {!setupKey && (
+          <>
+            <AndroidTab />
+            <IOSTab />
+          </>
+        )}
+
+        <DockerTab setupKey={setupKey} />
       </Tabs>
       {footer && (
         <ModalFooter variant={"setup"}>
@@ -158,3 +190,18 @@ export function SetupModalContent({
     </>
   );
 }
+
+type SetupKeyParameterProps = {
+  setupKey?: string;
+};
+
+export const SetupKeyParameter = ({ setupKey }: SetupKeyParameterProps) => {
+  return (
+    setupKey && (
+      <>
+        {" "}
+        --setup-key <span className={"text-netbird"}>{setupKey}</span>{" "}
+      </>
+    )
+  );
+};
diff --git a/src/modules/setup-netbird-modal/WindowsTab.tsx b/src/modules/setup-netbird-modal/WindowsTab.tsx
