add onboarding pages for the list and members, and refine the setup

src/views/OnboardMeetingMembersView.vue

@@ -0,0 +1,157 @@
+<template>
+  <QuickNav selected="Contacts" />
+  <TopMessage />
+
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+      Meeting Members
+    </h1>
+
+    <!-- Back Button -->
+    <button
+      @click="$router.back()"
+      class="mb-6 flex items-center text-blue-600 hover:text-blue-800"
+    >
+      <fa icon="arrow-left" class="mr-2" />
+      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 class="text-center text-red-600 py-8">
+        {{ errorMessage }}
+      </div>
+      <div class="text-center">
+        For authorization, wait for your meeting organizer to approve you.
+      </div>
+    </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>
+  </section>
+</template>
+
+<script lang="ts">
+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;
+}
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+  },
+})
+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;
+  }
+
+  get password(): string {
+    return this.$route.query.password as string;
+  }
+
+  async created() {
+    if (!this.groupId) {
+      this.errorMessage = 'The group info is missing. Go back and try again.';
+      return;
+    }
+    if (!this.password) {
+      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;
+      }
+    }
+  }
+}
+</script>