add visibility flag set, refactor to see results, and add copy icons for contact info

src/libs/endorserServer.ts

@@ -1135,8 +1135,11 @@ export async function setVisibilityUtil(
   try {
     const resp = await axios.post(url, payload, { headers });
     if (resp.status === 200) {
+      const success = resp.data.success;
+      if (success) {
         db.contacts.update(contact.did, { seesMe: visibility });
-      return { success: true };
+      }
+      return { success };
     } else {
       console.error(
         "Got some bad server response when setting visibility: ",

src/views/ContactsView.vue

@@ -128,17 +128,44 @@
             {{ contact.did }}
           </div>
           <div class="text-sm truncate" v-if="contact.publicKeyBase64">
-            Public Key (base 64): {{ contact.publicKeyBase64 }}
+            Public Key (base 64):
+            <button
+              @click="
+                libsUtil.doCopyTwoSecRedo(
+                  contact.publicKeyBase64,
+                  () => (showPubKeyCopy = !showPubKeyCopy),
+                )
+              "
+            >
+              <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            </button>
+            <span v-show="showPubKeyCopy" class="text-green-500"
+              >Copied Key</span
+            >
+            {{ contact.publicKeyBase64 }}
           </div>
           <div class="text-sm truncate" v-if="contact.nextPubKeyHashB64">
             Next Public Key Hash (base 64):
+            <button
+              @click="
+                libsUtil.doCopyTwoSecRedo(
+                  contact.nextPubKeyHashB64,
+                  () => (showPubKeyHashCopy = !showPubKeyHashCopy),
+                )
+              "
+            >
+              <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            </button>
+            <span v-show="showPubKeyHashCopy" class="text-green-500"
+              >Copied Hash</span
+            >
             {{ contact.nextPubKeyHashB64 }}
           </div>
 
           <div id="ContactActions" class="flex gap-1.5 mt-2">
             <div v-if="activeDid">
               <button
-                v-if="contact.seesMe"
+                v-if="contact.seesMe && contact.did !== activeDid"
                 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="confirmSetVisibility(contact, false)"
                 title="They can see you"
@@ -146,25 +173,31 @@
                 <fa icon="eye" class="fa-fw" />
               </button>
               <button
-                v-else
+                v-else-if="!contact.seesMe && contact.did !== activeDid"
                 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="confirmSetVisibility(contact, true)"
                 title="They cannot see you"
               >
                 <fa icon="eye-slash" class="fa-fw" />
               </button>
+              <!-- otherwise it's this user so hide it -->
+              <fa v-else icon="eye" class="text-white mx-2.5" />
+
               <button
                 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="checkVisibility(contact)"
                 title="Check Visibility"
-                v-if="activeDid"
+                v-if="contact.did !== activeDid"
               >
                 <fa icon="rotate" class="fa-fw" />
               </button>
+              <!-- otherwise it's this user so hide it -->
+              <fa v-else icon="rotate" class="text-white mx-2.5" />
+
               <button
                 @click="confirmRegister(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"
+                v-if="contact.did !== activeDid"
                 title="Registration"
               >
                 <fa
@@ -174,6 +207,8 @@
                 />
                 <fa v-else icon="person-circle-question" class="fa-fw" />
               </button>
+              <!-- otherwise it's this user so hide it -->
+              <fa v-else icon="rotate" class="text-white ml-6 px-2.5" />
             </div>
 
             <button
@@ -355,6 +390,8 @@ export default class ContactsView extends Vue {
   hideRegisterPromptOnNewContact = false;
   isRegistered = false;
   showDidCopy = false;
+  showPubKeyCopy = false;
+  showPubKeyHashCopy = false;
   showGiveNumbers = false;
   showGiveTotals = true;
   showGiveConfirmed = true;
@@ -802,7 +839,7 @@ export default class ContactsView extends Vue {
       );
       if (regResult.success) {
         contact.registered = true;
-        db.contacts.update(contact.did, { registered: true });
+        await db.contacts.update(contact.did, { registered: true });
 
         this.$notify(
           {
@@ -866,7 +903,10 @@ export default class ContactsView extends Vue {
         title: "Set Visibility",
         text: visibilityPrompt,
         onYes: async () => {
-          await this.setVisibility(contact, visibility, true);
+          const success = await this.setVisibility(contact, visibility, true);
+          if (success) {
+            contact.seesMe = visibility; // didn't work inside setVisibility
+          }
         },
       },
       -1,
@@ -887,6 +927,8 @@ export default class ContactsView extends Vue {
       visibility,
     );
     if (result.success) {
+      //contact.seesMe = visibility; // why doesn't it affect the UI from here?
+      //console.log("Set result & seesMe", result, contact.seesMe, contact.did);
       if (showSuccessAlert) {
         this.$notify(
           {
@@ -902,6 +944,7 @@ export default class ContactsView extends Vue {
           3000,
         );
       }
+      return true;
     } else {
       console.error("Got strange result from setting visibility:", result);
       const message =
@@ -915,6 +958,7 @@ export default class ContactsView extends Vue {
         },
         5000,
       );
+      return false;
     }
   }
 
@@ -942,8 +986,8 @@ export default class ContactsView extends Vue {
       if (resp.status === 200) {
         const visibility = resp.data;
         contact.seesMe = visibility;
-        // console.log("Visibility checked:", visibility, contact.did, contact.name);
+        //console.log("Visi check:", visibility, contact.seesMe, contact.did);
-        db.contacts.update(contact.did, { seesMe: visibility });
+        await db.contacts.update(contact.did, { seesMe: visibility });
 
         this.$notify(
           {