prompt for name when showing info, and provide a "copy" page when remote

src/views/ShareMyContactInfoView.vue

@@ -0,0 +1,106 @@
+<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>