create site modal

server/routers/site/pickSiteDefaults.ts

@@ -76,6 +76,7 @@ export async function pickSiteDefaults(
             status: HttpCode.OK,
         });
     } catch (error) {
+        throw error;
         logger.error(error);
         return next(
             createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")

src/app/[orgId]/settings/access/users/[userId]/layout.tsx

@@ -5,6 +5,16 @@ import { authCookieHeader } from "@app/api/cookies";
 import { SidebarSettings } from "@app/components/SidebarSettings";
 import { GetOrgUserResponse } from "@server/routers/user";
 import OrgUserProvider from "@app/providers/OrgUserProvider";
+import {
+    Breadcrumb,
+    BreadcrumbItem,
+    BreadcrumbLink,
+    BreadcrumbList,
+    BreadcrumbPage,
+    BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
 
 interface UserLayoutProps {
     children: React.ReactNode;
@@ -37,6 +47,17 @@ export default async function UserLayoutProps(props: UserLayoutProps) {
     return (
         <>
             <OrgUserProvider orgUser={user}>
+                <div className="mb-4">
+                    <Link
+                        href="../../"
+                        className="text-muted-foreground hover:underline"
+                    >
+                        <div className="flex flex-row items-center gap-1">
+                            <ArrowLeft /> <span>All Users</span>
+                        </div>
+                    </Link>
+                </div>
+
                 <div className="space-y-0.5 select-none mb-6">
                     <h2 className="text-2xl font-bold tracking-tight">
                         User {user?.email}

src/app/[orgId]/settings/sites/components/CreateSiteForm.tsx

@@ -0,0 +1,294 @@
+"use client";
+
+import api from "@app/api";
+import { Button, buttonVariants } from "@app/components/ui/button";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "@app/components/ui/form";
+import { Input } from "@app/components/ui/input";
+import { useToast } from "@app/hooks/useToast";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { set, z } from "zod";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle,
+} from "@app/components/Credenza";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { useParams, useRouter } from "next/navigation";
+import { PickSiteDefaultsResponse } from "@server/routers/site";
+import { generateKeypair } from "../[niceId]/components/wireguardConfig";
+import { cn } from "@app/lib/utils";
+import { ChevronDownIcon } from "lucide-react";
+import CopyTextBox from "@app/components/CopyTextBox";
+import { Checkbox } from "@app/components/ui/checkbox";
+
+const method = [
+    { label: "Wireguard", value: "wg" },
+    { label: "Newt", value: "newt" },
+] as const;
+
+const accountFormSchema = z.object({
+    name: z
+        .string()
+        .min(2, {
+            message: "Name must be at least 2 characters.",
+        })
+        .max(30, {
+            message: "Name must not be longer than 30 characters.",
+        }),
+    method: z.enum(["wg", "newt"]),
+});
+
+type AccountFormValues = z.infer<typeof accountFormSchema>;
+
+const defaultValues: Partial<AccountFormValues> = {
+    name: "",
+    method: "wg",
+};
+
+type CreateSiteFormProps = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+};
+
+export default function CreateSiteForm({ open, setOpen }: CreateSiteFormProps) {
+    const { toast } = useToast();
+
+    const [loading, setLoading] = useState(false);
+
+    const params = useParams();
+    const orgId = params.orgId;
+    const router = useRouter();
+
+    const [keypair, setKeypair] = useState<{
+        publicKey: string;
+        privateKey: string;
+    } | null>(null);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isChecked, setIsChecked] = useState(false);
+    const [siteDefaults, setSiteDefaults] =
+        useState<PickSiteDefaultsResponse | null>(null);
+
+    const handleCheckboxChange = (checked: boolean) => {
+        setIsChecked(checked);
+    };
+
+    const form = useForm<AccountFormValues>({
+        resolver: zodResolver(accountFormSchema),
+        defaultValues,
+    });
+
+    useEffect(() => {
+        if (!open) return;
+
+        if (typeof window !== "undefined") {
+            const generatedKeypair = generateKeypair();
+            setKeypair(generatedKeypair);
+            setIsLoading(false);
+
+            api.get(`/org/${orgId}/pick-site-defaults`)
+                .catch((e) => {
+                    toast({
+                        title: "Error picking site defaults",
+                    });
+                })
+                .then((res) => {
+                    if (res && res.status === 200) {
+                        setSiteDefaults(res.data.data);
+                    }
+                });
+        }
+    }, [open]);
+
+    async function onSubmit(data: AccountFormValues) {
+        setLoading(true);
+        const res = await api
+            .put(`/org/${orgId}/site/`, {
+                name: data.name,
+                subnet: siteDefaults?.subnet,
+                exitNodeId: siteDefaults?.exitNodeId,
+                pubKey: keypair?.publicKey,
+            })
+            .catch((e) => {
+                toast({
+                    title: "Error creating site",
+                });
+            });
+
+        if (res && res.status === 201) {
+            const niceId = res.data.data.niceId;
+            // navigate to the site page
+            router.push(`/${orgId}/settings/sites/${niceId}`);
+        }
+
+        setLoading(false);
+    }
+
+    const wgConfig =
+        keypair && siteDefaults
+            ? `[Interface]
+Address = ${siteDefaults.subnet}
+ListenPort = 51820
+PrivateKey = ${keypair.privateKey}
+
+[Peer]
+PublicKey = ${siteDefaults.publicKey}
+AllowedIPs = ${siteDefaults.address.split("/")[0]}/32
+Endpoint = ${siteDefaults.endpoint}:${siteDefaults.listenPort}
+PersistentKeepalive = 5`
+            : "";
+
+    const newtConfig = `curl -fsSL https://get.docker.com -o get-docker.sh
+sh get-docker.sh`;
+
+    return (
+        <>
+            <Credenza
+                open={open}
+                onOpenChange={(val) => {
+                    setOpen(val);
+                    setLoading(false);
+
+                    // reset all values
+                    form.reset();
+                    setIsChecked(false);
+                    setKeypair(null);
+                    setSiteDefaults(null);
+                }}
+            >
+                <CredenzaContent>
+                    <CredenzaHeader>
+                        <CredenzaTitle>Create Site</CredenzaTitle>
+                        <CredenzaDescription>
+                            Create a new site to start connecting your resources
+                        </CredenzaDescription>
+                    </CredenzaHeader>
+                    <CredenzaBody>
+                        <Form {...form}>
+                            <form
+                                onSubmit={form.handleSubmit(onSubmit)}
+                                className="space-y-4"
+                                id="create-site-form"
+                            >
+                                <FormField
+                                    control={form.control}
+                                    name="name"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Name</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    placeholder="Your name"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormDescription>
+                                                This is the name that will be
+                                                displayed for this site.
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                                <FormField
+                                    control={form.control}
+                                    name="method"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>Method</FormLabel>
+                                            <div className="relative w-max">
+                                                <FormControl>
+                                                    <select
+                                                        className={cn(
+                                                            buttonVariants({
+                                                                variant:
+                                                                    "outline",
+                                                            }),
+                                                            "w-[200px] appearance-none font-normal"
+                                                        )}
+                                                        {...field}
+                                                    >
+                                                        <option value="wg">
+                                                            WireGuard
+                                                        </option>
+                                                        <option value="newt">
+                                                            Newt
+                                                        </option>
+                                                    </select>
+                                                </FormControl>
+                                                <ChevronDownIcon className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
+                                            </div>
+                                            <FormDescription>
+                                                This is how you will connect
+                                                your site to Fossorial.
+                                            </FormDescription>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+
+                                <div className="max-w-md">
+                                    {form.watch("method") === "wg" &&
+                                    !isLoading ? (
+                                        <CopyTextBox text={wgConfig} />
+                                    ) : form.watch("method") === "wg" &&
+                                      isLoading ? (
+                                        <p>
+                                            Loading WireGuard configuration...
+                                        </p>
+                                    ) : (
+                                        <CopyTextBox
+                                            text={newtConfig}
+                                            wrapText={false}
+                                        />
+                                    )}
+                                </div>
+
+                                <div className="flex items-center space-x-2">
+                                    <Checkbox
+                                        id="terms"
+                                        checked={isChecked}
+                                        onCheckedChange={handleCheckboxChange}
+                                    />
+                                    <label
+                                        htmlFor="terms"
+                                        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                                    >
+                                        I have copied the config
+                                    </label>
+                                </div>
+                            </form>
+                        </Form>
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <Button
+                            type="submit"
+                            form="create-site-form"
+                            loading={loading}
+                            disabled={loading || !isChecked}
+                        >
+                            Create Site
+                        </Button>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
+        </>
+    );
+}

src/app/[orgId]/settings/sites/components/SitesTable.tsx

@@ -13,8 +13,9 @@ import { ArrowUpDown, MoreHorizontal } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import api from "@app/api";
-import { authCookieHeader } from "@app/api/cookies";
 import { AxiosResponse } from "axios";
+import { useState } from "react";
+import CreateSiteForm from "./CreateSiteForm";
 
 export type SiteRow = {
     id: number;
@@ -25,95 +26,6 @@ export type SiteRow = {
     orgId: string;
 };
 
-export const columns: ColumnDef<SiteRow>[] = [
-    {
-        accessorKey: "name",
-        header: ({ column }) => {
-            return (
-                <Button
-                    variant="ghost"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === "asc")
-                    }
-                >
-                    Name
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            );
-        },
-    },
-    {
-        accessorKey: "nice",
-        header: ({ column }) => {
-            return (
-                <Button
-                    variant="ghost"
-                    onClick={() =>
-                        column.toggleSorting(column.getIsSorted() === "asc")
-                    }
-                >
-                    Site
-                    <ArrowUpDown className="ml-2 h-4 w-4" />
-                </Button>
-            );
-        },
-    },
-    {
-        accessorKey: "mbIn",
-        header: "MB In",
-    },
-    {
-        accessorKey: "mbOut",
-        header: "MB Out",
-    },
-    {
-        id: "actions",
-        cell: ({ row }) => {
-            const router = useRouter();
-
-            const siteRow = row.original;
-
-            const deleteSite = (siteId: number) => {
-                api.delete(`/site/${siteId}`)
-                    .catch((e) => {
-                        console.error("Error deleting site", e);
-                    })
-                    .then(() => {
-                        router.refresh();
-                    });
-            };
-
-            return (
-                <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                        <Button variant="ghost" className="h-8 w-8 p-0">
-                            <span className="sr-only">Open menu</span>
-                            <MoreHorizontal className="h-4 w-4" />
-                        </Button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                        <DropdownMenuItem>
-                            <Link
-                                href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
-                            >
-                                View settings
-                            </Link>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                            <button
-                                onClick={() => deleteSite(siteRow.id)}
-                                className="text-red-600 hover:text-red-800"
-                            >
-                                Delete
-                            </button>
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            );
-        },
-    },
-];
-
 type SitesTableProps = {
     sites: SiteRow[];
     orgId: string;
@@ -122,26 +34,118 @@ type SitesTableProps = {
 export default function SitesTable({ sites, orgId }: SitesTableProps) {
     const router = useRouter();
 
+    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+
     const callApi = async () => {
-
+        const res = await api.put<AxiosResponse<any>>(`/newt`);
-        const res = await api.put<AxiosResponse<any>>(
-            `/newt`
-        );
         console.log(res);
-        
     };
 
+    const columns: ColumnDef<SiteRow>[] = [
+        {
+            accessorKey: "name",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Name
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+        },
+        {
+            accessorKey: "nice",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        Site
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+        },
+        {
+            accessorKey: "mbIn",
+            header: "MB In",
+        },
+        {
+            accessorKey: "mbOut",
+            header: "MB Out",
+        },
+        {
+            id: "actions",
+            cell: ({ row }) => {
+                const router = useRouter();
+
+                const siteRow = row.original;
+
+                const deleteSite = (siteId: number) => {
+                    api.delete(`/site/${siteId}`)
+                        .catch((e) => {
+                            console.error("Error deleting site", e);
+                        })
+                        .then(() => {
+                            router.refresh();
+                        });
+                };
+
+                return (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" className="h-8 w-8 p-0">
+                                <span className="sr-only">Open menu</span>
+                                <MoreHorizontal className="h-4 w-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuItem>
+                                <Link
+                                    href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
+                                >
+                                    View settings
+                                </Link>
+                            </DropdownMenuItem>
+                            <DropdownMenuItem>
+                                <button
+                                    onClick={() => deleteSite(siteRow.id)}
+                                    className="text-red-600 hover:text-red-800"
+                                >
+                                    Delete
+                                </button>
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                );
+            },
+        },
+    ];
+
     return (
         <>
-        <SitesDataTable
+            <CreateSiteForm
-            columns={columns}
+                open={isCreateModalOpen}
-            data={sites}
+                setOpen={setIsCreateModalOpen}
-            addSite={() => {
+            />
-                router.push(`/${orgId}/settings/sites/create`);
-            }}
-        />
-        <button onClick={callApi}>Create Newt</button>
-        </>
 
+            <SitesDataTable
+                columns={columns}
+                data={sites}
+                addSite={() => {
+                    // router.push(`/${orgId}/settings/sites/create`);
+                    setIsCreateModalOpen(true);
+                }}
+            />
+            <button onClick={callApi}>Create Newt</button>
+        </>
     );
 }

src/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}