From 6d6f573760f5e3e4892c7d74c7b33abd5762700c Mon Sep 17 00:00:00 2001
From: LN <leonelngoya@gmail.com>
Date: Tue, 28 Nov 2023 02:08:52 +0100
Subject: [PATCH] Reinforce security when deleting a form

---
 components/cards/card-form.tsx | 39 ----------------------------------
 components/form/settings.tsx   | 27 ++++++++++++++++++++---
 2 files changed, 24 insertions(+), 42 deletions(-)

diff --git a/components/cards/card-form.tsx b/components/cards/card-form.tsx
index 4bb520f..3b33800 100644
--- a/components/cards/card-form.tsx
+++ b/components/cards/card-form.tsx
@@ -256,45 +256,6 @@ export default function CardForm({
                   </button>
                 </AlertDialogFooter>
               </AlertDialogContent>
-            </AlertDialog>{" "}
-            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button
-                  variant="destructive"
-                  className="h-10 w-10 rounded-full p-0"
-                >
-                  <Trash className="h-4 w-4" />
-                </Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>
-                    Are you sure you want to delete this form ?
-                  </AlertDialogTitle>
-                  <AlertDialogDescription>
-                    This action is irreversible, please reflect beforehand.
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
-                  <button
-                    className={cn(
-                      "inline-flex h-10 items-center justify-center rounded-md bg-red-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-red-600 dark:hover:bg-slate-200 dark:hover:text-slate-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
-                    )}
-                    disabled={isLoadingDelete}
-                    onClick={
-                      !isLoadingDelete ? handleDeleteDocument : undefined
-                    }
-                  >
-                    {isLoadingDelete ? (
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    ) : (
-                      <Trash className="mr-2 h-4 w-4" />
-                    )}
-                    Delete
-                  </button>
-                </AlertDialogFooter>
-              </AlertDialogContent>
             </AlertDialog>
           </div>
         </PopoverContent>
diff --git a/components/form/settings.tsx b/components/form/settings.tsx
index 9e868d9..7f34ac5 100644
--- a/components/form/settings.tsx
+++ b/components/form/settings.tsx
@@ -197,6 +197,7 @@ export default function SettingsForms({ dataForm }: { dataForm: any }) {
   const { deleteDocument, isLoading: isLoadingDelete }: any =
     useDeleteDocument("forms")
 
+  const [confirmFormName, setConfirmFormName] = useState("")
   const handleDeleteDocument = () => {
     deleteDocument(id)
     index.deleteObject(id)
@@ -448,8 +449,26 @@ export default function SettingsForms({ dataForm }: { dataForm: any }) {
                   <AlertDialogTitle>
                     Are you sure you want to delete this form ?
                   </AlertDialogTitle>
-                  <AlertDialogDescription>
-                    This action is irreversible, please reflect beforehand.
+                  <AlertDialogDescription className="space-y-3">
+                    <div
+                      className="rounded-lg bg-red-50 p-4 text-sm text-red-800 dark:bg-gray-800 dark:text-red-400 font-semibold"
+                      role="alert"
+                    >
+                      This action is irreversible, please reflect beforehand.
+                    </div>
+                    <div className="space-y-2">
+                      <p>
+                        Enter the form name{" "}
+                        <span className="font-bold">{dataForm.name}</span> to
+                        continue:
+                      </p>
+                      <Input
+                        onChange={(e) => {
+                          setConfirmFormName(e.target.value)
+                        }}
+                        className=""
+                      />
+                    </div>
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
@@ -458,7 +477,9 @@ export default function SettingsForms({ dataForm }: { dataForm: any }) {
                     className={cn(
                       "inline-flex h-10 items-center justify-center rounded-md bg-red-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-red-600 dark:hover:bg-slate-200 dark:hover:text-slate-900 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
                     )}
-                    disabled={isLoadingDelete}
+                    disabled={
+                      isLoadingDelete || confirmFormName !== dataForm.name
+                    }
                     onClick={
                       !isLoadingDelete ? handleDeleteDocument : undefined
                     }