Generate setup key when installing netbird from routing peer modal

Author: heisbrot

src/modules/networks/routing-peers/NetworkRoutingPeerModal.tsx

@@ -24,9 +24,10 @@ import { cn } from "@utils/helpers";
 import { uniqBy } from "lodash";
 import {
   ArrowDownWideNarrow,
-  CirclePlusIcon,
+  DownloadIcon,
   ExternalLinkIcon,
   FolderGit2,
+  Loader2,
   MonitorSmartphoneIcon,
   PlusCircle,
   Power,
@@ -35,10 +36,12 @@ import {
   VenetianMask,
 } from "lucide-react";
 import React, { useState } from "react";
+import { useSWRConfig } from "swr";
 import { Network, NetworkRouter } from "@/interfaces/Network";
 import { Peer } from "@/interfaces/Peer";
+import { SetupKey } from "@/interfaces/SetupKey";
 import useGroupHelper from "@/modules/groups/useGroupHelper";
-import SetupKeyModal from "@/modules/setup-keys/SetupKeyModal";
+import SetupModal from "@/modules/setup-netbird-modal/SetupModal";
 
 type Props = {
   network: Network;
@@ -240,8 +243,8 @@ function RoutingPeerModalContent({
                 <SegmentedTabs.Content value={"peer"}>
                   <div>
                     <HelpText>
-                      Assign a single or multiple peers as routing peers for the
-                      network.
+                      Assign a single or multiple Linux peers as routing peers
+                      for the network.
                     </HelpText>
                     <PeerSelector
                       onChange={setRoutingPeer}
@@ -267,29 +270,15 @@ function RoutingPeerModalContent({
 
             <div className={cn("flex justify-between items-center mt-3")}>
               <div>
-                <Label>Install Routing Peer</Label>
+                <Label>{"Don't have a routing peer?"}</Label>
                 <HelpText className={""}>
-                  You can install NetBird with a Setup Key on one or more Linux
+                  You can install NetBird with a setup key on one or more Linux
                   machines to act as routing peers.
                 </HelpText>
               </div>
-              <Button
-                variant={"secondary"}
-                size={"xs"}
-                className={"ml-8"}
-                onClick={() => setSetupKeyModal(true)}
-              >
-                <CirclePlusIcon size={14} />
-                Create Setup Key
-              </Button>
-              {setupKeyModal && (
-                <SetupKeyModal
-                  open={setupKeyModal}
-                  setOpen={setSetupKeyModal}
-                  showOnlyRoutingPeerOS={true}
-                  name={`Routing Peer (${network.name})`}
-                />
-              )}
+              <InstallNetBirdWithSetupKeyButton
+                name={`Routing Peer (${network.name})`}
+              />
             </div>
           </div>
         </TabsContent>
@@ -409,3 +398,74 @@ function RoutingPeerModalContent({
     </ModalContent>
   );
 }
+
+type InstallNetBirdWithSetupKeyButtonProps = {
+  name?: string;
+};
+
+const InstallNetBirdWithSetupKeyButton = ({
+  name,
+}: InstallNetBirdWithSetupKeyButtonProps) => {
+  const setupKeyRequest = useApiCall<SetupKey>("/setup-keys", true);
+  const { mutate } = useSWRConfig();
+
+  const [installModal, setInstallModal] = useState(false);
+  const [setupKey, setSetupKey] = useState<SetupKey>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const createSetupKey = async () => {
+    const loadingTimeout = setTimeout(() => setIsLoading(true), 1000);
+
+    await setupKeyRequest
+      .post({
+        name,
+        type: "one-off",
+        expires_in: 24 * 60 * 60, // 1 day expiration
+        revoked: false,
+        auto_groups: [],
+        usage_limit: 1,
+        ephemeral: false,
+      })
+      .then((setupKey) => {
+        setInstallModal(true);
+        setSetupKey(setupKey);
+        mutate("/setup-keys");
+      })
+      .finally(() => {
+        setIsLoading(false);
+        clearTimeout(loadingTimeout);
+      });
+  };
+
+  return (
+    <>
+      <Button
+        variant={"secondary"}
+        size={"xs"}
+        className={"ml-8"}
+        onClick={createSetupKey}
+        disabled={isLoading}
+      >
+        {isLoading ? (
+          <Loader2 size={14} className={"animate-spin delay-1000"} />
+        ) : (
+          <DownloadIcon size={14} />
+        )}
+        Install NetBird
+      </Button>
+      {setupKey && (
+        <Modal
+          open={installModal}
+          onOpenChange={setInstallModal}
+          key={setupKey.key}
+        >
+          <SetupModal
+            showClose={true}
+            setupKey={setupKey.key}
+            showOnlyRoutingPeerOS={true}
+          />
+        </Modal>
+      )}
+    </>
+  );
+};

src/modules/setup-netbird-modal/DockerTab.tsx

@@ -9,12 +9,17 @@ import { ExternalLinkIcon } from "lucide-react";
 import Link from "next/link";
 import React from "react";
 import { OperatingSystem } from "@/interfaces/OperatingSystem";
+import { RoutingPeerSetupKeyInfo } from "@/modules/setup-netbird-modal/SetupModal";
 
 type Props = {
   setupKey?: string;
+  showSetupKeyInfo?: boolean;
 };
 
-export default function DockerTab({ setupKey }: Readonly<Props>) {
+export default function DockerTab({
+  setupKey,
+  showSetupKeyInfo = false,
+}: Readonly<Props>) {
   return (
     <TabsContent value={String(OperatingSystem.DOCKER)}>
       <TabsContentPadding>
@@ -39,7 +44,10 @@ export default function DockerTab({ setupKey }: Readonly<Props>) {
             </div>
           </Steps.Step>
           <Steps.Step step={2}>
-            <p>Run NetBird container</p>
+            <p>
+              Run NetBird container
+              {showSetupKeyInfo && <RoutingPeerSetupKeyInfo />}
+            </p>
             <Code>
               <Code.Line>docker run --rm -d \</Code.Line>
               <Code.Line> --cap-add=NET_ADMIN \</Code.Line>

src/modules/setup-netbird-modal/LinuxTab.tsx

@@ -13,13 +13,20 @@ 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";
+import {
+  RoutingPeerSetupKeyInfo,
+  SetupKeyParameter,
+} from "@/modules/setup-netbird-modal/SetupModal";
 
 type Props = {
   setupKey?: string;
+  showSetupKeyInfo?: boolean;
 };
 
-export default function LinuxTab({ setupKey }: Readonly<Props>) {
+export default function LinuxTab({
+  setupKey,
+  showSetupKeyInfo = false,
+}: Readonly<Props>) {
   return (
     <TabsContent value={String(OperatingSystem.LINUX)}>
       <TabsContentPadding>
@@ -32,7 +39,10 @@ export default function LinuxTab({ setupKey }: Readonly<Props>) {
             <Code>curl -fsSL https://pkgs.netbird.io/install.sh | sh</Code>
           </Steps.Step>
           <Steps.Step step={2} line={false}>
-            <p>Run NetBird {!setupKey && "and log in the browser"}</p>
+            <p>
+              Run NetBird {!setupKey && "and log in the browser"}
+              {showSetupKeyInfo && <RoutingPeerSetupKeyInfo />}
+            </p>
             <Code>
               <Code.Line>
                 {getNetBirdUpCommand()}
@@ -86,7 +96,10 @@ export default function LinuxTab({ setupKey }: Readonly<Props>) {
                   </Code>
                 </Steps.Step>
                 <Steps.Step step={3} line={false}>
-                  <p>Run NetBird {!setupKey && "and log in the browser"}</p>
+                  <p>
+                    Run NetBird {!setupKey && "and log in the browser"}
+                    {showSetupKeyInfo && <RoutingPeerSetupKeyInfo />}
+                  </p>
                   <Code>
                     <Code.Line>
                       {getNetBirdUpCommand()}

src/modules/setup-netbird-modal/SetupModal.tsx

@@ -167,7 +167,10 @@ export function SetupModalContent({
           </TabsTrigger>
         </TabsList>
 
-        <LinuxTab setupKey={setupKey} />
+        <LinuxTab
+          setupKey={setupKey}
+          showSetupKeyInfo={showOnlyRoutingPeerOS}
+        />
         <WindowsTab setupKey={setupKey} />
         <MacOSTab setupKey={setupKey} />
 
@@ -178,7 +181,10 @@ export function SetupModalContent({
           </>
         )}
 
-        <DockerTab setupKey={setupKey} />
+        <DockerTab
+          setupKey={setupKey}
+          showSetupKeyInfo={showOnlyRoutingPeerOS}
+        />
       </Tabs>
       {footer && (
         <ModalFooter variant={"setup"}>
@@ -213,8 +219,22 @@ export const SetupKeyParameter = ({ setupKey }: SetupKeyParameterProps) => {
     setupKey && (
       <>
         {" "}
-        --setup-key <span className={"text-netbird"}>{setupKey}</span>{" "}
+        --setup-key <span className={"text-netbird"}>{setupKey}</span>
       </>
     )
   );
 };
+
+export const RoutingPeerSetupKeyInfo = () => {
+  return (
+    <div
+      className={
+        "flex gap-2 mt-1 items-center text-xs text-nb-gray-300 font-normal mb-1"
+      }
+    >
+      This setup key can be used only once within the next 24 hours.
+      <br />
+      When expired, the same key can not be used again.
+    </div>
+  );
+};