4 changed files with 175 additions and 110 deletions
@ -0,0 +1,107 @@ |
|||||
|
<template> |
||||
|
<div class="space-y-4"> |
||||
|
<!-- Loading State --> |
||||
|
<div v-if="isLoading" class="flex justify-center items-center py-8"> |
||||
|
<fa icon="spinner" class="fa-spin-pulse" /> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Members List --> |
||||
|
<div v-else class="space-y-4"> |
||||
|
<div v-for="member in decryptedMembers" :key="member.memberId" |
||||
|
class="p-4 bg-gray-50 rounded-lg"> |
||||
|
<h3 class="text-lg font-medium">{{ member.name }}</h3> |
||||
|
<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"> |
||||
|
No members have joined this meeting yet |
||||
|
</p> |
||||
|
<p v-if="decryptedMembers.length < members.length" class="text-center text-red-600 py-4"> |
||||
|
{{ decryptFailureMessage || "Your password failed. Please go back and try again." }} |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue, Prop } from 'vue-facing-decorator'; |
||||
|
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 |
||||
|
export default class MembersList extends Vue { |
||||
|
@Prop({ required: true }) password!: string; |
||||
|
@Prop({ default: 'Your password failed. Please go back and try again.' }) decryptFailureMessage!: string; |
||||
|
|
||||
|
decryptedMembers: DecryptedMember[] = []; |
||||
|
missingPassword = false; |
||||
|
isLoading = false; |
||||
|
members: Member[] = []; |
||||
|
activeDid = ''; |
||||
|
apiServer = ''; |
||||
|
|
||||
|
async created() { |
||||
|
const settings = await retrieveSettingsForActiveAccount(); |
||||
|
this.activeDid = settings.activeDid || ''; |
||||
|
this.apiServer = settings.apiServer || ''; |
||||
|
await this.fetchMembers(); |
||||
|
} |
||||
|
|
||||
|
async fetchMembers() { |
||||
|
this.isLoading = true; |
||||
|
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(); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
logConsoleAndDb('Error fetching members: ' + errorStringForLog(error), true); |
||||
|
this.$emit('error', serverMessageForUser(error) || 'Failed to fetch members.'); |
||||
|
} finally { |
||||
|
this.isLoading = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async decryptMemberContents() { |
||||
|
this.decryptedMembers = []; |
||||
|
|
||||
|
if (!this.password) { |
||||
|
this.missingPassword = true; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
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) { |
||||
|
// do nothing, relying on the count of members to determine if there was an error |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue