organizer can toggle admission to the meeting

src/components/MembersList.vue

@@ -7,16 +7,29 @@
 
     <!-- Members List -->
     <div v-else class="space-y-4">
+      <div v-if="missingMyself" class="py-4">
+        You are not yet admitted. The organizer will admit you.
+      </div>
       <div
         v-for="member in decryptedMembers"
-        :key="member.memberId"
+        :key="member.member.memberId"
         class="p-4 bg-gray-50 rounded-lg"
       >
-        <h3 class="text-lg font-medium">{{ member.name }}</h3>
+        <div class="flex items-center">
+          <h3 class="text-lg font-medium">{{ member.name }}</h3>
+          <button
+            v-if="isOrganizer && member.did !== activeDid"
+            @click="toggleAdmission(member.member)"
+            class="ml-2 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+            :title="member.member.admitted ? 'Remove member' : 'Admit member'"
+          >
+            <fa :icon="member.member.admitted ? 'minus' : 'plus'" class="text-sm" />
+          </button>
+        </div>
         <p class="text-sm text-gray-600">{{ member.did }}</p>
       </div>
 
-      <p v-if="members.length === 0" class="text-center text-gray-500 py-4">
+      <p v-if="members.length === 0" class="text-gray-500 py-4">
         No members have joined this meeting yet
       </p>
       <p
@@ -44,12 +57,13 @@ import {
 import { decryptMessage } from "@/libs/crypto";
 
 interface Member {
-  memberId: number;
+  admitted: boolean;
   content: string;
+  memberId: number;
 }
 
 interface DecryptedMember {
-  memberId: number;
+  member: Member;
   name: string;
   did: string;
 }
@@ -62,11 +76,29 @@ export default class MembersList extends Vue {
 
   decryptedMembers: DecryptedMember[] = [];
   missingPassword = false;
+  missingMyself = false;
   isLoading = false;
+  isOrganizer = false;
   members: Member[] = [];
   activeDid = "";
   apiServer = "";
 
+  async toggleAdmission(member: Member) {
+    try {
+      const headers = await getHeaders(this.activeDid);
+      await this.axios.put(
+        `${this.apiServer}/api/partner/groupOnboardMember/${member.memberId}`,
+        { admitted: !member.admitted },
+        { headers }
+      );
+      // Update local state
+      member.admitted = !member.admitted;
+    } catch (error) {
+      logConsoleAndDb("Error toggling admission: " + errorStringForLog(error), true);
+      this.$emit("error", serverMessageForUser(error) || "Failed to update member admission status.");
+    }
+  }
+
   async created() {
     const settings = await retrieveSettingsForActiveAccount();
     this.activeDid = settings.activeDid || "";
@@ -79,7 +111,7 @@ export default class MembersList extends Vue {
     try {
       const headers = await getHeaders(this.activeDid);
       const response = await this.axios.get(
-        `${this.apiServer}/api/partner/groupOnboardMembers/`,
+        `${this.apiServer}/api/partner/groupOnboardMembers`,
         { headers },
       );
 
@@ -109,6 +141,7 @@ export default class MembersList extends Vue {
       return;
     }
 
+    let isFirstEntry = true, foundMyself = false;
     for (const member of this.members) {
       try {
         const decryptedContent = await decryptMessage(
@@ -118,13 +151,23 @@ export default class MembersList extends Vue {
         const content = JSON.parse(decryptedContent);
 
         this.decryptedMembers.push({
-          memberId: member.memberId,
+          member: member,
           name: content.name,
           did: content.did,
         });
+        if (isFirstEntry && content.did === this.activeDid) {
+          this.isOrganizer = true;
+        }
+        if (content.did === this.activeDid) {
+          foundMyself = true;
+        }
       } catch (error) {
         // do nothing, relying on the count of members to determine if there was an error
       }
+      isFirstEntry = false;
+    }
+    if (!foundMyself) {
+      this.missingMyself = true;
     }
   }
 }

src/views/OnboardMeetingListView.vue

@@ -19,8 +19,8 @@
         class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer"
         @click="promptPassword(attendingMeeting)"
       >
-        <h2 class="text-xl font-medium">{{ attendingMeeting.name }}</h2>
-        <div class="flex justify-end mt-2">
+        <div class="flex justify-between items-center">
+          <h2 class="text-xl font-medium">{{ attendingMeeting.name }}</h2>
           <button
             @click.stop="leaveMeeting"
             class="text-red-600 hover:text-red-700 p-2"
@@ -110,7 +110,14 @@ interface Meeting {
 })
 export default class OnboardMeetingListView extends Vue {
   $notify!: (
-    notification: { group: string; type: string; title: string; text: string },
+    notification: {
+      group: string;
+      type: string;
+      title: string;
+      text: string;
+      onYes?: () => void;
+      yesText?: string;
+    },
     timeout?: number,
   ) => void;
 
@@ -281,41 +288,52 @@ export default class OnboardMeetingListView extends Vue {
   }
 
   async leaveMeeting() {
-    try {
-      const headers = await getHeaders(this.activeDid);
-      await this.axios.delete(
-        this.apiServer + "/api/partner/groupOnboardMember",
-        { headers },
-      );
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Leave Meeting",
+        text: "Are you sure you want to leave this meeting?",
+        onYes: async () => {
+          try {
+            const headers = await getHeaders(this.activeDid);
+            await this.axios.delete(
+              this.apiServer + "/api/partner/groupOnboardMember",
+              { headers },
+            );
 
-      this.attendingMeeting = null;
-      await this.fetchMeetings();
+            this.attendingMeeting = null;
+            await this.fetchMeetings();
 
-      this.$notify(
-        {
-          group: "alert",
-          type: "success",
-          title: "Success",
-          text: "You left the meeting.",
-        },
-        5000,
-      );
-    } catch (error) {
-      logConsoleAndDb(
-        "Error leaving meeting: " + errorStringForLog(error),
-        true,
-      );
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text:
-            serverMessageForUser(error) || "You failed to leave the meeting.",
+            this.$notify(
+              {
+                group: "alert",
+                type: "success",
+                title: "Success",
+                text: "You left the meeting.",
+              },
+              5000,
+            );
+          } catch (error) {
+            logConsoleAndDb(
+              "Error leaving meeting: " + errorStringForLog(error),
+              true,
+            );
+            this.$notify(
+              {
+                group: "alert",
+                type: "danger",
+                title: "Error",
+                text:
+                  serverMessageForUser(error) || "You failed to leave the meeting.",
+              },
+              5000,
+            );
+          }
         },
-        5000,
-      );
-    }
+      },
+      -1,
+    );
   }
 }
 </script>

src/views/OnboardMeetingSetupView.vue

@@ -18,7 +18,7 @@
           <h2 class="text-2xl">Current Meeting</h2>
           <button
             @click="startEditing"
-            class="text-blue-600 hover:text-blue-800 transition-colors duration-200 ml-2"
+            class="mb-4 text-blue-600 hover:text-blue-800 transition-colors duration-200 ml-2"
             title="Edit Meeting"
           >
             <fa icon="pen" class="fa-fw" />
@@ -200,10 +200,10 @@
       </div>
       <router-link
         :to="onboardMeetingMembersLink()"
-        class="inline-block px-4 text-blue-600"
+        class="inline-block text-blue-600"
         target="_blank"
       >
-        Open page that meeting members see
+        Open shortcut page for members <fa icon="external-link" />
       </router-link>
 
       <MembersList