From c601ea643180e0e259c8e665818900ef2d4fee74 Mon Sep 17 00:00:00 2001
From: Luann Moreira <luann.curioso@ossystems.com.br>
Date: Tue, 26 May 2026 16:05:19 -0300
Subject: [PATCH] fix(ui-react): migrate raw overlay wrappers to Main Dialog
 Components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five components were implementing dialogs with `fixed inset-0` div
wrappers instead of using the shared BaseDialog/ConfirmDialog primitives.
This meant no focus trap, no native ESC handling, and no backdrop-click
semantics — each component reinvented the wheel differently.

Migrate:
- MfaDisableDialog → BaseDialog (size="sm")
- MfaRecoveryCodesModal → BaseDialog (size="md")
- MfaRecoveryTimeoutModal → BaseDialog (canClose={() => false}) to block
  both ESC and backdrop click — user must use the explicit Close button
- Profile (DeleteAccountWarningDialog) → BaseDialog (size="md")
- SessionDetails (Delete Recording, Close Session) → ConfirmDialog with
  per-dialog error state so errors are cleared on re-open

Update tests:
- Add HTMLDialogElement.showModal/close stubs to global test/setup.ts
  so all BaseDialog-using components work under jsdom
- Mock useFocusTrap in MfaDisableDialog, MfaRecoveryTimeoutModal, and
  MfaRecover test files
- Replace old DOM-traversal backdrop tests (`.relative`/previousSibling)
  with fireEvent on the native <dialog> element
---
 .../src/components/ManageTagsDrawer.tsx       |   4 +
 .../src/components/common/CreateNamespace.tsx |   2 +
 .../common/CreateNamespaceDialog.tsx          |   2 +
 .../src/components/mfa/MfaDisableDialog.tsx   |  18 +-
 .../components/mfa/MfaRecoveryCodesModal.tsx  |  19 ++-
 .../mfa/MfaRecoveryTimeoutModal.tsx           |  20 ++-
 .../mfa/__tests__/MfaDisableDialog.test.tsx   |  19 +--
 .../MfaRecoveryTimeoutModal.test.tsx          |  23 +--
 .../components/vault/VaultSettingsSection.tsx |   3 +
 .../console/src/pages/ContainerDetails.tsx    |   1 -
 ui-react/apps/console/src/pages/Profile.tsx   |  26 ++-
 .../apps/console/src/pages/SessionDetails.tsx | 160 ++++++------------
 ui-react/apps/console/src/pages/Settings.tsx  |   4 +
 .../src/pages/__tests__/MfaRecover.test.tsx   |   2 +
 .../admin/namespaces/EditNamespaceDrawer.tsx  |   1 +
 .../pages/admin/users/CreateUserDrawer.tsx    |   1 +
 .../src/pages/admin/users/EditUserDrawer.tsx  |   1 +
 .../src/pages/team/AddMemberDrawer.tsx        |   1 +
 .../src/pages/team/GenerateKeyDrawer.tsx      |   2 +
 .../src/pages/team/InvitationDrawer.tsx       |   2 +
 ui-react/apps/console/src/test/setup.ts       |   8 +
 21 files changed, 148 insertions(+), 171 deletions(-)

diff --git a/ui-react/apps/console/src/components/ManageTagsDrawer.tsx b/ui-react/apps/console/src/components/ManageTagsDrawer.tsx
index 66abd6f6d3d..cf9938f9e33 100644
--- a/ui-react/apps/console/src/components/ManageTagsDrawer.tsx
+++ b/ui-react/apps/console/src/components/ManageTagsDrawer.tsx
@@ -133,6 +133,7 @@ export default function ManageTagsDrawer({
         bodyClassName="flex-1 flex flex-col overflow-hidden"
         footer={(
           <button
+            type="button"
             onClick={onClose}
             className="px-4 py-2.5 text-sm font-medium text-text-secondary hover:text-text-primary rounded-lg hover:bg-hover-subtle transition-colors"
           >
@@ -190,6 +191,7 @@ export default function ManageTagsDrawer({
                 {error}
               </p>
               <button
+                type="button"
                 onClick={() => setError(null)}
                 className="p-0.5 rounded text-accent-red/60 hover:text-accent-red transition-colors shrink-0"
               >
@@ -276,6 +278,7 @@ export default function ManageTagsDrawer({
                       {editingTag !== tag.name && (
                         <div className="flex items-center gap-0.5 shrink-0">
                           <button
+                            type="button"
                             onClick={() => {
                               setEditingTag(tag.name);
                               setEditName(tag.name);
@@ -286,6 +289,7 @@ export default function ManageTagsDrawer({
                             <PencilSquareIcon className="w-3.5 h-3.5" />
                           </button>
                           <button
+                            type="button"
                             onClick={() => setDeletingTag(tag.name)}
                             className="p-1.5 rounded-md text-text-muted hover:text-accent-red hover:bg-accent-red/10 transition-all"
                             title="Delete"
diff --git a/ui-react/apps/console/src/components/common/CreateNamespace.tsx b/ui-react/apps/console/src/components/common/CreateNamespace.tsx
index 04f3e82466d..ffce47377c8 100644
--- a/ui-react/apps/console/src/components/common/CreateNamespace.tsx
+++ b/ui-react/apps/console/src/components/common/CreateNamespace.tsx
@@ -92,6 +92,7 @@ function CopyBlock({ command }: { command: string }) {
       <span className="text-primary/60">$ </span>
       {command}
       <button
+        type="button"
         onClick={handleCopy}
         className="absolute top-2.5 right-2.5 p-1.5 rounded-md text-text-muted hover:text-primary hover:bg-primary/10 transition-all"
         title="Copy command"
@@ -170,6 +171,7 @@ function CommunityInstructions() {
       </div>
 
       <button
+        type="button"
         disabled={!ready}
         onClick={handleContinue}
         className={`w-full flex items-center justify-center gap-2.5 px-5 py-3 rounded-lg text-sm font-semibold transition-all duration-200 ${
diff --git a/ui-react/apps/console/src/components/common/CreateNamespaceDialog.tsx b/ui-react/apps/console/src/components/common/CreateNamespaceDialog.tsx
index 9abcb4bc178..2a9cd5c954b 100644
--- a/ui-react/apps/console/src/components/common/CreateNamespaceDialog.tsx
+++ b/ui-react/apps/console/src/components/common/CreateNamespaceDialog.tsx
@@ -168,6 +168,7 @@ export default function CreateNamespaceDialog({
         </div>
 
         <button
+          type="button"
           onClick={onClose}
           className="p-1.5 rounded-lg text-text-muted hover:text-text-primary hover:bg-hover-medium transition-all"
           aria-label="Close dialog"
@@ -206,6 +207,7 @@ export default function CreateNamespaceDialog({
 
         <div className="flex items-center gap-2">
           <button
+            type="button"
             onClick={onClose}
             className="px-4 py-2 rounded-lg text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-hover-medium transition-all"
           >
diff --git a/ui-react/apps/console/src/components/mfa/MfaDisableDialog.tsx b/ui-react/apps/console/src/components/mfa/MfaDisableDialog.tsx
index ae34301a31e..3cea5846438 100644
--- a/ui-react/apps/console/src/components/mfa/MfaDisableDialog.tsx
+++ b/ui-react/apps/console/src/components/mfa/MfaDisableDialog.tsx
@@ -4,6 +4,7 @@ import { disableMfa } from "@/client";
 import { useOtpInput } from "@/hooks/useOtpInput";
 import { useAuthStore } from "@/stores/authStore";
 import Spinner from "@/components/common/Spinner";
+import BaseDialog from "@/components/common/BaseDialog";
 
 interface MfaDisableDialogProps {
   open: boolean;
@@ -29,8 +30,6 @@ export default function MfaDisableDialog({
   const otpRecoveryEmail = useOtpInput(5, true);
   const { user, username, requestMfaReset } = useAuthStore();
 
-  if (!open) return null;
-
   const handleRequestEmailReset = async (): Promise<void> => {
     const identifier = user || username;
     if (!identifier) {
@@ -104,12 +103,13 @@ export default function MfaDisableDialog({
         : otpMainEmail.isComplete && otpRecoveryEmail.isComplete;
 
   return (
-    <div className="fixed inset-0 z-[70] flex items-center justify-center">
-      <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-        onClick={onClose}
-      />
-      <div className="relative bg-surface border border-border rounded-2xl w-full max-w-sm mx-4 p-6 shadow-2xl animate-slide-up">
+    <BaseDialog
+      open={open}
+      onClose={onClose}
+      size="sm"
+      aria-label="Disable MFA"
+    >
+      <div className="p-6">
         {/* Header */}
         <div className="flex items-start gap-3 mb-4">
           <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-accent-red/15 border border-accent-red/25 flex items-center justify-center">
@@ -300,6 +300,6 @@ export default function MfaDisableDialog({
           )}
         </form>
       </div>
-    </div>
+    </BaseDialog>
   );
 }
diff --git a/ui-react/apps/console/src/components/mfa/MfaRecoveryCodesModal.tsx b/ui-react/apps/console/src/components/mfa/MfaRecoveryCodesModal.tsx
index a8feb0d7961..9ea369f8a24 100644
--- a/ui-react/apps/console/src/components/mfa/MfaRecoveryCodesModal.tsx
+++ b/ui-react/apps/console/src/components/mfa/MfaRecoveryCodesModal.tsx
@@ -2,6 +2,7 @@ import {
   KeyIcon,
   ExclamationTriangleIcon,
 } from "@heroicons/react/24/outline";
+import BaseDialog from "@/components/common/BaseDialog";
 
 interface MfaRecoveryCodesModalProps {
   open: boolean;
@@ -12,15 +13,14 @@ export default function MfaRecoveryCodesModal({
   open,
   onClose,
 }: MfaRecoveryCodesModalProps) {
-  if (!open) return null;
-
   return (
-    <div className="fixed inset-0 z-[70] flex items-center justify-center">
-      <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-        onClick={onClose}
-      />
-      <div className="relative bg-surface border border-border rounded-2xl w-full max-w-md mx-4 p-6 shadow-2xl animate-slide-up">
+    <BaseDialog
+      open={open}
+      onClose={onClose}
+      size="md"
+      aria-label="Recovery Codes"
+    >
+      <div className="p-6">
         {/* Header */}
         <div className="flex items-start gap-3 mb-4">
           <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-accent-yellow/15 border border-accent-yellow/25 flex items-center justify-center">
@@ -56,6 +56,7 @@ export default function MfaRecoveryCodesModal({
 
           <div className="flex justify-end pt-2">
             <button
+              type="button"
               onClick={onClose}
               className="px-5 py-2 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all"
             >
@@ -64,6 +65,6 @@ export default function MfaRecoveryCodesModal({
           </div>
         </div>
       </div>
-    </div>
+    </BaseDialog>
   );
 }
diff --git a/ui-react/apps/console/src/components/mfa/MfaRecoveryTimeoutModal.tsx b/ui-react/apps/console/src/components/mfa/MfaRecoveryTimeoutModal.tsx
index 0ac5c707e28..ebeb6ec2d80 100644
--- a/ui-react/apps/console/src/components/mfa/MfaRecoveryTimeoutModal.tsx
+++ b/ui-react/apps/console/src/components/mfa/MfaRecoveryTimeoutModal.tsx
@@ -3,6 +3,7 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 import { useCountdown } from "@/hooks/useCountdown";
 import CheckboxField from "@/components/common/fields/CheckboxField";
 import Spinner from "@/components/common/Spinner";
+import BaseDialog from "@/components/common/BaseDialog";
 
 interface MfaRecoveryTimeoutModalProps {
   open: boolean;
@@ -21,8 +22,6 @@ export default function MfaRecoveryTimeoutModal({
   const [disabling, setDisabling] = useState(false);
   const { timeLeft, isExpired } = useCountdown(expiresAt);
 
-  if (!open) return null;
-
   const handleDisable = async () => {
     setDisabling(true);
     try {
@@ -33,11 +32,14 @@ export default function MfaRecoveryTimeoutModal({
   };
 
   return (
-    <div className="fixed inset-0 z-[70] flex items-center justify-center">
-      {/* Non-dismissible backdrop */}
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
-
-      <div className="relative bg-surface border border-border rounded-2xl w-full max-w-md mx-4 p-6 shadow-2xl animate-slide-up">
+    <BaseDialog
+      open={open}
+      onClose={onClose}
+      canClose={() => false}
+      size="md"
+      aria-label="Recovery Window Active"
+    >
+      <div className="p-6">
         {/* Header */}
         <div className="flex items-start gap-3 mb-4">
           <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-accent-yellow/15 border border-accent-yellow/25 flex items-center justify-center">
@@ -83,12 +85,14 @@ export default function MfaRecoveryTimeoutModal({
         {/* Actions */}
         <div className="flex justify-end gap-2">
           <button
+            type="button"
             onClick={onClose}
             className="px-4 py-2.5 text-sm font-medium text-text-secondary hover:text-text-primary rounded-lg hover:bg-hover-subtle transition-colors"
           >
             Close
           </button>
           <button
+            type="button"
             onClick={() => void handleDisable()}
             disabled={hasAccess || disabling || isExpired}
             className="px-5 py-2.5 bg-accent-red/90 hover:bg-accent-red text-white rounded-lg text-sm font-semibold disabled:opacity-dim disabled:cursor-not-allowed transition-all flex items-center gap-2"
@@ -110,6 +114,6 @@ export default function MfaRecoveryTimeoutModal({
           </p>
         </div>
       </div>
-    </div>
+    </BaseDialog>
   );
 }
diff --git a/ui-react/apps/console/src/components/mfa/__tests__/MfaDisableDialog.test.tsx b/ui-react/apps/console/src/components/mfa/__tests__/MfaDisableDialog.test.tsx
index 1642edda7de..b11d4051b4d 100644
--- a/ui-react/apps/console/src/components/mfa/__tests__/MfaDisableDialog.test.tsx
+++ b/ui-react/apps/console/src/components/mfa/__tests__/MfaDisableDialog.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import MfaDisableDialog from "../MfaDisableDialog";
 
@@ -7,6 +7,8 @@ vi.mock("@/client", () => ({
   disableMfa: vi.fn(),
 }));
 
+vi.mock("@/hooks/useFocusTrap", () => ({ useFocusTrap: vi.fn() }));
+
 import { disableMfa } from "@/client";
 
 const mockedDisableMfa = vi.mocked(disableMfa);
@@ -249,20 +251,15 @@ describe("MfaDisableDialog", () => {
       expect(onSuccess).not.toHaveBeenCalled();
     });
 
-    it("closes when clicking outside (backdrop)", async () => {
-      const user = userEvent.setup();
+    it("closes when clicking outside (backdrop)", () => {
       render(
         <MfaDisableDialog open={true} onClose={onClose} onSuccess={onSuccess} />,
       );
 
-      // Get the backdrop (absolute positioned div before the dialog card)
-      const dialog = screen.getByRole("heading", { name: /Disable MFA/i }).closest(".relative");
-      const backdrop = dialog?.previousElementSibling;
-
-      if (backdrop) {
-        await user.click(backdrop);
-        expect(onClose).toHaveBeenCalled();
-      }
+      const dialog = document.querySelector("dialog") as HTMLElement;
+      fireEvent.mouseDown(dialog);
+      fireEvent.click(dialog);
+      expect(onClose).toHaveBeenCalled();
     });
 
     it("does not render when open is false", () => {
diff --git a/ui-react/apps/console/src/components/mfa/__tests__/MfaRecoveryTimeoutModal.test.tsx b/ui-react/apps/console/src/components/mfa/__tests__/MfaRecoveryTimeoutModal.test.tsx
index 99b4e8f70d3..465073f6bc4 100644
--- a/ui-react/apps/console/src/components/mfa/__tests__/MfaRecoveryTimeoutModal.test.tsx
+++ b/ui-react/apps/console/src/components/mfa/__tests__/MfaRecoveryTimeoutModal.test.tsx
@@ -1,8 +1,10 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render, screen, act, waitFor } from "@testing-library/react";
+import { render, screen, act, waitFor, fireEvent } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import MfaRecoveryTimeoutModal from "../MfaRecoveryTimeoutModal";
 
+vi.mock("@/hooks/useFocusTrap", () => ({ useFocusTrap: vi.fn() }));
+
 describe("MfaRecoveryTimeoutModal", () => {
   const onClose = vi.fn();
   const onDisable = vi.fn();
@@ -244,8 +246,7 @@ describe("MfaRecoveryTimeoutModal", () => {
       expect(onClose).toHaveBeenCalled();
     });
 
-    it("does not dismiss when clicking the backdrop (non-dismissible)", async () => {
-      const user = userEvent.setup();
+    it("does not dismiss when clicking the backdrop (non-dismissible)", () => {
       const expiresAt = Math.floor(Date.now() / 1000) + 10 * 60;
 
       render(
@@ -257,17 +258,11 @@ describe("MfaRecoveryTimeoutModal", () => {
         />,
       );
 
-      // The backdrop is intentionally non-dismissible (no onClick handler)
-      // Modal has no role="dialog"; find inner container via heading
-      const heading = screen.getByText(/recovery window active/i);
-      const dialog = heading.closest(".relative");
-      const backdrop = dialog?.previousElementSibling as HTMLElement | null;
-
-      if (backdrop) {
-        await user.click(backdrop);
-        // onClose should NOT be called — user must explicitly use the Close button
-        expect(onClose).not.toHaveBeenCalled();
-      }
+      // BaseDialog with canClose={() => false} intercepts the cancel event and blocks it
+      const dialog = document.querySelector("dialog") as HTMLElement;
+      fireEvent(dialog, new Event("cancel"));
+      // onClose should NOT be called — user must explicitly use the Close button
+      expect(onClose).not.toHaveBeenCalled();
     });
   });
 
diff --git a/ui-react/apps/console/src/components/vault/VaultSettingsSection.tsx b/ui-react/apps/console/src/components/vault/VaultSettingsSection.tsx
index 2ce30fc654a..f6e7e007d00 100644
--- a/ui-react/apps/console/src/components/vault/VaultSettingsSection.tsx
+++ b/ui-react/apps/console/src/components/vault/VaultSettingsSection.tsx
@@ -150,6 +150,7 @@ export default function VaultSettingsSection() {
         </h3>
         <div className="bg-card border border-border rounded-lg divide-y divide-border">
           <button
+            type="button"
             onClick={() => setChangeOpen(true)}
             className="flex items-center gap-3 w-full px-4 py-3.5 text-left hover:bg-hover-subtle transition-colors rounded-t-lg"
           >
@@ -165,6 +166,7 @@ export default function VaultSettingsSection() {
           </button>
 
           <button
+            type="button"
             onClick={lock}
             className="flex items-center gap-3 w-full px-4 py-3.5 text-left hover:bg-hover-subtle transition-colors"
           >
@@ -180,6 +182,7 @@ export default function VaultSettingsSection() {
           </button>
 
           <button
+            type="button"
             onClick={() => {
               setResetConfirmText("");
               setResetOpen(true);
diff --git a/ui-react/apps/console/src/pages/ContainerDetails.tsx b/ui-react/apps/console/src/pages/ContainerDetails.tsx
index 0855d308d42..109c12864be 100644
--- a/ui-react/apps/console/src/pages/ContainerDetails.tsx
+++ b/ui-react/apps/console/src/pages/ContainerDetails.tsx
@@ -170,7 +170,6 @@ function TagsSection({ uid, tags }: { uid: string; tags: string[] }) {
               }}
               placeholder="Add tag..."
               aria-label="Add tag"
-              pattern="^[a-zA-Z0-9]+$"
               className="w-28 px-2.5 py-1 bg-card border border-border rounded-md text-xs text-text-primary placeholder:text-text-secondary focus:outline-none focus:border-primary/40 transition-all"
             />
             <button
diff --git a/ui-react/apps/console/src/pages/Profile.tsx b/ui-react/apps/console/src/pages/Profile.tsx
index 010e677da4f..2e0c5863855 100644
--- a/ui-react/apps/console/src/pages/Profile.tsx
+++ b/ui-react/apps/console/src/pages/Profile.tsx
@@ -5,6 +5,7 @@ import { useNamespaces } from "../hooks/useNamespaces";
 import PageHeader from "../components/common/PageHeader";
 import Drawer from "../components/common/Drawer";
 import ConfirmDialog from "../components/common/ConfirmDialog";
+import BaseDialog from "../components/common/BaseDialog";
 import CopyButton from "../components/common/CopyButton";
 import { isSdkError } from "../api/errors";
 import { validatePassword } from "../utils/validation";
@@ -207,15 +208,14 @@ function DeleteAccountWarningDialog({
   const isNamespaceOwner = namespaces.some((ns) => ns.owner === userId);
   const deleteCommand = `./bin/cli user delete ${username ?? ""}`;
 
-  if (!open) return null;
-
   return (
-    <div className="fixed inset-0 z-[70] flex items-center justify-center">
-      <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-        onClick={onClose}
-      />
-      <div className="relative bg-surface border border-border rounded-2xl w-full max-w-md mx-4 p-6 shadow-2xl animate-slide-up">
+    <BaseDialog
+      open={open}
+      onClose={onClose}
+      size="md"
+      aria-label="Account Deletion"
+    >
+      <div className="p-6">
         <div className="flex items-start gap-3 mb-5">
           <span className="w-9 h-9 rounded-lg bg-hover-medium border border-border flex items-center justify-center shrink-0">
             {isCommunity ? (
@@ -296,6 +296,7 @@ function DeleteAccountWarningDialog({
 
         <div className="flex justify-end mt-6">
           <button
+            type="button"
             onClick={onClose}
             data-test="close-btn"
             className="px-4 py-2.5 text-sm font-medium text-text-secondary hover:text-text-primary rounded-lg hover:bg-hover-subtle transition-colors"
@@ -304,7 +305,7 @@ function DeleteAccountWarningDialog({
           </button>
         </div>
       </div>
-    </div>
+    </BaseDialog>
   );
 }
 
@@ -409,6 +410,7 @@ export function EditProfileDrawer({
             Cancel
           </button>
           <button
+            type="button"
             onClick={() => void handleSubmit()}
             disabled={!canSubmit}
             className="px-5 py-2.5 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold disabled:opacity-dim disabled:cursor-not-allowed transition-all flex items-center gap-2"
@@ -547,6 +549,7 @@ function ChangePasswordDrawer({
             Cancel
           </button>
           <button
+            type="button"
             onClick={() => void handleSubmit()}
             disabled={!canSubmit}
             className="px-5 py-2.5 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold disabled:opacity-dim disabled:cursor-not-allowed transition-all flex items-center gap-2"
@@ -633,6 +636,7 @@ export default function Profile() {
         description="Manage your account details and security settings"
       >
         <button
+          type="button"
           onClick={openEdit}
           className="px-4 py-2.5 bg-hover-strong hover:bg-hover-strong text-text-primary border border-border hover:border-border-light rounded-lg text-sm font-medium transition-all flex items-center gap-2"
         >
@@ -702,6 +706,7 @@ export default function Profile() {
             description="Credentials used to authenticate into your account"
           >
             <button
+              type="button"
               onClick={() => setPwDrawerOpen(true)}
               className="px-4 py-2 bg-hover-strong hover:bg-hover-strong text-text-primary border border-border hover:border-border-light rounded-lg text-sm font-medium transition-all"
             >
@@ -724,6 +729,7 @@ export default function Profile() {
             >
               {mfaEnabled ? (
                 <button
+                  type="button"
                   onClick={() => setMfaDisableOpen(true)}
                   className="px-4 py-2 bg-hover-strong hover:bg-hover-strong text-text-primary border border-border hover:border-border-light rounded-lg text-sm font-medium transition-all"
                 >
@@ -731,6 +737,7 @@ export default function Profile() {
                 </button>
               ) : (
                 <button
+                  type="button"
                   onClick={() => setMfaEnableOpen(true)}
                   className="px-4 py-2 bg-hover-strong hover:bg-hover-strong text-text-primary border border-border hover:border-border-light rounded-lg text-sm font-medium transition-all"
                 >
@@ -773,6 +780,7 @@ export default function Profile() {
             }
           >
             <button
+              type="button"
               onClick={() => setDeleteDialogOpen(true)}
               data-test="delete-account-btn"
               className="px-4 py-2 bg-accent-red/10 hover:bg-accent-red/20 text-accent-red border border-accent-red/20 hover:border-accent-red/40 rounded-lg text-sm font-medium transition-all"
diff --git a/ui-react/apps/console/src/pages/SessionDetails.tsx b/ui-react/apps/console/src/pages/SessionDetails.tsx
index e6a2eb71c15..27c5907b584 100644
--- a/ui-react/apps/console/src/pages/SessionDetails.tsx
+++ b/ui-react/apps/console/src/pages/SessionDetails.tsx
@@ -35,6 +35,7 @@ import { formatDateFull, formatRelative, formatDuration } from "../utils/date";
 import type { Session } from "../client";
 import RestrictedAction from "../components/common/RestrictedAction";
 import PageLoader from "@/components/common/PageLoader";
+import ConfirmDialog from "../components/common/ConfirmDialog";
 
 /* ── timeline builder ────────────────────────────── */
 
@@ -309,6 +310,8 @@ export default function SessionDetails() {
   const [showClose, setShowClose] = useState(false);
   const [showPlayer, setShowPlayer] = useState(false);
   const [showDeleteLogs, setShowDeleteLogs] = useState(false);
+  const [deleteLogsError, setDeleteLogsError] = useState<string | null>(null);
+  const [closeError, setCloseError] = useState<string | null>(null);
 
   const handlePlayRecording = async () => {
     const ok = await fetchLogs(uid!);
@@ -318,16 +321,18 @@ export default function SessionDetails() {
   };
 
   const handleDeleteLogs = async () => {
+    setDeleteLogsError(null);
     try {
       await deleteRecording.mutateAsync(uid!);
       setShowDeleteLogs(false);
     } catch {
-      // error surfaced via deleteRecording.error
+      setDeleteLogsError("Failed to delete recording. Check your permissions.");
     }
   };
 
   const handleClose = async () => {
     if (!uid || !session) return;
+    setCloseError(null);
     try {
       await closeSession.mutateAsync({
         path: { uid },
@@ -335,7 +340,7 @@ export default function SessionDetails() {
       });
       setShowClose(false);
     } catch {
-      // error is available via closeSession.error
+      setCloseError("Failed to close session. Check your permissions.");
     }
   };
 
@@ -349,6 +354,7 @@ export default function SessionDetails() {
         <XCircleIcon className="w-8 h-8 text-accent-red/60" />
         <p className="text-sm font-mono text-text-muted">{error.message}</p>
         <button
+          type="button"
           onClick={() => void navigate("/sessions")}
           className="text-xs font-mono text-primary hover:underline"
         >
@@ -421,6 +427,7 @@ export default function SessionDetails() {
               {session.active && (
                 <RestrictedAction action="session:close">
                   <button
+                    type="button"
                     onClick={() => setShowClose(true)}
                     className="flex items-center gap-1.5 px-2.5 py-1 border border-accent-red/30 text-accent-red hover:bg-accent-red/10 rounded-md text-2xs font-mono font-medium transition-all"
                   >
@@ -439,6 +446,7 @@ export default function SessionDetails() {
             <>
               <RestrictedAction action="session:play">
                 <button
+                  type="button"
                   onClick={() => void handlePlayRecording()}
                   disabled={logsLoading}
                   className="flex items-center gap-2 px-4 py-2.5 bg-primary/90 hover:bg-primary text-white rounded-lg text-sm font-semibold disabled:opacity-dim transition-all"
@@ -449,6 +457,7 @@ export default function SessionDetails() {
               </RestrictedAction>
               <RestrictedAction action="session:removeRecord">
                 <button
+                  type="button"
                   onClick={() => setShowDeleteLogs(true)}
                   className="p-2.5 rounded-lg text-text-muted hover:text-accent-red hover:bg-accent-red/10 border border-border transition-all"
                   title="Delete recording"
@@ -461,6 +470,7 @@ export default function SessionDetails() {
           {session.active && (
             <RestrictedAction action="session:close">
               <button
+                type="button"
                 onClick={() => setShowClose(true)}
                 className="flex items-center gap-2 px-4 py-2.5 bg-surface hover:bg-hover-subtle text-accent-red border border-accent-red/30 rounded-lg text-sm font-semibold transition-all"
               >
@@ -576,116 +586,46 @@ export default function SessionDetails() {
       </div>
 
       {/* Delete Recording Dialog */}
-      {showDeleteLogs && (
-        <div className="fixed inset-0 z-[70] flex items-center justify-center">
-          <div
-            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-            onClick={() => setShowDeleteLogs(false)}
-          />
-          <div className="relative bg-surface border border-border rounded-2xl w-full max-w-sm mx-4 p-6 shadow-2xl animate-slide-up">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 rounded-full bg-accent-red/10 border border-accent-red/20 flex items-center justify-center shrink-0">
-                <TrashIcon
-                  className="w-5 h-5 text-accent-red"
-                  strokeWidth={2}
-                />
-              </div>
-              <div>
-                <h2 className="text-base font-semibold text-text-primary">
-                  Delete Recording
-                </h2>
-                <p className="text-xs text-text-muted mt-0.5">
-                  This action cannot be undone
-                </p>
-              </div>
-            </div>
-            <p className="text-sm text-text-muted mb-6">
-              Are you sure you want to delete the session recording? The
-              recording will be permanently removed.
-            </p>
-            {deleteRecording.error != null && (
-              <p className="text-xs text-accent-red mb-4 font-mono">
-                Failed to delete recording. Check your permissions.
-              </p>
-            )}
-            <div className="flex justify-end gap-2">
-              <button
-                onClick={() => setShowDeleteLogs(false)}
-                className="px-4 py-2.5 text-sm font-medium text-text-secondary hover:text-text-primary rounded-lg hover:bg-card transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={() => void handleDeleteLogs()}
-                disabled={deleteRecording.isPending}
-                className="px-5 py-2.5 bg-accent-red/90 hover:bg-accent-red text-white rounded-lg text-sm font-semibold disabled:opacity-50 transition-all"
-              >
-                {deleteRecording.isPending ? "Deleting…" : "Delete Recording"}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      <ConfirmDialog
+        open={showDeleteLogs}
+        onClose={() => {
+          setShowDeleteLogs(false);
+          setDeleteLogsError(null);
+        }}
+        onConfirm={handleDeleteLogs}
+        title="Delete Recording"
+        description="Are you sure you want to delete the session recording? The recording will be permanently removed."
+        confirmLabel="Delete Recording"
+        variant="danger"
+        errorMessage={deleteLogsError}
+      />
 
       {/* Close Session Dialog */}
-      {showClose && (
-        <div className="fixed inset-0 z-[70] flex items-center justify-center">
-          <div
-            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-            onClick={() => setShowClose(false)}
-          />
-          <div className="relative bg-surface border border-border rounded-2xl w-full max-w-sm mx-4 p-6 shadow-2xl animate-slide-up">
-            <div className="flex items-center gap-3 mb-4">
-              <div className="w-10 h-10 rounded-full bg-accent-red/10 border border-accent-red/20 flex items-center justify-center shrink-0">
-                <XCircleIcon
-                  className="w-5 h-5 text-accent-red"
-                  strokeWidth={2}
-                />
-              </div>
-              <div>
-                <h2 className="text-base font-semibold text-text-primary">
-                  Close Session
-                </h2>
-                <p className="text-xs text-text-muted mt-0.5">
-                  This will terminate the SSH connection
-                </p>
-              </div>
-            </div>
-            <p className="text-sm text-text-muted mb-6">
-              Are you sure you want to close the session for{" "}
-              <span className="font-medium text-text-primary">
-                {session.username}
-              </span>{" "}
-              on{" "}
-              <span className="font-medium text-text-primary">
-                {session.device?.name ??
-                  (session.device_uid ?? "").substring(0, 8)}
-              </span>
-              ?
-            </p>
-            {closeSession.error != null && (
-              <p className="text-xs text-accent-red mb-4 font-mono">
-                Failed to close session. Check your permissions.
-              </p>
-            )}
-            <div className="flex justify-end gap-2">
-              <button
-                onClick={() => setShowClose(false)}
-                className="px-4 py-2.5 text-sm font-medium text-text-secondary hover:text-text-primary rounded-lg hover:bg-hover-subtle transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={() => void handleClose()}
-                disabled={closeSession.isPending}
-                className="px-5 py-2.5 bg-accent-red/90 hover:bg-accent-red text-white rounded-lg text-sm font-semibold disabled:opacity-dim transition-all"
-              >
-                {closeSession.isPending ? "Closing…" : "Close Session"}
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
+      <ConfirmDialog
+        open={showClose}
+        onClose={() => {
+          setShowClose(false);
+          setCloseError(null);
+        }}
+        onConfirm={handleClose}
+        title="Close Session"
+        description={
+          <>
+            Are you sure you want to close the session for{" "}
+            <span className="font-medium text-text-primary">
+              {session.username}
+            </span>{" "}
+            on{" "}
+            <span className="font-medium text-text-primary">
+              {session.device?.name ?? (session.device_uid ?? "").substring(0, 8)}
+            </span>
+            ?
+          </>
+        }
+        confirmLabel="Close Session"
+        variant="danger"
+        errorMessage={closeError}
+      />
 
       {/* Recording error banner */}
       {logsError && (
diff --git a/ui-react/apps/console/src/pages/Settings.tsx b/ui-react/apps/console/src/pages/Settings.tsx
index cdc1d4d1708..a157b0ddacc 100644
--- a/ui-react/apps/console/src/pages/Settings.tsx
+++ b/ui-react/apps/console/src/pages/Settings.tsx
@@ -154,6 +154,7 @@ function EditNameDrawer({
             Cancel
           </button>
           <button
+            type="button"
             onClick={() => void handleSubmit()}
             disabled={!canSubmit}
             className="px-5 py-2.5 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold disabled:opacity-dim disabled:cursor-not-allowed transition-all flex items-center gap-2"
@@ -471,6 +472,7 @@ export default function Settings() {
               </span>
               {canRename && (
                 <button
+                  type="button"
                   onClick={() => setEditNameOpen(true)}
                   className="p-1.5 rounded-md text-text-muted hover:text-text-primary hover:bg-hover-medium transition-colors"
                   title="Rename"
@@ -609,6 +611,7 @@ export default function Settings() {
               description="Permanently removes all devices, sessions, keys, and configuration. This cannot be undone."
             >
               <button
+                type="button"
                 onClick={() => setDeleteOpen(true)}
                 className="px-4 py-2 bg-accent-red/10 hover:bg-accent-red/20 text-accent-red border border-accent-red/20 rounded-lg text-sm font-semibold transition-all"
               >
@@ -624,6 +627,7 @@ export default function Settings() {
               description="You will lose access immediately. To rejoin, someone will need to invite you again."
             >
               <button
+                type="button"
                 onClick={() => setLeaveOpen(true)}
                 className="px-4 py-2 bg-accent-red/10 hover:bg-accent-red/20 text-accent-red border border-accent-red/20 rounded-lg text-sm font-semibold transition-all"
               >
diff --git a/ui-react/apps/console/src/pages/__tests__/MfaRecover.test.tsx b/ui-react/apps/console/src/pages/__tests__/MfaRecover.test.tsx
index 4ca53c1de7c..e656532c89d 100644
--- a/ui-react/apps/console/src/pages/__tests__/MfaRecover.test.tsx
+++ b/ui-react/apps/console/src/pages/__tests__/MfaRecover.test.tsx
@@ -8,6 +8,8 @@ vi.mock("@/client", () => ({
   disableMfa: vi.fn(),
 }));
 
+vi.mock("@/hooks/useFocusTrap", () => ({ useFocusTrap: vi.fn() }));
+
 import { disableMfa } from "@/client";
 const mockedDisableMfa = vi.mocked(disableMfa);
 
diff --git a/ui-react/apps/console/src/pages/admin/namespaces/EditNamespaceDrawer.tsx b/ui-react/apps/console/src/pages/admin/namespaces/EditNamespaceDrawer.tsx
index 386d5e5176b..92014431cd2 100644
--- a/ui-react/apps/console/src/pages/admin/namespaces/EditNamespaceDrawer.tsx
+++ b/ui-react/apps/console/src/pages/admin/namespaces/EditNamespaceDrawer.tsx
@@ -95,6 +95,7 @@ export default function EditNamespaceDrawer({
             Cancel
           </button>
           <button
+            type="button"
             onClick={() => void handleSubmit()}
             disabled={!canSubmit || editNamespace.isPending}
             className="px-5 py-2.5 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold disabled:opacity-dim disabled:cursor-not-allowed transition-all flex items-center gap-2"
diff --git a/ui-react/apps/console/src/pages/admin/users/CreateUserDrawer.tsx b/ui-react/apps/console/src/pages/admin/users/CreateUserDrawer.tsx
index 9c70ec41e9a..52f88cffb35 100644
--- a/ui-react/apps/console/src/pages/admin/users/CreateUserDrawer.tsx
+++ b/ui-react/apps/console/src/pages/admin/users/CreateUserDrawer.tsx
@@ -57,6 +57,7 @@ export default function CreateUserDrawer({
             Cancel
           </button>
           <button
+            type="button"
             onClick={() => void handleSubmit()}
             disabled={!form.isSubmittable || createUser.isPending}
             className="px-5 py-2.5 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold disabled:opacity-dim disabled:cursor-not-allowed transition-all flex items-center gap-2"
diff --git a/ui-react/apps/console/src/pages/admin/users/EditUserDrawer.tsx b/ui-react/apps/console/src/pages/admin/users/EditUserDrawer.tsx
index 0816dab430e..ecee4a2e3f4 100644
--- a/ui-react/apps/console/src/pages/admin/users/EditUserDrawer.tsx
+++ b/ui-react/apps/console/src/pages/admin/users/EditUserDrawer.tsx
@@ -71,6 +71,7 @@ export default function EditUserDrawer({
             Cancel
           </button>
           <button
+            type="button"
             onClick={() => void handleSubmit()}
             disabled={!form.isSubmittable || updateUser.isPending}
             className="px-5 py-2.5 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold disabled:opacity-dim disabled:cursor-not-allowed transition-all flex items-center gap-2"
diff --git a/ui-react/apps/console/src/pages/team/AddMemberDrawer.tsx b/ui-react/apps/console/src/pages/team/AddMemberDrawer.tsx
index 376393606ca..9636f65f72f 100644
--- a/ui-react/apps/console/src/pages/team/AddMemberDrawer.tsx
+++ b/ui-react/apps/console/src/pages/team/AddMemberDrawer.tsx
@@ -74,6 +74,7 @@ function AddMemberDrawer({
             Cancel
           </button>
           <button
+            type="button"
             onClick={() => void handleSubmit()}
             disabled={!emailValid || submitting}
             className="px-5 py-2.5 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold disabled:opacity-dim disabled:cursor-not-allowed transition-all flex items-center gap-2"
diff --git a/ui-react/apps/console/src/pages/team/GenerateKeyDrawer.tsx b/ui-react/apps/console/src/pages/team/GenerateKeyDrawer.tsx
index 5d06f4ebeda..b0ffd2a3343 100644
--- a/ui-react/apps/console/src/pages/team/GenerateKeyDrawer.tsx
+++ b/ui-react/apps/console/src/pages/team/GenerateKeyDrawer.tsx
@@ -91,6 +91,7 @@ function GenerateKeyDrawer({
       footer={
         generatedKey ? (
           <button
+            type="button"
             onClick={onClose}
             className="px-5 py-2.5 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all"
           >
@@ -106,6 +107,7 @@ function GenerateKeyDrawer({
               Cancel
             </button>
             <button
+              type="button"
               onClick={() => void handleSubmit()}
               disabled={submitting || !!nameError || !name.trim()}
               className="px-5 py-2.5 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold disabled:opacity-dim disabled:cursor-not-allowed transition-all flex items-center gap-2"
diff --git a/ui-react/apps/console/src/pages/team/InvitationDrawer.tsx b/ui-react/apps/console/src/pages/team/InvitationDrawer.tsx
index a50d2833f06..4e0f6ee8709 100644
--- a/ui-react/apps/console/src/pages/team/InvitationDrawer.tsx
+++ b/ui-react/apps/console/src/pages/team/InvitationDrawer.tsx
@@ -135,6 +135,7 @@ function InvitationDrawer({
       footer={
         done ? (
           <button
+            type="button"
             onClick={handleClose}
             className="px-5 py-2.5 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold transition-all"
           >
@@ -150,6 +151,7 @@ function InvitationDrawer({
               Cancel
             </button>
             <button
+              type="button"
               onClick={() => void handleSubmit()}
               disabled={!emailValid || submitting}
               className="px-5 py-2.5 bg-primary hover:bg-primary-600 text-white rounded-lg text-sm font-semibold disabled:opacity-dim disabled:cursor-not-allowed transition-all flex items-center gap-2"
diff --git a/ui-react/apps/console/src/test/setup.ts b/ui-react/apps/console/src/test/setup.ts
index 7cf3bd6c280..067fa8e2fa5 100644
--- a/ui-react/apps/console/src/test/setup.ts
+++ b/ui-react/apps/console/src/test/setup.ts
@@ -3,3 +3,11 @@ import { afterEach } from "vitest";
 import { cleanup } from "@testing-library/react";
 
 afterEach(cleanup);
+
+HTMLDialogElement.prototype.showModal = function (this: HTMLDialogElement) {
+  this.setAttribute("open", "");
+};
+
+HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
+  this.removeAttribute("open");
+};