Merge branch 'main' of https://github.com/fosrl/pangolin

src/app/[orgId]/sites/[niceId]/components/create-site.tsx

@@ -8,14 +8,6 @@ import { z } from "zod"
 import { cn } from "@/lib/utils"
 import { toast } from "@/hooks/use-toast"
 import { Button, buttonVariants } from "@/components/ui/button"
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList,
-} from "@/components/ui/command"
 import {
     Form,
     FormControl,
@@ -26,15 +18,9 @@ import {
     FormMessage,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from "@/components/ui/popover"
 import { generateKeypair } from "./wireguard-config";
 import React, { useState, useEffect } from "react";
 import { api } from "@/api";
-import { AxiosResponse } from "axios"
 import { useParams } from "next/navigation";
 import { useRouter } from "next/navigation";
 import { Checkbox } from "@app/components/ui/checkbox"
@@ -53,16 +39,6 @@ const accountFormSchema = z.object({
         .max(30, {
             message: "Name must not be longer than 30 characters.",
         }),
-    subdomain: z
-        .string()
-        // cant be too long and cant have spaces or special characters
-        .regex(/^[a-zA-Z0-9-]+$/)
-        .min(2, {
-            message: "Subdomain must be at least 2 characters.",
-        })
-        .max(30, {
-            message: "Subdomain must not be longer than 30 characters.",
-        }),
     method: z.enum(["wg", "newt"]),
 });
 
@@ -99,17 +75,11 @@ export function CreateSiteForm() {
         }
     }, []);
 
-    const name = form.watch("name");
-    useEffect(() => {
-        const subdomain = name.toLowerCase().replace(/\s+/g, "-");
-        form.setValue("subdomain", subdomain, { shouldValidate: true });
-    }, [name, form]);
-
     async function onSubmit(data: AccountFormValues) {
         const res = await api
             .put(`/org/${orgId}/site/`, {
                 name: data.name,
-                subdomain: data.subdomain,
+                // subdomain: data.subdomain,
                 pubKey: keypair?.publicKey,
             })
             .catch((e) => {
@@ -119,9 +89,9 @@ export function CreateSiteForm() {
             });
 
         if (res && res.status === 201) {
-            const siteId = res.data.data.siteId;
+            const niceId = res.data.data.niceId;
             // navigate to the site page
-            router.push(`/${orgId}/sites/${siteId}`);
+            router.push(`/${orgId}/sites/${niceId}`);
         }
     }
 
@@ -161,7 +131,7 @@ sh get-docker.sh`;
                             </FormItem>
                         )}
                     />
-                    <FormField
+                    {/* <FormField
                         control={form.control}
                         name="subdomain"
                         render={({ field }) => (
@@ -176,7 +146,7 @@ sh get-docker.sh`;
                                 <FormMessage />
                             </FormItem>
                         )}
-                    />
+                    /> */}
                     <FormField
                         control={form.control}
                         name="method"

src/app/[orgId]/sites/[niceId]/layout.tsx

@@ -20,25 +20,25 @@ export const metadata: Metadata = {
 const sidebarNavItems = [
     {
         title: "Profile",
-        href: "/{orgId}/sites/{siteId}",
+        href: "/{orgId}/sites/{niceId}",
     },
     {
         title: "Appearance",
-        href: "/{orgId}/sites/{siteId}/appearance",
+        href: "/{orgId}/sites/{niceId}/appearance",
     },
     {
         title: "Notifications",
-        href: "/{orgId}/sites/{siteId}/notifications",
+        href: "/{orgId}/sites/{niceId}/notifications",
     },
     {
         title: "Display",
-        href: "/{orgId}/sites/{siteId}/display",
+        href: "/{orgId}/sites/{niceId}/display",
     },
 ];
 
 interface SettingsLayoutProps {
     children: React.ReactNode;
-    params: { siteId: string; orgId: string };
+    params: { niceId: string; orgId: string };
 }
 
 export default async function SettingsLayout({
@@ -46,10 +46,10 @@ export default async function SettingsLayout({
     params,
 }: SettingsLayoutProps) {
     let site = null;
-    if (params.siteId !== "create") {
+    if (params.niceId !== "create") {
         try {
             const res = await internal.get<AxiosResponse<GetSiteResponse>>(
-                `/site/${params.siteId}`,
+                `/org/${params.orgId}/site/${params.niceId}`,
                 authCookieHeader(),
             );
             site = res.data.data;
@@ -78,27 +78,26 @@ export default async function SettingsLayout({
             </div>
 
             <div className="mb-4">
-            <Link
-                href={`/${params.orgId}/sites`}
-                className="text-primary font-medium"
-            >
-                <div className="flex items-center gap-0.5 hover:underline">
-                    <ChevronLeft />
-                    <span>View all sites</span>
-                </div>
-            </Link>
+                <Link
+                    href={`/${params.orgId}/sites`}
+                    className="text-primary font-medium"
+                >
+                    <div className="flex items-center gap-0.5 hover:underline">
+                        <ChevronLeft />
+                        <span>View all sites</span>
+                    </div>
+                </Link>
             </div>
 
             <div className="hidden space-y-6 0 pb-16 md:block">
                 <div className="space-y-0.5">
                     <h2 className="text-2xl font-bold tracking-tight">
-                        {params.siteId == "create"
+                        {params.niceId == "create"
                             ? "New Site"
-                            : site?.name + " Settings" || "Site Settings"
-                        }
+                            : site?.name + " Settings" || "Site Settings"}
                     </h2>
                     <p className="text-muted-foreground">
-                        {params.siteId == "create"
+                        {params.niceId == "create"
                             ? "Create a new site"
                             : "Configure the settings on your site: " +
                                   site?.name || ""}
@@ -109,7 +108,7 @@ export default async function SettingsLayout({
                     <aside className="-mx-4 lg:w-1/5">
                         <SidebarNav
                             items={sidebarNavItems}
-                            disabled={params.siteId == "create"}
+                            disabled={params.niceId == "create"}
                         />
                     </aside>
                     <div className="flex-1 lg:max-w-2xl">

src/app/[orgId]/sites/[niceId]/page.tsx

@@ -6,9 +6,9 @@ import { CreateSiteForm } from "./components/create-site";
 export default function SettingsProfilePage({
     params,
 }: {
-    params: { siteId: string };
+    params: { niceId: string };
 }) {
-    const isCreateForm = params.siteId === "create";
+    const isCreateForm = params.niceId === "create";
 
     return (
         <div className="space-y-6">

src/components/sidebar-nav.tsx

@@ -17,7 +17,7 @@ export function SidebarNav({ className, items, disabled = false, ...props }: Sid
     const pathname = usePathname();
     const params = useParams();
     const orgId = params.orgId as string;
-    const siteId = params.siteId as string;
+    const niceId = params.niceId as string;
     const resourceId = params.resourceId as string;
 
     return (
@@ -31,11 +31,11 @@ export function SidebarNav({ className, items, disabled = false, ...props }: Sid
         >
             {items.map((item) => (
                 <Link
-                    key={item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)}
-                    href={item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)}
+                    key={item.href.replace("{orgId}", orgId).replace("{niceId}", niceId).replace("{resourceId}", resourceId)}
+                    href={item.href.replace("{orgId}", orgId).replace("{niceId}", niceId).replace("{resourceId}", resourceId)}
                     className={cn(
                         buttonVariants({ variant: "ghost" }),
-                        pathname === item.href.replace("{orgId}", orgId).replace("{siteId}", siteId).replace("{resourceId}", resourceId)
+                        pathname === item.href.replace("{orgId}", orgId).replace("{niceId}", niceId).replace("{resourceId}", resourceId)
                             ? "bg-muted hover:bg-muted"
                             : "hover:bg-transparent hover:underline",
                         "justify-start",