Add option to link an external registration provider for events

js/src/views/Event/Edit.vue

@@ -221,9 +221,33 @@
           </b-radio>
         </div>-->
 
+        <div class="field">
+          <label class="label">{{ $t("External registration") }}</label>
+          <b-switch v-model="externalParticipation">
+            {{
+              $t("I want to manage the registration with an external provider.")
+            }}
+          </b-switch>
+        </div>
+
+        <div class="field" v-if="externalParticipation">
+          <b-field :label="$t('URL')">
+            <b-input
+              icon="link"
+              type="url"
+              v-model="event.externalParticipationUrl"
+              placeholder="URL"
+            />
+          </b-field>
+        </div>
+
         <div
           class="field"
-          v-if="config && config.anonymous.participation.allowed"
+          v-if="
+            config &&
+            config.anonymous.participation.allowed &&
+            !externalParticipation
+          "
         >
           <label class="label">{{ $t("Anonymous participations") }}</label>
           <b-switch v-model="eventOptions.anonymousParticipation">
@@ -246,21 +270,21 @@
           </b-switch>
         </div>
 
-        <div class="field">
+        <div class="field" v-if="!externalParticipation">
           <label class="label">{{ $t("Participation approval") }}</label>
           <b-switch v-model="needsApproval">{{
             $t("I want to approve every participation request")
           }}</b-switch>
         </div>
 
-        <div class="field">
+        <div class="field" v-if="!externalParticipation">
           <label class="label">{{ $t("Number of places") }}</label>
           <b-switch v-model="limitedPlaces">{{
             $t("Limited number of places")
           }}</b-switch>
         </div>
 
-        <div class="box" v-if="limitedPlaces">
+        <div class="box" v-if="limitedPlaces && !externalParticipation">
           <b-field :label="$t('Number of places')" label-for="number-of-places">
             <b-numberinput
               controls-position="compact"
@@ -1170,6 +1194,18 @@ export default class EditEvent extends Vue {
     }
   }
 
+  get externalParticipation(): boolean {
+    return this.event?.joinOptions == EventJoinOptions.EXTERNAL;
+  }
+
+  set externalParticipation(value: boolean) {
+    if (value === true) {
+      this.event.joinOptions = EventJoinOptions.EXTERNAL;
+    } else {
+      this.event.joinOptions = EventJoinOptions.FREE;
+    }
+  }
+
   get checkTitleLength(): Array<string | undefined> {
     return this.event.title.length > 80
       ? ["is-info", this.$t("The event title will be ellipsed.") as string]

js/src/views/Event/Event.vue

@@ -94,7 +94,13 @@
               </span>
             </div>
             <div class="column is-3-tablet">
+              <external-participation-button
+                v-if="event.joinOptions === EventJoinOptions.EXTERNAL"
+                :event="event"
+                :current-actor="currentActor"
+              />
               <participation-section
+                v-else
                 :participation="participations[0]"
                 :event="event"
                 :anonymousParticipation="anonymousParticipation"
@@ -120,7 +126,7 @@
                     <tag>{{ organizer.domain }}</tag>
                   </a>
                 </template>
-                <p>
+                <p v-if="event.joinOptions !== EventJoinOptions.EXTERNAL">
                   <router-link
                     class="participations-link"
                     v-if="canManageEvent && event.draft === false"
@@ -508,6 +514,7 @@ import { CREATE_REPORT } from "../../graphql/report";
 import EventMixin from "../../mixins/event";
 import IdentityPicker from "../Account/IdentityPicker.vue";
 import ParticipationSection from "../../components/Participation/ParticipationSection.vue";
+import ExternalParticipationButton from "../../components/Event/ExternalParticipationButton.vue";
 import RouteName from "../../router/name";
 import CommentTree from "../../components/Comment/CommentTree.vue";
 import "intersection-observer";
@@ -542,6 +549,7 @@ import { IUser } from "@/types/current-user.model";
     ReportModal,
     IdentityPicker,
     ParticipationSection,
+    ExternalParticipationButton,
     CommentTree,
     Tag,
     PopoverActorCard,