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

<template>
  <QuickNav selected="Profile"></QuickNav>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <!-- Breadcrumb -->
    <div id="ViewBreadcrumb" class="mb-8">
      <h1 class="text-lg text-center font-light relative px-7">
        <!-- Cancel -->
        <router-link
          :to="{ name: 'account' }"
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          ><fa icon="chevron-left" class="fa-fw"></fa>
        </router-link>

        Switch Identity
      </h1>
    </div>

    <!-- Identity List -->

    <!-- Current Identity - Display First! -->
    <div
      v-if="activeDid && !activeDidInIdentities"
      class="block bg-slate-100 rounded-md flex items-center px-4 py-3 mb-4"
    >
      <fa icon="circle-check" class="fa-fw text-red-600 text-xl mr-3"></fa>
      <div class="text-sm text-slate-500">
        <div class="overflow-hidden truncate">
          <b>ID:</b> <code>{{ activeDid }}</code>
        </div>
        <b
          >There is a data corruption error: this identity is selected but it is
          not in storage. You cannot send any more claims with this identity
          until you import the seed again. This may require reinstalling the
          app; if you know how, you can also clear out the TimeSafariAccounts
          IndexedDB. Be sure to back up all your Settings & Contacts first.</b
        >
      </div>
    </div>

    <!-- Other Identity/ies -->
    <ul class="mb-4">
      <li
        class="block bg-slate-100 rounded-md flex items-center px-4 py-3 mb-2"
        v-for="ident in otherIdentities"
        :key="ident.did"
        @click="switchAccount(ident.did)"
      >
        <fa
          v-if="ident.did === activeDid"
          icon="circle-check"
          class="fa-fw text-blue-600 text-xl mr-3"
        />
        <fa v-else icon="circle" class="fa-fw text-slate-400 text-xl mr-3" />
        <span class="overflow-hidden">
          <h2 class="text-xl font-semibold mb-0"></h2>
          <div class="text-sm text-slate-500 truncate">
            <b>ID:</b> <code>{{ ident.did }}</code>
          </div>
        </span>
      </li>
    </ul>

    <!-- Actions -->
    <!-- id used by puppeteer test script -->
    <router-link
      id="start-link"
      :to="{ name: 'start' }"
      class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
    >
      Add Another Identity&hellip;
    </router-link>
    <a
      href="#"
      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-8"
      @click="switchAccount('0')"
    >
      No Identity
    </a>
  </section>
</template>
<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { AppString } from "@/constants/app";
import { db, accountsDB } from "@/db/index";
import { AccountsSchema } from "@/db/tables/accounts";
import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
import QuickNav from "@/components/QuickNav.vue";

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

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

  Constants = AppString;
  public accounts: typeof AccountsSchema;
  public activeDid = "";
  public activeDidInIdentities = false;
  public apiServer = "";
  public apiServerInput = "";
  public otherIdentities: Array<{ did: string }> = [];
  public showContactGives = false;

  async created() {
    try {
      await db.open();
      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
      this.activeDid = settings?.activeDid || "";
      this.apiServer = settings?.apiServer || "";
      this.apiServerInput = settings?.apiServer || "";
      this.showContactGives = !!settings?.showContactGivesInline;

      await accountsDB.open();
      const accounts = await accountsDB.accounts.toArray();
      for (let n = 0; n < accounts.length; n++) {
        const did = JSON.parse(accounts[n].identity)["did"];
        this.otherIdentities.push({ did: did });
        if (did && this.activeDid === did) {
          this.activeDidInIdentities = true;
        }
      }
    } catch (err) {
      this.$notify(
        {
          group: "alert",
          type: "danger",
          title: "Error Loading Accounts",
          text: "Clear your cache and start over (after data backup).",
        },
        -1,
      );
      console.error("Telling user to clear cache at page create because:", err);
    }
  }

  async switchAccount(did?: string) {
    // 0 means none
    if (did === "0") {
      did = undefined;
    }
    await db.open();
    await db.settings.update(MASTER_SETTINGS_KEY, {
      activeDid: did,
    });
    this.$router.push({ name: "account" });
  }
}
</script>