replace many of the javascript "confirm" calls with the nicer UX version

src/App.vue

@@ -129,7 +129,10 @@
     </div>
   </NotificationGroup>
 
-  <!-- These are general-purpose messages - except there are some for turning app notifications on and off. -->
+  <!--
+    This "group" of "modal" is the prompt for an answer.
+    Set "type" as follows: "confirm" for yes/no, and "notification" ones: "-permission", "-mute", "-off"
+  -->
   <NotificationGroup group="modal">
     <div class="fixed z-[100] top-0 inset-x-0 w-full">
       <Notification
@@ -158,9 +161,8 @@
               class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
             >
               <div class="w-full px-6 py-6 text-slate-900 text-center">
-                <p class="text-lg mb-4">
+                <span class="font-semibold text-lg">{{ notification.title }}</span>
-                  {{ notification.title }}
+                <p class="text-sm mb-2">{{ notification.text }}</p>
-                </p>
 
                 <button
                   v-if="notification.onYes"
@@ -173,6 +175,17 @@
                   Yes
                 </button>
 
+                <button
+                  v-if="notification.onNo"
+                  @click="
+                    notification.onNo();
+                    close(notification.id);
+                  "
+                  class="block w-full text-center text-md font-bold uppercase bg-yellow-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  No
+                </button>
+
                 <button
                   @click="close(notification.id)"
                   class="block w-full text-center text-md font-bold uppercase bg-slate-600 text-white px-2 py-2 rounded-md"

src/constants/app.ts

@@ -39,5 +39,6 @@ export interface NotificationIface {
   type: string; // "toast" | "info" | "success" | "warning" | "danger"
   title: string;
   text: string;
+  onNo?: () => Promise<void>;
   onYes?: () => Promise<void>;
 }

src/views/ContactsView.vue

@@ -139,7 +139,7 @@
               <button
                 v-if="contact.seesMe"
                 class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
-                @click="setVisibility(contact, false, true)"
+                @click="promptSetVisibility(contact, false)"
                 title="They can see you"
               >
                 <fa icon="eye" class="fa-fw" />
@@ -147,7 +147,7 @@
               <button
                 v-else
                 class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
-                @click="setVisibility(contact, true, true)"
+                @click="promptSetVisibility(contact, true)"
                 title="They cannot see you"
               >
                 <fa icon="eye-slash" class="fa-fw" />
@@ -161,7 +161,7 @@
                 <fa icon="rotate" class="fa-fw" />
               </button>
               <button
-                @click="register(contact)"
+                @click="promptRegister(contact)"
                 class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-6 px-2 py-1.5 rounded-md"
                 v-if="activeDid"
                 title="Registration"
@@ -176,7 +176,7 @@
             </div>
 
             <button
-              @click="deleteContact(contact)"
+              @click="promptDeleteContact(contact)"
               class="text-sm uppercase bg-gradient-to-b from-rose-500 to-rose-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-6 px-2 py-1.5 rounded-md"
               title="Delete"
             >
@@ -189,7 +189,7 @@
             >
               <button
                 class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-l-md"
-                @click="showGiftedDialog(activeDid, contact.did)"
+                @click="promptShowGiftedDialog(activeDid, contact.did)"
                 :title="givenByMeDescriptions[contact.did] || ''"
               >
                 To:
@@ -210,7 +210,7 @@
 
               <button
                 class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
-                @click="showGiftedDialog(contact.did, this.activeDid)"
+                @click="promptShowGiftedDialog(contact.did, this.activeDid)"
                 :title="givenToMeDescriptions[contact.did] || ''"
               >
                 From:
@@ -781,35 +781,56 @@ export default class ContactsView extends Vue {
       });
   }
 
-  async deleteContact(contact: Contact) {
+  // prompt with confirmation if they want to delete a contact
-    if (
+  promptDeleteContact(contact: Contact) {
-      confirm(
+    this.$notify(
-        "You should first make sure that your activity is no longer visible to them." +
+      {
-          " Note that this only deletes them from your contacts on this device." +
+        group: "modal",
-          " \n\nAre you sure you want to remove " +
+        type: "confirm",
+        title: "Delete",
+        text:
+          "Are you sure you want to remove " +
           this.nameForDid(this.contacts, contact.did) +
           " with DID " +
           contact.did +
           " from your contact list?",
-      )
+        onYes: async () => {
-    ) {
+          await this.deleteContact(contact);
+        },
+      },
+      -1,
+    );
+  }
+
+  async deleteContact(contact: Contact) {
     await db.open();
     await db.contacts.delete(contact.did);
     this.contacts = R.without([contact], this.contacts);
   }
-  }
 
-  async register(contact: Contact) {
+  // prompt to register a new contact
-    if (
+  async promptRegister(contact: Contact) {
-      confirm(
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Register",
+        text:
           "Are you sure you want to register " +
           this.nameForDid(this.contacts, contact.did) +
           (contact.registered
             ? " -- especially since they are already marked as registered"
             : "") +
           "?",
-      )
+        onYes: async () => {
-    ) {
+          await this.register(contact);
+        },
+      },
+      -1,
+    );
+  }
+
+  async register(contact: Contact) {
     this.$notify(
       {
         group: "alert",
@@ -915,6 +936,23 @@ export default class ContactsView extends Vue {
       }
     }
   }
+
+  async promptSetVisibility(contact: Contact, visibility: boolean) {
+    const visibilityPrompt = visibility
+      ? "Are you sure you want to make your activity visible to them?"
+      : "Are you sure you want to hide all your activity from them?";
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Set Visibility",
+        text: visibilityPrompt,
+        onYes: async () => {
+          await this.setVisibility(contact, visibility, true);
+        },
+      },
+      -1,
+    );
   }
 
   async setVisibility(
@@ -922,12 +960,6 @@ export default class ContactsView extends Vue {
     visibility: boolean,
     showSuccessAlert: boolean,
   ) {
-    const visibilityPrompt =
-      showSuccessAlert &&
-      (visibility
-        ? "Are you sure you want to make your activity visible to them?"
-        : "Are you sure you want to hide all your activity from them?");
-    if (!visibilityPrompt || confirm(visibilityPrompt)) {
     const url =
       this.apiServer +
       "/api/report/" +
@@ -987,7 +1019,6 @@ export default class ContactsView extends Vue {
       );
     }
   }
-  }
 
   async checkVisibility(contact: Contact) {
     const url =
@@ -1058,16 +1089,15 @@ export default class ContactsView extends Vue {
     );
   }
 
-  private showGiftedDialog(giverDid: string, recipientDid: string) {
+  promptShowGiftedDialog(giverDid: string, recipientDid: string) {
-    // if they have unconfirmed amounts, ask to confirm those first
+    // if they have unconfirmed amounts, ask to confirm those
     if (
-      recipientDid == this.activeDid &&
+      recipientDid === this.activeDid &&
       this.givenToMeUnconfirmed[giverDid] > 0
     ) {
       const isAre = this.givenToMeUnconfirmed[giverDid] == 1 ? "is" : "are";
       const hours = this.givenToMeUnconfirmed[giverDid] == 1 ? "hour" : "hours";
-      if (
+      const message =
-        confirm(
         "There " +
         isAre +
         " " +
@@ -1075,17 +1105,31 @@ export default class ContactsView extends Vue {
         " unconfirmed " +
         hours +
         " from them." +
-            " Would you like to confirm some of those hours?",
+        " Would you like to confirm some of those hours?";
-        )
+      this.$notify(
-      ) {
+        {
+          group: "modal",
+          type: "confirm",
+          title: "Delete",
+          text: message,
+          onNo: async () => {
+            this.showGiftedDialog(giverDid, recipientDid);
+          },
+          onYes: async () => {
             this.$router.push({
               name: "contact-amounts",
               query: { contactDid: giverDid },
             });
-        return;
+          },
+        },
+        -1,
+      );
+    } else {
+      this.showGiftedDialog(giverDid, recipientDid);
     }
   }
 
+  private showGiftedDialog(giverDid: string, recipientDid: string) {
     let giver: GiverReceiverInputInfo, receiver: GiverReceiverInputInfo;
     if (giverDid) {
       giver = {