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