trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 10 Releases 5 Wiki Activity
Labels Milestones
New Pull Request

do not share the invite JWT with the server; always keep it on the client, generated for P2P relay #132

Open
trentlarson wants to merge 4 commits from invite-client-side into qrcode-reboot
Conversation 0 Commits 4 Files Changed 5
5 changed files with 153 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/views/ContactQRScanShowView.vue
  2. 211
      src/views/ContactsView.vue
  3. 40
      src/views/HelpView.vue
  4. 41
      src/views/InviteOneView.vue
  5. 5
      test-playwright/05-invite.spec.ts

2
src/views/ContactQRScanShowView.vue
View File

@ -16,7 +16,7 @@
<!-- Heading --> <!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4"> <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
Your Contact Info Share Contact Info
</h1> </h1>
<p <p
v-if="!givenName" v-if="!givenName"

211
src/views/ContactsView.vue
View File

@ -92,7 +92,7 @@
<div v-if="contacts.length > 0" class="flex justify-between"> <div v-if="contacts.length > 0" class="flex justify-between">
<div class="w-full text-left"> <div class="w-full text-left">
<div v-if="!showGiveNumbers"> <div>
<input <input
type="checkbox" type="checkbox"
:checked="contactsSelected.length === contacts.length" :checked="contactsSelected.length === contacts.length"
@ -105,7 +105,6 @@
" "
/> />
<button <button
v-if="!showGiveNumbers"
href="" href=""
class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md" class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
:style=" :style="
@ -127,43 +126,43 @@
</div> </div>
</div> </div>
<div class="w-full text-right"> <div v-if="!showGiveNumbers" class="w-full text-right">
<button <button
href="" href=""
class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md" class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
@click="toggleShowContactAmounts()" @click="toggleShowContactAmounts()"
> >
{{ See Hours, Offer, etc
showGiveNumbers ? "Hide Hours, Offer, etc" : "See Hours, Offer, etc"
}}
</button> </button>
</div> </div>
</div> <div v-else class="w-full text-right">
<div v-if="showGiveNumbers" class="flex justify-between mt-1"> <span class="text-sm">
<div class="w-full text-right"> Only the most recent From/To hours show in buttons. To see more,
In the following, only the most recent hours are included. To see more, click
click <span
<span 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 px-1 py-1 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 px-1 py-1 rounded-md" >
> <font-awesome icon="file-lines" class="fa-fw" />
<font-awesome icon="file-lines" class="fa-fw" /> </span>
</span> </span>
<br /> <br />
<button <span>
href="" <button
class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1" href=""
:class="showGiveAmountsClassNames()" class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1"
@click="toggleShowGiveTotals()" :class="showGiveAmountsClassNames()"
> @click="toggleShowGiveTotals()"
{{ >
showGiveTotals {{
? "Totals" showGiveTotals
: showGiveConfirmed ? "Totals"
? "Confirmed Amounts" : showGiveConfirmed
: "Unconfirmed Amounts" ? "Confirmed Amounts"
}} : "Unconfirmed Amounts"
<font-awesome icon="left-right" class="fa-fw" /> }}
</button> <font-awesome icon="left-right" class="fa-fw" />
</button>
</span>
</div> </div>
</div> </div>
@ -179,79 +178,82 @@
class="border-b border-slate-300 pt-1 pb-1" class="border-b border-slate-300 pt-1 pb-1"
data-testId="contactListItem" data-testId="contactListItem"
> >
<div class="grow overflow-hidden"> <div class="flex justify-between items-start">
<div class="flex items-center gap-3"> <span class="grow overflow-hidden">
<input <span class="flex items-center gap-3">
v-if="!showGiveNumbers" <input
type="checkbox" type="checkbox"
:checked="contactsSelected.includes(contact.did)" :checked="contactsSelected.includes(contact.did)"
class="ml-2 h-6 w-6 flex-shrink-0" class="ml-2 h-6 w-6 flex-shrink-0"
data-testId="contactCheckOne" data-testId="contactCheckOne"
@click=" @click="
contactsSelected.includes(contact.did) contactsSelected.includes(contact.did)
? contactsSelected.splice( ? contactsSelected.splice(
contactsSelected.indexOf(contact.did), contactsSelected.indexOf(contact.did),
1, 1,
) )
: contactsSelected.push(contact.did) : contactsSelected.push(contact.did)
" "
/> />
<EntityIcon <EntityIcon
:contact="contact" :contact="contact"
:icon-size="48" :icon-size="48"
class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden" class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
@click="showLargeIdenticon = contact" @click="showLargeIdenticon = contact"
/> />
<h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0"> <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
{{ contactNameNonBreakingSpace(contact.name) }} {{ contactNameNonBreakingSpace(contact.name) }}
</h2> </h2>
<span> <span>
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<router-link <router-link
:to="{ :to="{
path: '/did/' + encodeURIComponent(contact.did), path: '/did/' + encodeURIComponent(contact.did),
}" }"
title="See more about this person" title="See more about this person"
> >
<font-awesome <font-awesome
icon="circle-info" icon="circle-info"
class="text-xl text-blue-500" class="text-xl text-blue-500"
/> />
</router-link> </router-link>
<span class="text-sm overflow-hidden">{{ <span class="text-sm overflow-hidden">{{
libsUtil.shortDid(contact.did) libsUtil.shortDid(contact.did)
}}</span> }}</span>
</div> </div>
<div class="text-sm"> <div class="text-sm">
{{ contact.notes }} {{ contact.notes }}
</div> </div>
</span>
</span> </span>
</div> </span>
<div <span
v-if="showGiveNumbers && contact.did != activeDid" v-if="contact.did != activeDid"
class="ml-auto flex gap-1.5 mt-2" class="flex gap-1.5 ml-2"
> >
<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"
:title="givenToMeDescriptions[contact.did] || ''" :title="givenToMeDescriptions[contact.did] || ''"
@click="confirmShowGiftedDialog(contact.did, activeDid)" @click="confirmShowGiftedDialog(contact.did, activeDid)"
> >
From: From&hellip;
<br /> <br />
{{ <span v-if="showGiveNumbers">
/* eslint-disable prettier/prettier */ {{
showGiveTotals /* eslint-disable prettier/prettier */
? ((givenToMeConfirmed[contact.did] || 0) showGiveTotals
+ (givenToMeUnconfirmed[contact.did] || 0)) ? ((givenToMeConfirmed[contact.did] || 0)
: showGiveConfirmed + (givenToMeUnconfirmed[contact.did] || 0))
? (givenToMeConfirmed[contact.did] || 0) : showGiveConfirmed
: (givenToMeUnconfirmed[contact.did] || 0) ? (givenToMeConfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */ : (givenToMeUnconfirmed[contact.did] || 0)
}} /* eslint-enable prettier/prettier */
}}
</span>
</button> </button>
<button <button
@ -259,18 +261,20 @@
:title="givenByMeDescriptions[contact.did] || ''" :title="givenByMeDescriptions[contact.did] || ''"
@click="confirmShowGiftedDialog(activeDid, contact.did)" @click="confirmShowGiftedDialog(activeDid, contact.did)"
> >
To: To&hellip;
<br /> <br />
{{ <span v-if="showGiveNumbers">
/* eslint-disable prettier/prettier */ {{
showGiveTotals /* eslint-disable prettier/prettier */
showGiveTotals
? ((givenByMeConfirmed[contact.did] || 0) ? ((givenByMeConfirmed[contact.did] || 0)
+ (givenByMeUnconfirmed[contact.did] || 0)) + (givenByMeUnconfirmed[contact.did] || 0))
: showGiveConfirmed : showGiveConfirmed
? (givenByMeConfirmed[contact.did] || 0) ? (givenByMeConfirmed[contact.did] || 0)
: (givenByMeUnconfirmed[contact.did] || 0) : (givenByMeUnconfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */ /* eslint-enable prettier/prettier */
}} }}
</span>
</button> </button>
<button <button
@ -291,7 +295,7 @@
> >
<font-awesome icon="file-lines" class="fa-fw" /> <font-awesome icon="file-lines" class="fa-fw" />
</router-link> </router-link>
</div> </span>
</div> </div>
</li> </li>
</ul> </ul>
@ -299,7 +303,6 @@
<div v-if="contacts.length > 0" class="mt-2 w-full text-left"> <div v-if="contacts.length > 0" class="mt-2 w-full text-left">
<input <input
v-if="!showGiveNumbers"
type="checkbox" type="checkbox"
:checked="contactsSelected.length === contacts.length" :checked="contactsSelected.length === contacts.length"
class="align-middle ml-2 h-6 w-6" class="align-middle ml-2 h-6 w-6"
@ -311,7 +314,6 @@
" "
/> />
<button <button
v-if="!showGiveNumbers"
href="" href=""
class="text-md 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-3 px-3 py-1.5 rounded-md" class="text-md 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-3 px-3 py-1.5 rounded-md"
:style=" :style="
@ -448,7 +450,6 @@ export default class ContactsView extends Vue {
await this.processContactJwt(); await this.processContactJwt();
await this.processInviteJwt(); await this.processInviteJwt();
this.showGiveNumbers = !!settings.showContactGivesInline;
this.hideRegisterPromptOnNewContact = this.hideRegisterPromptOnNewContact =
!!settings.hideRegisterPromptOnNewContact; !!settings.hideRegisterPromptOnNewContact;

40
src/views/HelpView.vue
View File

@ -502,27 +502,27 @@
then don't use it. then don't use it.
<br /> <br />
As for data & privacy: As for data & privacy:
<ul class="list-disc list-outside ml-4">
<li>
If using notifications, a server stores push token data. That can be revoked at any time
by disabling notifications on the Profile <font-awesome icon="circle-user" class="fa-fw" /> page.
</li>
<li>
If sending images, a server stores them, too. They can be removed by editing the claim
and deleting them.
</li>
<li>
If sending other partner system data (eg. to Trustroots) a public key and message
data are stored on a server. Those can be removed via direct personal request.
</li>
<li>
For all other claim data,
<a href="https://endorser.ch/privacy-policy" target="_blank" class="text-blue-500">
the Endorser Service has this Privacy Policy.
</a>
</li>
</ul>
</p> </p>
<ul class="list-disc list-outside ml-4">
<li>
If using notifications, a server stores push token data. That can be revoked at any time
by disabling notifications on the Profile <font-awesome icon="circle-user" class="fa-fw" /> page.
</li>
<li>
If sending images, a server stores them, too. They can be removed by editing the claim
and deleting them.
</li>
<li>
If sending other partner system data (eg. to Trustroots) a public key and message
data are stored on a server. Those can be removed via direct personal request.
</li>
<li>
For all other claim data,
<a href="https://endorser.ch/privacy-policy" target="_blank" class="text-blue-500">
the Endorser Service has this Privacy Policy.
</a>
</li>
</ul>
<h2 class="text-xl font-semibold">How can I contribute?</h2> <h2 class="text-xl font-semibold">How can I contribute?</h2>
<p> <p>

41
src/views/InviteOneView.vue
View File

@ -14,7 +14,7 @@
</div> </div>
<!-- Heading --> <!-- Heading -->
<h1 class="text-4xl text-center font-light">Invitations</h1> <h1 class="text-4xl text-center font-light">Single Invitations</h1>
<ul class="ml-8 mt-4 list-outside list-disc w-5/6"> <ul class="ml-8 mt-4 list-outside list-disc w-5/6">
<li> <li>
@ -73,17 +73,15 @@
invite.expiresAt > new Date().toISOString() invite.expiresAt > new Date().toISOString()
" "
class="text-center text-blue-500 cursor-pointer" class="text-center text-blue-500 cursor-pointer"
:title="inviteLink(invite.jwt)" title="Click to copy invite link"
@click=" @click="copyInviteAndNotify(invite)"
copyInviteAndNotify(invite.inviteIdentifier, invite.jwt)
"
> >
{{ getTruncatedInviteId(invite.inviteIdentifier) }} {{ getTruncatedInviteId(invite.inviteIdentifier) }}
</span> </span>
<span <span
v-else v-else
class="text-center text-slate-500 cursor-pointer" class="text-center text-slate-500 cursor-pointer"
:title="inviteLink(invite.jwt)" title="Click to see invite details"
@click=" @click="
showInvite( showInvite(
invite.inviteIdentifier, invite.inviteIdentifier,
@ -120,6 +118,8 @@
@click="deleteInvite(invite.inviteIdentifier, invite.notes)" @click="deleteInvite(invite.inviteIdentifier, invite.notes)"
/> />
</td> </td>
<td class="hidden" :data-testId="invite.jwt" aria-hidden="true">
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -146,7 +146,7 @@ import { logger } from "../utils/logger";
interface Invite { interface Invite {
inviteIdentifier: string; inviteIdentifier: string;
expiresAt: string; expiresAt: string;
jwt: string; jwt?: string; // only used to store a JWT for testing, after the link is clicked
notes: string; notes: string;
redeemedAt: string | null; redeemedAt: string | null;
redeemedBy: string | null; redeemedBy: string | null;
@ -220,18 +220,27 @@ export default class InviteOneView extends Vue {
return `${redeemedBy.slice(0, 13)}...${redeemedBy.slice(-3)}`; return `${redeemedBy.slice(0, 13)}...${redeemedBy.slice(-3)}`;
} }
inviteLink(jwt: string): string { inviteLink(jwt: string | undefined): string {
if (!jwt) return "Click to set JWT link";
return APP_SERVER + "/invite-one-accept/" + jwt; return APP_SERVER + "/invite-one-accept/" + jwt;
} }
copyInviteAndNotify(inviteId: string, jwt: string) { async copyInviteAndNotify(invite: Invite) {
useClipboard().copy(this.inviteLink(jwt)); const expiresIn = (new Date(invite.expiresAt).getTime() - Date.now()) / 1000;
const inviteJwt = await createInviteJwt(
this.activeDid,
undefined,
invite.inviteIdentifier,
expiresIn,
);
invite.jwt = inviteJwt; // set for testing
useClipboard().copy(this.inviteLink(inviteJwt));
this.$notify( this.$notify(
{ {
group: "alert", group: "alert",
type: "success", type: "success",
title: "Copied", title: "Copied",
text: "Your clipboard now contains the link for invite " + inviteId, text: "Your clipboard now contains the link for invite " + invite.inviteIdentifier,
}, },
5000, 5000,
); );
@ -295,22 +304,14 @@ export default class InviteOneView extends Vue {
}, },
}; };
} }
const expiresIn = (new Date(expiresAt).getTime() - Date.now()) / 1000;
const inviteJwt = await createInviteJwt(
this.activeDid,
undefined,
inviteIdentifier,
expiresIn,
);
await axios.post( await axios.post(
this.apiServer + "/api/userUtil/invite", this.apiServer + "/api/userUtil/invite",
{ inviteJwt: inviteJwt, notes: notes }, { inviteIdentifier: inviteIdentifier, notes: notes, expiresAt: expiresAt },
{ headers }, { headers },
); );
const newInvite = { const newInvite = {
inviteIdentifier: inviteIdentifier, inviteIdentifier: inviteIdentifier,
expiresAt: expiresAt, expiresAt: expiresAt,
jwt: inviteJwt,
notes: notes, notes: notes,
redeemedAt: null, redeemedAt: null,
redeemedBy: null, redeemedBy: null,

5
test-playwright/05-invite.spec.ts
View File

@ -44,6 +44,11 @@ test('Check User 0 can invite someone', async ({ page }) => {
await expect(page.locator('div[role="alert"] button:has-text("Yes")')).toBeHidden(); await expect(page.locator('div[role="alert"] button:has-text("Yes")')).toBeHidden();
// check that the invite is in the list // check that the invite is in the list
const newInviteRow = page.locator(`tr:has(td:has-text("Neighbor ${neighborNum}"))`);
await expect(newInviteRow).toBeVisible();
// click on the link in the first column, which generates the JWT in the other column
await newInviteRow.locator('td:first-child').click();
const newInviteLine = page.locator(`td:has-text("Neighbor ${neighborNum}")`); const newInviteLine = page.locator(`td:has-text("Neighbor ${neighborNum}")`);
await expect(newInviteLine).toBeVisible(); await expect(newInviteLine).toBeVisible();
// retrieve the link from the title // retrieve the link from the title

Write Preview
Loading…
Cancel
Save