Use niceId

bruno/Sites/Get Site.bru

@@ -0,0 +1,11 @@
+meta {
+  name: Get Site
+  type: http
+  seq: 2
+}
+
+get {
+  url: http://localhost:3000/api/v1/org/theorg/sites/mexican-mole-lizard-windy
+  body: none
+  auth: none
+}

server/db/names.ts

@@ -12,7 +12,7 @@ export const names = JSON.parse(readFileSync(file, 'utf-8'));
 
 export function getUniqueName(): string {
     return (
-        names.animals[Math.floor(Math.random() * names.animals.length)] +
-        names.descriptor[Math.floor(Math.random() * names.descriptor.length)]
-    ).toLowerCase();
+        names.descriptors[Math.floor(Math.random() * names.descriptors.length)] + "-" +
+        names.animals[Math.floor(Math.random() * names.animals.length)]
+    ).toLowerCase().replace(/\s/g, '-');
 }

server/routers/external.ts

@@ -44,10 +44,12 @@ authenticated.delete("/org/:orgId", verifyOrgAccess, org.deleteOrg);
 
 authenticated.put("/org/:orgId/site", verifyOrgAccess, site.createSite);
 authenticated.get("/org/:orgId/sites", verifyOrgAccess, site.listSites);
-authenticated.get("/site/:siteId", verifySiteAccess, site.getSite);
-authenticated.get("/site/:siteId/roles", verifySiteAccess, site.listSiteRoles);
-authenticated.post("/site/:siteId", verifySiteAccess, site.updateSite);
-authenticated.delete("/site/:siteId", verifySiteAccess, site.deleteSite);
+authenticated.get("/org/:orgId/site/:niceId", verifyOrgAccess, site.getSite);
+
+authenticated.get("/site/siteId/:siteId", verifySiteAccess, site.getSite);
+authenticated.get("/site/siteId/:siteId/roles", verifySiteAccess, site.listSiteRoles);
+authenticated.post("/site/siteId/:siteId", verifySiteAccess, site.updateSite);
+authenticated.delete("/site/siteId/:siteId", verifySiteAccess, site.deleteSite);
 
 authenticated.put(
     "/org/:orgId/site/:siteId/resource",

server/routers/site/createSite.ts

@@ -82,7 +82,6 @@ export async function createSite(req: Request, res: Response, next: NextFunction
             orgId,
             name,
             niceId,
-            subdomain,
             pubKey,
             subnet,
         }).returning();
@@ -129,7 +128,7 @@ export async function createSite(req: Request, res: Response, next: NextFunction
             status: HttpCode.CREATED,
         });
     } catch (error) {
-        logger.error(error);
+        throw error;
         return next(createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred..."));
     }
 }

server/routers/site/getSite.ts

@@ -2,7 +2,7 @@ import { Request, Response, NextFunction } from 'express';
 import { z } from 'zod';
 import { db } from '@server/db';
 import { sites } from '@server/db/schema';
-import { eq } from 'drizzle-orm';
+import { eq, and } from 'drizzle-orm';
 import response from "@server/utils/response";
 import HttpCode from '@server/types/HttpCode';
 import createHttpError from 'http-errors';
@@ -11,7 +11,9 @@ import logger from '@server/logger';
 
 // Define Zod schema for request parameters validation
 const getSiteSchema = z.object({
-    siteId: z.string().transform(Number).pipe(z.number().int().positive())
+    siteId: z.string().transform(Number).pipe(z.number().int().positive()).optional(),
+    niceId: z.string().optional(),
+    orgId: z.string().optional(),
 });
 
 export type GetSiteResponse = {
@@ -34,7 +36,7 @@ export async function getSite(req: Request, res: Response, next: NextFunction):
             );
         }
 
-        const { siteId } = parsedParams.data;
+        const { siteId, niceId, orgId } = parsedParams.data;
 
         // Check if the user has permission to list sites
         const hasPermission = await checkUserActionPermission(ActionsEnum.updateSite, req);
@@ -42,11 +44,23 @@ export async function getSite(req: Request, res: Response, next: NextFunction):
             return next(createHttpError(HttpCode.FORBIDDEN, 'User does not have permission to perform this action'));
         }
 
+        let site;
         // Fetch the site from the database
-        const site = await db.select()
-            .from(sites)
-            .where(eq(sites.siteId, siteId))
-            .limit(1);
+        if (siteId) {
+            site = await db.select()
+                .from(sites)
+                .where(eq(sites.siteId, siteId))
+                .limit(1);
+        } else if (niceId && orgId) {
+            site = await db.select()
+                .from(sites)
+                .where(and(eq(sites.niceId, niceId), eq(sites.orgId, orgId)))
+                .limit(1);
+        }
+
+        if (!site) {
+            return next(createHttpError(HttpCode.NOT_FOUND, 'Site not found'));
+        }
 
         if (site.length === 0) {
             return next(
@@ -60,8 +74,8 @@ export async function getSite(req: Request, res: Response, next: NextFunction):
         return response(res, {
             data: {
                 siteId: site[0].siteId,
+                niceId: site[0].niceId,
                 name: site[0].name,
-                subdomain: site[0].subdomain,
                 subnet: site[0].subnet,
             },
             success: true,
@@ -70,7 +84,7 @@ export async function getSite(req: Request, res: Response, next: NextFunction):
             status: HttpCode.OK,
         });
     } catch (error) {
-        logger.error(error);
+        logger.error("Error from getSite: ", error);
         return next(createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred..."));
     }
 }

server/routers/site/listSites.ts

@@ -32,6 +32,7 @@ function querySites(orgId: string, accessibleSiteIds: number[]) {
     return db
         .select({
             siteId: sites.siteId,
+            niceId: sites.niceId,
             name: sites.name,
             pubKey: sites.pubKey,
             subnet: sites.subnet,

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"
@@ -89,12 +75,6 @@ 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/`, {
@@ -109,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}`);
         }
     }
 

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

@@ -18,32 +18,32 @@ 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({ children, params }: SettingsLayoutProps) {
     let site = null;
-    if (params.siteId !== "create") {
+    if (params.niceId !== "create") {
         try {
-            const res = await internal.get<AxiosResponse<GetSiteResponse>>(`/site/${params.siteId}`, authCookieHeader());
+            const res = await internal.get<AxiosResponse<GetSiteResponse>>(`/org/${params.orgId}/site/${params.niceId}`, authCookieHeader());
             site = res.data.data;
         } catch {
             redirect(`/${params.orgId}/sites`)
@@ -72,13 +72,13 @@ export default async function SettingsLayout({ children, params }: SettingsLayou
                 <div className="space-y-0.5">
                     <h2 className="text-2xl font-bold tracking-tight">Settings</h2>
                     <p className="text-muted-foreground">
-                        {params.siteId == "create" ? "Create site..." : "Manage settings on " + site?.name || ""}.
+                        {params.niceId == "create" ? "Create site..." : "Manage settings on " + site?.name || ""}.
                     </p>
                 </div>
                 <Separator className="my-6" />
                 <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
                     <aside className="-mx-4 lg:w-1/5">
-                        <SidebarNav items={sidebarNavItems} disabled={params.siteId == "create"} />
+                        <SidebarNav items={sidebarNavItems} disabled={params.niceId == "create"} />
                     </aside>
                     <div className="flex-1 lg:max-w-2xl">
                         <SiteProvider site={site}>

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",