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

<template>
  <!-- QUICK NAV -->
  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
    <ul class="flex text-2xl p-2 gap-2">
      <!-- Home Feed -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
          <fa icon="house-chimney" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Search -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'discover' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="magnifying-glass" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Projects -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'projects' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="folder-open" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Contacts -->
      <li class="basis-1/5 rounded-md text-slate-500">
        <router-link
          :to="{ name: 'contacts' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="users" class="fa-fw"></fa>
        </router-link>
      </li>
      <!-- Profile -->
      <li class="basis-1/5 rounded-md bg-slate-400 text-white">
        <router-link
          :to="{ name: 'account' }"
          class="block text-center py-3 px-1"
        >
          <fa icon="circle-user" class="fa-fw"></fa>
        </router-link>
      </li>
    </ul>
  </nav>

  <!-- 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>
        BEWARE: Anyone who gets hold of this mnemonic seed phrase will be able
        impersonate you and take over any digital holdings based on it. So only
        reveal it when you are in a private place out of sight of other eyes,
        and only record it in something private -- don't take a screenshot or
        send it to any online service.
      </p>

      <button
        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md"
        @click="showSeedPhrase"
      >
        Click here when you're ready to see it.
      </button>

      <p v-if="showSeed">{{ activeAccount.mnemonic }}</p>
    </div>
    <div v-else>You do not have an active identity.</div>

    <!-- This same popup code is in many files. -->
    <div v-bind:class="computedAlertClassNames()">
      <button
        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
        @click="onClickClose()"
      >
        <fa icon="xmark"></fa>
      </button>
      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
      <p>{{ alertMessage }}</p>
    </div>
  </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";

@Component
export default class SeedBackupView extends Vue {
  activeAccount = null;
  showSeed = false;

  // '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.activeAccount = R.find((acc) => acc.did === activeDid, accounts);
    } catch (err) {
      console.error("Got an error loading an identity:", err);
      this.alertTitle = "Error Loading Account";
      this.alertMessage = "Got an error loading your seed data.";
      this.isAlertVisible = true;
    }
  }

  showSeedPhrase() {
    this.showSeed = true;
  }

  // This same popup code is in many files.
  alertMessage = "";
  alertTitle = "";
  isAlertVisible = false;
  public onClickClose() {
    this.isAlertVisible = false;
    this.alertTitle = "";
    this.alertMessage = "";
  }
  public computedAlertClassNames() {
    return {
      hidden: !this.isAlertVisible,
      "dismissable-alert": true,
      "bg-slate-100": true,
      "p-5": true,
      rounded: true,
      "drop-shadow-lg": true,
      fixed: true,
      "top-3": true,
      "inset-x-3": true,
      "transition-transform": true,
      "ease-in": true,
      "duration-300": true,
    };
  }
}
</script>