crowd-funder-for-time-pwa/src/views/SeedBackupView.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 mb-8">
      Seed Backup
    </h1>

    <div class="flex justify-between py-2">
      <span />
      <span>
        <router-link
          :to="{ name: 'help' }"
          class="text-xs uppercase bg-blue-500 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 only you can see your screen, and
        record it somewhere only you have access.
        <i>Don't 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 identity
        stored in this browser. If they are all based on the same seed as the
        current identity, this one backup is sufficient; however, if you have
        different seeds for other identities, you will have to back them up
        separately.
      </p>

      <div class="bg-slate-100 rounded-md overflow-hidden p-4 mb-4">
        <button
          class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
          @click="showSeedPhrase"
        >
          Reveal my Seed Phrase
        </button>

        <p v-if="showSeed" class="text-center text-slate-700 mt-2">
          {{ activeAccount.mnemonic }}
        </p>
      </div>
    </div>
    <div v-else>You do not have an active identity.</div>
    <AlertMessage
      :alertTitle="alertTitle"
      :alertMessage="alertMessage"
    ></AlertMessage>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { accountsDB, db } from "@/db";
import * as R from "ramda";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav";

@Component({ components: { AlertMessage, QuickNav } })
export default class SeedBackupView extends Vue {
  activeAccount = null;
  numAccounts = 0;
  showSeed = false;
  alertMessage = "";
  alertTitle = "";

  // 'created' hook runs when the Vue instance is first created
  async created() {
    try {
      await db.open();
      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
      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) {
      console.error("Got an error loading an identity:", err);
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error Loading Account",
          text: "Got an error loading your seed data.",
        },
        -1,
      );
    }
  }

  showSeedPhrase() {
    this.showSeed = true;
  }
}
</script>