9 changed files with 390 additions and 32 deletions
@ -0,0 +1,118 @@ |
|||
<template> |
|||
<div v-if="visible" class="dialog-overlay"> |
|||
<div class="dialog"> |
|||
<h1 class="text-xl font-bold text-center mb-4">{{ title }}</h1> |
|||
|
|||
{{ message }} |
|||
<input |
|||
type="text" |
|||
placeholder="Name" |
|||
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2" |
|||
v-model="text" |
|||
/> |
|||
|
|||
<!-- Add date selection element --> |
|||
Expiration |
|||
<input |
|||
type="date" |
|||
class="block rounded border border-slate-400 mb-4 px-3 py-2" |
|||
v-model="expiresAt" |
|||
/> |
|||
|
|||
<div class="mt-8"> |
|||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2"> |
|||
<button |
|||
type="button" |
|||
class="block w-full text-center text-lg font-bold 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-2 py-3 rounded-md mb-2" |
|||
@click="onClickSaveChanges()" |
|||
> |
|||
Save |
|||
</button> |
|||
<!-- SHOW ME instead while processing saving changes --> |
|||
<button |
|||
type="button" |
|||
class="block w-full text-center text-md 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-2 py-3 rounded-md mb-2" |
|||
@click="onClickCancel()" |
|||
> |
|||
Cancel |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { Vue, Component } from "vue-facing-decorator"; |
|||
|
|||
import { NotificationIface } from "@/constants/app"; |
|||
|
|||
@Component |
|||
export default class InviteDialog extends Vue { |
|||
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|||
|
|||
callback: (text: string, expiresAt: string) => void = () => {}; |
|||
message = ""; |
|||
text = ""; |
|||
title = ""; |
|||
visible = false; |
|||
expiresAt = new Date(Date.now() + 1000 * 60 * 60 * 24 * 30 * 3) |
|||
.toISOString() |
|||
.substring(0, 10); |
|||
|
|||
async open( |
|||
title: string, |
|||
message: string, |
|||
aCallback: (text: string, expiresAt: string) => void, |
|||
) { |
|||
this.callback = aCallback; |
|||
this.title = title; |
|||
this.message = message; |
|||
this.visible = true; |
|||
} |
|||
|
|||
async onClickSaveChanges() { |
|||
if (!this.expiresAt) { |
|||
this.$notify( |
|||
{ |
|||
group: "alert", |
|||
type: "warning", |
|||
title: "Needs Expiration", |
|||
text: "You must select an expiration date.", |
|||
}, |
|||
5000, |
|||
); |
|||
} else { |
|||
this.callback(this.text, this.expiresAt); |
|||
this.visible = false; |
|||
} |
|||
} |
|||
|
|||
onClickCancel() { |
|||
this.visible = false; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
.dialog-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 1.5rem; |
|||
} |
|||
|
|||
.dialog { |
|||
background-color: white; |
|||
padding: 1rem; |
|||
border-radius: 0.5rem; |
|||
width: 100%; |
|||
max-width: 500px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,195 @@ |
|||
<template> |
|||
<QuickNav selected="Invite" /> |
|||
<TopMessage /> |
|||
|
|||
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> |
|||
<!-- Back --> |
|||
<div class="text-lg text-center font-light relative px-7"> |
|||
<h1 |
|||
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" |
|||
@click="$router.back()" |
|||
> |
|||
<fa icon="chevron-left" class="fa-fw"></fa> |
|||
</h1> |
|||
</div> |
|||
|
|||
<!-- Heading --> |
|||
<h1 class="text-4xl text-center font-light">Invitations</h1> |
|||
|
|||
<!-- New Project --> |
|||
<button |
|||
v-if="isRegistered" |
|||
class="fixed right-6 top-12 text-center text-4xl leading-none bg-blue-600 text-white w-14 py-2.5 rounded-full" |
|||
@click="createInvite()" |
|||
> |
|||
<fa icon="plus" class="fa-fw"></fa> |
|||
</button> |
|||
|
|||
<InviteDialog ref="inviteDialog" /> |
|||
|
|||
<!-- Invites Table --> |
|||
<div v-if="invites.length" class="mt-6"> |
|||
<table class="min-w-full bg-white"> |
|||
<thead> |
|||
<tr> |
|||
<th class="py-2">ID</th> |
|||
<th class="py-2">Notes</th> |
|||
<th class="py-2">Expires At</th> |
|||
<th class="py-2">Redeemed By</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr |
|||
v-for="invite in invites" |
|||
:key="invite.inviteIdentifier" |
|||
class="border-t" |
|||
> |
|||
<td class="py-2 text-center"> |
|||
{{ getTruncatedInviteId(invite.inviteIdentifier) }} |
|||
</td> |
|||
<td class="py-2 text-left">{{ invite.notes }}</td> |
|||
<td class="py-2 text-center"> |
|||
{{ invite.expiresAt.substring(0, 10) }} |
|||
</td> |
|||
<td class="py-2 text-center"> |
|||
{{ getTruncatedRedeemedBy(invite.redeemedBy) }} |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<p v-else class="mt-6 text-center">No invites found.</p> |
|||
</section> |
|||
</template> |
|||
<script lang="ts"> |
|||
import { Component, Vue } from "vue-facing-decorator"; |
|||
import axios from "axios"; |
|||
|
|||
import { db, retrieveSettingsForActiveAccount } from "../db"; |
|||
import QuickNav from "@/components/QuickNav.vue"; |
|||
import TopMessage from "@/components/TopMessage.vue"; |
|||
import InviteDialog from "@/components/InviteDialog.vue"; |
|||
import { NotificationIface } from "@/constants/app"; |
|||
import { createInviteJwt, getHeaders } from "@/libs/endorserServer"; |
|||
|
|||
interface Invite { |
|||
inviteIdentifier: string; |
|||
expiresAt: string; |
|||
notes: string; |
|||
redeemedBy: string | null; |
|||
} |
|||
|
|||
@Component({ |
|||
components: { QuickNav, TopMessage, InviteDialog }, |
|||
}) |
|||
export default class InviteOneView extends Vue { |
|||
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|||
|
|||
invites: Invite[] = []; |
|||
activeDid: string = ""; |
|||
apiServer: string = ""; |
|||
isRegistered: boolean = false; |
|||
|
|||
async mounted() { |
|||
try { |
|||
await db.open(); |
|||
const settings = await retrieveSettingsForActiveAccount(); |
|||
this.activeDid = settings.activeDid || ""; |
|||
this.apiServer = settings.apiServer || ""; |
|||
this.isRegistered = !!settings.isRegistered; |
|||
|
|||
const headers = await getHeaders(this.activeDid); |
|||
const response = await axios.get( |
|||
this.apiServer + "/api/userUtil/invite", |
|||
{ headers }, |
|||
); |
|||
this.invites = response.data.data; |
|||
} catch (error) { |
|||
console.error("Error fetching invites:", error); |
|||
this.$notify( |
|||
{ |
|||
group: "alert", |
|||
type: "danger", |
|||
title: "Load Error", |
|||
text: "Got an error loading your invites.", |
|||
}, |
|||
5000, |
|||
); |
|||
} |
|||
} |
|||
|
|||
getTruncatedInviteId(inviteId: string): string { |
|||
if (inviteId.length <= 9) return inviteId; |
|||
return `${inviteId.slice(0, 3)}...${inviteId.slice(-3)}`; |
|||
} |
|||
|
|||
getTruncatedRedeemedBy(redeemedBy: string | null): string { |
|||
if (!redeemedBy) return "Not yet redeemed"; |
|||
if (redeemedBy.length <= 19) return redeemedBy; |
|||
return `${redeemedBy.slice(0, 13)}...${redeemedBy.slice(-3)}`; |
|||
} |
|||
|
|||
async createInvite() { |
|||
(this.$refs.inviteDialog as InviteDialog).open( |
|||
"Invitation Note", |
|||
`These notes are only for your use, to make comments for a link to recall later if redeemed by someone. |
|||
Note that this is sent to the server.`, |
|||
async (notes, expiresAt) => { |
|||
try { |
|||
const inviteIdentifier = |
|||
Math.random().toString(36).substring(2) + |
|||
Math.random().toString(36).substring(2) + |
|||
Math.random().toString(36).substring(2); |
|||
const headers = await getHeaders(this.activeDid); |
|||
if (!expiresAt) { |
|||
throw { |
|||
response: { |
|||
data: { error: "You must select an expiration date." }, |
|||
}, |
|||
}; |
|||
} |
|||
const expiresIn = |
|||
(new Date(expiresAt).getTime() - new Date().getTime()) / 1000; |
|||
const inviteJwt = await createInviteJwt( |
|||
this.activeDid, |
|||
undefined, |
|||
inviteIdentifier, |
|||
expiresIn, |
|||
); |
|||
await axios.post( |
|||
this.apiServer + "/api/userUtil/invite", |
|||
{ inviteJwt: inviteJwt, notes: notes }, |
|||
{ headers }, |
|||
); |
|||
this.invites.push({ |
|||
inviteIdentifier: inviteIdentifier, |
|||
expiresAt: expiresAt, |
|||
notes: notes, |
|||
redeemedBy: null, |
|||
}); |
|||
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
|||
} catch (error: any) { |
|||
console.error("Error creating invite:", error); |
|||
let message = "Got an error creating your invite."; |
|||
if ( |
|||
error.response && |
|||
error.response.data && |
|||
error.response.data.error |
|||
) { |
|||
message = error.response.data.error; |
|||
} |
|||
this.$notify( |
|||
{ |
|||
group: "alert", |
|||
type: "danger", |
|||
title: "Error Creating Invite", |
|||
text: message, |
|||
}, |
|||
5000, |
|||
); |
|||
} |
|||
}, |
|||
); |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue