create an identifier by default, while letting them choose if passkeys are enabled

src/libs/crypto/vc/passkeyDidPeer.ts

@@ -411,13 +411,21 @@ async function peerDidToDidDocument(did: string): Promise<DIDResolutionResult> {
   }
   // this is basically hard-coded from https://www.w3.org/TR/did-core/#example-various-verification-method-types
   // (another reference is the @aviarytech/did-peer resolver)
+
+  /**
+   * Looks like JsonWebKey2020 isn't too difficult:
+   * - change context security/suites link to jws-2020/v1
+   * - change publicKeyMultibase to publicKeyJwk generated with cborToKeys
+   * - change type to JsonWebKey2020
+   */
+
   const id = did.split(":")[2];
   const multibase = id.slice(1);
   const encnumbasis = multibase.slice(1);
   const didDocument = {
     "@context": [
       "https://www.w3.org/ns/did/v1",
-      "https://w3id.org/security/suites/jws-2020/v1",
+      "https://w3id.org/security/suites/secp256k1-2019/v1",
     ],
     assertionMethod: [did + "#" + encnumbasis],
     authentication: [did + "#" + encnumbasis],

src/views/HelpView.vue

@@ -24,16 +24,15 @@
     <!-- eslint-disable prettier/prettier -->
     <div>
       <p>
-        This app is a window into data that you and your friends own, focused on
-        gifts and collaboration.
+        This app focuses on gifts & gratitude, using them to build cool things with your network.
       </p>
 
       <h2 class="text-xl font-semibold">What is the idea here?</h2>
       <p>
         We are building networks of people who want to grow a giving society.
-        First of all, you can see what people have given, and also recognize
-        gifts you've seen, in a way that leaves a permanent record -- one that
-        came from you, and the recipient can prove it was for them. This is
+        First of all, let's build gratitude: see what people have given, and recognize
+        gifts you've seen. This is done in a way that leaves a permanent record -- one that
+        came from you, and that the recipient can prove it was for them. This is
         personally gratifying, but it extends to broader work: volunteers get
         confirmation of activity, and selectively show off their contributions
         and network.

src/views/HomeView.vue

@@ -77,58 +77,28 @@
 
       <div v-else>
         <!-- !isCreatingIdentifier -->
-        <div
-          v-if="!activeDid"
-          class="bg-amber-200 rounded-md text-center px-4 py-3 mb-4"
-        >
-          <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"
-            >
-              Share your contact info.
-            </router-link>
-          </div>
-        </div>
-
-        <div v-else class="mb-4">
-          <!-- activeDid -->
-
+        <!-- They should have an identifier, even if it's an auto-generated one that they'll never use. -->
+        <div class="mb-4">
           <div
             v-if="!isRegistered"
             class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
           >
             <!-- activeDid && !isRegistered -->
-            Someone must register you before you can give kudos or make offers
-            or create projects... basically before doing anything.
+            To share, someone must register you.
             <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"
             >
-              Show Them Your Identifier Info
+              Show Them Default Identifier Info
             </router-link>
+            <div v-if="PASSKEYS_ENABLED" class="flex justify-end w-full">
+              <router-link
+                :to="{ name: 'start' }"
+                class="block text-right 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"
+              >
+                See all your options first
+              </router-link>
+            </div>
           </div>
 
           <div v-else>
@@ -340,7 +310,11 @@ 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, PASSKEYS_ENABLED } from "@/constants/app";
+import {
+  AppString,
+  NotificationIface,
+  PASSKEYS_ENABLED,
+} from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
@@ -359,7 +333,10 @@ import {
   GiverReceiverInputInfo,
   GiveSummaryRecord,
 } from "@/libs/endorserServer";
-import { registerSaveAndActivatePasskey } from "@/libs/util";
+import {
+  generateSaveAndActivateIdentity,
+  registerSaveAndActivatePasskey,
+} from "@/libs/util";
 
 interface GiveRecordWithContactInfo extends GiveSummaryRecord {
   giver: {
@@ -423,7 +400,14 @@ export default class HomeView extends Vue {
     try {
       await accountsDB.open();
       const allAccounts = await accountsDB.accounts.toArray();
-      this.allMyDids = allAccounts.map((acc) => acc.did);
+      if (allAccounts.length > 0) {
+        this.allMyDids = allAccounts.map((acc) => acc.did);
+      } else {
+        this.isCreatingIdentifier = true;
+        const newDid = await generateSaveAndActivateIdentity();
+        this.isCreatingIdentifier = false;
+        this.allMyDids = [newDid];
+      }
 
       await db.open();
       const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
@@ -440,6 +424,7 @@ export default class HomeView extends Vue {
 
       this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
 
+
       // someone may have have registered after sharing contact info, so recheck
       if (!this.isRegistered && this.activeDid) {
         try {
@@ -481,7 +466,7 @@ export default class HomeView extends Vue {
     }
   }
 
-  async generateIdentifier() {
+  async generatePasskeyIdentifier() {
     this.isCreatingIdentifier = true;
     const account = await registerSaveAndActivatePasskey(
       AppString.APP_NAME + (this.givenName ? " - " + this.givenName : ""),

src/views/StartView.vue

@@ -27,7 +27,7 @@
         <p class="text-center text-xl font-light">
           How do you want to create this identifier?
         </p>
-        <p class="text-center font-light mt-6">
+        <p v-if="PASSKEYS_ENABLED" class="text-center font-light mt-6">
           A <strong>passkey</strong> is easy to manage, though it is less
           interoperable with other systems for advanced uses.
           <a
@@ -49,6 +49,7 @@
         </p>
         <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-4">
           <a
+            v-if="PASSKEYS_ENABLED"
             @click="onClickNewPasskey()"
             class="block w-full text-center text-lg uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md mb-2 cursor-pointer"
           >
@@ -88,7 +89,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import { AppString } from "@/constants/app";
+import { AppString, PASSKEYS_ENABLED } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { registerSaveAndActivatePasskey } from "@/libs/util";
@@ -97,6 +98,8 @@ import { registerSaveAndActivatePasskey } from "@/libs/util";
   components: {},
 })
 export default class StartView extends Vue {
+  PASSKEYS_ENABLED = PASSKEYS_ENABLED;
+
   givenName = "";
   numAccounts = 0;