Browse Source

change remainder of "confirm" calls to better UX

pull/115/head
Trent Larson 7 months ago
parent
commit
94b5389ce9
  1. 34
      src/views/AccountViewView.vue
  2. 97
      src/views/ClaimView.vue
  3. 22
      src/views/ContactsView.vue
  4. 27
      src/views/NewEditProjectView.vue
  5. 108
      src/views/ProjectViewView.vue

34
src/views/AccountViewView.vue

@ -562,7 +562,7 @@
<div v-if="showContactImport()"> <div v-if="showContactImport()">
<button <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" 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 Import Settings & Contacts
<br /> <br />
@ -1082,6 +1082,23 @@ export default class AccountViewView extends Vue {
return !!inputFileNameRef.value; 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. * Asynchronously imports the database from a downloadable JSON file.
* *
@ -1089,17 +1106,10 @@ export default class AccountViewView extends Vue {
*/ */
async submitFile() { async submitFile() {
if (inputFileNameRef.value != null) { if (inputFileNameRef.value != null) {
if ( await db.delete();
confirm( await Dexie.import(inputFileNameRef.value, {
"This will replace all settings and contacts, so we recommend you first do the backup step above." + progressCallback: this.progressCallback,
" Are you sure you want to import and replace all contacts and settings?", });
)
) {
await db.delete();
await Dexie.import(inputFileNameRef.value, {
progressCallback: this.progressCallback,
});
}
} }
} }

97
src/views/ClaimView.vue

@ -131,7 +131,7 @@
confirmerIdList, confirmerIdList,
) )
" "
@click="confirmClaim()" @click="confirmConfirmClaim()"
> >
Confirm Confirm
<fa icon="circle-check" class="ml-2 text-white cursor-pointer" /> <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 // similar code is found in ProjectViewView
async confirmClaim() { async confirmClaim() {
if (confirm("Do you personally confirm that this is true?")) { // similar logic is found in endorser-mobile
// similar logic is found in endorser-mobile const goodClaim = serverUtil.removeSchemaContext(
const goodClaim = serverUtil.removeSchemaContext( serverUtil.removeVisibleToDids(
serverUtil.removeVisibleToDids( serverUtil.addLastClaimOrHandleAsIdIfMissing(
serverUtil.addLastClaimOrHandleAsIdIfMissing( this.veriClaim.claim,
this.veriClaim.claim, this.veriClaim.id,
this.veriClaim.id, this.veriClaim.handleId,
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 = { } else {
"@context": "https://schema.org", console.error("Got error submitting the confirmation:", result);
"@type": "AgreeAction", this.$notify(
object: goodClaim, {
}; group: "alert",
const result = await serverUtil.createAndSubmitClaim( type: "danger",
confirmationClaim, title: "Error",
await this.getIdentity(this.activeDid), text: "There was a problem submitting the confirmation. See logs for more info.",
this.apiServer, },
this.axios, -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,
);
}
} }
} }

22
src/views/ContactsView.vue

@ -139,7 +139,7 @@
<button <button
v-if="contact.seesMe" 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" 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" title="They can see you"
> >
<fa icon="eye" class="fa-fw" /> <fa icon="eye" class="fa-fw" />
@ -147,7 +147,7 @@
<button <button
v-else 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" 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" title="They cannot see you"
> >
<fa icon="eye-slash" class="fa-fw" /> <fa icon="eye-slash" class="fa-fw" />
@ -161,7 +161,7 @@
<fa icon="rotate" class="fa-fw" /> <fa icon="rotate" class="fa-fw" />
</button> </button>
<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" 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="activeDid"
title="Registration" title="Registration"
@ -176,7 +176,7 @@
</div> </div>
<button <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" 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" title="Delete"
> >
@ -189,7 +189,7 @@
> >
<button <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" 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] || ''" :title="givenByMeDescriptions[contact.did] || ''"
> >
To: To:
@ -210,7 +210,7 @@
<button <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" 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] || ''" :title="givenToMeDescriptions[contact.did] || ''"
> >
From: From:
@ -782,7 +782,7 @@ export default class ContactsView extends Vue {
} }
// prompt with confirmation if they want to delete a contact // prompt with confirmation if they want to delete a contact
promptDeleteContact(contact: Contact) { confirmDeleteContact(contact: Contact) {
this.$notify( this.$notify(
{ {
group: "modal", group: "modal",
@ -808,8 +808,8 @@ export default class ContactsView extends Vue {
this.contacts = R.without([contact], this.contacts); this.contacts = R.without([contact], this.contacts);
} }
// prompt to register a new contact // confirm to register a new contact
async promptRegister(contact: Contact) { async confirmRegister(contact: Contact) {
this.$notify( this.$notify(
{ {
group: "modal", 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 const visibilityPrompt = visibility
? "Are you sure you want to make your activity visible to them?" ? "Are you sure you want to make your activity visible to them?"
: "Are you sure you want to hide all your activity from 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 they have unconfirmed amounts, ask to confirm those
if ( if (
recipientDid === this.activeDid && recipientDid === this.activeDid &&

27
src/views/NewEditProjectView.vue

@ -116,7 +116,7 @@
<l-marker <l-marker
v-if="latitude && longitude" v-if="latitude && longitude"
:lat-lng="[latitude, longitude]" :lat-lng="[latitude, longitude]"
@click="maybeEraseLatLong()" @click="confirmEraseLatLong()"
/> />
</l-map> </l-map>
</div> </div>
@ -451,12 +451,25 @@ export default class NewEditProjectView extends Vue {
} }
} }
public maybeEraseLatLong() { confirmEraseLatLong() {
if (window.confirm("Are you sure you don't want to mark a location?")) { this.$notify(
this.latitude = 0; {
this.longitude = 0; group: "modal",
this.includeLocation = false; 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() { public onCancelClick() {

108
src/views/ProjectViewView.vue

@ -69,8 +69,9 @@
</div> </div>
<div v-if="url"> <div v-if="url">
<fa icon="globe" class="fa-fw text-slate-400"></fa> <fa icon="globe" class="fa-fw text-slate-400"></fa>
<a :href="addScheme(url)" target="_blank" class="underline" <a :href="addScheme(url)" target="_blank" class="underline">
>{{ domainForWebsite(this.url) }} {{ domainForWebsite(this.url) }}
<fa icon="arrow-up-right-from-square" class="fa-fw" />
</a> </a>
</div> </div>
</div> </div>
@ -289,7 +290,7 @@
<a @click="onClickLoadClaim(give.jwtId)"> <a @click="onClickLoadClaim(give.jwtId)">
<fa icon="file-lines" class="text-blue-500 cursor-pointer" /> <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
</a> </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" /> <fa icon="circle-check" class="text-blue-500 cursor-pointer" />
</a> </a>
</div> </div>
@ -787,55 +788,68 @@ export default class ProjectViewView extends Vue {
return libsUtil.isGiveRecordTheUserCanConfirm(giveDetails, this.activeDid); 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 // similar code is found in ClaimView
async confirmClaim(give: GiveSummaryRecord) { async confirmClaim(give: GiveSummaryRecord) {
if (confirm("Do you personally confirm that this is true?")) { // similar logic is found in endorser-mobile
// similar logic is found in endorser-mobile const goodClaim = serverUtil.removeSchemaContext(
const goodClaim = serverUtil.removeSchemaContext( serverUtil.removeVisibleToDids(
serverUtil.removeVisibleToDids( serverUtil.addLastClaimOrHandleAsIdIfMissing(
serverUtil.addLastClaimOrHandleAsIdIfMissing( give.fullClaim,
give.fullClaim, give.jwtId,
give.jwtId, give.handleId,
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 = { } else {
"@context": "https://schema.org", console.error("Got error submitting the confirmation:", result);
"@type": "AgreeAction", const message =
object: goodClaim, (result.error?.error as string) ||
}; "There was a problem submitting the confirmation. See logs for more info.";
const result = await serverUtil.createAndSubmitClaim( this.$notify(
confirmationClaim, {
await this.getIdentity(this.activeDid), group: "alert",
this.apiServer, type: "danger",
this.axios, 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,
);
}
} }
} }
} }

Loading…
Cancel
Save