split out group-meeting member list into a separate component, and fix some edit/create mode titles

src/views/OnboardMeetingSetupView.vue

@@ -9,7 +9,10 @@
     </h1>
 
     <!-- Existing Meeting Section -->
-    <div v-if="!isLoading && currentMeeting != null && !isEditingOrCreating()" class="mt-8 p-4 border rounded-lg bg-white shadow">
+    <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>
@@ -19,7 +22,7 @@
             title="Edit Meeting"
           >
             <fa icon="pen" class="fa-fw" />
-            <span class="sr-only">Edit Meeting</span>
+            <span class="sr-only">{{ isInCreateMode() ? 'Create Meeting' : 'Edit Meeting' }}</span>
           </button>
         </div>
         <button
@@ -43,17 +46,10 @@
         <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>
-
-        <router-link
-          :to="`/onboard-meeting-members/${currentMeeting.groupId}?password=${encodeURIComponent(currentMeeting.password || '')}`"
-          class="mt-4 inline-block px-4 py-2 text-blue-600"
-          target="_blank"
-        >
-          Open page that meeting members see
-        </router-link>
       </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">
@@ -77,10 +73,13 @@
     </div>
 
     <!-- Create/Edit Meeting Form -->
-    <div v-if="!isLoading && newOrUpdatedMeeting != null" class="mt-8">
-      <h2 class="text-2xl mb-4">{{ isEditingOrCreating() ? 'Edit Meeting' : 'Create New Meeting' }}</h2>
+    <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 whether I like it or not; gotta see if the browser benefits extend to the native app. -->
-      <form @submit.prevent="isEditingOrCreating() ? updateMeeting() : createMeeting()" class="space-y-4">
+      <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
@@ -134,10 +133,10 @@
           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 ? (isEditingOrCreating() ? 'Updating...' : 'Creating...') : (isEditingOrCreating() ? 'Update Meeting' : 'Create Meeting') }}
+          {{ isLoading ? (isInCreateMode() ? 'Creating...' : 'Updating...' ) : (isInCreateMode() ? 'Create Meeting' : 'Update Meeting') }}
         </button>
         <button
-          v-if="isEditingOrCreating()"
+          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"
@@ -147,6 +146,27 @@
       </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="`/onboard-meeting-members/${currentMeeting.groupId}?password=${encodeURIComponent(currentMeeting.password || '')}`"
+        class="inline-block px-4 text-blue-600"
+        target="_blank"
+      >
+        Open page that meeting members see
+      </router-link>
+
+      <MembersList
+        :password="currentMeeting.password || ''"
+        decrypt-failure-message="Unable to decrypt some member information. Please check your password."
+        @error="handleMembersError"
+        class="mt-8"
+      />
+    </div>
+
     <div v-else-if="isLoading">
       <div class="flex justify-center items-center h-full">
         <fa icon="spinner" class="fa-spin-pulse" />
@@ -159,6 +179,7 @@
 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';
@@ -182,6 +203,7 @@ interface MeetingSetupInfo {
   components: {
     QuickNav,
     TopMessage,
+    MembersList,
   },
 })
 export default class OnboardMeetingView extends Vue {
@@ -211,7 +233,11 @@ export default class OnboardMeetingView extends Vue {
     this.isLoading = false;
   }
 
-  isEditingOrCreating(): boolean {
+  isInCreateMode(): boolean {
+    return this.newOrUpdatedMeeting != null && this.currentMeeting == null;
+  }
+
+  isInEditOrCreateMode(): boolean {
     return this.newOrUpdatedMeeting != null;
   }
 
@@ -256,13 +282,11 @@ export default class OnboardMeetingView extends Vue {
       );
       
       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();
@@ -345,6 +369,7 @@ export default class OnboardMeetingView extends Vue {
           ...this.newOrUpdatedMeeting,
           groupId: response.data.success.groupId,
         };
+
         this.newOrUpdatedMeeting = null;
         this.$notify(
           {
@@ -436,7 +461,6 @@ export default class OnboardMeetingView extends Vue {
   startEditing() {
     // 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,
@@ -520,14 +544,12 @@ export default class OnboardMeetingView extends Vue {
       );
 
       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);
       } else {
         throw { response: response };
       }
@@ -547,5 +569,17 @@ export default class OnboardMeetingView extends Vue {
       this.isLoading = false;
     }
   }
+
+  handleMembersError(message: string) {
+    this.$notify(
+      {
+        group: 'alert',
+        type: 'danger',
+        title: 'Error',
+        text: message,
+      },
+      5000
+    );
+  }
 }
 </script>