Feature: Create a new useFormBlocker hook to block the user from closing a dialog or navigating away from a page if the form is dirty (#2654)

* feat: add useFormBlocker hook for dialog dirty state protection

* feat: add useFormBlocker hook for dialog dirty state protection

- Create useFormBlocker hook that blocks dialog closing when forms have unsaved changes
- Use onPointerDownOutside and onEscapeKeyDown to intercept close attempts
- Show confirmation dialog with Leave/Stay options using useConfirm
- Integrate with CreateResumeDialog, UpdateResumeDialog, and DuplicateResumeDialog
- All strings are translatable via Lingui

* Feature: Create a new `useFormBlocker` hook to block the user from closing a dialog or navigating away from a page if the form is dirty.

src/dialogs/auth/disable-two-factor.tsx

@@ -11,6 +11,7 @@ import { Button } from "@/components/ui/button";
 import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { useFormBlocker } from "@/hooks/use-form-blocker";
 import { authClient } from "@/integrations/auth/client";
 import { type DialogProps, useDialogStore } from "../store";
 
@@ -32,6 +33,8 @@ export function DisableTwoFactorDialog(_: DialogProps<"auth.two-factor.disable">
 		},
 	});
 
+	const { blockEvents } = useFormBlocker(form);
+
 	const onSubmit = async (data: FormValues) => {
 		const toastId = toast.loading(t`Disabling two-factor authentication...`);
 
@@ -49,7 +52,7 @@ export function DisableTwoFactorDialog(_: DialogProps<"auth.two-factor.disable">
 	};
 
 	return (
-		<DialogContent>
+		<DialogContent {...blockEvents}>
 			<DialogHeader>
 				<DialogTitle className="flex items-center gap-x-2">
 					<LockOpenIcon />