From 94b5389ce911b78b7bac5e16b4b7b4f643d1ec63 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Wed, 24 Apr 2024 20:11:38 -0600
Subject: [PATCH] change remainder of "confirm" calls to better UX

---
 src/views/AccountViewView.vue    |  34 ++++++----
 src/views/ClaimView.vue          |  97 +++++++++++++++------------
 src/views/ContactsView.vue       |  22 +++----
 src/views/NewEditProjectView.vue |  27 ++++++--
 src/views/ProjectViewView.vue    | 108 +++++++++++++++++--------------
 5 files changed, 169 insertions(+), 119 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 3f6c83d1b..f6c3d9a20 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -562,7 +562,7 @@
           <div v-if="showContactImport()">
             <button
               class="block text-center text-md uppercase 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-1.5 py-2 rounded-md mb-6"
-              @click="submitFile()"
+              @click="confirmSubmitFile()"
             >
               Import Settings & Contacts
               <br />
@@ -1082,6 +1082,23 @@ export default class AccountViewView extends Vue {
     return !!inputFileNameRef.value;
   }
 
+  confirmSubmitFile() {
+    if (inputFileNameRef.value != null) {
+      this.$notify(
+        {
+          group: "modal",
+          type: "confirm",
+          title: "Replace All",
+          text:
+            "This will replace all settings and contacts, so we recommend you first do the backup step above." +
+            " Are you sure you want to import and replace all contacts and settings?",
+          onYes: this.submitFile,
+        },
+        -1,
+      );
+    }
+  }
+
   /**
    * Asynchronously imports the database from a downloadable JSON file.
    *
@@ -1089,17 +1106,10 @@ export default class AccountViewView extends Vue {
    */
   async submitFile() {
     if (inputFileNameRef.value != null) {
-      if (
-        confirm(
-          "This will replace all settings and contacts, so we recommend you first do the backup step above." +
-            " Are you sure you want to import and replace all contacts and settings?",
-        )
-      ) {
-        await db.delete();
-        await Dexie.import(inputFileNameRef.value, {
-          progressCallback: this.progressCallback,
-        });
-      }
+      await db.delete();
+      await Dexie.import(inputFileNameRef.value, {
+        progressCallback: this.progressCallback,
+      });
     }
   }
 
diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index 066507e10..8b8e5a040 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -131,7 +131,7 @@
             confirmerIdList,
           )
         "
-        @click="confirmClaim()"
+        @click="confirmConfirmClaim()"
       >
         Confirm
         <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
@@ -715,52 +715,65 @@ export default class ClaimView extends Vue {
     }
   }
 
+  confirmConfirmClaim() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Confirm",
+        text: "Do you personally confirm that this is true?",
+        onYes: async () => {
+          await this.confirmClaim();
+        },
+      },
+      -1,
+    );
+  }
+
   // similar code is found in ProjectViewView
   async confirmClaim() {
-    if (confirm("Do you personally confirm that this is true?")) {
-      // similar logic is found in endorser-mobile
-      const goodClaim = serverUtil.removeSchemaContext(
-        serverUtil.removeVisibleToDids(
-          serverUtil.addLastClaimOrHandleAsIdIfMissing(
-            this.veriClaim.claim,
-            this.veriClaim.id,
-            this.veriClaim.handleId,
-          ),
+    // similar logic is found in endorser-mobile
+    const goodClaim = serverUtil.removeSchemaContext(
+      serverUtil.removeVisibleToDids(
+        serverUtil.addLastClaimOrHandleAsIdIfMissing(
+          this.veriClaim.claim,
+          this.veriClaim.id,
+          this.veriClaim.handleId,
         ),
+      ),
+    );
+    const confirmationClaim: serverUtil.GenericVerifiableCredential = {
+      "@context": "https://schema.org",
+      "@type": "AgreeAction",
+      object: goodClaim,
+    };
+    const result = await serverUtil.createAndSubmitClaim(
+      confirmationClaim,
+      await this.getIdentity(this.activeDid),
+      this.apiServer,
+      this.axios,
+    );
+    if (result.type === "success") {
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Success",
+          text: "Confirmation submitted.",
+        },
+        5000,
       );
-      const confirmationClaim: serverUtil.GenericVerifiableCredential = {
-        "@context": "https://schema.org",
-        "@type": "AgreeAction",
-        object: goodClaim,
-      };
-      const result = await serverUtil.createAndSubmitClaim(
-        confirmationClaim,
-        await this.getIdentity(this.activeDid),
-        this.apiServer,
-        this.axios,
+    } else {
+      console.error("Got error submitting the confirmation:", result);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was a problem submitting the confirmation. See logs for more info.",
+        },
+        -1,
       );
-      if (result.type === "success") {
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Success",
-            text: "Confirmation submitted.",
-          },
-          5000,
-        );
-      } else {
-        console.error("Got error submitting the confirmation:", result);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "There was a problem submitting the confirmation. See logs for more info.",
-          },
-          -1,
-        );
-      }
     }
   }
 
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index a2e939129..a00fa7701 100644
--- a/src/views/ContactsView.vue
+++ b/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="promptSetVisibility(contact, false)"
+                @click="confirmSetVisibility(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="promptSetVisibility(contact, true)"
+                @click="confirmSetVisibility(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="promptRegister(contact)"
+                @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"
                 title="Registration"
@@ -176,7 +176,7 @@
             </div>
 
             <button
-              @click="promptDeleteContact(contact)"
+              @click="confirmDeleteContact(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="promptShowGiftedDialog(activeDid, contact.did)"
+                @click="confirmShowGiftedDialog(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="promptShowGiftedDialog(contact.did, this.activeDid)"
+                @click="confirmShowGiftedDialog(contact.did, this.activeDid)"
                 :title="givenToMeDescriptions[contact.did] || ''"
               >
                 From:
@@ -782,7 +782,7 @@ export default class ContactsView extends Vue {
   }
 
   // prompt with confirmation if they want to delete a contact
-  promptDeleteContact(contact: Contact) {
+  confirmDeleteContact(contact: Contact) {
     this.$notify(
       {
         group: "modal",
@@ -808,8 +808,8 @@ export default class ContactsView extends Vue {
     this.contacts = R.without([contact], this.contacts);
   }
 
-  // prompt to register a new contact
-  async promptRegister(contact: Contact) {
+  // confirm to register a new contact
+  async confirmRegister(contact: Contact) {
     this.$notify(
       {
         group: "modal",
@@ -937,7 +937,7 @@ export default class ContactsView extends Vue {
     }
   }
 
-  async promptSetVisibility(contact: Contact, visibility: boolean) {
+  async confirmSetVisibility(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?";
@@ -1089,7 +1089,7 @@ export default class ContactsView extends Vue {
     );
   }
 
-  promptShowGiftedDialog(giverDid: string, recipientDid: string) {
+  confirmShowGiftedDialog(giverDid: string, recipientDid: string) {
     // if they have unconfirmed amounts, ask to confirm those
     if (
       recipientDid === this.activeDid &&
diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index 396b9be72..6293290ea 100644
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -116,7 +116,7 @@
         <l-marker
           v-if="latitude && longitude"
           :lat-lng="[latitude, longitude]"
-          @click="maybeEraseLatLong()"
+          @click="confirmEraseLatLong()"
         />
       </l-map>
     </div>
@@ -451,12 +451,25 @@ export default class NewEditProjectView extends Vue {
     }
   }
 
-  public maybeEraseLatLong() {
-    if (window.confirm("Are you sure you don't want to mark a location?")) {
-      this.latitude = 0;
-      this.longitude = 0;
-      this.includeLocation = false;
-    }
+  confirmEraseLatLong() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Erase Marker",
+        text: "Are you sure you don't want to mark a location? This will erase the current location.",
+        onYes: async () => {
+          this.eraseLatLong();
+        },
+      },
+      -1,
+    );
+  }
+
+  public eraseLatLong() {
+    this.latitude = 0;
+    this.longitude = 0;
+    this.includeLocation = false;
   }
 
   public onCancelClick() {
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 6734da746..064fff925 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -69,8 +69,9 @@
               </div>
               <div v-if="url">
                 <fa icon="globe" class="fa-fw text-slate-400"></fa>
-                <a :href="addScheme(url)" target="_blank" class="underline"
-                  >{{ domainForWebsite(this.url) }}
+                <a :href="addScheme(url)" target="_blank" class="underline">
+                  {{ domainForWebsite(this.url) }}
+                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
                 </a>
               </div>
             </div>
@@ -289,7 +290,7 @@
               <a @click="onClickLoadClaim(give.jwtId)">
                 <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
               </a>
-              <a v-if="checkIsConfirmable(give)" @click="confirmClaim(give)">
+              <a v-if="checkIsConfirmable(give)" @click="confirmConfirmClaim(give)">
                 <fa icon="circle-check" class="text-blue-500 cursor-pointer" />
               </a>
             </div>
@@ -787,55 +788,68 @@ export default class ProjectViewView extends Vue {
     return libsUtil.isGiveRecordTheUserCanConfirm(giveDetails, this.activeDid);
   }
 
+  confirmConfirmClaim(give: GiveSummaryRecord) {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Confirm",
+        text: "Do you personally confirm that this is true?",
+        onYes: async () => {
+          await this.confirmClaim(give);
+        },
+      },
+      -1,
+    );
+  }
+
   // similar code is found in ClaimView
   async confirmClaim(give: GiveSummaryRecord) {
-    if (confirm("Do you personally confirm that this is true?")) {
-      // similar logic is found in endorser-mobile
-      const goodClaim = serverUtil.removeSchemaContext(
-        serverUtil.removeVisibleToDids(
-          serverUtil.addLastClaimOrHandleAsIdIfMissing(
-            give.fullClaim,
-            give.jwtId,
-            give.handleId,
-          ),
+    // similar logic is found in endorser-mobile
+    const goodClaim = serverUtil.removeSchemaContext(
+      serverUtil.removeVisibleToDids(
+        serverUtil.addLastClaimOrHandleAsIdIfMissing(
+          give.fullClaim,
+          give.jwtId,
+          give.handleId,
         ),
+      ),
+    );
+    const confirmationClaim: serverUtil.GenericVerifiableCredential = {
+      "@context": "https://schema.org",
+      "@type": "AgreeAction",
+      object: goodClaim,
+    };
+    const result = await serverUtil.createAndSubmitClaim(
+      confirmationClaim,
+      await this.getIdentity(this.activeDid),
+      this.apiServer,
+      this.axios,
+    );
+    if (result.type === "success") {
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Success",
+          text: "Confirmation submitted.",
+        },
+        5000,
       );
-      const confirmationClaim: serverUtil.GenericVerifiableCredential = {
-        "@context": "https://schema.org",
-        "@type": "AgreeAction",
-        object: goodClaim,
-      };
-      const result = await serverUtil.createAndSubmitClaim(
-        confirmationClaim,
-        await this.getIdentity(this.activeDid),
-        this.apiServer,
-        this.axios,
+    } else {
+      console.error("Got error submitting the confirmation:", result);
+      const message =
+        (result.error?.error as string) ||
+        "There was a problem submitting the confirmation. See logs for more info.";
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: message,
+        },
+        -1,
       );
-      if (result.type === "success") {
-        this.$notify(
-          {
-            group: "alert",
-            type: "success",
-            title: "Success",
-            text: "Confirmation submitted.",
-          },
-          5000,
-        );
-      } else {
-        console.error("Got error submitting the confirmation:", result);
-        const message =
-          (result.error?.error as string) ||
-          "There was a problem submitting the confirmation. See logs for more info.";
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: message,
-          },
-          -1,
-        );
-      }
     }
   }
 }