show when an onboarding member is already in a meeting, and allow them to leave

src/main.ts

@@ -74,6 +74,7 @@ import {
   faPlus,
   faQuestion,
   faQrcode,
+  faRightFromBracket,
   faRotate,
   faShareNodes,
   faSpinner,
@@ -153,6 +154,7 @@ library.add(
   faQrcode,
   faQuestion,
   faRotate,
+  faRightFromBracket,
   faShareNodes,
   faSpinner,
   faSquare,

src/views/OnboardMeetingListView.vue

@@ -13,13 +13,32 @@
       <fa icon="spinner" class="fa-spin-pulse" />
     </div>
 
+    <div v-else-if="attendingMeeting">
+      <p>You are in this meeting.</p>
+      <div
+        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">
+          <button
+            @click.stop="leaveMeeting"
+            class="text-red-600 hover:text-red-700 p-2"
+            title="Leave Meeting"
+          >
+            <fa icon="right-from-bracket" />
+          </button>
+        </div>
+      </div>
+    </div>
+
     <!-- Meeting List -->
     <div v-else class="space-y-4">
       <div v-for="meeting in meetings" :key="meeting.groupId" 
-           class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer"
+        class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer"
-           @click="promptPassword(meeting)">
+        @click="promptPassword(meeting)"
+      >
         <h2 class="text-xl font-medium">{{ meeting.name }}</h2>
-        <p class="text-sm text-gray-600">Group ID: {{ meeting.groupId }}</p>
       </div>
 
       <p v-if="meetings.length === 0" class="text-center text-gray-500 py-8">
@@ -32,6 +51,7 @@
       <div class="bg-white rounded-lg p-6 max-w-sm w-full">
         <h3 class="text-lg font-medium mb-4">Enter Meeting Password</h3>
         <input
+          ref="passwordInput"
           v-model="password"
           type="text"
           class="w-full px-3 py-2 border rounded-md mb-4"
@@ -64,6 +84,7 @@ import TopMessage from '@/components/TopMessage.vue';
 import { logConsoleAndDb, retrieveSettingsForActiveAccount } from '@/db/index';
 import { errorStringForLog, getHeaders, serverMessageForUser } from '@/libs/endorserServer';
 import { encryptMessage } from '@/libs/crypto';
+import { nextTick } from 'vue';
 
 interface Meeting {
   name: string;
@@ -79,14 +100,15 @@ interface Meeting {
 export default class OnboardMeetingListView extends Vue {
   $notify!: (notification: { group: string; type: string; title: string; text: string }, timeout?: number) => void;
 
-  meetings: Meeting[] = [];
-  isLoading = false;
-  showPasswordDialog = false;
-  password = '';
-  selectedMeeting: Meeting | null = null;
   activeDid = '';
   apiServer = '';
+  attendingMeeting: Meeting | null = null;
   firstName = '';
+  isLoading = false;
+  meetings: Meeting[] = [];
+  password = '';
+  selectedMeeting: Meeting | null = null;
+  showPasswordDialog = false;
 
   async created() {
     const settings = await retrieveSettingsForActiveAccount();
@@ -99,14 +121,40 @@ export default class OnboardMeetingListView extends Vue {
   async fetchMeetings() {
     this.isLoading = true;
     try {
+      // get the meeting that the user is attending
       const headers = await getHeaders(this.activeDid);
       const response = await this.axios.get(
-        this.apiServer + '/api/partner/groupsOnboarding',
+        this.apiServer + '/api/partner/groupOnboardMember',
         { headers }
       );
 
-      if (response.data && response.data.data) {
+      if (response.data?.data) {
-        this.meetings = response.data.data;
+        // they're in a meeting already
+        const attendingMeetingId = response.data.data.groupId;
+        // retrieve the meeting details
+        const headers2 = await getHeaders(this.activeDid);
+        const response2 = await this.axios.get(
+          this.apiServer + '/api/partner/groupOnboard/' + attendingMeetingId,
+          { headers: headers2 }
+        );
+
+        if (response2.data?.data) {
+          this.attendingMeeting = response2.data.data;
+          return;
+        } else {
+          // this should never happen
+          logConsoleAndDb('Error fetching meeting for user after saying they are in one.', true);
+        }
+      }
+
+      const headers2 = await getHeaders(this.activeDid);
+      const response2 = await this.axios.get(
+        this.apiServer + '/api/partner/groupsOnboarding',
+        { headers: headers2 }
+      );
+      
+      if (response2.data?.data) {
+        this.meetings = response2.data.data;
       }
     } catch (error) {
       logConsoleAndDb('Error fetching meetings: ' + errorStringForLog(error), true);
@@ -128,6 +176,12 @@ export default class OnboardMeetingListView extends Vue {
     this.password = '';
     this.selectedMeeting = meeting;
     this.showPasswordDialog = true;
+    nextTick(() => {
+      const input = this.$refs.passwordInput as HTMLInputElement;
+      if (input) {
+        input.focus();
+      }
+    });
   }
 
   cancelPasswordDialog() {
@@ -195,5 +249,39 @@ 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.attendingMeeting = null;
+      await this.fetchMeetings();
+
+      this.$notify(
+        {
+          group: 'alert',
+          type: 'success',
+          title: 'Success',
+          text: 'Successfully left the meeting.',
+        },
+        5000
+      );
+    } catch (error) {
+      logConsoleAndDb('Error leaving meeting: ' + errorStringForLog(error), true);
+      this.$notify(
+        {
+          group: 'alert',
+          type: 'danger',
+          title: 'Error',
+          text: serverMessageForUser(error) || 'Failed to leave meeting.',
+        },
+        5000
+      );
+    }
+  }
 }
 </script>