move low-level DID-related create & decode into separate folder (#120)

Co-authored-by: Trent Larson <trent@trentlarson.com>
Reviewed-on: trent_larson/crowd-funder-for-time-pwa#120
Co-authored-by: trentlarson <trent@trentlarson.com>
Co-committed-by: trentlarson <trent@trentlarson.com>

src/views/ContactQRScanShowView.vue

@@ -84,7 +84,6 @@ import { useClipboard } from "@vueuse/core";
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
-import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import {
@@ -93,8 +92,7 @@ import {
   nextDerivationPath,
 } from "@/libs/crypto";
 import {
-  CONTACT_URL_PREFIX,
-  createEndorserJwt,
+  CONTACT_URL_PREFIX, createEndorserJwtForDid,
   ENDORSER_JWT_URL_LOCATION,
   isDid,
   register,
@@ -161,7 +159,7 @@ export default class ContactQRScanShow extends Vue {
         },
       };
 
-      const vcJwt: string = await createEndorserJwt(identity.did, contactInfo);
+      const vcJwt: string = await createEndorserJwtForDid(identity.did, contactInfo);
       const viewPrefix = CONTACT_URL_PREFIX + ENDORSER_JWT_URL_LOCATION;
       this.qrValue = viewPrefix + vcJwt;
     }

src/views/HomeView.vue

@@ -81,16 +81,29 @@
           v-if="!activeDid"
           class="bg-amber-200 rounded-md text-center px-4 py-3 mb-4"
         >
-          <p class="text-lg mb-3">
-            To recognize giving, have someone register you:
-          </p>
-          <div class="flex justify-center">
-            <!--            <button-->
-            <!--              class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"-->
-            <!--              @click="generateIdentifier()"-->
-            <!--            >-->
-            <!--              Let me start the easiest (with a passkey).-->
-            <!--            </button>-->
+          <div v-if="PASSKEYS_ENABLED">
+            <p class="text-lg mb-3">
+              Choose how to see info from your contacts or share contributions:
+            </p>
+            <div class="flex justify-between">
+              <button
+                class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
+                @click="generateIdentifier()"
+              >
+                Let me start the easiest (with a passkey).
+              </button>
+              <router-link
+                :to="{ name: 'start' }"
+                class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
+              >
+                Give me all the options.
+              </router-link>
+            </div>
+          </div>
+          <div v-else>
+            <p class="text-lg mb-3">
+              To recognize giving or collaborate, have someone register you:
+            </p>
             <router-link
               :to="{ name: 'contact-qr' }"
               class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
@@ -327,7 +340,7 @@ import FeedFilters from "@/components/FeedFilters.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { AppString, NotificationIface } from "@/constants/app";
+import { AppString, NotificationIface, PASSKEYS_ENABLED } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
@@ -383,6 +396,7 @@ export default class HomeView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   AppString = AppString;
+  PASSKEYS_ENABLED = PASSKEYS_ENABLED;
 
   activeDid = "";
   allContacts: Array<Contact> = [];

src/views/TestView.vue

@@ -246,14 +246,15 @@ import { Component, Vue } from "vue-facing-decorator";
 import QuickNav from "@/components/QuickNav.vue";
 import { AppString, NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import * as vcLib from "@/libs/crypto/vc";
 import {
   PeerSetup,
   verifyJwtP256,
   verifyJwtSimplewebauthn,
   verifyJwtWebCrypto,
-} from "@/libs/didPeer";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { registerAndSavePasskey } from "@/libs/util";
+} from "@/libs/crypto/vc/passkeyDidPeer";
+import {AccountKeyInfo, getAccount, registerAndSavePasskey} from "@/libs/util";
 
 const inputFileNameRef = ref<Blob>();
 
@@ -360,6 +361,13 @@ export default class Help extends Vue {
   }
 
   public async createJwtSimplewebauthn() {
+    const account: AccountKeyInfo | undefined = await getAccount(
+      this.activeDid || "",
+    );
+    if (!vcLib.isFromPasskey(account)) {
+      alert(`The DID ${this.activeDid} is not passkey-enabled.`);
+      return;
+    }
     this.peerSetup = new PeerSetup();
     this.jwt = await this.peerSetup.createJwtSimplewebauthn(
       this.activeDid as string,
@@ -370,6 +378,13 @@ export default class Help extends Vue {
   }
 
   public async createJwtNavigator() {
+    const account: AccountKeyInfo | undefined = await getAccount(
+      this.activeDid || "",
+    );
+    if (!vcLib.isFromPasskey(account)) {
+      alert(`The DID ${this.activeDid} is not passkey-enabled.`);
+      return;
+    }
     this.peerSetup = new PeerSetup();
     this.jwt = await this.peerSetup.createJwtNavigator(
       this.activeDid as string,