diff --git a/package-lock.json b/package-lock.json
index 87371210..f408b5b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,9 +32,9 @@
         "cypress-real-events": "=1.12.0",
         "eslint": "=8.57.0",
         "eslint-config-airbnb-base": "=15.0.0",
-        "eslint-plugin-cypress": "=3.2.0",
+        "eslint-plugin-cypress": "=3.3.0",
         "eslint-plugin-import": "=2.29.1",
-        "eslint-plugin-jsdoc": "=48.2.5",
+        "eslint-plugin-jsdoc": "=48.2.7",
         "eslint-plugin-vue": "=9.26.0",
         "gherkin-lint": "=4.2.4",
         "jsdoc": "=4.0.3",
@@ -2821,9 +2821,9 @@
       }
     },
     "node_modules/@es-joy/jsdoccomment": {
-      "version": "0.43.0",
-      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.43.0.tgz",
-      "integrity": "sha512-Q1CnsQrytI3TlCB1IVWXWeqUIPGVEKGaE7IbVdt13Nq/3i0JESAkQQERrfiQkmlpijl+++qyqPgaS31Bvc1jRQ==",
+      "version": "0.43.1",
+      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.43.1.tgz",
+      "integrity": "sha512-I238eDtOolvCuvtxrnqtlBaw0BwdQuYqK7eA6XIonicMdOOOb75mqdIzkGDUbS04+1Di007rgm9snFRNeVrOog==",
       "dev": true,
       "dependencies": {
         "@types/eslint": "^8.56.5",
@@ -4435,9 +4435,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.10.0.tgz",
-      "integrity": "sha512-7fNj+Ya35aNyhuqrA1E/VayQX9Elwr8NKZ4WueClR3KwJ7Xx9jcCdOrLW04h51de/+gNbyFMs+IDxh5xIwfbNg==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.11.0.tgz",
+      "integrity": "sha512-MPEsDRZTyCiXkD4vd3zywDCifi7tatc4K37KqTprCvaXptP7Xlpdw0NR2hRJTetG5TxbWDB79Ys4kLmHliEo/w==",
       "dev": true,
       "engines": {
         "node": "^18.18.0 || >=20.0.0"
@@ -5911,18 +5911,6 @@
       "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==",
       "dev": true
     },
-    "node_modules/builtin-modules": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
-      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -8332,9 +8320,9 @@
       }
     },
     "node_modules/eslint-plugin-cypress": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-3.2.0.tgz",
-      "integrity": "sha512-HaxMz6BoU4ay+K4WrG9ZJC1NdX06FqSlAwtRDStjM0ORFT7zCNPNuRJ+kUPc17Rt2AMUBSqeD9L0zTR3uZhPpw==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-3.3.0.tgz",
+      "integrity": "sha512-HPHMPzYBIshzJM8wqgKSKHG2p/8R0Gbg4Pb3tcdC9WrmkuqxiKxSKbjunUrajhV5l7gCIFrh1P7C7GuBqH6YuQ==",
       "dev": true,
       "dependencies": {
         "globals": "^13.20.0"
@@ -8432,19 +8420,18 @@
       }
     },
     "node_modules/eslint-plugin-jsdoc": {
-      "version": "48.2.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.2.5.tgz",
-      "integrity": "sha512-ZeTfKV474W1N9niWfawpwsXGu+ZoMXu4417eBROX31d7ZuOk8zyG66SO77DpJ2+A9Wa2scw/jRqBPnnQo7VbcQ==",
+      "version": "48.2.7",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.2.7.tgz",
+      "integrity": "sha512-fYj3roTnkFL9OFFTB129rico8lerC5G8Vp2ZW9SjO9RNWG0exVvI+i/Y8Bpm1ufjR0uvT38xtoab/U0Hp8Ybog==",
       "dev": true,
       "dependencies": {
-        "@es-joy/jsdoccomment": "~0.43.0",
+        "@es-joy/jsdoccomment": "~0.43.1",
         "are-docs-informative": "^0.0.2",
         "comment-parser": "1.4.1",
         "debug": "^4.3.4",
         "escape-string-regexp": "^4.0.0",
         "esquery": "^1.5.0",
-        "is-builtin-module": "^3.2.1",
-        "semver": "^7.6.1",
+        "semver": "^7.6.2",
         "spdx-expression-parse": "^4.0.0"
       },
       "engines": {
@@ -10135,21 +10122,6 @@
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "dev": true
     },
-    "node_modules/is-builtin-module": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
-      "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
-      "dev": true,
-      "dependencies": {
-        "builtin-modules": "^3.3.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
@@ -20142,9 +20114,9 @@
       }
     },
     "@es-joy/jsdoccomment": {
-      "version": "0.43.0",
-      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.43.0.tgz",
-      "integrity": "sha512-Q1CnsQrytI3TlCB1IVWXWeqUIPGVEKGaE7IbVdt13Nq/3i0JESAkQQERrfiQkmlpijl+++qyqPgaS31Bvc1jRQ==",
+      "version": "0.43.1",
+      "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.43.1.tgz",
+      "integrity": "sha512-I238eDtOolvCuvtxrnqtlBaw0BwdQuYqK7eA6XIonicMdOOOb75mqdIzkGDUbS04+1Di007rgm9snFRNeVrOog==",
       "dev": true,
       "requires": {
         "@types/eslint": "^8.56.5",
@@ -21197,9 +21169,9 @@
       }
     },
     "@typescript-eslint/types": {
-      "version": "7.10.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.10.0.tgz",
-      "integrity": "sha512-7fNj+Ya35aNyhuqrA1E/VayQX9Elwr8NKZ4WueClR3KwJ7Xx9jcCdOrLW04h51de/+gNbyFMs+IDxh5xIwfbNg==",
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.11.0.tgz",
+      "integrity": "sha512-MPEsDRZTyCiXkD4vd3zywDCifi7tatc4K37KqTprCvaXptP7Xlpdw0NR2hRJTetG5TxbWDB79Ys4kLmHliEo/w==",
       "dev": true
     },
     "@ungap/structured-clone": {
@@ -22376,12 +22348,6 @@
       "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ==",
       "dev": true
     },
-    "builtin-modules": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
-      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==",
-      "dev": true
-    },
     "builtin-status-codes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
@@ -24192,9 +24158,9 @@
       }
     },
     "eslint-plugin-cypress": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-3.2.0.tgz",
-      "integrity": "sha512-HaxMz6BoU4ay+K4WrG9ZJC1NdX06FqSlAwtRDStjM0ORFT7zCNPNuRJ+kUPc17Rt2AMUBSqeD9L0zTR3uZhPpw==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-3.3.0.tgz",
+      "integrity": "sha512-HPHMPzYBIshzJM8wqgKSKHG2p/8R0Gbg4Pb3tcdC9WrmkuqxiKxSKbjunUrajhV5l7gCIFrh1P7C7GuBqH6YuQ==",
       "dev": true,
       "requires": {
         "globals": "^13.20.0"
@@ -24269,19 +24235,18 @@
       }
     },
     "eslint-plugin-jsdoc": {
-      "version": "48.2.5",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.2.5.tgz",
-      "integrity": "sha512-ZeTfKV474W1N9niWfawpwsXGu+ZoMXu4417eBROX31d7ZuOk8zyG66SO77DpJ2+A9Wa2scw/jRqBPnnQo7VbcQ==",
+      "version": "48.2.7",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.2.7.tgz",
+      "integrity": "sha512-fYj3roTnkFL9OFFTB129rico8lerC5G8Vp2ZW9SjO9RNWG0exVvI+i/Y8Bpm1ufjR0uvT38xtoab/U0Hp8Ybog==",
       "dev": true,
       "requires": {
-        "@es-joy/jsdoccomment": "~0.43.0",
+        "@es-joy/jsdoccomment": "~0.43.1",
         "are-docs-informative": "^0.0.2",
         "comment-parser": "1.4.1",
         "debug": "^4.3.4",
         "escape-string-regexp": "^4.0.0",
         "esquery": "^1.5.0",
-        "is-builtin-module": "^3.2.1",
-        "semver": "^7.6.1",
+        "semver": "^7.6.2",
         "spdx-expression-parse": "^4.0.0"
       },
       "dependencies": {
@@ -25506,15 +25471,6 @@
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
       "dev": true
     },
-    "is-builtin-module": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
-      "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
-      "dev": true,
-      "requires": {
-        "builtin-modules": "^3.3.0"
-      }
-    },
     "is-callable": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
diff --git a/package.json b/package.json
index adb6c83c..277bbb41 100644
--- a/package.json
+++ b/package.json
@@ -41,9 +41,9 @@
     "cypress-real-events": "=1.12.0",
     "eslint": "=8.57.0",
     "eslint-config-airbnb-base": "=15.0.0",
-    "eslint-plugin-cypress": "=3.2.0",
+    "eslint-plugin-cypress": "=3.3.0",
     "eslint-plugin-import": "=2.29.1",
-    "eslint-plugin-jsdoc": "=48.2.5",
+    "eslint-plugin-jsdoc": "=48.2.7",
     "eslint-plugin-vue": "=9.26.0",
     "gherkin-lint": "=4.2.4",
     "jsdoc": "=4.0.3",
diff --git a/src/components/dialog/AttachGroupToUserDialog.vue b/src/components/dialog/AttachGroupToUserDialog.vue
index 347bf5bf..12e46da6 100644
--- a/src/components/dialog/AttachGroupToUserDialog.vue
+++ b/src/components/dialog/AttachGroupToUserDialog.vue
@@ -6,7 +6,7 @@
           {{ $t('AttachGroupToUserDialog.text.title') }}
         </span>
       </q-card-section>
-      <q-form @submit="onSubmit">
+      <q-form @submit="attach">
         <q-card-section class="row items-center">
           <q-icon
             left
@@ -54,23 +54,12 @@
 </template>
 
 <script setup>
-import { useDialog } from 'src/composables/Dialog';
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import AccessControlTable from 'src/components/tables/AccessControlTable.vue';
-import ReloadGroupsEvent from 'src/composables/events/ReloadGroupsEvent';
 import * as GroupService from 'src/services/GroupService';
-import * as UserService from 'src/services/UserService';
-import { Notify } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from 'src/stores/UserStore';
+import { useAttachDialog } from 'src/composables/AttachDialog';
 
-const userStore = useUserStore();
-const { t } = useI18n();
-const submitting = ref(false);
-const userLogin = ref('');
-const selected = ref([]);
 const groups = ref([]);
-const isCurrentUser = computed(() => userLogin.value === userStore.login);
 
 /**
  * Get groups.
@@ -82,63 +71,18 @@ async function search() {
   });
 }
 
-const { show } = useDialog('attach-group-to-user', (event) => {
-  submitting.value = false;
-  userLogin.value = event.userLogin;
-  selected.value = [];
-  return search();
-});
-
-/**
- * Attach one or more groups to a user.
- * @returns {Promise<void>} Promise with nothing on success.
- */
-async function onSubmit() {
-  submitting.value = true;
-
-  const groupIdList = selected.value.map(({ id }) => id);
-
-  await Promise.allSettled(groupIdList
-    .map((groupId) => GroupService.associateGroupAndUser(userLogin.value, groupId)
-      .catch(() => {
-        Notify.create({
-          type: 'negative',
-          message: t('AttachGroupToUserDialog.text.notifyError'),
-          html: true,
-        });
-
-        throw new Error(groupId);
-      })))
-    .then((results) => {
-      const failedRequestObjects = [];
-
-      results.forEach(({ status, reason }) => {
-        if (status === 'rejected' && reason.message) {
-          failedRequestObjects.push(...selected.value
-            .filter(({ id }) => id === reason.message));
-        }
-      });
-
-      selected.value = failedRequestObjects;
-
-      if (results.every(({ status }) => status === 'fulfilled')) {
-        Notify.create({
-          type: 'positive',
-          message: t('AttachGroupToUserDialog.text.notifySuccess'),
-          html: true,
-        });
-
-        show.value = false;
-      }
-    }).finally(async () => {
-      ReloadGroupsEvent.next();
-      submitting.value = false;
-
-      if (isCurrentUser.value) {
-        userStore.permissions = await UserService.getMyPermissions();
-      }
-    });
-}
+const {
+  show,
+  submitting,
+  selected,
+  attach,
+} = useAttachDialog(
+  'AttachGroupToUserDialog',
+  'attach-group-to-user',
+  'user',
+  'group',
+  search,
+);
 </script>
 
 <style scoped>
diff --git a/src/components/dialog/AttachPermissionToRoleDialog.vue b/src/components/dialog/AttachPermissionToRoleDialog.vue
index 58fbbc3f..32569846 100644
--- a/src/components/dialog/AttachPermissionToRoleDialog.vue
+++ b/src/components/dialog/AttachPermissionToRoleDialog.vue
@@ -6,7 +6,7 @@
           {{ $t('AttachPermissionToRoleDialog.text.title') }}
         </span>
       </q-card-section>
-      <q-form @submit="onSubmit">
+      <q-form @submit="attach">
         <q-card-section>
           <permissions-table
             v-model:selected="selected"
@@ -43,22 +43,11 @@
 </template>
 
 <script setup>
-import { useDialog } from 'src/composables/Dialog';
 import { ref } from 'vue';
 import PermissionsTable from 'src/components/tables/PermissionsTable.vue';
-import ReloadPermissionsEvent from 'src/composables/events/ReloadPermissionsEvent';
-import * as RoleService from 'src/services/RoleService';
-import * as UserService from 'src/services/UserService';
 import * as PermissionService from 'src/services/PermissionService';
-import { Notify } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from 'src/stores/UserStore';
+import { useAttachDialog } from 'src/composables/AttachDialog';
 
-const userStore = useUserStore();
-const { t } = useI18n();
-const submitting = ref(false);
-const roleId = ref('');
-const selected = ref([]);
 const permissions = ref([]);
 
 /**
@@ -71,61 +60,18 @@ async function search() {
   });
 }
 
-const { show } = useDialog('attach-permission-to-role', (event) => {
-  submitting.value = false;
-  roleId.value = event.roleId;
-  selected.value = [];
-  return search();
-});
-
-/**
- * Attach one or more permissions to a role.
- * @returns {Promise<void>} Promise with nothing on success.
- */
-async function onSubmit() {
-  submitting.value = true;
-
-  const permissionIdList = selected.value.map(({ id }) => id);
-
-  await Promise.allSettled(permissionIdList
-    .map((permissionId) => RoleService.associateRoleAndPermission(roleId.value, permissionId)
-      .catch(() => {
-        Notify.create({
-          type: 'negative',
-          message: t('AttachPermissionToRoleDialog.text.notifyError'),
-          html: true,
-        });
-
-        throw new Error(permissionId);
-      })))
-    .then((results) => {
-      const failedRequestObjects = [];
-
-      results.forEach(({ status, reason }) => {
-        if (status === 'rejected' && reason.message) {
-          failedRequestObjects.push(...selected.value
-            .filter(({ id }) => id === reason.message));
-        }
-      });
-
-      selected.value = failedRequestObjects;
-
-      if (results.every(({ status }) => status === 'fulfilled')) {
-        Notify.create({
-          type: 'positive',
-          message: t('AttachPermissionToRoleDialog.text.notifySuccess'),
-          html: true,
-        });
-
-        show.value = false;
-      }
-    })
-    .finally(async () => {
-      ReloadPermissionsEvent.next();
-      submitting.value = false;
-      userStore.permissions = await UserService.getMyPermissions();
-    });
-}
+const {
+  show,
+  submitting,
+  selected,
+  attach,
+} = useAttachDialog(
+  'AttachPermissionToRoleDialog',
+  'attach-permission-to-role',
+  'role',
+  'permission',
+  search,
+);
 </script>
 
 <style scoped>
diff --git a/src/components/dialog/AttachRoleToUserDialog.vue b/src/components/dialog/AttachRoleToUserDialog.vue
index ef80a8ba..a1481846 100644
--- a/src/components/dialog/AttachRoleToUserDialog.vue
+++ b/src/components/dialog/AttachRoleToUserDialog.vue
@@ -6,7 +6,7 @@
           {{ $t('AttachRoleToUserDialog.text.title') }}
         </span>
       </q-card-section>
-      <q-form @submit="onSubmit">
+      <q-form @submit="attach">
         <q-card-section class="row items-center">
           <q-icon
             left
@@ -56,23 +56,12 @@
 </template>
 
 <script setup>
-import { useDialog } from 'src/composables/Dialog';
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
 import AccessControlTable from 'src/components/tables/AccessControlTable.vue';
-import ReloadRolesEvent from 'src/composables/events/ReloadRolesEvent';
 import * as RoleService from 'src/services/RoleService';
-import * as UserService from 'src/services/UserService';
-import { Notify } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from 'src/stores/UserStore';
+import { useAttachDialog } from 'src/composables/AttachDialog';
 
-const userStore = useUserStore();
-const { t } = useI18n();
-const submitting = ref(false);
-const userLogin = ref('');
-const selected = ref([]);
 const roles = ref([]);
-const isCurrentUser = computed(() => userLogin.value === userStore.login);
 
 /**
  * Get roles.
@@ -84,63 +73,18 @@ async function search() {
   });
 }
 
-const { show } = useDialog('attach-role-to-user', (event) => {
-  submitting.value = false;
-  userLogin.value = event.userLogin;
-  selected.value = [];
-  return search();
-});
-
-/**
- * Attach one or more roles to a user.
- * @returns {Promise<void>} Promise with nothing on success.
- */
-async function onSubmit() {
-  submitting.value = true;
-
-  const roleIdList = selected.value.map(({ id }) => id);
-
-  await Promise.allSettled(roleIdList
-    .map((roleId) => RoleService.associateRoleAndUser(userLogin.value, roleId)
-      .catch(() => {
-        Notify.create({
-          type: 'negative',
-          message: t('AttachRoleToUserDialog.text.notifyError'),
-          html: true,
-        });
-
-        throw new Error(roleId);
-      })))
-    .then((results) => {
-      const failedRequestObjects = [];
-
-      results.forEach(({ status, reason }) => {
-        if (status === 'rejected' && reason.message) {
-          failedRequestObjects.push(...selected.value
-            .filter(({ id }) => id === reason.message));
-        }
-      });
-
-      selected.value = failedRequestObjects;
-
-      if (results.every(({ status }) => status === 'fulfilled')) {
-        Notify.create({
-          type: 'positive',
-          message: t('AttachRoleToUserDialog.text.notifySuccess'),
-          html: true,
-        });
-
-        show.value = false;
-      }
-    }).finally(async () => {
-      ReloadRolesEvent.next();
-      submitting.value = false;
-
-      if (isCurrentUser.value) {
-        userStore.permissions = await UserService.getMyPermissions();
-      }
-    });
-}
+const {
+  show,
+  submitting,
+  selected,
+  attach,
+} = useAttachDialog(
+  'AttachRoleToUserDialog',
+  'attach-role-to-user',
+  'user',
+  'role',
+  search,
+);
 </script>
 
 <style scoped>
diff --git a/src/components/dialog/AttachUserToGroupDialog.vue b/src/components/dialog/AttachUserToGroupDialog.vue
index 16ce5a7f..b855c100 100644
--- a/src/components/dialog/AttachUserToGroupDialog.vue
+++ b/src/components/dialog/AttachUserToGroupDialog.vue
@@ -6,7 +6,7 @@
           {{ $t('AttachUserToGroupDialog.text.title') }}
         </span>
       </q-card-section>
-      <q-form @submit="onSubmit">
+      <q-form @submit="attach">
         <q-card-section class="row items-center">
           <q-icon
             left
@@ -63,26 +63,14 @@
 </template>
 
 <script setup>
-import { useDialog } from 'src/composables/Dialog';
 import { ref } from 'vue';
 import UsersTable from 'src/components/tables/UsersTable.vue';
-import ReloadUsersEvent from 'src/composables/events/ReloadUsersEvent';
-import SelectEvent from 'src/composables/events/SelectEvent';
 import * as UserService from 'src/services/UserService';
-import * as GroupService from 'src/services/GroupService';
-import { Notify } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from 'src/stores/UserStore';
 import { useServerSideFilter } from 'src/composables/ServerSideFilter';
 import userFilters from 'src/composables/filters/UserFilters';
+import { useAttachDialog } from 'src/composables/AttachDialog';
 
-const userStore = useUserStore();
-const { t } = useI18n();
-const submitting = ref(false);
-const groupId = ref('');
-const selected = ref([]);
 const users = ref([]);
-const selectOnly = ref(false);
 const maxPage = ref(0);
 const totalElements = ref(0);
 const {
@@ -104,71 +92,18 @@ async function search() {
   });
 }
 
-const { show } = useDialog('attach-user-to-group', (event) => {
-  submitting.value = false;
-  groupId.value = event.groupId;
-  selected.value = [];
-  selectOnly.value = event.selectOnly || false;
-  return search();
-});
-
-/**
- * Attach one or more users to a group.
- * @returns {Promise<void>} Promise with nothing on success.
- */
-async function onSubmit() {
-  if (selectOnly.value) {
-    SelectEvent.SelectUsersEvent.next(selected.value);
-    show.value = false;
-
-    return;
-  }
-
-  submitting.value = true;
-
-  const userLoginList = selected.value.map(({ login }) => login);
-
-  await Promise.allSettled(userLoginList
-    .map((login) => GroupService.associateGroupAndUser(login, groupId.value)
-      .catch(() => {
-        Notify.create({
-          type: 'negative',
-          message: t('AttachUserToGroupDialog.text.notifyError'),
-          html: true,
-        });
-
-        throw new Error(login);
-      })))
-    .then((results) => {
-      const failedRequestObjects = [];
-
-      results.forEach(({ status, reason }) => {
-        if (status === 'rejected' && reason.message) {
-          failedRequestObjects.push(...selected.value
-            .filter(({ login }) => login === reason.message));
-        }
-      });
-
-      selected.value = failedRequestObjects;
-
-      if (results.every(({ status }) => status === 'fulfilled')) {
-        Notify.create({
-          type: 'positive',
-          message: t('AttachUserToGroupDialog.text.notifySuccess'),
-          html: true,
-        });
-
-        show.value = false;
-      }
-    }).finally(async () => {
-      ReloadUsersEvent.next();
-      submitting.value = false;
-
-      if (userLoginList.includes(userStore.login)) {
-        userStore.permissions = await UserService.getMyPermissions();
-      }
-    });
-}
+const {
+  show,
+  submitting,
+  selected,
+  attach,
+} = useAttachDialog(
+  'AttachUserToGroupDialog',
+  'attach-user-to-group',
+  'group',
+  'user',
+  search,
+);
 </script>
 
 <style scoped>
diff --git a/src/components/dialog/AttachUserToRoleDialog.vue b/src/components/dialog/AttachUserToRoleDialog.vue
index 01d781ca..24eb04e2 100644
--- a/src/components/dialog/AttachUserToRoleDialog.vue
+++ b/src/components/dialog/AttachUserToRoleDialog.vue
@@ -6,7 +6,7 @@
           {{ $t('AttachUserToRoleDialog.text.title') }}
         </span>
       </q-card-section>
-      <q-form @submit="onSubmit">
+      <q-form @submit="attach">
         <q-card-section class="row items-center">
           <q-icon
             left
@@ -55,21 +55,11 @@
 </template>
 
 <script setup>
-import { useDialog } from 'src/composables/Dialog';
 import { ref } from 'vue';
 import UsersTable from 'src/components/tables/UsersTable.vue';
-import ReloadUsersEvent from 'src/composables/events/ReloadUsersEvent';
-import * as RoleService from 'src/services/RoleService';
 import * as UserService from 'src/services/UserService';
-import { Notify } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from 'src/stores/UserStore';
+import { useAttachDialog } from 'src/composables/AttachDialog';
 
-const userStore = useUserStore();
-const { t } = useI18n();
-const submitting = ref(false);
-const roleId = ref('');
-const selected = ref([]);
 const users = ref([]);
 
 /**
@@ -82,64 +72,18 @@ async function search() {
   });
 }
 
-const { show } = useDialog('attach-user-to-role', (event) => {
-  submitting.value = false;
-  roleId.value = event.roleId;
-  selected.value = [];
-  return search();
-});
-
-/**
- * Attach one or more users to a role.
- * @returns {Promise<void>} Promise with nothing on success.
- */
-async function onSubmit() {
-  submitting.value = true;
-
-  const userLoginList = selected.value.map(({ login }) => login);
-
-  await Promise.allSettled(userLoginList
-    .map((userLogin) => RoleService.associateRoleAndUser(userLogin, roleId.value)
-      .catch(() => {
-        Notify.create({
-          type: 'negative',
-          message: t('AttachUserToRoleDialog.text.notifyError'),
-          html: true,
-        });
-
-        throw new Error(userLogin);
-      })))
-    .then((results) => {
-      const failedRequestObjects = [];
-
-      results.forEach(({ status, reason }) => {
-        if (status === 'rejected' && reason.message) {
-          failedRequestObjects.push(...selected.value
-            .filter(({ login }) => login === reason.message));
-        }
-      });
-
-      selected.value = failedRequestObjects;
-
-      if (results.every(({ status }) => status === 'fulfilled')) {
-        Notify.create({
-          type: 'positive',
-          message: t('AttachUserToRoleDialog.text.notifySuccess'),
-          html: true,
-        });
-
-        show.value = false;
-      }
-    })
-    .finally(async () => {
-      ReloadUsersEvent.next();
-      submitting.value = false;
-
-      if (userLoginList.includes(userStore.login)) {
-        userStore.permissions = await UserService.getMyPermissions();
-      }
-    });
-}
+const {
+  show,
+  submitting,
+  selected,
+  attach,
+} = useAttachDialog(
+  'AttachUserToRoleDialog',
+  'attach-user-to-role',
+  'role',
+  'user',
+  search,
+);
 </script>
 
 <style scoped>
diff --git a/src/components/dialog/DetachGroupFromUserDialog.vue b/src/components/dialog/DetachGroupFromUserDialog.vue
index 843ce343..88f15679 100644
--- a/src/components/dialog/DetachGroupFromUserDialog.vue
+++ b/src/components/dialog/DetachGroupFromUserDialog.vue
@@ -7,7 +7,7 @@
                 { group: group.name, user: user.name }) }}
         </span>
       </q-card-section>
-      <q-form @submit="onSubmit">
+      <q-form @submit="detach">
         <q-card-section class="column flex-center">
           {{ $t('DetachGroupFromUserDialog.text.content') }}
         </q-card-section>
@@ -35,50 +35,18 @@
 </template>
 
 <script setup>
-import { useDialog } from 'src/composables/Dialog';
-import { ref, computed } from 'vue';
-import ReloadGroupsEvent from 'src/composables/events/ReloadGroupsEvent';
-import * as GroupService from 'src/services/GroupService';
-import * as UserService from 'src/services/UserService';
-import { Notify } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from 'src/stores/UserStore';
-
-const userStore = useUserStore();
-const { t } = useI18n();
-const submitting = ref(false);
-const group = ref(null);
-const user = ref();
-const isCurrentUser = computed(() => user.value?.login === userStore.login);
-
-const { show } = useDialog('detach-group-from-user', (event) => {
-  submitting.value = false;
-  group.value = event.group;
-  user.value = event.user;
-});
-
-/**
- * Detach group, send event to reload user groups and close dialog.
- * @returns {Promise<void>} Promise with nothing on success.
- */
-async function onSubmit() {
-  submitting.value = true;
-
-  await GroupService.dissociateGroupAndUser(user.value.login, group.value.id);
-
-  Notify.create({
-    type: 'positive',
-    message: t('DetachGroupFromUserDialog.text.notifySuccess'),
-    html: true,
-  });
-
-  ReloadGroupsEvent.next();
-
-  if (isCurrentUser.value) {
-    userStore.permissions = await UserService.getMyPermissions();
-  }
-
-  submitting.value = false;
-  show.value = false;
-}
+import { useDetachDialog } from 'src/composables/DetachDialog';
+
+const {
+  show,
+  submitting,
+  user,
+  group,
+  detach,
+} = useDetachDialog(
+  'DetachGroupFromUserDialog',
+  'detach-group-from-user',
+  'user',
+  'group',
+);
 </script>
diff --git a/src/components/dialog/DetachRoleFromUserDialog.vue b/src/components/dialog/DetachRoleFromUserDialog.vue
index 7e0234a1..8899263b 100644
--- a/src/components/dialog/DetachRoleFromUserDialog.vue
+++ b/src/components/dialog/DetachRoleFromUserDialog.vue
@@ -6,7 +6,7 @@
           {{ $t('DetachRoleFromUserDialog.text.title', { role: role.name, user: user.name }) }}
         </span>
       </q-card-section>
-      <q-form @submit="onSubmit">
+      <q-form @submit="detach">
         <q-card-section
           v-if="isCurrentUser"
           class="column flex-center"
@@ -54,62 +54,19 @@
 </template>
 
 <script setup>
-import { useDialog } from 'src/composables/Dialog';
-import { ref, computed } from 'vue';
-import ReloadRolesEvent from 'src/composables/events/ReloadRolesEvent';
-import DialogEvent from 'src/composables/events/DialogEvent';
-import * as RoleService from 'src/services/RoleService';
-import * as UserService from 'src/services/UserService';
-import { Notify } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from 'src/stores/UserStore';
+import { useDetachDialog } from 'src/composables/DetachDialog';
 
-const userStore = useUserStore();
-const { t } = useI18n();
-const submitting = ref(false);
-const role = ref(null);
-const user = ref();
-const isCurrentUser = computed(() => user.value?.login === userStore.login);
-const { show } = useDialog('detach-role-from-user', (event) => {
-  submitting.value = false;
-  role.value = event.role;
-  user.value = event.user;
-});
-
-/**
- * Detach role, send event to reload roles and close dialog.
- * If current user loses his admin access, open dialog redirect to Leto-Modelizer.
- * @returns {Promise<void>} Promise with nothing on success.
- */
-async function onSubmit() {
-  submitting.value = true;
-
-  await RoleService.dissociateRoleAndUser(user.value.login, role.value.id)
-    .then(async () => {
-      submitting.value = false;
-
-      Notify.create({
-        type: 'positive',
-        message: t('DetachRoleFromUserDialog.text.notifySuccess'),
-        html: true,
-      });
-
-      if (isCurrentUser.value) {
-        userStore.permissions = await UserService.getMyPermissions();
-
-        if (!userStore.isAdmin) {
-          DialogEvent.next({
-            key: 'redirect',
-            type: 'open',
-          });
-        }
-      }
-
-      if (!isCurrentUser.value || (isCurrentUser.value && userStore.isAdmin)) {
-        ReloadRolesEvent.next();
-      }
-
-      show.value = false;
-    });
-}
+const {
+  show,
+  submitting,
+  user,
+  role,
+  isCurrentUser,
+  detach,
+} = useDetachDialog(
+  'DetachRoleFromUserDialog',
+  'detach-role-from-user',
+  'user',
+  'role',
+);
 </script>
diff --git a/src/components/dialog/DetachUserFromGroupDialog.vue b/src/components/dialog/DetachUserFromGroupDialog.vue
index 47c49e6f..e3278d54 100644
--- a/src/components/dialog/DetachUserFromGroupDialog.vue
+++ b/src/components/dialog/DetachUserFromGroupDialog.vue
@@ -7,7 +7,7 @@
                 { user: user.name, group: group.name }) }}
         </span>
       </q-card-section>
-      <q-form @submit="onSubmit">
+      <q-form @submit="detach">
         <q-card-section class="column flex-center">
           {{ $t('DetachUserFromGroupDialog.text.content') }}
         </q-card-section>
@@ -35,51 +35,18 @@
 </template>
 
 <script setup>
-import { useDialog } from 'src/composables/Dialog';
-import { ref, computed } from 'vue';
-import ReloadUsersEvent from 'src/composables/events/ReloadUsersEvent';
-import * as GroupService from 'src/services/GroupService';
-import * as UserService from 'src/services/UserService';
-import { Notify } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from 'src/stores/UserStore';
-
-const userStore = useUserStore();
-const { t } = useI18n();
-const submitting = ref(false);
-const group = ref(null);
-const user = ref();
-const isCurrentUser = computed(() => user.value?.login === userStore.login);
-
-const { show } = useDialog('detach-user-from-group', (event) => {
-  submitting.value = false;
-  group.value = event.group;
-  user.value = event.user;
-});
-
-/**
- * Detach user, send event to reload users and close dialog.
- * @returns {Promise<void>} Promise with nothing on success.
- */
-async function onSubmit() {
-  submitting.value = true;
-
-  // TODO: generic error management
-  await GroupService.dissociateGroupAndUser(user.value.login, group.value.id);
-
-  Notify.create({
-    type: 'positive',
-    message: t('DetachUserFromGroupDialog.text.notifySuccess'),
-    html: true,
-  });
-
-  ReloadUsersEvent.next();
-
-  if (isCurrentUser.value) {
-    userStore.permissions = await UserService.getMyPermissions();
-  }
-
-  submitting.value = false;
-  show.value = false;
-}
+import { useDetachDialog } from 'src/composables/DetachDialog';
+
+const {
+  show,
+  submitting,
+  user,
+  group,
+  detach,
+} = useDetachDialog(
+  'DetachUserFromGroupDialog',
+  'detach-user-from-group',
+  'group',
+  'user',
+);
 </script>
diff --git a/src/components/dialog/DetachUserFromRoleDialog.vue b/src/components/dialog/DetachUserFromRoleDialog.vue
index c7bd995a..8e508922 100644
--- a/src/components/dialog/DetachUserFromRoleDialog.vue
+++ b/src/components/dialog/DetachUserFromRoleDialog.vue
@@ -6,7 +6,7 @@
           {{ $t('DetachUserFromRoleDialog.text.title', { user: user.name, role: role.name }) }}
         </span>
       </q-card-section>
-      <q-form @submit="onSubmit">
+      <q-form @submit="detach">
         <q-card-section
           v-if="isCurrentUser"
           class="column flex-center"
@@ -54,62 +54,19 @@
 </template>
 
 <script setup>
-import { useDialog } from 'src/composables/Dialog';
-import { ref, computed } from 'vue';
-import ReloadUsersEvent from 'src/composables/events/ReloadUsersEvent';
-import DialogEvent from 'src/composables/events/DialogEvent';
-import * as RoleService from 'src/services/RoleService';
-import * as UserService from 'src/services/UserService';
-import { Notify } from 'quasar';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from 'src/stores/UserStore';
+import { useDetachDialog } from 'src/composables/DetachDialog';
 
-const userStore = useUserStore();
-const { t } = useI18n();
-const submitting = ref(false);
-const role = ref(null);
-const user = ref();
-const isCurrentUser = computed(() => user.value?.login === userStore.login);
-const { show } = useDialog('detach-user-from-role', (event) => {
-  submitting.value = false;
-  role.value = event.role;
-  user.value = event.user;
-});
-
-/**
- * Detach user, send event to reload users and close dialog.
- * If current user loses his admin access, open dialog redirect to Leto-Modelizer.
- * @returns {Promise<void>} Promise with nothing on success.
- */
-async function onSubmit() {
-  submitting.value = true;
-
-  await RoleService.dissociateRoleAndUser(user.value.login, role.value.id)
-    .then(async () => {
-      submitting.value = false;
-
-      Notify.create({
-        type: 'positive',
-        message: t('DetachUserFromRoleDialog.text.notifySuccess'),
-        html: true,
-      });
-
-      if (isCurrentUser.value) {
-        userStore.permissions = await UserService.getMyPermissions();
-
-        if (!userStore.isAdmin) {
-          DialogEvent.next({
-            key: 'redirect',
-            type: 'open',
-          });
-        }
-      }
-
-      if (!isCurrentUser.value || (isCurrentUser.value && userStore.isAdmin)) {
-        ReloadUsersEvent.next();
-      }
-
-      show.value = false;
-    });
-}
+const {
+  show,
+  submitting,
+  user,
+  role,
+  isCurrentUser,
+  detach,
+} = useDetachDialog(
+  'DetachUserFromRoleDialog',
+  'detach-user-from-role',
+  'role',
+  'user',
+);
 </script>
diff --git a/src/components/header/ApplicationHeader.vue b/src/components/header/ApplicationHeader.vue
index d4daccdb..fb414a6d 100644
--- a/src/components/header/ApplicationHeader.vue
+++ b/src/components/header/ApplicationHeader.vue
@@ -5,12 +5,12 @@
   >
     <div>
       <q-img class="logo" />
-      <label
+      <span
         class="vertical-middle text-subtitle1 cursor-pointer text-white"
         data-cy="application-name"
       >
         {{ $t('ApplicationHeader.text.applicationName') }}
-      </label>
+      </span>
     </div>
     <div class="project-info">
       <h5
diff --git a/src/composables/AttachDialog.js b/src/composables/AttachDialog.js
new file mode 100644
index 00000000..e99aa7ba
--- /dev/null
+++ b/src/composables/AttachDialog.js
@@ -0,0 +1,176 @@
+import {
+  ref,
+  computed,
+} from 'vue';
+import { useDialog } from 'src/composables/Dialog';
+import ReloadUsersEvent from 'src/composables/events/ReloadUsersEvent';
+import ReloadGroupsEvent from 'src/composables/events/ReloadGroupsEvent';
+import ReloadRolesEvent from 'src/composables/events/ReloadRolesEvent';
+import ReloadPermissionsEvent from 'src/composables/events/ReloadPermissionsEvent';
+import SelectEvent from 'src/composables/events/SelectEvent';
+import * as GroupService from 'src/services/GroupService';
+import * as RoleService from 'src/services/RoleService';
+import * as UserService from 'src/services/UserService';
+import { Notify } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useUserStore } from 'src/stores/UserStore';
+
+/**
+ * Composable that extends useDialog to manage detach user and access control dialogs.
+ * @param {string} dialogName - Name of the dialog.
+ * @param {string} key - Dialog event key.
+ * @param {string} source - The entity that another entity is being detached from.
+ * @param {string} target - The detached entity.
+ * @param {Function} searchFunction - Function to call.
+ * @returns {object} Object with refs and functions to manage detach access control dialog.
+ */
+export function useAttachDialog(dialogName, key, source, target, searchFunction) {
+  const userStore = useUserStore();
+  const submitting = ref(false);
+  const selectOnly = ref(false);
+  const selected = ref([]);
+  const groupId = ref(null);
+  const roleId = ref(null);
+  const userLogin = ref();
+  const isCurrentUser = computed(() => userLogin.value === userStore.login);
+
+  const { show } = useDialog(key, (event) => {
+    submitting.value = false;
+    groupId.value = event.groupId;
+    roleId.value = event.roleId;
+    userLogin.value = event.userLogin;
+    selected.value = [];
+    selectOnly.value = event.selectOnly || false;
+    if (searchFunction) searchFunction();
+  });
+
+  const { t } = useI18n();
+
+  /**
+   * Dispatch a reload event for users, groups, roles or permissions
+   * depending on the value of the `target` variable.
+   * @returns {void}
+   */
+  function reloadEvent() {
+    if (target === 'user') {
+      return ReloadUsersEvent.next();
+    }
+
+    if (target === 'group') {
+      return ReloadGroupsEvent.next();
+    }
+
+    if (target === 'role') {
+      return ReloadRolesEvent.next();
+    }
+
+    return ReloadPermissionsEvent.next();
+  }
+
+  /**
+   * Invoke the appropriate associate method from GroupService or RoleService.
+   * @param {string} selectedId - Selected id of the item to be attached.
+   * @returns {Promise<void>} Promise with nothing on success.
+   */
+  async function associate(selectedId) {
+    if (target === 'permission') {
+      return RoleService.associateRoleAndPermission(roleId.value, selectedId);
+    }
+
+    if (target === 'group' && source === 'user') {
+      return GroupService.associateGroupAndUser(userLogin.value, selectedId);
+    }
+
+    if (target === 'user' && source === 'group') {
+      return GroupService.associateGroupAndUser(selectedId, groupId.value);
+    }
+
+    if (target === 'user' && source === 'role') {
+      return RoleService.associateRoleAndUser(selectedId, roleId.value);
+    }
+
+    return RoleService.associateRoleAndUser(userLogin.value, selectedId);
+  }
+
+  /**
+   * Handle failed requests by filtering out specific items based on the rejection reason message.
+   * @param {Array<object>} results - results array containing status and reason of each request.
+   * @param {string} results[].status - status of the request ('fulfilled' or 'rejected').
+   * @param {object} results[].reason - reason object if the request was rejected.
+   * @param {string} results[].reason.message - message describing why the request was rejected.
+   */
+  function handleFailedRequest(results) {
+    const failedRequestObjects = [];
+
+    results.forEach(({ status, reason }) => {
+      if (status === 'rejected' && reason.message) {
+        const filterKey = target === 'user' ? 'login' : 'id';
+
+        failedRequestObjects.push(...selected.value
+          .filter((item) => item[filterKey] === reason.message));
+      }
+    });
+
+    selected.value = failedRequestObjects;
+  }
+
+  /**
+   * Attach one or more groups to a user.
+   * @returns {Promise<void>} Promise with nothing on success.
+   */
+  async function attach() {
+    if (selectOnly.value) {
+      SelectEvent.SelectUsersEvent.next(selected.value);
+      show.value = false;
+
+      return;
+    }
+
+    submitting.value = true;
+
+    const selectedIdList = selected.value.map((item) => (target === 'user' ? item.login : item.id));
+
+    await Promise.allSettled(selectedIdList
+      .map((selectedId) => associate(selectedId)
+        .catch(() => {
+          Notify.create({
+            type: 'negative',
+            message: t(`${dialogName}.text.notifyError`),
+            html: true,
+          });
+
+          throw new Error(selectedId);
+        })))
+      .then((results) => {
+        handleFailedRequest(results);
+
+        if (results.every(({ status }) => status === 'fulfilled')) {
+          Notify.create({
+            type: 'positive',
+            message: t(`${dialogName}.text.notifySuccess`),
+            html: true,
+          });
+
+          show.value = false;
+        }
+      }).finally(async () => {
+        reloadEvent();
+        submitting.value = false;
+
+        if (isCurrentUser.value || selectedIdList.includes(userStore.login) || target === 'permission') {
+          userStore.permissions = await UserService.getMyPermissions();
+        }
+      });
+  }
+
+  return {
+    show,
+    submitting,
+    userLogin,
+    groupId,
+    roleId,
+    isCurrentUser,
+    selected,
+    attach,
+  };
+}
diff --git a/src/composables/DetachDialog.js b/src/composables/DetachDialog.js
new file mode 100644
index 00000000..e9fcd84d
--- /dev/null
+++ b/src/composables/DetachDialog.js
@@ -0,0 +1,136 @@
+import {
+  ref,
+  computed,
+} from 'vue';
+import { useDialog } from 'src/composables/Dialog';
+import ReloadUsersEvent from 'src/composables/events/ReloadUsersEvent';
+import ReloadGroupsEvent from 'src/composables/events/ReloadGroupsEvent';
+import ReloadRolesEvent from 'src/composables/events/ReloadRolesEvent';
+import DialogEvent from 'src/composables/events/DialogEvent';
+import * as GroupService from 'src/services/GroupService';
+import * as RoleService from 'src/services/RoleService';
+import * as UserService from 'src/services/UserService';
+import { Notify } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useUserStore } from 'src/stores/UserStore';
+
+/**
+ * Composable that extends useDialog to manage detach user and access control dialogs.
+ * @param {string} dialogName - Name of the dialog.
+ * @param {string} key - Dialog event key.
+ * @param {string} source - The entity that another entity is being detached from.
+ * @param {string} target - The detached entity.
+ * @returns {object} Object with refs and functions to manage detach access control dialog.
+ */
+export function useDetachDialog(dialogName, key, source, target) {
+  const userStore = useUserStore();
+  const submitting = ref(false);
+  const group = ref(null);
+  const role = ref(null);
+  const user = ref();
+  const isCurrentUser = computed(() => user.value?.login === userStore.login);
+
+  const { show } = useDialog(key, (event) => {
+    submitting.value = false;
+    group.value = event.group;
+    user.value = event.user;
+    role.value = event.role;
+  });
+
+  const { t } = useI18n();
+
+  /**
+   * Dispatch a reload event for users, groups, or roles
+   * depending on the value of the `target` variable.
+   * @returns {void}
+   */
+  function reloadEvent() {
+    if (target === 'user') {
+      return ReloadUsersEvent.next();
+    }
+
+    if (target === 'group') {
+      return ReloadGroupsEvent.next();
+    }
+
+    return ReloadRolesEvent.next();
+  }
+
+  /**
+   * Invoke the appropriate dissociate method from GroupService or RoleService.
+   * @returns {Promise<void>} Promise with nothing on success.
+   */
+  async function dissociate() {
+    if ([source, target].includes('group')) {
+      return GroupService.dissociateGroupAndUser(user.value.login, group.value.id);
+    }
+
+    return RoleService.dissociateRoleAndUser(user.value.login, role.value.id);
+  }
+
+  /**
+   * Manage the current user's permissions and trigger appropriate events.
+   * @returns {Promise<void>} Promise with nothing on success.
+   */
+  async function manageUserRolePermissions() {
+    if (isCurrentUser.value) {
+      userStore.permissions = await UserService.getMyPermissions();
+
+      if (!userStore.isAdmin) {
+        DialogEvent.next({
+          key: 'redirect',
+          type: 'open',
+        });
+      }
+    }
+
+    if (!isCurrentUser.value || (isCurrentUser.value && userStore.isAdmin)) {
+      reloadEvent();
+    }
+  }
+
+  /**
+   * Detach user, send event to reload users and close dialog.
+   * @returns {Promise<void>} Promise with nothing on success.
+   */
+  async function detach() {
+    submitting.value = true;
+
+    return dissociate().then(async () => {
+      Notify.create({
+        type: 'positive',
+        message: t(`${dialogName}.text.notifySuccess`),
+        html: true,
+      });
+
+      if ([source, target].includes('role')) {
+        manageUserRolePermissions();
+      } else {
+        reloadEvent();
+
+        if (isCurrentUser.value) {
+          userStore.permissions = await UserService.getMyPermissions();
+        }
+      }
+    }).catch(() => {
+      Notify.create({
+        type: 'negative',
+        message: t(`${dialogName}.text.notifyError`),
+        html: true,
+      });
+    }).finally(() => {
+      submitting.value = false;
+      show.value = false;
+    });
+  }
+
+  return {
+    show,
+    submitting,
+    user,
+    group,
+    role,
+    isCurrentUser,
+    detach,
+  };
+}
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index ee765507..1b6fd5be 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -273,6 +273,7 @@ export default {
       cancel: 'Cancel',
       confirm: 'Confirm',
       notifySuccess: 'Group is detached from user.',
+      notifyError: 'Error during group detachment from user.',
     },
   },
   DetachUserFromGroupDialog: {
@@ -282,6 +283,7 @@ export default {
       cancel: 'Cancel',
       confirm: 'Confirm',
       notifySuccess: 'User is detached from group.',
+      notifyError: 'Error during user detachment from group.',
     },
   },
   DetachRoleFromGroupDialog: {
@@ -327,6 +329,7 @@ export default {
       cancel: 'Cancel',
       confirm: 'Confirm',
       notifySuccess: 'Role is detached from user.',
+      notifyError: 'Error during role detachment from user.',
       warning: 'Losing your role means losing permission, and if you no longer have admin access, you will be redirected to Leto-Modelizer.',
     },
     icon: {
@@ -340,6 +343,7 @@ export default {
       cancel: 'Cancel',
       confirm: 'Confirm',
       notifySuccess: 'User is detached from role.',
+      notifyError: 'Error during user detachment from role.',
       warning: 'Losing your role means losing permission, and if you no longer have admin access, you will be redirected to Leto-Modelizer.',
     },
     icon: {
diff --git a/tests/unit/components/dialog/AttachGroupToUserDialog.test.js b/tests/unit/components/dialog/AttachGroupToUserDialog.test.js
index e893506c..d2e50cba 100644
--- a/tests/unit/components/dialog/AttachGroupToUserDialog.test.js
+++ b/tests/unit/components/dialog/AttachGroupToUserDialog.test.js
@@ -3,27 +3,21 @@ import { mount } from '@vue/test-utils';
 import { vi } from 'vitest';
 import AttachGroupToUserDialog from 'src/components/dialog/AttachGroupToUserDialog.vue';
 import * as GroupService from 'src/services/GroupService';
-import * as UserService from 'src/services/UserService';
 import { Notify } from 'quasar';
 import { createPinia, setActivePinia } from 'pinia';
-import { useUserStore } from 'stores/UserStore';
 
 installQuasarPlugin({
   plugins: [Notify],
 });
 
 vi.mock('src/services/GroupService');
-vi.mock('src/services/UserService');
 vi.stubGlobal('$sanitize', true);
 
 describe('Test component: AttachGroupToUserDialog', () => {
   let wrapper;
-  let store;
 
   beforeEach(() => {
     setActivePinia(createPinia());
-    store = useUserStore();
-    store.login = 'login';
 
     GroupService.find.mockImplementation(() => Promise.resolve({ content: ['group'] }));
 
@@ -39,42 +33,4 @@ describe('Test component: AttachGroupToUserDialog', () => {
       expect(wrapper.vm.groups).toEqual(['group']);
     });
   });
-
-  describe('Test function: onSubmit', () => {
-    beforeEach(() => {
-      wrapper.vm.selected = [{ id: '1' }, { id: '2' }];
-      wrapper.vm.userLogin = 'userLogin';
-    });
-
-    it('should send positive notification after attaching groups to user', async () => {
-      Notify.create = vi.fn();
-      GroupService.associateGroupAndUser.mockImplementation(() => Promise.resolve());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'positive' }));
-    });
-
-    it('should send negative notification after failing to attach groups to user', async () => {
-      Notify.create = vi.fn();
-      GroupService.associateGroupAndUser.mockImplementation(() => Promise.reject());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'negative' }));
-    });
-
-    it('should update permissions for current user', async () => {
-      wrapper.vm.userLogin = 'userLogin';
-      store.login = 'userLogin';
-      store.permissions = null;
-
-      GroupService.associateGroupAndUser.mockImplementation(() => Promise.resolve());
-      UserService.getMyPermissions.mockImplementation(() => Promise.resolve({ action: 'ACTION', entity: 'ENTITY' }));
-
-      await wrapper.vm.onSubmit();
-
-      expect(store.permissions).toEqual({ action: 'ACTION', entity: 'ENTITY' });
-    });
-  });
 });
diff --git a/tests/unit/components/dialog/AttachPermissionToRoleDialog.test.js b/tests/unit/components/dialog/AttachPermissionToRoleDialog.test.js
index 6f40d74c..fb91d39a 100644
--- a/tests/unit/components/dialog/AttachPermissionToRoleDialog.test.js
+++ b/tests/unit/components/dialog/AttachPermissionToRoleDialog.test.js
@@ -2,29 +2,22 @@ import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-v
 import { mount } from '@vue/test-utils';
 import { vi } from 'vitest';
 import AttachPermissionToRoleDialog from 'src/components/dialog/AttachPermissionToRoleDialog.vue';
-import * as UserService from 'src/services/UserService';
-import * as RoleService from 'src/services/RoleService';
 import * as PermissionService from 'src/services/PermissionService';
 import { Notify } from 'quasar';
 import { createPinia, setActivePinia } from 'pinia';
-import { useUserStore } from 'stores/UserStore';
 
 installQuasarPlugin({
   plugins: [Notify],
 });
 
-vi.mock('src/services/UserService');
-vi.mock('src/services/RoleService');
 vi.mock('src/services/PermissionService');
 vi.stubGlobal('$sanitize', true);
 
 describe('Test component: AttachPermissionToRoleDialog', () => {
   let wrapper;
-  let store;
 
   beforeEach(() => {
     setActivePinia(createPinia());
-    store = useUserStore();
 
     PermissionService.find.mockImplementation(() => Promise.resolve({ content: ['permissions'] }));
 
@@ -40,40 +33,4 @@ describe('Test component: AttachPermissionToRoleDialog', () => {
       expect(wrapper.vm.permissions).toEqual(['permissions']);
     });
   });
-
-  describe('Test function: onSubmit', () => {
-    beforeEach(() => {
-      wrapper.vm.selected = [{ id: '1' }, { id: '2' }];
-      wrapper.vm.roleId = 'roleId';
-    });
-
-    it('should send positive notification after attaching permissions to role', async () => {
-      Notify.create = vi.fn();
-      RoleService.associateRoleAndPermission.mockImplementation(() => Promise.resolve());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'positive' }));
-    });
-
-    it('should send negative notification after failing to attach permissions to role', async () => {
-      Notify.create = vi.fn();
-      RoleService.associateRoleAndPermission.mockImplementation(() => Promise.reject());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'negative' }));
-    });
-
-    it('should update permissions', async () => {
-      store.permissions = null;
-
-      RoleService.associateRoleAndPermission.mockImplementation(() => Promise.resolve());
-      UserService.getMyPermissions.mockImplementation(() => Promise.resolve({ action: 'ACTION', entity: 'ENTITY' }));
-
-      await wrapper.vm.onSubmit();
-
-      expect(store.permissions).toEqual({ action: 'ACTION', entity: 'ENTITY' });
-    });
-  });
 });
diff --git a/tests/unit/components/dialog/AttachRoleToUserDialog.test.js b/tests/unit/components/dialog/AttachRoleToUserDialog.test.js
index cf1e42ef..613c0ba6 100644
--- a/tests/unit/components/dialog/AttachRoleToUserDialog.test.js
+++ b/tests/unit/components/dialog/AttachRoleToUserDialog.test.js
@@ -3,27 +3,21 @@ import { mount } from '@vue/test-utils';
 import { vi } from 'vitest';
 import AttachRoleToUserDialog from 'src/components/dialog/AttachRoleToUserDialog.vue';
 import * as RoleService from 'src/services/RoleService';
-import * as UserService from 'src/services/UserService';
 import { Notify } from 'quasar';
 import { createPinia, setActivePinia } from 'pinia';
-import { useUserStore } from 'stores/UserStore';
 
 installQuasarPlugin({
   plugins: [Notify],
 });
 
 vi.mock('src/services/RoleService');
-vi.mock('src/services/UserService');
 vi.stubGlobal('$sanitize', true);
 
 describe('Test component: AttachRoleToUserDialog', () => {
   let wrapper;
-  let store;
 
   beforeEach(() => {
     setActivePinia(createPinia());
-    store = useUserStore();
-    store.login = 'login';
 
     RoleService.find.mockImplementation(() => Promise.resolve({ content: ['roles'] }));
 
@@ -39,42 +33,4 @@ describe('Test component: AttachRoleToUserDialog', () => {
       expect(wrapper.vm.roles).toEqual(['roles']);
     });
   });
-
-  describe('Test function: onSubmit', () => {
-    beforeEach(() => {
-      wrapper.vm.selected = [{ id: '1' }, { id: '2' }];
-      wrapper.vm.userLogin = 'userLogin';
-    });
-
-    it('should send positive notification after attaching roles to user', async () => {
-      Notify.create = vi.fn();
-      RoleService.associateRoleAndUser.mockImplementation(() => Promise.resolve());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'positive' }));
-    });
-
-    it('should send negative notification after failing to attach roles to user', async () => {
-      Notify.create = vi.fn();
-      RoleService.associateRoleAndUser.mockImplementation(() => Promise.reject());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'negative' }));
-    });
-
-    it('should update permissions for current user', async () => {
-      wrapper.vm.userLogin = 'userLogin';
-      store.login = 'userLogin';
-      store.permissions = null;
-
-      RoleService.associateRoleAndUser.mockImplementation(() => Promise.resolve());
-      UserService.getMyPermissions.mockImplementation(() => Promise.resolve({ action: 'ACTION', entity: 'ENTITY' }));
-
-      await wrapper.vm.onSubmit();
-
-      expect(store.permissions).toEqual({ action: 'ACTION', entity: 'ENTITY' });
-    });
-  });
 });
diff --git a/tests/unit/components/dialog/AttachUserToGroupDialog.test.js b/tests/unit/components/dialog/AttachUserToGroupDialog.test.js
index 4181455a..a6474cd2 100644
--- a/tests/unit/components/dialog/AttachUserToGroupDialog.test.js
+++ b/tests/unit/components/dialog/AttachUserToGroupDialog.test.js
@@ -3,30 +3,22 @@ import { mount } from '@vue/test-utils';
 import { vi } from 'vitest';
 import AttachUserToGroupDialog from 'src/components/dialog/AttachUserToGroupDialog.vue';
 import * as UserService from 'src/services/UserService';
-import * as GroupService from 'src/services/GroupService';
-import SelectEvent from 'src/composables/events/SelectEvent';
 import { Notify } from 'quasar';
 import { createPinia, setActivePinia } from 'pinia';
-import { useUserStore } from 'stores/UserStore';
 
 installQuasarPlugin({
   plugins: [Notify],
 });
 
 vi.mock('src/services/UserService');
-vi.mock('src/services/GroupService');
-vi.mock('src/composables/events/SelectEvent');
 vi.stubGlobal('$sanitize', true);
 
 describe('Test component: AttachUserToGroupDialog', () => {
   let wrapper;
-  let store;
   let data;
 
   beforeEach(() => {
     setActivePinia(createPinia());
-    store = useUserStore();
-    store.login = 'login';
 
     data = {
       content: ['users'],
@@ -52,51 +44,4 @@ describe('Test component: AttachUserToGroupDialog', () => {
       expect(wrapper.vm.users).toEqual(['users']);
     });
   });
-
-  describe('Test function: onSubmit', () => {
-    beforeEach(() => {
-      wrapper.vm.selected = [{ login: '1' }, { login: '2' }];
-      wrapper.vm.groupId = 'groupId';
-    });
-
-    it('should send SelectRoles event', async () => {
-      wrapper.vm.selectOnly = true;
-      SelectEvent.SelectUsersEvent.next = vi.fn();
-
-      await wrapper.vm.onSubmit();
-
-      expect(SelectEvent.SelectUsersEvent.next).toHaveBeenCalled();
-    });
-
-    it('should send positive notification after attaching users to group', async () => {
-      Notify.create = vi.fn();
-      GroupService.associateGroupAndUser.mockImplementation(() => Promise.resolve());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'positive' }));
-    });
-
-    it('should send negative notification after failing to attach users to group', async () => {
-      Notify.create = vi.fn();
-      GroupService.associateGroupAndUser.mockImplementation(() => Promise.reject());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'negative' }));
-    });
-
-    it('should update permissions for current user', async () => {
-      wrapper.vm.selected = [{ login: 'userLogin' }];
-      store.login = 'userLogin';
-      store.permissions = null;
-
-      GroupService.associateGroupAndUser.mockImplementation(() => Promise.resolve());
-      UserService.getMyPermissions.mockImplementation(() => Promise.resolve({ action: 'ACTION', entity: 'ENTITY' }));
-
-      await wrapper.vm.onSubmit();
-
-      expect(store.permissions).toEqual({ action: 'ACTION', entity: 'ENTITY' });
-    });
-  });
 });
diff --git a/tests/unit/components/dialog/AttachUserToRoleDialog.test.js b/tests/unit/components/dialog/AttachUserToRoleDialog.test.js
index c2637d94..aa34fe1b 100644
--- a/tests/unit/components/dialog/AttachUserToRoleDialog.test.js
+++ b/tests/unit/components/dialog/AttachUserToRoleDialog.test.js
@@ -3,28 +3,21 @@ import { mount } from '@vue/test-utils';
 import { vi } from 'vitest';
 import AttachUserToRoleDialog from 'src/components/dialog/AttachUserToRoleDialog.vue';
 import * as UserService from 'src/services/UserService';
-import * as RoleService from 'src/services/RoleService';
 import { Notify } from 'quasar';
 import { createPinia, setActivePinia } from 'pinia';
-import { useUserStore } from 'stores/UserStore';
 
 installQuasarPlugin({
   plugins: [Notify],
 });
 
 vi.mock('src/services/UserService');
-vi.mock('src/services/RoleService');
 vi.stubGlobal('$sanitize', true);
 
 describe('Test component: AttachUserToRoleDialog', () => {
   let wrapper;
-  let store;
 
   beforeEach(() => {
     setActivePinia(createPinia());
-    store = useUserStore();
-    store.login = 'login';
-
     UserService.find.mockImplementation(() => Promise.resolve({ content: ['users'] }));
 
     wrapper = mount(AttachUserToRoleDialog);
@@ -39,42 +32,4 @@ describe('Test component: AttachUserToRoleDialog', () => {
       expect(wrapper.vm.users).toEqual(['users']);
     });
   });
-
-  describe('Test function: onSubmit', () => {
-    beforeEach(() => {
-      wrapper.vm.selected = [{ login: '1' }, { login: '2' }];
-      wrapper.vm.roleId = 'roleId';
-    });
-
-    it('should send positive notification after attaching users to role', async () => {
-      Notify.create = vi.fn();
-      RoleService.associateRoleAndUser.mockImplementation(() => Promise.resolve());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'positive' }));
-    });
-
-    it('should send negative notification after failing to attach users to role', async () => {
-      Notify.create = vi.fn();
-      RoleService.associateRoleAndUser.mockImplementation(() => Promise.reject());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'negative' }));
-    });
-
-    it('should update permissions for current user', async () => {
-      wrapper.vm.selected = [{ login: 'userLogin' }];
-      store.login = 'userLogin';
-      store.permissions = null;
-
-      RoleService.associateRoleAndUser.mockImplementation(() => Promise.resolve());
-      UserService.getMyPermissions.mockImplementation(() => Promise.resolve({ action: 'ACTION', entity: 'ENTITY' }));
-
-      await wrapper.vm.onSubmit();
-
-      expect(store.permissions).toEqual({ action: 'ACTION', entity: 'ENTITY' });
-    });
-  });
 });
diff --git a/tests/unit/components/dialog/DetachGroupFromUserDialog.test.js b/tests/unit/components/dialog/DetachGroupFromUserDialog.test.js
index e728812a..ca3cb394 100644
--- a/tests/unit/components/dialog/DetachGroupFromUserDialog.test.js
+++ b/tests/unit/components/dialog/DetachGroupFromUserDialog.test.js
@@ -2,8 +2,6 @@ import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-v
 import { mount } from '@vue/test-utils';
 import { vi } from 'vitest';
 import DetachGroupFromUserDialog from 'src/components/dialog/DetachGroupFromUserDialog.vue';
-import * as GroupService from 'src/services/GroupService';
-import * as UserService from 'src/services/UserService';
 import { Notify } from 'quasar';
 import { createPinia, setActivePinia } from 'pinia';
 import { useUserStore } from 'stores/UserStore';
@@ -32,32 +30,7 @@ describe('Test component: DetachGroupFromUserDialog', () => {
     };
   });
 
-  describe('Test function: onSubmit', () => {
-    it('should send positive notification after detaching group from user', async () => {
-      Notify.create = vi.fn();
-      wrapper.vm.user = {
-        login: 'id',
-      };
-      GroupService.dissociateGroupAndUser.mockImplementation(() => Promise.resolve());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'positive' }));
-    });
-
-    it('should update permissions for current user', async () => {
-      wrapper.vm.user = {
-        login: 'userLogin',
-      };
-      store.login = 'userLogin';
-      store.permissions = null;
-
-      GroupService.dissociateGroupAndUser.mockImplementation(() => Promise.resolve());
-      UserService.getMyPermissions.mockImplementation(() => Promise.resolve({ action: 'ACTION', entity: 'ENTITY' }));
-
-      await wrapper.vm.onSubmit();
-
-      expect(store.permissions).toEqual({ action: 'ACTION', entity: 'ENTITY' });
-    });
+  it('should mount the component', () => {
+    expect(wrapper).not.toBeNull();
   });
 });
diff --git a/tests/unit/components/dialog/DetachRoleFromUserDialog.test.js b/tests/unit/components/dialog/DetachRoleFromUserDialog.test.js
index 8ec2222d..fc50ff08 100644
--- a/tests/unit/components/dialog/DetachRoleFromUserDialog.test.js
+++ b/tests/unit/components/dialog/DetachRoleFromUserDialog.test.js
@@ -2,12 +2,8 @@ import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-v
 import { mount } from '@vue/test-utils';
 import { vi } from 'vitest';
 import DetachRoleFromUserDialog from 'src/components/dialog/DetachRoleFromUserDialog.vue';
-import * as RoleService from 'src/services/RoleService';
-import * as UserService from 'src/services/UserService';
 import { Notify } from 'quasar';
 import { createPinia, setActivePinia } from 'pinia';
-import { useUserStore } from 'stores/UserStore';
-import DialogEvent from 'src/composables/events/DialogEvent';
 
 installQuasarPlugin({
   plugins: [Notify],
@@ -21,73 +17,14 @@ vi.stubGlobal('$sanitize', true);
 
 describe('Test component: DetachRoleFromUserDialog', () => {
   let wrapper;
-  let store;
 
   beforeEach(() => {
     setActivePinia(createPinia());
-    store = useUserStore();
-
-    RoleService.dissociateRoleAndUser.mockImplementation(() => Promise.resolve());
 
     wrapper = mount(DetachRoleFromUserDialog);
   });
 
-  describe('Test function: onSubmit', () => {
-    it('should send positive notification after detaching role from user', async () => {
-      Notify.create = vi.fn();
-
-      store.login = 'login';
-      wrapper.vm.user = {
-        login: 'id',
-      };
-      wrapper.vm.role = {
-        id: 'id',
-      };
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'positive' }));
-    });
-
-    it('should not open redirect dialog if current user has admin access', async () => {
-      Notify.create = vi.fn();
-      DialogEvent.next.mockImplementation();
-
-      store.login = 'id';
-      wrapper.vm.user = {
-        login: 'id',
-      };
-      wrapper.vm.role = {
-        id: 'id',
-      };
-
-      UserService.getMyPermissions.mockImplementation(() => Promise.resolve([{ action: 'ACCESS', entity: 'ADMIN' }]));
-
-      await wrapper.vm.onSubmit();
-
-      expect(DialogEvent.next).not.toBeCalled();
-    });
-
-    it('should open redirect dialog after losing admin access to current user', async () => {
-      Notify.create = vi.fn();
-      DialogEvent.next.mockImplementation();
-
-      store.login = 'id';
-      wrapper.vm.user = {
-        login: 'id',
-      };
-      wrapper.vm.role = {
-        id: 'id',
-      };
-
-      UserService.getMyPermissions.mockImplementation(() => Promise.resolve([{ action: 'ACTION', entity: 'ENTITY' }]));
-
-      await wrapper.vm.onSubmit();
-
-      expect(DialogEvent.next).toBeCalledWith({
-        key: 'redirect',
-        type: 'open',
-      });
-    });
+  it('should mount the component', () => {
+    expect(wrapper).not.toBeNull();
   });
 });
diff --git a/tests/unit/components/dialog/DetachUserFromGroupDialog.test.js b/tests/unit/components/dialog/DetachUserFromGroupDialog.test.js
index 3881b77c..9ae76e5f 100644
--- a/tests/unit/components/dialog/DetachUserFromGroupDialog.test.js
+++ b/tests/unit/components/dialog/DetachUserFromGroupDialog.test.js
@@ -2,8 +2,6 @@ import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-v
 import { mount } from '@vue/test-utils';
 import { vi } from 'vitest';
 import DetachUserFromGroupDialog from 'src/components/dialog/DetachUserFromGroupDialog.vue';
-import * as GroupService from 'src/services/GroupService';
-import * as UserService from 'src/services/UserService';
 import { Notify } from 'quasar';
 import { createPinia, setActivePinia } from 'pinia';
 import { useUserStore } from 'stores/UserStore';
@@ -32,32 +30,7 @@ describe('Test component: DetachUserFromGroupDialog', () => {
     };
   });
 
-  describe('Test function: onSubmit', () => {
-    it('should send positive notification after detaching group from user', async () => {
-      Notify.create = vi.fn();
-      wrapper.vm.user = {
-        login: 'id',
-      };
-      GroupService.dissociateGroupAndUser.mockImplementation(() => Promise.resolve());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'positive' }));
-    });
-
-    it('should update permissions for current user', async () => {
-      wrapper.vm.user = {
-        login: 'userLogin',
-      };
-      store.login = 'userLogin';
-      store.permissions = null;
-
-      GroupService.dissociateGroupAndUser.mockImplementation(() => Promise.resolve());
-      UserService.getMyPermissions.mockImplementation(() => Promise.resolve({ action: 'ACTION', entity: 'ENTITY' }));
-
-      await wrapper.vm.onSubmit();
-
-      expect(store.permissions).toEqual({ action: 'ACTION', entity: 'ENTITY' });
-    });
+  it('should mount the component', () => {
+    expect(wrapper).not.toBeNull();
   });
 });
diff --git a/tests/unit/components/dialog/DetachUserFromRoleDialog.test.js b/tests/unit/components/dialog/DetachUserFromRoleDialog.test.js
index f969f154..cb5f4601 100644
--- a/tests/unit/components/dialog/DetachUserFromRoleDialog.test.js
+++ b/tests/unit/components/dialog/DetachUserFromRoleDialog.test.js
@@ -2,8 +2,6 @@ import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-v
 import { mount } from '@vue/test-utils';
 import { vi } from 'vitest';
 import DetachUserFromRoleDialog from 'src/components/dialog/DetachUserFromRoleDialog.vue';
-import * as RoleService from 'src/services/RoleService';
-import * as UserService from 'src/services/UserService';
 import { Notify } from 'quasar';
 import { createPinia, setActivePinia } from 'pinia';
 import { useUserStore } from 'stores/UserStore';
@@ -32,32 +30,7 @@ describe('Test component: DetachUserFromRoleDialog', () => {
     };
   });
 
-  describe('Test function: onSubmit', () => {
-    it('should send positive notification after detaching user from role', async () => {
-      Notify.create = vi.fn();
-      wrapper.vm.user = {
-        login: 'id',
-      };
-      RoleService.dissociateRoleAndUser.mockImplementation(() => Promise.resolve());
-
-      await wrapper.vm.onSubmit();
-
-      expect(Notify.create).toHaveBeenCalledWith(expect.objectContaining({ type: 'positive' }));
-    });
-
-    it('should update permissions for current user', async () => {
-      wrapper.vm.user = {
-        login: 'userLogin',
-      };
-      store.login = 'userLogin';
-      store.permissions = [];
-
-      RoleService.dissociateRoleAndUser.mockImplementation(() => Promise.resolve());
-      UserService.getMyPermissions.mockImplementation(() => Promise.resolve([{ action: 'ACTION', entity: 'ENTITY' }]));
-
-      await wrapper.vm.onSubmit();
-
-      expect(store.permissions).toEqual([{ action: 'ACTION', entity: 'ENTITY' }]);
-    });
+  it('should mount the component', () => {
+    expect(wrapper).not.toBeNull();
   });
 });
diff --git a/tests/unit/composables/AttachDialog.test.js b/tests/unit/composables/AttachDialog.test.js
new file mode 100644
index 00000000..5ba99564
--- /dev/null
+++ b/tests/unit/composables/AttachDialog.test.js
@@ -0,0 +1,221 @@
+import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-vitest';
+import { mount } from '@vue/test-utils';
+import { Notify } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useUserStore } from 'src/stores/UserStore';
+import { vi } from 'vitest';
+import { useAttachDialog } from 'src/composables/AttachDialog';
+import ReloadUsersEvent from 'src/composables/events/ReloadUsersEvent';
+import ReloadGroupsEvent from 'src/composables/events/ReloadGroupsEvent';
+import ReloadRolesEvent from 'src/composables/events/ReloadRolesEvent';
+import ReloadPermissionsEvent from 'src/composables/events/ReloadPermissionsEvent';
+import * as GroupService from 'src/services/GroupService';
+import * as RoleService from 'src/services/RoleService';
+import * as UserService from 'src/services/UserService';
+
+installQuasarPlugin({
+  plugins: [Notify],
+});
+
+vi.mock('src/composables/events/ReloadUsersEvent');
+vi.mock('src/composables/events/ReloadGroupsEvent');
+vi.mock('src/composables/events/ReloadRolesEvent');
+vi.mock('src/composables/events/ReloadPermissionsEvent');
+vi.mock('src/services/GroupService');
+vi.mock('src/services/RoleService');
+vi.mock('src/services/UserService');
+vi.mock('src/stores/UserStore');
+vi.mock('vue-i18n');
+
+describe('Test: useAttachDialog', () => {
+  let wrapper;
+  let userStore;
+
+  beforeEach(() => {
+    userStore = {
+      login: 'current_user',
+      isAdmin: false,
+      permissions: [],
+    };
+    useUserStore.mockReturnValue(userStore);
+
+    ReloadUsersEvent.next = vi.fn();
+    ReloadGroupsEvent.next = vi.fn();
+    ReloadRolesEvent.next = vi.fn();
+    ReloadPermissionsEvent.next = vi.fn();
+
+    UserService.getMyPermissions.mockImplementation(() => Promise.resolve('updated user permissions'));
+
+    useI18n.mockReturnValue({
+      t: (key) => key,
+    });
+  });
+
+  /**
+   * Mount component with composable.
+   * @param {string} dialogName - Name of the dialog.
+   * @param {string} key - Dialog event key.
+   * @param {string} source - The entity that another entity is being detached from.
+   * @param {string} target - The detached entity.
+   */
+  function mountComponent(dialogName = 'testDialog', key = 'testKey', source = 'group', target = 'user') {
+    wrapper = mount({
+      template: '<div id="dialog" v-if="show"></div>',
+      components: { useAttachDialog },
+      setup() {
+        return useAttachDialog(dialogName, key, source, target);
+      },
+    });
+
+    wrapper.vm.show = true;
+  }
+
+  describe('Test function: reloadEvent', () => {
+    it('should call ReloadUserEvent when the target is "user"', async () => {
+      mountComponent('testDialog', 'testKey', 'source', 'user');
+      wrapper.vm.roleId = 'role1';
+      wrapper.vm.userLogin = 'user1';
+
+      await wrapper.vm.attach();
+
+      expect(ReloadUsersEvent.next).toHaveBeenCalled();
+    });
+
+    it('should call ReloadGroupsEvent when the target is "group"', async () => {
+      mountComponent('testDialog', 'testKey', 'source', 'group');
+      wrapper.vm.groupId = 'group1';
+      wrapper.vm.userLogin = 'user1';
+
+      await wrapper.vm.attach();
+
+      expect(ReloadGroupsEvent.next).toHaveBeenCalled();
+    });
+
+    it('should call ReloadRolesEvent when the target is "role"', async () => {
+      mountComponent('testDialog', 'testKey', 'source', 'role');
+      wrapper.vm.roleId = 'role1';
+      wrapper.vm.userLogin = 'user1';
+
+      await wrapper.vm.attach();
+
+      expect(ReloadRolesEvent.next).toHaveBeenCalled();
+    });
+
+    it('should call ReloadPermissionsEvent otherwise', async () => {
+      mountComponent('testDialog', 'testKey', 'source', 'permission');
+      wrapper.vm.roleId = 'role1';
+      wrapper.vm.userLogin = 'user1';
+
+      await wrapper.vm.attach();
+
+      expect(ReloadPermissionsEvent.next).toHaveBeenCalled();
+    });
+  });
+
+  describe('Test function: associate', () => {
+    it('should call associateGroupAndUser if source is "user" and target is "group"', async () => {
+      mountComponent('testDialog', 'testKey', 'user', 'group');
+      wrapper.vm.userLogin = 'user1';
+      wrapper.vm.selected = [{ id: 'group1' }];
+
+      await wrapper.vm.attach();
+
+      expect(GroupService.associateGroupAndUser).toHaveBeenCalledWith('user1', 'group1');
+    });
+
+    it('should call associateGroupAndUser if source is "group" and target is "user"', async () => {
+      mountComponent('testDialog', 'testKey', 'group', 'user');
+      wrapper.vm.groupId = 'group1';
+      wrapper.vm.selected = [{ login: 'user1' }];
+
+      await wrapper.vm.attach();
+
+      expect(GroupService.associateGroupAndUser).toHaveBeenCalledWith('user1', 'group1');
+    });
+
+    it('should call associateRoleAndUser if source is "role" and target is "user"', async () => {
+      mountComponent('testDialog', 'testKey', 'role', 'user');
+      wrapper.vm.roleId = 'role1';
+      wrapper.vm.selected = [{ login: 'user1' }];
+
+      await wrapper.vm.attach();
+
+      expect(RoleService.associateRoleAndUser).toHaveBeenCalledWith('user1', 'role1');
+    });
+
+    it('should call associateRoleAndUser if source is "user" and target is "role"', async () => {
+      mountComponent('testDialog', 'testKey', 'user', 'role');
+      wrapper.vm.userLogin = 'user1';
+      wrapper.vm.selected = [{ id: 'role1' }];
+      userStore.login = 'user1';
+
+      await wrapper.vm.attach();
+
+      expect(RoleService.associateRoleAndUser).toHaveBeenCalledWith('user1', 'role1');
+    });
+
+    it('should call associateRoleAndPermission if target is "permission"', async () => {
+      mountComponent('testDialog', 'testKey', 'source', 'permission');
+      wrapper.vm.roleId = 'role1';
+      wrapper.vm.selected = [{ id: 'permission1' }];
+
+      await wrapper.vm.attach();
+
+      expect(RoleService.associateRoleAndPermission).toHaveBeenCalledWith('role1', 'permission1');
+    });
+  });
+
+  describe('Test function: onSubmit', () => {
+    beforeEach(() => {
+      mountComponent('testDialog', 'testKey', 'group', 'user');
+      wrapper.vm.groupId = 'group1';
+      wrapper.vm.userLogin = 'user1';
+      wrapper.vm.selected = [{ login: 'user1' }];
+      wrapper.vm.submitting = true;
+      wrapper.vm.selectOnly = true;
+      userStore.permissions = 'user permissions';
+
+      Notify.create = vi.fn();
+    });
+
+    it('should call appropriate event reload and service with dissociate function, then show success notification', async () => {
+      await wrapper.vm.attach();
+
+      expect(ReloadUsersEvent.next).toHaveBeenCalled();
+      expect(GroupService.associateGroupAndUser).toHaveBeenCalledWith('user1', 'group1');
+      expect(Notify.create).toHaveBeenCalledWith({
+        type: 'positive',
+        message: 'testDialog.text.notifySuccess',
+        html: true,
+      });
+      expect(wrapper.vm.show).toBeFalsy();
+      expect(wrapper.vm.submitting).toBeFalsy();
+    });
+
+    it('should handle error and show error notification', async () => {
+      GroupService.associateGroupAndUser.mockImplementation(() => Promise.reject());
+
+      await wrapper.vm.attach();
+
+      expect(Notify.create).toHaveBeenCalledWith({
+        type: 'negative',
+        message: 'testDialog.text.notifyError',
+        html: true,
+      });
+      expect(wrapper.vm.show).toBeTruthy();
+      expect(wrapper.vm.submitting).toBeFalsy();
+    });
+
+    it('should update user permission', async () => {
+      wrapper.vm.userLogin = 'user1';
+      wrapper.vm.selected = [{ login: 'user2' }];
+      userStore.login = 'user2';
+
+      expect(userStore.permissions).toEqual('user permissions');
+
+      await wrapper.vm.attach();
+
+      expect(userStore.permissions).toEqual('updated user permissions');
+    });
+  });
+});
diff --git a/tests/unit/composables/DetachDialog.test.js b/tests/unit/composables/DetachDialog.test.js
new file mode 100644
index 00000000..d92a4361
--- /dev/null
+++ b/tests/unit/composables/DetachDialog.test.js
@@ -0,0 +1,206 @@
+import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-vitest';
+import { mount } from '@vue/test-utils';
+import { Notify } from 'quasar';
+import { useI18n } from 'vue-i18n';
+import { useUserStore } from 'src/stores/UserStore';
+import { vi } from 'vitest';
+import { useDetachDialog } from 'src/composables/DetachDialog';
+import DialogEvent from 'src/composables/events/DialogEvent';
+import ReloadUsersEvent from 'src/composables/events/ReloadUsersEvent';
+import ReloadGroupsEvent from 'src/composables/events/ReloadGroupsEvent';
+import ReloadRolesEvent from 'src/composables/events/ReloadRolesEvent';
+import * as GroupService from 'src/services/GroupService';
+import * as RoleService from 'src/services/RoleService';
+import * as UserService from 'src/services/UserService';
+
+installQuasarPlugin({
+  plugins: [Notify],
+});
+
+vi.mock('src/composables/events/DialogEvent');
+vi.mock('src/composables/events/ReloadUsersEvent');
+vi.mock('src/composables/events/ReloadGroupsEvent');
+vi.mock('src/composables/events/ReloadRolesEvent');
+vi.mock('src/services/GroupService');
+vi.mock('src/services/RoleService');
+vi.mock('src/services/UserService');
+vi.mock('src/stores/UserStore');
+vi.mock('vue-i18n');
+
+describe('Test: useDetachDialog', () => {
+  let wrapper;
+  let userStore;
+
+  beforeEach(() => {
+    userStore = {
+      login: 'current_user',
+      isAdmin: false,
+      permissions: [],
+    };
+    useUserStore.mockReturnValue(userStore);
+
+    ReloadUsersEvent.next = vi.fn();
+    ReloadGroupsEvent.next = vi.fn();
+    ReloadRolesEvent.next = vi.fn();
+
+    useI18n.mockReturnValue({
+      t: (key) => key,
+    });
+  });
+
+  /**
+   * Mount component with composable.
+   * @param {string} dialogName - Name of the dialog.
+   * @param {string} key - Dialog event key.
+   * @param {string} source - The entity that another entity is being detached from.
+   * @param {string} target - The detached entity.
+   */
+  function mountComponent(dialogName = 'testDialog', key = 'testKey', source = 'group', target = 'user') {
+    wrapper = mount({
+      template: '<div id="dialog" v-if="show"></div>',
+      components: { useDetachDialog },
+      setup() {
+        return useDetachDialog(dialogName, key, source, target);
+      },
+    });
+
+    wrapper.vm.show = true;
+  }
+
+  describe('Test function: reloadEvent', () => {
+    it('should call ReloadUserEvent when the target is "user"', async () => {
+      mountComponent('testDialog', 'testKey', 'source', 'user');
+      wrapper.vm.role = { id: 'role1' };
+      wrapper.vm.user = { login: 'user1' };
+
+      await wrapper.vm.detach();
+
+      expect(ReloadUsersEvent.next).toHaveBeenCalled();
+    });
+
+    it('should call ReloadGroupsEvent when the target is "group"', async () => {
+      mountComponent('testDialog', 'testKey', 'source', 'group');
+      wrapper.vm.group = { id: 'group1' };
+      wrapper.vm.user = { login: 'user1' };
+
+      await wrapper.vm.detach();
+
+      expect(ReloadGroupsEvent.next).toHaveBeenCalled();
+    });
+
+    it('should call ReloadRolesEvent when the target is "role"', async () => {
+      mountComponent('testDialog', 'testKey', 'source', 'role');
+      wrapper.vm.role = { id: 'role1' };
+      wrapper.vm.user = { login: 'user1' };
+
+      await wrapper.vm.detach();
+
+      expect(ReloadRolesEvent.next).toHaveBeenCalled();
+    });
+  });
+
+  describe('Test function: dissociate', () => {
+    it('should call dissociateGroupAndUser if source or target is group', async () => {
+      mountComponent('testDialog', 'testKey', 'group', 'user');
+      wrapper.vm.user = { login: 'user1' };
+      wrapper.vm.group = { id: 'group1' };
+
+      await wrapper.vm.detach();
+
+      expect(GroupService.dissociateGroupAndUser).toHaveBeenCalledWith('user1', 'group1');
+    });
+
+    it('should call dissociateRoleAndUser if source or target is role', async () => {
+      mountComponent('testDialog', 'testKey', 'role', 'user');
+      wrapper.vm.user = { login: 'user1' };
+      wrapper.vm.role = { id: 'role1' };
+
+      await wrapper.vm.detach();
+
+      expect(RoleService.dissociateRoleAndUser).toHaveBeenCalledWith('user1', 'role1');
+    });
+  });
+
+  describe('Test function: manageUserRolePermissions', () => {
+    beforeEach(() => {
+      mountComponent('testDialog', 'testKey', 'user', 'role');
+      userStore.login = 'user1';
+      userStore.permissions = 'user permissions';
+      wrapper.vm.role = { id: 'role1' };
+      wrapper.vm.user = { login: 'user1' };
+
+      UserService.getMyPermissions.mockImplementation(() => Promise.resolve('updated user permissions'));
+      DialogEvent.next.mockReset();
+    });
+
+    it('should update user permissions and call DialogEvent when user is current and not admin', async () => {
+      userStore.isAdmin = false;
+
+      await wrapper.vm.detach();
+
+      expect(userStore.permissions).toEqual('updated user permissions');
+      expect(DialogEvent.next).toHaveBeenCalled();
+    });
+
+    it('should update user permissions and call reload event when user is current and admin', async () => {
+      userStore.isAdmin = true;
+
+      await wrapper.vm.detach();
+
+      expect(userStore.permissions).toEqual('updated user permissions');
+      expect(ReloadRolesEvent.next).toHaveBeenCalled();
+      expect(DialogEvent.next).not.toHaveBeenCalled();
+    });
+
+    it('should only call reload event when user is not current', async () => {
+      wrapper.vm.user = { login: 'notCurrent' };
+
+      await wrapper.vm.detach();
+
+      expect(ReloadRolesEvent.next).toHaveBeenCalled();
+      expect(DialogEvent.next).not.toHaveBeenCalled();
+      expect(userStore.permissions).toEqual('user permissions');
+    });
+  });
+
+  describe('Test function: detach', () => {
+    beforeEach(() => {
+      mountComponent('testDialog', 'testKey', 'group', 'user');
+      wrapper.vm.group = { id: 'group1' };
+      wrapper.vm.user = { login: 'user1' };
+      wrapper.vm.submitting = true;
+
+      Notify.create = vi.fn();
+    });
+
+    it('should call appropriate event reload and service with dissociate function, then show success notification', async () => {
+      userStore.login = 'user1';
+
+      await wrapper.vm.detach();
+
+      expect(ReloadUsersEvent.next).toHaveBeenCalled();
+      expect(GroupService.dissociateGroupAndUser).toHaveBeenCalledWith('user1', 'group1');
+      expect(Notify.create).toHaveBeenCalledWith({
+        type: 'positive',
+        message: 'testDialog.text.notifySuccess',
+        html: true,
+      });
+      expect(wrapper.vm.show).toBeFalsy();
+      expect(wrapper.vm.submitting).toBeFalsy();
+    });
+
+    it('should handle error and show error notification', async () => {
+      GroupService.dissociateGroupAndUser.mockRejectedValueOnce(new Error('Error'));
+
+      await wrapper.vm.detach();
+
+      expect(Notify.create).toHaveBeenCalledWith({
+        type: 'negative',
+        message: 'testDialog.text.notifyError',
+        html: true,
+      });
+      expect(wrapper.vm.show).toBeFalsy();
+      expect(wrapper.vm.submitting).toBeFalsy();
+    });
+  });
+});