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

<template>
  <QuickNav selected="Profile" />
  <!-- CONTENT -->
  <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 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
      Seed Backup
    </h1>

    <div class="flex justify-between py-2">
      <span />
      <span>
        <router-link
          :to="{ name: 'help' }"
          class="text-xs 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-1.5 py-1 rounded-md ml-1"
        >
          Help
        </router-link>
      </span>
    </div>

    <div v-if="activeAccount">
      <p class="text-center mb-4">
        <b class="text-red-600">BEWARE!</b> Anyone who has this seed phrase will
        be able impersonate you and take over any digital holdings based on it.
        Reveal it when you are somewhere private, when only you can see your
        screen, and record it somewhere only you have access. A password manager
        is a good idea, and so is a piece of paper in a vault.
        <i
          >We recommend you do NOT take a screenshot or send it to any online
          service.</i
        >
      </p>

      <p v-if="numAccounts > 1">
        <b class="text-orange-600">Note:</b> You have more than one identifier
        stored in this browser. If they are all based on the same seed as the
        current identifier, this one backup is sufficient, as long as you also
        record the derivation path. However, if you have different seeds for
        other identifiers, you will have to back them up separately.
      </p>

      <div class="bg-slate-100 rounded-md overflow-hidden p-4 mb-4">
        <p v-if="showSeed" class="text-center text-slate-700 mt-2">
          {{ activeAccount.mnemonic }}
          <button
            v-show="!showCopiedSeed"
            @click="
              doCopyTwoSecRedo(
                activeAccount.mnemonic as string,
                () => (showCopiedSeed = !showCopiedSeed),
              )
            "
          >
            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
          </button>
          <span v-show="showCopiedSeed" class="text-sm text-green-500">
            Copied
          </span>
          <br />
          <br />
          Derivation Path: {{ activeAccount.derivationPath }}
          <button
            v-show="!showCopiedDeri"
            @click="
              doCopyTwoSecRedo(
                activeAccount.derivationPath as string,
                () => (showCopiedDeri = !showCopiedDeri),
              )
            "
          >
            <fa icon="copy" class="text-slate-400 fa-fw"></fa>
          </button>
          <span v-show="showCopiedDeri" class="text-sm text-green-500"
            >Copied</span
          >
        </p>
        <button
          v-else
          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-1.5 py-2 rounded-md"
          @click="showSeed = true"
        >
          Reveal my Seed Phrase
        </button>
      </div>
    </div>
    <div v-else>You do not have an active identifier.</div>
  </section>
</template>

<script lang="ts">
import * as R from "ramda";
import { Component, Vue } from "vue-facing-decorator";
import { useClipboard } from "@vueuse/core";

import QuickNav from "@/components/QuickNav.vue";
import { NotificationIface } from "@/constants/app";
import { accountsDB, retrieveSettingsForActiveAccount } from "@/db/index";
import { Account } from "@/db/tables/accounts";

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

  activeAccount: Account | null | undefined = null;
  numAccounts = 0;
  showCopiedDeri = false;
  showCopiedSeed = false;
  showSeed = false;

  // 'created' hook runs when the Vue instance is first created
  async created() {
    try {
      const settings = await retrieveSettingsForActiveAccount();
      const activeDid = settings.activeDid || "";

      await accountsDB.open();
      const accounts = await accountsDB.accounts.toArray();
      this.numAccounts = accounts.length;
      this.activeAccount = R.find((acc) => acc.did === activeDid, accounts);
    } catch (err: unknown) {
      console.error("Got an error loading an identifier:", err);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error Loading Account",
          text: "Got an error loading your seed data.",
        },
        -1,
      );
    }
  }

  // call fn, copy text to the clipboard, then redo fn after 2 seconds
  doCopyTwoSecRedo(text: string, fn: () => void) {
    fn();
    useClipboard()
      .copy(text)
      .then(() => setTimeout(fn, 2000));
  }
}
</script>