Merge branch 'properly-handle-remote-interaction' into 'master'

Properly handle remote interactions

See merge request framasoft/mobilizon!794

js/src/components/Group/JoinGroupWithAccount.vue

@@ -1,5 +1,6 @@
 <template>
   <redirect-with-account
+    v-if="uri"
     :uri="uri"
     :pathAfterLogin="`/@${preferredUsername}`"
     :sentence="sentence"
@@ -8,21 +9,35 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import RedirectWithAccount from "@/components/Utils/RedirectWithAccount.vue";
-import RouteName from "../../router/name";
+import { FETCH_GROUP } from "@/graphql/group";
+import { IGroup } from "@/types/actor";
 
 @Component({
   components: { RedirectWithAccount },
+  apollo: {
+    group: {
+      query: FETCH_GROUP,
+      fetchPolicy: "cache-and-network",
+      variables() {
+        return {
+          name: this.$route.params.preferredUsername,
+          beforeDateTime: null,
+          afterDateTime: new Date(),
+        };
+      },
+      skip() {
+        return !this.$route.params.preferredUsername;
+      },
+    },
+  },
 })
 export default class JoinGroupWithAccount extends Vue {
   @Prop({ type: String, required: true }) preferredUsername!: string;
 
+  group!: IGroup;
+
   get uri(): string {
-    return `${window.location.origin}${
+    return this.group?.url;
-      this.$router.resolve({
-        name: RouteName.GROUP,
-        params: { preferredUsername: this.preferredUsername },
-      }).href
-    }`;
   }
 
   sentence = this.$t(

js/src/components/Participation/ParticipationWithAccount.vue

@@ -1,5 +1,6 @@
 <template>
   <redirect-with-account
+    v-if="uri"
     :uri="uri"
     :pathAfterLogin="`/events/${uuid}`"
     :sentence="sentence"
@@ -8,21 +9,33 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import RedirectWithAccount from "@/components/Utils/RedirectWithAccount.vue";
-import RouteName from "../../router/name";
+import { FETCH_EVENT } from "@/graphql/event";
+import { IEvent } from "@/types/event.model";
 
 @Component({
   components: { RedirectWithAccount },
+  apollo: {
+    event: {
+      query: FETCH_EVENT,
+      fetchPolicy: "cache-and-network",
+      variables() {
+        return {
+          uuid: this.uuid,
+        };
+      },
+      skip() {
+        return !this.uuid;
+      },
+    },
+  },
 })
 export default class ParticipationWithAccount extends Vue {
   @Prop({ type: String, required: true }) uuid!: string;
 
-  get uri(): string {
+  event!: IEvent;
-    return `${window.location.origin}${
+
-      this.$router.resolve({
+  get uri(): string | undefined {
-        name: RouteName.EVENT,
+    return this.event?.url;
-        params: { uuid: this.uuid },
-      }).href
-    }`;
   }
 
   sentence = this.$t(

js/src/i18n/en_US.json

@@ -824,5 +824,9 @@
   "Type or select a date…": "Type or select a date…",
   "Getting there": "Getting there",
   "Groups are not enabled on this instance.": "Groups are not enabled on this instance.",
-  "The events you created are not shown here.": "The events you created are not shown here."
+  "The events you created are not shown here.": "The events you created are not shown here.",
+  "There's no discussions yet": "There's no discussions yet",
+  "Only group members can access discussions": "Only group members can access discussions",
+  "Return to the group page": "Return to the group page",
+  "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content.": "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content."
 }

js/src/i18n/fr_FR.json

@@ -918,5 +918,9 @@
   "Type or select a date…": "Entrez ou sélectionnez une date…",
   "Getting there": "S'y rendre",
   "Groups are not enabled on this instance.": "Les groupes ne sont pas activés sur cette instance.",
-  "The events you created are not shown here.": "Les événements que vous avez créé ne s'affichent pas ici."
+  "The events you created are not shown here.": "Les événements que vous avez créé ne s'affichent pas ici.",
+  "There's no discussions yet": "Il n'y a pas encore de discussions",
+  "Only group members can access discussions": "Seul⋅es les membres du groupes peuvent accéder aux discussions",
+  "Return to the group page": "Retourner à la page du groupe",
+  "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content.": "Il est possible que le contenu ne soit pas accessible depuis cette instance, car cette instance a bloqué le profil ou le groupe derrière ce contenu."
 }

js/src/views/Interact.vue

@@ -6,6 +6,24 @@
     <b-notification v-if="$apollo.queries.interact.skip" type="is-danger">
       {{ $t("Resource provided is not an URL") }}
     </b-notification>
+    <b-message
+      :title="$t('Error')"
+      type="is-danger"
+      has-icon
+      :closable="false"
+      v-if="!$apollo.loading && errors.length > 0"
+    >
+      <p v-for="error in errors" :key="error">
+        <b>{{ error }}</b>
+      </p>
+      <p>
+        {{
+          $t(
+            "It is possible that the content is not accessible on this instance, because this instance has blocked the profiles or groups behind this content."
+          )
+        }}
+      </p>
+    </b-message>
   </div>
 </template>
 
@@ -34,6 +52,12 @@ import RouteName from "../router/name";
           return true;
         }
       },
+      error({ graphQLErrors, networkError }) {
+        if (networkError) {
+          this.errors = [networkError.message];
+        }
+        this.errors = graphQLErrors.map((error) => error.message);
+      },
       async result({ data: { interact } }) {
         switch (interact.__typename) {
           case "Group":
@@ -49,7 +73,7 @@ import RouteName from "../router/name";
             });
             break;
           default:
-            this.error = this.$t("This URL is not supported");
+            this.error = [this.$t("This URL is not supported")];
         }
         // await this.$router.replace({
         //   name: RouteName.EVENT,
@@ -62,7 +86,7 @@ import RouteName from "../router/name";
 export default class Interact extends Vue {
   interact!: IEvent | IGroup;
 
-  error!: string;
+  errors: string[] = [];
 }
 </script>
 <style lang="scss">