Browse Source
Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/kick-starter-for-time-pwa/pulls/15kb/add-usage-guide
18 changed files with 767 additions and 242 deletions
@ -0,0 +1,40 @@ |
|||||
|
export const SCHEMA_ORG_CONTEXT = "https://schema.org"; |
||||
|
export const SERVICE_ID = "endorser.ch"; |
||||
|
|
||||
|
export interface AgreeVerifiableCredential { |
||||
|
"@context": string; |
||||
|
"@type": string; |
||||
|
// "any" because arbitrary objects can be subject of agreement
|
||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
|
object: Record<any, any>; |
||||
|
} |
||||
|
|
||||
|
export interface GiveServerRecord { |
||||
|
agentDid: string; |
||||
|
amount: number; |
||||
|
amountConfirmed: number; |
||||
|
description: string; |
||||
|
fullClaim: GiveVerifiableCredential; |
||||
|
handleId: string; |
||||
|
issuedAt: string; |
||||
|
recipientDid: string; |
||||
|
unit: string; |
||||
|
} |
||||
|
|
||||
|
export interface GiveVerifiableCredential { |
||||
|
"@context"?: string; // optional when embedded, eg. in an Agree
|
||||
|
"@type": string; |
||||
|
agent: { identifier: string }; |
||||
|
description?: string; |
||||
|
identifier?: string; |
||||
|
object: { amountOfThisGood: number; unitCode: string }; |
||||
|
recipient: { identifier: string }; |
||||
|
} |
||||
|
|
||||
|
export interface RegisterVerifiableCredential { |
||||
|
"@context": string; |
||||
|
"@type": string; |
||||
|
agent: { identifier: string }; |
||||
|
object: string; |
||||
|
recipient: { identifier: string }; |
||||
|
} |
||||
@ -1,3 +0,0 @@ |
|||||
<template> |
|
||||
<section id="Content" class="p-6 pb-24"></section> |
|
||||
</template> |
|
||||
@ -0,0 +1,384 @@ |
|||||
|
<template> |
||||
|
<!-- QUICK NAV --> |
||||
|
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200"> |
||||
|
<ul class="flex text-2xl p-2 gap-2"> |
||||
|
<!-- Home Feed --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"> |
||||
|
<router-link :to="{ name: 'home' }" class="block text-center py-3 px-1" |
||||
|
><fa icon="house-chimney" class="fa-fw"></fa |
||||
|
></router-link> |
||||
|
</li> |
||||
|
<!-- Search --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"> |
||||
|
<router-link |
||||
|
:to="{ name: 'discover' }" |
||||
|
class="block text-center py-3 px-1" |
||||
|
><fa icon="magnifying-glass" class="fa-fw"></fa |
||||
|
></router-link> |
||||
|
</li> |
||||
|
<!-- Contacts --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"> |
||||
|
<router-link |
||||
|
:to="{ name: 'projects' }" |
||||
|
class="block text-center py-3 px-1" |
||||
|
><fa icon="folder-open" class="fa-fw"></fa |
||||
|
></router-link> |
||||
|
</li> |
||||
|
<!-- Contacts --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"> |
||||
|
<router-link |
||||
|
:to="{ name: 'contacts' }" |
||||
|
class="block text-center py-3 px-1" |
||||
|
><fa icon="users" class="fa-fw"></fa |
||||
|
></router-link> |
||||
|
</li> |
||||
|
<!-- Profile --> |
||||
|
<li class="basis-1/5 rounded-md text-slate-500"> |
||||
|
<router-link |
||||
|
:to="{ name: 'account' }" |
||||
|
class="block text-center py-3 px-1" |
||||
|
><fa icon="circle-user" class="fa-fw"></fa |
||||
|
></router-link> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</nav> |
||||
|
|
||||
|
<section id="Content" class="p-6 pb-24"> |
||||
|
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8"> |
||||
|
Given with {{ contact?.name }} |
||||
|
</h1> |
||||
|
|
||||
|
<!-- Results List --> |
||||
|
<div> |
||||
|
<div class="border-b border-slate-300 flex"> |
||||
|
<div class="w-1/4"></div> |
||||
|
<div class="w-1/4">from them</div> |
||||
|
<div class="w-1/4"></div> |
||||
|
<div class="w-1/4">to them</div> |
||||
|
</div> |
||||
|
<div |
||||
|
class="border-b border-slate-300 flex" |
||||
|
v-for="record in giveRecords" |
||||
|
:key="record.id" |
||||
|
> |
||||
|
<div class="w-1/4"> |
||||
|
{{ new Date(record.issuedAt).toLocaleString() }} |
||||
|
</div> |
||||
|
<div class="w-1/4"> |
||||
|
<span v-if="record.agentDid == contact.did"> |
||||
|
<div class="font-bold"> |
||||
|
{{ record.amount }} {{ record.unit }} |
||||
|
<span v-if="record.amountConfirmed" class="tooltip"> |
||||
|
<fa icon="circle-check" class="text-green-600 fa-fw ml-1" /> |
||||
|
<span class="tooltiptext">Confirmed</span> |
||||
|
</span> |
||||
|
<button v-else class="tooltip" @click="confirm(record)"> |
||||
|
<fa icon="circle" class="text-blue-600 fa-fw ml-1" /> |
||||
|
<span class="tooltiptext">Unconfirmed</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
<br /> |
||||
|
{{ record.description }} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="w-1/8"> |
||||
|
<span v-if="record.agentDid == contact.did"> |
||||
|
<fa icon="long-arrow-alt-left" class="text-slate-900 fa-fw ml-1" /> |
||||
|
</span> |
||||
|
<span v-else> |
||||
|
|
||||
|
<fa icon="long-arrow-alt-right" class="text-slate-900 fa-fw ml-1" /> |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="w-1/4"> |
||||
|
<span v-if="record.agentDid != contact.did"> |
||||
|
<div class="font-bold"> |
||||
|
{{ record.amount }} {{ record.unit }} |
||||
|
<span v-if="record.amountConfirmed" class="tooltip"> |
||||
|
<fa icon="circle-check" class="text-green-600 fa-fw ml-1" /> |
||||
|
<span class="tooltiptext">Confirmed</span> |
||||
|
</span> |
||||
|
<button v-else class="tooltip" @click="cannotConfirmMessage()"> |
||||
|
<fa icon="circle" class="text-slate-600 fa-fw ml-1" /> |
||||
|
<span class="tooltiptext">Unconfirmed</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
<br /> |
||||
|
{{ record.description }} |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div v-bind:class="computedAlertClassNames()"> |
||||
|
<button |
||||
|
class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2" |
||||
|
@click="onClickClose()" |
||||
|
> |
||||
|
<fa icon="xmark"></fa> |
||||
|
</button> |
||||
|
<h4 class="font-bold pr-5">{{ alertTitle }}</h4> |
||||
|
<p>{{ alertMessage }}</p> |
||||
|
</div> |
||||
|
</section> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts"> |
||||
|
import * as R from "ramda"; |
||||
|
import { Options, Vue } from "vue-class-component"; |
||||
|
|
||||
|
import { accountsDB, db } from "@/db"; |
||||
|
import { Contact } from "@/db/tables/contacts"; |
||||
|
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; |
||||
|
import { AppString } from "@/constants/app"; |
||||
|
import { accessToken, SimpleSigner } from "@/libs/crypto"; |
||||
|
import { |
||||
|
AgreeVerifiableCredential, |
||||
|
GiveServerRecord, GiveVerifiableCredential, |
||||
|
SCHEMA_ORG_CONTEXT, |
||||
|
} from "@/libs/endorserServer"; |
||||
|
import * as didJwt from "did-jwt"; |
||||
|
import { AxiosError } from "axios"; |
||||
|
|
||||
|
@Options({}) |
||||
|
export default class ContactsView extends Vue { |
||||
|
activeDid = ""; |
||||
|
contact: Contact | null = null; |
||||
|
giveRecords: Array<GiveServerRecord> = []; |
||||
|
|
||||
|
// 'created' hook runs when the Vue instance is first created |
||||
|
async created() { |
||||
|
await db.open(); |
||||
|
const contactDid = this.$route.query.contactDid as string; |
||||
|
this.contact = (await db.contacts.get(contactDid)) || null; |
||||
|
|
||||
|
const settings = await db.settings.get(MASTER_SETTINGS_KEY); |
||||
|
this.activeDid = settings?.activeDid || ""; |
||||
|
|
||||
|
if (this.activeDid && this.contact) { |
||||
|
this.loadGives(this.activeDid, this.contact); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async loadGives(activeDid: string, contact: Contact) { |
||||
|
// only load the private keys temporarily when needed |
||||
|
await accountsDB.open(); |
||||
|
const accounts = await accountsDB.accounts.toArray(); |
||||
|
const account = R.find((acc) => acc.did === activeDid, accounts); |
||||
|
const identity = JSON.parse(account?.identity || "undefined"); |
||||
|
|
||||
|
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER; |
||||
|
|
||||
|
// load all the time I have given to them |
||||
|
try { |
||||
|
let result = []; |
||||
|
|
||||
|
const url = |
||||
|
endorserApiServer + |
||||
|
"/api/v2/report/gives?agentDid=" + |
||||
|
encodeURIComponent(identity.did) + |
||||
|
"&recipientDid=" + |
||||
|
encodeURIComponent(contact.did); |
||||
|
const token = await accessToken(identity); |
||||
|
const headers = { |
||||
|
"Content-Type": "application/json", |
||||
|
Authorization: "Bearer " + token, |
||||
|
}; |
||||
|
const resp = await this.axios.get(url, { headers }); |
||||
|
if (resp.status === 200) { |
||||
|
result = resp.data.data; |
||||
|
} else { |
||||
|
console.log( |
||||
|
"Got bad response status & data of", |
||||
|
resp.status, |
||||
|
resp.data |
||||
|
); |
||||
|
this.alertTitle = "Error With Server"; |
||||
|
this.alertMessage = |
||||
|
"Got an error retrieving your given time from the server."; |
||||
|
this.isAlertVisible = true; |
||||
|
} |
||||
|
|
||||
|
const url2 = |
||||
|
endorserApiServer + |
||||
|
"/api/v2/report/gives?agentDid=" + |
||||
|
encodeURIComponent(contact.did) + |
||||
|
"&recipientDid=" + |
||||
|
encodeURIComponent(identity.did); |
||||
|
const token2 = await accessToken(identity); |
||||
|
const headers2 = { |
||||
|
"Content-Type": "application/json", |
||||
|
Authorization: "Bearer " + token2, |
||||
|
}; |
||||
|
const resp2 = await this.axios.get(url2, { headers: headers2 }); |
||||
|
if (resp2.status === 200) { |
||||
|
result = R.concat(result, resp2.data.data); |
||||
|
} else { |
||||
|
console.log( |
||||
|
"Got bad response status & data of", |
||||
|
resp2.status, |
||||
|
resp2.data |
||||
|
); |
||||
|
this.alertTitle = "Error With Server"; |
||||
|
this.alertMessage = |
||||
|
"Got an error retrieving your given time from the server."; |
||||
|
this.isAlertVisible = true; |
||||
|
} |
||||
|
|
||||
|
const sortedResult: Array<GiveServerRecord> = R.sort( |
||||
|
(a, b) => |
||||
|
new Date(b.issuedAt).getTime() - new Date(a.issuedAt).getTime(), |
||||
|
result |
||||
|
); |
||||
|
this.giveRecords = sortedResult; |
||||
|
} catch (error) { |
||||
|
this.alertTitle = "Error With Server"; |
||||
|
this.alertMessage = error as string; |
||||
|
this.isAlertVisible = true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async confirm(record: GiveServerRecord) { |
||||
|
// Make claim |
||||
|
// I use clone here because otherwise it gets a Proxy object. |
||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
||||
|
const origClaim: GiveVerifiableCredential = |
||||
|
R.clone(record.fullClaim); |
||||
|
if (record.fullClaim["@context"] == SCHEMA_ORG_CONTEXT) { |
||||
|
delete origClaim["@context"]; |
||||
|
} |
||||
|
origClaim["identifier"] = record.handleId; |
||||
|
const vcClaim: AgreeVerifiableCredential = { |
||||
|
"@context": SCHEMA_ORG_CONTEXT, |
||||
|
"@type": "AgreeAction", |
||||
|
object: origClaim, |
||||
|
}; |
||||
|
|
||||
|
// Make a payload for the claim |
||||
|
const vcPayload = { |
||||
|
vc: { |
||||
|
"@context": ["https://www.w3.org/2018/credentials/v1"], |
||||
|
type: ["VerifiableCredential"], |
||||
|
credentialSubject: vcClaim, |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
// Create a signature using private key of identity |
||||
|
await accountsDB.open(); |
||||
|
const accounts = await accountsDB.accounts.toArray(); |
||||
|
const account = R.find((acc) => acc.did === this.activeDid, accounts); |
||||
|
const identity = JSON.parse(account?.identity || "undefined"); |
||||
|
if (identity.keys[0].privateKeyHex !== null) { |
||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion |
||||
|
const privateKeyHex: string = identity.keys[0].privateKeyHex!; |
||||
|
const signer = await SimpleSigner(privateKeyHex); |
||||
|
const alg = undefined; |
||||
|
// Create a JWT for the request |
||||
|
const vcJwt: string = await didJwt.createJWT(vcPayload, { |
||||
|
alg: alg, |
||||
|
issuer: identity.did, |
||||
|
signer: signer, |
||||
|
}); |
||||
|
|
||||
|
// Make the xhr request payload |
||||
|
const payload = JSON.stringify({ jwtEncoded: vcJwt }); |
||||
|
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER; |
||||
|
const url = endorserApiServer + "/api/v2/claim"; |
||||
|
const token = await accessToken(identity); |
||||
|
const headers = { |
||||
|
"Content-Type": "application/json", |
||||
|
Authorization: "Bearer " + token, |
||||
|
}; |
||||
|
|
||||
|
try { |
||||
|
const resp = await this.axios.post(url, payload, { headers }); |
||||
|
//console.log("Got resp data:", resp.data); |
||||
|
if (resp.data?.success) { |
||||
|
record.amountConfirmed = origClaim.object?.amountOfThisGood || 1; |
||||
|
} |
||||
|
} catch (error) { |
||||
|
let userMessage = "There was an error. See logs for more info."; |
||||
|
const serverError = error as AxiosError; |
||||
|
if (serverError) { |
||||
|
if (serverError.message) { |
||||
|
userMessage = serverError.message; // Info for the user |
||||
|
} else { |
||||
|
userMessage = JSON.stringify(serverError.toJSON()); |
||||
|
} |
||||
|
} else { |
||||
|
userMessage = error as string; |
||||
|
} |
||||
|
// Now set that error for the user to see. |
||||
|
this.alertTitle = "Error With Server"; |
||||
|
this.alertMessage = userMessage; |
||||
|
this.isAlertVisible = true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
cannotConfirmMessage() { |
||||
|
this.alertTitle = "Not Allowed"; |
||||
|
this.alertMessage = "Only the recipient can confirm final receipt."; |
||||
|
this.isAlertVisible = true; |
||||
|
} |
||||
|
|
||||
|
alertTitle = ""; |
||||
|
alertMessage = ""; |
||||
|
isAlertVisible = false; |
||||
|
|
||||
|
public onClickClose() { |
||||
|
this.isAlertVisible = false; |
||||
|
this.alertTitle = ""; |
||||
|
this.alertMessage = ""; |
||||
|
} |
||||
|
|
||||
|
public computedAlertClassNames() { |
||||
|
return { |
||||
|
hidden: !this.isAlertVisible, |
||||
|
"dismissable-alert": true, |
||||
|
"bg-slate-100": true, |
||||
|
"p-5": true, |
||||
|
rounded: true, |
||||
|
"drop-shadow-lg": true, |
||||
|
absolute: true, |
||||
|
"top-3": true, |
||||
|
"inset-x-3": true, |
||||
|
"transition-transform": true, |
||||
|
"ease-in": true, |
||||
|
"duration-300": true, |
||||
|
}; |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
/* Tooltip from https://www.w3schools.com/css/css_tooltip.asp */ |
||||
|
/* Tooltip container */ |
||||
|
.tooltip { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ |
||||
|
} |
||||
|
|
||||
|
/* Tooltip text */ |
||||
|
.tooltip .tooltiptext { |
||||
|
visibility: hidden; |
||||
|
width: 200px; |
||||
|
background-color: black; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
padding: 5px 0; |
||||
|
border-radius: 6px; |
||||
|
|
||||
|
position: absolute; |
||||
|
z-index: 1; |
||||
|
} |
||||
|
|
||||
|
/* Show the tooltip text when you mouse over the tooltip container */ |
||||
|
.tooltip:hover .tooltiptext { |
||||
|
visibility: visible; |
||||
|
} |
||||
|
.tooltip:hover .tooltiptext-left { |
||||
|
visibility: visible; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue