jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

add instructions for contacting potential links to hidden people

Browse Source
This commit is contained in:
Trent Larson
2025-01-29 21:01:35 -07:00
parent 1a0d46d963
commit 888e87f6c6
6 changed files with 270 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/components/HiddenDidDialog.vue Normal file
View File

@@ -0,0 +1,174 @@
<template>
<div
v-if="isOpen"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
>
<div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
<!-- Header -->
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>
<button @click="close" class="text-gray-500 hover:text-gray-700">
<fa icon="times" />
</button>
</div>
<!-- Content -->
<!-- This is somewhat similar to ClaimView.vue and ConfirmGiftView.vue -->
<div class="mb-4">
<p class="mb-4">
<span v-if="R.isEmpty(visibleToDids)">
The {{ roleName }} is not visible to you or any of your contacts.
</span>
<span v-else>
The {{ roleName }} is not visible to you.
</span>
</p>
<div v-if="R.isEmpty(visibleToDids)">
<p class="mt-2">
You can ask one of your contacts to take a look and see if their
contacts can see more details. Someone is connected to people closer
to them; if you don't know who to ask, try the person who registered
you.
</p>
</div>
<div v-else>
<p class="mb-2">
They are visible to some of your contacts. If you'd like an
introduction, ask them if they'll tell you more.
</p>
<div class="ml-4">
<ul>
<li
v-for="(visDid, idx) of visibleToDids"
:key="idx"
class="list-disc ml-4 mb-2"
>
<div class="text-sm">
<span>
{{ didInfo(visDid) }}
<span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
<a :href="`/did/${visDid}`" target="_blank" class="text-blue-500">
<fa icon="arrow-up-right-from-square" class="fa-fw" />
</a>
</span>
</span>
</div>
</li>
</ul>
</div>
</div>
<div class="mt-4">
<span v-if="canShare">
If you'd like an introduction,
<a @click="onClickShareClaim()" class="text-blue-500"
>click here to share the information with them and ask if they'll
tell you more about the {{ roleName }}.</a
>
</span>
<span v-else>
If you'd like an introduction,
<a
@click="copyToClipboard('A link to this page', windowLocation)"
class="text-blue-500"
>click here to copy this page, paste it into a message, and ask
if they'll tell you more about the {{ roleName }}.</a
>
</span>
</div>
</div>
<!-- Footer -->
<div class="flex justify-end">
<button
@click="close"
class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
>
Close
</button>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import * as R from "ramda";
import { useClipboard } from "@vueuse/core";
import { Contact } from "@/db/tables/contacts";
import * as serverUtil from "@/libs/endorserServer";
import { NotificationIface } from "@/constants/app";
@Component
export default class HiddenDidDialog extends Vue {
$notify!: (notification: NotificationIface, timeout?: number) => void;
isOpen = false;
roleName = "";
visibleToDids: string[] = [];
allContacts: Array<Contact> = [];
activeDid = "";
allMyDids: Array<string> = [];
canShare = false;
windowLocation = window.location.href;
R = R;
serverUtil = serverUtil;
created() {
// When Chrome compatibility is fixed https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API#api.navigator.canshare
// then use this truer check: navigator.canShare && navigator.canShare()
this.canShare = !!navigator.share;
}
open(roleName: string, visibleToDids: string[], allContacts: Array<Contact>, activeDid: string, allMyDids: Array<string>) {
this.roleName = roleName;
this.visibleToDids = visibleToDids;
this.allContacts = allContacts;
this.activeDid = activeDid;
this.allMyDids = allMyDids;
this.isOpen = true;
}
close() {
this.isOpen = false;
}
didInfo(did: string) {
return serverUtil.didInfo(
did,
this.activeDid,
this.allMyDids,
this.allContacts,
);
}
copyToClipboard(name: string, text: string) {
useClipboard()
.copy(text)
.then(() => {
this.$notify(
{
group: "alert",
type: "toast",
title: "Copied",
text: (name || "That") + " was copied to the clipboard.",
},
2000,
);
});
}
onClickShareClaim() {
this.copyToClipboard("A link to this page", this.windowLocation);
window.navigator.share({
title: "Help Connect Me",
text: "I'm trying to find the people who recorded this. Can you help me?",
url: this.windowLocation,
});
}
}
</script>

15
src/libs/endorserServer.ts
View File

@@ -460,7 +460,7 @@ export function didInfoForContact(
} else if (contact) {
return {
displayName: contact.name || "Contact With No Name",
known: !!contact,
known: true,
profileImageUrl: contact.profileImageUrl,
};
} else {
@@ -478,6 +478,19 @@ export function didInfoForContact(
}
}
/**
* @returns full contact info object (never undefined), where did is searched in contacts and allMyDids
*/
export function didInfoObject(
did: string | undefined,
activeDid: string | undefined,
allMyDids: string[],
contacts: Contact[],
): { known: boolean; displayName: string; profileImageUrl?: string } {
const contact = contactForDid(did, contacts);
return didInfoForContact(did, activeDid, contact, allMyDids);
}
/**
always returns text, maybe something like "unnamed" or "unknown"

68
src/views/ClaimView.vue
View File

@@ -53,7 +53,7 @@
<button
title="Copy Link"
@click="
copyToClipboard('Current page link', window.location.href)
copyToClipboard('A link to this page', window.location.href)
"
>
<fa icon="link" class="text-slate-500" />
@@ -270,16 +270,9 @@
<div class="text-sm">
{{ didInfo(confirmerId) }}
<span v-if="!serverUtil.isEmptyOrHiddenDid(confirmerId)">
<button
@click="
copyToClipboard(
'The DID of ' + confirmerId,
confirmerId,
)
"
>
<fa icon="copy" class="text-slate-400 fa-fw" />
</button>
<a :href="`/did/${confirmerId}`" target="_blank" class="text-blue-500">
<fa icon="arrow-up-right-from-square" class="fa-fw" />
</a>
</span>
</div>
</div>
@@ -311,16 +304,9 @@
<div class="text-sm">
{{ didInfo(confsVisibleTo) }}
<span v-if="!serverUtil.isEmptyOrHiddenDid(confsVisibleTo)">
<button
@click="
copyToClipboard(
'The DID of ' + confsVisibleTo,
confsVisibleTo,
)
"
>
<fa icon="copy" class="text-slate-400 fa-fw" />
</button>
<a :href="`/did/${confsVisibleTo}`" target="_blank" class="text-blue-500">
<fa icon="arrow-up-right-from-square" class="fa-fw" />
</a>
</span>
</div>
</div>
@@ -344,7 +330,7 @@
</div>
</div>
<!-- Note that a similar section is found in ConfirmGiftView.vue -->
<!-- Note that a similar section is found in ConfirmGiftView.vue, and kinda in HiddenDidDialog.vue -->
<h2
class="font-bold uppercase text-xl text-blue-500 mt-8 cursor-pointer"
@click="showVeriClaimDump = !showVeriClaimDump"
@@ -364,24 +350,26 @@
Some of the details are not visible to you; they show as "HIDDEN". They
are not visible to any of your direct contacts, either.
<span v-if="canShare">
If you'd like to ask any of your contacts to take a look and see if
their contacts can see more details,
You can ask one of your contacts to take a look and see if their
contacts can see more details:
<a @click="onClickShareClaim()" class="text-blue-500"
>click to send them this info</a
>click to send them this page info</a
>
and see if they are willing to make an introduction. They are surely
connected to someone; if you don't know who to ask, you might try the
person who registered you.
and see if they can make an introduction. Someone is connected to
people closer to them; if you don't know who to ask, try the person
who registered you.
</span>
<span v-else>
If you'd like to ask any of your contacts to take a look and see if
their contacts can see more details,
You can ask one of your contacts to take a look and see if their
contacts can see more details:
<a
@click="copyToClipboard('A link to this page', windowLocation)"
class="text-blue-500"
>share this page with them</a
>click to copy this page info</a
>
and see if they are willing to make an introduction.
and see if they can make an introduction. Someone is connected to
people closer to them; if you don't know who to ask, try the person
who registered you.
</span>
</div>
@@ -425,18 +413,17 @@
<span>
{{ didInfo(visDid) }}
<span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
<button
@click="copyToClipboard('The DID of ' + visDid, visDid)"
>
<fa icon="copy" class="text-slate-400 fa-fw" />
</button>
<a :href="`/did/${visDid}`" target="_blank" class="text-blue-500">
<fa icon="arrow-up-right-from-square" class="fa-fw" />
</a>
</span>
<span v-if="veriClaim.publicUrls?.[visDid]"
>, found at&nbsp;<a
:href="veriClaim.publicUrls?.[visDid]"
target="_blank"
class="text-blue-500"
>
<fa icon="globe" class="fa-fw text-slate-400" />
<fa icon="globe" class="fa-fw" />
{{
veriClaim.publicUrls[visDid].substring(
veriClaim.publicUrls[visDid].indexOf("//") + 2,
@@ -452,7 +439,7 @@
</div>
</div>
<span v-if="isEditedGlobalId" class="mt-2">
This record is an edited version. The latest version is here.
This record is an edited version. The latest version is shown.
</span>
<br />
<!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
@@ -963,9 +950,10 @@ export default class ClaimView extends Vue {
}
onClickShareClaim() {
this.copyToClipboard("A link to this page", this.windowLocation);
window.navigator.share({
title: "Help Connect Me",
text: "I'm trying to find the full details of this claim. Can you help me?",
text: "I'm trying to find the people who recorded this. Can you help me?",
url: this.windowLocation,
});
}

33
src/views/ConfirmGiftView.vue
View File

@@ -254,7 +254,7 @@
</div>
</div>
<!-- Note that a similar section is found in ClaimView.vue -->
<!-- Note that a similar section is found in ClaimView.vue, and kinda in HiddenDidDialog.vue -->
<h2
class="font-bold uppercase text-xl text-blue-500 mt-8 cursor-pointer"
@click="showVeriClaimDump = !showVeriClaimDump"
@@ -274,24 +274,26 @@
Some of the details are not visible to you; they show as "HIDDEN".
They are not visible to any of your direct contacts, either.
<span v-if="canShare">
If you'd like to ask any of your contacts to take a look and see if
their contacts can see more details,
You can ask one of your contacts to take a look and see if their
contacts can see more details:
<a @click="onClickShareClaim()" class="text-blue-500"
>click to send them this info</a
>click to send them this page info</a
>
and see if they are willing to make an introduction. They are surely
connected to someone; if you don't know who to ask, you might try
the person who registered you.
and see if they can make an introduction. Someone is connected to
people closer to them; if you don't know who to ask, try the person
who registered you.
</span>
<span v-else>
If you'd like to ask any of your contacts to take a look and see if
their contacts can see more details,
You can ask one of your contacts to take a look and see if their
contacts can see more details:
<a
@click="copyToClipboard('Location', windowLocation.href)"
@click="copyToClipboard('A link to this page', windowLocation)"
class="text-blue-500"
>share this page with them</a
>click to copy this page info</a
>
and see if they are willing to make an introduction.
and see if they can make an introduction. Someone is connected to
people closer to them; if you don't know who to ask, try the person
who registered you.
</span>
</div>
@@ -309,7 +311,7 @@
If you'd like an introduction,
<a
@click="
copyToClipboard('A link to this page', windowLocation.href)
copyToClipboard('A link to this page', windowLocation)
"
class="text-blue-500"
>share this page with them and ask if they'll tell you more about
@@ -448,7 +450,7 @@ export default class ClaimView extends Vue {
veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
veriClaimDump = "";
veriClaimDidsVisible = {};
windowLocation = window.location;
windowLocation = window.location.href;
R = R;
yaml = yaml;
@@ -856,10 +858,11 @@ export default class ClaimView extends Vue {
}
onClickShareClaim() {
this.copyToClipboard("A link to this page", this.windowLocation);
window.navigator.share({
title: "Help Connect Me",
text: "I'm trying to find the full details of this claim. Can you help me?",
url: this.windowLocation.href,
url: this.windowLocation,
});
}
}

2
src/views/ImportDerivedAccountView.vue
View File

@@ -33,7 +33,7 @@
<fa
v-if="dids[0] == selectedArrayFirstDid"
icon="circle"
class="fa-fw text-blue-400 text-xl mr-3"
class="fa-fw text-blue-500 text-xl mr-3"
></fa>
<fa
v-else

54
src/views/ProjectViewView.vue
View File

@@ -49,22 +49,14 @@
<div class="text-sm mb-3">
<div class="truncate">
<fa icon="user" class="fa-fw text-slate-400"></fa>
{{
serverUtil.didInfo(issuer, activeDid, allMyDids, allContacts)
}}
{{ issuerInfoObject?.displayName }}
<span v-if="!serverUtil.isEmptyOrHiddenDid(issuer)">
<button
@click="
libsUtil.doCopyTwoSecRedo(
issuer,
() => (showDidCopy = !showDidCopy),
)
"
class="ml-2 mr-2"
>
<fa icon="copy" class="text-slate-400 fa-fw"></fa>
</button>
<span v-show="showDidCopy">Copied DID</span>
<a :href="`/did/${issuer}`" target="_blank" class="text-blue-500">
<fa icon="arrow-up-right-from-square" class="fa-fw" />
</a>
</span>
<span v-else-if="serverUtil.isHiddenDid(issuer)">
<fa icon="info-circle" class="fa-fw text-blue-500 cursor-pointer" @click="openHiddenDidDialog()" />
</span>
</div>
<div v-if="startTime">
@@ -76,14 +68,14 @@
<a
:href="getOpenStreetMapUrl()"
target="_blank"
class="underline"
class="underline text-blue-500"
>Map View
<fa icon="arrow-up-right-from-square" class="fa-fw" />
<fa icon="arrow-up-right-from-square" class="fa-fw text-blue-500" />
</a>
</div>
<div v-if="url">
<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 text-blue-500">
{{ domainForWebsite(this.url) }}
<fa icon="arrow-up-right-from-square" class="fa-fw" />
</a>
@@ -477,6 +469,8 @@
</div>
</div>
</section>
<HiddenDidDialog ref="hiddenDidDialog" />
</template>
<script lang="ts">
@@ -508,11 +502,13 @@ import {
} from "@/libs/endorserServer";
import * as serverUtil from "@/libs/endorserServer";
import { retrieveAccountDids } from "@/libs/util";
import HiddenDidDialog from "@/components/HiddenDidDialog.vue";
@Component({
components: {
EntityIcon,
GiftedDialog,
HiddenDidDialog,
OfferDialog,
ProjectIcon,
QuickNav,
@@ -524,6 +520,7 @@ export default class ProjectViewView extends Vue {
activeDid = "";
agentDid = "";
agentDidVisibleToDids: Array<string> = [];
allMyDids: Array<string> = [];
allContacts: Array<Contact> = [];
apiServer = "";
@@ -540,6 +537,8 @@ export default class ProjectViewView extends Vue {
imageUrl = "";
isRegistered = false;
issuer = "";
issuerInfoObject: { known: boolean; displayName: string; profileImageUrl?: string } | null = null;
issuerVisibleToDids: Array<string> = [];
latitude = 0;
longitude = 0;
name = "";
@@ -547,7 +546,6 @@ export default class ProjectViewView extends Vue {
offersHitLimit = false;
projectId = ""; // handle ID
recentlyCheckedAndUnconfirmableJwts: string[] = [];
showDidCopy = false;
startTime = "";
truncatedDesc = "";
truncateLength = 40;
@@ -625,8 +623,16 @@ export default class ProjectViewView extends Vue {
startDateTime.toLocaleTimeString();
}
this.agentDid = resp.data.claim?.agent?.identifier;
this.agentDidVisibleToDids = resp.data.claim?.agent?.identifierVisibleToDids || [];
this.imageUrl = resp.data.claim?.image;
this.issuer = resp.data.issuer;
this.issuerInfoObject = serverUtil.didInfoObject(
this.issuer,
this.activeDid,
this.allMyDids,
this.allContacts,
);
this.issuerVisibleToDids = resp.data.issuerVisibleToDids || [];
this.name = resp.data.claim?.name || "(no name)";
this.description = resp.data.claim?.description || "(no description)";
this.truncatedDesc = this.description.slice(0, this.truncateLength);
@@ -1158,5 +1164,15 @@ export default class ProjectViewView extends Vue {
);
}
}
openHiddenDidDialog() {
(this.$refs.hiddenDidDialog as HiddenDidDialog).open(
"creator",
this.issuerVisibleToDids,
this.allContacts,
this.activeDid,
this.allMyDids
);
}
}
</script>