fix(confirm-dialog): allow form submission on confirmation (#288)

* fix(confirm-dialog): allow form submission on confirmation

Modified ConfirmDialog component to accept a form prop, allowing
for form-based confirmation handling. Updated UsersDeleteDialog,
UsersMultiDeleteDialog and TasksMultiDeleteDialog to utilize
the new form functionality,allowing users to delete users by
pressing Enter key.

src/components/confirm-dialog.tsx

@@ -19,11 +19,13 @@ type ConfirmDialogProps = {
   cancelBtnText?: string
   confirmText?: React.ReactNode
   destructive?: boolean
-  handleConfirm: () => void
   isLoading?: boolean
   className?: string
   children?: React.ReactNode
-}
+} & (
+  | { form: string; handleConfirm?: undefined }
+  | { form?: undefined; handleConfirm: () => void }
+)
 
 export function ConfirmDialog(props: ConfirmDialogProps) {
   const {
@@ -36,6 +38,7 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
     destructive,
     isLoading,
     disabled = false,
+    form,
     handleConfirm,
     ...actions
   } = props
@@ -54,8 +57,10 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
             {cancelBtnText ?? 'Cancel'}
           </AlertDialogCancel>
           <Button
-            variant={destructive ? 'destructive' : 'default'}
+            type={form ? 'submit' : 'button'}
+            form={form}
             onClick={handleConfirm}
+            variant={destructive ? 'destructive' : 'default'}
             disabled={disabled || isLoading}
           >
             {confirmText ?? 'Continue'}

src/features/tasks/components/tasks-multi-delete-dialog.tsx

@@ -52,7 +52,7 @@ export function TasksMultiDeleteDialog<TData>({
     <ConfirmDialog
       open={open}
       onOpenChange={onOpenChange}
-      handleConfirm={handleDelete}
+      form='tasks-multi-delete-form'
       disabled={value.trim() !== CONFIRM_WORD}
       title={
         <span className='text-destructive'>
@@ -65,7 +65,14 @@ export function TasksMultiDeleteDialog<TData>({
         </span>
       }
       desc={
-        <div className='space-y-4'>
+        <form
+          id='tasks-multi-delete-form'
+          onSubmit={(e) => {
+            e.preventDefault()
+            handleDelete()
+          }}
+          className='space-y-4'
+        >
           <p className='mb-2'>
             Are you sure you want to delete the selected tasks? <br />
             This action cannot be undone.
@@ -77,6 +84,7 @@ export function TasksMultiDeleteDialog<TData>({
               value={value}
               onChange={(e) => setValue(e.target.value)}
               placeholder={`Type "${CONFIRM_WORD}" to confirm.`}
+              autoFocus
             />
           </Label>
 
@@ -86,7 +94,7 @@ export function TasksMultiDeleteDialog<TData>({
               Please be careful, this operation can not be rolled back.
             </AlertDescription>
           </Alert>
-        </div>
+        </form>
       }
       confirmText='Delete'
       destructive

src/features/users/components/users-delete-dialog.tsx

@@ -33,7 +33,7 @@ export function UsersDeleteDialog({
     <ConfirmDialog
       open={open}
       onOpenChange={onOpenChange}
-      handleConfirm={handleDelete}
+      form='users-delete-form'
       disabled={value.trim() !== currentRow.username}
       title={
         <span className='text-destructive'>
@@ -45,7 +45,14 @@ export function UsersDeleteDialog({
         </span>
       }
       desc={
-        <div className='space-y-4'>
+        <form
+          id='users-delete-form'
+          onSubmit={(e) => {
+            e.preventDefault()
+            handleDelete()
+          }}
+          className='space-y-4'
+        >
           <p className='mb-2'>
             Are you sure you want to delete{' '}
             <span className='font-bold'>{currentRow.username}</span>?
@@ -63,6 +70,7 @@ export function UsersDeleteDialog({
               value={value}
               onChange={(e) => setValue(e.target.value)}
               placeholder='Enter username to confirm deletion.'
+              autoFocus
             />
           </Label>
 
@@ -72,7 +80,7 @@ export function UsersDeleteDialog({
               Please be careful, this operation can not be rolled back.
             </AlertDescription>
           </Alert>
-        </div>
+        </form>
       }
       confirmText='Delete'
       destructive

src/features/users/components/users-multi-delete-dialog.tsx

@@ -52,7 +52,7 @@ export function UsersMultiDeleteDialog<TData>({
     <ConfirmDialog
       open={open}
       onOpenChange={onOpenChange}
-      handleConfirm={handleDelete}
+      form='users-multi-delete-form'
       disabled={value.trim() !== CONFIRM_WORD}
       title={
         <span className='text-destructive'>
@@ -65,7 +65,14 @@ export function UsersMultiDeleteDialog<TData>({
         </span>
       }
       desc={
-        <div className='space-y-4'>
+        <form
+          id='users-multi-delete-form'
+          onSubmit={(e) => {
+            e.preventDefault()
+            handleDelete()
+          }}
+          className='space-y-4'
+        >
           <p className='mb-2'>
             Are you sure you want to delete the selected users? <br />
             This action cannot be undone.
@@ -77,6 +84,7 @@ export function UsersMultiDeleteDialog<TData>({
               value={value}
               onChange={(e) => setValue(e.target.value)}
               placeholder={`Type "${CONFIRM_WORD}" to confirm.`}
+              autoFocus
             />
           </Label>
 
@@ -86,7 +94,7 @@ export function UsersMultiDeleteDialog<TData>({
               Please be careful, this operation can not be rolled back.
             </AlertDescription>
           </Alert>
-        </div>
+        </form>
       }
       confirmText='Delete'
       destructive