make a confirmation for contact visibility

src/views/ContactsView.vue

@@ -118,7 +118,7 @@
             <div v-if="activeDid">
               <button
                 v-if="contact.seesMe"
-                class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+                class="text-sm uppercase bg-slate-500 text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
                 @click="setVisibility(contact, false, true)"
                 title="They can see you"
               >
@@ -126,14 +126,14 @@
               </button>
               <button
                 v-else
-                class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+                class="text-sm uppercase bg-slate-500 text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
                 @click="setVisibility(contact, true, true)"
                 title="They cannot see you"
               >
                 <fa icon="eye-slash" class="fa-fw" />
               </button>
               <button
-                class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
+                class="text-sm uppercase bg-slate-500 text-white mx-0.5 my-0.5 px-2 py-1.5 rounded-md"
                 @click="checkVisibility(contact)"
                 title="Check Visibility"
                 v-if="activeDid"
@@ -571,17 +571,7 @@ export default class ContactsView extends Vue {
         } else {
           addedMessage = newContact.name + " was added.";
         }
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Contact Added",
-            text: addedMessage,
-          },
-          5000,
-        );
         if (this.isRegistered) {
-          // putting this last so that it shows on the top
           this.$notify(
             {
               group: "alert",
@@ -595,6 +585,15 @@ export default class ContactsView extends Vue {
             -1,
           );
         }
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Contact Added",
+            text: addedMessage,
+          },
+          5000,
+        );
       })
       .catch((err) => {
         console.error("Error when adding contact to storage:", err);
@@ -754,63 +753,70 @@ export default class ContactsView extends Vue {
     visibility: boolean,
     showSuccessAlert: boolean,
   ) {
-    const url =
-      this.apiServer +
-      "/api/report/" +
-      (visibility ? "canSeeMe" : "cannotSeeMe");
-    const identity = await this.getIdentity(this.activeDid);
-    const headers = await this.getHeaders(identity);
-    const payload = JSON.stringify({ did: contact.did });
+    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/" +
+        (visibility ? "canSeeMe" : "cannotSeeMe");
+      const identity = await this.getIdentity(this.activeDid);
+      const headers = await this.getHeaders(identity);
+      const payload = JSON.stringify({ did: contact.did });
 
-    try {
-      const resp = await this.axios.post(url, payload, { headers });
-      if (resp.status === 200) {
-        if (showSuccessAlert) {
+      try {
+        const resp = await this.axios.post(url, payload, { headers });
+        if (resp.status === 200) {
+          if (showSuccessAlert) {
+            this.$notify(
+              {
+                group: "alert",
+                type: "success",
+                title: "Visibility Set",
+                text:
+                  this.nameForDid(this.contacts, contact.did) +
+                  " can " +
+                  (visibility ? "" : "not ") +
+                  "see your activity.",
+              },
+              -1,
+            );
+          }
+          contact.seesMe = visibility;
+          db.contacts.update(contact.did, { seesMe: visibility });
+        } else {
+          console.error(
+            "Got some bad server response when setting visibility: ",
+            resp.status,
+            resp,
+          );
+          const message =
+            resp.data.error?.message || "Got some error setting visibility.";
           this.$notify(
             {
               group: "alert",
-              type: "success",
-              title: "Visibility Set",
-              text:
-                this.nameForDid(this.contacts, contact.did) +
-                " can " +
-                (visibility ? "" : "not ") +
-                "see your activity.",
+              type: "danger",
+              title: "Error Setting Visibility",
+              text: message,
             },
             -1,
           );
         }
-        contact.seesMe = visibility;
-        db.contacts.update(contact.did, { seesMe: visibility });
-      } else {
-        console.error(
-          "Got some bad server response when setting visibility: ",
-          resp.status,
-          resp,
-        );
-        const message =
-          resp.data.error?.message || "Got some error setting visibility.";
+      } catch (err) {
+        console.error("Got some error when setting visibility:", err);
         this.$notify(
           {
             group: "alert",
             type: "danger",
             title: "Error Setting Visibility",
-            text: message,
+            text: "Check connectivity and try again.",
           },
           -1,
         );
       }
-    } catch (err) {
-      console.error("Got some error when setting visibility:", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error Setting Visibility",
-          text: "Check connectivity and try again.",
-        },
-        -1,
-      );
     }
   }