split out group-meeting member list into a separate component, and fix some edit/create mode titles

src/views/OnboardMeetingMembersView.vue

@@ -17,13 +17,8 @@
       Back to Meetings
     </button>
 
-    <!-- Loading State -->
-    <div v-if="isLoading" class="flex justify-center items-center py-8">
-      <fa icon="spinner" class="fa-spin-pulse" />
-    </div>
-
     <!-- Error State -->
-    <div v-else-if="errorMessage">
+    <div v-if="errorMessage">
       <div class="text-center text-red-600 py-8">
         {{ errorMessage }}
       </div>
@@ -33,20 +28,12 @@
     </div>
 
     <!-- Members List -->
-    <div v-else class="space-y-4">
-      <div v-for="member in decryptedMembers" :key="member.memberId" 
-           class="p-4 bg-white rounded-lg shadow">
-        <h2 class="text-xl font-medium">{{ member.name }}</h2>
-        <p class="text-sm text-gray-600">DID: {{ member.did }}</p>
-      </div>
-
-      <p v-if="decryptedMembers.length === 0 && !decryptFailure" class="text-center text-gray-500 py-8">
-        No members found in this meeting
-      </p>
-      <p v-if="decryptFailure" class="text-center text-red-600 py-8">
-        That password failed. You may be in the wrong meeting. Go back and try again.
-      </p>
-    </div>
+    <MembersList
+      v-else
+      :password="password"
+      :decrypt-failure-message="'That password failed. You may be in the wrong meeting. Go back and try again.'"
+      @error="handleError"
+    />
   </section>
 </template>
 
@@ -54,37 +41,17 @@
 import { Component, Vue } from 'vue-facing-decorator';
 import QuickNav from '@/components/QuickNav.vue';
 import TopMessage from '@/components/TopMessage.vue';
-import { logConsoleAndDb, retrieveSettingsForActiveAccount } from '@/db/index';
-import { errorStringForLog, getHeaders, serverMessageForUser } from '@/libs/endorserServer';
-import { decryptMessage } from '@/libs/crypto';
-
-interface Member {
-  memberId: number;
-  content: string;
-}
-
-interface DecryptedMember {
-  memberId: number;
-  name: string;
-  did: string;
-}
+import MembersList from '@/components/MembersList.vue';
 
 @Component({
   components: {
     QuickNav,
     TopMessage,
+    MembersList,
   },
 })
 export default class OnboardMeetingMembersView extends Vue {
-  $notify!: (notification: { group: string; type: string; title: string; text: string }, timeout?: number) => void;
-
-  activeDid = '';
-  apiServer = '';
-  decryptedMembers: DecryptedMember[] = [];
-  decryptFailure = false;
   errorMessage = '';
-  isLoading = false;
-  members: Member[] = [];
 
   get groupId(): string {
     return this.$route.params.groupId as string;
@@ -103,55 +70,10 @@ export default class OnboardMeetingMembersView extends Vue {
       this.errorMessage = 'The password is missing. Go back and try again.';
       return;
     }
-
-    const settings = await retrieveSettingsForActiveAccount();
-    this.activeDid = settings.activeDid || '';
-    this.apiServer = settings.apiServer || '';
-    await this.fetchMembers();
   }
 
-  async fetchMembers() {
-    this.isLoading = true;
-    this.errorMessage = '';
-    
-    try {
-      const headers = await getHeaders(this.activeDid);
-      const response = await this.axios.get(
-        `${this.apiServer}/api/partner/groupOnboardMembers/`,
-        { headers }
-      );
-      
-      if (response.data && response.data.data) {
-        this.members = response.data.data;
-        await this.decryptMemberContents();
-      } else {
-        throw { response: response };
-      }
-    } catch (error) {
-      logConsoleAndDb('Error fetching members: ' + errorStringForLog(error), true);
-      this.errorMessage = serverMessageForUser(error) || 'Failed to fetch members.';
-    } finally {
-      this.isLoading = false;
-    }
-  }
-
-  async decryptMemberContents() {
-    this.decryptedMembers = [];
-    
-    for (const member of this.members) {
-      try {
-        const decryptedContent = await decryptMessage(member.content, this.password);
-        const content = JSON.parse(decryptedContent);
-        
-        this.decryptedMembers.push({
-          memberId: member.memberId,
-          name: content.name,
-          did: content.did,
-        });
-      } catch (error) {
-        this.decryptFailure = true;
-      }
-    }
+  handleError(message: string) {
+    this.errorMessage = message;
   }
 }
 </script>