change remainder of "confirm" calls to better UX

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,19 +1106,12 @@ 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,
       });
     }
   }
-  }
 
   private progressCallback(progress: ImportProgress) {
     console.log(

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,9 +715,23 @@ 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(
@@ -762,7 +776,6 @@ export default class ClaimView extends Vue {
       );
     }
   }
-  }
 
   showDifferentClaimPage(claimId: string) {
     const route = {

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 &&

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,13 +451,26 @@ export default class NewEditProjectView extends Vue {
     }
   }
 
-  public maybeEraseLatLong() {
-    if (window.confirm("Are you sure you don't want to mark a location?")) {
+  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() {
     this.$router.back();

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,9 +788,23 @@ 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(
@@ -837,6 +852,5 @@ export default class ProjectViewView extends Vue {
       );
     }
   }
-  }
 }
 </script>