diff --git a/adminforth/spa/src/afcl/Dialog.vue b/adminforth/spa/src/afcl/Dialog.vue
index d61303858..2339ae3e0 100644
--- a/adminforth/spa/src/afcl/Dialog.vue
+++ b/adminforth/spa/src/afcl/Dialog.vue
@@ -5,6 +5,7 @@
     :closeByClickOutside="clickToCloseOutside || closeByClickOutside"
     :closeByEsc="closeByEsc || closable"
     :beforeCloseFunction="beforeCloseFunction"
+    :beforeCancelFunction="beforeCancelFunction" 
     :beforeOpenFunction="beforeOpenFunction"
     :askForCloseConfirmation="askForCloseConfirmation"
     :closeConfirmationText="closeConfirmationText"
@@ -26,7 +27,7 @@
         v-if="headerCloseButton"
         type="button"
         class="text-lightDialogCloseButton bg-transparent hover:bg-lightDialogCloseButtonHoverBackground hover:text-lightDialogCloseButtonHover rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:text-darkDialogCloseButton dark:hover:bg-darkDialogCloseButtonHoverBackground dark:hover:text-darkDialogCloseButtonHover"
-        @click="tryToHideModal"
+        @click="tryToCancelModal"
       >
         <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
@@ -118,10 +119,15 @@ function close() {
   modalRef.value.close();
 }
 
+function tryToCancelModal() {
+  modalRef.value?.cancel();
+}
+
 defineExpose({
   open: open,
   close: close,
   tryToHideModal: tryToHideModal,
+  tryToCancelModal: tryToCancelModal,
 })
 
 function tryToHideModal() {
@@ -171,6 +177,11 @@ interface DialogProps {
    */
   beforeOpenFunction?: (() => void | Promise<void>) | null
 
+  /**
+  * Function that will be called before the dialog is canceled. 
+  */
+  beforeCancelFunction?: (() => void | Promise<void | boolean>) | null
+
   /**
    * Disables close on Ecs button
    * 
@@ -201,19 +212,21 @@ interface DialogProps {
 
 /**********  for the backward compatibility  ***************/
 class Dialog implements IDialogInsideButtonClickHandler {
-  hide: () => void
-  constructor( hide: () => void ) {
-    this.hide = hide;
+  hide: (isCancel?: boolean) => void
+  constructor(hideFn: (isCancel?: boolean) => void) {
+    this.hide = hideFn;
   }
 }
 const dialog: Ref<Dialog> = ref(
-  new Dialog(
-    () => {
-      if (dialog.value) {
-        tryToHideModal();
+  new Dialog((isCancel = false) => {
+    if (dialog.value) {
+      if (isCancel) {
+        modalRef.value?.cancel();
+      } else {
+        modalRef.value?.close();
       }
     }
-  )
+  })
 );
 /*************************************************************/
 
diff --git a/adminforth/spa/src/afcl/Modal.vue b/adminforth/spa/src/afcl/Modal.vue
index f41845b64..443e70789 100644
--- a/adminforth/spa/src/afcl/Modal.vue
+++ b/adminforth/spa/src/afcl/Modal.vue
@@ -70,6 +70,7 @@ interface DialogProps {
   closeByEsc?: boolean
   beforeCloseFunction?: (() => void | Promise<void | boolean>) | null
   beforeOpenFunction?: (() => void | Promise<void>) | null
+  beforeCancelFunction?: (() => void | Promise<void | boolean>) | null
   askForCloseConfirmation?: boolean
   closeConfirmationText?: string
   removeFromDomOnClose?: boolean
@@ -82,6 +83,7 @@ const props = withDefaults(defineProps<DialogProps>(), {
   closeByEsc: true,
   beforeCloseFunction: null,
   beforeOpenFunction: null,
+  beforeCancelFunction: null,
   askForCloseConfirmation: false,
   closeConfirmationText: 'Are you sure you want to close this dialog?',
   removeFromDomOnClose: false,
@@ -109,6 +111,14 @@ async function close() {
   isModalOpen.value = false;
 }
 
+async function cancel() {
+  if (props.beforeCancelFunction) {
+    const shouldCancel = await props.beforeCancelFunction?.();
+    if (shouldCancel === false) return;
+  }
+  isModalOpen.value = false;
+}
+
 defineOptions({
   inheritAttrs: false,
 })
@@ -116,12 +126,17 @@ defineOptions({
 defineExpose({
   open: open,
   close: close,
+  cancel: cancel,
   tryToHideModal: tryToHideModal,
 })
 
-function tryToHideModal() {
-  if (!props.askForCloseConfirmation ) {
-    close();
+function tryToHideModal(isCancelAction = false) {
+  if (!props.askForCloseConfirmation) {
+    if (isCancelAction) {
+      cancel();
+    } else {
+      close();
+    }
   } else {
     showConfirmationOnClose.value = true;
   }
@@ -136,10 +151,8 @@ function toggleModal() {
 }
 
 function onEsc(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    if (props.closeByEsc) {
-      tryToHideModal();
-    }
+  if (event.key === 'Escape' && props.closeByEsc) {
+    tryToHideModal(true);
   }
 }
 
@@ -154,7 +167,7 @@ onUnmounted(() => {
 
 function backdropClick(e: MouseEvent) {
   if (props.closeByClickOutside && e.target === e.currentTarget) {
-    tryToHideModal();
+    tryToHideModal(true);
   }
 }