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">
          {{ firstName }} {{ lastName }}
        </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 -->
    <router-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>

    <AlertMessage
      :alertTitle="alertTitle"
      :alertMessage="alertMessage"
    ></AlertMessage>
  </section>
</template>
<script lang="ts">
import { Component, Vue } from "vue-facing-decorator";
import { AppString } from "@/constants/app";
import { db, accountsDB } from "@/db";
import { AccountsSchema } from "@/db/tables/accounts";
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 IdentitySwitcherView extends Vue {
  Constants = AppString;
  public accounts: AccountsSchema;
  public activeDid;
  public firstName;
  public lastName;
  public alertTitle;
  public alertMessage;
  public otherIdentities = [];

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

  async created() {
    try {
      await db.open();
      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
      this.activeDid = settings?.activeDid || "";
      this.apiServer = settings?.apiServer || "";
      this.apiServerInput = settings?.apiServer || "";
      this.firstName = settings?.firstName || "No";
      this.lastName = settings?.lastName || "Name";
      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) {
      if (
        err.message ===
        "Attempted to load account records with no identity available."
      ) {
        this.limitsMessage = "No identity.";
        this.loadingLimits = false;
      } else {
        this.alertMessage =
          "Clear your cache and start over (after data backup).";
        console.error(
          "Telling user to clear cache at page create because:",
          err,
        );
        this.alertTitle = "Error Creating Account";
      }
    }
  }

  async switchAccount(did: string) {
    // 0 means none
    if (did === "0") {
      did = undefined;
    }
    await db.open();
    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>