automatically create an identity on the first page (and other UI tweaks)

2024-01-14 21:00:59 -07:00
parent 9f595040d8
commit d7ef07c2e2
9 changed files with 177 additions and 114 deletions
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -4,6 +4,16 @@

  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Back -->
+    <div class="text-lg text-center font-light relative px-7">
+      <h1
+        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        @click="$router.back()"
+      >
+        <fa icon="chevron-left" class="fa-fw"></fa>
+      </h1>
+    </div>
+
    <!-- Heading -->
    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-4">
      Your Identity
@@ -51,24 +61,6 @@
      </router-link>
    </div>

-    <!-- Registration notice -->
-    <!-- We won't show any loading indicator because it usually doesn't change anything. We'll just pop the message in only if we discover that they need it. -->
-    <div
-      v-if="!loadingLimits && !limits?.nextWeekBeginDateTime"
-      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
-    >
-      <p class="mb-4">
-        <b>Note:</b> Before you can publicly announce a new project or time
-        commitment, a friend needs to register you.
-      </p>
-      <router-link
-        :to="{ name: 'contact-qr' }"
-        class="inline-block text-md uppercase bg-amber-600 text-white px-4 py-2 rounded-md"
-      >
-        Share Your Info
-      </router-link>
-    </div>
-
    <!-- Identity Details -->
    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
      <h2 v-if="givenName" class="text-xl font-semibold mb-2">
@@ -80,9 +72,9 @@
      <span v-else>
        <router-link
          :to="{ name: 'new-edit-account' }"
-          class="block w-full text-center text-md text-blue-500 uppercase border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
+          class="block w-full text-center text-md bg-amber-200 text-blue-500 uppercase border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
        >
-          (Set Your Name)
+          Set Your Name
        </router-link>
      </span>

@@ -101,6 +93,24 @@
      </div>
    </div>

+    <!-- Registration notice -->
+    <!-- We won't show any loading indicator because it usually doesn't change anything. We'll just pop the message in only if we discover that they need it. -->
+    <div
+      v-if="!loadingLimits && !limits?.nextWeekBeginDateTime"
+      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
+    >
+      <p class="mb-4">
+        <b>Note:</b> Before you can publicly announce a new project or time
+        commitment, a friend needs to register you.
+      </p>
+      <router-link
+        :to="{ name: 'contact-qr' }"
+        class="inline-block text-md uppercase bg-amber-600 text-white px-4 py-2 rounded-md"
+      >
+        Share Your Info
+      </router-link>
+    </div>
+
    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
      <div
        v-if="!notificationMaybeChanged"
@@ -135,41 +145,11 @@
      </router-link>
    </div>

-    <h3 class="text-sm uppercase font-semibold mb-3">Data Export</h3>
-
-    <router-link
-      :to="{ name: 'seed-backup' }"
+    <div
      v-if="activeDid"
-      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
+      class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
    >
-      Backup Identifier Seed
-    </router-link>
-
-    <button
-      v-bind:class="computedStartDownloadLinkClassNames()"
-      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-      @click="exportDatabase()"
-    >
-      Download Settings & Contacts
-      <br />
-      (excluding Identifier Data)
-    </button>
-    <a
-      ref="downloadLink"
-      v-bind:class="computedDownloadLinkClassNames()"
-      class="block w-full text-center text-md uppercase bg-green-600 text-white px-1.5 py-2 rounded-md mb-6"
-    >
-      If no download happened yet, click again here to download now.
-    </a>
-
-    <div v-if="activeDid" class="flex mt-8 py-2">
-      <h3 class="text-sm uppercase font-semibold">Rate Limits</h3>
-      <button
-        class="block w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md ml-2 mr-2 mb-2"
-        @click="checkLimits()"
-      >
-        Check Limits
-      </button>
+      <div class="mb-2">Usage Limits</div>
      <!-- show spinner if loading limits -->
      <div v-if="loadingLimits" class="text-center">
        Checking&hellip; <fa icon="spinner" class="fa-spin"></fa>
@@ -200,6 +180,40 @@
          </b>
        </p>
      </div>
+      <button
+        class="block float-right w-fit text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mt-2"
+        @click="checkLimits()"
+      >
+        Recheck Limits
+      </button>
+    </div>
+
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
+      <div>Data Export</div>
+      <router-link
+        :to="{ name: 'seed-backup' }"
+        v-if="activeDid"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2 mt-2"
+      >
+        Backup Identifier Seed
+      </router-link>
+
+      <button
+        v-bind:class="computedStartDownloadLinkClassNames()"
+        class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
+        @click="exportDatabase()"
+      >
+        Download Settings & Contacts
+        <br />
+        (excluding Identifier Data)
+      </button>
+      <a
+        ref="downloadLink"
+        v-bind:class="computedDownloadLinkClassNames()"
+        class="block w-full text-center text-md uppercase bg-green-600 text-white px-1.5 py-2 rounded-md"
+      >
+        If no download happened yet, click again here to download now.
+      </a>
    </div>

    <!-- id used by puppeteer test script -->
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -604,7 +604,7 @@ export default class ContactsView extends Vue {
              group: "alert",
              type: "info",
              title: "New User?",
-              text: "If they are a new user, be sure to register them.",
+              text: "If they are a new user, be sure to register to onboard them.",
            },
            -1,
          );
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -69,6 +69,18 @@
        make it an opportunity to get to know their projects, and show your own.
      </p>

+      <h2 class="text-xl font-semibold">
+        I had an identifier, but I reinstalled and I got a new one automatically.
+        How do I restore my old one?
+      </h2>
+      <p>
+        Go to the page
+        <router-link class="text-blue-500" to="/import-account">import your identifier</router-link>.
+        If you don't want the old one, click "Advanced" and check the box to erase it.
+        (The erase option only shows if you have exactly one identifier.
+         For more in-depth surgery, you'll have to erase data from the browser or reinstall.)
+      </p>
+
      <h2 class="text-xl font-semibold">How do I add someone else?</h2>
      <p>
        <button class="text-blue-500" @click="showOnboardInfo">
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -61,8 +61,13 @@

    <!-- show the actions for recognizing a give -->
    <div class="mb-8">
+      <div v-if="isCreatingIdentifier">
+        <p class="text-slate-500 text-center italic mt-4 mb-4">
+          <fa icon="spinner" class="fa-spin-pulse"></fa> Loading&hellip;
+        </p>
+      </div>
      <div
-        v-if="!activeDid"
+        v-if="!activeDid && !isCreatingIdentifier"
        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
      >
        <p class="text-lg mb-3">
@@ -81,19 +86,19 @@
        v-else-if="!isRegistered"
        class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
      >
-        Someone must register your account before you can record anyone's gives.
-        To do this:
+        Someone must register your identifier before you can record anyone's
+        giving.
        <router-link
          :to="{ name: 'contact-qr' }"
-          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 mb-4 px-2 py-3 rounded-md"
        >
-          1. Show Them Your Identifier Info</router-link
+          Show Them Your Identifier Info</router-link
        >
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
-        >
-          2. Check Your Limits</router-link
+        To double-check that you're registered,
+        <br />
+        <router-link :to="{ name: 'account' }" class="text-blue-500">
+          see your Usage Limits on the Account
+          <fa icon="circle-user" /> page.</router-link
        >
      </div>

@@ -171,7 +176,7 @@
              class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold uppercase text-sm"
              v-if="record.jwtId == feedLastViewedClaimId"
            >
-              You've seen all the following
+              You've seen all the following before
            </div>

            <div class="flex">
@@ -184,7 +189,7 @@
          </li>
        </ul>
      </InfiniteScroll>
-      <div :class="{ hidden: isHiddenSpinner }">
+      <div v-if="isFeedLoading">
        <p class="text-slate-500 text-center italic mt-4 mb-4">
          <fa icon="spinner" class="fa-spin-pulse"></fa> Loading&hellip;
        </p>
@@ -213,6 +218,7 @@ import {
  GiveServerRecord,
 } from "@/libs/endorserServer";
 import { IIdentifier } from "@veramo/core";
+import { generateSaveAndActivateIdentity } from "@/libs/util";

 interface Notification {
  group: string;
@@ -240,16 +246,11 @@ export default class HomeView extends Vue {
  feedData = [];
  feedPreviousOldestId?: string;
  feedLastViewedClaimId?: string;
-  isHiddenSpinner = true;
+  isCreatingIdentifier = false;
+  isFeedLoading = true;
  isRegistered = false;
-  numAccounts = 0;
  userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html

-  async beforeCreate() {
-    await accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
-  }
-
  public async getIdentity(activeDid: string) {
    await accountsDB.open();
    const account = (await accountsDB.accounts
@@ -283,8 +284,16 @@ export default class HomeView extends Vue {
      this.feedLastViewedClaimId = settings?.lastViewedClaimId;
      this.isRegistered = !!settings?.isRegistered;

+      if (this.allMyDids.length === 0) {
+        this.isCreatingIdentifier = true;
+        this.activeDid = await generateSaveAndActivateIdentity();
+        this.allMyDids = [this.activeDid];
+        this.isCreatingIdentifier = false;
+      }
+
      // this returns a Promise but we don't need to wait for it
-      this.updateAllFeed();
+
+      await this.updateAllFeed();

      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
@@ -344,7 +353,7 @@ export default class HomeView extends Vue {
  }

  public async updateAllFeed() {
-    this.isHiddenSpinner = false;
+    this.isFeedLoading = true;
    await this.retrieveGives(this.apiServer, this.feedPreviousOldestId)
      .then(async (results) => {
        if (results.data.length > 0) {
@@ -375,7 +384,7 @@ export default class HomeView extends Vue {
          -1,
        );
      });
-    this.isHiddenSpinner = true;
+    this.isFeedLoading = false;
  }

  /**
--- a/src/views/ImportAccountView.vue
+++ b/src/views/ImportAccountView.vue
@@ -36,17 +36,28 @@
      Enter a custom derivation path
      <input
        type="text"
-        class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+        class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
        v-model="derivationPath"
      />
-      For previous uPort or Endorser users,
-      <a @click="derivationPath = UPORT_DERIVATION_PATH" class="text-blue-500">
-        click here to use that value.
-      </a>
+      <span class="ml-4">
+        For previous uPort or Endorser users,
+        <a
+          @click="derivationPath = UPORT_DERIVATION_PATH"
+          class="text-blue-500"
+        >
+          click here to use that value.
+        </a>
+      </span>
+
+      <div class="mt-4" v-if="numAccounts == 1">
+        <input type="checkbox" class="mr-2" v-model="shouldErase" />
+        <label>Erase the previous identifier.</label>
+      </div>
    </div>
+
    <div class="mt-8">
      <button
-        @click="from_mnemonic()"
+        @click="fromMnemonic()"
        class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
      >
        Import
@@ -89,16 +100,23 @@ export default class ImportAccountView extends Vue {

  mnemonic = "";
  address = "";
+  numAccounts = 0;
  privateHex = "";
  publicHex = "";
  derivationPath = DEFAULT_ROOT_DERIVATION_PATH;
  showAdvanced = false;
+  shouldErase = false;
+
+  async created() {
+    await accountsDB.open();
+    this.numAccounts = await accountsDB.accounts.count();
+  }

  public onCancelClick() {
    this.$router.back();
  }

-  public async from_mnemonic() {
+  public async fromMnemonic() {
    const mne: string = this.mnemonic.trim().toLowerCase();
    try {
      [this.address, this.privateHex, this.publicHex] = deriveAddress(
@@ -114,6 +132,9 @@ export default class ImportAccountView extends Vue {
      );

      await accountsDB.open();
+      if (this.shouldErase) {
+        await accountsDB.accounts.clear();
+      }
      await accountsDB.accounts.add({
        dateCreated: new Date().toISOString(),
        derivationPath: this.derivationPath,
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -168,9 +168,12 @@ export default class NewEditProjectView extends Vue {
    description: "",
  }; // this default is only to avoid errors before plan is loaded
  includeLocation = false;
+  isHiddenSave = false;
+  isHiddenSpinner = true;
  latitude = 0;
  longitude = 0;
  numAccounts = 0;
+  projectId = localStorage.getItem("projectId") || "";
  projectIssuerDid = "";
  zoom = 2;

@@ -204,10 +207,6 @@ export default class NewEditProjectView extends Vue {
    return headers;
  }

-  projectId = localStorage.getItem("projectId") || "";
-  isHiddenSave = false;
-  isHiddenSpinner = true;
-
  async created() {
    await db.open();
    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
--- a/src/views/NewIdentifierView.vue
+++ b/src/views/NewIdentifierView.vue
@@ -54,9 +54,7 @@
 <script lang="ts">
 import "dexie-export-import";
 import { Component, Vue } from "vue-facing-decorator";
-import { accountsDB, db } from "@/db/index";
-import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { generateSaveAndActivateIdentity } from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";

@Component({ components: { QuickNav } })
@@ -64,28 +62,7 @@ export default class NewIdentifierView extends Vue {
  loading = true;

  async mounted() {
-    const mnemonic = generateSeed();
-    // address is 0x... ETH address, without "did:eth:"
-    const [address, privateHex, publicHex, derivationPath] =
-      deriveAddress(mnemonic);
-
-    const newId = newIdentifier(address, publicHex, privateHex, derivationPath);
-    const identity = JSON.stringify(newId);
-
-    await accountsDB.open();
-    await accountsDB.accounts.add({
-      dateCreated: new Date().toISOString(),
-      derivationPath: derivationPath,
-      did: newId.did,
-      identity: identity,
-      mnemonic: mnemonic,
-      publicKeyHex: newId.keys[0].publicKeyHex,
-    });
-
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      activeDid: newId.did,
-    });
-
+    await generateSaveAndActivateIdentity();
    this.loading = false;
    setTimeout(() => {
      this.$router.push({ name: "home" });