Add a special design for one group invitation link

Update texts

src/i18n/en_US.json

@@ -1,6 +1,7 @@
 {
   "#{tag}": "#{tag}",
   "(Masked)": "(Masked)",
+  "(No label defined)" : "(No label defined",
   "(this folder)": "(this folder)",
   "(this link)": "(this link)",
   "+ Add a resource": "+ Add a resource",
@@ -626,7 +627,8 @@
   "Interact": "Interact",
   "Invitation URL":"Invitation URL",
   "Invitation links": "Invitation links",
-  "Invitations": "Invitations",
+  "Invitations to join the group": "Invitations to join the group",
+  "Invitations":"Invitations",
   "Invite a new member": "Invite a new member",
   "Invite link": "Invite link",
   "Invite member": "Invite member",
@@ -1489,6 +1491,7 @@
   "You can add resources by using the button above.": "You can add resources by using the button above.",
   "You can add tags by hitting the Enter key or by adding a comma": "You can add tags by hitting the Enter key or by adding a comma",
   "You can create a new profile or change the actual profile with the top menu.": "You can create a new profile or change the actual profile with the top menu.",
+  "You can create another invitation link with the button \"New invitation\".":  "You can create another invitation link with the button \"New invitation\".",
   "You can drag and drop the marker below to the desired location": "You can drag and drop the marker below to the desired location",
   "You can pick your timezone into your preferences.": "You can pick your timezone into your preferences.",
   "You can put any arbitrary content in this element. URLs will be clickable.": "You can put any arbitrary content in this element. URLs will be clickable.",

src/i18n/fr_FR.json

@@ -1,6 +1,7 @@
 {
   "#{tag}": "#{tag}",
   "(Masked)": "(Masqu\u00e9)",
+  "(No label defined)" : "(Aucun nom défini)",
   "(this folder)": "(ce dossier)",
   "(this link)": "(ce lien)",
   "+ Add a resource": "+ Ajouter une ressource",
@@ -388,7 +389,7 @@
   "Drafts": "Brouillons",
   "Due on": "Pr\u00e9vu pour le",
   "Duplicate": "Dupliquer",
-  "Edit label": "Modifier le label",
+  "Edit label": "Modifier le nom",
   "Edit post": "\u00c9diter le billet",
   "Edit profile {profile}": "\u00c9diter le profil {profile}",
   "Edit user email": "\u00c9diter l'e-mail de l'utilisateur\u00b7ice",
@@ -626,8 +627,9 @@
   "Interact": "Interagir",
   "Invitation URL":"Lien de l'invitation",
   "Invitation links": "Liens d'invitation",
-  "Invitations" : "Invitations",
+  "Invitations to join the group" : "Invitations à rejoindre le groupe",
-  "Invite a new member": "Inviter un nouveau membre",
+  "Invitations":"Invitations",
+  "Invite a new member": "Nouveau membre",
   "Invite link": "Lien d'invitation",
   "Invite member": "Inviter un\u00b7e membre",
   "Invited": "Invit\u00e9\u00b7e",
@@ -644,7 +646,7 @@
   "Keep the entire conversation about a specific topic together on a single page.": "Rassemblez sur une seule page toute la conversation \u00e0 propos d'un sujet sp\u00e9cifique.",
   "Key words": "Mots cl\u00e9s",
   "Keyword, event title, group name, etc.": "Mot cl\u00e9, titre d'un \u00e9v\u00e9nement, nom d'un groupe, etc.",
-  "Label": "Label",
+  "Label": "Nom",
   "Language": "Langue",
   "Languages": "Langues",
   "Last IP adress": "Derni\u00e8re adresse IP",
@@ -1383,7 +1385,7 @@
   "Update group posts": "Mettre \u00e0 jour des billets de groupes",
   "Update group resources": "Mettre \u00e0 jour des ressources de groupes",
   "Update group": "Mettre \u00e0 jour le groupe",
-  "Update label" : "Mettre à jour le label",
+  "Update label" : "Mettre à jour le nom",
   "Update my event": "Mettre \u00e0 jour mon \u00e9v\u00e9nement",
   "Update my profile": "Mettre \u00e0 jour mon profil",
   "Update post": "Mettre \u00e0 jour le billet",
@@ -1486,6 +1488,7 @@
   "You can add resources by using the button above.": "Vous pouvez ajouter des ressources en utilisant le bouton au dessus.",
   "You can add tags by hitting the Enter key or by adding a comma": "Vous pouvez ajouter des tags en appuyant sur la touche Entr\u00e9e ou bien en ajoutant une virgule",
   "You can create a new profile or change the actual profile with the top menu.": "Vous pouvez créer un nouveau profil ou changer l'actuel à l'aide du menu supérieur.",
+  "You can create another invitation link with the button \"New invitation\"." : "Vous pouvez créer un lien supplémentaire avec le bouton \"Nouvelle invitation\".",
   "You can drag and drop the marker below to the desired location": "Vous pouvez faire glisser et d\u00e9poser le marqueur ci-dessous \u00e0 l'endroit souhait\u00e9",
   "You can pick your timezone into your preferences.": "Vous pouvez choisir votre fuseau horaire dans vos pr\u00e9f\u00e9rences.",
   "You can put any arbitrary content in this element. URLs will be clickable.": "Vous pouvez placer n'importe quel contenu arbitraire dans cet \u00e9l\u00e9ment. Les URL seront cliquables.",

src/views/Group/GroupInvitations.vue

@@ -28,7 +28,7 @@
       ]"
     />
     <section class="container mx-auto section">
-      <h1>{{ t("Invitations") }}</h1>
+      <h1>{{ t("Invitations to join the group") }}</h1>
 
       <h2>{{ t("Member invitation") }}</h2>
       <form @submit.prevent="inviteMember">
@@ -52,7 +52,7 @@
       </form>
 
       <h2>{{ t("Group invitation links") }}</h2>
-      <o-field groupedClass="flex-wrap" grouped>
+      <o-field>
         <o-button
           variant="primary"
           :loading="createGroupInvitationLoading"
@@ -74,6 +74,17 @@
         }}</o-notification>
       </div>
       <div v-else-if="groupInvitationsResult">
+        <o-modal
+          :close-button-aria-label="t('Close')"
+          v-model:active="isShareModalActive"
+        >
+          <ShareModal
+            :title="t('Share this group invitation link')"
+            :text="t('Join my group')"
+            :url="selectedURL"
+            :input-label="t('Invitation URL')"
+          ></ShareModal>
+        </o-modal>
         <div v-if="!groupInvitationsResult.listInvitations.length">
           <o-notification type="info" variant="info">{{
             t(
@@ -81,19 +92,41 @@
             )
           }}</o-notification>
         </div>
+        <div v-else-if="groupInvitationsResult.listInvitations.length == 1">
+          <o-field class="flex gap-1 flex-wrap">
+            <o-button
+              v-if="groupInvitationsResult.listInvitations[0].token"
+              icon-left="share"
+              @click="
+                triggerShare(
+                  invitationUrl(
+                    group,
+                    groupInvitationsResult.listInvitations[0].token
+                  )
+                )
+              "
+              variant="primary"
+              >{{ t("Share link") }}</o-button
+            >
+            <o-button
+              variant="danger"
+              icon-left="delete"
+              @click="
+                actionDeleteGroupInvitation(
+                  groupInvitationsResult.listInvitations[0].token
+                )
+              "
+              :loading="deleteGroupInvitationLoading"
+              >{{ t("Delete invitation") }}</o-button
+            >
+          </o-field>
+          <o-notification type="info" variant="info">{{
+            t(
+              'You can create another invitation link with the button "New invitation".'
+            )
+          }}</o-notification>
+        </div>
         <div v-else>
-          <o-modal
-            :close-button-aria-label="t('Close')"
-            v-model:active="isShareModalActive"
-          >
-            <ShareModal
-              :title="t('Share this group invitation link')"
-              :text="t('Join my group')"
-              :url="selectedURL"
-              :input-label="t('Invitation URL')"
-            ></ShareModal>
-          </o-modal>
-
           <o-table :data="groupInvitationsResult.listInvitations">
             <o-table-column
               field="label"
@@ -106,7 +139,8 @@
                 :placeholder="t('Label')"
                 v-model="updateInvitationLabel"
               />
-              <span v-else>{{ props.row.label }}</span>
+              <span v-else-if="props.row.label">{{ props.row.label }}</span>
+              <span v-else>{{ t("(No label defined)") }}</span>
             </o-table-column>
             <o-table-column
               field="token"
@@ -117,12 +151,7 @@
               <o-button
                 v-if="props.row.token"
                 icon-left="share"
-                @click="
+                @click="triggerShare(invitationUrl(group, props.row.token))"
-                  triggerShare(
-                    invitationUrl(group, props.row.token),
-                    props.row.label
-                  )
-                "
                 variant="primary"
                 >{{ t("Share link") }}</o-button
               >
@@ -226,7 +255,7 @@ const {
 } = useMutation<{ inviteMember: IMember }>(INVITE_MEMBER, () => ({}));
 
 onInviteMemberError((error) => {
-  console.error(error);
+  console.error("onInviteMemberError:", error);
   if (error.graphQLErrors && error.graphQLErrors.length > 0) {
     alert(error.graphQLErrors[0].message);
   }
@@ -261,7 +290,10 @@ const {
   GROUP_INVITATIONS_LIST,
   () => ({
     groupId: group.value?.id,
-  })
+  }),
+  {
+    enabled: computed(() => !!group.value?.id),
+  }
 );
 
 // We need to refetch when the actor is changed
@@ -380,12 +412,11 @@ function invitationUrl(group: IGroup, token: string) {
 }
 
 const isShareModalActive = ref(false);
-const selectedLabel = ref("");
 const selectedURL = ref("");
 
-const triggerShare = (url: string, label: string): void => {
+const triggerShare = (url: string): void => {
+  console.error("triggerShare", url);
   if (!navigator.share) {
-    selectedLabel.value = label;
     selectedURL.value = url;
     isShareModalActive.value = true;
     return;
@@ -393,7 +424,7 @@ const triggerShare = (url: string, label: string): void => {
 
   navigator
     .share({
-      title: label,
+      title: t("Join my group"),
       url: url,
     })
     .then(() => console.debug("Successful share"))