Matthew Raymer
2 days ago
20 changed files with 2399 additions and 112 deletions
@ -0,0 +1,152 @@ |
|||||
|
<template> |
||||
|
<NotificationGroup group="customModal"> |
||||
|
<div class="fixed z-[100] top-0 inset-x-0 w-full"> |
||||
|
<Notification |
||||
|
v-slot="{ notifications, close }" |
||||
|
enter="transform ease-out duration-300 transition" |
||||
|
enter-from="translate-y-2 opacity-0 sm:translate-y-4" |
||||
|
enter-to="translate-y-0 opacity-100 sm:translate-y-0" |
||||
|
leave="transition ease-in duration-500" |
||||
|
leave-from="opacity-100" |
||||
|
leave-to="opacity-0" |
||||
|
move="transition duration-500" |
||||
|
move-delay="delay-300" |
||||
|
> |
||||
|
<div |
||||
|
v-for="notification in notifications" |
||||
|
:key="notification.id" |
||||
|
class="w-full" |
||||
|
role="alert" |
||||
|
> |
||||
|
<div |
||||
|
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50" |
||||
|
> |
||||
|
<div |
||||
|
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg" |
||||
|
> |
||||
|
<div class="w-full px-6 py-6 text-slate-900 text-center"> |
||||
|
<span class="font-semibold text-lg">{{ title }}</span> |
||||
|
<p class="text-sm mb-2">{{ text }}</p> |
||||
|
|
||||
|
<button |
||||
|
@click="handleOption1(close)" |
||||
|
class="block w-full text-center text-md font-bold capitalize bg-blue-800 text-white px-2 py-2 rounded-md mb-2" |
||||
|
> |
||||
|
{{ option1Text }} |
||||
|
</button> |
||||
|
|
||||
|
<button |
||||
|
@click="handleOption2(close)" |
||||
|
class="block w-full text-center text-md font-bold capitalize bg-blue-700 text-white px-2 py-2 rounded-md mb-2" |
||||
|
> |
||||
|
{{ option2Text }} |
||||
|
</button> |
||||
|
|
||||
|
<button |
||||
|
@click="handleOption3(close)" |
||||
|
class="block w-full text-center text-md font-bold capitalize bg-blue-600 text-white px-2 py-2 rounded-md mb-2" |
||||
|
> |
||||
|
{{ option3Text }} |
||||
|
</button> |
||||
|
|
||||
|
<button |
||||
|
@click="handleCancel(close)" |
||||
|
class="block w-full text-center text-md font-bold capitalize bg-slate-600 text-white px-2 py-2 rounded-md" |
||||
|
> |
||||
|
Cancel |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</Notification> |
||||
|
</div> |
||||
|
</NotificationGroup> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
import { NotificationIface } from "@/constants/app"; |
||||
|
|
||||
|
@Component |
||||
|
export default class PromptDialog extends Vue { |
||||
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
||||
|
|
||||
|
title = ""; |
||||
|
text = ""; |
||||
|
option1Text = ""; |
||||
|
option2Text = ""; |
||||
|
option3Text = ""; |
||||
|
onOption1?: () => void; |
||||
|
onOption2?: () => void; |
||||
|
onOption3?: () => void; |
||||
|
onCancel?: () => Promise<void>; |
||||
|
|
||||
|
open(options: { |
||||
|
title: string; |
||||
|
text: string; |
||||
|
option1Text?: string; |
||||
|
option2Text?: string; |
||||
|
option3Text?: string; |
||||
|
onOption1?: () => void; |
||||
|
onOption2?: () => void; |
||||
|
onOption3?: () => void; |
||||
|
onCancel?: () => Promise<void>; |
||||
|
}) { |
||||
|
this.title = options.title; |
||||
|
this.text = options.text; |
||||
|
this.option1Text = options.option1Text || ""; |
||||
|
this.option2Text = options.option2Text || ""; |
||||
|
this.option3Text = options.option3Text || ""; |
||||
|
this.onOption1 = options.onOption1; |
||||
|
this.onOption2 = options.onOption2; |
||||
|
this.onOption3 = options.onOption3; |
||||
|
this.onCancel = options.onCancel; |
||||
|
|
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "customModal", |
||||
|
type: "confirm", |
||||
|
title: this.title, |
||||
|
text: this.text, |
||||
|
option1Text: this.option1Text, |
||||
|
option2Text: this.option2Text, |
||||
|
option3Text: this.option3Text, |
||||
|
onOption1: this.onOption1, |
||||
|
onOption2: this.onOption2, |
||||
|
onOption3: this.onOption3, |
||||
|
onCancel: this.onCancel, |
||||
|
} as NotificationIface, |
||||
|
-1, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
handleOption1(close: (id: string) => void) { |
||||
|
if (this.onOption1) { |
||||
|
this.onOption1(); |
||||
|
} |
||||
|
close("string that does not matter"); |
||||
|
} |
||||
|
|
||||
|
handleOption2(close: (id: string) => void) { |
||||
|
if (this.onOption2) { |
||||
|
this.onOption2(); |
||||
|
} |
||||
|
close("string that does not matter"); |
||||
|
} |
||||
|
|
||||
|
handleOption3(close: (id: string) => void) { |
||||
|
if (this.onOption3) { |
||||
|
this.onOption3(); |
||||
|
} |
||||
|
close("string that does not matter"); |
||||
|
} |
||||
|
|
||||
|
handleCancel(close: (id: string) => void) { |
||||
|
if (this.onCancel) { |
||||
|
this.onCancel(); |
||||
|
} |
||||
|
close("string that does not matter"); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,481 @@ |
|||||
|
<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 --> |
||||
|
|
||||
|
<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 v-else class="space-y-4"> |
||||
|
<div v-if="missingMyself" class="py-4 text-red-600"> |
||||
|
You are not admitted. The organizer will admit you. |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<span |
||||
|
v-if="showOrganizerTools && isOrganizer" |
||||
|
class="inline-flex items-center flex-wrap" |
||||
|
> |
||||
|
<span class="inline-flex items-center"> |
||||
|
Use |
||||
|
<span |
||||
|
class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600" |
||||
|
> |
||||
|
<fa icon="plus" class="text-sm" /> |
||||
|
</span> |
||||
|
and |
||||
|
<span |
||||
|
class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600" |
||||
|
> |
||||
|
<fa icon="minus" class="text-sm" /> |
||||
|
</span> |
||||
|
to add/remove them to/from the meeting. |
||||
|
</span> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<span class="inline-flex items-center"> |
||||
|
Use |
||||
|
<span |
||||
|
class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600" |
||||
|
> |
||||
|
<fa icon="circle-user" class="text-xl" /> |
||||
|
</span> |
||||
|
to add them to your contacts. |
||||
|
</span> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="members.length > 0" class="flex justify-center"> |
||||
|
<button |
||||
|
@click="fetchMembers" |
||||
|
class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors" |
||||
|
title="Refresh members list" |
||||
|
> |
||||
|
<fa icon="rotate" :class="{ 'fa-spin': isLoading }" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div |
||||
|
v-for="member in membersToShow()" |
||||
|
:key="member.member.memberId" |
||||
|
class="p-4 bg-gray-50 rounded-lg" |
||||
|
> |
||||
|
<div class="flex items-center justify-between"> |
||||
|
<div class="flex items-center"> |
||||
|
<h3 class="text-lg font-medium">{{ member.name }}</h3> |
||||
|
<div |
||||
|
v-if="!getContactFor(member.did) && member.did !== activeDid" |
||||
|
class="flex justify-end" |
||||
|
> |
||||
|
<button |
||||
|
@click="addAsContact(member)" |
||||
|
class="ml-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 transition-colors" |
||||
|
title="Add as contact" |
||||
|
> |
||||
|
<fa icon="circle-user" class="text-xl" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
<button |
||||
|
v-if="member.did !== activeDid" |
||||
|
@click=" |
||||
|
informAboutAddingContact( |
||||
|
getContactFor(member.did) !== undefined, |
||||
|
) |
||||
|
" |
||||
|
class="ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors" |
||||
|
title="Contact info" |
||||
|
> |
||||
|
<fa icon="circle-info" class="text-base" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div class="flex"> |
||||
|
<span |
||||
|
v-if=" |
||||
|
showOrganizerTools && isOrganizer && member.did !== activeDid |
||||
|
" |
||||
|
class="flex items-center" |
||||
|
> |
||||
|
<button |
||||
|
@click="checkWhetherContactBeforeAdmitting(member)" |
||||
|
class="mr-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> |
||||
|
<button |
||||
|
@click="informAboutAdmission()" |
||||
|
class="mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors" |
||||
|
title="Admission info" |
||||
|
> |
||||
|
<fa icon="circle-info" class="text-base" /> |
||||
|
</button> |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<p class="text-sm text-gray-600 truncate"> |
||||
|
{{ member.did }} |
||||
|
</p> |
||||
|
</div> |
||||
|
<div v-if="members.length > 0" class="flex justify-center mt-4"> |
||||
|
<button |
||||
|
@click="fetchMembers" |
||||
|
class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors" |
||||
|
title="Refresh members list" |
||||
|
> |
||||
|
<fa icon="rotate" :class="{ 'fa-spin': isLoading }" /> |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<p v-if="members.length === 0" class="text-gray-500 py-4"> |
||||
|
No members have joined this meeting yet |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue, Prop } from "vue-facing-decorator"; |
||||
|
|
||||
|
import { |
||||
|
logConsoleAndDb, |
||||
|
retrieveSettingsForActiveAccount, |
||||
|
db, |
||||
|
} from "@/db/index"; |
||||
|
import { |
||||
|
errorStringForLog, |
||||
|
getHeaders, |
||||
|
register, |
||||
|
serverMessageForUser, |
||||
|
} from "@/libs/endorserServer"; |
||||
|
import { decryptMessage } from "@/libs/crypto"; |
||||
|
import { Contact } from "@/db/tables/contacts"; |
||||
|
import * as libsUtil from "@/libs/util"; |
||||
|
import { NotificationIface } from "@/constants/app"; |
||||
|
|
||||
|
interface Member { |
||||
|
admitted: boolean; |
||||
|
content: string; |
||||
|
memberId: number; |
||||
|
registered: boolean; |
||||
|
} |
||||
|
|
||||
|
interface DecryptedMember { |
||||
|
member: Member; |
||||
|
name: string; |
||||
|
did: string; |
||||
|
} |
||||
|
|
||||
|
@Component |
||||
|
export default class MembersList extends Vue { |
||||
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
||||
|
|
||||
|
libsUtil = libsUtil; |
||||
|
|
||||
|
@Prop({ required: true }) password!: string; |
||||
|
@Prop({ default: "Your password failed. Please go back and try again." }) |
||||
|
decryptFailureMessage!: string; |
||||
|
@Prop({ default: false }) showOrganizerTools!: boolean; |
||||
|
|
||||
|
decryptedMembers: DecryptedMember[] = []; |
||||
|
missingPassword = false; |
||||
|
missingMyself = false; |
||||
|
isLoading = false; |
||||
|
isOrganizer = false; |
||||
|
members: Member[] = []; |
||||
|
activeDid = ""; |
||||
|
apiServer = ""; |
||||
|
contacts: Array<Contact> = []; |
||||
|
|
||||
|
async created() { |
||||
|
const settings = await retrieveSettingsForActiveAccount(); |
||||
|
this.activeDid = settings.activeDid || ""; |
||||
|
this.apiServer = settings.apiServer || ""; |
||||
|
await this.fetchMembers(); |
||||
|
await this.loadContacts(); |
||||
|
} |
||||
|
|
||||
|
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; |
||||
|
} |
||||
|
|
||||
|
let isFirstEntry = true, |
||||
|
foundMyself = false; |
||||
|
for (const member of this.members) { |
||||
|
try { |
||||
|
const decryptedContent = await decryptMessage( |
||||
|
member.content, |
||||
|
this.password, |
||||
|
); |
||||
|
const content = JSON.parse(decryptedContent); |
||||
|
|
||||
|
this.decryptedMembers.push({ |
||||
|
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; |
||||
|
} |
||||
|
this.missingMyself = !foundMyself; |
||||
|
} |
||||
|
|
||||
|
membersToShow(): DecryptedMember[] { |
||||
|
if (this.isOrganizer) { |
||||
|
if (this.showOrganizerTools) { |
||||
|
return this.decryptedMembers; |
||||
|
} else { |
||||
|
return this.decryptedMembers.filter( |
||||
|
(member: DecryptedMember) => member.member.admitted, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
// non-organizers only get visible members from server |
||||
|
return this.decryptedMembers; |
||||
|
} |
||||
|
|
||||
|
informAboutAdmission() { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "info", |
||||
|
title: "Admission info", |
||||
|
text: "This is to register people and admit them to the meeting. A '+' symbol means they are not yet admitted and you can register and admit them. A '-' means you can remove them, but they will stay registered.", |
||||
|
}, |
||||
|
10000, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
informAboutAddingContact(contactImportedAlready: boolean) { |
||||
|
if (contactImportedAlready) { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "info", |
||||
|
title: "Contact Exists", |
||||
|
text: "They are in your contacts. If you want to remove them, you must do that from the contacts screen.", |
||||
|
}, |
||||
|
10000, |
||||
|
); |
||||
|
} else { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "info", |
||||
|
title: "Contact Available", |
||||
|
text: "This is to add them to your contacts. If you want to remove them later, you must do that from the contacts screen.", |
||||
|
}, |
||||
|
10000, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async loadContacts() { |
||||
|
this.contacts = await db.contacts.toArray(); |
||||
|
} |
||||
|
|
||||
|
getContactFor(did: string): Contact | undefined { |
||||
|
return this.contacts.find((contact) => contact.did === did); |
||||
|
} |
||||
|
|
||||
|
checkWhetherContactBeforeAdmitting(member: DecryptedMember) { |
||||
|
const contact = this.getContactFor(member.did); |
||||
|
if (!member.member.admitted && !contact) { |
||||
|
// If not a contact, show confirmation dialog |
||||
|
this.$notify({ |
||||
|
group: "modal", |
||||
|
type: "confirm", |
||||
|
title: "Add as Contact First?", |
||||
|
text: "This person is not in your contacts. Would you like to add them as a contact first?", |
||||
|
yesText: "Add as Contact", |
||||
|
noText: "Skip Adding Contact", |
||||
|
onYes: async () => { |
||||
|
await this.addAsContact(member); |
||||
|
// After adding as contact, proceed with admission |
||||
|
await this.toggleAdmission(member); |
||||
|
}, |
||||
|
onNo: async () => { |
||||
|
// If they choose not to add as contact, show second confirmation |
||||
|
this.$notify({ |
||||
|
group: "modal", |
||||
|
type: "confirm", |
||||
|
title: "Continue Without Adding?", |
||||
|
text: "Are you sure you want to proceed with admission even though they are not a contact?", |
||||
|
yesText: "Continue", |
||||
|
onYes: async () => { |
||||
|
await this.toggleAdmission(member); |
||||
|
}, |
||||
|
onCancel: async () => { |
||||
|
// Do nothing, effectively canceling the operation |
||||
|
}, |
||||
|
}, |
||||
|
-1, |
||||
|
); |
||||
|
}, |
||||
|
}, |
||||
|
-1, |
||||
|
); |
||||
|
} else { |
||||
|
// If already a contact, proceed directly with admission |
||||
|
this.toggleAdmission(member); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async toggleAdmission(member: DecryptedMember) { |
||||
|
try { |
||||
|
const headers = await getHeaders(this.activeDid); |
||||
|
await this.axios.put( |
||||
|
`${this.apiServer}/api/partner/groupOnboardMember/${member.member.memberId}`, |
||||
|
{ admitted: !member.member.admitted }, |
||||
|
{ headers }, |
||||
|
); |
||||
|
// Update local state |
||||
|
member.member.admitted = !member.member.admitted; |
||||
|
|
||||
|
const oldContact = this.getContactFor(member.did); |
||||
|
// if admitted, now register that user if they are not registered |
||||
|
if (member.member.admitted && !oldContact?.registered) { |
||||
|
const contactOldOrNew: Contact = oldContact || { |
||||
|
did: member.did, |
||||
|
name: member.name, |
||||
|
} |
||||
|
const result = await register( |
||||
|
this.activeDid, |
||||
|
this.apiServer, |
||||
|
this.axios, |
||||
|
contactOldOrNew, |
||||
|
); |
||||
|
if (result.success) { |
||||
|
member.member.registered = true; |
||||
|
if (oldContact) { |
||||
|
await db.contacts.update(member.did, { registered: true }); |
||||
|
oldContact.registered = true; |
||||
|
} |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "success", |
||||
|
title: "Registered", |
||||
|
text: "Besides being admitted, they were also registered.", |
||||
|
}, |
||||
|
3000, |
||||
|
); |
||||
|
} else { |
||||
|
const additionalInfo = result.error || ""; |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Registration failed", |
||||
|
text: |
||||
|
"They were admitted, but registration failed. You can try again, or register from your contacts screen. " + |
||||
|
additionalInfo, |
||||
|
}, |
||||
|
10000, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
} catch (error) { |
||||
|
logConsoleAndDb( |
||||
|
"Error toggling admission: " + errorStringForLog(error), |
||||
|
true, |
||||
|
); |
||||
|
this.$emit( |
||||
|
"error", |
||||
|
serverMessageForUser(error) || |
||||
|
"Failed to update member admission status.", |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async addAsContact(member: DecryptedMember) { |
||||
|
try { |
||||
|
const newContact = { |
||||
|
did: member.did, |
||||
|
name: member.name, |
||||
|
}; |
||||
|
|
||||
|
await db.contacts.add(newContact); |
||||
|
this.contacts.push(newContact); |
||||
|
|
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "success", |
||||
|
title: "Contact Added", |
||||
|
text: "They were added to your contacts.", |
||||
|
}, |
||||
|
3000, |
||||
|
); |
||||
|
} catch (err) { |
||||
|
logConsoleAndDb("Error adding contact: " + errorStringForLog(err), true); |
||||
|
let message = "An error prevented adding this contact."; |
||||
|
if (err instanceof Error && err.message?.indexOf("already exists") > -1) { |
||||
|
message = "This person is already in your contact list."; |
||||
|
} |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Contact Not Added", |
||||
|
text: message, |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,190 @@ |
|||||
|
<template> |
||||
|
<section id="Content"> |
||||
|
<div v-if="claimData"> |
||||
|
<canvas ref="claimCanvas"></canvas> |
||||
|
</div> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped> |
||||
|
canvas { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
import { nextTick } from "vue"; |
||||
|
import QRCode from "qrcode"; |
||||
|
|
||||
|
import { APP_SERVER, NotificationIface } from "@/constants/app"; |
||||
|
import { db, retrieveSettingsForActiveAccount } from "@/db/index"; |
||||
|
import * as endorserServer from "@/libs/endorserServer"; |
||||
|
|
||||
|
@Component |
||||
|
export default class ClaimReportCertificateView extends Vue { |
||||
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
||||
|
|
||||
|
activeDid = ""; |
||||
|
allMyDids: Array<string> = []; |
||||
|
apiServer = ""; |
||||
|
claimId = ""; |
||||
|
claimData = null; |
||||
|
|
||||
|
endorserServer = endorserServer; |
||||
|
|
||||
|
async created() { |
||||
|
const settings = await retrieveSettingsForActiveAccount(); |
||||
|
this.activeDid = settings.activeDid || ""; |
||||
|
this.apiServer = settings.apiServer || ""; |
||||
|
const pathParams = window.location.pathname.substring( |
||||
|
"/claim-cert/".length, |
||||
|
); |
||||
|
this.claimId = pathParams; |
||||
|
await this.fetchClaim(); |
||||
|
} |
||||
|
|
||||
|
async fetchClaim() { |
||||
|
try { |
||||
|
const response = await fetch( |
||||
|
`${this.apiServer}/api/claim/${this.claimId}`, |
||||
|
); |
||||
|
if (response.ok) { |
||||
|
this.claimData = await response.json(); |
||||
|
await nextTick(); // Wait for the DOM to update |
||||
|
if (this.claimData) { |
||||
|
this.drawCanvas(this.claimData); |
||||
|
} |
||||
|
} else { |
||||
|
throw new Error(`Error fetching claim: ${response.statusText}`); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error("Failed to load claim:", error); |
||||
|
this.$notify({ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: "There was a problem loading the claim.", |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async drawCanvas( |
||||
|
claimData: endorserServer.GenericCredWrapper<endorserServer.GenericVerifiableCredential>, |
||||
|
) { |
||||
|
await db.open(); |
||||
|
const allContacts = await db.contacts.toArray(); |
||||
|
|
||||
|
const canvas = this.$refs.claimCanvas as HTMLCanvasElement; |
||||
|
if (canvas) { |
||||
|
const CANVAS_WIDTH = 1100; |
||||
|
const CANVAS_HEIGHT = 850; |
||||
|
|
||||
|
// size to approximate portrait of 8.5"x11" |
||||
|
canvas.width = CANVAS_WIDTH; |
||||
|
canvas.height = CANVAS_HEIGHT; |
||||
|
const ctx = canvas.getContext("2d"); |
||||
|
if (ctx) { |
||||
|
// Load the background image |
||||
|
const backgroundImage = new Image(); |
||||
|
backgroundImage.src = "/img/background/cert-frame-2.jpg"; |
||||
|
backgroundImage.onload = async () => { |
||||
|
// Draw the background image |
||||
|
ctx.drawImage(backgroundImage, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); |
||||
|
|
||||
|
// Set font and styles |
||||
|
ctx.fillStyle = "black"; |
||||
|
|
||||
|
// Draw claim type |
||||
|
ctx.font = "bold 20px Arial"; |
||||
|
const claimTypeText = |
||||
|
this.endorserServer.capitalizeAndInsertSpacesBeforeCaps( |
||||
|
claimData.claimType || "", |
||||
|
); |
||||
|
const claimTypeWidth = ctx.measureText(claimTypeText).width; |
||||
|
ctx.fillText( |
||||
|
claimTypeText, |
||||
|
(CANVAS_WIDTH - claimTypeWidth) / 2, // Center horizontally |
||||
|
CANVAS_HEIGHT * 0.33, |
||||
|
); |
||||
|
|
||||
|
if (claimData.claim.agent) { |
||||
|
const presentedText = "Presented to "; |
||||
|
ctx.font = "14px Arial"; |
||||
|
const presentedWidth = ctx.measureText(presentedText).width; |
||||
|
ctx.fillText( |
||||
|
presentedText, |
||||
|
(CANVAS_WIDTH - presentedWidth) / 2, // Center horizontally |
||||
|
CANVAS_HEIGHT * 0.37, |
||||
|
); |
||||
|
const agentText = endorserServer.didInfoForCertificate( |
||||
|
claimData.claim.agent, |
||||
|
allContacts, |
||||
|
); |
||||
|
ctx.font = "bold 20px Arial"; |
||||
|
const agentWidth = ctx.measureText(agentText).width; |
||||
|
ctx.fillText( |
||||
|
agentText, |
||||
|
(CANVAS_WIDTH - agentWidth) / 2, // Center horizontally |
||||
|
CANVAS_HEIGHT * 0.4, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
const descriptionText = |
||||
|
claimData.claim.name || claimData.claim.description; |
||||
|
if (descriptionText) { |
||||
|
const descriptionLine = |
||||
|
descriptionText.length > 50 |
||||
|
? descriptionText.substring(0, 75) + "..." |
||||
|
: descriptionText; |
||||
|
ctx.font = "14px Arial"; |
||||
|
const descriptionWidth = ctx.measureText(descriptionLine).width; |
||||
|
ctx.fillText( |
||||
|
descriptionLine, |
||||
|
(CANVAS_WIDTH - descriptionWidth) / 2, |
||||
|
CANVAS_HEIGHT * 0.45, |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// Draw claim issuer & recipient |
||||
|
if (claimData.issuer) { |
||||
|
ctx.font = "14px Arial"; |
||||
|
const issuerText = |
||||
|
"Issued by " + |
||||
|
endorserServer.didInfoForCertificate( |
||||
|
claimData.issuer, |
||||
|
allContacts, |
||||
|
); |
||||
|
ctx.fillText(issuerText, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.6); |
||||
|
} |
||||
|
|
||||
|
// Draw claim ID |
||||
|
ctx.font = "14px Arial"; |
||||
|
ctx.fillText(this.claimId, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.7); |
||||
|
ctx.fillText( |
||||
|
"via EndorserSearch.com", |
||||
|
CANVAS_WIDTH * 0.3, |
||||
|
CANVAS_HEIGHT * 0.73, |
||||
|
); |
||||
|
|
||||
|
// Generate and draw QR code |
||||
|
const qrCodeCanvas = document.createElement("canvas"); |
||||
|
await QRCode.toCanvas( |
||||
|
qrCodeCanvas, |
||||
|
APP_SERVER + "/claim/" + this.claimId, |
||||
|
{ |
||||
|
width: 150, |
||||
|
color: { light: "#0000" /* Transparent background */ }, |
||||
|
}, |
||||
|
); |
||||
|
ctx.drawImage(qrCodeCanvas, CANVAS_WIDTH * 0.6, CANVAS_HEIGHT * 0.55); |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,340 @@ |
|||||
|
<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"> |
||||
|
Onboarding Meetings |
||||
|
</h1> |
||||
|
|
||||
|
<!-- Loading State --> |
||||
|
<div v-if="isLoading" class="flex justify-center items-center py-8"> |
||||
|
<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)" |
||||
|
> |
||||
|
<div class="flex justify-between items-center"> |
||||
|
<h2 class="text-xl font-medium">{{ attendingMeeting.name }}</h2> |
||||
|
<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" |
||||
|
@click="promptPassword(meeting)" |
||||
|
> |
||||
|
<h2 class="text-xl font-medium">{{ meeting.name }}</h2> |
||||
|
</div> |
||||
|
|
||||
|
<p v-if="meetings.length === 0" class="text-center text-gray-500 py-8"> |
||||
|
No onboarding meetings available |
||||
|
</p> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Password Dialog --> |
||||
|
<div |
||||
|
v-if="showPasswordDialog" |
||||
|
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" |
||||
|
> |
||||
|
<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" |
||||
|
placeholder="Enter password" |
||||
|
@keyup.enter="submitPassword" |
||||
|
/> |
||||
|
<div class="flex justify-end space-x-4"> |
||||
|
<button |
||||
|
@click="cancelPasswordDialog" |
||||
|
class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300" |
||||
|
> |
||||
|
Cancel |
||||
|
</button> |
||||
|
<button |
||||
|
@click="submitPassword" |
||||
|
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700" |
||||
|
> |
||||
|
Submit |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
import { nextTick } from "vue"; |
||||
|
import { Router } from "vue-router"; |
||||
|
|
||||
|
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 { encryptMessage } from "@/libs/crypto"; |
||||
|
|
||||
|
interface Meeting { |
||||
|
name: string; |
||||
|
groupId: number; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
components: { |
||||
|
QuickNav, |
||||
|
TopMessage, |
||||
|
}, |
||||
|
}) |
||||
|
export default class OnboardMeetingListView extends Vue { |
||||
|
$notify!: ( |
||||
|
notification: { |
||||
|
group: string; |
||||
|
type: string; |
||||
|
title: string; |
||||
|
text: string; |
||||
|
onYes?: () => void; |
||||
|
yesText?: string; |
||||
|
}, |
||||
|
timeout?: number, |
||||
|
) => void; |
||||
|
|
||||
|
activeDid = ""; |
||||
|
apiServer = ""; |
||||
|
attendingMeeting: Meeting | null = null; |
||||
|
firstName = ""; |
||||
|
isLoading = false; |
||||
|
meetings: Meeting[] = []; |
||||
|
password = ""; |
||||
|
selectedMeeting: Meeting | null = null; |
||||
|
showPasswordDialog = false; |
||||
|
|
||||
|
async created() { |
||||
|
const settings = await retrieveSettingsForActiveAccount(); |
||||
|
this.activeDid = settings.activeDid || ""; |
||||
|
this.apiServer = settings.apiServer || ""; |
||||
|
this.firstName = settings.firstName || ""; |
||||
|
await this.fetchMeetings(); |
||||
|
} |
||||
|
|
||||
|
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/groupOnboardMember", |
||||
|
{ headers }, |
||||
|
); |
||||
|
|
||||
|
if (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, |
||||
|
); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: serverMessageForUser(error) || "Failed to fetch meetings.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
} finally { |
||||
|
this.isLoading = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
promptPassword(meeting: Meeting) { |
||||
|
this.password = ""; |
||||
|
this.selectedMeeting = meeting; |
||||
|
this.showPasswordDialog = true; |
||||
|
nextTick(() => { |
||||
|
const input = this.$refs.passwordInput as HTMLInputElement; |
||||
|
if (input) { |
||||
|
input.focus(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
cancelPasswordDialog() { |
||||
|
this.password = ""; |
||||
|
this.selectedMeeting = null; |
||||
|
this.showPasswordDialog = false; |
||||
|
} |
||||
|
|
||||
|
async submitPassword() { |
||||
|
if (!this.selectedMeeting) { |
||||
|
// this should never happen |
||||
|
logConsoleAndDb( |
||||
|
"No meeting selected when prompting for password, which should never happen.", |
||||
|
true, |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
// Create member data object |
||||
|
const memberData = { |
||||
|
name: this.firstName, |
||||
|
did: this.activeDid, |
||||
|
}; |
||||
|
const memberDataString = JSON.stringify(memberData); |
||||
|
const encryptedMemberData = await encryptMessage( |
||||
|
memberDataString, |
||||
|
this.password, |
||||
|
); |
||||
|
|
||||
|
// Get headers for authentication |
||||
|
const headers = await getHeaders(this.activeDid); |
||||
|
|
||||
|
// Encrypt the member data |
||||
|
const postResult = await this.axios.post( |
||||
|
this.apiServer + "/api/partner/groupOnboardMember", |
||||
|
{ |
||||
|
groupId: this.selectedMeeting.groupId, |
||||
|
content: encryptedMemberData, |
||||
|
}, |
||||
|
{ headers }, |
||||
|
); |
||||
|
|
||||
|
if (postResult.data && postResult.data.success) { |
||||
|
// Navigate to members view with password and groupId |
||||
|
(this.$router as Router).push({ |
||||
|
name: "onboard-meeting-members", |
||||
|
params: { |
||||
|
groupId: this.selectedMeeting.groupId.toString(), |
||||
|
}, |
||||
|
query: { |
||||
|
password: this.password, |
||||
|
memberId: postResult.data.memberId, |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
this.cancelPasswordDialog(); |
||||
|
} else { |
||||
|
throw { response: postResult }; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
logConsoleAndDb( |
||||
|
"Error joining meeting: " + errorStringForLog(error), |
||||
|
true, |
||||
|
); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: |
||||
|
serverMessageForUser(error) || "You failed to join the meeting.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async leaveMeeting() { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "modal", |
||||
|
type: "confirm", |
||||
|
title: "Leave Meeting", |
||||
|
text: "Are you sure you want to leave this meeting?", |
||||
|
onYes: async () => { |
||||
|
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: "You left the meeting.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
} catch (error) { |
||||
|
logConsoleAndDb( |
||||
|
"Error leaving meeting: " + errorStringForLog(error), |
||||
|
true, |
||||
|
); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: |
||||
|
serverMessageForUser(error) || |
||||
|
"You failed to leave the meeting.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
-1, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,72 @@ |
|||||
|
<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> |
||||
|
|
||||
|
<!-- Error State --> |
||||
|
<div v-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 --> |
||||
|
<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> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import { Component, Vue } from "vue-facing-decorator"; |
||||
|
import { RouteLocation } from "vue-router"; |
||||
|
|
||||
|
import QuickNav from "@/components/QuickNav.vue"; |
||||
|
import TopMessage from "@/components/TopMessage.vue"; |
||||
|
import MembersList from "@/components/MembersList.vue"; |
||||
|
|
||||
|
@Component({ |
||||
|
components: { |
||||
|
QuickNav, |
||||
|
TopMessage, |
||||
|
MembersList, |
||||
|
}, |
||||
|
}) |
||||
|
export default class OnboardMeetingMembersView extends Vue { |
||||
|
errorMessage = ""; |
||||
|
|
||||
|
get groupId(): string { |
||||
|
return (this.$route as RouteLocation).params.groupId as string; |
||||
|
} |
||||
|
|
||||
|
get password(): string { |
||||
|
return (this.$route as RouteLocation).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; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
handleError(message: string) { |
||||
|
this.errorMessage = message; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,672 @@ |
|||||
|
<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"> |
||||
|
Onboarding Meeting |
||||
|
</h1> |
||||
|
|
||||
|
<!-- Existing Meeting Section --> |
||||
|
<div |
||||
|
v-if="!isLoading && currentMeeting != null && !isInEditOrCreateMode()" |
||||
|
class="mt-8 p-4 border rounded-lg bg-white shadow" |
||||
|
> |
||||
|
<div class="flex items-center justify-between mb-4"> |
||||
|
<div class="flex items-center"> |
||||
|
<h2 class="text-2xl">Current Meeting</h2> |
||||
|
<button |
||||
|
@click="startEditing" |
||||
|
class="mb-4 text-blue-600 hover:text-blue-800 transition-colors duration-200 ml-2" |
||||
|
title="Edit Meeting" |
||||
|
> |
||||
|
<fa icon="pen" class="fa-fw" /> |
||||
|
<span class="sr-only">{{ |
||||
|
isInCreateMode() ? "Create Meeting" : "Edit Meeting" |
||||
|
}}</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
<button |
||||
|
@click="confirmDelete" |
||||
|
class="text-red-600 hover:text-red-800 transition-colors duration-200" |
||||
|
:disabled="isDeleting" |
||||
|
:class="{ 'opacity-50 cursor-not-allowed': isDeleting }" |
||||
|
title="Delete Meeting" |
||||
|
> |
||||
|
<fa icon="trash-can" class="fa-fw" /> |
||||
|
<span class="sr-only">{{ |
||||
|
isDeleting ? "Deleting..." : "Delete Meeting" |
||||
|
}}</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
<div class="space-y-2"> |
||||
|
<p><strong>Name:</strong> {{ currentMeeting.name }}</p> |
||||
|
<p> |
||||
|
<strong>Expires:</strong> |
||||
|
{{ formatExpirationTime(currentMeeting.expiresAt) }} |
||||
|
</p> |
||||
|
|
||||
|
<div v-if="currentMeeting.password" class="mt-4"> |
||||
|
<p class="text-gray-600"> |
||||
|
Share the password with the people you want to onboard. |
||||
|
</p> |
||||
|
</div> |
||||
|
<div v-else class="text-red-600"> |
||||
|
Your copy of the password is not saved. Edit the meeting, or delete it |
||||
|
and create a new meeting. |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Delete Confirmation Dialog --> |
||||
|
<div |
||||
|
v-if="showDeleteConfirm" |
||||
|
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" |
||||
|
> |
||||
|
<div class="bg-white rounded-lg p-6 max-w-sm w-full"> |
||||
|
<h3 class="text-lg font-medium mb-4">Delete Meeting?</h3> |
||||
|
<p class="text-gray-600 mb-6"> |
||||
|
This action cannot be undone. Are you sure you want to delete this |
||||
|
meeting? |
||||
|
</p> |
||||
|
<div class="flex justify-between space-x-4"> |
||||
|
<button |
||||
|
@click="showDeleteConfirm = false" |
||||
|
class="px-4 py-2 bg-slate-500 text-white rounded hover:bg-slate-700" |
||||
|
> |
||||
|
Cancel |
||||
|
</button> |
||||
|
<button |
||||
|
@click="deleteMeeting" |
||||
|
class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700" |
||||
|
> |
||||
|
Delete |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Create/Edit Meeting Form --> |
||||
|
<div |
||||
|
v-if=" |
||||
|
!isLoading && |
||||
|
isInEditOrCreateMode() && |
||||
|
newOrUpdatedMeeting != null /* duplicate check is for typechecks */ |
||||
|
" |
||||
|
class="mt-8" |
||||
|
> |
||||
|
<h2 class="text-2xl mb-4"> |
||||
|
{{ isInCreateMode() ? "Create New Meeting" : "Edit Meeting" }} |
||||
|
</h2> |
||||
|
<!-- This is my first form. Not sure if I like it; will see if the browser benefits extend to the native app. --> |
||||
|
<form |
||||
|
@submit.prevent="isInCreateMode() ? createMeeting() : updateMeeting()" |
||||
|
class="space-y-4" |
||||
|
> |
||||
|
<div> |
||||
|
<label |
||||
|
for="meetingName" |
||||
|
class="block text-sm font-medium text-gray-700" |
||||
|
>Meeting Name</label |
||||
|
> |
||||
|
<input |
||||
|
id="meetingName" |
||||
|
v-model="newOrUpdatedMeeting.name" |
||||
|
type="text" |
||||
|
required |
||||
|
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none" |
||||
|
placeholder="Enter meeting name" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label |
||||
|
for="expirationTime" |
||||
|
class="block text-sm font-medium text-gray-700" |
||||
|
>Meeting Expiration Time</label |
||||
|
> |
||||
|
<input |
||||
|
id="expirationTime" |
||||
|
v-model="newOrUpdatedMeeting.expiresAt" |
||||
|
type="datetime-local" |
||||
|
required |
||||
|
:min="minDateTime" |
||||
|
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label for="password" class="block text-sm font-medium text-gray-700" |
||||
|
>Meeting Password</label |
||||
|
> |
||||
|
<input |
||||
|
id="password" |
||||
|
v-model="newOrUpdatedMeeting.password" |
||||
|
type="text" |
||||
|
required |
||||
|
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none" |
||||
|
placeholder="Enter meeting password" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<label for="userName" class="block text-sm font-medium text-gray-700" |
||||
|
>Your Name</label |
||||
|
> |
||||
|
<input |
||||
|
id="userName" |
||||
|
v-model="newOrUpdatedMeeting.userFullName" |
||||
|
type="text" |
||||
|
required |
||||
|
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none" |
||||
|
placeholder="Your name" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<button |
||||
|
type="submit" |
||||
|
class="w-full bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md hover:from-green-500 hover:to-green-800" |
||||
|
:disabled="isLoading" |
||||
|
> |
||||
|
{{ |
||||
|
isLoading |
||||
|
? isInCreateMode() |
||||
|
? "Creating..." |
||||
|
: "Updating..." |
||||
|
: isInCreateMode() |
||||
|
? "Create Meeting" |
||||
|
: "Update Meeting" |
||||
|
}} |
||||
|
</button> |
||||
|
<button |
||||
|
v-if="isInEditOrCreateMode()" |
||||
|
type="button" |
||||
|
@click="cancelEditing" |
||||
|
class="w-full bg-slate-500 text-white px-4 py-2 rounded-md hover:bg-slate-600" |
||||
|
> |
||||
|
Cancel |
||||
|
</button> |
||||
|
</form> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Members Section --> |
||||
|
<div |
||||
|
v-if="!isLoading && currentMeeting != null" |
||||
|
class="mt-8 p-4 border rounded-lg bg-white shadow" |
||||
|
> |
||||
|
<div class="flex items-center justify-between mb-4"> |
||||
|
<h2 class="text-2xl">Meeting Members</h2> |
||||
|
</div> |
||||
|
<router-link |
||||
|
:to="onboardMeetingMembersLink()" |
||||
|
class="inline-block text-blue-600" |
||||
|
target="_blank" |
||||
|
> |
||||
|
Open shortcut page for members <fa icon="external-link" /> |
||||
|
</router-link> |
||||
|
|
||||
|
<MembersList |
||||
|
:password="currentMeeting.password || ''" |
||||
|
:decrypt-failure-message="DECRYPT_FAILURE_MESSAGE" |
||||
|
:show-organizer-tools="true" |
||||
|
@error="handleMembersError" |
||||
|
class="mt-4" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div v-else-if="isLoading"> |
||||
|
<div class="flex justify-center items-center h-full"> |
||||
|
<fa icon="spinner" class="fa-spin-pulse" /> |
||||
|
</div> |
||||
|
</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 MembersList from "@/components/MembersList.vue"; |
||||
|
import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index"; |
||||
|
import { |
||||
|
errorStringForLog, |
||||
|
getHeaders, |
||||
|
serverMessageForUser, |
||||
|
} from "@/libs/endorserServer"; |
||||
|
import { encryptMessage } from "@/libs/crypto"; |
||||
|
|
||||
|
interface ServerMeeting { |
||||
|
groupId: number; // from the server |
||||
|
name: string; // from the server |
||||
|
expiresAt: string; // from the server |
||||
|
userFullName?: string; // from the user's session |
||||
|
password?: string; // from the user's session |
||||
|
} |
||||
|
|
||||
|
interface MeetingSetupInfo { |
||||
|
name: string; |
||||
|
expiresAt: string; |
||||
|
userFullName: string; |
||||
|
password: string; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
components: { |
||||
|
QuickNav, |
||||
|
TopMessage, |
||||
|
MembersList, |
||||
|
}, |
||||
|
}) |
||||
|
export default class OnboardMeetingView extends Vue { |
||||
|
$notify!: ( |
||||
|
notification: { group: string; type: string; title: string; text: string }, |
||||
|
timeout?: number, |
||||
|
) => void; |
||||
|
|
||||
|
DECRYPT_FAILURE_MESSAGE = |
||||
|
"Unable to decrypt some member information. Check your password, or have them reset theirs if they don't show here."; |
||||
|
|
||||
|
currentMeeting: ServerMeeting | null = null; |
||||
|
newOrUpdatedMeeting: MeetingSetupInfo | null = null; |
||||
|
activeDid = ""; |
||||
|
apiServer = ""; |
||||
|
isDeleting = false; |
||||
|
isLoading = true; |
||||
|
showDeleteConfirm = false; |
||||
|
fullName = ""; |
||||
|
get minDateTime() { |
||||
|
const now = new Date(); |
||||
|
now.setMinutes(now.getMinutes() + 5); // Set minimum 5 minutes in the future |
||||
|
return this.formatDateForInput(now); |
||||
|
} |
||||
|
|
||||
|
async created() { |
||||
|
const settings = await retrieveSettingsForActiveAccount(); |
||||
|
this.activeDid = settings.activeDid || ""; |
||||
|
this.apiServer = settings.apiServer || ""; |
||||
|
this.fullName = settings.firstName || ""; |
||||
|
|
||||
|
await this.fetchCurrentMeeting(); |
||||
|
this.isLoading = false; |
||||
|
} |
||||
|
|
||||
|
isInCreateMode(): boolean { |
||||
|
return this.newOrUpdatedMeeting != null && this.currentMeeting == null; |
||||
|
} |
||||
|
|
||||
|
isInEditOrCreateMode(): boolean { |
||||
|
return this.newOrUpdatedMeeting != null; |
||||
|
} |
||||
|
|
||||
|
getDefaultExpirationTime(): string { |
||||
|
const date = new Date(); |
||||
|
// Round up to the next hour |
||||
|
date.setMinutes(0); |
||||
|
date.setSeconds(0); |
||||
|
date.setMilliseconds(0); |
||||
|
date.setHours(date.getHours() + 1); // Round up to next hour |
||||
|
date.setHours(date.getHours() + 2); // Add 2 more hours |
||||
|
return this.formatDateForInput(date); |
||||
|
} |
||||
|
|
||||
|
// Format a date object to YYYY-MM-DDTHH:mm format for datetime-local input |
||||
|
private formatDateForInput(date: Date): string { |
||||
|
const year = date.getFullYear(); |
||||
|
const month = String(date.getMonth() + 1).padStart(2, "0"); |
||||
|
const day = String(date.getDate()).padStart(2, "0"); |
||||
|
const hours = String(date.getHours()).padStart(2, "0"); |
||||
|
const minutes = String(date.getMinutes()).padStart(2, "0"); |
||||
|
|
||||
|
return `${year}-${month}-${day}T${hours}:${minutes}`; |
||||
|
} |
||||
|
|
||||
|
blankMeeting(): MeetingSetupInfo { |
||||
|
return { |
||||
|
// no groupId yet |
||||
|
name: "", |
||||
|
expiresAt: this.getDefaultExpirationTime(), |
||||
|
userFullName: this.fullName, |
||||
|
password: (this.currentMeeting?.password as string) || "", |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
async fetchCurrentMeeting() { |
||||
|
try { |
||||
|
const headers = await getHeaders(this.activeDid); |
||||
|
const response = await this.axios.get( |
||||
|
this.apiServer + "/api/partner/groupOnboard", |
||||
|
{ headers }, |
||||
|
); |
||||
|
|
||||
|
if (response?.data?.data) { |
||||
|
this.currentMeeting = { |
||||
|
...response.data.data, |
||||
|
userFullName: this.fullName, |
||||
|
password: this.currentMeeting?.password || "", |
||||
|
}; |
||||
|
} else { |
||||
|
// no meeting found |
||||
|
this.newOrUpdatedMeeting = this.blankMeeting(); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
// no meeting found |
||||
|
this.newOrUpdatedMeeting = this.blankMeeting(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async createMeeting() { |
||||
|
this.isLoading = true; |
||||
|
|
||||
|
try { |
||||
|
if (!this.newOrUpdatedMeeting) { |
||||
|
throw Error( |
||||
|
"There was no meeting data to create. We should never get here.", |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// Convert local time to UTC for comparison and server submission |
||||
|
const localExpiresAt = new Date(this.newOrUpdatedMeeting.expiresAt); |
||||
|
const now = new Date(); |
||||
|
if (localExpiresAt <= now) { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "warning", |
||||
|
title: "Invalid Time", |
||||
|
text: "Select a future time for the meeting expiration.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
if (!this.newOrUpdatedMeeting.userFullName) { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "warning", |
||||
|
title: "Invalid Name", |
||||
|
text: "Please enter your name.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
if (!this.newOrUpdatedMeeting.password) { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "warning", |
||||
|
title: "Invalid Password", |
||||
|
text: "Please enter a password.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// create content with user's name and DID encrypted with password |
||||
|
const content = { |
||||
|
name: this.newOrUpdatedMeeting.userFullName, |
||||
|
did: this.activeDid, |
||||
|
}; |
||||
|
const encryptedContent = await encryptMessage( |
||||
|
JSON.stringify(content), |
||||
|
this.newOrUpdatedMeeting.password, |
||||
|
); |
||||
|
|
||||
|
const headers = await getHeaders(this.activeDid); |
||||
|
const response = await this.axios.post( |
||||
|
this.apiServer + "/api/partner/groupOnboard", |
||||
|
{ |
||||
|
name: this.newOrUpdatedMeeting.name, |
||||
|
expiresAt: localExpiresAt.toISOString(), |
||||
|
content: encryptedContent, |
||||
|
}, |
||||
|
{ headers }, |
||||
|
); |
||||
|
|
||||
|
if (response.data && response.data.success) { |
||||
|
this.currentMeeting = { |
||||
|
...this.newOrUpdatedMeeting, |
||||
|
groupId: response.data.success.groupId, |
||||
|
}; |
||||
|
|
||||
|
this.newOrUpdatedMeeting = null; |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "success", |
||||
|
title: "Success", |
||||
|
text: "Meeting created.", |
||||
|
}, |
||||
|
3000, |
||||
|
); |
||||
|
} else { |
||||
|
throw { response: response }; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
logConsoleAndDb( |
||||
|
"Error creating meeting: " + errorStringForLog(error), |
||||
|
true, |
||||
|
); |
||||
|
const errorMessage = serverMessageForUser(error); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: |
||||
|
errorMessage || |
||||
|
"Failed to create meeting. Try reloading or submitting again.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
} finally { |
||||
|
this.isLoading = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
formatExpirationTime(expiresAt: string): string { |
||||
|
const expiration = new Date(expiresAt); // Server time is in UTC |
||||
|
const now = new Date(); |
||||
|
const diffHours = Math.round( |
||||
|
(expiration.getTime() - now.getTime()) / (1000 * 60 * 60), |
||||
|
); |
||||
|
|
||||
|
if (diffHours < 0) { |
||||
|
return "Expired"; |
||||
|
} else if (diffHours < 1) { |
||||
|
return "Less than an hour"; |
||||
|
} else if (diffHours === 1) { |
||||
|
return "1 hour"; |
||||
|
} else { |
||||
|
return `${diffHours} hours`; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
confirmDelete() { |
||||
|
this.showDeleteConfirm = true; |
||||
|
} |
||||
|
|
||||
|
async deleteMeeting() { |
||||
|
this.isDeleting = true; |
||||
|
try { |
||||
|
const headers = await getHeaders(this.activeDid); |
||||
|
await this.axios.delete(this.apiServer + "/api/partner/groupOnboard", { |
||||
|
headers, |
||||
|
}); |
||||
|
|
||||
|
this.currentMeeting = null; |
||||
|
this.newOrUpdatedMeeting = this.blankMeeting(); |
||||
|
this.showDeleteConfirm = false; |
||||
|
|
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "success", |
||||
|
title: "Success", |
||||
|
text: "Meeting deleted successfully.", |
||||
|
}, |
||||
|
3000, |
||||
|
); |
||||
|
} catch (error) { |
||||
|
console.error("Error deleting meeting:", error); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: serverMessageForUser(error) || "Failed to delete meeting.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
} finally { |
||||
|
this.isDeleting = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
startEditing() { |
||||
|
// Populate form with existing meeting data |
||||
|
if (this.currentMeeting) { |
||||
|
const localExpiresAt = new Date(this.currentMeeting.expiresAt); |
||||
|
this.newOrUpdatedMeeting = { |
||||
|
name: this.currentMeeting.name, |
||||
|
expiresAt: this.formatDateForInput(localExpiresAt), |
||||
|
userFullName: this.currentMeeting.userFullName || "", |
||||
|
password: this.currentMeeting.password || "", |
||||
|
}; |
||||
|
} else { |
||||
|
console.error( |
||||
|
"There is no current meeting to edit. We should never get here.", |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
cancelEditing() { |
||||
|
// Reset form data |
||||
|
this.newOrUpdatedMeeting = null; |
||||
|
} |
||||
|
|
||||
|
async updateMeeting() { |
||||
|
this.isLoading = true; |
||||
|
if (!this.newOrUpdatedMeeting) { |
||||
|
throw Error("There was no meeting data to update."); |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
// Convert local time to UTC for comparison and server submission |
||||
|
const localExpiresAt = new Date(this.newOrUpdatedMeeting.expiresAt); |
||||
|
const now = new Date(); |
||||
|
if (localExpiresAt <= now) { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "warning", |
||||
|
title: "Invalid Time", |
||||
|
text: "Select a future time for the meeting expiration.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
if (!this.newOrUpdatedMeeting.userFullName) { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "warning", |
||||
|
title: "Invalid Name", |
||||
|
text: "Please enter your name.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
if (!this.newOrUpdatedMeeting.password) { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "warning", |
||||
|
title: "Invalid Password", |
||||
|
text: "Please enter a password.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
return; |
||||
|
} |
||||
|
// create content with user's name and DID encrypted with password |
||||
|
const content = { |
||||
|
name: this.newOrUpdatedMeeting.userFullName, |
||||
|
did: this.activeDid, |
||||
|
}; |
||||
|
const encryptedContent = await encryptMessage( |
||||
|
JSON.stringify(content), |
||||
|
this.newOrUpdatedMeeting.password, |
||||
|
); |
||||
|
|
||||
|
const headers = await getHeaders(this.activeDid); |
||||
|
const response = await this.axios.put( |
||||
|
this.apiServer + "/api/partner/groupOnboard", |
||||
|
{ |
||||
|
// the groupId is in the currentMeeting but it's not necessary while users only have one meeting |
||||
|
name: this.newOrUpdatedMeeting.name, |
||||
|
expiresAt: localExpiresAt.toISOString(), |
||||
|
content: encryptedContent, |
||||
|
}, |
||||
|
{ headers }, |
||||
|
); |
||||
|
|
||||
|
if (response.data && response.data.success) { |
||||
|
// Update the current meeting with only the necessary fields |
||||
|
this.currentMeeting = { |
||||
|
...this.newOrUpdatedMeeting, |
||||
|
groupId: (this.currentMeeting?.groupId as number) || -1, |
||||
|
}; |
||||
|
this.newOrUpdatedMeeting = null; |
||||
|
} else { |
||||
|
throw { response: response }; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
logConsoleAndDb( |
||||
|
"Error updating meeting: " + errorStringForLog(error), |
||||
|
true, |
||||
|
); |
||||
|
const errorMessage = serverMessageForUser(error); |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: |
||||
|
errorMessage || |
||||
|
"Failed to update meeting. Try reloading or submitting again.", |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
} finally { |
||||
|
this.isLoading = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
onboardMeetingMembersLink(): string { |
||||
|
if (this.currentMeeting) { |
||||
|
return `/onboard-meeting-members/${this.currentMeeting?.groupId}?password=${encodeURIComponent( |
||||
|
this.currentMeeting?.password || "", |
||||
|
)}`; |
||||
|
} |
||||
|
return ""; |
||||
|
} |
||||
|
|
||||
|
handleMembersError(message: string) { |
||||
|
this.$notify( |
||||
|
{ |
||||
|
group: "alert", |
||||
|
type: "danger", |
||||
|
title: "Error", |
||||
|
text: message, |
||||
|
}, |
||||
|
5000, |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue