jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

fix linting (and change a little wording in onboarding page)

Browse Source
This commit is contained in:
Trent Larson
2025-02-03 16:36:13 -07:00
parent 5cb2ac339d
commit 6a070a1715
11 changed files with 442 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ChoiceButtonDialog.vue
View File

@@ -117,7 +117,7 @@ export default class PromptDialog extends Vue {
onOption3: this.onOption3,
onCancel: this.onCancel,
} as NotificationIface,
-1
-1,
);
}
@@ -149,4 +149,4 @@ export default class PromptDialog extends Vue {
close("string that does not matter");
}
}
</script>
</script>

6
src/components/GiftedDialog.vue
View File

@@ -90,7 +90,11 @@
import { Vue, Component, Prop } from "vue-facing-decorator";
import { NotificationIface } from "@/constants/app";
import { createAndSubmitGive, didInfo, serverMessageForUser } from "@/libs/endorserServer";
import {
createAndSubmitGive,
didInfo,
serverMessageForUser,
} from "@/libs/endorserServer";
import * as libsUtil from "@/libs/util";
import { db, retrieveSettingsForActiveAccount } from "@/db/index";
import { Contact } from "@/db/tables/contacts";

68
src/components/MembersList.vue
View File

@@ -7,8 +7,11 @@
<!-- 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">
<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>
@@ -16,18 +19,29 @@
<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
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';
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;
@@ -43,19 +57,20 @@ interface DecryptedMember {
@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;
@Prop({ default: "Your password failed. Please go back and try again." })
decryptFailureMessage!: string;
decryptedMembers: DecryptedMember[] = [];
missingPassword = false;
isLoading = false;
members: Member[] = [];
activeDid = '';
apiServer = '';
activeDid = "";
apiServer = "";
async created() {
const settings = await retrieveSettingsForActiveAccount();
this.activeDid = settings.activeDid || '';
this.apiServer = settings.apiServer || '';
this.activeDid = settings.activeDid || "";
this.apiServer = settings.apiServer || "";
await this.fetchMembers();
}
@@ -65,16 +80,22 @@ export default class MembersList extends Vue {
const headers = await getHeaders(this.activeDid);
const response = await this.axios.get(
`${this.apiServer}/api/partner/groupOnboardMembers/`,
{ headers }
{ 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.');
logConsoleAndDb(
"Error fetching members: " + errorStringForLog(error),
true,
);
this.$emit(
"error",
serverMessageForUser(error) || "Failed to fetch members.",
);
} finally {
this.isLoading = false;
}
@@ -82,17 +103,20 @@ export default class MembersList extends Vue {
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 decryptedContent = await decryptMessage(
member.content,
this.password,
);
const content = JSON.parse(decryptedContent);
this.decryptedMembers.push({
memberId: member.memberId,
name: content.name,
@@ -104,4 +128,4 @@ export default class MembersList extends Vue {
}
}
}
</script>
</script>

5
src/components/OfferDialog.vue
View File

@@ -83,7 +83,10 @@
import { Vue, Component, Prop } from "vue-facing-decorator";
import { NotificationIface } from "@/constants/app";
import { createAndSubmitOffer, serverMessageForUser } from "@/libs/endorserServer";
import {
createAndSubmitOffer,
serverMessageForUser,
} from "@/libs/endorserServer";
import * as libsUtil from "@/libs/util";
import { retrieveSettingsForActiveAccount } from "@/db/index";

58
src/libs/crypto/index.ts
View File

@@ -177,43 +177,43 @@ export async function encryptMessage(message: string, password: string) {
// Derive key from password using PBKDF2
const keyMaterial = await crypto.subtle.importKey(
'raw',
"raw",
encoder.encode(password),
'PBKDF2',
"PBKDF2",
false,
['deriveBits', 'deriveKey']
["deriveBits", "deriveKey"],
);
const key = await crypto.subtle.deriveKey(
{
name: 'PBKDF2',
name: "PBKDF2",
salt,
iterations: ITERATIONS,
hash: 'SHA-256'
hash: "SHA-256",
},
keyMaterial,
{ name: 'AES-GCM', length: KEY_LENGTH },
{ name: "AES-GCM", length: KEY_LENGTH },
false,
['encrypt']
["encrypt"],
);
// Encrypt the message
const encryptedContent = await crypto.subtle.encrypt(
{
name: 'AES-GCM',
iv
name: "AES-GCM",
iv,
},
key,
encoder.encode(message)
encoder.encode(message),
);
// Return a JSON structure with base64-encoded components
const result = {
salt: arrayBufferToBase64(salt),
iv: arrayBufferToBase64(iv),
encrypted: arrayBufferToBase64(encryptedContent)
encrypted: arrayBufferToBase64(encryptedContent),
};
return btoa(JSON.stringify(result));
}
@@ -229,34 +229,34 @@ export async function decryptMessage(encryptedJson: string, password: string) {
// Derive the same key using PBKDF2 with the extracted salt
const keyMaterial = await crypto.subtle.importKey(
'raw',
"raw",
new TextEncoder().encode(password),
'PBKDF2',
"PBKDF2",
false,
['deriveBits', 'deriveKey']
["deriveBits", "deriveKey"],
);
const key = await crypto.subtle.deriveKey(
{
name: 'PBKDF2',
name: "PBKDF2",
salt: saltArray,
iterations: ITERATIONS,
hash: 'SHA-256'
hash: "SHA-256",
},
keyMaterial,
{ name: 'AES-GCM', length: KEY_LENGTH },
{ name: "AES-GCM", length: KEY_LENGTH },
false,
['decrypt']
["decrypt"],
);
// Decrypt the content
const decryptedContent = await crypto.subtle.decrypt(
{
name: 'AES-GCM',
iv: ivArray
name: "AES-GCM",
iv: ivArray,
},
key,
encryptedContent
encryptedContent,
);
// Convert the decrypted content back to a string
@@ -268,33 +268,33 @@ export async function testEncryptionDecryption() {
try {
const testMessage = "Hello, this is a test message! 🚀";
const testPassword = "myTestPassword123";
console.log("Original message:", testMessage);
// Test encryption
console.log("Encrypting...");
const encrypted = await encryptMessage(testMessage, testPassword);
console.log("Encrypted result:", encrypted);
// Test decryption
console.log("Decrypting...");
const decrypted = await decryptMessage(encrypted, testPassword);
console.log("Decrypted result:", decrypted);
// Verify
const success = testMessage === decrypted;
console.log("Test " + (success ? "PASSED ✅" : "FAILED ❌"));
console.log("Messages match:", success);
// Test with wrong password
console.log("\nTesting with wrong password...");
try {
const wrongDecrypted = await decryptMessage(encrypted, "wrongPassword");
await decryptMessage(encrypted, "wrongPassword");
console.log("Should not reach here");
} catch (error) {
console.log("Correctly failed with wrong password ✅");
}
return success;
} catch (error) {
console.error("Test failed with error:", error);

1
src/libs/endorserServer.ts
View File

@@ -680,6 +680,7 @@ export async function setPlanInCache(
* @param error that is thrown from an Endorser server call by Axios
* @returns user-friendly message, or undefined if none found
*/
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function serverMessageForUser(error: any) {
return (
// this is how most user messages are returned

18
src/router/index.ts
View File

@@ -180,19 +180,19 @@ const routes: Array<RouteRecordRaw> = [
component: () => import("../views/OfferDetailsView.vue"),
},
{
path: '/onboard-meeting-list',
name: 'onboard-meeting-list',
component: () => import('../views/OnboardMeetingListView.vue'),
path: "/onboard-meeting-list",
name: "onboard-meeting-list",
component: () => import("../views/OnboardMeetingListView.vue"),
},
{
path: '/onboard-meeting-members/:groupId',
name: 'onboard-meeting-members',
component: () => import('../views/OnboardMeetingMembersView.vue'),
path: "/onboard-meeting-members/:groupId",
name: "onboard-meeting-members",
component: () => import("../views/OnboardMeetingMembersView.vue"),
},
{
path: '/onboard-meeting-setup',
name: 'onboard-meeting-setup',
component: () => import('../views/OnboardMeetingSetupView.vue'),
path: "/onboard-meeting-setup",
name: "onboard-meeting-setup",
component: () => import("../views/OnboardMeetingSetupView.vue"),
},
{
path: "/project/:id?",

31
src/views/ContactsView.vue
View File

@@ -37,23 +37,24 @@
<fa icon="chair" class="fa-fw text-2xl" />
</router-link>
</span>
<span
v-else
class="flex"
>
<span class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md">
<span v-else class="flex">
<span
class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
>
<fa
icon="envelope-open-text"
class="fa-fw text-2xl"
@click="
warning(
'You must get registered before you can create invites.',
'Not Registered',
)
"
/>
icon="envelope-open-text"
class="fa-fw text-2xl"
@click="
warning(
'You must get registered before you can create invites.',
'Not Registered',
)
"
/>
</span>
<span class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md">
<span
class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
>
<fa
icon="chair"
class="fa-fw text-2xl"

166
src/views/OnboardMeetingListView.vue
View File

@@ -34,7 +34,9 @@
<!-- Meeting List -->
<div v-else class="space-y-4">
<div v-for="meeting in meetings" :key="meeting.groupId"
<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)"
>
@@ -47,7 +49,10 @@
</div>
<!-- Password Dialog -->
<div v-if="showPasswordDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<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
@@ -78,13 +83,19 @@
</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 { encryptMessage } from '@/libs/crypto';
import { nextTick } from 'vue';
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;
@@ -98,23 +109,26 @@ interface Meeting {
},
})
export default class OnboardMeetingListView extends Vue {
$notify!: (notification: { group: string; type: string; title: string; text: string }, timeout?: number) => void;
$notify!: (
notification: { group: string; type: string; title: string; text: string },
timeout?: number,
) => void;
activeDid = '';
apiServer = '';
activeDid = "";
apiServer = "";
attendingMeeting: Meeting | null = null;
firstName = '';
firstName = "";
isLoading = false;
meetings: Meeting[] = [];
password = '';
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 || '';
this.activeDid = settings.activeDid || "";
this.apiServer = settings.apiServer || "";
this.firstName = settings.firstName || "";
await this.fetchMeetings();
}
@@ -124,8 +138,8 @@ export default class OnboardMeetingListView extends Vue {
// 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 }
this.apiServer + "/api/partner/groupOnboardMember",
{ headers },
);
if (response.data?.data) {
@@ -134,8 +148,8 @@ export default class OnboardMeetingListView extends Vue {
// retrieve the meeting details
const headers2 = await getHeaders(this.activeDid);
const response2 = await this.axios.get(
this.apiServer + '/api/partner/groupOnboard/' + attendingMeetingId,
{ headers: headers2 }
this.apiServer + "/api/partner/groupOnboard/" + attendingMeetingId,
{ headers: headers2 },
);
if (response2.data?.data) {
@@ -143,29 +157,35 @@ export default class OnboardMeetingListView extends Vue {
return;
} else {
// this should never happen
logConsoleAndDb('Error fetching meeting for user after saying they are in one.', true);
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 }
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);
logConsoleAndDb(
"Error fetching meetings: " + errorStringForLog(error),
true,
);
this.$notify(
{
group: 'alert',
type: 'danger',
title: 'Error',
text: serverMessageForUser(error) || 'Failed to fetch meetings.',
group: "alert",
type: "danger",
title: "Error",
text: serverMessageForUser(error) || "Failed to fetch meetings.",
},
5000
5000,
);
} finally {
this.isLoading = false;
@@ -173,7 +193,7 @@ export default class OnboardMeetingListView extends Vue {
}
promptPassword(meeting: Meeting) {
this.password = '';
this.password = "";
this.selectedMeeting = meeting;
this.showPasswordDialog = true;
nextTick(() => {
@@ -185,7 +205,7 @@ export default class OnboardMeetingListView extends Vue {
}
cancelPasswordDialog() {
this.password = '';
this.password = "";
this.selectedMeeting = null;
this.showPasswordDialog = false;
}
@@ -193,7 +213,10 @@ export default class OnboardMeetingListView extends Vue {
async submitPassword() {
if (!this.selectedMeeting) {
// this should never happen
logConsoleAndDb('No meeting selected when prompting for password, which should never happen.', true);
logConsoleAndDb(
"No meeting selected when prompting for password, which should never happen.",
true,
);
return;
}
@@ -201,51 +224,58 @@ export default class OnboardMeetingListView extends Vue {
// Create member data object
const memberData = {
name: this.firstName,
did: this.activeDid
did: this.activeDid,
};
const memberDataString = JSON.stringify(memberData);
const encryptedMemberData = await encryptMessage(memberDataString, this.password);
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',
this.apiServer + "/api/partner/groupOnboardMember",
{
groupId: this.selectedMeeting.groupId,
content: encryptedMemberData
content: encryptedMemberData,
},
{ headers }
{ headers },
);
if (postResult.data && postResult.data.success) {
// Navigate to members view with password and groupId
this.$router.push({
name: 'onboard-meeting-members',
params: {
groupId: this.selectedMeeting.groupId.toString()
(this.$router as Router).push({
name: "onboard-meeting-members",
params: {
groupId: this.selectedMeeting.groupId.toString(),
},
query: {
password: this.password,
memberId: postResult.data.memberId
}
memberId: postResult.data.memberId,
},
});
this.cancelPasswordDialog();
} else {
throw { response: postResult };
}
} catch (error) {
logConsoleAndDb('Error joining meeting: ' + errorStringForLog(error), true);
logConsoleAndDb(
"Error joining meeting: " + errorStringForLog(error),
true,
);
this.$notify(
{
group: 'alert',
type: 'danger',
title: 'Error',
text: serverMessageForUser(error) || 'Failed to join meeting.',
group: "alert",
type: "danger",
title: "Error",
text:
serverMessageForUser(error) || "You failed to join the meeting.",
},
5000
5000,
);
}
}
@@ -254,8 +284,8 @@ export default class OnboardMeetingListView extends Vue {
try {
const headers = await getHeaders(this.activeDid);
await this.axios.delete(
this.apiServer + '/api/partner/groupOnboardMember',
{ headers }
this.apiServer + "/api/partner/groupOnboardMember",
{ headers },
);
this.attendingMeeting = null;
@@ -263,25 +293,29 @@ export default class OnboardMeetingListView extends Vue {
this.$notify(
{
group: 'alert',
type: 'success',
title: 'Success',
text: 'Successfully left the meeting.',
group: "alert",
type: "success",
title: "Success",
text: "You left the meeting.",
},
5000
5000,
);
} catch (error) {
logConsoleAndDb('Error leaving meeting: ' + errorStringForLog(error), true);
logConsoleAndDb(
"Error leaving meeting: " + errorStringForLog(error),
true,
);
this.$notify(
{
group: 'alert',
type: 'danger',
title: 'Error',
text: serverMessageForUser(error) || 'Failed to leave meeting.',
group: "alert",
type: "danger",
title: "Error",
text:
serverMessageForUser(error) || "You failed to leave the meeting.",
},
5000
5000,
);
}
}
}
</script>
</script>

22
src/views/OnboardMeetingMembersView.vue
View File

@@ -38,10 +38,12 @@
</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 { 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: {
@@ -51,23 +53,23 @@ import MembersList from '@/components/MembersList.vue';
},
})
export default class OnboardMeetingMembersView extends Vue {
errorMessage = '';
errorMessage = "";
get groupId(): string {
return this.$route.params.groupId as string;
return (this.$route as RouteLocation).params.groupId as string;
}
get password(): string {
return this.$route.query.password as 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.';
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.';
this.errorMessage = "The password is missing. Go back and try again.";
return;
}
}
@@ -76,4 +78,4 @@ export default class OnboardMeetingMembersView extends Vue {
this.errorMessage = message;
}
}
</script>
</script>

353
src/views/OnboardMeetingSetupView.vue
View File

@@ -22,7 +22,9 @@
title="Edit Meeting"
>
<fa icon="pen" class="fa-fw" />
<span class="sr-only">{{ isInCreateMode() ? 'Create Meeting' : 'Edit Meeting' }}</span>
<span class="sr-only">{{
isInCreateMode() ? "Create Meeting" : "Edit Meeting"
}}</span>
</button>
</div>
<button
@@ -33,28 +35,41 @@
title="Delete Meeting"
>
<fa icon="trash-can" class="fa-fw" />
<span class="sr-only">{{ isDeleting ? 'Deleting...' : 'Delete Meeting' }}</span>
<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>
<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>
<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.
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
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>
<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"
@@ -74,14 +89,27 @@
<!-- Create/Edit Meeting Form -->
<div
v-if="!isLoading && isInEditOrCreateMode() && newOrUpdatedMeeting != null /* duplicate check is for typechecks */"
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 whether I like it or not; gotta see if the browser benefits extend to the native app. -->
<form @submit.prevent="isInCreateMode() ? createMeeting() : updateMeeting()" class="space-y-4">
<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>
<label
for="meetingName"
class="block text-sm font-medium text-gray-700"
>Meeting Name</label
>
<input
id="meetingName"
v-model="newOrUpdatedMeeting.name"
@@ -93,7 +121,11 @@
</div>
<div>
<label for="expirationTime" class="block text-sm font-medium text-gray-700">Meeting Expiration Time</label>
<label
for="expirationTime"
class="block text-sm font-medium text-gray-700"
>Meeting Expiration Time</label
>
<input
id="expirationTime"
v-model="newOrUpdatedMeeting.expiresAt"
@@ -105,7 +137,9 @@
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700">Meeting Password</label>
<label for="password" class="block text-sm font-medium text-gray-700"
>Meeting Password</label
>
<input
id="password"
v-model="newOrUpdatedMeeting.password"
@@ -117,7 +151,9 @@
</div>
<div>
<label for="userName" class="block text-sm font-medium text-gray-700">Your Name</label>
<label for="userName" class="block text-sm font-medium text-gray-700"
>Your Name</label
>
<input
id="userName"
v-model="newOrUpdatedMeeting.userFullName"
@@ -133,7 +169,15 @@
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') }}
{{
isLoading
? isInCreateMode()
? "Creating..."
: "Updating..."
: isInCreateMode()
? "Create Meeting"
: "Update Meeting"
}}
</button>
<button
v-if="isInEditOrCreateMode()"
@@ -147,12 +191,15 @@
</div>
<!-- Members Section -->
<div v-if="!isLoading && currentMeeting != null" class="mt-8 p-4 border rounded-lg bg-white shadow">
<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="`/onboard-meeting-members/${currentMeeting.groupId}?password=${encodeURIComponent(currentMeeting.password || '')}`"
:to="onboardMeetingMembersLink()"
class="inline-block px-4 text-blue-600"
target="_blank"
>
@@ -176,20 +223,24 @@
</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';
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: string; // from the server
name: string; // from the server
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
password?: string; // from the user's session
}
interface MeetingSetupInfo {
@@ -207,16 +258,19 @@ interface MeetingSetupInfo {
},
})
export default class OnboardMeetingView extends Vue {
$notify!: (notification: { group: string; type: string; title: string; text: string }, timeout?: number) => void;
$notify!: (
notification: { group: string; type: string; title: string; text: string },
timeout?: number,
) => void;
currentMeeting: ServerMeeting | null = null;
newOrUpdatedMeeting: MeetingSetupInfo | null = null;
activeDid = '';
apiServer = '';
activeDid = "";
apiServer = "";
isDeleting = false;
isLoading = true;
showDeleteConfirm = false;
fullName = '';
fullName = "";
get minDateTime() {
const now = new Date();
now.setMinutes(now.getMinutes() + 5); // Set minimum 5 minutes in the future
@@ -225,10 +279,10 @@ export default class OnboardMeetingView extends Vue {
async created() {
const settings = await retrieveSettingsForActiveAccount();
this.activeDid = settings.activeDid || '';
this.apiServer = settings.apiServer || '';
this.fullName = settings.firstName || '';
this.activeDid = settings.activeDid || "";
this.apiServer = settings.apiServer || "";
this.fullName = settings.firstName || "";
await this.fetchCurrentMeeting();
this.isLoading = false;
}
@@ -255,21 +309,21 @@ export default class OnboardMeetingView extends Vue {
// 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');
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: '',
name: "",
expiresAt: this.getDefaultExpirationTime(),
userFullName: this.fullName,
password: this.currentMeeting?.password || "",
password: (this.currentMeeting?.password as string) || "",
};
}
@@ -277,10 +331,10 @@ export default class OnboardMeetingView extends Vue {
try {
const headers = await getHeaders(this.activeDid);
const response = await this.axios.get(
this.apiServer + '/api/partner/groupOnboard',
{ headers }
this.apiServer + "/api/partner/groupOnboard",
{ headers },
);
if (response?.data?.data) {
this.currentMeeting = {
...response.data.data,
@@ -302,7 +356,9 @@ export default class OnboardMeetingView extends Vue {
try {
if (!this.newOrUpdatedMeeting) {
throw Error('There was no meeting data to create. We should never get here.');
throw Error(
"There was no meeting data to create. We should never get here.",
);
}
// Convert local time to UTC for comparison and server submission
@@ -311,57 +367,59 @@ export default class OnboardMeetingView extends Vue {
if (localExpiresAt <= now) {
this.$notify(
{
group: 'alert',
type: 'warning',
title: 'Invalid Time',
text: 'Select a future time for the meeting expiration.',
group: "alert",
type: "warning",
title: "Invalid Time",
text: "Select a future time for the meeting expiration.",
},
5000
5000,
);
return;
}
if (!this.newOrUpdatedMeeting.userFullName) {
this.$notify(
{
group: 'alert',
type: 'warning',
title: 'Invalid Name',
text: 'Please enter your name.',
group: "alert",
type: "warning",
title: "Invalid Name",
text: "Please enter your name.",
},
5000
5000,
);
return;
}
if (!this.newOrUpdatedMeeting.password) {
this.$notify(
{
group: 'alert',
type: 'warning',
title: 'Invalid Password',
text: 'Please enter a password.',
group: "alert",
type: "warning",
title: "Invalid Password",
text: "Please enter a password.",
},
5000
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 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',
this.apiServer + "/api/partner/groupOnboard",
{
name: this.newOrUpdatedMeeting.name,
expiresAt: localExpiresAt.toISOString(),
content: encryptedContent,
},
{ headers }
{ headers },
);
if (response.data && response.data.success) {
@@ -373,27 +431,32 @@ export default class OnboardMeetingView extends Vue {
this.newOrUpdatedMeeting = null;
this.$notify(
{
group: 'alert',
type: 'success',
title: 'Success',
text: 'Meeting created.',
group: "alert",
type: "success",
title: "Success",
text: "Meeting created.",
},
3000
3000,
);
} else {
throw { response: response };
}
} catch (error) {
logConsoleAndDb('Error creating meeting: ' + errorStringForLog(error), true);
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.',
group: "alert",
type: "danger",
title: "Error",
text:
errorMessage ||
"Failed to create meeting. Try reloading or submitting again.",
},
5000
5000,
);
} finally {
this.isLoading = false;
@@ -403,14 +466,16 @@ export default class OnboardMeetingView extends Vue {
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));
const diffHours = Math.round(
(expiration.getTime() - now.getTime()) / (1000 * 60 * 60),
);
if (diffHours < 0) {
return 'Expired';
return "Expired";
} else if (diffHours < 1) {
return 'Less than an hour';
return "Less than an hour";
} else if (diffHours === 1) {
return '1 hour';
return "1 hour";
} else {
return `${diffHours} hours`;
}
@@ -424,34 +489,33 @@ export default class OnboardMeetingView extends Vue {
this.isDeleting = true;
try {
const headers = await getHeaders(this.activeDid);
await this.axios.delete(
this.apiServer + '/api/partner/groupOnboard',
{ headers }
);
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.',
group: "alert",
type: "success",
title: "Success",
text: "Meeting deleted successfully.",
},
3000
3000,
);
} catch (error) {
console.error('Error deleting meeting:', error);
console.error("Error deleting meeting:", error);
this.$notify(
{
group: 'alert',
type: 'danger',
title: 'Error',
text: serverMessageForUser(error) || 'Failed to delete meeting.',
group: "alert",
type: "danger",
title: "Error",
text: serverMessageForUser(error) || "Failed to delete meeting.",
},
5000
5000,
);
} finally {
this.isDeleting = false;
@@ -465,11 +529,13 @@ export default class OnboardMeetingView extends Vue {
this.newOrUpdatedMeeting = {
name: this.currentMeeting.name,
expiresAt: this.formatDateForInput(localExpiresAt),
userFullName: this.currentMeeting.userFullName || '',
password: this.currentMeeting.password || '',
userFullName: this.currentMeeting.userFullName || "",
password: this.currentMeeting.password || "",
};
} else {
console.error('There is no current meeting to edit. We should never get here.');
console.error(
"There is no current meeting to edit. We should never get here.",
);
}
}
@@ -481,7 +547,7 @@ export default class OnboardMeetingView extends Vue {
async updateMeeting() {
this.isLoading = true;
if (!this.newOrUpdatedMeeting) {
throw Error('There was no meeting data to update.');
throw Error("There was no meeting data to update.");
}
try {
@@ -491,36 +557,36 @@ export default class OnboardMeetingView extends Vue {
if (localExpiresAt <= now) {
this.$notify(
{
group: 'alert',
type: 'warning',
title: 'Invalid Time',
text: 'Select a future time for the meeting expiration.',
group: "alert",
type: "warning",
title: "Invalid Time",
text: "Select a future time for the meeting expiration.",
},
5000
5000,
);
return;
}
if (!this.newOrUpdatedMeeting.userFullName) {
this.$notify(
{
group: 'alert',
type: 'warning',
title: 'Invalid Name',
text: 'Please enter your name.',
group: "alert",
type: "warning",
title: "Invalid Name",
text: "Please enter your name.",
},
5000
5000,
);
return;
}
if (!this.newOrUpdatedMeeting.password) {
this.$notify(
{
group: 'alert',
type: 'warning',
title: 'Invalid Password',
text: 'Please enter a password.',
group: "alert",
type: "warning",
title: "Invalid Password",
text: "Please enter a password.",
},
5000
5000,
);
return;
}
@@ -529,57 +595,74 @@ export default class OnboardMeetingView extends Vue {
name: this.newOrUpdatedMeeting.userFullName,
did: this.activeDid,
};
const encryptedContent = await encryptMessage(JSON.stringify(content), this.newOrUpdatedMeeting.password);
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',
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 }
{ headers },
);
if (response.data && response.data.success) {
// Update the current meeting with only the necessary fields
this.currentMeeting = {
...this.newOrUpdatedMeeting,
groupId: this.currentMeeting?.groupId || "",
groupId: (this.currentMeeting?.groupId as number) || -1,
};
this.newOrUpdatedMeeting = null;
} else {
throw { response: response };
}
} catch (error) {
logConsoleAndDb('Error updating meeting: ' + errorStringForLog(error), true);
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.',
group: "alert",
type: "danger",
title: "Error",
text:
errorMessage ||
"Failed to update meeting. Try reloading or submitting again.",
},
5000
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',
group: "alert",
type: "danger",
title: "Error",
text: message,
},
5000
5000,
);
}
}
</script>
</script>