From 9a6b2fcf0dfda27085cfc5645885e640bfb5d4e4 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Tue, 11 Feb 2025 08:15:01 -0700
Subject: [PATCH] for meeting invitees, create their ID and allow them to set a
 name

---
 src/components/MembersList.vue          |  81 ++++++++----
 src/components/UserNameDialog.vue       |  19 ++-
 src/views/OnboardMeetingMembersView.vue | 158 ++++++++++++++++++++++--
 src/views/OnboardMeetingSetupView.vue   |   9 +-
 4 files changed, 222 insertions(+), 45 deletions(-)

diff --git a/src/components/MembersList.vue b/src/components/MembersList.vue
index b7673add..b1b93fd9 100644
--- a/src/components/MembersList.vue
+++ b/src/components/MembersList.vue
@@ -1,40 +1,41 @@
 <template>
   <div class="space-y-4">
     <!-- Loading State -->
-    <div v-if="isLoading" class="flex justify-center items-center py-8">
+    <div
+      v-if="isLoading"
+      class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
+    >
       <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>
+      <div class="text-center text-red-600 py-4">
+        {{ decryptionErrorMessage() }}
+      </div>
 
-    <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.
+        You are not currently admitted by the organizer.
+      </div>
+      <div v-if="!firstName" class="py-4 text-red-600">
+        Your name is not set, so others may not recognize you. Reload this page
+        to set it.
       </div>
 
       <div>
         <span
-          v-if="showOrganizerTools && isOrganizer"
+          v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
           class="inline-flex items-center flex-wrap"
         >
           <span class="inline-flex items-center">
-            Use
+            &bull; Click
             <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"
             >
@@ -45,8 +46,11 @@
         </span>
       </div>
       <div>
-        <span class="inline-flex items-center">
-          Use
+        <span
+          v-if="membersToShow().length > 0"
+          class="inline-flex items-center"
+        >
+          &bull; Click
           <span
             class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
           >
@@ -56,7 +60,8 @@
         </span>
       </div>
 
-      <div v-if="members.length > 0" class="flex justify-center">
+      <div class="flex justify-center">
+        <!-- always have at least one refresh button even without members in case the organizer changes the password -->
         <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"
@@ -68,7 +73,7 @@
       <div
         v-for="member in membersToShow()"
         :key="member.member.memberId"
-        class="p-4 bg-gray-50 rounded-lg"
+        class="mt-2 p-4 bg-gray-50 rounded-lg"
       >
         <div class="flex items-center justify-between">
           <div class="flex items-center">
@@ -131,7 +136,7 @@
           {{ member.did }}
         </p>
       </div>
-      <div v-if="members.length > 0" class="flex justify-center mt-4">
+      <div v-if="membersToShow().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"
@@ -187,16 +192,15 @@ export default class MembersList extends Vue {
   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;
+  firstName = "";
+  isLoading = true;
   isOrganizer = false;
   members: Member[] = [];
+  missingPassword = false;
+  missingMyself = false;
   activeDid = "";
   apiServer = "";
   contacts: Array<Contact> = [];
@@ -205,13 +209,14 @@ export default class MembersList extends Vue {
     const settings = await retrieveSettingsForActiveAccount();
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
+    this.firstName = settings.firstName || "";
     await this.fetchMembers();
     await this.loadContacts();
   }
 
   async fetchMembers() {
-    this.isLoading = true;
     try {
+      this.isLoading = true;
       const headers = await getHeaders(this.activeDid);
       const response = await this.axios.get(
         `${this.apiServer}/api/partner/groupOnboardMembers`,
@@ -274,6 +279,28 @@ export default class MembersList extends Vue {
     this.missingMyself = !foundMyself;
   }
 
+  decryptionErrorMessage(): string {
+    if (this.isOrganizer) {
+      if (this.decryptedMembers.length < this.members.length) {
+        return "Some members have data that cannot be decrypted with that password.";
+      } else {
+        // the lists must be equal
+        return "";
+      }
+    } else {
+      // non-organizers should only see problems if the first (organizer) member is not decrypted
+      if (
+        this.decryptedMembers.length === 0 ||
+        this.decryptedMembers[0].member.memberId !== this.members[0].memberId
+      ) {
+        return "Your password is not the same as the organizer. Reload or have them check their password.";
+      } else {
+        // the first (organizer) member was decrypted OK
+        return "";
+      }
+    }
+  }
+
   membersToShow(): DecryptedMember[] {
     if (this.isOrganizer) {
       if (this.showOrganizerTools) {
@@ -356,7 +383,7 @@ export default class MembersList extends Vue {
                 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?",
+                text: "Are you sure you want to proceed with admission? If they are not a contact, you will not know their name after this meeting.",
                 yesText: "Continue",
                 onYes: async () => {
                   await this.toggleAdmission(decrMember);
diff --git a/src/components/UserNameDialog.vue b/src/components/UserNameDialog.vue
index f3a886d4..32ad637a 100644
--- a/src/components/UserNameDialog.vue
+++ b/src/components/UserNameDialog.vue
@@ -4,8 +4,7 @@
     <div class="dialog">
       <h1 class="text-xl font-bold text-center mb-4">Set Your Name</h1>
 
-      This is not sent to servers. It is only shared with people when you send
-      it to them.
+      {{ sharingExplanation }}
       <input
         type="text"
         placeholder="Name"
@@ -36,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-facing-decorator";
+import { Vue, Component, Prop } from "vue-facing-decorator";
 
 import { NotificationIface } from "@/constants/app";
 import { db, retrieveSettingsForActiveAccount } from "@/db/index";
@@ -46,14 +45,21 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 export default class UserNameDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  callback: (name: string) => void = () => {};
+  @Prop({
+    default:
+      "This is not sent to servers. It is only shared with people when you send it to them.",
+  })
+  sharingExplanation!: string;
+  @Prop({ default: false }) callbackOnCancel!: boolean;
+
+  callback: (name?: string) => void = () => {};
   givenName = "";
   visible = false;
 
   /**
    * @param aCallback - callback function for name, which may be ""
    */
-  async open(aCallback?: (name: string) => void) {
+  async open(aCallback?: (name?: string) => void) {
     this.callback = aCallback || this.callback;
     const settings = await retrieveSettingsForActiveAccount();
     this.givenName = settings.firstName || "";
@@ -70,6 +76,9 @@ export default class UserNameDialog extends Vue {
 
   onClickCancel() {
     this.visible = false;
+    if (this.callbackOnCancel) {
+      this.callback();
+    }
   }
 }
 </script>
diff --git a/src/views/OnboardMeetingMembersView.vue b/src/views/OnboardMeetingMembersView.vue
index 6618fc35..9bb9219a 100644
--- a/src/views/OnboardMeetingMembersView.vue
+++ b/src/views/OnboardMeetingMembersView.vue
@@ -8,8 +8,16 @@
       Meeting Members
     </h1>
 
+    <!-- Loading Animation -->
+    <div
+      class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
+      v-if="isLoading"
+    >
+      <fa icon="spinner" class="fa-spin-pulse"></fa>
+    </div>
+
     <!-- Error State -->
-    <div v-if="errorMessage">
+    <div v-else-if="errorMessage">
       <div class="text-center text-red-600 py-8">
         {{ errorMessage }}
       </div>
@@ -19,13 +27,14 @@
     </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"
-    />
+    <MembersList v-else :password="password" @error="handleError" />
   </section>
+
+  <UserNameDialog
+    ref="userNameDialog"
+    :callback-on-cancel="true"
+    sharing-explanation="This is encrypted and shared only with people in this meeting."
+  />
 </template>
 
 <script lang="ts">
@@ -35,16 +44,35 @@ import { RouteLocation } from "vue-router";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import MembersList from "@/components/MembersList.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import { encryptMessage } from "@/libs/crypto";
+import {
+  errorStringForLog,
+  getHeaders,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
+import { generateSaveAndActivateIdentity } from "@/libs/util";
 
 @Component({
   components: {
     QuickNav,
     TopMessage,
     MembersList,
+    UserNameDialog,
   },
 })
 export default class OnboardMeetingMembersView extends Vue {
+  activeDid = "";
+  apiServer = "";
   errorMessage = "";
+  firstName = "";
+  isRegistered = false;
+  isLoading = true;
+
+  $refs!: {
+    userNameDialog: InstanceType<typeof UserNameDialog>;
+  };
 
   get groupId(): string {
     return (this.$route as RouteLocation).params.groupId as string;
@@ -63,6 +91,122 @@ export default class OnboardMeetingMembersView extends Vue {
       this.errorMessage = "The password is missing. Go back and try again.";
       return;
     }
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    this.firstName = settings.firstName || "";
+    this.isRegistered = settings.isRegistered || false;
+    try {
+      if (!this.activeDid) {
+        this.activeDid = await generateSaveAndActivateIdentity();
+        this.isRegistered = false;
+      }
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        `${this.apiServer}/api/partner/groupOnboardMember`,
+        { headers },
+      );
+      const member = response.data?.data;
+      if (!member) {
+        if (!this.firstName) {
+          this.$refs.userNameDialog.open(this.addMemberToMeeting);
+          // addMemberToMeeting sets isLoading to false
+        } else {
+          await this.addMemberToMeeting(this.firstName);
+          // addMemberToMeeting sets isLoading to false
+        }
+      } else if (String(member.groupId) !== this.groupId) {
+        this.errorMessage =
+          "You are already in a different meeting. Reload or go back and try again.";
+        this.isLoading = false;
+      } else {
+        // must be already in the right meeting
+        if (!this.firstName) {
+          this.$refs.userNameDialog.open(this.updateMemberInMeeting);
+          // updateMemberInMeeting sets isLoading to false
+        } else {
+          await this.updateMemberInMeeting(this.firstName);
+          // updateMemberInMeeting sets isLoading to false
+        }
+      }
+    } catch (error) {
+      this.errorMessage =
+        serverMessageForUser(error) ||
+        "There was an error checking for that meeting. Reload or go back and try again.";
+      logConsoleAndDb(
+        "Error checking meeting: " + errorStringForLog(error),
+        true,
+      );
+      this.isLoading = false;
+    }
+  }
+
+  async addMemberToMeeting(name?: string) {
+    if (name != null) {
+      this.firstName = name;
+    }
+
+    const memberData = {
+      name: this.firstName,
+      did: this.activeDid,
+      isRegistered: this.isRegistered,
+    };
+    const memberDataString = JSON.stringify(memberData);
+    const encryptedMemberData = await encryptMessage(
+      memberDataString,
+      this.password,
+    );
+
+    const headers = await getHeaders(this.activeDid);
+    try {
+      await this.axios.post(
+        `${this.apiServer}/api/partner/groupOnboardMember`,
+        { groupId: this.groupId, content: encryptedMemberData },
+        { headers },
+      );
+    } catch (error) {
+      logConsoleAndDb(
+        "Error adding member to meeting: " + errorStringForLog(error),
+        true,
+      );
+      this.errorMessage =
+        serverMessageForUser(error) ||
+        "You're not in a meeting and couldn't be added to this one. Reload or go back and try again.";
+    }
+    this.isLoading = false;
+  }
+
+  async updateMemberInMeeting(name?: string) {
+    if (name != null) {
+      this.firstName = name;
+    }
+    const memberData = {
+      name: this.firstName,
+      did: this.activeDid,
+      isRegistered: this.isRegistered,
+    };
+    const memberDataString = JSON.stringify(memberData);
+    const encryptedMemberData = await encryptMessage(
+      memberDataString,
+      this.password,
+    );
+    const headers = await getHeaders(this.activeDid);
+    try {
+      await this.axios.put(
+        `${this.apiServer}/api/partner/groupOnboardMember`,
+        { content: encryptedMemberData },
+        { headers },
+      );
+    } catch (error) {
+      logConsoleAndDb(
+        "Error updating member in meeting: " + errorStringForLog(error),
+        true,
+      );
+      this.errorMessage =
+        serverMessageForUser(error) ||
+        "There was an error updating your name. Reload or go back and try again.";
+    }
+    this.isLoading = false;
   }
 
   handleError(message: string) {
diff --git a/src/views/OnboardMeetingSetupView.vue b/src/views/OnboardMeetingSetupView.vue
index a81c7605..dd1c830b 100644
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/src/views/OnboardMeetingSetupView.vue
@@ -192,23 +192,23 @@
 
     <!-- Members Section -->
     <div
-      v-if="!isLoading && currentMeeting != null"
+      v-if="!isLoading && currentMeeting != null && !!currentMeeting.password"
       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
+        v-if="!!currentMeeting.password"
         :to="onboardMeetingMembersLink()"
         class="inline-block text-blue-600"
         target="_blank"
       >
-        Open shortcut page for members <fa icon="external-link" />
+        &bull; 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"
@@ -264,9 +264,6 @@ export default class OnboardMeetingView extends Vue {
     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 = "";