From 7c11807c147837bc2d494abd14c8f9b58af8f82d Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 6 Nov 2020 11:34:32 +0100
Subject: [PATCH] Allow to join an open group

Also:

* Refactor interacting with a remote event so that you can interact with
  a remote group as well
* Add a setting for group admins to pick between an open and invite-only
  group
* Fix new groups without posts/todos/resources/events/conversations URL
  set
* Repair local groups that haven't got their
  posts/todos/resources/events/conversations URL set
* Add a scheduled job to refresh remote groups every hour
* Add a user setting to pick when to receive notifications when there's
  new members to approve (will be used when this feature is available)
* Fix pagination for members

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 config/config.exs                             |   3 +-
 js/src/components/Account/ParticipantCard.vue |   6 +-
 js/src/components/Comment/Comment.vue         |   3 +-
 js/src/components/Comment/CommentTree.vue     |   3 +-
 js/src/components/Event/EventCard.vue         |   3 +-
 js/src/components/Event/EventListCard.vue     |   8 +-
 js/src/components/Event/EventListViewCard.vue |   3 +-
 .../components/Event/EventMinimalistCard.vue  |   3 +
 .../components/Event/ParticipationButton.vue  |  17 +-
 js/src/components/Group/GroupSection.vue      |   2 +-
 .../components/Group/JoinGroupWithAccount.vue |  30 ++++
 .../Participation/ConfirmParticipation.vue    |   3 +-
 .../ParticipationWithAccount.vue              |  87 +---------
 .../ParticipationWithoutAccount.vue           |  17 +-
 .../Settings/SettingsOnboarding.vue           |   9 +-
 .../components/Utils/RedirectWithAccount.vue  | 107 ++++++++++++
 js/src/graphql/event.ts                       |  32 ++++
 js/src/graphql/group.ts                       |   5 +
 js/src/graphql/member.ts                      |   9 +
 js/src/graphql/search.ts                      |  33 ++++
 js/src/graphql/user.ts                        |   5 +-
 js/src/i18n/en_US.json                        |  13 +-
 js/src/i18n/fr_FR.json                        |  11 +-
 js/src/i18n/langs.json                        |   2 +-
 js/src/mixins/event.ts                        |  12 +-
 js/src/mixins/group.ts                        |  12 ++
 js/src/router/groups.ts                       |  11 ++
 js/src/types/actor/actor.model.ts             |   2 +-
 js/src/types/actor/group.model.ts             |  27 ++-
 js/src/types/actor/person.model.ts            |   7 +-
 js/src/types/current-user.model.ts            |   8 +-
 js/src/types/event-options.model.ts           |  61 +++++++
 js/src/types/event.model.ts                   | 155 +++---------------
 js/src/types/participant.model.ts             |  46 ++++++
 js/src/views/Discussions/Create.vue           |   5 +-
 js/src/views/Event/Edit.vue                   |  25 +--
 js/src/views/Event/Event.vue                  |  12 +-
 js/src/views/Event/EventList.vue              |  64 +-------
 js/src/views/Event/MyEvents.vue               |  19 +--
 js/src/views/Event/Participants.vue           |   8 +-
 js/src/views/Group/Group.vue                  |  40 ++++-
 js/src/views/Group/GroupMembers.vue           |  86 +++++++---
 js/src/views/Group/GroupSettings.vue          |  29 +++-
 js/src/views/Group/MyGroups.vue               |  33 +++-
 js/src/views/Home.vue                         |   7 +-
 js/src/views/Interact.vue                     |  52 +++---
 js/src/views/Settings/Notifications.vue       |  12 +-
 js/src/views/User/Login.vue                   |  10 +-
 lib/federation/activity_pub/activity_pub.ex   |  52 ++++--
 lib/federation/activity_pub/audience.ex       |   8 +-
 lib/federation/activity_pub/refresher.ex      |  20 +++
 lib/federation/activity_pub/transmogrifier.ex |  34 ++--
 lib/federation/activity_pub/types/actors.ex   |  76 ++++++++-
 .../activity_stream/converter/actor.ex        |   4 +-
 .../activity_stream/converter/member.ex       |   2 +-
 lib/graphql/api/search.ex                     |  12 ++
 lib/graphql/resolvers/discussion.ex           |  11 +-
 lib/graphql/resolvers/group.ex                |  35 +---
 lib/graphql/resolvers/search.ex               |   4 +
 lib/graphql/schema/actors/group.ex            |   6 +-
 lib/graphql/schema/actors/member.ex           |   1 -
 lib/graphql/schema/actors/person.ex           |   8 +
 lib/graphql/schema/event.ex                   |   2 +-
 lib/graphql/schema/search.ex                  |  24 +++
 lib/graphql/schema/user.ex                    |  12 +-
 lib/mobilizon/actors/actor.ex                 |  23 ++-
 lib/mobilizon/actors/actors.ex                |  42 ++++-
 lib/mobilizon/users/setting.ex                |   8 +-
 lib/service/notifications/scheduler.ex        |  73 ++++++++-
 lib/service/workers/refresh_groups.ex         |  12 ++
 ...ication_pending_membership_to_settings.exs |   9 +
 ...45719_repair_groups_with_missing_ur_ls.exs |  28 ++++
 test/graphql/resolvers/member_test.exs        | 136 +++++----------
 test/support/factory.ex                       |   1 +
 74 files changed, 1174 insertions(+), 626 deletions(-)
 create mode 100644 js/src/components/Group/JoinGroupWithAccount.vue
 create mode 100644 js/src/components/Utils/RedirectWithAccount.vue
 create mode 100644 js/src/types/event-options.model.ts
 create mode 100644 js/src/types/participant.model.ts
 create mode 100644 lib/service/workers/refresh_groups.ex
 create mode 100644 priv/repo/migrations/20201103141811_add_notification_pending_membership_to_settings.exs
 create mode 100644 priv/repo/migrations/20201105145719_repair_groups_with_missing_ur_ls.exs

diff --git a/config/config.exs b/config/config.exs
index cea438a2f..1990ca919 100644
--- a/config/config.exs
+++ b/config/config.exs
@@ -263,7 +263,8 @@ config :mobilizon, Oban,
   log: false,
   queues: [default: 10, search: 5, mailers: 10, background: 5],
   crontab: [
-    {"@hourly", Mobilizon.Service.Workers.BuildSiteMap, queue: :background}
+    {"@hourly", Mobilizon.Service.Workers.BuildSiteMap, queue: :background},
+    {"17 * * * *", Mobilizon.Service.Workers.RefreshGroups, queue: :background}
   ]
 
 config :mobilizon, :rich_media,
diff --git a/js/src/components/Account/ParticipantCard.vue b/js/src/components/Account/ParticipantCard.vue
index 5284361d9..807e2f3a5 100644
--- a/js/src/components/Account/ParticipantCard.vue
+++ b/js/src/components/Account/ParticipantCard.vue
@@ -65,8 +65,8 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { Person } from "../../types/actor";
-import { IParticipant, ParticipantRole } from "../../types/event.model";
+import { IParticipant, ParticipantRole } from "../../types/participant.model";
+import { IPerson, Person } from "../../types/actor";
 
 @Component
 export default class ParticipantCard extends Vue {
@@ -81,7 +81,7 @@ export default class ParticipantCard extends Vue {
   ParticipantRole = ParticipantRole;
 
   get actorDisplayName(): string {
-    const actor = new Person(this.participant.actor);
+    const actor = new Person(this.participant.actor as IPerson);
     return actor.displayName();
   }
 }
diff --git a/js/src/components/Comment/Comment.vue b/js/src/components/Comment/Comment.vue
index c5cb07bfa..5fd21f34c 100644
--- a/js/src/components/Comment/Comment.vue
+++ b/js/src/components/Comment/Comment.vue
@@ -137,11 +137,12 @@ import { Component, Prop, Vue, Ref } from "vue-property-decorator";
 import EditorComponent from "@/components/Editor.vue";
 import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { formatDistanceToNow } from "date-fns";
+import { CommentModeration } from "../../types/event-options.model";
 import { CommentModel, IComment } from "../../types/comment.model";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IPerson, usernameWithDomain } from "../../types/actor";
 import { COMMENTS_THREADS, FETCH_THREAD_REPLIES } from "../../graphql/comment";
-import { IEvent, CommentModeration } from "../../types/event.model";
+import { IEvent } from "../../types/event.model";
 import ReportModal from "../Report/ReportModal.vue";
 import { IReport } from "../../types/report.model";
 import { CREATE_REPORT } from "../../graphql/report";
diff --git a/js/src/components/Comment/CommentTree.vue b/js/src/components/Comment/CommentTree.vue
index a0ba0005e..dabfca982 100644
--- a/js/src/components/Comment/CommentTree.vue
+++ b/js/src/components/Comment/CommentTree.vue
@@ -51,6 +51,7 @@
 import { Prop, Vue, Component, Watch } from "vue-property-decorator";
 import Comment from "@/components/Comment/Comment.vue";
 import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
+import { CommentModeration } from "../../types/event-options.model";
 import { CommentModel, IComment } from "../../types/comment.model";
 import {
   CREATE_COMMENT_FROM_EVENT,
@@ -60,7 +61,7 @@ import {
 } from "../../graphql/comment";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IPerson } from "../../types/actor";
-import { IEvent, CommentModeration } from "../../types/event.model";
+import { IEvent } from "../../types/event.model";
 
 @Component({
   apollo: {
diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index 6067ce8a7..a399a5021 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -73,10 +73,11 @@
 </template>
 
 <script lang="ts">
-import { IEvent, IEventCardOptions, ParticipantRole } from "@/types/event.model";
+import { IEvent, IEventCardOptions } from "@/types/event.model";
 import { Component, Prop, Vue } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { Actor, Person } from "@/types/actor";
+import { ParticipantRole } from "../../types/participant.model";
 import RouteName from "../../router/name";
 
 @Component({
diff --git a/js/src/components/Event/EventListCard.vue b/js/src/components/Event/EventListCard.vue
index 670f811ba..5fda59918 100644
--- a/js/src/components/Event/EventListCard.vue
+++ b/js/src/components/Event/EventListCard.vue
@@ -187,12 +187,8 @@ import { Component, Prop } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { mixins } from "vue-class-component";
 import { RawLocation, Route } from "vue-router";
-import {
-  IParticipant,
-  ParticipantRole,
-  EventVisibility,
-  IEventCardOptions,
-} from "../../types/event.model";
+import { IParticipant, ParticipantRole } from "../../types/participant.model";
+import { EventVisibility, IEventCardOptions } from "../../types/event.model";
 import { IPerson } from "../../types/actor";
 import ActorMixin from "../../mixins/actor";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
diff --git a/js/src/components/Event/EventListViewCard.vue b/js/src/components/Event/EventListViewCard.vue
index c08b4b322..895637dbc 100644
--- a/js/src/components/Event/EventListViewCard.vue
+++ b/js/src/components/Event/EventListViewCard.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { ParticipantRole, EventVisibility, IEventCardOptions, IEvent } from "@/types/event.model";
+import { EventVisibility, IEventCardOptions, IEvent } from "@/types/event.model";
 import { Component, Prop } from "vue-property-decorator";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
 import { IPerson, usernameWithDomain } from "@/types/actor";
@@ -59,6 +59,7 @@ import { mixins } from "vue-class-component";
 import ActorMixin from "@/mixins/actor";
 import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
 import EventMixin from "@/mixins/event";
+import { ParticipantRole } from "../../types/participant.model";
 import RouteName from "../../router/name";
 
 const defaultOptions: IEventCardOptions = {
diff --git a/js/src/components/Event/EventMinimalistCard.vue b/js/src/components/Event/EventMinimalistCard.vue
index 7ede0d852..7d8455263 100644
--- a/js/src/components/Event/EventMinimalistCard.vue
+++ b/js/src/components/Event/EventMinimalistCard.vue
@@ -56,6 +56,7 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { IEvent } from "@/types/event.model";
 import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import { ParticipantRole } from "../../types/participant.model";
 import RouteName from "../../router/name";
 
 @Component({
@@ -67,6 +68,8 @@ export default class EventMinimalistCard extends Vue {
   @Prop({ required: true, type: Object }) event!: IEvent;
 
   RouteName = RouteName;
+
+  ParticipantRole = ParticipantRole;
 }
 </script>
 <style lang="scss" scoped>
diff --git a/js/src/components/Event/ParticipationButton.vue b/js/src/components/Event/ParticipationButton.vue
index 6acbfa3c2..3aaa826a4 100644
--- a/js/src/components/Event/ParticipationButton.vue
+++ b/js/src/components/Event/ParticipationButton.vue
@@ -142,7 +142,8 @@ A button to set your participation
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { EventJoinOptions, IEvent, IParticipant, ParticipantRole } from "../../types/event.model";
+import { IParticipant, ParticipantRole } from "../../types/participant.model";
+import { EventJoinOptions, IEvent } from "../../types/event.model";
 import { IPerson, Person } from "../../types/actor";
 import { CURRENT_ACTOR_CLIENT, IDENTITIES } from "../../graphql/actor";
 import { CURRENT_USER_CLIENT } from "../../graphql/user";
@@ -182,20 +183,20 @@ export default class ParticipationButton extends Vue {
 
   RouteName = RouteName;
 
-  joinEvent(actor: IPerson) {
+  joinEvent(actor: IPerson): void {
     if (this.event.joinOptions === EventJoinOptions.RESTRICTED) {
-      this.$emit("joinEventWithConfirmation", actor);
+      this.$emit("join-event-with-confirmation", actor);
     } else {
-      this.$emit("joinEvent", actor);
+      this.$emit("join-event", actor);
     }
   }
 
-  joinModal() {
-    this.$emit("joinModal");
+  joinModal(): void {
+    this.$emit("join-modal");
   }
 
-  confirmLeave() {
-    this.$emit("confirmLeave");
+  confirmLeave(): void {
+    this.$emit("confirm-leave");
   }
 
   get hasAnonymousParticipationMethods(): boolean {
diff --git a/js/src/components/Group/GroupSection.vue b/js/src/components/Group/GroupSection.vue
index def1f06f7..54e65468d 100644
--- a/js/src/components/Group/GroupSection.vue
+++ b/js/src/components/Group/GroupSection.vue
@@ -41,7 +41,7 @@ section {
 
   .create-slot {
     display: flex;
-    justify-content: end;
+    justify-content: flex-end;
     padding-bottom: 0.5rem;
     padding-right: 0.5rem;
   }
diff --git a/js/src/components/Group/JoinGroupWithAccount.vue b/js/src/components/Group/JoinGroupWithAccount.vue
new file mode 100644
index 000000000..83331fe90
--- /dev/null
+++ b/js/src/components/Group/JoinGroupWithAccount.vue
@@ -0,0 +1,30 @@
+<template>
+  <redirect-with-account
+    :uri="uri"
+    :pathAfterLogin="`/@${preferredUsername}`"
+    :sentence="sentence"
+  />
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import RedirectWithAccount from "@/components/Utils/RedirectWithAccount.vue";
+import RouteName from "../../router/name";
+
+@Component({
+  components: { RedirectWithAccount },
+})
+export default class JoinGroupWithAccount extends Vue {
+  @Prop({ type: String, required: true }) preferredUsername!: string;
+
+  get uri(): string {
+    return `${window.location.origin}${
+      this.$router.resolve({
+        name: RouteName.GROUP,
+        params: { preferredUsername: this.preferredUsername },
+      }).href
+    }`;
+  }
+
+  sentence = this.$t("We will redirect you to your instance in order to interact with this group");
+}
+</script>
diff --git a/js/src/components/Participation/ConfirmParticipation.vue b/js/src/components/Participation/ConfirmParticipation.vue
index 1ac4ef547..8630e0362 100644
--- a/js/src/components/Participation/ConfirmParticipation.vue
+++ b/js/src/components/Participation/ConfirmParticipation.vue
@@ -38,8 +38,9 @@
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
 import { confirmLocalAnonymousParticipation } from "@/services/AnonymousParticipationStorage";
+import { IParticipant } from "../../types/participant.model";
 import RouteName from "../../router/name";
-import { EventJoinOptions, IParticipant } from "../../types/event.model";
+import { EventJoinOptions } from "../../types/event.model";
 import { CONFIRM_PARTICIPATION } from "../../graphql/event";
 
 @Component
diff --git a/js/src/components/Participation/ParticipationWithAccount.vue b/js/src/components/Participation/ParticipationWithAccount.vue
index a41cda71d..6415cecd1 100644
--- a/js/src/components/Participation/ParticipationWithAccount.vue
+++ b/js/src/components/Participation/ParticipationWithAccount.vue
@@ -1,71 +1,17 @@
 <template>
-  <section class="section container hero is-fullheight">
-    <div class="hero-body">
-      <div class="container">
-        <div class="columns is-vcentered">
-          <div class="column has-text-centered">
-            <b-button
-              type="is-primary"
-              size="is-medium"
-              tag="router-link"
-              :to="{ name: RouteName.LOGIN }"
-              >{{ $t("Login on {instance}", { instance: host }) }}</b-button
-            >
-          </div>
-          <vertical-divider :content="$t('Or')" />
-          <div class="column">
-            <subtitle>{{ $t("I have an account on another Mobilizon instance.") }}</subtitle>
-            <p>{{ $t("Other software may also support this.") }}</p>
-            <p>
-              {{ $t("We will redirect you to your instance in order to interact with this event") }}
-            </p>
-            <form @submit.prevent="redirectToInstance">
-              <b-field :label="$t('Your federated identity')">
-                <b-field>
-                  <b-input
-                    expanded
-                    autocapitalize="none"
-                    autocorrect="off"
-                    v-model="remoteActorAddress"
-                    :placeholder="$t('profile@instance')"
-                  ></b-input>
-                  <p class="control">
-                    <button class="button is-primary" type="submit">{{ $t("Go") }}</button>
-                  </p>
-                </b-field>
-              </b-field>
-            </form>
-          </div>
-        </div>
-        <div class="has-text-centered">
-          <b-button tag="a" type="is-text" @click="$router.go(-1)">{{
-            $t("Back to previous page")
-          }}</b-button>
-        </div>
-      </div>
-    </div>
-  </section>
+  <redirect-with-account :uri="uri" :pathAfterLogin="`/events/${uuid}`" :sentence="sentence" />
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
-import Subtitle from "@/components/Utils/Subtitle.vue";
+import RedirectWithAccount from "@/components/Utils/RedirectWithAccount.vue";
 import RouteName from "../../router/name";
 
 @Component({
-  components: { Subtitle, VerticalDivider },
+  components: { RedirectWithAccount },
 })
 export default class ParticipationWithAccount extends Vue {
   @Prop({ type: String, required: true }) uuid!: string;
 
-  remoteActorAddress = "";
-
-  RouteName = RouteName;
-
-  get host() {
-    return window.location.hostname;
-  }
-
   get uri(): string {
     return `${window.location.origin}${
       this.$router.resolve({
@@ -75,31 +21,6 @@ export default class ParticipationWithAccount extends Vue {
     }`;
   }
 
-  async redirectToInstance() {
-    let res;
-    const [_, host] = (res = this.remoteActorAddress.split("@", 2));
-    const remoteInteractionURI = await this.webFingerFetch(host, this.remoteActorAddress);
-    window.open(remoteInteractionURI);
-  }
-
-  private async webFingerFetch(hostname: string, identity: string): Promise<string> {
-    const scheme = process.env.NODE_ENV === "production" ? "https" : "http";
-    const data = await (
-      await fetch(`${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`)
-    ).json();
-    if (data && Array.isArray(data.links)) {
-      const link: { template: string } = data.links.find(
-        (link: any) =>
-          link &&
-          typeof link.template === "string" &&
-          link.rel === "http://ostatus.org/schema/1.0/subscribe"
-      );
-
-      if (link && link.template.includes("{uri}")) {
-        return link.template.replace("{uri}", encodeURIComponent(this.uri));
-      }
-    }
-    throw new Error("No interaction path found in webfinger data");
-  }
+  sentence = this.$t("We will redirect you to your instance in order to interact with this event");
 }
 </script>
diff --git a/js/src/components/Participation/ParticipationWithoutAccount.vue b/js/src/components/Participation/ParticipationWithoutAccount.vue
index 40621e9fb..512119a0a 100644
--- a/js/src/components/Participation/ParticipationWithoutAccount.vue
+++ b/js/src/components/Participation/ParticipationWithoutAccount.vue
@@ -74,19 +74,12 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import {
-  EventModel,
-  IEvent,
-  IParticipant,
-  ParticipantRole,
-  EventJoinOptions,
-} from "@/types/event.model";
+import { EventModel, IEvent, EventJoinOptions } from "@/types/event.model";
 import { FETCH_EVENT, JOIN_EVENT } from "@/graphql/event";
 import { IConfig } from "@/types/config.model";
 import { CONFIG } from "@/graphql/config";
 import { addLocalUnconfirmedAnonymousParticipation } from "@/services/AnonymousParticipationStorage";
-import { Route } from "vue-router";
-import RouteName from "../../router/name";
+import { IParticipant, ParticipantRole } from "../../types/participant.model";
 
 @Component({
   apollo: {
@@ -139,8 +132,8 @@ export default class ParticipationWithoutAccount extends Vue {
           message: this.anonymousParticipation.message,
           locale: this.$i18n.locale,
         },
-        update: (store, { data }) => {
-          if (data == null) {
+        update: (store, { data: updateData }) => {
+          if (updateData == null) {
             console.error("Cannot update event participant cache, because of data null value.");
             return;
           }
@@ -159,7 +152,7 @@ export default class ParticipationWithoutAccount extends Vue {
             return;
           }
 
-          if (data.joinEvent.role === ParticipantRole.NOT_CONFIRMED) {
+          if (updateData.joinEvent.role === ParticipantRole.NOT_CONFIRMED) {
             event.participantStats.notConfirmed += 1;
           } else {
             event.participantStats.going += 1;
diff --git a/js/src/components/Settings/SettingsOnboarding.vue b/js/src/components/Settings/SettingsOnboarding.vue
index d97c2dc79..02a8cc56d 100644
--- a/js/src/components/Settings/SettingsOnboarding.vue
+++ b/js/src/components/Settings/SettingsOnboarding.vue
@@ -26,12 +26,9 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue } from "vue-property-decorator";
 import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
-import {
-  ICurrentUser,
-  INotificationPendingParticipationEnum,
-} from "../../types/current-user.model";
+import { ICurrentUser } from "../../types/current-user.model";
 import RouteName from "../../router/name";
 
 @Component({
@@ -46,7 +43,7 @@ export default class SettingsOnboarding extends Vue {
 
   RouteName = RouteName;
 
-  async updateSetting(variables: object) {
+  async updateSetting(variables: Record<string, unknown>): Promise<void> {
     await this.$apollo.mutate<{ setUserSettings: string }>({
       mutation: SET_USER_SETTINGS,
       variables,
diff --git a/js/src/components/Utils/RedirectWithAccount.vue b/js/src/components/Utils/RedirectWithAccount.vue
new file mode 100644
index 000000000..52c2fb8f1
--- /dev/null
+++ b/js/src/components/Utils/RedirectWithAccount.vue
@@ -0,0 +1,107 @@
+<template>
+  <section class="section container hero is-fullheight">
+    <div class="hero-body">
+      <div class="container">
+        <div class="columns is-vcentered">
+          <div class="column has-text-centered">
+            <b-button
+              type="is-primary"
+              size="is-medium"
+              tag="router-link"
+              :to="{
+                name: RouteName.LOGIN,
+                query: {
+                  code: LoginErrorCode.NEED_TO_LOGIN,
+                  redirect: pathAfterLogin,
+                },
+              }"
+              >{{ $t("Login on {instance}", { instance: host }) }}</b-button
+            >
+          </div>
+          <vertical-divider :content="$t('Or')" />
+          <div class="column">
+            <subtitle>{{ $t("I have an account on another Mobilizon instance.") }}</subtitle>
+            <p>{{ $t("Other software may also support this.") }}</p>
+            <p>{{ sentence }}</p>
+            <form @submit.prevent="redirectToInstance">
+              <b-field :label="$t('Your federated identity')">
+                <b-field>
+                  <b-input
+                    expanded
+                    autocapitalize="none"
+                    autocorrect="off"
+                    v-model="remoteActorAddress"
+                    :placeholder="$t('profile@instance')"
+                  ></b-input>
+                  <p class="control">
+                    <button class="button is-primary" type="submit">{{ $t("Go") }}</button>
+                  </p>
+                </b-field>
+              </b-field>
+            </form>
+          </div>
+        </div>
+        <div class="has-text-centered">
+          <b-button tag="a" type="is-text" @click="$router.go(-1)">{{
+            $t("Back to previous page")
+          }}</b-button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
+import Subtitle from "@/components/Utils/Subtitle.vue";
+import { LoginErrorCode } from "@/types/login-error-code.model";
+import RouteName from "../../router/name";
+
+@Component({
+  components: { Subtitle, VerticalDivider },
+})
+export default class RedirectWithAccount extends Vue {
+  @Prop({ type: String, required: true }) uri!: string;
+
+  @Prop({ type: String, required: false }) pathAfterLogin!: string;
+
+  @Prop({ type: String, required: false }) sentence!: string;
+
+  remoteActorAddress = "";
+
+  RouteName = RouteName;
+
+  LoginErrorCode = LoginErrorCode;
+
+  // eslint-disable-next-line class-methods-use-this
+  get host(): string {
+    return window.location.hostname;
+  }
+
+  async redirectToInstance(): Promise<void> {
+    const [, host] = this.remoteActorAddress.split("@", 2);
+    const remoteInteractionURI = await this.webFingerFetch(host, this.remoteActorAddress);
+    window.open(remoteInteractionURI);
+  }
+
+  private async webFingerFetch(hostname: string, identity: string): Promise<string> {
+    const scheme = process.env.NODE_ENV === "production" ? "https" : "http";
+    const data = await (
+      await fetch(`${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`)
+    ).json();
+    if (data && Array.isArray(data.links)) {
+      const link: { template: string } = data.links.find(
+        (someLink: any) =>
+          someLink &&
+          typeof someLink.template === "string" &&
+          someLink.rel === "http://ostatus.org/schema/1.0/subscribe"
+      );
+
+      if (link && link.template.includes("{uri}")) {
+        return link.template.replace("{uri}", encodeURIComponent(this.uri));
+      }
+    }
+    throw new Error("No interaction path found in webfinger data");
+  }
+}
+</script>
diff --git a/js/src/graphql/event.ts b/js/src/graphql/event.ts
index 01f649add..924a58d5c 100644
--- a/js/src/graphql/event.ts
+++ b/js/src/graphql/event.ts
@@ -574,3 +574,35 @@ export const EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED = gql`
     }
   }
 `;
+
+export const GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED = gql`
+  subscription($actorId: ID!) {
+    groupMembershipChanged(personId: $actorId) {
+      id
+      memberships {
+        total
+        elements {
+          id
+          role
+          parent {
+            id
+            preferredUsername
+            name
+            domain
+            avatar {
+              id
+              url
+            }
+          }
+          invitedBy {
+            id
+            preferredUsername
+            name
+          }
+          insertedAt
+          updatedAt
+        }
+      }
+    }
+  }
+`;
diff --git a/js/src/graphql/group.ts b/js/src/graphql/group.ts
index 27a119203..51d848298 100644
--- a/js/src/graphql/group.ts
+++ b/js/src/graphql/group.ts
@@ -63,6 +63,7 @@ export const GROUP_FIELDS_FRAGMENTS = gql`
     preferredUsername
     suspended
     visibility
+    openness
     physicalAddress {
       description
       street
@@ -262,6 +263,7 @@ export const UPDATE_GROUP = gql`
     $avatar: PictureInput
     $banner: PictureInput
     $visibility: GroupVisibility
+    $openness: Openness
     $physicalAddress: AddressInput
   ) {
     updateGroup(
@@ -271,12 +273,15 @@ export const UPDATE_GROUP = gql`
       banner: $banner
       avatar: $avatar
       visibility: $visibility
+      openness: $openness
       physicalAddress: $physicalAddress
     ) {
       id
       preferredUsername
       name
       summary
+      visibility
+      openness
       avatar {
         id
         url
diff --git a/js/src/graphql/member.ts b/js/src/graphql/member.ts
index dd7c71f31..02b928e6c 100644
--- a/js/src/graphql/member.ts
+++ b/js/src/graphql/member.ts
@@ -100,3 +100,12 @@ export const REMOVE_MEMBER = gql`
     }
   }
 `;
+
+export const JOIN_GROUP = gql`
+  mutation JoinGroup($groupId: ID!) {
+    joinGroup(groupId: $groupId) {
+      ...MemberFragment
+    }
+  }
+  ${MEMBER_FRAGMENT}
+`;
diff --git a/js/src/graphql/search.ts b/js/src/graphql/search.ts
index 14920c71b..345648a8e 100644
--- a/js/src/graphql/search.ts
+++ b/js/src/graphql/search.ts
@@ -78,3 +78,36 @@ export const SEARCH_PERSONS = gql`
     }
   }
 `;
+
+export const INTERACT = gql`
+  query Interact($uri: String!) {
+    interact(uri: $uri) {
+      ... on Event {
+        id
+        title
+        uuid
+        beginsOn
+        picture {
+          id
+          url
+        }
+        tags {
+          slug
+          title
+        }
+        __typename
+      }
+      ... on Group {
+        id
+        avatar {
+          id
+          url
+        }
+        domain
+        preferredUsername
+        name
+        __typename
+      }
+    }
+  }
+`;
diff --git a/js/src/graphql/user.ts b/js/src/graphql/user.ts
index 46ab9ca6f..c6fc40776 100644
--- a/js/src/graphql/user.ts
+++ b/js/src/graphql/user.ts
@@ -119,6 +119,7 @@ export const USER_SETTINGS_FRAGMENT = gql`
     notificationEachWeek
     notificationBeforeEvent
     notificationPendingParticipation
+    notificationPendingMembership
   }
 `;
 
@@ -141,7 +142,8 @@ export const SET_USER_SETTINGS = gql`
     $notificationOnDay: Boolean
     $notificationEachWeek: Boolean
     $notificationBeforeEvent: Boolean
-    $notificationPendingParticipation: NotificationPendingParticipationEnum
+    $notificationPendingParticipation: NotificationPendingEnum
+    $notificationPendingMembership: NotificationPendingEnum
   ) {
     setUserSettings(
       timezone: $timezone
@@ -149,6 +151,7 @@ export const SET_USER_SETTINGS = gql`
       notificationEachWeek: $notificationEachWeek
       notificationBeforeEvent: $notificationBeforeEvent
       notificationPendingParticipation: $notificationPendingParticipation
+      notificationPendingMembership: $notificationPendingMembership
     ) {
       ...UserSettingFragment
     }
diff --git a/js/src/i18n/en_US.json b/js/src/i18n/en_US.json
index 3f19de807..ad0c99484 100644
--- a/js/src/i18n/en_US.json
+++ b/js/src/i18n/en_US.json
@@ -277,7 +277,6 @@
   "Publish": "Publish",
   "Published events with <b>{comments}</b> comments and <b>{participations}</b> confirmed participations": "Published events with <b>{comments}</b> comments and <b>{participations}</b> confirmed participations",
   "RSS/Atom Feed": "RSS/Atom Feed",
-  "Redirecting to event…": "Redirecting to event…",
   "Region": "Region",
   "Register an account on Mobilizon!": "Register an account on Mobilizon!",
   "Registration is allowed, anyone can register.": "Registration is allowed, anyone can register.",
@@ -733,7 +732,6 @@
   "Group {groupTitle} reported": "Group {groupTitle} reported",
   "Error while reporting group {groupTitle}": "Error while reporting group {groupTitle}",
   "Reported group": "Reported group",
-  "You can only get invited to groups right now.": "You can only get invited to groups right now.",
   "Join group": "Join group",
   "Created by {username}": "Created by {username}",
   "Accessible through link": "Accessible through link",
@@ -790,5 +788,14 @@
   "This group doesn't have a description yet.": "This group doesn't have a description yet.",
   "Find another instance": "Find another instance",
   "Pick an instance": "Pick an instance",
-  "This website isn't moderated and the data that you enter will be automatically destroyed every day at 00:01 (Paris timezone).": "This website isn't moderated and the data that you enter will be automatically destroyed every day at 00:01 (Paris timezone)."
+  "This website isn't moderated and the data that you enter will be automatically destroyed every day at 00:01 (Paris timezone).": "This website isn't moderated and the data that you enter will be automatically destroyed every day at 00:01 (Paris timezone).",
+  "We will redirect you to your instance in order to interact with this group": "",
+  "New members": "New members",
+  "Anyone can join freely": "Anyone can join freely",
+  "Anyone wanting to be a member from your group will be able to from your group page.": "Anyone wanting to be a member from your group will be able to from your group page.",
+  "Manually invite new members": "Manually invite new members",
+  "The only way for your group to get new members is if an admininistrator invites them.": "The only way for your group to get new members is if an admininistrator invites them.",
+  "Redirecting to content…": "Redirecting to content…",
+  "This URL is not supported": "This URL is not supported",
+  "This group is invite-only": "This group is invite-only"
 }
diff --git a/js/src/i18n/fr_FR.json b/js/src/i18n/fr_FR.json
index 1b3b97d91..b17de41bf 100644
--- a/js/src/i18n/fr_FR.json
+++ b/js/src/i18n/fr_FR.json
@@ -870,5 +870,14 @@
   "{profile} (by default)": "{profile} (par défault)",
   "{title} ({count} todos)": "{title} ({count} todos)",
   "{username} was invited to {group}": "{username} a été invité à {group}",
-  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap"
+  "© The OpenStreetMap Contributors": "© Les Contributeur⋅ices OpenStreetMap",
+  "We will redirect you to your instance in order to interact with this group": "",
+  "New members": "Nouveaux·elles membres",
+  "Anyone can join freely": "N'importe qui peut rejoindre",
+  "Anyone wanting to be a member from your group will be able to from your group page.": "N'importe qui voulant devenir membre pourra le faire depuis votre page de groupe.",
+  "Manually invite new members": "Inviter des nouveaux·elles membres manuellement",
+  "The only way for your group to get new members is if an admininistrator invites them.": "La seule manière pour votre groupe d'obtenir de nouveaux·elles membres sera si un·e administrateur·ice les invite.",
+  "Redirecting to content…": "Redirection vers le contenu…",
+  "This URL is not supported": "Cette URL n'est pas supportée",
+  "This group is invite-only": "Ce groupe est accessible uniquement sur invitation"
 }
diff --git a/js/src/i18n/langs.json b/js/src/i18n/langs.json
index 15582e7dc..e6dbae694 100644
--- a/js/src/i18n/langs.json
+++ b/js/src/i18n/langs.json
@@ -10,7 +10,7 @@
   "fi": "suomi",
   "fr": "Français",
   "gl": "Galego",
-  "hu": "Magyar nyelv",
+  "hu": "Magyar",
   "it": "Italiano",
   "ja": "日本語",
   "kn": "Kannada",
diff --git a/js/src/mixins/event.ts b/js/src/mixins/event.ts
index 57e631973..d6056dda8 100644
--- a/js/src/mixins/event.ts
+++ b/js/src/mixins/event.ts
@@ -1,13 +1,14 @@
 import { mixins } from "vue-class-component";
 import { Component, Vue } from "vue-property-decorator";
-import { IEvent, IParticipant, ParticipantRole } from "../types/event.model";
+import { SnackbarProgrammatic as Snackbar } from "buefy";
+import { IParticipant, ParticipantRole } from "../types/participant.model";
+import { IEvent } from "../types/event.model";
 import {
   DELETE_EVENT,
   EVENT_PERSON_PARTICIPATION,
   FETCH_EVENT,
   LEAVE_EVENT,
 } from "../graphql/event";
-import { SnackbarProgrammatic as Snackbar } from "buefy";
 import { IPerson } from "../types/actor";
 
 @Component
@@ -17,7 +18,7 @@ export default class EventMixin extends mixins(Vue) {
     actorId: string,
     token: string | null = null,
     anonymousParticipationConfirmed: boolean | null = null
-  ) {
+  ): Promise<void> {
     try {
       const { data: resultData } = await this.$apollo.mutate<{ leaveEvent: IParticipant }>({
         mutation: LEAVE_EVENT,
@@ -89,7 +90,7 @@ export default class EventMixin extends mixins(Vue) {
     this.$notifier.success(this.$t("You have cancelled your participation") as string);
   }
 
-  protected async openDeleteEventModal(event: IEvent, currentActor: IPerson) {
+  protected async openDeleteEventModal(event: IEvent, currentActor: IPerson): Promise<void> {
     function escapeRegExp(string: string) {
       return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
     }
@@ -135,7 +136,7 @@ export default class EventMixin extends mixins(Vue) {
        *
        * @type {string}
        */
-      this.$emit("eventDeleted", event.id);
+      this.$emit("event-deleted", event.id);
 
       this.$buefy.notification.open({
         message: this.$t("Event {eventTitle} deleted", { eventTitle }) as string,
@@ -150,6 +151,7 @@ export default class EventMixin extends mixins(Vue) {
     }
   }
 
+  // eslint-disable-next-line class-methods-use-this
   urlToHostname(url: string): string | null {
     try {
       return new URL(url).hostname;
diff --git a/js/src/mixins/group.ts b/js/src/mixins/group.ts
index 1cc4f6238..d39e593b4 100644
--- a/js/src/mixins/group.ts
+++ b/js/src/mixins/group.ts
@@ -1,4 +1,5 @@
 import { PERSON_MEMBERSHIPS, CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
+import { GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED } from "@/graphql/event";
 import { FETCH_GROUP } from "@/graphql/group";
 import RouteName from "@/router/name";
 import { Group, IActor, IGroup, IPerson, MemberRole } from "@/types/actor";
@@ -29,6 +30,17 @@ import { Component, Vue } from "vue-property-decorator";
           id: this.currentActor.id,
         };
       },
+      subscribeToMore: {
+        document: GROUP_MEMBERSHIP_SUBSCRIPTION_CHANGED,
+        variables() {
+          return {
+            actorId: this.currentActor.id,
+          };
+        },
+        skip() {
+          return !this.currentActor || !this.currentActor.id;
+        },
+      },
       skip() {
         return !this.currentActor || !this.currentActor.id;
       },
diff --git a/js/src/router/groups.ts b/js/src/router/groups.ts
index 7f633af88..c7700ba88 100644
--- a/js/src/router/groups.ts
+++ b/js/src/router/groups.ts
@@ -15,6 +15,7 @@ export enum GroupsRouteName {
   POST = "POST",
   POSTS = "POSTS",
   GROUP_EVENTS = "GROUP_EVENTS",
+  GROUP_JOIN = "GROUP_JOIN",
 }
 
 const resourceFolder = () => import("@/views/Resources/ResourceFolder.vue");
@@ -97,17 +98,27 @@ export const groupsRoutes: RouteConfig[] = [
     component: () => import("@/views/Posts/Post.vue"),
     props: true,
     name: GroupsRouteName.POST,
+    meta: { requiredAuth: false },
   },
   {
     path: "/@:preferredUsername/p",
     component: () => import("@/views/Posts/List.vue"),
     props: true,
     name: GroupsRouteName.POSTS,
+    meta: { requiredAuth: false },
   },
   {
     path: "/@:preferredUsername/events",
     component: groupEvents,
     props: true,
     name: GroupsRouteName.GROUP_EVENTS,
+    meta: { requiredAuth: false },
+  },
+  {
+    path: "/@:preferredUsername/join",
+    component: () => import("@/components/Group/JoinGroupWithAccount.vue"),
+    props: true,
+    name: GroupsRouteName.GROUP_JOIN,
+    meta: { requiredAuth: false },
   },
 ];
diff --git a/js/src/types/actor/actor.model.ts b/js/src/types/actor/actor.model.ts
index 676d1aeb5..65c838f22 100644
--- a/js/src/types/actor/actor.model.ts
+++ b/js/src/types/actor/actor.model.ts
@@ -42,7 +42,7 @@ export class Actor implements IActor {
 
   type: ActorType = ActorType.PERSON;
 
-  constructor(hash: IActor | {} = {}) {
+  constructor(hash: IActor | Record<any, unknown> = {}) {
     Object.assign(this, hash);
   }
 
diff --git a/js/src/types/actor/group.model.ts b/js/src/types/actor/group.model.ts
index faf12985d..41cb6f877 100644
--- a/js/src/types/actor/group.model.ts
+++ b/js/src/types/actor/group.model.ts
@@ -18,13 +18,10 @@ export enum MemberRole {
   REJECTED = "REJECTED",
 }
 
-export interface IGroup extends IActor {
-  members: Paginate<IMember>;
-  resources: Paginate<IResource>;
-  todoLists: Paginate<ITodoList>;
-  discussions: Paginate<IDiscussion>;
-  organizedEvents: Paginate<IEvent>;
-  physicalAddress: IAddress;
+export enum Openness {
+  INVITE_ONLY = "INVITE_ONLY",
+  MODERATED = "MODERATED",
+  OPEN = "OPEN",
 }
 
 export interface IMember {
@@ -37,6 +34,16 @@ export interface IMember {
   updatedAt: string;
 }
 
+export interface IGroup extends IActor {
+  members: Paginate<IMember>;
+  resources: Paginate<IResource>;
+  todoLists: Paginate<ITodoList>;
+  discussions: Paginate<IDiscussion>;
+  organizedEvents: Paginate<IEvent>;
+  physicalAddress: IAddress;
+  openness: Openness;
+}
+
 export class Group extends Actor implements IGroup {
   members: Paginate<IMember> = { elements: [], total: 0 };
 
@@ -50,16 +57,18 @@ export class Group extends Actor implements IGroup {
 
   posts: Paginate<IPost> = { elements: [], total: 0 };
 
-  constructor(hash: IGroup | {} = {}) {
+  constructor(hash: IGroup | Record<string, unknown> = {}) {
     super(hash);
     this.type = ActorType.GROUP;
 
     this.patch(hash);
   }
 
+  openness: Openness = Openness.INVITE_ONLY;
+
   physicalAddress: IAddress = new Address();
 
-  patch(hash: any) {
+  patch(hash: IGroup | Record<string, unknown>): void {
     Object.assign(this, hash);
   }
 }
diff --git a/js/src/types/actor/person.model.ts b/js/src/types/actor/person.model.ts
index b0389e224..928854e71 100644
--- a/js/src/types/actor/person.model.ts
+++ b/js/src/types/actor/person.model.ts
@@ -1,8 +1,9 @@
 import { ICurrentUser } from "../current-user.model";
-import { IEvent, IParticipant } from "../event.model";
+import { IEvent } from "../event.model";
 import { Actor, IActor } from "./actor.model";
 import { Paginate } from "../paginate";
 import { IMember } from "./group.model";
+import { IParticipant } from "../participant.model";
 
 export interface IFeedToken {
   token: string;
@@ -29,13 +30,13 @@ export class Person extends Actor implements IPerson {
 
   user!: ICurrentUser;
 
-  constructor(hash: IPerson | {} = {}) {
+  constructor(hash: IPerson | Record<string, unknown> = {}) {
     super(hash);
 
     this.patch(hash);
   }
 
-  patch(hash: any) {
+  patch(hash: IPerson | Record<string, unknown>): void {
     Object.assign(this, hash);
   }
 }
diff --git a/js/src/types/current-user.model.ts b/js/src/types/current-user.model.ts
index 874e20d11..eed7d9eb9 100644
--- a/js/src/types/current-user.model.ts
+++ b/js/src/types/current-user.model.ts
@@ -1,6 +1,7 @@
-import { IEvent, IParticipant } from "@/types/event.model";
+import { IEvent } from "@/types/event.model";
 import { IPerson } from "@/types/actor/person.model";
 import { Paginate } from "./paginate";
+import { IParticipant } from "./participant.model";
 
 export enum ICurrentUserRole {
   USER = "USER",
@@ -16,7 +17,7 @@ export interface ICurrentUser {
   defaultActor?: IPerson;
 }
 
-export enum INotificationPendingParticipationEnum {
+export enum INotificationPendingEnum {
   NONE = "NONE",
   DIRECT = "DIRECT",
   ONE_DAY = "ONE_DAY",
@@ -28,7 +29,8 @@ export interface IUserSettings {
   notificationOnDay: boolean;
   notificationEachWeek: boolean;
   notificationBeforeEvent: boolean;
-  notificationPendingParticipation: INotificationPendingParticipationEnum;
+  notificationPendingParticipation: INotificationPendingEnum;
+  notificationPendingMembership: INotificationPendingEnum;
 }
 
 export interface IUser extends ICurrentUser {
diff --git a/js/src/types/event-options.model.ts b/js/src/types/event-options.model.ts
new file mode 100644
index 000000000..95e9ec405
--- /dev/null
+++ b/js/src/types/event-options.model.ts
@@ -0,0 +1,61 @@
+export interface IParticipationCondition {
+  title: string;
+  content: string;
+  url: string;
+}
+
+export interface IOffer {
+  price: number;
+  priceCurrency: string;
+  url: string;
+}
+
+export enum CommentModeration {
+  ALLOW_ALL = "ALLOW_ALL",
+  MODERATED = "MODERATED",
+  CLOSED = "CLOSED",
+}
+
+export interface IEventOptions {
+  maximumAttendeeCapacity: number;
+  remainingAttendeeCapacity: number;
+  showRemainingAttendeeCapacity: boolean;
+  anonymousParticipation: boolean;
+  hideOrganizerWhenGroupEvent: boolean;
+  offers: IOffer[];
+  participationConditions: IParticipationCondition[];
+  attendees: string[];
+  program: string;
+  commentModeration: CommentModeration;
+  showParticipationPrice: boolean;
+  showStartTime: boolean;
+  showEndTime: boolean;
+}
+
+export class EventOptions implements IEventOptions {
+  maximumAttendeeCapacity = 0;
+
+  remainingAttendeeCapacity = 0;
+
+  showRemainingAttendeeCapacity = false;
+
+  anonymousParticipation = false;
+
+  hideOrganizerWhenGroupEvent = false;
+
+  offers: IOffer[] = [];
+
+  participationConditions: IParticipationCondition[] = [];
+
+  attendees: string[] = [];
+
+  program = "";
+
+  commentModeration = CommentModeration.ALLOW_ALL;
+
+  showParticipationPrice = false;
+
+  showStartTime = true;
+
+  showEndTime = true;
+}
diff --git a/js/src/types/event.model.ts b/js/src/types/event.model.ts
index 2d34844c5..e9bedbef6 100644
--- a/js/src/types/event.model.ts
+++ b/js/src/types/event.model.ts
@@ -3,7 +3,9 @@ import { ITag } from "@/types/tag.model";
 import { IPicture } from "@/types/picture.model";
 import { IComment } from "@/types/comment.model";
 import { Paginate } from "@/types/paginate";
-import { Actor, Group, IActor, IPerson } from "./actor";
+import { Actor, Group, IActor, IGroup, IPerson } from "./actor";
+import { IParticipant } from "./participant.model";
+import { EventOptions, IEventOptions } from "./event-options.model";
 
 export enum EventStatus {
   TENTATIVE = "TENTATIVE",
@@ -30,16 +32,6 @@ export enum EventVisibilityJoinOptions {
   LIMITED = "LIMITED",
 }
 
-export enum ParticipantRole {
-  NOT_APPROVED = "NOT_APPROVED",
-  NOT_CONFIRMED = "NOT_CONFIRMED",
-  REJECTED = "REJECTED",
-  PARTICIPANT = "PARTICIPANT",
-  MODERATOR = "MODERATOR",
-  ADMINISTRATOR = "ADMINISTRATOR",
-  CREATOR = "CREATOR",
-}
-
 export enum Category {
   BUSINESS = "business",
   CONFERENCE = "conference",
@@ -56,58 +48,6 @@ export interface IEventCardOptions {
   memberofGroup: boolean;
 }
 
-export interface IParticipant {
-  id?: string;
-  role: ParticipantRole;
-  actor: IActor;
-  event: IEvent;
-  metadata: { cancellationToken?: string; message?: string };
-  insertedAt?: Date;
-}
-
-export class Participant implements IParticipant {
-  id?: string;
-
-  event!: IEvent;
-
-  actor!: IActor;
-
-  role: ParticipantRole = ParticipantRole.NOT_APPROVED;
-
-  metadata = {};
-
-  insertedAt?: Date;
-
-  constructor(hash?: IParticipant) {
-    if (!hash) return;
-
-    this.id = hash.id;
-    this.event = new EventModel(hash.event);
-    this.actor = new Actor(hash.actor);
-    this.role = hash.role;
-    this.metadata = hash.metadata;
-    this.insertedAt = hash.insertedAt;
-  }
-}
-
-export interface IOffer {
-  price: number;
-  priceCurrency: string;
-  url: string;
-}
-
-export interface IParticipationCondition {
-  title: string;
-  content: string;
-  url: string;
-}
-
-export enum CommentModeration {
-  ALLOW_ALL = "ALLOW_ALL",
-  MODERATED = "MODERATED",
-  CLOSED = "CLOSED",
-}
-
 export interface IEventParticipantStats {
   notApproved: number;
   notConfirmed: number;
@@ -119,6 +59,26 @@ export interface IEventParticipantStats {
   going: number;
 }
 
+interface IEventEditJSON {
+  id?: string;
+  title: string;
+  description: string;
+  beginsOn: string;
+  endsOn: string | null;
+  status: EventStatus;
+  visibility: EventVisibility;
+  joinOptions: EventJoinOptions;
+  draft: boolean;
+  picture: IPicture | { pictureId: string } | null;
+  attributedToId: string | null;
+  onlineAddress?: string;
+  phoneAddress?: string;
+  physicalAddress?: IAddress;
+  tags: string[];
+  options: IEventOptions;
+  contacts: { id?: string }[];
+}
+
 export interface IEvent {
   id?: string;
   uuid: string;
@@ -139,7 +99,7 @@ export interface IEvent {
   picture: IPicture | null;
 
   organizerActor?: IActor;
-  attributedTo?: IActor;
+  attributedTo?: IGroup;
   participantStats: IEventParticipantStats;
   participants: Paginate<IParticipant>;
 
@@ -157,50 +117,6 @@ export interface IEvent {
   toEditJSON(): IEventEditJSON;
 }
 
-export interface IEventOptions {
-  maximumAttendeeCapacity: number;
-  remainingAttendeeCapacity: number;
-  showRemainingAttendeeCapacity: boolean;
-  anonymousParticipation: boolean;
-  hideOrganizerWhenGroupEvent: boolean;
-  offers: IOffer[];
-  participationConditions: IParticipationCondition[];
-  attendees: string[];
-  program: string;
-  commentModeration: CommentModeration;
-  showParticipationPrice: boolean;
-  showStartTime: boolean;
-  showEndTime: boolean;
-}
-
-export class EventOptions implements IEventOptions {
-  maximumAttendeeCapacity = 0;
-
-  remainingAttendeeCapacity = 0;
-
-  showRemainingAttendeeCapacity = false;
-
-  anonymousParticipation = false;
-
-  hideOrganizerWhenGroupEvent = false;
-
-  offers: IOffer[] = [];
-
-  participationConditions: IParticipationCondition[] = [];
-
-  attendees: string[] = [];
-
-  program = "";
-
-  commentModeration = CommentModeration.ALLOW_ALL;
-
-  showParticipationPrice = false;
-
-  showStartTime = true;
-
-  showEndTime = true;
-}
-
 export class EventModel implements IEvent {
   id?: string;
 
@@ -255,7 +171,7 @@ export class EventModel implements IEvent {
 
   comments: IComment[] = [];
 
-  attributedTo?: IActor = new Actor();
+  attributedTo?: IGroup = new Group();
 
   organizerActor?: IActor = new Actor();
 
@@ -323,7 +239,6 @@ export class EventModel implements IEvent {
       phoneAddress: this.phoneAddress,
       physicalAddress: this.physicalAddress,
       options: this.options,
-      //      organizerActorId: this.organizerActor && this.organizerActor.id ? this.organizerActor.id : null,
       attributedToId: this.attributedTo && this.attributedTo.id ? this.attributedTo.id : null,
       contacts: this.contacts.map(({ id }) => ({
         id,
@@ -331,23 +246,3 @@ export class EventModel implements IEvent {
     };
   }
 }
-
-interface IEventEditJSON {
-  id?: string;
-  title: string;
-  description: string;
-  beginsOn: string;
-  endsOn: string | null;
-  status: EventStatus;
-  visibility: EventVisibility;
-  joinOptions: EventJoinOptions;
-  draft: boolean;
-  picture: IPicture | { pictureId: string } | null;
-  attributedToId: string | null;
-  onlineAddress?: string;
-  phoneAddress?: string;
-  physicalAddress?: IAddress;
-  tags: string[];
-  options: IEventOptions;
-  contacts: { id?: string }[];
-}
diff --git a/js/src/types/participant.model.ts b/js/src/types/participant.model.ts
new file mode 100644
index 000000000..f74c71cd4
--- /dev/null
+++ b/js/src/types/participant.model.ts
@@ -0,0 +1,46 @@
+import { Actor, IActor } from "./actor";
+import { EventModel, IEvent } from "./event.model";
+
+export enum ParticipantRole {
+  NOT_APPROVED = "NOT_APPROVED",
+  NOT_CONFIRMED = "NOT_CONFIRMED",
+  REJECTED = "REJECTED",
+  PARTICIPANT = "PARTICIPANT",
+  MODERATOR = "MODERATOR",
+  ADMINISTRATOR = "ADMINISTRATOR",
+  CREATOR = "CREATOR",
+}
+
+export interface IParticipant {
+  id?: string;
+  role: ParticipantRole;
+  actor: IActor;
+  event: IEvent;
+  metadata: { cancellationToken?: string; message?: string };
+  insertedAt?: Date;
+}
+
+export class Participant implements IParticipant {
+  id?: string;
+
+  event!: IEvent;
+
+  actor!: IActor;
+
+  role: ParticipantRole = ParticipantRole.NOT_APPROVED;
+
+  metadata = {};
+
+  insertedAt?: Date;
+
+  constructor(hash?: IParticipant) {
+    if (!hash) return;
+
+    this.id = hash.id;
+    this.event = new EventModel(hash.event);
+    this.actor = new Actor(hash.actor);
+    this.role = hash.role;
+    this.metadata = hash.metadata;
+    this.insertedAt = hash.insertedAt;
+  }
+}
diff --git a/js/src/views/Discussions/Create.vue b/js/src/views/Discussions/Create.vue
index 4dfd4a961..a7f6424d0 100644
--- a/js/src/views/Discussions/Create.vue
+++ b/js/src/views/Discussions/Create.vue
@@ -63,13 +63,14 @@ export default class CreateDiscussion extends Vue {
 
   async createDiscussion(): Promise<void> {
     try {
+      if (!this.group.id || !this.currentActor.id) return;
       const { data } = await this.$apollo.mutate({
         mutation: CREATE_DISCUSSION,
         variables: {
           title: this.discussion.title,
           text: this.discussion.text,
-          actorId: this.group.id,
-          creatorId: this.currentActor.id,
+          actorId: parseInt(this.group.id, 10),
+          creatorId: parseInt(this.currentActor.id, 10),
         },
       });
 
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index 2fb16432b..6a4fa1bad 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -67,27 +67,6 @@
             />
           </p>
         </div>
-        <!--        <div class="field" v-if="event.attributedTo.id">-->
-        <!--          <label class="label">{{ $t('Hide the organizer') }}</label>-->
-        <!--          <b-switch v-model="event.options.hideOrganizerWhenGroupEvent">-->
-        <!--            {{ $t("Don't show @{organizer} as event host alongside @{group}", {organizer: event.organizerActor.preferredUsername, group: event.attributedTo.preferredUsername}) }}-->
-        <!--            <small>-->
-        <!--              <br>-->
-        <!--              {{ $t('All group members and other eventual server admins will still be able to view this information.') }}-->
-        <!--            </small>-->
-        <!--          </b-switch>-->
-        <!--        </div>-->
-
-        <!--<b-field :label="$t('Category')">
-          <b-select placeholder="Select a category" v-model="event.category">
-            <option
-              v-for="category in categories"
-              :value="category"
-              :key="category"
-            >{{ $t(category) }}</option>
-          </b-select>
-        </b-field>-->
-
         <subtitle>{{ $t("Who can view this event and participate") }}</subtitle>
         <div class="field">
           <b-radio
@@ -370,6 +349,8 @@ import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
 import Subtitle from "@/components/Utils/Subtitle.vue";
 import { Route } from "vue-router";
 import { formatList } from "@/utils/i18n";
+import { CommentModeration } from "../../types/event-options.model";
+import { ParticipantRole } from "../../types/participant.model";
 import OrganizerPickerWrapper from "../../components/Event/OrganizerPickerWrapper.vue";
 import {
   CREATE_EVENT,
@@ -378,13 +359,11 @@ import {
   FETCH_EVENT,
 } from "../../graphql/event";
 import {
-  CommentModeration,
   EventJoinOptions,
   EventModel,
   EventStatus,
   EventVisibility,
   IEvent,
-  ParticipantRole,
 } from "../../types/event.model";
 import {
   CURRENT_ACTOR_CLIENT,
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index d02327424..a69beab30 100644
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -88,10 +88,10 @@
                     :participation="participations[0]"
                     :event="event"
                     :current-actor="currentActor"
-                    @joinEvent="joinEvent"
-                    @joinModal="isJoinModalActive = true"
-                    @joinEventWithConfirmation="joinEventWithConfirmation"
-                    @confirmLeave="confirmLeave"
+                    @join-event="joinEvent"
+                    @join-modal="isJoinModalActive = true"
+                    @join-event-with-confirmation="joinEventWithConfirmation"
+                    @confirm-leave="confirmLeave"
                   />
                   <b-button
                     type="is-text"
@@ -504,7 +504,6 @@
 <script lang="ts">
 import { Component, Prop, Watch } from "vue-property-decorator";
 import BIcon from "buefy/src/components/icon/Icon.vue";
-import { GraphQLError } from "graphql";
 import {
   EVENT_PERSON_PARTICIPATION,
   EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
@@ -517,8 +516,6 @@ import {
   EventStatus,
   EventVisibility,
   IEvent,
-  IParticipant,
-  ParticipantRole,
   EventJoinOptions,
 } from "../../types/event.model";
 import { IActor, IPerson, Person, usernameWithDomain } from "../../types/actor";
@@ -549,6 +546,7 @@ import Tag from "../../components/Tag.vue";
 import EventMetadataBlock from "../../components/Event/EventMetadataBlock.vue";
 import ActorCard from "../../components/Account/ActorCard.vue";
 import PopoverActorCard from "../../components/Account/PopoverActorCard.vue";
+import { IParticipant, ParticipantRole } from "../../types/participant.model";
 
 @Component({
   components: {
diff --git a/js/src/views/Event/EventList.vue b/js/src/views/Event/EventList.vue
index 1b9ddc293..2455fdcb1 100644
--- a/js/src/views/Event/EventList.vue
+++ b/js/src/views/Event/EventList.vue
@@ -38,71 +38,9 @@ export default class EventList extends Vue {
 
   locationText = "";
 
-  // created() {
-  //   this.fetchData(this.$router.currentRoute.params.location);
-  // }
-
-  // beforeRouteUpdate(to, from, next) {
-  //   this.fetchData(to.params.location);
-  //   next();
-  // }
-
-  // @Watch('locationChip')
-  // onLocationChipChange(val) {
-  //   if (val === false) {
-  //     this.$router.push({ name: RouteName.EVENT_LIST });
-  //   }
-  // }
-
-  // geocode(lat, lon) {
-  //   console.log({ lat, lon });
-  //   console.log(ngeohash.encode(lat, lon, 10));
-  //   return ngeohash.encode(lat, lon, 10);
-  // }
-
-  // fetchData(location: string) {
-  //   let queryString = '/events';
-  //   if (location) {
-  //     queryString += `?geohash=${location}`;
-  //     const { latitude, longitude } = ngeohash.decode(location);
-  //     this.locationText = `${latitude.toString()} : ${longitude.toString()}`;
-  //   }
-  //   this.locationChip = true;
-  //   // FIXME: remove eventFetch
-  //   // eventFetch(queryString, this.$store)
-  //   //   .then(response => response.json())
-  //   //   .then((response) => {
-  //   //     this.loading = false;
-  //   //     this.events = response.data;
-  //   //     console.log(this.events);
-  //   //   });
-  // }
-
-  // deleteEvent(event: IEvent) {
-  //   const router = this.$router;
-  //   // FIXME: remove eventFetch
-  //   // eventFetch(`/events/${event.uuid}`, this.$store, { method: 'DELETE' })
-  //   //   .then(() => router.push('/events'));
-  // }
-
-  viewEvent(event: IEvent) {
+  viewEvent(event: IEvent): void {
     this.$router.push({ name: RouteName.EVENT, params: { uuid: event.uuid } });
   }
-
-  // downloadIcsEvent(event: IEvent) {
-  //   // FIXME: remove eventFetch
-  //   // eventFetch(`/events/${event.uuid}/ics`, this.$store, { responseType: 'arraybuffer' })
-  //   //   .then(response => response.text())
-  //   //   .then((response) => {
-  //   //     const blob = new Blob([ response ], { type: 'text/calendar' });
-  //   //     const link = document.createElement('a');
-  //   //     link.href = window.URL.createObjectURL(blob);
-  //   //     link.download = `${event.title}.ics`;
-  //   //     document.body.appendChild(link);
-  //   //     link.click();
-  //   //     document.body.removeChild(link);
-  //   //   });
-  // }
 }
 </script>
 
diff --git a/js/src/views/Event/MyEvents.vue b/js/src/views/Event/MyEvents.vue
index 593713de7..99caf50bb 100644
--- a/js/src/views/Event/MyEvents.vue
+++ b/js/src/views/Event/MyEvents.vue
@@ -16,7 +16,7 @@
             :key="participation.id"
             :participation="participation"
             :options="{ hideDate: false }"
-            @eventDeleted="eventDeleted"
+            @event-deleted="eventDeleted"
             class="participation"
           />
         </div>
@@ -57,7 +57,7 @@
             :key="participation.id"
             :participation="participation"
             :options="{ hideDate: false }"
-            @eventDeleted="eventDeleted"
+            @event-deleted="eventDeleted"
             class="participation"
           />
         </div>
@@ -88,14 +88,9 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { IParticipant, Participant, ParticipantRole } from "../../types/participant.model";
 import { LOGGED_USER_PARTICIPATIONS, LOGGED_USER_DRAFTS } from "../../graphql/actor";
-import {
-  EventModel,
-  IEvent,
-  IParticipant,
-  Participant,
-  ParticipantRole,
-} from "../../types/event.model";
+import { EventModel, IEvent } from "../../types/event.model";
 import EventListCard from "../../components/Event/EventListCard.vue";
 import EventCard from "../../components/Event/EventCard.vue";
 import Subtitle from "../../components/Utils/Subtitle.vue";
@@ -207,7 +202,7 @@ export default class MyEvents extends Vue {
     return MyEvents.monthlyParticipations(this.pastParticipations, true);
   }
 
-  loadMoreFutureParticipations() {
+  loadMoreFutureParticipations(): void {
     this.futurePage += 1;
     this.$apollo.queries.futureParticipations.fetchMore({
       // New variables
@@ -236,7 +231,7 @@ export default class MyEvents extends Vue {
     });
   }
 
-  loadMorePastParticipations() {
+  loadMorePastParticipations(): void {
     this.pastPage += 1;
     this.$apollo.queries.pastParticipations.fetchMore({
       // New variables
@@ -265,7 +260,7 @@ export default class MyEvents extends Vue {
     });
   }
 
-  eventDeleted(eventid: string) {
+  eventDeleted(eventid: string): void {
     this.futureParticipations = this.futureParticipations.filter(
       (participation) => participation.event.id !== eventid
     );
diff --git a/js/src/views/Event/Participants.vue b/js/src/views/Event/Participants.vue
index d2ee4ea22..a529bfe62 100644
--- a/js/src/views/Event/Participants.vue
+++ b/js/src/views/Event/Participants.vue
@@ -185,12 +185,8 @@
 
 <script lang="ts">
 import { Component, Prop, Vue, Watch, Ref } from "vue-property-decorator";
-import {
-  IEvent,
-  IEventParticipantStats,
-  IParticipant,
-  ParticipantRole,
-} from "../../types/event.model";
+import { IParticipant, ParticipantRole } from "../../types/participant.model";
+import { IEvent, IEventParticipantStats } from "../../types/event.model";
 import { PARTICIPANTS, UPDATE_PARTICIPANT } from "../../graphql/event";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IPerson, usernameWithDomain } from "../../types/actor";
diff --git a/js/src/views/Group/Group.vue b/js/src/views/Group/Group.vue
index c355d7479..da476c5c2 100644
--- a/js/src/views/Group/Group.vue
+++ b/js/src/views/Group/Group.vue
@@ -109,11 +109,25 @@
           >
           <p class="buttons">
             <b-tooltip
-              :label="$t('You can only get invited to groups right now.')"
+              v-if="group.openness !== Openness.OPEN"
+              :label="$t('This group is invite-only')"
               position="is-bottom"
             >
-              <b-button disabled type="is-primary">{{ $t("Join group") }}</b-button>
-            </b-tooltip>
+              <b-button disabled type="is-primary">{{ $t("Join group") }}</b-button></b-tooltip
+            >
+            <b-button v-else-if="currentActor.id" @click="joinGroup" type="is-primary">{{
+              $t("Join group")
+            }}</b-button>
+            <b-button
+              tag="router-link"
+              :to="{
+                name: RouteName.GROUP_JOIN,
+                params: { preferredUsername: usernameWithDomain(group) },
+              }"
+              v-else
+              type="is-primary"
+              >{{ $t("Join group") }}</b-button
+            >
             <b-dropdown aria-role="list" position="is-bottom-left">
               <b-button slot="trigger" role="button" icon-right="dots-horizontal"> </b-button>
               <b-dropdown-item
@@ -348,7 +362,7 @@
 <script lang="ts">
 import { Component, Prop, Watch } from "vue-property-decorator";
 import EventCard from "@/components/Event/EventCard.vue";
-import { IActor, usernameWithDomain, MemberRole, IMember } from "@/types/actor";
+import { IActor, usernameWithDomain, MemberRole, IMember, Openness } from "@/types/actor";
 import Subtitle from "@/components/Utils/Subtitle.vue";
 import CompactTodo from "@/components/Todo/CompactTodo.vue";
 import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue";
@@ -365,6 +379,7 @@ import { IReport } from "@/types/report.model";
 import { IConfig } from "@/types/config.model";
 import GroupMixin from "@/mixins/group";
 import { mixins } from "vue-class-component";
+import { JOIN_GROUP } from "@/graphql/member";
 import RouteName from "../../router/name";
 import GroupSection from "../../components/Group/GroupSection.vue";
 import ReportModal from "../../components/Report/ReportModal.vue";
@@ -414,6 +429,8 @@ export default class Group extends mixins(GroupMixin) {
 
   usernameWithDomain = usernameWithDomain;
 
+  Openness = Openness;
+
   showMap = false;
 
   isReportModalActive = false;
@@ -425,6 +442,15 @@ export default class Group extends mixins(GroupMixin) {
     }
   }
 
+  async joinGroup(): Promise<void> {
+    this.$apollo.mutate({
+      mutation: JOIN_GROUP,
+      variables: {
+        groupId: this.group.id,
+      },
+    });
+  }
+
   acceptInvitation(): void {
     if (this.groupMember) {
       const index = this.person.memberships.elements.findIndex(
@@ -508,6 +534,12 @@ export default class Group extends mixins(GroupMixin) {
       .map(({ parent: { id } }) => id);
   }
 
+  @Watch("isCurrentActorAGroupMember")
+  refetchGroupData(): void {
+    console.log("refetchGroupData");
+    this.$apollo.queries.group.refetch();
+  }
+
   get isCurrentActorAGroupMember(): boolean {
     return this.groupMemberships !== undefined && this.groupMemberships.includes(this.group.id);
   }
diff --git a/js/src/views/Group/GroupMembers.vue b/js/src/views/Group/GroupMembers.vue
index e39f6f915..72e6e19ac 100644
--- a/js/src/views/Group/GroupMembers.vue
+++ b/js/src/views/Group/GroupMembers.vue
@@ -77,22 +77,24 @@
         </b-select>
       </b-field>
       <b-table
-        :data="group.members.elements"
+        v-if="members"
+        :data="members.elements"
         ref="queueTable"
         :loading="this.$apollo.loading"
         paginated
         backend-pagination
+        :current-page.sync="page"
         :pagination-simple="true"
         :aria-next-label="$t('Next page')"
         :aria-previous-label="$t('Previous page')"
         :aria-page-label="$t('Page')"
         :aria-current-label="$t('Current page')"
-        :total="group.members.total"
+        :total="members.total"
         :per-page="MEMBERS_PER_PAGE"
         backend-sorting
         :default-sort-direction="'desc'"
         :default-sort="['insertedAt', 'desc']"
-        @page-change="(newPage) => (page = newPage)"
+        @page-change="triggerLoadMoreMemberPageChange"
         @sort="(field, order) => $emit('sort', field, order)"
       >
         <b-table-column field="actor.preferredUsername" :label="$t('Member')" v-slot="props">
@@ -184,7 +186,7 @@ import { mixins } from "vue-class-component";
 import { FETCH_GROUP } from "@/graphql/group";
 import RouteName from "../../router/name";
 import { INVITE_MEMBER, GROUP_MEMBERS, REMOVE_MEMBER, UPDATE_MEMBER } from "../../graphql/member";
-import { IGroup, usernameWithDomain } from "../../types/actor";
+import { usernameWithDomain } from "../../types/actor";
 import { IMember, MemberRole } from "../../types/actor/group.model";
 
 @Component({
@@ -194,7 +196,7 @@ import { IMember, MemberRole } from "../../types/actor/group.model";
       variables() {
         return {
           name: this.$route.params.preferredUsername,
-          page: 1,
+          page: this.page,
           limit: this.MEMBERS_PER_PAGE,
           roles: this.roles,
         };
@@ -216,7 +218,7 @@ export default class GroupMembers extends mixins(GroupMixin) {
 
   RouteName = RouteName;
 
-  page = 1;
+  page = parseInt((this.$route.query.page as string) || "1", 10);
 
   MEMBERS_PER_PAGE = 10;
 
@@ -227,10 +229,20 @@ export default class GroupMembers extends mixins(GroupMixin) {
     if (Object.values(MemberRole).includes(roleQuery as MemberRole)) {
       this.roles = roleQuery as MemberRole;
     }
+    this.page = parseInt((this.$route.query.page as string) || "1", 10);
   }
 
   async inviteMember(): Promise<void> {
     try {
+      this.inviteError = "";
+      const { roles, MEMBERS_PER_PAGE, group, page } = this;
+      const variables = {
+        name: usernameWithDomain(group),
+        page,
+        limit: MEMBERS_PER_PAGE,
+        roles,
+      };
+      console.log("variables", variables);
       await this.$apollo.mutate<{ inviteMember: IMember }>({
         mutation: INVITE_MEMBER,
         variables: {
@@ -238,7 +250,10 @@ export default class GroupMembers extends mixins(GroupMixin) {
           targetActorUsername: this.newMemberUsername,
         },
         refetchQueries: [
-          { query: FETCH_GROUP, variables: { name: this.$route.params.preferredUsername } },
+          {
+            query: GROUP_MEMBERS,
+            variables,
+          },
         ],
       });
       this.$notifier.success(
@@ -257,34 +272,49 @@ export default class GroupMembers extends mixins(GroupMixin) {
   }
 
   @Watch("page")
-  loadMoreMembers(): void {
-    this.$apollo.queries.event.fetchMore({
+  triggerLoadMoreMemberPageChange(page: string): void {
+    this.$router.replace({
+      name: RouteName.GROUP_MEMBERS_SETTINGS,
+      query: { ...this.$route.query, page },
+    });
+  }
+
+  @Watch("roles")
+  triggerLoadMoreMemberRoleChange(roles: string): void {
+    this.$router.replace({
+      name: RouteName.GROUP_MEMBERS_SETTINGS,
+      query: { ...this.$route.query, roles },
+    });
+  }
+
+  async loadMoreMembers(): Promise<void> {
+    const { roles, MEMBERS_PER_PAGE, group, page } = this;
+    await this.$apollo.queries.members.fetchMore({
       // New variables
-      variables: {
-        page: this.page,
-        limit: this.MEMBERS_PER_PAGE,
+      variables() {
+        return {
+          name: usernameWithDomain(group),
+          page,
+          limit: MEMBERS_PER_PAGE,
+          roles,
+        };
       },
       // Transform the previous result with new data
       updateQuery: (previousResult, { fetchMoreResult }) => {
+        if (!fetchMoreResult) return previousResult;
         const oldMembers = previousResult.group.members;
         const newMembers = fetchMoreResult.group.members;
-
         return {
-          group: {
-            ...previousResult.event,
-            members: {
-              elements: [...oldMembers.elements, ...newMembers.elements],
-              total: newMembers.total,
-              __typename: oldMembers.__typename,
-            },
-          },
+          elements: [...oldMembers.elements, ...newMembers.elements],
+          total: newMembers.total,
+          __typename: oldMembers.__typename,
         };
       },
     });
   }
 
   async removeMember(memberId: string): Promise<void> {
-    console.log("removeMember", memberId);
+    const { roles, MEMBERS_PER_PAGE, group, page } = this;
     try {
       await this.$apollo.mutate<{ removeMember: IMember }>({
         mutation: REMOVE_MEMBER,
@@ -293,7 +323,17 @@ export default class GroupMembers extends mixins(GroupMixin) {
           memberId,
         },
         refetchQueries: [
-          { query: FETCH_GROUP, variables: { name: this.$route.params.preferredUsername } },
+          {
+            query: GROUP_MEMBERS,
+            variables() {
+              return {
+                name: usernameWithDomain(group),
+                page,
+                limit: MEMBERS_PER_PAGE,
+                roles,
+              };
+            },
+          },
         ],
       });
       this.$notifier.success(
diff --git a/js/src/views/Group/GroupSettings.vue b/js/src/views/Group/GroupSettings.vue
index e57ad2a18..58bf11569 100644
--- a/js/src/views/Group/GroupSettings.vue
+++ b/js/src/views/Group/GroupSettings.vue
@@ -102,6 +102,31 @@
           </p>
         </div>
 
+        <p class="label">{{ $t("New members") }}</p>
+        <div class="field">
+          <b-radio v-model="group.openness" name="groupOpenness" :native-value="Openness.OPEN">
+            {{ $t("Anyone can join freely") }}<br />
+            <small>{{
+              $t(
+                "Anyone wanting to be a member from your group will be able to from your group page."
+              )
+            }}</small>
+          </b-radio>
+        </div>
+        <div class="field">
+          <b-radio
+            v-model="group.openness"
+            name="groupOpenness"
+            :native-value="Openness.INVITE_ONLY"
+            >{{ $t("Manually invite new members") }}<br />
+            <small>{{
+              $t(
+                "The only way for your group to get new members is if an admininistrator invites them."
+              )
+            }}</small>
+          </b-radio>
+        </div>
+
         <full-address-auto-complete
           :label="$t('Group address')"
           v-model="group.physicalAddress"
@@ -129,7 +154,7 @@ import { mixins } from "vue-class-component";
 import GroupMixin from "@/mixins/group";
 import RouteName from "../../router/name";
 import { UPDATE_GROUP, DELETE_GROUP } from "../../graphql/group";
-import { IGroup, usernameWithDomain } from "../../types/actor";
+import { IGroup, usernameWithDomain, Openness } from "../../types/actor";
 import { Address, IAddress } from "../../types/address.model";
 
 @Component({
@@ -157,6 +182,8 @@ export default class GroupSettings extends mixins(GroupMixin) {
     UNLISTED: "UNLISTED",
   };
 
+  Openness = Openness;
+
   showCopiedTooltip = false;
 
   async updateGroup(): Promise<void> {
diff --git a/js/src/views/Group/MyGroups.vue b/js/src/views/Group/MyGroups.vue
index 6850db56b..e8051adaf 100644
--- a/js/src/views/Group/MyGroups.vue
+++ b/js/src/views/Group/MyGroups.vue
@@ -27,6 +27,16 @@
         :member="member"
         @leave="leaveGroup(member.parent)"
       />
+      <b-pagination
+        :total="membershipsPages.total"
+        v-model="page"
+        :per-page="limit"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
+      >
+      </b-pagination>
     </section>
     <b-message v-if="$apollo.loading === false && memberships.length === 0" type="is-danger">
       {{ $t("No groups found") }}
@@ -54,10 +64,11 @@ import RouteName from "../../router/name";
     membershipsPages: {
       query: LOGGED_USER_MEMBERSHIPS,
       fetchPolicy: "cache-and-network",
-      variables: {
-        page: 1,
-        limit: 10,
-        beforeDateTime: new Date().toISOString(),
+      variables() {
+        return {
+          page: this.page,
+          limit: this.limit,
+        };
       },
       update: (data) => data.loggedUser.memberships,
     },
@@ -76,6 +87,10 @@ export default class MyGroups extends Vue {
 
   RouteName = RouteName;
 
+  page = 1;
+
+  limit = 10;
+
   acceptInvitation(member: IMember): Promise<Route> {
     return this.$router.push({
       name: RouteName.GROUP,
@@ -94,11 +109,21 @@ export default class MyGroups extends Vue {
   }
 
   async leaveGroup(group: IGroup): Promise<void> {
+    const { page, limit } = this;
     await this.$apollo.mutate({
       mutation: LEAVE_GROUP,
       variables: {
         groupId: group.id,
       },
+      refetchQueries: [
+        {
+          query: LOGGED_USER_MEMBERSHIPS,
+          variables: {
+            page,
+            limit,
+          },
+        },
+      ],
     });
   }
 
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index 0b86c60df..599ae6502 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -128,7 +128,7 @@
             <EventListCard
               v-for="participation in row[1]"
               v-if="isInLessThanSevenDays(row[0])"
-              @eventDeleted="eventDeleted"
+              @event-deleted="eventDeleted"
               :key="participation[1].id"
               :participation="participation[1]"
             />
@@ -148,7 +148,7 @@
             v-for="participation in lastWeekEvents"
             :key="participation.id"
             :participation="participation"
-            @eventDeleted="eventDeleted"
+            @event-deleted="eventDeleted"
             :options="{ hideDate: false }"
           />
         </div>
@@ -174,6 +174,7 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { IParticipant, Participant, ParticipantRole } from "../types/participant.model";
 import { FETCH_EVENTS } from "../graphql/event";
 import EventListCard from "../components/Event/EventListCard.vue";
 import EventCard from "../components/Event/EventCard.vue";
@@ -182,7 +183,7 @@ import { IPerson, Person } from "../types/actor";
 import { ICurrentUser } from "../types/current-user.model";
 import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
 import RouteName from "../router/name";
-import { IEvent, IParticipant, Participant, ParticipantRole } from "../types/event.model";
+import { IEvent } from "../types/event.model";
 import DateComponent from "../components/Event/DateCalendarIcon.vue";
 import { CONFIG } from "../graphql/config";
 import { IConfig } from "../types/config.model";
diff --git a/js/src/views/Interact.vue b/js/src/views/Interact.vue
index b997ce8d8..a4adb791a 100644
--- a/js/src/views/Interact.vue
+++ b/js/src/views/Interact.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="container section">
-    <b-notification v-if="$apollo.queries.searchEvents.loading">
-      {{ $t("Redirecting to event…") }}
+    <b-notification v-if="$apollo.queries.interact.loading">
+      {{ $t("Redirecting to content…") }}
     </b-notification>
-    <b-notification v-if="$apollo.queries.searchEvents.skip" type="is-danger">
+    <b-notification v-if="$apollo.queries.interact.skip" type="is-danger">
       {{ $t("Resource provided is not an URL") }}
     </b-notification>
   </div>
@@ -11,48 +11,58 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { SEARCH_EVENTS } from "@/graphql/search";
+import { INTERACT } from "@/graphql/search";
 import { IEvent } from "@/types/event.model";
+import { IGroup, usernameWithDomain } from "@/types/actor";
 import RouteName from "../router/name";
 
 @Component({
   apollo: {
-    searchEvents: {
-      query: SEARCH_EVENTS,
+    interact: {
+      query: INTERACT,
       variables() {
         return {
-          searchText: this.$route.query.url,
+          uri: this.$route.query.uri,
         };
       },
       skip() {
         try {
-          const url = this.$route.query.url as string;
+          const url = this.$route.query.uri as string;
           const uri = new URL(url);
           return !(uri instanceof URL);
         } catch (e) {
           return true;
         }
       },
-      async result({ data }) {
-        if (
-          data.searchEvents &&
-          data.searchEvents.total > 0 &&
-          data.searchEvents.elements.length > 0
-        ) {
-          const event = data.searchEvents.elements[0];
-          await this.$router.replace({
-            name: RouteName.EVENT,
-            params: { uuid: event.uuid },
-          });
+      async result({ data: { interact } }) {
+        switch (interact.__typename) {
+          case "Group":
+            await this.$router.replace({
+              name: RouteName.GROUP,
+              params: { preferredUsername: usernameWithDomain(interact) },
+            });
+            break;
+          case "Event":
+            await this.$router.replace({
+              name: RouteName.EVENT,
+              params: { uuid: interact.uuid },
+            });
+            break;
+          default:
+            this.error = this.$t("This URL is not supported");
         }
+        // await this.$router.replace({
+        //   name: RouteName.EVENT,
+        //   params: { uuid: event.uuid },
+        // });
       },
     },
   },
 })
 export default class Interact extends Vue {
-  searchEvents!: IEvent[];
+  interact!: IEvent | IGroup;
 
-  RouteName = RouteName;
+  error!: string;
 }
 </script>
 <style lang="scss">
diff --git a/js/src/views/Settings/Notifications.vue b/js/src/views/Settings/Notifications.vue
index 829c6508a..718569056 100644
--- a/js/src/views/Settings/Notifications.vue
+++ b/js/src/views/Settings/Notifications.vue
@@ -103,7 +103,7 @@
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { USER_SETTINGS, SET_USER_SETTINGS } from "../../graphql/user";
-import { IUser, INotificationPendingParticipationEnum } from "../../types/current-user.model";
+import { IUser, INotificationPendingEnum } from "../../types/current-user.model";
 import RouteName from "../../router/name";
 
 @Component({
@@ -120,7 +120,7 @@ export default class Notifications extends Vue {
 
   notificationBeforeEvent = false;
 
-  notificationPendingParticipation = INotificationPendingParticipationEnum.NONE;
+  notificationPendingParticipation = INotificationPendingEnum.NONE;
 
   notificationPendingParticipationValues: Record<string, unknown> = {};
 
@@ -128,10 +128,10 @@ export default class Notifications extends Vue {
 
   mounted(): void {
     this.notificationPendingParticipationValues = {
-      [INotificationPendingParticipationEnum.NONE]: this.$t("Do not receive any mail"),
-      [INotificationPendingParticipationEnum.DIRECT]: this.$t("Receive one email per request"),
-      [INotificationPendingParticipationEnum.ONE_HOUR]: this.$t("Hourly email summary"),
-      [INotificationPendingParticipationEnum.ONE_DAY]: this.$t("Daily email summary"),
+      [INotificationPendingEnum.NONE]: this.$t("Do not receive any mail"),
+      [INotificationPendingEnum.DIRECT]: this.$t("Receive one email per request"),
+      [INotificationPendingEnum.ONE_HOUR]: this.$t("Hourly email summary"),
+      [INotificationPendingEnum.ONE_DAY]: this.$t("Daily email summary"),
     };
   }
 
diff --git a/js/src/views/User/Login.vue b/js/src/views/User/Login.vue
index 4203607f3..ce4370831 100644
--- a/js/src/views/User/Login.vue
+++ b/js/src/views/User/Login.vue
@@ -160,8 +160,6 @@ export default class Login extends Vue {
     email: validateEmailField,
   };
 
-  private redirect: string | null = null;
-
   submitted = false;
 
   mounted(): void {
@@ -170,7 +168,6 @@ export default class Login extends Vue {
 
     const { query } = this.$route;
     this.errorCode = query.code as LoginErrorCode;
-    this.redirect = query.redirect as string;
   }
 
   async loginAction(e: Event): Promise<Route | void> {
@@ -219,11 +216,14 @@ export default class Login extends Vue {
         }
       }
 
-      if (this.redirect) {
-        this.$router.push(this.redirect);
+      if (this.$route.query.redirect) {
+        console.log("redirect", this.$route.query.redirect);
+        this.$router.push(this.$route.query.redirect as string);
+        return;
       }
       window.localStorage.setItem("welcome-back", "yes");
       this.$router.push({ name: RouteName.HOME });
+      return;
     } catch (err) {
       this.submitted = false;
       console.error(err);
diff --git a/lib/federation/activity_pub/activity_pub.ex b/lib/federation/activity_pub/activity_pub.ex
index 4332bdcb1..c3fbe3cde 100644
--- a/lib/federation/activity_pub/activity_pub.ex
+++ b/lib/federation/activity_pub/activity_pub.ex
@@ -32,6 +32,7 @@ defmodule Mobilizon.Federation.ActivityPub do
     Federator,
     Fetcher,
     Preloader,
+    Refresher,
     Relay,
     Transmogrifier,
     Types,
@@ -373,7 +374,9 @@ defmodule Mobilizon.Federation.ActivityPub do
     end
   end
 
-  def join(%Event{} = event, %Actor{} = actor, local \\ true, additional \\ %{}) do
+  def join(entity_to_join, actor_joining, local \\ true, additional \\ %{})
+
+  def join(%Event{} = event, %Actor{} = actor, local, additional) do
     with {:ok, activity_data, participant} <- Types.Events.join(event, actor, local, additional),
          {:ok, activity} <- create_activity(activity_data, local),
          :ok <- maybe_federate(activity) do
@@ -387,18 +390,15 @@ defmodule Mobilizon.Federation.ActivityPub do
     end
   end
 
-  def join_group(
-        %{parent_id: _parent_id, actor_id: _actor_id, role: _role} = args,
-        local \\ true,
-        additional \\ %{}
-      ) do
-    with {:ok, %Member{} = member} <-
-           Mobilizon.Actors.create_member(args),
-         activity_data when is_map(activity_data) <-
-           Convertible.model_to_as(member),
-         {:ok, activity} <- create_activity(Map.merge(activity_data, additional), local),
+  def join(%Actor{type: :Group} = group, %Actor{} = actor, local, additional) do
+    with {:ok, activity_data, %Member{} = member} <-
+           Types.Actors.join(group, actor, local, additional),
+         {:ok, activity} <- create_activity(activity_data, local),
          :ok <- maybe_federate(activity) do
       {:ok, activity, member}
+    else
+      {:accept, accept} ->
+        accept
     end
   end
 
@@ -899,6 +899,36 @@ defmodule Mobilizon.Federation.ActivityPub do
     end
   end
 
+  @spec accept_join(Member.t(), map) :: {:ok, Member.t(), Activity.t()} | any
+  defp accept_join(%Member{} = member, additional) do
+    with {:ok, %Member{} = member} <-
+           Actors.update_member(member, %{role: :member}),
+         _ <-
+           unless(is_nil(member.parent.domain),
+             do: Refresher.fetch_group(member.parent.url, member.actor)
+           ),
+         Absinthe.Subscription.publish(Endpoint, member.actor,
+           group_membership_changed: member.actor.id
+         ),
+         member_as_data <- Convertible.model_to_as(member),
+         audience <-
+           Audience.calculate_to_and_cc_from_mentions(member),
+         update_data <-
+           make_accept_join_data(
+             member_as_data,
+             Map.merge(Map.merge(audience, additional), %{
+               "id" => "#{Endpoint.url()}/accept/join/#{member.id}"
+             })
+           ) do
+      {:ok, member, update_data}
+    else
+      err ->
+        Logger.error("Something went wrong while creating an update activity")
+        Logger.debug(inspect(err))
+        err
+    end
+  end
+
   @spec accept_invite(Member.t(), map()) :: {:ok, Member.t(), Activity.t()} | any
   defp accept_invite(
          %Member{invited_by_id: invited_by_id, actor_id: actor_id} = member,
diff --git a/lib/federation/activity_pub/audience.ex b/lib/federation/activity_pub/audience.ex
index 04449cb34..475dc05dc 100644
--- a/lib/federation/activity_pub/audience.ex
+++ b/lib/federation/activity_pub/audience.ex
@@ -4,7 +4,7 @@ defmodule Mobilizon.Federation.ActivityPub.Audience do
   """
 
   alias Mobilizon.Actors
-  alias Mobilizon.Actors.Actor
+  alias Mobilizon.Actors.{Actor, Member}
   alias Mobilizon.Discussions.{Comment, Discussion}
   alias Mobilizon.Events.{Event, Participant}
   alias Mobilizon.Share
@@ -150,6 +150,12 @@ defmodule Mobilizon.Federation.ActivityPub.Audience do
     %{"to" => [participant.actor.url], "cc" => actor_participants_urls}
   end
 
+  def calculate_to_and_cc_from_mentions(%Member{} = member) do
+    member = Repo.preload(member, [:parent])
+
+    %{"to" => [member.parent.members_url], "cc" => []}
+  end
+
   def calculate_to_and_cc_from_mentions(%Actor{} = actor) do
     %{
       "to" => [@ap_public],
diff --git a/lib/federation/activity_pub/refresher.ex b/lib/federation/activity_pub/refresher.ex
index 2169e5212..cd7895ef4 100644
--- a/lib/federation/activity_pub/refresher.ex
+++ b/lib/federation/activity_pub/refresher.ex
@@ -7,6 +7,7 @@ defmodule Mobilizon.Federation.ActivityPub.Refresher do
   alias Mobilizon.Actors.Actor
   alias Mobilizon.Federation.ActivityPub
   alias Mobilizon.Federation.ActivityPub.{Fetcher, Relay, Transmogrifier, Utils}
+  alias Mobilizon.Storage.Repo
   require Logger
 
   @doc """
@@ -58,6 +59,10 @@ defmodule Mobilizon.Federation.ActivityPub.Refresher do
          :ok <- fetch_collection(discussions_url, on_behalf_of),
          :ok <- fetch_collection(events_url, on_behalf_of) do
       :ok
+    else
+      err ->
+        Logger.error("Error while refreshing a group")
+        Logger.error(inspect(err))
     end
   end
 
@@ -70,6 +75,7 @@ defmodule Mobilizon.Federation.ActivityPub.Refresher do
     with {:ok, data} <- Fetcher.fetch(collection_url, on_behalf_of: on_behalf_of),
          :ok <- Logger.debug("Fetch ok, passing to process_collection"),
          :ok <- process_collection(data, on_behalf_of) do
+      Logger.debug("Finished processing a collection")
       :ok
     end
   end
@@ -90,6 +96,19 @@ defmodule Mobilizon.Federation.ActivityPub.Refresher do
     end
   end
 
+  @spec refresh_all_external_groups :: any()
+  def refresh_all_external_groups do
+    Repo.transaction(fn ->
+      Actors.list_external_groups_for_stream()
+      |> Stream.map(fn %Actor{id: group_id, url: group_url} ->
+        {group_url, Actors.get_single_group_member_actor(group_id)}
+      end)
+      |> Stream.filter(fn {_group_url, member_actor} -> not is_nil(member_actor) end)
+      |> Stream.map(fn {group_url, member_actor} -> fetch_group(group_url, member_actor) end)
+      |> Stream.run()
+    end)
+  end
+
   defp process_collection(%{"type" => type, "orderedItems" => items}, _on_behalf_of)
        when type in ["OrderedCollection", "OrderedCollectionPage"] do
     Logger.debug(
@@ -99,6 +118,7 @@ defmodule Mobilizon.Federation.ActivityPub.Refresher do
     Logger.debug(inspect(items))
 
     Enum.each(items, &handling_element/1)
+    Logger.debug("Finished processing a collection")
     :ok
   end
 
diff --git a/lib/federation/activity_pub/transmogrifier.ex b/lib/federation/activity_pub/transmogrifier.ex
index c215cd111..2d696a176 100644
--- a/lib/federation/activity_pub/transmogrifier.ex
+++ b/lib/federation/activity_pub/transmogrifier.ex
@@ -135,13 +135,22 @@ defmodule Mobilizon.Federation.ActivityPub.Transmogrifier do
 
     with object_data when is_map(object_data) <-
            object |> Converter.Member.as_to_model_data() do
+      Logger.debug("Produced the following model data for member")
+      Logger.debug(inspect(object_data))
+
       with {:existing_member, nil} <-
              {:existing_member, Actors.get_member_by_url(object_data.url)},
+           %Actor{type: :Group} = group <- Actors.get_actor(object_data.parent_id),
+           %Actor{} = actor <- Actors.get_actor(object_data.actor_id),
            {:ok, %Activity{} = activity, %Member{} = member} <-
-             ActivityPub.join_group(object_data, false) do
+             ActivityPub.join(group, actor, false, %{
+               url: object_data.url,
+               metadata: %{role: object_data.role}
+             }) do
         {:ok, activity, member}
       else
         {:existing_member, %Member{} = member} ->
+          Logger.debug("Member already exists, updating member")
           {:ok, %Member{} = member} = Actors.update_member(member, object_data)
 
           {:ok, nil, member}
@@ -608,8 +617,7 @@ defmodule Mobilizon.Federation.ActivityPub.Transmogrifier do
           "type" => "Join",
           "object" => object,
           "actor" => _actor,
-          "id" => id,
-          "participationMessage" => note
+          "id" => id
         } = data
       ) do
     with actor <- Utils.get_actor(data),
@@ -618,7 +626,10 @@ defmodule Mobilizon.Federation.ActivityPub.Transmogrifier do
          object <- Utils.get_url(object),
          {:ok, object} <- ActivityPub.fetch_object_from_url(object),
          {:ok, activity, object} <-
-           ActivityPub.join(object, actor, false, %{url: id, metadata: %{message: note}}) do
+           ActivityPub.join(object, actor, false, %{
+             url: id,
+             metadata: %{message: Map.get(data, "participationMessage")}
+           }) do
       {:ok, activity, object}
     else
       e ->
@@ -804,8 +815,11 @@ defmodule Mobilizon.Federation.ActivityPub.Transmogrifier do
 
       {:error, _err} ->
         case get_member(join_object) do
-          {:ok, member} ->
-            do_handle_incoming_accept_join_group(member, actor_accepting)
+          {:ok, %Member{invited_by: nil} = member} ->
+            do_handle_incoming_accept_join_group(member, :join)
+
+          {:ok, %Member{} = member} ->
+            do_handle_incoming_accept_join_group(member, :invite)
 
           {:error, _err} ->
             nil
@@ -847,7 +861,7 @@ defmodule Mobilizon.Federation.ActivityPub.Transmogrifier do
     end
   end
 
-  defp do_handle_incoming_accept_join_group(%Member{role: :member}, _actor) do
+  defp do_handle_incoming_accept_join_group(%Member{role: :member}, _type) do
     Logger.debug(
       "Tried to handle an Accept activity on a Join activity with a group object but the member is already validated"
     )
@@ -857,14 +871,14 @@ defmodule Mobilizon.Federation.ActivityPub.Transmogrifier do
 
   defp do_handle_incoming_accept_join_group(
          %Member{role: role, parent: _group} = member,
-         %Actor{} = _actor_accepting
+         type
        )
-       when role in [:not_approved, :rejected, :invited] do
+       when role in [:not_approved, :rejected, :invited] and type in [:join, :invite] do
     # TODO: The actor that accepts the Join activity may another one that the event organizer ?
     # Or maybe for groups it's the group that sends the Accept activity
     with {:ok, %Activity{} = activity, %Member{role: :member} = member} <-
            ActivityPub.accept(
-             :invite,
+             type,
              member,
              false
            ) do
diff --git a/lib/federation/activity_pub/types/actors.ex b/lib/federation/activity_pub/types/actors.ex
index bc147b9d8..7491d1684 100644
--- a/lib/federation/activity_pub/types/actors.ex
+++ b/lib/federation/activity_pub/types/actors.ex
@@ -1,12 +1,15 @@
 defmodule Mobilizon.Federation.ActivityPub.Types.Actors do
   @moduledoc false
   alias Mobilizon.Actors
-  alias Mobilizon.Actors.Actor
+  alias Mobilizon.Actors.{Actor, Member}
+  alias Mobilizon.Federation.ActivityPub
   alias Mobilizon.Federation.ActivityPub.Audience
   alias Mobilizon.Federation.ActivityPub.Types.Entity
   alias Mobilizon.Federation.ActivityStream.Convertible
   alias Mobilizon.GraphQL.API.Utils, as: APIUtils
   alias Mobilizon.Service.Formatter.HTML
+  alias Mobilizon.Service.Notifications.Scheduler
+  alias Mobilizon.Web.Endpoint
   import Mobilizon.Federation.ActivityPub.Utils, only: [make_create_data: 2, make_update_data: 2]
 
   @behaviour Entity
@@ -91,6 +94,42 @@ defmodule Mobilizon.Federation.ActivityPub.Types.Actors do
   def role_needed_to_update(%Actor{} = _group), do: :administrator
   def role_needed_to_delete(%Actor{} = _group), do: :administrator
 
+  @spec join(Actor.t(), Actor.t(), boolean(), map()) :: {:ok, map(), Member.t()}
+  def join(%Actor{type: :Group} = group, %Actor{} = actor, _local, additional) do
+    with role <-
+           additional
+           |> Map.get(:metadata, %{})
+           |> Map.get(:role, Mobilizon.Actors.get_default_member_role(group)),
+         {:ok, %Member{} = member} <-
+           Mobilizon.Actors.create_member(%{
+             role: role,
+             parent_id: group.id,
+             actor_id: actor.id,
+             url: Map.get(additional, :url),
+             metadata:
+               additional
+               |> Map.get(:metadata, %{})
+               |> Map.update(:message, nil, &String.trim(HTML.strip_tags(&1)))
+           }),
+         Absinthe.Subscription.publish(Endpoint, actor, group_membership_changed: actor.id),
+         join_data <- %{
+           "type" => "Join",
+           "id" => member.url,
+           "actor" => actor.url,
+           "object" => group.url
+         },
+         audience <-
+           Audience.calculate_to_and_cc_from_mentions(member) do
+      approve_if_default_role_is_member(
+        group,
+        actor,
+        Map.merge(join_data, audience),
+        member,
+        role
+      )
+    end
+  end
+
   defp prepare_args_for_actor(args) do
     args
     |> maybe_sanitize_username()
@@ -115,4 +154,39 @@ defmodule Mobilizon.Federation.ActivityPub.Types.Actors do
   end
 
   defp maybe_sanitize_summary(args), do: args
+
+  # Set the participant to approved if the default role for new participants is :participant
+  @spec approve_if_default_role_is_member(Actor.t(), Actor.t(), map(), Member.t(), atom()) ::
+          {:ok, map(), Member.t()}
+  defp approve_if_default_role_is_member(
+         %Actor{type: :Group} = group,
+         %Actor{} = actor,
+         activity_data,
+         %Member{} = member,
+         role
+       ) do
+    if is_nil(group.domain) && !is_nil(actor.domain) do
+      cond do
+        Mobilizon.Actors.get_default_member_role(group) === :member &&
+            role == :member ->
+          {:accept,
+           ActivityPub.accept(
+             :join,
+             member,
+             true,
+             %{"actor" => group.url}
+           )}
+
+        Mobilizon.Actors.get_default_member_role(group) === :not_approved &&
+            role == :not_approved ->
+          Scheduler.pending_membership_notification(group)
+          {:ok, activity_data, member}
+
+        true ->
+          {:ok, activity_data, member}
+      end
+    else
+      {:ok, activity_data, member}
+    end
+  end
 end
diff --git a/lib/federation/activity_stream/converter/actor.ex b/lib/federation/activity_stream/converter/actor.ex
index f612836bb..a2e04a31e 100644
--- a/lib/federation/activity_stream/converter/actor.ex
+++ b/lib/federation/activity_stream/converter/actor.ex
@@ -65,7 +65,8 @@ defmodule Mobilizon.Federation.ActivityStream.Converter.Actor do
       domain: URI.parse(data["id"]).host,
       manually_approves_followers: data["manuallyApprovesFollowers"],
       type: data["type"],
-      visibility: if(Map.get(data, "discoverable", false) == true, do: :public, else: :unlisted)
+      visibility: if(Map.get(data, "discoverable", false) == true, do: :public, else: :unlisted),
+      openness: data["openness"]
     }
   end
 
@@ -98,6 +99,7 @@ defmodule Mobilizon.Federation.ActivityStream.Converter.Actor do
         "sharedInbox" => actor.shared_inbox_url
       },
       "discoverable" => actor.visibility == :public,
+      "openness" => actor.openness,
       "manuallyApprovesFollowers" => actor.manually_approves_followers,
       "publicKey" => %{
         "id" => "#{actor.url}#main-key",
diff --git a/lib/federation/activity_stream/converter/member.ex b/lib/federation/activity_stream/converter/member.ex
index c860fa3fc..0d55e8ef1 100644
--- a/lib/federation/activity_stream/converter/member.ex
+++ b/lib/federation/activity_stream/converter/member.ex
@@ -20,7 +20,7 @@ defmodule Mobilizon.Federation.ActivityStream.Converter.Member do
   end
 
   @doc """
-  Convert an event struct to an ActivityStream representation.
+  Convert an member struct to an ActivityStream representation.
   """
   @spec model_to_as(MemberModel.t()) :: map
   def model_to_as(%MemberModel{} = member) do
diff --git a/lib/graphql/api/search.ex b/lib/graphql/api/search.ex
index 77d971859..637a5a7d6 100644
--- a/lib/graphql/api/search.ex
+++ b/lib/graphql/api/search.ex
@@ -72,6 +72,18 @@ defmodule Mobilizon.GraphQL.API.Search do
     end
   end
 
+  def interact(uri) do
+    case ActivityPub.fetch_object_from_url(uri) do
+      {:ok, object} ->
+        {:ok, object}
+
+      {:error, _err} ->
+        Logger.debug(fn -> "Unable to find or make object from URI '#{uri}'" end)
+
+        {:error, :not_found}
+    end
+  end
+
   # If the search string is an username
   @spec process_from_username(String.t()) :: Page.t()
   defp process_from_username(search) do
diff --git a/lib/graphql/resolvers/discussion.ex b/lib/graphql/resolvers/discussion.ex
index e598ff95a..57640b3b7 100644
--- a/lib/graphql/resolvers/discussion.ex
+++ b/lib/graphql/resolvers/discussion.ex
@@ -75,7 +75,7 @@ defmodule Mobilizon.GraphQL.Resolvers.Discussion do
 
   def create_discussion(
         _parent,
-        %{title: title, text: text, actor_id: actor_id},
+        %{title: title, text: text, actor_id: group_id},
         %{
           context: %{
             current_user: %User{} = user
@@ -83,20 +83,23 @@ defmodule Mobilizon.GraphQL.Resolvers.Discussion do
         }
       ) do
     with {:actor, %Actor{id: creator_id} = _actor} <- {:actor, Users.get_actor_for_user(user)},
-         {:member, true} <- {:member, Actors.is_member?(creator_id, actor_id)},
+         {:member, true} <- {:member, Actors.is_member?(creator_id, group_id)},
          {:ok, _activity, %Discussion{} = discussion} <-
            ActivityPub.create(
              :discussion,
              %{
                title: title,
                text: text,
-               actor_id: actor_id,
+               actor_id: group_id,
                creator_id: creator_id,
-               attributed_to_id: actor_id
+               attributed_to_id: group_id
              },
              true
            ) do
       {:ok, discussion}
+    else
+      {:member, false} ->
+        {:error, :unauthorized}
     end
   end
 
diff --git a/lib/graphql/resolvers/group.ex b/lib/graphql/resolvers/group.ex
index 160d46f8f..1123a2645 100644
--- a/lib/graphql/resolvers/group.ex
+++ b/lib/graphql/resolvers/group.ex
@@ -215,35 +215,18 @@ defmodule Mobilizon.GraphQL.Resolvers.Group do
   @doc """
   Join an existing group
   """
-  def join_group(
-        _parent,
-        %{group_id: group_id, actor_id: actor_id},
-        %{
-          context: %{
-            current_user: user
-          }
-        }
-      ) do
-    with {actor_id, ""} <- Integer.parse(actor_id),
-         {group_id, ""} <- Integer.parse(group_id),
-         {:is_owned, %Actor{} = actor} <- User.owns_actor(user, actor_id),
-         {:ok, %Actor{} = group} <- Actors.get_group_by_actor_id(group_id),
+  def join_group(_parent, %{group_id: group_id} = args, %{
+        context: %{current_user: %User{} = user}
+      }) do
+    with %Actor{} = actor <- Users.get_actor_for_user(user),
+         {:ok, %Actor{type: :Group} = group} <-
+           Actors.get_group_by_actor_id(group_id),
          {:error, :member_not_found} <- Actors.get_member(actor.id, group.id),
          {:is_able_to_join, true} <- {:is_able_to_join, Member.can_be_joined(group)},
-         role <- Member.get_default_member_role(group),
-         {:ok, _} <- Actors.create_member(%{parent_id: group.id, actor_id: actor.id, role: role}) do
-      {
-        :ok,
-        %{
-          parent: Person.proxify_pictures(group),
-          actor: Person.proxify_pictures(actor),
-          role: role
-        }
-      }
+         {:ok, _activity, %Member{} = member} <-
+           ActivityPub.join(group, actor, true, args) do
+      {:ok, member}
     else
-      {:is_owned, nil} ->
-        {:error, dgettext("errors", "Profile is not owned by authenticated user")}
-
       {:error, :group_not_found} ->
         {:error, dgettext("errors", "Group not found")}
 
diff --git a/lib/graphql/resolvers/search.ex b/lib/graphql/resolvers/search.ex
index ad49e9290..b9a5b0b80 100644
--- a/lib/graphql/resolvers/search.ex
+++ b/lib/graphql/resolvers/search.ex
@@ -25,4 +25,8 @@ defmodule Mobilizon.GraphQL.Resolvers.Search do
   def search_events(_parent, %{page: page, limit: limit} = args, _resolution) do
     Search.search_events(args, page, limit)
   end
+
+  def interact(_parent, %{uri: uri}, _resolution) do
+    Search.interact(uri)
+  end
 end
diff --git a/lib/graphql/schema/actors/group.ex b/lib/graphql/schema/actors/group.ex
index 395a25e48..df6e3d118 100644
--- a/lib/graphql/schema/actors/group.ex
+++ b/lib/graphql/schema/actors/group.ex
@@ -17,7 +17,7 @@ defmodule Mobilizon.GraphQL.Schema.Actors.GroupType do
   Represents a group of actors
   """
   object :group do
-    interfaces([:actor])
+    interfaces([:actor, :interactable])
 
     field(:id, :id, description: "Internal ID for this group")
     field(:url, :string, description: "The ActivityPub actor's URL")
@@ -196,6 +196,10 @@ defmodule Mobilizon.GraphQL.Schema.Actors.GroupType do
 
       arg(:visibility, :group_visibility, description: "The visibility for the group")
 
+      arg(:openness, :openness,
+        description: "Whether the group can be join freely, with approval or is invite-only."
+      )
+
       arg(:avatar, :picture_input,
         description:
           "The avatar for the group, either as an object or directly the ID of an existing Picture"
diff --git a/lib/graphql/schema/actors/member.ex b/lib/graphql/schema/actors/member.ex
index d3130cca6..ad3b67d4f 100644
--- a/lib/graphql/schema/actors/member.ex
+++ b/lib/graphql/schema/actors/member.ex
@@ -38,7 +38,6 @@ defmodule Mobilizon.GraphQL.Schema.Actors.MemberType do
     @desc "Join a group"
     field :join_group, :member do
       arg(:group_id, non_null(:id))
-      arg(:actor_id, non_null(:id))
 
       resolve(&Group.join_group/3)
     end
diff --git a/lib/graphql/schema/actors/person.ex b/lib/graphql/schema/actors/person.ex
index 1ede6f7e4..64da4b2e5 100644
--- a/lib/graphql/schema/actors/person.ex
+++ b/lib/graphql/schema/actors/person.ex
@@ -197,5 +197,13 @@ defmodule Mobilizon.GraphQL.Schema.Actors.PersonType do
         {:ok, topic: args.person_id}
       end)
     end
+
+    field :group_membership_changed, :person do
+      arg(:person_id, non_null(:id))
+
+      config(fn args, _ ->
+        {:ok, topic: args.person_id}
+      end)
+    end
   end
 end
diff --git a/lib/graphql/schema/event.ex b/lib/graphql/schema/event.ex
index c4e5f880b..41dcd2cc5 100644
--- a/lib/graphql/schema/event.ex
+++ b/lib/graphql/schema/event.ex
@@ -17,7 +17,7 @@ defmodule Mobilizon.GraphQL.Schema.EventType do
 
   @desc "An event"
   object :event do
-    interfaces([:action_log_object])
+    interfaces([:action_log_object, :interactable])
     field(:id, :id, description: "Internal ID for this event")
     field(:uuid, :uuid, description: "The Event UUID")
     field(:url, :string, description: "The ActivityPub Event URL")
diff --git a/lib/graphql/schema/search.ex b/lib/graphql/schema/search.ex
index 2493690fc..59911cd86 100644
--- a/lib/graphql/schema/search.ex
+++ b/lib/graphql/schema/search.ex
@@ -4,6 +4,8 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
   """
   use Absinthe.Schema.Notation
 
+  alias Mobilizon.Actors.Actor
+  alias Mobilizon.Events.Event
   alias Mobilizon.GraphQL.Resolvers.Search
 
   @desc "Search persons result"
@@ -24,6 +26,21 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
     field(:elements, non_null(list_of(:event)), description: "Event elements")
   end
 
+  interface :interactable do
+    field(:url, :string, description: "A public URL for the entity")
+
+    resolve_type(fn
+      %Actor{type: :Group}, _ ->
+        :group
+
+      %Event{}, _ ->
+        :event
+
+      _, _ ->
+        nil
+    end)
+  end
+
   object :search_queries do
     @desc "Search persons"
     field :search_persons, :persons do
@@ -58,5 +75,12 @@ defmodule Mobilizon.GraphQL.Schema.SearchType do
 
       resolve(&Search.search_events/3)
     end
+
+    @desc "Interact with an URI"
+    field :interact, :interactable do
+      arg(:uri, non_null(:string), description: "The URI for to interact with")
+
+      resolve(&Search.interact/3)
+    end
   end
 end
diff --git a/lib/graphql/schema/user.ex b/lib/graphql/schema/user.ex
index f8d14df69..0c3a28ecb 100644
--- a/lib/graphql/schema/user.ex
+++ b/lib/graphql/schema/user.ex
@@ -132,12 +132,17 @@ defmodule Mobilizon.GraphQL.Schema.UserType do
       description: "Whether this user will receive a notification right before event"
     )
 
-    field(:notification_pending_participation, :notification_pending_participation_enum,
+    field(:notification_pending_participation, :notification_pending_enum,
       description: "When does the user receives a notification about new pending participations"
     )
+
+    field(:notification_pending_membership, :notification_pending_enum,
+      description:
+        "When does the user receives a notification about a new pending membership in one of the group they're admin for"
+    )
   end
 
-  enum :notification_pending_participation_enum do
+  enum :notification_pending_enum do
     value(:none, as: :none)
     value(:direct, as: :direct)
     value(:one_hour, as: :one_hour)
@@ -258,7 +263,8 @@ defmodule Mobilizon.GraphQL.Schema.UserType do
       arg(:notification_on_day, :boolean)
       arg(:notification_each_week, :boolean)
       arg(:notification_before_event, :boolean)
-      arg(:notification_pending_participation, :notification_pending_participation_enum)
+      arg(:notification_pending_participation, :notification_pending_enum)
+      arg(:notification_pending_membership, :notification_pending_enum)
       resolve(&User.set_user_setting/3)
     end
 
diff --git a/lib/mobilizon/actors/actor.ex b/lib/mobilizon/actors/actor.ex
index 2c03e46e5..09861ec63 100644
--- a/lib/mobilizon/actors/actor.ex
+++ b/lib/mobilizon/actors/actor.ex
@@ -84,7 +84,14 @@ defmodule Mobilizon.Actors.Actor do
   @attrs @required_attrs ++ @optional_attrs
 
   @update_required_attrs @required_attrs -- [:url]
-  @update_optional_attrs [:name, :summary, :manually_approves_followers, :user_id, :visibility]
+  @update_optional_attrs [
+    :name,
+    :summary,
+    :manually_approves_followers,
+    :user_id,
+    :visibility,
+    :openness
+  ]
   @update_attrs @update_required_attrs ++ @update_optional_attrs
 
   @registration_required_attrs [:preferred_username, :keys, :suspended, :url, :type]
@@ -113,7 +120,8 @@ defmodule Mobilizon.Actors.Actor do
     :name,
     :summary,
     :manually_approves_followers,
-    :visibility
+    :visibility,
+    :openness
   ]
   @remote_actor_creation_attrs @remote_actor_creation_required_attrs ++
                                  @remote_actor_creation_optional_attrs
@@ -349,6 +357,17 @@ defmodule Mobilizon.Actors.Actor do
     |> put_change(:inbox_url, build_url(username, :inbox))
     |> put_change(:shared_inbox_url, "#{Endpoint.url()}/inbox")
     |> put_change(:members_url, if(type == :Group, do: build_url(username, :members), else: nil))
+    |> put_change(
+      :resources_url,
+      if(type == :Group, do: build_url(username, :resources), else: nil)
+    )
+    |> put_change(:todos_url, if(type == :Group, do: build_url(username, :todos), else: nil))
+    |> put_change(:posts_url, if(type == :Group, do: build_url(username, :posts), else: nil))
+    |> put_change(:events_url, if(type == :Group, do: build_url(username, :events), else: nil))
+    |> put_change(
+      :discussions_url,
+      if(type == :Group, do: build_url(username, :discussions), else: nil)
+    )
     |> put_change(:url, build_url(username, :page))
   end
 
diff --git a/lib/mobilizon/actors/actors.ex b/lib/mobilizon/actors/actors.ex
index e43d95fc9..3d3ca51d3 100644
--- a/lib/mobilizon/actors/actors.ex
+++ b/lib/mobilizon/actors/actors.ex
@@ -640,6 +640,15 @@ defmodule Mobilizon.Actors do
     |> Repo.stream()
   end
 
+  @doc """
+  Lists the groups.
+  """
+  @spec list_groups_for_stream :: Enum.t()
+  def list_external_groups_for_stream do
+    external_groups_query()
+    |> Repo.stream()
+  end
+
   @doc """
   Returns the list of groups an actor is member of.
   """
@@ -720,6 +729,13 @@ defmodule Mobilizon.Actors do
     )
   end
 
+  @doc """
+  Gets the default member role depending on the event join options.
+  """
+  @spec get_default_member_role(Actor.t()) :: :member | :not_approved
+  def get_default_member_role(%Actor{openness: :open}), do: :member
+  def get_default_member_role(%Actor{openness: _}), do: :not_approved
+
   @doc """
   Gets a single member of an actor (for example a group).
   """
@@ -859,7 +875,7 @@ defmodule Mobilizon.Actors do
   end
 
   @doc """
-  Returns the list of administrator members for a group.
+  Returns a paginated list of administrator members for a group.
   """
   @spec list_administrator_members_for_group(integer | String.t(), integer | nil, integer | nil) ::
           Page.t()
@@ -869,6 +885,16 @@ defmodule Mobilizon.Actors do
     |> Page.build_page(page, limit)
   end
 
+  @doc """
+  Returns the complete list of administrator members for a group.
+  """
+  @spec list_all_administrator_members_for_group(integer | String.t()) :: [Member.t()]
+  def list_all_administrator_members_for_group(id) do
+    id
+    |> administrator_members_for_group_query()
+    |> Repo.all()
+  end
+
   @doc """
   Returns the list of all group ids where the actor_id is the last administrator.
   """
@@ -1400,6 +1426,11 @@ defmodule Mobilizon.Actors do
     )
   end
 
+  @spec external_groups_query :: Ecto.Query.t()
+  defp external_groups_query do
+    where(Actor, [a], a.type == ^:Group and not is_nil(a.domain))
+  end
+
   @spec list_members_for_user_query(integer()) :: Ecto.Query.t()
   defp list_members_for_user_query(user_id) do
     from(
@@ -1422,11 +1453,10 @@ defmodule Mobilizon.Actors do
 
   @spec members_for_group_query(integer | String.t()) :: Ecto.Query.t()
   defp members_for_group_query(group_id) do
-    from(
-      m in Member,
-      where: m.parent_id == ^group_id,
-      preload: [:parent, :actor]
-    )
+    Member
+    |> where(parent_id: ^group_id)
+    |> order_by(desc: :updated_at)
+    |> preload([:parent, :actor])
   end
 
   @spec group_external_member_actor_query(integer()) :: Ecto.Query.t()
diff --git a/lib/mobilizon/users/setting.ex b/lib/mobilizon/users/setting.ex
index 7ab991038..9d20f5d39 100644
--- a/lib/mobilizon/users/setting.ex
+++ b/lib/mobilizon/users/setting.ex
@@ -13,6 +13,7 @@ defmodule Mobilizon.Users.Setting do
           notification_each_week: boolean,
           notification_before_event: boolean,
           notification_pending_participation: NotificationPendingNotificationDelay.t(),
+          notification_pending_membership: NotificationPendingNotificationDelay.t(),
           user: User.t()
         }
 
@@ -23,7 +24,8 @@ defmodule Mobilizon.Users.Setting do
     :notification_on_day,
     :notification_each_week,
     :notification_before_event,
-    :notification_pending_participation
+    :notification_pending_participation,
+    :notification_pending_membership
   ]
 
   @attrs @required_attrs ++ @optional_attrs
@@ -39,6 +41,10 @@ defmodule Mobilizon.Users.Setting do
       default: :one_day
     )
 
+    field(:notification_pending_membership, NotificationPendingNotificationDelay,
+      default: :one_day
+    )
+
     belongs_to(:user, User, primary_key: true, type: :id, foreign_key: :id, define_field: false)
 
     timestamps()
diff --git a/lib/service/notifications/scheduler.ex b/lib/service/notifications/scheduler.ex
index c369b7b8e..9bde9fff6 100644
--- a/lib/service/notifications/scheduler.ex
+++ b/lib/service/notifications/scheduler.ex
@@ -4,7 +4,7 @@ defmodule Mobilizon.Service.Notifications.Scheduler do
   """
 
   alias Mobilizon.{Actors, Users}
-  alias Mobilizon.Actors.Actor
+  alias Mobilizon.Actors.{Actor, Member}
   alias Mobilizon.Events.{Event, Participant}
   alias Mobilizon.Service.Workers.Notification
   alias Mobilizon.Users.{Setting, User}
@@ -193,6 +193,77 @@ defmodule Mobilizon.Service.Notifications.Scheduler do
 
   def pending_participation_notification(_), do: {:ok, nil}
 
+  def pending_membership_notification(%Actor{type: :Group, id: group_id}) do
+    group_id
+    |> Actors.list_all_administrator_members_for_group()
+    |> Enum.map(fn %Member{actor: %Actor{id: actor_id}} ->
+      Actors.get_actor(actor_id)
+    end)
+    |> Enum.each(fn actor -> pending_membership_admin_notification(actor, group_id) end)
+  end
+
+  def pending_membership_notification(_), do: {:ok, nil}
+
+  defp pending_membership_admin_notification(%Actor{user_id: user_id}, group_id)
+       when not is_nil(user_id) do
+    case Users.get_user_with_settings!(user_id) do
+      %User{} = user ->
+        pending_membership_admin_notification_user(user, group_id)
+
+      # No user for actor, probably a remote actor, ignore
+      _ ->
+        {:ok, nil}
+    end
+  end
+
+  defp pending_membership_admin_notification_user(
+         %User{
+           id: user_id,
+           locale: locale,
+           settings: %Setting{
+             notification_pending_membership: notification_pending_membership,
+             timezone: timezone
+           }
+         },
+         group_id
+       ) do
+    send_at =
+      case notification_pending_membership do
+        :none ->
+          nil
+
+        :direct ->
+          :direct
+
+        :one_day ->
+          calculate_next_day_notification(Date.utc_today(), timezone, locale)
+
+        :one_hour ->
+          DateTime.utc_now()
+          |> DateTime.shift_zone!(timezone)
+          |> (&%{&1 | minute: 0, second: 0, microsecond: {0, 0}}).()
+      end
+
+    params = %{
+      user_id: user_id,
+      group_id: group_id
+    }
+
+    cond do
+      # Sending directly
+      send_at == :direct ->
+        Notification.enqueue(:pending_membership_notification, params)
+
+      # Not sending
+      is_nil(send_at) ->
+        {:ok, nil}
+
+      # Sending to calculated time
+      true ->
+        Notification.enqueue(:pending_membership_notification, params, scheduled_at: send_at)
+    end
+  end
+
   defp shift_zone(datetime, timezone) do
     case DateTime.shift_zone(datetime, timezone) do
       {:ok, shift_datetime} -> shift_datetime
diff --git a/lib/service/workers/refresh_groups.ex b/lib/service/workers/refresh_groups.ex
new file mode 100644
index 000000000..5ed14d194
--- /dev/null
+++ b/lib/service/workers/refresh_groups.ex
@@ -0,0 +1,12 @@
+defmodule Mobilizon.Service.Workers.RefreshGroups do
+  @moduledoc """
+  Worker to build sitemap
+  """
+
+  alias Mobilizon.Federation.ActivityPub.Refresher
+
+  use Oban.Worker, queue: "background"
+
+  @impl Oban.Worker
+  def perform(%Job{}), do: Refresher.refresh_all_external_groups()
+end
diff --git a/priv/repo/migrations/20201103141811_add_notification_pending_membership_to_settings.exs b/priv/repo/migrations/20201103141811_add_notification_pending_membership_to_settings.exs
new file mode 100644
index 000000000..0a963ad66
--- /dev/null
+++ b/priv/repo/migrations/20201103141811_add_notification_pending_membership_to_settings.exs
@@ -0,0 +1,9 @@
+defmodule Mobilizon.Storage.Repo.Migrations.AddNotificationPendingMembershipToSettings do
+  use Ecto.Migration
+
+  def change do
+    alter table(:user_settings) do
+      add(:notification_pending_membership, :integer, default: 10)
+    end
+  end
+end
diff --git a/priv/repo/migrations/20201105145719_repair_groups_with_missing_ur_ls.exs b/priv/repo/migrations/20201105145719_repair_groups_with_missing_ur_ls.exs
new file mode 100644
index 000000000..bfb6e9f1c
--- /dev/null
+++ b/priv/repo/migrations/20201105145719_repair_groups_with_missing_ur_ls.exs
@@ -0,0 +1,28 @@
+defmodule Mobilizon.Storage.Repo.Migrations.RepairGroupsWithMissingURLs do
+  use Ecto.Migration
+  alias Mobilizon.Actors.Actor
+  alias Mobilizon.Storage.Repo
+  import Ecto.{Changeset, Query}
+
+  def up do
+    Actor
+    |> where([a], a.type == :Group and is_nil(a.domain))
+    |> Repo.all()
+    |> Enum.each(&fix_group/1)
+  end
+
+  def down do
+    IO.puts("Nothing to revert here, this is a repair step.")
+  end
+
+  defp fix_group(%Actor{type: :Group, domain: nil, url: url} = group) do
+    group
+    |> change(%{})
+    |> put_change(:resources_url, "#{url}/resources")
+    |> put_change(:todos_url, "#{url}/todos")
+    |> put_change(:posts_url, "#{url}/posts")
+    |> put_change(:events_url, "#{url}/events")
+    |> put_change(:discussions_url, "#{url}/discussions")
+    |> Repo.update()
+  end
+end
diff --git a/test/graphql/resolvers/member_test.exs b/test/graphql/resolvers/member_test.exs
index 32c570a40..3ea20452a 100644
--- a/test/graphql/resolvers/member_test.exs
+++ b/test/graphql/resolvers/member_test.exs
@@ -14,128 +14,78 @@ defmodule Mobilizon.GraphQL.Resolvers.MemberTest do
   end
 
   describe "Member Resolver to join a group" do
+    @join_group_mutation """
+    mutation JoinGroup($groupId: ID!) {
+      joinGroup(groupId: $groupId) {
+        id
+        role,
+        actor {
+          id
+        },
+        parent {
+          id
+        }
+      }
+    }
+    """
+
     test "join_group/3 should create a member", %{conn: conn, user: user, actor: actor} do
       group = insert(:group)
 
-      mutation = """
-          mutation {
-            joinGroup(
-              actor_id: #{actor.id},
-              group_id: #{group.id}
-            ) {
-                role,
-                actor {
-                  id
-                },
-                parent {
-                  id
-                }
-              }
-            }
-      """
+      res =
+        conn
+        |> auth_conn(user)
+        |> AbsintheHelpers.graphql_query(
+          query: @join_group_mutation,
+          variables: %{groupId: group.id}
+        )
+
+      assert res["errors"] == nil
+      assert res["data"]["joinGroup"]["role"] == "NOT_APPROVED"
+      assert res["data"]["joinGroup"]["parent"]["id"] == to_string(group.id)
+      assert res["data"]["joinGroup"]["actor"]["id"] == to_string(actor.id)
 
       res =
         conn
         |> auth_conn(user)
-        |> post("/api", AbsintheHelpers.mutation_skeleton(mutation))
+        |> AbsintheHelpers.graphql_query(
+          query: @join_group_mutation,
+          variables: %{groupId: group.id}
+        )
 
-      assert json_response(res, 200)["errors"] == nil
-      assert json_response(res, 200)["data"]["joinGroup"]["role"] == "NOT_APPROVED"
-      assert json_response(res, 200)["data"]["joinGroup"]["parent"]["id"] == to_string(group.id)
-      assert json_response(res, 200)["data"]["joinGroup"]["actor"]["id"] == to_string(actor.id)
-
-      mutation = """
-         mutation {
-            joinGroup(
-              actor_id: #{actor.id},
-              group_id: #{group.id}
-            ) {
-                role
-              }
-            }
-      """
-
-      res =
-        conn
-        |> auth_conn(user)
-        |> post("/api", AbsintheHelpers.mutation_skeleton(mutation))
-
-      assert hd(json_response(res, 200)["errors"])["message"] =~ "already a member"
-    end
-
-    test "join_group/3 should check the actor is owned by the user", %{
-      conn: conn,
-      user: user
-    } do
-      group = insert(:group)
-
-      mutation = """
-          mutation {
-            joinGroup(
-              actor_id: 1042,
-              group_id: #{group.id}
-            ) {
-                role
-              }
-            }
-      """
-
-      res =
-        conn
-        |> auth_conn(user)
-        |> post("/api", AbsintheHelpers.mutation_skeleton(mutation))
-
-      assert hd(json_response(res, 200)["errors"])["message"] =~ "not owned"
+      assert hd(res["errors"])["message"] =~ "already a member"
     end
 
     test "join_group/3 should check the group is not invite only", %{
       conn: conn,
-      actor: actor,
       user: user
     } do
       group = insert(:group, %{openness: :invite_only})
 
-      mutation = """
-          mutation {
-            joinGroup(
-              actor_id: #{actor.id},
-              group_id: #{group.id}
-            ) {
-                role
-              }
-            }
-      """
-
       res =
         conn
         |> auth_conn(user)
-        |> post("/api", AbsintheHelpers.mutation_skeleton(mutation))
+        |> AbsintheHelpers.graphql_query(
+          query: @join_group_mutation,
+          variables: %{groupId: group.id}
+        )
 
-      assert hd(json_response(res, 200)["errors"])["message"] =~ "cannot join this group"
+      assert hd(res["errors"])["message"] =~ "cannot join this group"
     end
 
     test "join_group/3 should check the group exists", %{
       conn: conn,
-      user: user,
-      actor: actor
+      user: user
     } do
-      mutation = """
-          mutation {
-            joinGroup(
-              actor_id: #{actor.id},
-              group_id: 1042
-            ) {
-                role
-              }
-            }
-      """
-
       res =
         conn
         |> auth_conn(user)
-        |> post("/api", AbsintheHelpers.mutation_skeleton(mutation))
+        |> AbsintheHelpers.graphql_query(
+          query: @join_group_mutation,
+          variables: %{groupId: 1042}
+        )
 
-      assert hd(json_response(res, 200)["errors"])["message"] =~ "Group not found"
+      assert hd(res["errors"])["message"] =~ "Group not found"
     end
   end
 
diff --git a/test/support/factory.ex b/test/support/factory.ex
index 882bae017..e71f79c34 100644
--- a/test/support/factory.ex
+++ b/test/support/factory.ex
@@ -30,6 +30,7 @@ defmodule Mobilizon.Factory do
       notification_each_week: false,
       notification_before_event: false,
       notification_pending_participation: :one_day,
+      notification_pending_membership: :one_day,
       user_id: nil
     }
   end