Merge branch 'allow-join-public-group' into 'master'

Allow join public group See merge request framasoft/mobilizon!690
2020-11-06 16:02:08 +01:00
parent babc928fa9 44559a71ee
commit 66834f6f6b
88 changed files with 1271 additions and 759 deletions
--- 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();
  }
 }
--- 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";
--- 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: {
--- 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({
--- 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";
--- 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 = {
--- 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>
--- 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 {
--- 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;
  }
--- a/js/src/components/Group/JoinGroupWithAccount.vue
+++ 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>
--- 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
--- 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>
--- 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;
--- 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,
--- a/js/src/components/Utils/RedirectWithAccount.vue
+++ 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>
--- 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
+        }
+      }
+    }
+  }
+`;
--- 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
--- 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}
+`;
--- 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
+      }
+    }
+  }
+`;
--- 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
    }
--- 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"
 }
--- 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"
 }
--- 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",
--- 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;
--- 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;
      },
--- 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 },
  },
 ];
--- 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);
  }

--- 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);
  }
 }
--- 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);
  }
 }
--- 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 {
--- a/js/src/types/event-options.model.ts
+++ 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;
+}
--- 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 }[];
-}
--- a/js/src/types/participant.model.ts
+++ 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;
+  }
+}
--- 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),
        },
      });

--- 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,
--- 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: {
--- 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>

--- 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
    );
--- 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";
--- 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);
  }
--- 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(
--- 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> {
--- 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,
+          },
+        },
+      ],
    });
  }

--- 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";
--- 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">
--- 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"),
    };
  }

--- 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);