6 changed files with 270 additions and 76 deletions
@ -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> |
||||
Loading…
Reference in new issue