feat & doc: automatically set visibility & alert about registration, alert to help onboard (and refine docs & tasks)

src/views/ContactsView.vue

@@ -113,7 +113,7 @@
             <button
               v-if="contact.seesMe"
               class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
-              @click="setVisibility(contact, false)"
+              @click="setVisibility(contact, false, true)"
               title="They can see you"
             >
               <fa icon="eye" class="fa-fw" />
@@ -121,7 +121,7 @@
             <button
               v-else
               class="text-sm uppercase bg-slate-500 text-white px-2 py-1.5 rounded-md"
-              @click="setVisibility(contact, true)"
+              @click="setVisibility(contact, true, true)"
               title="They cannot see you"
             >
               <fa icon="eye-slash" class="fa-fw" />
@@ -137,7 +137,7 @@
 
             <button
               @click="register(contact)"
-              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 ml-6 px-2 py-1.5 rounded-md"
             >
               <fa
                 v-if="contact.registered"
@@ -155,7 +155,7 @@
 
             <button
               @click="deleteContact(contact)"
-              class="text-sm uppercase bg-red-600 text-white px-2 py-1.5 rounded-md"
+              class="text-sm uppercase bg-red-600 text-white ml-24 px-2 py-1.5 rounded-md"
               title="Delete"
             >
               <fa icon="trash-can" class="fa-fw" />
@@ -531,6 +531,7 @@ export default class ContactsView extends Vue {
       );
       return;
     }
+    newContact.seesMe = true; // since we will immediately set that on the server
     return db.contacts
       .add(newContact)
       .then(() => {
@@ -539,12 +540,28 @@ export default class ContactsView extends Vue {
           (a: Contact, b) => (a.name || "").localeCompare(b.name || ""),
           allContacts,
         );
+        this.setVisibility(newContact, true, false);
         this.$notify(
           {
             group: "alert",
             type: "success",
-            title: "Contact added",
-            text: newContact.name + " was added.",
+            title: "Contact Added",
+            text:
+              newContact.name +
+              " was added, and your activity is visible to them.",
+          },
+          -1,
+        );
+        // putting this last so that it shows on the top
+        this.$notify(
+          {
+            group: "alert",
+            type: "info",
+            title: "New User?",
+            text:
+              "If " +
+              newContact.name +
+              " is a new user, be sure to register them.",
           },
           -1,
         );
@@ -556,7 +573,7 @@ export default class ContactsView extends Vue {
             group: "alert",
             type: "danger",
             title: "Contact Not Added",
-            text: "An error prevented importing.",
+            text: "An error prevented this import.",
           },
           -1,
         );
@@ -566,11 +583,13 @@ export default class ContactsView extends Vue {
   async deleteContact(contact: Contact) {
     if (
       confirm(
-        "Are you sure you want to delete " +
+        "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." +
+          " \n\nAre you sure you want to remove " +
           this.nameForDid(this.contacts, contact.did) +
           " with DID " +
           contact.did +
-          " ?",
+          " from your contact list?",
       )
     ) {
       await db.open();
@@ -692,7 +711,11 @@ export default class ContactsView extends Vue {
     }
   }
 
-  async setVisibility(contact: Contact, visibility: boolean) {
+  async setVisibility(
+    contact: Contact,
+    visibility: boolean,
+    showSuccessAlert: boolean,
+  ) {
     const url =
       this.apiServer +
       "/api/report/" +
@@ -704,6 +727,21 @@ export default class ContactsView extends Vue {
     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 {
@@ -756,7 +794,7 @@ export default class ContactsView extends Vue {
           {
             group: "alert",
             type: "info",
-            title: "Refreshed",
+            title: "Visibility Refreshed",
             text:
               this.nameForContact(contact, true) +
               " can " +