easier to delete sites

messages/en-US.json

@@ -47,9 +47,8 @@
     "edit": "Edit",
     "siteConfirmDelete": "Confirm Delete Site",
     "siteDelete": "Delete Site",
-    "siteMessageRemove": "Once removed, the site will no longer be accessible. All resources and targets associated with the site will also be removed.",
+    "siteMessageRemove": "Once removed the site will no longer be accessible. All targets associated with the site will also be removed.",
-    "siteMessageConfirm": "To confirm, please type the name of the site below.",
+    "siteQuestionRemove": "Are you sure you want to remove the site from the organization?",
-    "siteQuestionRemove": "Are you sure you want to remove the site {selectedSite} from the organization?",
     "siteManageSites": "Manage Sites",
     "siteDescription": "Allow connectivity to your network through secure tunnels",
     "siteCreate": "Create Site",
@@ -1894,5 +1893,7 @@
     "pathRewriteRegex": "Regex",
     "pathRewriteStrip": "Strip",
     "pathRewriteStripLabel": "strip",
-    "sidebarEnableEnterpriseLicense": "Enable Enterprise License"
+    "sidebarEnableEnterpriseLicense": "Enable Enterprise License",
+    "cannotbeUndone": "This can not be undone.",
+    "toConfirm": "to confirm"
 }

src/components/ConfirmDeleteDialog.tsx

@@ -44,6 +44,7 @@ import { Description } from "@radix-ui/react-toast";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useTranslations } from "next-intl";
+import CopyToClipboard from "./CopyToClipboard";
 
 type InviteUserFormProps = {
     open: boolean;
@@ -110,6 +111,17 @@ export default function InviteUserForm({
                     <CredenzaBody>
                         <div className="mb-4 break-all overflow-hidden">
                             {dialog}
+                            <div className="mt-2 mb-6 font-bold text-red-700">
+                                {t("cannotbeUndone")}
+                            </div>
+
+                            <div>
+                                <div className="flex items-center gap-2">
+                                    {t("type")}
+                                    <span className="px-2 py-1 rounded-md font-medium bg-secondary"><CopyToClipboard text={string} /></span>
+                                    {t("toConfirm")}
+                                </div>
+                            </div>
                         </div>
                         <Form {...form}>
                             <form

src/components/SitesTable.tsx

@@ -418,17 +418,11 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
                         setSelectedSite(null);
                     }}
                     dialog={
-                        <div className="space-y-4">
+                        <div className="">
                             <p>
-                                {t("siteQuestionRemove", {
+                                {t("siteQuestionRemove")}
-                                    selectedSite:
-                                        selectedSite?.name || selectedSite?.id
-                                })}
                             </p>
-
                             <p>{t("siteMessageRemove")}</p>
-
-                            <p>{t("siteMessageConfirm")}</p>
                         </div>
                     }
                     buttonText={t("siteConfirmDelete")}