change remainder of "confirm" calls to better UX

2024-04-24 20:11:38 -06:00
parent eeaacaf202
commit f4f5fc7730
5 changed files with 169 additions and 119 deletions
--- 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,
+      });
    }
  }

--- 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,
-        );
-      }
    }
  }

--- 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 &&
--- 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() {
--- 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,
-        );
-      }
    }
  }
 }