You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.1 KiB
107 lines
3.1 KiB
6 months ago
|
<template>
|
||
|
|
<QuickNav />
|
||
|
|
<TopMessage />
|
||
|
|
|
||
|
|
<!-- CONTENT -->
|
||
|
|
<section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
|
||
|
|
<!-- Breadcrumb -->
|
||
|
|
<div>
|
||
|
|
<!-- 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" />
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Heading -->
|
||
|
|
<h1 id="ViewHeading" class="text-4xl text-center font-light">
|
||
|
|
Share Your Contact Info
|
||
|
|
</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="flex justify-center mt-8">
|
||
|
|
<button
|
||
|
|
class="block w-fit text-center text-lg font-bold 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"
|
||
|
|
@click="onClickShare()"
|
||
|
|
>
|
||
|
|
Copy to Clipboard
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="mt-8">Click to copy your info, then send it to them.</div>
|
||
|
|
<div>
|
||
|
|
They will paste it in the input box on the Contacts
|
||
|
|
<fa icon="users" /> screen.
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import * as R from "ramda";
|
||
|
|
import { Component, Vue } from "vue-facing-decorator";
|
||
|
|
import { Router } from "vue-router";
|
||
|
|
import { useClipboard } from "@vueuse/core";
|
||
|
|
|
||
|
|
import QuickNav from "@/components/QuickNav.vue";
|
||
|
|
import TopMessage from "@/components/TopMessage.vue";
|
||
|
|
import { NotificationIface } from "@/constants/app";
|
||
|
|
import { accountsDB, db } from "@/db/index";
|
||
|
|
import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
|
||
|
|
import { generateEndorserJwtForAccount } from "@/libs/endorserServer";
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
components: { QuickNav, TopMessage },
|
||
|
|
})
|
||
|
|
export default class ShareMyContactInfoView extends Vue {
|
||
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void;
|
||
|
|
|
||
|
|
async onClickShare() {
|
||
|
|
await db.open();
|
||
|
|
const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
|
||
|
|
const activeDid = settings?.activeDid || "";
|
||
|
|
const givenName = settings?.firstName || "";
|
||
|
|
const isRegistered = !!settings?.isRegistered;
|
||
|
|
const profileImageUrl = settings?.profileImageUrl || "";
|
||
|
|
|
||
|
|
await accountsDB.open();
|
||
|
|
const accounts = await accountsDB.accounts.toArray();
|
||
|
|
const account = R.find((acc) => acc.did === activeDid, accounts);
|
||
|
|
|
||
|
|
if (account) {
|
||
|
|
const message = await generateEndorserJwtForAccount(
|
||
|
|
account,
|
||
|
|
isRegistered,
|
||
|
|
givenName,
|
||
|
|
profileImageUrl,
|
||
|
|
);
|
||
|
|
useClipboard()
|
||
|
|
.copy(message)
|
||
|
|
.then(() => {
|
||
|
|
this.$notify(
|
||
|
|
{
|
||
|
|
group: "alert",
|
||
|
|
type: "info",
|
||
|
|
title: "Copied",
|
||
|
|
text: "Those contacts were copied to the clipboard. Have them paste it in the box on their 'Contacts' screen.",
|
||
|
|
},
|
||
|
|
5000,
|
||
|
|
);
|
||
|
|
});
|
||
|
|
(this.$router as Router).push({ name: "contacts" });
|
||
|
|
} else {
|
||
|
|
this.$notify(
|
||
|
|
{
|
||
|
|
group: "alert",
|
||
|
|
type: "error",
|
||
|
|
title: "Error",
|
||
|
|
text: "No account was found for the active DID.",
|
||
|
|
},
|
||
|
|
5000,
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|