add a confirm dialog when deleting a group invitation link

src/i18n/en_US.json

@@ -345,6 +345,7 @@
   "Delete group resources": "Delete group resources",
   "Delete group": "Delete group",
   "Delete invitation":"Delete invitation",
+  "Delete invitation?":"Delete invitation?",
   "Delete my account": "Delete my account",
   "Delete post": "Delete post",
   "Delete profiles": "Delete profiles",
@@ -377,6 +378,7 @@
   "Do not receive any mail": "Do not receive any mail",
   "Do you really want to ban the account \u00ab\u00a0{emailAccount}\u00a0\u00bb\u00a0?": "Do you really want to ban the account \u00ab\u00a0{emailAccount}\u00a0\u00bb\u00a0?",
   "Do you really want to ban this account? All of the user's profiles will be deleted.": "Do you really want to ban this account? All of the user's profiles will be deleted.",
+  "Do you really want to delete this invitation link to this group?":"Do you really want to delete this invitation link to this group?",
   "Do you really want to suspend this profile? All of the profiles content will be deleted.": "Do you really want to suspend this profile? All of the profiles content will be deleted.",
   "Do you really want to unban this account? The user will be able to log-in again.":"Do you really want to unban this account? The user will be able to log-in again.",
   "Do you want to join the group {groupName} with the profile {preferredUsername} ?": "Do you want to join the group {groupName} with the profile {preferredUsername} ?",

src/i18n/fr_FR.json

@@ -345,6 +345,7 @@
   "Delete group resources": "Supprimer des ressources de groupes",
   "Delete group": "Supprimer le groupe",
   "Delete invitation":"Supprimer l'invitation",
+  "Delete invitation?":"Supprimer l'invitation ?",
   "Delete my account": "Supprimer mon compte",
   "Delete post": "Supprimer le billet",
   "Delete profiles": "Supprimer des profils",
@@ -377,6 +378,7 @@
   "Do not receive any mail": "Ne pas recevoir d'e-mail",
   "Do you really want to ban the account \u00ab\u00a0{emailAccount}\u00a0\u00bb\u00a0?": "Voulez-vous vraiment bannir le compte \u00ab\u00a0{emailAccount}\u00a0\u00bb\u00a0?",
   "Do you really want to ban this account? All of the user's profiles will be deleted.": "Voulez-vous vraiment bannir ce compte\u00a0? Tous les profils de cet\u00b7te utilisateur\u00b7ice seront supprim\u00e9s.",
+  "Do you really want to delete this invitation link to this group?":"Voulez-vous vraiment supprimer ce lien d'invitation pour ce groupe ?",
   "Do you really want to suspend this profile? All of the profiles content will be deleted.": "Voulez-vous vraiment suspendre ce profil\u00a0? Tout le contenu du profil sera supprim\u00e9.",
   "Do you really want to unban this account? The user will be able to log-in again.": "Voulez-vous vraiment d\u00e9bannir ce compte\u00a0? L'utilisateur pourra \u00e0 nouveau se connecter.",
   "Do you want to join the group {groupName} with the profile {preferredUsername} ?": "Voulez-vous rejoindre le groupe {groupName} avec le profil {preferredUsername} ?",

src/views/Group/GroupInvitations.vue

@@ -99,10 +99,7 @@
               icon-left="share"
               @click="
                 triggerShare(
-                  invitationUrl(
-                    group,
-                    groupInvitationsResult.listInvitations[0].token
-                  )
+                  invitationUrl(groupInvitationsResult.listInvitations[0].token)
                 )
               "
               variant="primary"
@@ -151,7 +148,7 @@
               <o-button
                 v-if="props.row.token"
                 icon-left="share"
-                @click="triggerShare(invitationUrl(group, props.row.token))"
+                @click="triggerShare(invitationUrl(props.row.token))"
                 variant="primary"
                 >{{ t("Share link") }}</o-button
               >
@@ -219,13 +216,14 @@ import { usernameWithDomain, displayName, IGroup } from "@/types/actor";
 import { useHead } from "@/utils/head";
 import { useI18n } from "vue-i18n";
 import { useMutation, useQuery } from "@vue/apollo-composable";
-import { computed, ref, watch } from "vue";
+import { computed, inject, ref, watch } from "vue";
 import { useGroup } from "@/composition/apollo/group";
 import { IInvitation } from "@/types/actor/invitation.model";
 import { useCurrentActorClient } from "@/composition/apollo/actor";
 import ShareModal from "@/components/Share/ShareModal.vue";
 import { IMember } from "@/types/actor/member.model";
 import { GROUP_MEMBERS, INVITE_MEMBER } from "@/graphql/member";
+import { Dialog } from "@/plugins/dialog";
 
 const { t } = useI18n({ useScope: "global" });
 
@@ -242,6 +240,19 @@ const {
   error: groupError,
 } = useGroup(preferredUsername);
 
+function invitationUrl(token: string) {
+  return (
+    window.location.origin +
+    router.resolve({
+      name: RouteName.GROUP_INVITATION_ACCEPT,
+      params: {
+        preferredUsername: group.value?.preferredUsername,
+        token,
+      },
+    }).href
+  );
+}
+
 // -------------------------------------------------------------
 // Member invitation
 // -------------------------------------------------------------
@@ -315,7 +326,7 @@ const {
 } = useMutation(GROUP_INVITATIONS_CREATE);
 
 onCreateGroupInvitationDone(() => {
-  // TODO : pas de refetch, mise à jour du cache
+  // TODO: No refetch, but update the cache
   groupInvitationsRefetch();
 });
 
@@ -338,7 +349,7 @@ const {
 } = useMutation(GROUP_INVITATIONS_UPDATE);
 
 onUpdateGroupInvitationDone(() => {
-  // TODO : pas de refetch, mise à jour du cache
+  // TODO: No refetch, but update the cache
   groupInvitationsRefetch();
   updateInvitationToken.value = "";
   updateInvitationLabel.value = "";
@@ -377,7 +388,7 @@ const {
 } = useMutation(GROUP_INVITATIONS_DELETE);
 
 deleteGroupInvitationDone(() => {
-  // TODO : pas de refetch, mise à jour du cache
+  // TODO: No refetch, but update the cache
   groupInvitationsRefetch();
 });
 
@@ -385,10 +396,24 @@ deleteGroupInvitationError((error) => {
   alert(error.message);
 });
 
-const actionDeleteGroupInvitation = (token: string) => {
-  deleteGroupInvitation({
-    groupId: group.value?.id,
-    token: token,
+const dialog = inject<Dialog>("dialog");
+
+const actionDeleteGroupInvitation = async (token: string): Promise<void> => {
+  dialog?.confirm({
+    title: t("Delete invitation?"),
+    message:
+      t("Do you really want to delete this invitation link to this group?") +
+      "<br/>" +
+      invitationUrl(token),
+    confirmText: t("Delete invitation"),
+    cancelText: t("Cancel"),
+    variant: "danger",
+    onConfirm: async () => {
+      deleteGroupInvitation({
+        groupId: group.value?.id,
+        token: token,
+      });
+    },
   });
 };
 
@@ -398,19 +423,6 @@ const actionDeleteGroupInvitation = (token: string) => {
 
 const router = useRouter();
 
-function invitationUrl(group: IGroup, token: string) {
-  return (
-    window.location.origin +
-    router.resolve({
-      name: RouteName.GROUP_INVITATION_ACCEPT,
-      params: {
-        preferredUsername: group.preferredUsername,
-        token,
-      },
-    }).href
-  );
-}
-
 const isShareModalActive = ref(false);
 const selectedURL = ref("");