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

src/libs/endorserServer.ts

@@ -690,6 +690,7 @@ export function serverMessageForUser(error: any) {
 
 /**
  * Helpful for server errors, to get all the info -- including stuff skipped by toString & JSON.stringify
+ * It works with AxiosError, eg handling an error.response intelligently.
  *
  * @param error
  */

src/router/index.ts

@@ -180,9 +180,19 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("../views/OfferDetailsView.vue"),
   },
   {
-    path: '/onboard-meeting',
-    name: 'onboard-meeting',
-    component: () => import('../views/OnboardMeetingView.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-setup',
+    name: 'onboard-meeting-setup',
+    component: () => import('../views/OnboardMeetingSetupView.vue'),
   },
   {
     path: "/project/:id?",

src/views/ContactsView.vue

@@ -31,7 +31,7 @@
           <fa icon="envelope-open-text" class="fa-fw text-2xl" />
         </router-link>
         <router-link
-          :to="{ name: 'onboard-meeting' }"
+          :to="{ name: 'onboard-meeting-setup' }"
           class="flex items-center 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-1.5 py-1 mr-1 rounded-md"
         >
           <fa icon="chair" class="fa-fw text-2xl" />

src/views/HomeView.vue

@@ -960,7 +960,7 @@ export default class HomeView extends Vue {
       option2Text: "We are nearby with cameras",
       option3Text: "We will share some other way",
       onOption1: () => {
-        (this.$router as Router).push({ name: "onboarding-meeting" });
+        (this.$router as Router).push({ name: "onboard-meeting-list" });
       },
       onOption2: () => {
         (this.$router as Router).push({ name: "contact-qr" });

src/views/OnboardMeetingListView.vue

@@ -0,0 +1,197 @@
+<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>
+
+    <!-- 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>
+        <p class="text-sm text-gray-600">Group ID: {{ meeting.groupId }}</p>
+      </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
+          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 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 }, timeout?: number) => void;
+
+  meetings: Meeting[] = [];
+  isLoading = false;
+  showPasswordDialog = false;
+  password = '';
+  selectedMeeting: Meeting | null = null;
+  activeDid = '';
+  apiServer = '';
+  firstName = '';
+
+  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 {
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        this.apiServer + '/api/partner/groupsOnboarding',
+        { headers }
+      );
+      
+      if (response.data && response.data.data) {
+        this.meetings = response.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;
+  }
+
+  cancelPasswordDialog() {
+    this.password = '';
+    this.selectedMeeting = null;
+    this.showPasswordDialog = false;
+  }
+
+  async submitPassword() {
+    if (!this.selectedMeeting) {
+      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.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) || 'Failed to join meeting.',
+        },
+        5000
+      );
+    }
+  }
+}
+</script> 

src/views/OnboardMeetingMembersView.vue

@@ -0,0 +1,157 @@
+<template>
+  <QuickNav selected="Contacts" />
+  <TopMessage />
+
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+      Meeting Members
+    </h1>
+
+    <!-- Back Button -->
+    <button
+      @click="$router.back()"
+      class="mb-6 flex items-center text-blue-600 hover:text-blue-800"
+    >
+      <fa icon="arrow-left" class="mr-2" />
+      Back to Meetings
+    </button>
+
+    <!-- Loading State -->
+    <div v-if="isLoading" class="flex justify-center items-center py-8">
+      <fa icon="spinner" class="fa-spin-pulse" />
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="errorMessage">
+      <div class="text-center text-red-600 py-8">
+        {{ errorMessage }}
+      </div>
+      <div class="text-center">
+        For authorization, wait for your meeting organizer to approve you.
+      </div>
+    </div>
+
+    <!-- Members List -->
+    <div v-else class="space-y-4">
+      <div v-for="member in decryptedMembers" :key="member.memberId" 
+           class="p-4 bg-white rounded-lg shadow">
+        <h2 class="text-xl font-medium">{{ member.name }}</h2>
+        <p class="text-sm text-gray-600">DID: {{ member.did }}</p>
+      </div>
+
+      <p v-if="decryptedMembers.length === 0 && !decryptFailure" class="text-center text-gray-500 py-8">
+        No members found in this meeting
+      </p>
+      <p v-if="decryptFailure" class="text-center text-red-600 py-8">
+        That password failed. You may be in the wrong meeting. Go back and try again.
+      </p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-facing-decorator';
+import QuickNav from '@/components/QuickNav.vue';
+import TopMessage from '@/components/TopMessage.vue';
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from '@/db/index';
+import { errorStringForLog, getHeaders, serverMessageForUser } from '@/libs/endorserServer';
+import { decryptMessage } from '@/libs/crypto';
+
+interface Member {
+  memberId: number;
+  content: string;
+}
+
+interface DecryptedMember {
+  memberId: number;
+  name: string;
+  did: string;
+}
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class OnboardMeetingMembersView extends Vue {
+  $notify!: (notification: { group: string; type: string; title: string; text: string }, timeout?: number) => void;
+
+  activeDid = '';
+  apiServer = '';
+  decryptedMembers: DecryptedMember[] = [];
+  decryptFailure = false;
+  errorMessage = '';
+  isLoading = false;
+  members: Member[] = [];
+
+  get groupId(): string {
+    return this.$route.params.groupId as string;
+  }
+
+  get password(): string {
+    return this.$route.query.password as string;
+  }
+
+  async created() {
+    if (!this.groupId) {
+      this.errorMessage = 'The group info is missing. Go back and try again.';
+      return;
+    }
+    if (!this.password) {
+      this.errorMessage = 'The password is missing. Go back and try again.';
+      return;
+    }
+
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || '';
+    this.apiServer = settings.apiServer || '';
+    await this.fetchMembers();
+  }
+
+  async fetchMembers() {
+    this.isLoading = true;
+    this.errorMessage = '';
+    
+    try {
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        `${this.apiServer}/api/partner/groupOnboardMembers/`,
+        { headers }
+      );
+      
+      if (response.data && response.data.data) {
+        this.members = response.data.data;
+        await this.decryptMemberContents();
+      } else {
+        throw { response: response };
+      }
+    } catch (error) {
+      logConsoleAndDb('Error fetching members: ' + errorStringForLog(error), true);
+      this.errorMessage = serverMessageForUser(error) || 'Failed to fetch members.';
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  async decryptMemberContents() {
+    this.decryptedMembers = [];
+    
+    for (const member of this.members) {
+      try {
+        const decryptedContent = await decryptMessage(member.content, this.password);
+        const content = JSON.parse(decryptedContent);
+        
+        this.decryptedMembers.push({
+          memberId: member.memberId,
+          name: content.name,
+          did: content.did,
+        });
+      } catch (error) {
+        this.decryptFailure = true;
+      }
+    }
+  }
+}
+</script> 

src/views/OnboardMeetingView.vue → src/views/OnboardMeetingSetupView.vue

@@ -9,14 +9,33 @@
     </h1>
 
     <!-- Existing Meeting Section -->
-    <div v-if="existingMeeting" class="mt-8 p-4 border rounded-lg bg-white shadow">
+    <div v-if="!isLoading && currentMeeting != null && !isEditing" class="mt-8 p-4 border rounded-lg bg-white shadow">
       <h2 class="text-2xl mb-4">Current Meeting</h2>
       <div class="space-y-2">
-        <p><strong>Name:</strong> {{ existingMeeting.name }}</p>
-        <p><strong>Expires:</strong> {{ formatExpirationTime(existingMeeting.expiresAt) }}</p>
-        <p class="mt-4 text-sm text-gray-600">Share the the password with the people you want to onboard.</p>
+        <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-sm text-gray-600">Share the password with the people you want to onboard.</p>
+          <router-link
+            :to="`/onboard-meeting-members/${currentMeeting.groupId}?password=${encodeURIComponent(currentMeeting.password)}`"
+            class="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors duration-200"
+          >
+            Go to Meeting Members
+          </router-link>
+        </div>
+        <span v-else class="text-sm text-red-600">
+          The meeting password has been lost. Edit it, or delete and create a new meeting.
+        </span>
       </div>
-      <div class="flex justify-end mt-4">
+      <div class="flex justify-between mt-4 space-x-2">
+        <button
+          @click="startEditing"
+          class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-100 hover:bg-blue-200 transition-colors duration-200"
+          title="Edit Meeting"
+        >
+          <fa icon="pen" class="fa-fw text-blue-600" />
+          <span class="sr-only">Edit Meeting</span>
+        </button>
         <button
           @click="confirmDelete"
           class="flex items-center justify-center w-10 h-10 rounded-full bg-red-100 hover:bg-red-200 transition-colors duration-200"
@@ -52,15 +71,16 @@
       </div>
     </div>
 
-    <!-- Create New Meeting Form -->
-    <div v-if="!existingMeeting && !isLoading" class="mt-8">
-      <h2 class="text-2xl mb-4">Create New Meeting</h2>
-      <form @submit.prevent="createMeeting" class="space-y-4">
+    <!-- Create/Edit Meeting Form -->
+    <div v-if="!isLoading && newOrUpdatedMeeting != null" class="mt-8">
+      <h2 class="text-2xl mb-4">{{ isEditing ? 'Edit Meeting' : 'Create New 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="isEditing ? updateMeeting() : createMeeting()" 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="currentMeeting.name"
+            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"
@@ -72,7 +92,7 @@
           <label for="expirationTime" class="block text-sm font-medium text-gray-700">Meeting Expiration Time</label>
           <input
             id="expirationTime"
-            v-model="currentMeeting.expiresAt"
+            v-model="newOrUpdatedMeeting.expiresAt"
             type="datetime-local"
             required
             :min="minDateTime"
@@ -84,7 +104,7 @@
           <label for="password" class="block text-sm font-medium text-gray-700">Meeting Password</label>
           <input
             id="password"
-            v-model="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"
@@ -96,7 +116,7 @@
           <label for="userName" class="block text-sm font-medium text-gray-700">Your Name</label>
           <input
             id="userName"
-            v-model="currentMeeting.userFullName"
+            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"
@@ -109,10 +129,19 @@
           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 ? 'Creating...' : 'Create Meeting' }}
+          {{ isLoading ? (isEditing ? 'Updating...' : 'Creating...') : (isEditing ? 'Update Meeting' : 'Create Meeting') }}
+        </button>
+        <button
+          v-if="isEditing"
+          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>
+
     <div v-else-if="isLoading">
       <div class="flex justify-center items-center h-full">
         <fa icon="spinner" class="fa-spin-pulse" />
@@ -125,18 +154,23 @@
 import { Component, Vue } from 'vue-facing-decorator';
 import QuickNav from '@/components/QuickNav.vue';
 import TopMessage from '@/components/TopMessage.vue';
-import { retrieveSettingsForActiveAccount } from '@/db/index';
-import { getHeaders, serverMessageForUser } from '@/libs/endorserServer';
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from '@/db/index';
+import { errorStringForLog, getHeaders, serverMessageForUser } from '@/libs/endorserServer';
 import { encryptMessage } from '@/libs/crypto';
 
-interface Meeting {
-  groupId?: string;
-  name: string;
-  expiresAt: string;
+interface ServerMeeting {
+  groupId: string;   // 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 NewMeeting extends Meeting {
+interface MeetingSetupInfo {
+  name: string;
+  expiresAt: string;
   userFullName: string;
+  password: string;
 }
 
 @Component({
@@ -148,19 +182,15 @@ interface NewMeeting extends Meeting {
 export default class OnboardMeetingView extends Vue {
   $notify!: (notification: { group: string; type: string; title: string; text: string }, timeout?: number) => void;
 
-  existingMeeting: Meeting | null = null;
-  currentMeeting: NewMeeting = {
-    name: '',
-    expiresAt: this.getDefaultExpirationTime(),
-    userFullName: '',
-  };
-  password = '';
-  isLoading = false;
+  currentMeeting: ServerMeeting | null = null;
+  newOrUpdatedMeeting: MeetingSetupInfo | null = null;
   activeDid = '';
   apiServer = '';
   isDeleting = false;
+  isEditing = false;
+  isLoading = true;
   showDeleteConfirm = false;
-
+  fullName = '';
   get minDateTime() {
     const now = new Date();
     now.setMinutes(now.getMinutes() + 5); // Set minimum 5 minutes in the future
@@ -171,9 +201,10 @@ export default class OnboardMeetingView extends Vue {
     const settings = await retrieveSettingsForActiveAccount();
     this.activeDid = settings.activeDid || '';
     this.apiServer = settings.apiServer || '';
-    this.currentMeeting.userFullName = settings.firstName || '';
+    this.fullName = settings.firstName || '';
     
-    await this.fetchExistingMeeting();
+    await this.fetchCurrentMeeting();
+    this.isLoading = false;
   }
 
   getDefaultExpirationTime(): string {
@@ -198,7 +229,17 @@ export default class OnboardMeetingView extends Vue {
     return `${year}-${month}-${day}T${hours}:${minutes}`;
   }
 
-  async fetchExistingMeeting() {
+  blankMeeting(): MeetingSetupInfo {
+    return {
+      // no groupId yet
+      name: '',
+      expiresAt: this.getDefaultExpirationTime(),
+      userFullName: this.fullName,
+      password: this.currentMeeting?.password || "",
+    };
+  }
+
+  async fetchCurrentMeeting() {
     try {
       const headers = await getHeaders(this.activeDid);
       const response = await this.axios.get(
@@ -206,19 +247,21 @@ export default class OnboardMeetingView extends Vue {
         { headers }
       );
       
-      if (response.data && response.data.data) {
-        this.existingMeeting = response.data.data;
+      if (response?.data?.data) {
+        console.log('Response data', response.data.data);
+        this.currentMeeting = {
+          ...response.data.data,
+          userFullName: this.fullName,
+          password: this.currentMeeting?.password || "",
+        };
+        console.log('Current meeting', this.currentMeeting);
+      } else {
+        // no meeting found
+        this.newOrUpdatedMeeting = this.blankMeeting();
       }
     } catch (error) {
-      console.log('Error fetching existing meeting:', error);
-      this.$notify(
-        {
-          group: 'alert',
-          type: 'danger',
-          title: 'Error',
-          text: serverMessageForUser(error) || 'Failed to fetch existing meeting.',
-        },
-      );
+      // no meeting found
+      this.newOrUpdatedMeeting = this.blankMeeting();
     }
   }
 
@@ -226,8 +269,12 @@ export default class OnboardMeetingView extends Vue {
     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.currentMeeting.expiresAt);
+      const localExpiresAt = new Date(this.newOrUpdatedMeeting.expiresAt);
       const now = new Date();
       if (localExpiresAt <= now) {
         this.$notify(
@@ -241,19 +288,44 @@ export default class OnboardMeetingView extends Vue {
         );
         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.currentMeeting.userFullName,
+        name: this.newOrUpdatedMeeting.userFullName,
         did: this.activeDid,
       };
-      const encryptedContent = await encryptMessage(JSON.stringify(content), this.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',
         {
-          name: this.currentMeeting.name,
+          name: this.newOrUpdatedMeeting.name,
           expiresAt: localExpiresAt.toISOString(),
           content: encryptedContent,
         },
@@ -261,11 +333,11 @@ export default class OnboardMeetingView extends Vue {
       );
 
       if (response.data && response.data.success) {
-        this.existingMeeting = {
-          groupId: response.data.groupId,
-          name: this.currentMeeting.name,
-          expiresAt: localExpiresAt.toISOString(),
+        this.currentMeeting = {
+          ...this.newOrUpdatedMeeting,
+          groupId: response.data.success.groupId,
         };
+        this.newOrUpdatedMeeting = null;
         this.$notify(
           {
             group: 'alert',
@@ -276,10 +348,10 @@ export default class OnboardMeetingView extends Vue {
           3000
         );
       } else {
-        throw new Error('Failed to create meeting due to unexpected response data: ' + JSON.stringify(response.data));
+        throw { response: response };
       }
     } catch (error) {
-      console.error('Error creating meeting:', error);
+      logConsoleAndDb('Error creating meeting: ' + errorStringForLog(error), true);
       const errorMessage = serverMessageForUser(error);
       this.$notify(
         {
@@ -324,7 +396,8 @@ export default class OnboardMeetingView extends Vue {
         { headers }
       );
 
-      this.existingMeeting = null;
+      this.currentMeeting = null;
+      this.newOrUpdatedMeeting = this.blankMeeting();
       this.showDeleteConfirm = false;
       
       this.$notify(
@@ -351,5 +424,123 @@ export default class OnboardMeetingView extends Vue {
       this.isDeleting = false;
     }
   }
+
+  startEditing() {
+    this.isEditing = true;
+    // Populate form with existing meeting data
+    if (this.currentMeeting) {
+      console.log('Current meeting', 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() {
+    this.isEditing = false;
+    // 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) {
+        console.log('Updated meeting', response.data);
+        // Update the current meeting with only the necessary fields
+        this.currentMeeting = {
+          ...this.newOrUpdatedMeeting,
+          groupId: this.currentMeeting?.groupId || "",
+        };
+        this.newOrUpdatedMeeting = null;
+        console.log('Updated meeting now', this.currentMeeting);
+        this.isEditing = false;
+      } 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;
+    }
+  }
 }
 </script>