prompt organizer about adding a contact if not in list, and other sanity checks

src/components/MembersList.vue

@@ -18,8 +18,8 @@
     </p>
 
     <div v-else class="space-y-4">
-      <div v-if="missingMyself" class="py-4">
+      <div v-if="missingMyself" class="py-4 text-red-600">
-        You are not yet admitted. The organizer will admit you.
+        You are not admitted. The organizer will admit you.
       </div>
 
       <div>
@@ -74,7 +74,7 @@
           <div class="flex items-center">
             <h3 class="text-lg font-medium">{{ member.name }}</h3>
             <div
-              v-if="!isContactAlready(member.did) && member.did !== activeDid"
+              v-if="!getContactFor(member.did) && member.did !== activeDid"
               class="flex justify-end"
             >
               <button
@@ -88,7 +88,9 @@
             <button
               v-if="member.did !== activeDid"
               @click="
-                informAboutAddingContact(isContactAlready(member.did))
+                informAboutAddingContact(
+                  getContactFor(member.did) !== undefined,
+                )
               "
               class="ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
               title="Contact info"
@@ -104,7 +106,7 @@
               class="flex items-center"
             >
               <button
-                @click="toggleAdmission(member)"
+                @click="checkWhetherContactBeforeAdmitting(member)"
                 class="mr-2 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
                 :title="
                   member.member.admitted ? 'Remove member' : 'Admit member'
@@ -163,6 +165,7 @@ import {
 import { decryptMessage } from "@/libs/crypto";
 import { Contact } from "@/db/tables/contacts";
 import * as libsUtil from "@/libs/util";
+import { NotificationIface } from "@/constants/app";
 
 interface Member {
   admitted: boolean;
@@ -179,10 +182,7 @@ interface DecryptedMember {
 
 @Component
 export default class MembersList extends Vue {
-  $notify!: (
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
-    notification: { group: string; type: string; title: string; text: string },
-    timeout?: number,
-  ) => void;
 
   libsUtil = libsUtil;
 
@@ -299,8 +299,8 @@ export default class MembersList extends Vue {
     );
   }
 
-  informAboutAddingContact(isContactAlready: boolean) {
+  informAboutAddingContact(contactImportedAlready: boolean) {
-    if (isContactAlready) {
+    if (contactImportedAlready) {
       this.$notify(
         {
           group: "alert",
@@ -327,8 +327,51 @@ export default class MembersList extends Vue {
     this.contacts = await db.contacts.toArray();
   }
 
-  isContactAlready(did: string): boolean {
+  getContactFor(did: string): Contact | undefined {
-    return this.contacts.some((contact) => contact.did === did);
+    return this.contacts.find((contact) => contact.did === did);
+  }
+
+  checkWhetherContactBeforeAdmitting(member: DecryptedMember) {
+    const contact = this.getContactFor(member.did);
+    if (!member.member.admitted && !contact) {
+      // If not a contact, show confirmation dialog
+      this.$notify({
+        group: "modal",
+        type: "confirm",
+        title: "Add as Contact First?",
+        text: "This person is not in your contacts. Would you like to add them as a contact first?",
+        yesText: "Add as Contact",
+        noText: "Skip Adding Contact",
+        onYes: async () => {
+          await this.addAsContact(member);
+          // After adding as contact, proceed with admission
+          await this.toggleAdmission(member);
+        },
+        onNo: async () => {
+          // If they choose not to add as contact, show second confirmation
+          this.$notify({
+            group: "modal",
+            type: "confirm",
+            title: "Continue Without Adding?",
+            text: "Are you sure you want to proceed with admission even though they are not a contact?",
+            yesText: "Continue",
+            onYes: async () => {
+              await this.toggleAdmission(member);
+            },
+            onCancel: async () => {
+              // Do nothing, effectively canceling the operation
+            },
+          },
+          -1,
+        );
+      },
+    },
+    -1,
+  );
+    } else {
+      // If already a contact, proceed directly with admission
+      this.toggleAdmission(member);
+    }
   }
 
   async toggleAdmission(member: DecryptedMember) {
@@ -342,21 +385,25 @@ export default class MembersList extends Vue {
       // Update local state
       member.member.admitted = !member.member.admitted;
 
+      const oldContact = this.getContactFor(member.did);
       // if admitted, now register that user if they are not registered
-      if (member.member.admitted && !member.member.registered) {
+      if (member.member.admitted && !oldContact?.registered) {
-        const contact = {
+        const contactOldOrNew: Contact = oldContact || {
           did: member.did,
           name: member.name,
-        };
+        }
         const result = await register(
           this.activeDid,
           this.apiServer,
           this.axios,
-          contact,
+          contactOldOrNew,
         );
         if (result.success) {
           member.member.registered = true;
-          await db.contacts.update(member.did, { registered: true });
+          if (oldContact) {
+            await db.contacts.update(member.did, { registered: true });
+            oldContact.registered = true;
+          }
           this.$notify(
             {
               group: "alert",
@@ -402,7 +449,7 @@ export default class MembersList extends Vue {
       };
 
       await db.contacts.add(newContact);
-      await this.loadContacts(); // Refresh contacts list
+      this.contacts.push(newContact);
 
       this.$notify(
         {