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

<template>
  <QuickNav selected="Profile"></QuickNav>
  <section id="Content" class="p-6 pb-24">
    <!-- 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 class="block bg-slate-100 rounded-md flex items-center px-4 py-3 mb-4">
      <fa icon="circle-check" class="fa-fw text-blue-600 text-xl mr-3"></fa>
      <span class="overflow-hidden">
        <h2 class="text-xl font-semibold mb-0">
          {{ givenName }}
        </h2>
        <div class="text-sm text-slate-500 truncate">
          <b>ID:</b> <code>{{ activeDid }}</code>
        </div>
      </span>
    </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 icon="circle" class="fa-fw text-slate-400 text-xl mr-3"></fa>
        <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 apiServer = "";
  public apiServerInput = "";
  public givenName = "";
  public otherIdentities: Array<{ did: string }> = [];
  public showContactGives = false;

  public async getIdentity(activeDid: string) {
    await accountsDB.open();
    const account = await accountsDB.accounts
      .where("did")
      .equals(activeDid)
      .first();
    const identity = JSON.parse((account?.identity as string) || "null");
    return identity;
  }

  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.givenName =
        (settings?.firstName || "") +
        (settings?.lastName ? ` ${settings.lastName}` : ""); // deprecated, pre v 0.1.3
      this.showContactGives = !!settings?.showContactGivesInline;

      const identity = await this.getIdentity(this.activeDid);

      if (identity) {
        db.settings.update(MASTER_SETTINGS_KEY, {
          activeDid: identity.did,
        });
      }
      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"];
        if (did && this.activeDid !== did) {
          this.otherIdentities.push({ did: did });
        }
      }
    } 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.activeDid = did || "";
    this.otherIdentities = [];
    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"];
      if (did && this.activeDid !== did) {
        this.otherIdentities.push({ did: did });
      }
    }
    this.$router.push({ name: "account" });
  }
}
</script>