Add share link modal and rename some texts

src/i18n/en_US.json

@@ -388,7 +388,7 @@
   "Drafts": "Drafts",
   "Due on": "Due on",
   "Duplicate": "Duplicate",
-  "Edit invitation": "Edit invitation",
+  "Edit label": "Edit label",
   "Edit post": "Edit post",
   "Edit profile {profile}": "Edit profile {profile}",
   "Edit user email": "Edit user email",
@@ -623,6 +623,7 @@
   "Integrate this event with 3rd-party tools and show metadata for the event.": "Integrate this event with 3rd-party tools and show metadata for the event.",
   "Interact with a remote content": "Interact with a remote content",
   "Interact": "Interact",
+  "Invitation URL":"Invitation URL",
   "Invitation links": "Invitation links",
   "Invitations": "Invitations",
   "Invite a new member": "Invite a new member",
@@ -636,6 +637,7 @@
   "Join a group": "Join a group",
   "Join group {group}": "Join group {group}",
   "Join group": "Join group",
+  "Join my group":"Join my group",
   "Join {instance}, a Mobilizon instance": "Join {instance}, a Mobilizon instance",
   "Join": "Join",
   "Keep the entire conversation about a specific topic together on a single page.": "Keep the entire conversation about a specific topic together on a single page.",
@@ -1093,7 +1095,9 @@
   "Set an URL to a page with your own privacy policy.": "Set an URL to a page with your own privacy policy.",
   "Set an URL to a page with your own terms.": "Set an URL to a page with your own terms.",
   "Settings": "Settings",
+  "Share link":"Share link",
   "Share this event": "Share this event",
+  "Share this group invitation link":"Share this group invitation link",
   "Share this group": "Share this group",
   "Share this post": "Share this post",
   "Share": "Share",
@@ -1378,7 +1382,7 @@
   "Update group posts": "Update group posts",
   "Update group resources": "Update group resources",
   "Update group": "Update group",
-  "Update invitation":"Update invitation",
+  "Update label":"Update label",
   "Update my event": "Update my event",
   "Update my profile": "Update my profile",
   "Update post": "Update post",

src/i18n/fr_FR.json

@@ -388,7 +388,7 @@
   "Drafts": "Brouillons",
   "Due on": "Pr\u00e9vu pour le",
   "Duplicate": "Dupliquer",
-  "Edit invitation": "Modifier l'invitation",
+  "Edit label": "Modifier le label",
   "Edit post": "\u00c9diter le billet",
   "Edit profile {profile}": "\u00c9diter le profil {profile}",
   "Edit user email": "\u00c9diter l'e-mail de l'utilisateur\u00b7ice",
@@ -623,6 +623,7 @@
   "Integrate this event with 3rd-party tools and show metadata for the event.": "Int\u00e9grer cet \u00e9v\u00e9nement avec des outils tiers et afficher des m\u00e9tadonn\u00e9es pour l'\u00e9v\u00e9nement.",
   "Interact with a remote content": "Interagir avec un contenu distant",
   "Interact": "Interagir",
+  "Invitation URL":"Lien de l'invitation",
   "Invitation links": "Liens d'invitation",
   "Invitations" : "Invitations",
   "Invite a new member": "Inviter un nouveau membre",
@@ -636,6 +637,7 @@
   "Join a group": "Rejoindre un groupe",
   "Join group {group}": "Rejoindre le groupe {group}",
   "Join group": "Rejoindre le groupe",
+  "Join my group":"Rejoignez mon groupe",
   "Join {instance}, a Mobilizon instance": "Rejoignez {instance}, une instance Mobilizon",
   "Join": "Rejoindre",
   "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.",
@@ -1092,7 +1094,9 @@
   "Set an URL to a page with your own privacy policy.": "Entrez une URL vers une page web avec votre propre politique de confidentialit\u00e9.",
   "Set an URL to a page with your own terms.": "Entrez une URL vers une page web avec vos propres conditions d'utilisation.",
   "Settings": "Param\u00e8tres",
+  "Share link":"Partager le lien",
   "Share this event": "Partager l'\u00e9v\u00e9nement",
+  "Share this group invitation link":"Partager ce lien d'invitation de groupe",
   "Share this group": "Partager ce groupe",
   "Share this post": "Partager ce billet",
   "Share": "Partager",
@@ -1377,7 +1381,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 invitation" : "Mettre à jour l'invitation",
+  "Update label" : "Mettre à jour le label",
   "Update my event": "Mettre \u00e0 jour mon \u00e9v\u00e9nement",
   "Update my profile": "Mettre \u00e0 jour mon profil",
   "Update post": "Mettre \u00e0 jour le billet",

src/views/Group/GroupInvitations.vue

@@ -30,14 +30,13 @@
     <section class="container mx-auto section">
       <h1>{{ t("Invitation links") }}</h1>
       <o-field groupedClass="flex-wrap" grouped>
-        <o-input :placeholder="t('Label')" v-model="createInvitationLabel" />
         <o-button
           variant="primary"
           :loading="createGroupInvitationLoading"
           @click="
             createGroupInvitation({
               groupId: group.id,
-              label: createInvitationLabel,
+              label: '',
             })
           "
           >{{ t("New invitation") }}</o-button
@@ -59,95 +58,104 @@
             )
           }}</o-notification>
         </div>
-        <o-table v-else :data="groupInvitationsResult.listInvitations">
+        <div v-else>
-          <o-table-column
+          <o-modal
-            field="label"
+            :close-button-aria-label="t('Close')"
-            :label="t('Label')"
+            v-model:active="isShareModalActive"
-            sortable
-            v-slot="props"
           >
-            <o-input
+            <ShareModal
-              v-if="updateInvitationToken == props.row.token"
+              :title="t('Share this group invitation link')"
-              :placeholder="t('Label')"
+              :text="t('Join my group')"
-              v-model="updateInvitationLabel"
+              :url="selectedURL"
-            />
+              :input-label="t('Invitation URL')"
-            <span v-else>{{ props.row.label }}</span>
+            ></ShareModal>
-          </o-table-column>
+          </o-modal>
-          <o-table-column
+
-            field="token"
+          <o-table :data="groupInvitationsResult.listInvitations">
-            :label="t('URL')"
+            <o-table-column
-            sortable
+              field="label"
-            v-slot="props"
+              :label="t('Label')"
-          >
+              sortable
-            <o-button
+              v-slot="props"
-              v-if="props.row.token"
+            >
-              tag="router-link"
+              <o-input
-              variant="primary"
+                v-if="updateInvitationToken == props.row.token"
-              :to="{
+                :placeholder="t('Label')"
-                name: RouteName.GROUP_INVITATION_ACCEPT,
+                v-model="updateInvitationLabel"
-                params: {
+              />
-                  preferredUsername: group.preferredUsername,
+              <span v-else>{{ props.row.label }}</span>
-                  token: props.row.token,
+            </o-table-column>
-                },
+            <o-table-column
-              }"
+              field="token"
-              >{{ t("Invite link") }}</o-button
+              :label="t('URL')"
+              sortable
+              v-slot="props"
             >
-          </o-table-column>
-          <o-table-column
-            field="creationDate"
-            :label="t('Creation date')"
-            sortable
-          />
-          <o-table-column
-            field="token"
-            :label="t('Actions')"
-            sortable
-            v-slot="props"
-          >
-            <div class="flex gap-1 flex-wrap m-1">
               <o-button
-                class="grow"
+                v-if="props.row.token"
-                variant="primary"
+                icon-left="share"
-                v-if="updateInvitationToken != props.row.token"
                 @click="
-                  actionEditGroupInvitation(props.row.token, props.row.label)
+                  triggerShare(
+                    invitationUrl(group, props.row.token),
+                    props.row.label
+                  )
                 "
-                :loading="updateGroupInvitationLoading"
+                variant="primary"
-                >{{ t("Edit invitation") }}</o-button
+                >{{ t("Share link") }}</o-button
               >
-              <o-button
+            </o-table-column>
-                class="grow"
+            <o-table-column
-                variant="success"
+              field="token"
-                v-if="updateInvitationToken == props.row.token"
+              :label="t('Actions')"
-                @click="actionUpdateGroupInvitation()"
+              sortable
-                :loading="updateGroupInvitationLoading"
+              v-slot="props"
-                >{{ t("Update invitation") }}</o-button
+            >
-              >
+              <div class="flex gap-1 flex-wrap m-1">
-              <o-button
+                <o-button
-                class="grow"
+                  variant="primary"
-                variant="warning"
+                  icon-left="pencil"
-                v-if="updateInvitationToken == props.row.token"
+                  v-if="updateInvitationToken != props.row.token"
-                @click="actionCancelEditGroupInvitation()"
+                  @click="
-                :loading="updateGroupInvitationLoading"
+                    actionEditGroupInvitation(props.row.token, props.row.label)
-                >{{ t("Cancel update") }}</o-button
+                  "
-              >
+                  :loading="updateGroupInvitationLoading"
-              <o-button
+                  >{{ t("Edit label") }}</o-button
-                class="grow"
+                >
-                variant="danger"
+                <o-button
-                v-if="updateInvitationToken != props.row.token"
+                  variant="success"
-                @click="actionDeleteGroupInvitation(props.row.token)"
+                  icon-left="check"
-                :loading="deleteGroupInvitationLoading"
+                  v-if="updateInvitationToken == props.row.token"
-                >{{ t("Delete invitation") }}</o-button
+                  @click="actionUpdateGroupInvitation()"
-              >
+                  :loading="updateGroupInvitationLoading"
-            </div>
+                  >{{ t("Update label") }}</o-button
-          </o-table-column>
+                >
-        </o-table>
+                <o-button
+                  variant="warning"
+                  icon-left="close"
+                  v-if="updateInvitationToken == props.row.token"
+                  @click="actionCancelEditGroupInvitation()"
+                  :loading="updateGroupInvitationLoading"
+                  >{{ t("Cancel update") }}</o-button
+                >
+                <o-button
+                  variant="danger"
+                  icon-left="delete"
+                  v-if="updateInvitationToken != props.row.token"
+                  @click="actionDeleteGroupInvitation(props.row.token)"
+                  :loading="deleteGroupInvitationLoading"
+                  >{{ t("Delete invitation") }}</o-button
+                >
+              </div>
+            </o-table-column>
+          </o-table>
+        </div>
       </div>
     </section>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useRouter } from "vue-router";
 import RouteName from "@/router/name";
 import {
   GROUP_INVITATIONS_LIST,
@@ -163,6 +171,7 @@ import { computed, 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";
 
 const { t } = useI18n({ useScope: "global" });
 
@@ -206,8 +215,6 @@ watch(currentActor, () => {
 // Create invitation
 // -------------------------------------------------------------
 
-const createInvitationLabel = ref<string>("");
-
 const {
   mutate: createGroupInvitation,
   onDone: onCreateGroupInvitationDone,
@@ -218,7 +225,6 @@ const {
 onCreateGroupInvitationDone(() => {
   // TODO : pas de refetch, mise à jour du cache
   groupInvitationsRefetch();
-  createInvitationLabel.value = "";
 });
 
 onCreateGroupInvitationError((error) => {
@@ -293,4 +299,44 @@ const actionDeleteGroupInvitation = (token: string) => {
     token: token,
   });
 };
+
+// -------------------------------------------------------------
+// Share invitation
+// -------------------------------------------------------------
+
+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 selectedLabel = ref("");
+const selectedURL = ref("");
+
+const triggerShare = (url: string, label: string): void => {
+  if (!navigator.share) {
+    selectedLabel.value = label;
+    selectedURL.value = url;
+    isShareModalActive.value = true;
+    return;
+  }
+
+  navigator
+    .share({
+      title: label,
+      url: url,
+    })
+    .then(() => console.debug("Successful share"))
+    .catch((error: any) => console.debug("Error sharing", error));
+};
 </script>