crowd-funder-for-time-pwa/src/views/ContactQRScanShowView.vue

<template>
  <QuickNav selected="Profile"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24">
    <!-- Heading -->
    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
      Your Contact Info
    </h1>

    <!--
      Play with display options: https://qr-code-styling.com/
      See docs: https://www.npmjs.com/package/qr-code-generator-vue3
    -->
    <QRCodeVue3
      :value="this.qrValue"
      :cornersSquareOptions="{ type: 'extra-rounded' }"
      :dotsOptions="{ type: 'square' }"
      class="flex justify-center"
    />

    <h1 class="text-4xl text-center font-light pt-4">Scan Contact Info</h1>
    <qrcode-stream @detect="onScanDetect" @error="onScanError" />
  </section>
</template>

<script lang="ts">
import QRCodeVue3 from "qr-code-generator-vue3";
import { Component, Vue } from "vue-facing-decorator";
import { QrcodeStream } from "vue-qrcode-reader";

import { accountsDB, db } from "@/db/index";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import * as R from "ramda";
import { SimpleSigner } from "@/libs/crypto";
import * as didJwt from "did-jwt";
import QuickNav from "@/components/QuickNav.vue";
import { Account } from "@/db/tables/accounts";
import {
  CONTACT_URL_PREFIX,
  ENDORSER_JWT_URL_LOCATION,
} from "@/libs/endorserServer";

// eslint-disable-next-line @typescript-eslint/no-var-requires
const Buffer = require("buffer/").Buffer;

interface Notification {
  group: string;
  type: string;
  title: string;
  text: string;
}

@Component({
  components: {
    QrcodeStream,
    QRCodeVue3,
    QuickNav,
  },
})
export default class ContactQRScanShow extends Vue {
  $notify!: (notification: Notification, timeout?: number) => void;

  activeDid = "";
  apiServer = "";
  qrValue = "";

  public async getIdentity(activeDid: string) {
    await accountsDB.open();
    const accounts = await accountsDB.accounts.toArray();
    const account: Account | undefined = R.find(
      (acc) => acc.did === activeDid,
      accounts,
    );
    const identity = JSON.parse(account?.identity || "null");

    if (!identity) {
      throw new Error(
        "Attempted to load Give records with no identity available.",
      );
    }
    return identity;
  }

  async created() {
    await db.open();
    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
    this.activeDid = settings?.activeDid || "";
    this.apiServer = settings?.apiServer || "";

    await accountsDB.open();
    const accounts = await accountsDB.accounts.toArray();
    const account = R.find((acc) => acc.did === this.activeDid, accounts);
    if (!account) {
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "",
          text: "You have no identity yet.",
        },
        -1,
      );
    } else {
      const identity = await this.getIdentity(this.activeDid);
      const publicKeyHex = identity.keys[0].publicKeyHex;
      const publicEncKey = Buffer.from(publicKeyHex, "hex").toString("base64");
      const contactInfo = {
        iat: Date.now(),
        iss: this.activeDid,
        own: {
          name: (settings?.firstName || "") + " " + (settings?.lastName || ""),
          publicEncKey,
        },
      };

      const alg = undefined;
      const privateKeyHex: string = identity.keys[0].privateKeyHex;
      const signer = await SimpleSigner(privateKeyHex);
      // create a JWT for the request
      const vcJwt: string = await didJwt.createJWT(contactInfo, {
        alg: alg,
        issuer: identity.did,
        signer: signer,
      });
      const viewPrefix = CONTACT_URL_PREFIX + ENDORSER_JWT_URL_LOCATION;
      this.qrValue = viewPrefix + vcJwt;
    }
  }

  /**
   *
   * @param content is the result of a QR scan, an array with one item with a rawValue property
   */
  // Unfortunately, there are not typescript definitions for the qrcode-stream component yet.
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  onScanDetect(content: any) {
    if (content[0]?.rawValue) {
      console.log("onDetect", content[0].rawValue);
      localStorage.setItem("contactEndorserUrl", content[0].rawValue);
      this.$router.push({ name: "contacts" });
    } else {
      this.$notify(
        {
          group: "alert",
          type: "warning",
          title: "Invalid Contact QR Code",
          text: "No QR code detected with contact information.",
        },
        -1,
      );
    }
  }

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  onScanError(error: any) {
    console.log("Scan was invalid:", error);
    this.$notify(
      {
        group: "alert",
        type: "warning",
        title: "Invalid Scan",
        text: "The scan was invalid.",
      },
      -1,
    );
  }
}
</script>