Merge branch 'feat/image-feed-view-improvements' into fix/adding-nostr-tools-dependency

.env.development

@@ -1,3 +1,5 @@
 
 # I tried and failed to set things here with vue-cli-service but
 # things may be more reliable with vite so let's try again.
+
+VITE_APP_SERVER=http://localhost:8080

.env.production

@@ -3,4 +3,4 @@ VITE_APP_SERVER=https://timesafari.app
 VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01GXYPFF7FA03NXKPYY142PY4H
 VITE_DEFAULT_ENDORSER_API_SERVER=https://api.endorser.ch
 VITE_DEFAULT_IMAGE_API_SERVER=https://image-api.timesafari.app
-VITE_DEFAULT_PARTNER_API_SERVER=https://partner-api.timesafari.app
+VITE_DEFAULT_PARTNER_API_SERVER=https://partner-api.endorser.ch

CHANGELOG.md

@@ -6,7 +6,138 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
-## [0.3.35] - 2024.11.24
+## [0.4.0] - 2025.02.14
+### Changed
+- Images in the home feed now take up the full width of the card.
+- Clicking the image previously, would open the image in a new tab. Now, clicking the image opens the image in a lightbox view.
+
+### Added
+- Clicking an image also now displays an in-app lightbox view of the image.
+- The lightbox view includes a download button for the image in mobile view.
+
+
+
+## [0.3.57] - 2025.02.11
+### Added
+- Automatic user creation in onboarding meetings
+
+
+## [0.3.55] - 2025.02.07
+### Added
+- End time for projects
+
+
+## [0.3.54] - 2025.02.06
+### Added
+- Group onboarding meetings
+
+
+## [0.3.53] - 2025.01.30
+### Added
+- Hints for contacting the creator of a project
+
+
+## [0.3.52] - 2025.01.22
+### Fixed
+- User profile endpoint server for map was broken.
+
+
+## [0.3.51] - 2025.01.22
+### Fixed
+- User profile map jumped on first zoom.
+
+
+## [0.3.50] - 2025.01.20 - b9fedcd3fd3e34c3fb0fc79150d1a81a76eaeb40
+### Added
+- User public profiles
+
+
+## [0.3.49] - 2025.01.09 - 36301ed238ff84df25bb11a8d44a295ee7eaf0f8
+### Changed
+- Make all external contact links direct to the contact-import page.
+- Handle all new-single-contact JWTs in the contacts page, and multiple-contact JWTs in the contacts-import page.
+
+
+## [0.3.48] - 2025.01.08 - 398f3e64a376789f7eb1c400cd886f5a2cacd588 (but app shows 07c4e58)
+### Added
+- More sanity-checks on contact-import JWT
+
+
+## [0.3.47] - 2025.01.06 - 5bf6dd1ee32ca7cc46d39bd7afca58365b422f93
+### Added
+- Notes on contacts page with new contact-edit page
+- Contact methods (only on contact-edit page and under DID details)
+- DID view with no DID shows user's info.
+### Changed
+- URL for user's contact info is now URL to this app (not endorser.ch).
+- Extended details (eg. full claim) is beneath details link on claim page.
+
+
+## [0.3.46] - 2025.01.03 - 9e7056616b5e5acc51e5a8cf7354d408029fefb3
+### Added
+- More action-oriented questions for the gift prompts
+### Fixed
+- Contact-list import set visibility for all, even if not chosen.
+
+
+## [0.3.45] - 2025.01.01 - 65402dc68ce69ccc6cb9aa8d2e7a9249bf4298e0
+### Fixed
+- Previous project links stayed when following a link.
+
+
+## [0.3.44] - 2024.12.31 - 694b22987b05482e4527c2478bbe15e6b6f3b532
+### Added
+- Project counts on a map
+
+
+## [0.3.42] - 2024.12.27 - 9751934bc24a1040415a8cfeacbae59ed91f92a5
+### Added
+- Link from certificate page to the claim
+### Changed
+- Contact data sharing is now a verified JWT.
+- Feed pictures are larger.
+
+
+## [0.3.41] - 2024.12.21 - ff6d14138f26daea6216b051562f0a04681f69fc
+### Added
+- Link from certificate page to the claim
+
+
+## [0.3.40] - 2024.12.20 - 77290d9fed3c364243793dc3e9bfe2e994a016b8
+### Added
+- Only show issuer on certificate if it's not the agent.
+
+
+## [0.3.39] - 2024.12.20 - d8819155e2acd2b57fdab523168fa5d1d09e80cc
+### Added
+- Page for a framed claim certificate
+
+
+## [0.3.38] - 2024.12.14 - f8cae5ad4fee1f114320dcce052299eab12108b2
+### Fixed
+- Error on BVC confirmation screen (from IndexedDB refactor)
+
+
+## [0.3.37] - 2024.12.13 - 4d805b43cd25eed73cdd6651f36ad1ec8c109555
+### Added
+- Record a give from a project on the project page.
+- New button on home page opens the gifted dialog.
+- On confirmation buttons on the project page gives, mark when unavailable and explain why.
+### Changed
+- Moved the secret into IndexedDB (and out of localStorage) for more reliability.
+- New "invite" destination page helps troubleshoot when JWT link doesn't come through.
+### Fixed
+- Problem showing claim issuer name
+- Problem going "back" from a project page
+
+
+## [0.3.36] - 2024.11.24 - c8d23647d165016f8a8f575e13d32583242e53ac
+### Changed
+- More friendly default reminder message
+- Blue borders around people to indicate clickability
+
+
+## [0.3.35] - 2024.11.24 - bff7d0a6320b70349185e26bfac72e3bb17f76df
 ### Added
 - Daily reliable, hard-coded notification message
 - Setting to change the partner API server
@@ -20,7 +151,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [0.3.32] - 2024.11.06 - 9a3fa38a3fd28f977e06f0265fc39e635c9c5ccd
 ### Added
-- Highlight new offers to user & to user's projects on the front page.
+- Highlight in green new offers to user & to user's projects on the front page.
 
 
 ## [0.3.31] - 2024.10.25 - 07c02ab98a09d293dd90d9289a7872e7d681d296

LICENSE

@@ -0,0 +1,8 @@
+The author disclaims copyright to this source code. In place of a legal notice, here is a blessing:
+
+May you do good and not evil. 
+May you find forgiveness for yourself and forgive others.
+May you share freely, never taking more than you give.
+
+________________________________________________________________
+from https://www.sqlite.org/src/info/689401a6cfb4c234 and memorialized here https://spdx.org/licenses/blessing.html

README.md

@@ -10,7 +10,7 @@ See [project.task.yaml](project.task.yaml) for current priorities.
 
 ## Setup
 
-We like pkgx: `sh <(curl https://pkgx.sh) +npm sh`
+We like pkgx: `sh <(curl https://pkgx.sh) +vite sh`
 
 ```
 npm install
@@ -33,13 +33,10 @@ npm run serve
 npm run lint
 ```
 
-### Run all important tests
+### Run all UI tests
 
-... including automated UI tests (see below for details)
+Look below for the "test-all" instructions.
 
-```
-npm run test-all
-```
 
 ### Compile and minify for test & production
 
@@ -53,30 +50,34 @@ npm run test-all
 
 * Put the commit hash in the changelog (which will help you remember to bump the version later).
 
-* Record what version is currently on production in docs.
+* Tag with the new version, [online](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/releases) or `git tag 0.3.55 && git push origin 0.3.55`.
 
-* Run the correct build:
+* For test, build the app (because test server is not yet set up to build):
 
-  * Staging
 ```
-# (Let's replace this with a .env.development or .env.staging file.)
-# The test BVC_MEETUPS_PROJECT_CLAIM_ID does not resolve as a URL because it's only in the test DB and the prod redirect won't redirect there.
 TIME_SAFARI_APP_TITLE="TimeSafari_Test" VITE_APP_SERVER=https://test.timesafari.app VITE_BVC_MEETUPS_PROJECT_CLAIM_ID=https://endorser.ch/entity/01HWE8FWHQ1YGP7GFZYYPS272F VITE_DEFAULT_ENDORSER_API_SERVER=https://test-api.endorser.ch VITE_DEFAULT_IMAGE_API_SERVER=https://test-image-api.timesafari.app VITE_DEFAULT_PARTNER_API_SERVER=https://test-partner-api.endorser.ch VITE_PASSKEYS_ENABLED=true npm run build
 ```
 
-  * Production
-```
-# This picks up values from .env.production
-npm run build
-```
+   ... and transfer to the test server: `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
 
-* Get on the server and back up the time-safari/dist folder.
+    (Let's replace that with a .env.development or .env.staging file.)
 
-* `rsync -azvu -e "ssh -i ~/.ssh/..." dist ubuntutest@test.timesafari.app:time-safari`
+    (Note: The test BVC_MEETUPS_PROJECT_CLAIM_ID does not resolve as a URL because it's only in the test DB and the prod redirect won't redirect there.)
+
+* For prod, get on the server and run the correct build:
+
+  ... and log onto the server:
+
+  * `pkgx +npm sh`
+
+  * `cd crowd-funder-for-time-pwa && git checkout master && git pull && git checkout 0.3.55 && npm install && npm run build && cd -`
+
+  (The plain `npm run build` uses the .env.production file.)
+
+* Back up the time-safari/dist folder & deploy: `mv time-safari/dist time-safari-dist-prev.0 && mv crowd-funder-for-time-pwa/dist time-safari/`
 
 * Record the new hash in the changelog. Edit package.json to increment version & add "-beta", `npm install`, and commit. Also record what version is on production.
 
-* [Tag with the new version.](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/releases)
 
 
 
@@ -89,11 +90,20 @@ Use the locally running Endorser server:
 
 * Clone and set up https://github.com/trentlarson/endorser-ch and run the following in that directory:
 ```
+npm install
 test/test.sh
+cp .env.local .env
 NODE_ENV=test-local npm run dev
 ```
 
-* Now run the local tests:
+If that fails, go to the README.md in the endorser-ch directory and follow the instructions there.
+
+* Install playwright browsers:
+```
+npx playwright install
+```
+
+* Now you can run the local tests:
 ```
 npm run test-all
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "TimeSafari",
-  "version": "0.3.35",
+  "version": "0.3.57",
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",
@@ -28,6 +28,7 @@
     "@simplewebauthn/browser": "^10.0.0",
     "@simplewebauthn/server": "^10.0.0",
     "@tweenjs/tween.js": "^21.1.1",
+    "@types/qrcode": "^1.5.5",
     "@veramo/core": "^5.6.0",
     "@veramo/credential-w3c": "^5.6.0",
     "@veramo/data-store": "^5.6.0",
@@ -36,6 +37,7 @@
     "@veramo/did-provider-peer": "^6.0.0",
     "@veramo/did-resolver": "^5.6.0",
     "@veramo/key-manager": "^5.6.0",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vueuse/core": "^10.9.0",
     "@zxing/text-encoding": "^0.9.0",
     "asn1-ber": "^1.2.2",
@@ -51,16 +53,18 @@
     "jdenticon": "^3.2.0",
     "js-generate-password": "^0.1.9",
     "js-yaml": "^4.1.0",
+    "leaflet": "^1.9.4",
     "localstorage-slim": "^2.7.0",
     "lru-cache": "^10.2.0",
     "luxon": "^3.4.4",
     "merkletreejs": "^0.3.11",
-    "nostr-tools": "^2.7.2",
+    "nostr-tools": "^2.10.4",
     "notiwind": "^2.0.2",
     "papaparse": "^5.4.1",
     "pina": "^0.20.2204228",
     "pinia-plugin-persistedstate": "^3.2.1",
     "qr-code-generator-vue3": "^1.4.21",
+    "qrcode": "^1.5.4",
     "ramda": "^0.29.1",
     "readable-stream": "^4.5.2",
     "reflect-metadata": "^0.1.14",
@@ -89,14 +93,12 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue-leaflet/vue-leaflet": "^0.10.1",
     "@vue/eslint-config-typescript": "^11.0.3",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-vue": "^9.23.0",
-    "leaflet": "^1.9.4",
     "postcss": "^8.4.38",
     "prettier": "^3.2.5",
     "tailwindcss": "^3.4.1",

playwright.config-local.ts

@@ -25,7 +25,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: "http://localhost:8080",
+    baseURL: "http://localhost:8081",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
@@ -74,7 +74,7 @@ export default defineConfig({
 
   /* Configure global timeout; default is 30000 milliseconds */
   // the image upload will often not succeed at 5 seconds
-  // timeout: 10000,
+  timeout: 30000, // various tests fail at various times with 25000
 
   /* Run your local dev server before starting the tests */
   /**
@@ -91,8 +91,8 @@ export default defineConfig({
    */
   webServer: {
     command:
-      "VITE_APP_SERVER=http://localhost:8080 VITE_DEFAULT_ENDORSER_API_SERVER=http://localhost:3000 VITE_PASSKEYS_ENABLED=true npm run dev",
-    url: "http://localhost:8080",
+      "VITE_APP_SERVER=http://localhost:8081 VITE_DEFAULT_ENDORSER_API_SERVER=http://localhost:3000 VITE_PASSKEYS_ENABLED=true npm run dev -- --port=8081",
+    url: "http://localhost:8081",
     reuseExistingServer: !process.env.CI,
   },
 });

src/App.vue

@@ -45,7 +45,7 @@
 
             <div class="relative w-full pl-4 pr-8 py-2 text-slate-900">
               <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -68,7 +68,7 @@
 
             <div class="relative w-full pl-4 pr-8 py-2 text-emerald-900">
               <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -91,7 +91,7 @@
 
             <div class="relative w-full pl-4 pr-8 py-2 text-amber-900">
               <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -114,7 +114,7 @@
 
             <div class="relative w-full pl-4 pr-8 py-2 text-rose-900">
               <span class="font-semibold">{{ notification.title }}</span>
-              <p class="text-sm">{{ notification.text }}</p>
+              <p class="text-sm">{{ truncateLongWords(notification.text) }}</p>
 
               <button
                 @click="close(notification.id)"
@@ -329,6 +329,13 @@ export default class App extends Vue {
 
   stopAsking = false;
 
+  truncateLongWords(sentence: string) {
+    return sentence
+      .split(" ")
+      .map((word) => (word.length > 30 ? word.slice(0, 30) + "..." : word))
+      .join(" ");
+  }
+
   async turnOffNotifications(notification: NotificationIface) {
     let subscription: object | null = null;
 
@@ -376,6 +383,7 @@ export default class App extends Vue {
       return true;
     }
 
+    // clone in order to get only the properties and allow stringify to work
     const serverSubscription = {
       ...subscription,
     };

src/components/ChoiceButtonDialog.vue

@@ -0,0 +1,152 @@
+<template>
+  <NotificationGroup group="customModal">
+    <div class="fixed z-[100] top-0 inset-x-0 w-full">
+      <Notification
+        v-slot="{ notifications, close }"
+        enter="transform ease-out duration-300 transition"
+        enter-from="translate-y-2 opacity-0 sm:translate-y-4"
+        enter-to="translate-y-0 opacity-100 sm:translate-y-0"
+        leave="transition ease-in duration-500"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+        move="transition duration-500"
+        move-delay="delay-300"
+      >
+        <div
+          v-for="notification in notifications"
+          :key="notification.id"
+          class="w-full"
+          role="alert"
+        >
+          <div
+            class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+          >
+            <div
+              class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
+            >
+              <div class="w-full px-6 py-6 text-slate-900 text-center">
+                <span class="font-semibold text-lg">{{ title }}</span>
+                <p class="text-sm mb-2">{{ text }}</p>
+
+                <button
+                  @click="handleOption1(close)"
+                  class="block w-full text-center text-md font-bold capitalize bg-blue-800 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  {{ option1Text }}
+                </button>
+
+                <button
+                  @click="handleOption2(close)"
+                  class="block w-full text-center text-md font-bold capitalize bg-blue-700 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  {{ option2Text }}
+                </button>
+
+                <button
+                  @click="handleOption3(close)"
+                  class="block w-full text-center text-md font-bold capitalize bg-blue-600 text-white px-2 py-2 rounded-md mb-2"
+                >
+                  {{ option3Text }}
+                </button>
+
+                <button
+                  @click="handleCancel(close)"
+                  class="block w-full text-center text-md font-bold capitalize bg-slate-600 text-white px-2 py-2 rounded-md"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Notification>
+    </div>
+  </NotificationGroup>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { NotificationIface } from "@/constants/app";
+
+@Component
+export default class PromptDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  title = "";
+  text = "";
+  option1Text = "";
+  option2Text = "";
+  option3Text = "";
+  onOption1?: () => void;
+  onOption2?: () => void;
+  onOption3?: () => void;
+  onCancel?: () => Promise<void>;
+
+  open(options: {
+    title: string;
+    text: string;
+    option1Text?: string;
+    option2Text?: string;
+    option3Text?: string;
+    onOption1?: () => void;
+    onOption2?: () => void;
+    onOption3?: () => void;
+    onCancel?: () => Promise<void>;
+  }) {
+    this.title = options.title;
+    this.text = options.text;
+    this.option1Text = options.option1Text || "";
+    this.option2Text = options.option2Text || "";
+    this.option3Text = options.option3Text || "";
+    this.onOption1 = options.onOption1;
+    this.onOption2 = options.onOption2;
+    this.onOption3 = options.onOption3;
+    this.onCancel = options.onCancel;
+
+    this.$notify(
+      {
+        group: "customModal",
+        type: "confirm",
+        title: this.title,
+        text: this.text,
+        option1Text: this.option1Text,
+        option2Text: this.option2Text,
+        option3Text: this.option3Text,
+        onOption1: this.onOption1,
+        onOption2: this.onOption2,
+        onOption3: this.onOption3,
+        onCancel: this.onCancel,
+      } as NotificationIface,
+      -1,
+    );
+  }
+
+  handleOption1(close: (id: string) => void) {
+    if (this.onOption1) {
+      this.onOption1();
+    }
+    close("string that does not matter");
+  }
+
+  handleOption2(close: (id: string) => void) {
+    if (this.onOption2) {
+      this.onOption2();
+    }
+    close("string that does not matter");
+  }
+
+  handleOption3(close: (id: string) => void) {
+    if (this.onOption3) {
+      this.onOption3();
+    }
+    close("string that does not matter");
+  }
+
+  handleCancel(close: (id: string) => void) {
+    if (this.onCancel) {
+      this.onCancel();
+    }
+    close("string that does not matter");
+  }
+}
+</script>

src/components/ContactNameDialog.vue

@@ -51,10 +51,12 @@ export default class ContactNameDialog extends Vue {
     message?: string,
     saveCallback?: (name?: string) => void,
     cancelCallback?: () => void,
+    defaultName?: string,
   ) {
     this.cancelCallback = cancelCallback || this.cancelCallback;
     this.saveCallback = saveCallback || this.saveCallback;
     this.message = message ?? this.message;
+    this.newText = defaultName ?? "";
     this.title = title ?? this.title;
     this.visible = true;
   }
@@ -77,6 +79,7 @@ export default class ContactNameDialog extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/FeedFilters.vue

@@ -191,6 +191,7 @@ export default class FeedFilters extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;
@@ -204,7 +205,7 @@ export default class FeedFilters extends Vue {
 }
 
 #dialogFeedFilters.dialog-overlay {
-  z-index: 99999;
+  z-index: 100;
   overflow: scroll;
 }
 

src/components/GiftedDialog.vue

@@ -47,7 +47,8 @@
                 giverDid: giver?.did,
                 giverName: giver?.name,
                 offerId,
-                fulfillsProjectId: projectId,
+                fulfillsProjectId: toProjectId,
+                providerProjectId: fromProjectId,
                 recipientDid: receiver?.did,
                 recipientName: receiver?.name,
                 unitCode,
@@ -89,16 +90,22 @@
 import { Vue, Component, Prop } from "vue-facing-decorator";
 
 import { NotificationIface } from "@/constants/app";
-import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";
+import {
+  createAndSubmitGive,
+  didInfo,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
+import { retrieveAccountDids } from "@/libs/util";
 
 @Component
 export default class GiftedDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  @Prop projectId = "";
+  @Prop fromProjectId = "";
+  @Prop toProjectId = "";
 
   activeDid = "";
   allContacts: Array<Contact> = [];
@@ -143,9 +150,7 @@ export default class GiftedDialog extends Vue {
 
       this.allContacts = await db.contacts.toArray();
 
-      await accountsDB.open();
-      const allAccounts = await accountsDB.accounts.toArray();
-      this.allMyDids = allAccounts.map((acc) => acc.did);
+      this.allMyDids = await retrieveAccountDids();
 
       if (this.giver && !this.giver.name) {
         this.giver.name = didInfo(
@@ -294,9 +299,11 @@ export default class GiftedDialog extends Vue {
         description,
         amount,
         unitCode,
-        this.projectId,
+        this.toProjectId,
         this.offerId,
         this.isTrade,
+        undefined,
+        this.fromProjectId,
       );
 
       if (
@@ -333,7 +340,7 @@ export default class GiftedDialog extends Vue {
       console.error("Error with give recordation caught:", error);
       const errorMessage =
         error.userMessage ||
-        error.response?.data?.error?.message ||
+        serverMessageForUser(error) ||
         "There was an error recording the give.";
       this.$notify(
         {
@@ -387,6 +394,7 @@ export default class GiftedDialog extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/GiftedPrompts.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
-      <h1 class="text-xl font-bold text-center mb-4 relative">
+      <h1 class="text-xl font-bold text-center relative">
         Here's one:
         <div
           class="text-lg text-center p-2 leading-none absolute right-0 -top-1"
@@ -10,8 +10,9 @@
           <fa icon="xmark" class="w-[1em]"></fa>
         </div>
       </h1>
-      <span class="flex justify-between">
+      <span class="mt-2 flex justify-between">
         <span
+          v-if="currentCategory === CATEGORY_IDEAS"
           class="rounded-l border border-slate-400 bg-slate-200 px-4 py-2 flex"
           @click="prevIdea()"
         >
@@ -20,7 +21,7 @@
 
         <div class="m-2">
           <span v-if="currentCategory === CATEGORY_IDEAS">
-            <p class="text-center text-lg font-bold">
+            <p class="text-center text-lg">
               {{ IDEAS[currentIdeaIndex] }}
             </p>
           </span>
@@ -28,12 +29,12 @@
             <p class="text-center">
               <span
                 v-if="currentContact == null"
-                class="text-orange-500 text-lg font-bold"
+                class="text-orange-500 text-lg"
               >
                 That's all your contacts.
               </span>
               <span v-else>
-                <span class="text-lg font-bold">
+                <span class="text-lg">
                   Did {{ currentContact.name || AppString.NO_CONTACT_NAME }}
                   <br />
                   or someone near them do anything &ndash; maybe a while ago?
@@ -85,21 +86,22 @@ export default class GivenPrompts extends Vue {
   CATEGORY_CONTACTS = 1;
   CATEGORY_IDEAS = 0;
   IDEAS = [
-    "What food did someone fix for you?",
-    "What did a family member do for you?",
-    "What compliment did someone give you?",
-    "Who is someone you can always rely on, and how did they demonstrate that?",
-    "What did you see someone give to someone else?",
-    "What is a way that someone helped you even though you have never met?",
-    "How did a musician or author or artist inspire you?",
-    "What inspiration did you get from someone who handled tragedy well?",
-    "What is something worth respect that an organization gave you?",
-    "Who last gave you a good laugh?",
-    "What do you recall someone giving you while you were young?",
-    "Who forgave you or overlooked a mistake?",
-    "What is a way an ancestor contributed to your life?",
-    "What kind of help did someone at work give you?",
-    "How did a teacher or mentor or great example help you?",
+    "What food did someone make? (How did it free up your time for something? Was something doable because it eased your stress?)",
+    "What did a family member do? (How did you take better action because it made you feel loved?)",
+    "What compliment did someone give you? (What task could you tackle because it boosted your confidence?)",
+    "Who is someone you can always rely on, and how did they demonstrate that? (What project tasks were enabled because you could depend on them?)",
+    "What did you see someone give to someone else? (What is the effect of the positivity you gained from seeing that?)",
+    "What is a way that someone helped you even though you have never met? (What different action did you take due to that newfound perspective or inspiration?)",
+    "How did a musician or author or artist inspire you? (What were you motivated to do more creatively because of that?)",
+    "What inspiration did you get from someone who handled tragedy well? (What could you accomplish with better grace or resilience after seeing their example?)",
+    "What is something worth respect that an organization gave you? (How did their contribution improve the situation or enable new activities?)",
+    "Who last gave you a good laugh? (What kind of bond or revitalization did that bring to a situation?)",
+    "What do you recall someone giving you while you were young? (How did it bring excitement or teach a skill or ignite a passion that resulted in improvements in your life?)",
+    "Who forgave you or overlooked a mistake? (How did that free you or build trust that enabled better relationships?)",
+    "What is a way an ancestor contributed to your life? (What in your life is now possible because of their efforts? What challenges are you undertaking knowing of their lives?)",
+    "What kind of help did someone at work give you? (How did that help with team progress? How did that lift your professional growth?)",
+    "How did a teacher or mentor or great example help you? (How did their guidance enhance your attitude or actions?)",
+    "What is a surprise gift you received? (What extra possibilities did it give you?)",
   ];
 
   callbackOnFullGiftInfo?: (
@@ -116,9 +118,9 @@ export default class GivenPrompts extends Vue {
   AppString = AppString;
 
   async open(
-    callbackOnFullGiftInfo: (
-      contactInfo: GiverReceiverInputInfo,
-      description: string,
+    callbackOnFullGiftInfo?: (
+      contactInfo?: GiverReceiverInputInfo,
+      description?: string,
     ) => void,
   ) {
     this.visible = true;
@@ -238,6 +240,7 @@ export default class GivenPrompts extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/HiddenDidDialog.vue

@@ -0,0 +1,182 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+  >
+    <div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
+      <!-- Header -->
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>
+        <button @click="close" class="text-gray-500 hover:text-gray-700">
+          <fa icon="times" />
+        </button>
+      </div>
+
+      <!-- Content -->
+      <!-- This is somewhat similar to ClaimView.vue and ConfirmGiftView.vue -->
+      <div class="mb-4">
+        <p class="mb-4">
+          <span v-if="R.isEmpty(visibleToDids)">
+            The {{ roleName }} is not visible to you or any of your contacts.
+          </span>
+          <span v-else> The {{ roleName }} is not visible to you. </span>
+        </p>
+
+        <div v-if="R.isEmpty(visibleToDids)">
+          <p class="mt-2">
+            You can ask one of your contacts to take a look and see if their
+            contacts can see more details. Someone is connected to people closer
+            to them; if you don't know who to ask, try the person who registered
+            you.
+          </p>
+        </div>
+
+        <div v-else>
+          <p class="mb-2">
+            They are visible to some of your contacts. If you'd like an
+            introduction, ask them if they'll tell you more.
+          </p>
+
+          <div class="ml-4">
+            <ul>
+              <li
+                v-for="(visDid, idx) of visibleToDids"
+                :key="idx"
+                class="list-disc ml-4 mb-2"
+              >
+                <div class="text-sm">
+                  <span>
+                    {{ didInfo(visDid) }}
+                    <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
+                      <a
+                        :href="`/did/${visDid}`"
+                        target="_blank"
+                        class="text-blue-500"
+                      >
+                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                      </a>
+                    </span>
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="mt-4">
+          <span v-if="canShare">
+            If you'd like an introduction,
+            <a @click="onClickShareClaim()" class="text-blue-500"
+              >click here to share the information with them and ask if they'll
+              tell you more about the {{ roleName }}.</a
+            >
+          </span>
+          <span v-else>
+            If you'd like an introduction,
+            <a
+              @click="copyToClipboard('A link to this page', windowLocation)"
+              class="text-blue-500"
+              >click here to copy this page, paste it into a message, and ask if
+              they'll tell you more about the {{ roleName }}.</a
+            >
+          </span>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="flex justify-end">
+        <button
+          @click="close"
+          class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import * as R from "ramda";
+import { useClipboard } from "@vueuse/core";
+import { Contact } from "@/db/tables/contacts";
+import * as serverUtil from "@/libs/endorserServer";
+import { NotificationIface } from "@/constants/app";
+
+@Component
+export default class HiddenDidDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  isOpen = false;
+  roleName = "";
+  visibleToDids: string[] = [];
+  allContacts: Array<Contact> = [];
+  activeDid = "";
+  allMyDids: Array<string> = [];
+  canShare = false;
+  windowLocation = window.location.href;
+
+  R = R;
+  serverUtil = serverUtil;
+
+  created() {
+    // When Chrome compatibility is fixed https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API#api.navigator.canshare
+    // then use this truer check: navigator.canShare && navigator.canShare()
+    this.canShare = !!navigator.share;
+  }
+
+  open(
+    roleName: string,
+    visibleToDids: string[],
+    allContacts: Array<Contact>,
+    activeDid: string,
+    allMyDids: Array<string>,
+  ) {
+    this.roleName = roleName;
+    this.visibleToDids = visibleToDids;
+    this.allContacts = allContacts;
+    this.activeDid = activeDid;
+    this.allMyDids = allMyDids;
+    this.isOpen = true;
+  }
+
+  close() {
+    this.isOpen = false;
+  }
+
+  didInfo(did: string) {
+    return serverUtil.didInfo(
+      did,
+      this.activeDid,
+      this.allMyDids,
+      this.allContacts,
+    );
+  }
+
+  copyToClipboard(name: string, text: string) {
+    useClipboard()
+      .copy(text)
+      .then(() => {
+        this.$notify(
+          {
+            group: "alert",
+            type: "toast",
+            title: "Copied",
+            text: (name || "That") + " was copied to the clipboard.",
+          },
+          2000,
+        );
+      });
+  }
+
+  onClickShareClaim() {
+    this.copyToClipboard("A link to this page", this.windowLocation);
+    window.navigator.share({
+      title: "Help Connect Me",
+      text: "I'm trying to find the people who recorded this. Can you help me?",
+      url: this.windowLocation,
+    });
+  }
+}
+</script>

src/components/ImageMethodDialog.vue

@@ -18,7 +18,7 @@
 
       <div>
         <div class="text-center mt-8">
-          <div class>
+          <div>
             <fa
               icon="camera"
               class="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-2 rounded-md"
@@ -155,6 +155,7 @@ export default class ImageMethodDialog extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/ImageViewer.vue

@@ -0,0 +1,97 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50 flex flex-col bg-black/90"
+      >
+        <!-- Header bar - fixed height to prevent overlap -->
+        <div class="h-16 flex justify-between items-center px-4 bg-black">
+          <button
+            class="text-white text-2xl p-2 rounded-full hover:bg-white/10"
+            @click="close"
+          >
+            <fa icon="xmark" />
+          </button>
+
+          <!-- Mobile share button -->
+          <button
+            v-if="isMobile"
+            class="text-white text-xl p-2 rounded-full hover:bg-white/10"
+            @click="handleShare"
+          >
+            <fa icon="ellipsis" />
+          </button>
+        </div>
+
+        <!-- Image container - fill remaining space -->
+        <div class="flex-1 flex items-center justify-center p-2">
+          <div class="w-full h-full flex items-center justify-center">
+            <img
+              :src="imageUrl"
+              class="max-h-[calc(100vh-5rem)] w-full h-full object-contain"
+              @click.stop
+              alt="expanded shared content"
+            />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-facing-decorator";
+import { UAParser } from "ua-parser-js";
+
+@Component({ emits: ["update:isOpen"] })
+export default class ImageViewer extends Vue {
+  @Prop() imageUrl!: string;
+  @Prop() imageData!: Blob | null;
+  @Prop() isOpen!: boolean;
+
+  userAgent = new UAParser();
+
+  get isMobile() {
+    const os = this.userAgent.getOS().name;
+    return os === "iOS" || os === "Android";
+  }
+
+  close() {
+    this.$emit("update:isOpen", false);
+  }
+
+  async handleShare() {
+    const os = this.userAgent.getOS().name;
+
+    try {
+      if (os === "iOS" || os === "Android") {
+        if (navigator.share) {
+          // Always share the URL since it's more reliable across platforms
+          await navigator.share({
+            url: this.imageUrl
+          });
+        } else {
+          // Fallback for browsers without share API
+          window.open(this.imageUrl, "_blank");
+        }
+      }
+    } catch (error) {
+      console.warn("Share failed, opening in new tab:", error);
+      window.open(this.imageUrl, "_blank");
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

src/components/InviteDialog.vue

@@ -96,6 +96,7 @@ export default class InviteDialog extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/MembersList.vue

@@ -0,0 +1,522 @@
+<template>
+  <div class="space-y-4">
+    <!-- Loading State -->
+    <div
+      v-if="isLoading"
+      class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
+    >
+      <fa icon="spinner" class="fa-spin-pulse" />
+    </div>
+
+    <!-- Members List -->
+
+    <div v-else>
+      <div class="text-center text-red-600 py-4">
+        {{ decryptionErrorMessage() }}
+      </div>
+
+      <div v-if="missingMyself" class="py-4 text-red-600">
+        You are not currently admitted by the organizer.
+      </div>
+      <div v-if="!firstName" class="py-4 text-red-600">
+        Your name is not set, so others may not recognize you. Reload this page
+        to set it.
+      </div>
+
+      <div>
+        <span
+          v-if="membersToShow().length > 0 && showOrganizerTools && isOrganizer"
+          class="inline-flex items-center flex-wrap"
+        >
+          <span class="inline-flex items-center">
+            &bull; Click
+            <span
+              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
+            >
+              <fa icon="plus" class="text-sm" />
+            </span>
+            /
+            <span
+              class="mx-2 min-w-[24px] min-h-[24px] w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600"
+            >
+              <fa icon="minus" class="text-sm" />
+            </span>
+            to add/remove them to/from the meeting.
+          </span>
+        </span>
+      </div>
+      <div>
+        <span
+          v-if="membersToShow().length > 0"
+          class="inline-flex items-center"
+        >
+          &bull; Click
+          <span
+            class="mx-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600"
+          >
+            <fa icon="circle-user" class="text-xl" />
+          </span>
+          to add them to your contacts.
+        </span>
+      </div>
+
+      <div class="flex justify-center">
+        <!-- always have at least one refresh button even without members in case the organizer changes the password -->
+        <button
+          @click="fetchMembers"
+          class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+          title="Refresh members list"
+        >
+          <fa icon="rotate" :class="{ 'fa-spin': isLoading }" />
+        </button>
+      </div>
+      <div
+        v-for="member in membersToShow()"
+        :key="member.member.memberId"
+        class="mt-2 p-4 bg-gray-50 rounded-lg"
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <h3 class="text-lg font-medium">{{ member.name }}</h3>
+            <div
+              v-if="!getContactFor(member.did) && member.did !== activeDid"
+              class="flex justify-end"
+            >
+              <button
+                @click="addAsContact(member)"
+                class="ml-2 w-8 h-8 flex items-center justify-center rounded-full bg-green-100 text-green-600 hover:bg-green-200 hover:text-green-800 transition-colors"
+                title="Add as contact"
+              >
+                <fa icon="circle-user" class="text-xl" />
+              </button>
+            </div>
+            <button
+              v-if="member.did !== activeDid"
+              @click="
+                informAboutAddingContact(
+                  getContactFor(member.did) !== undefined,
+                )
+              "
+              class="ml-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
+              title="Contact info"
+            >
+              <fa icon="circle-info" class="text-base" />
+            </button>
+          </div>
+          <div class="flex">
+            <span
+              v-if="
+                showOrganizerTools && isOrganizer && member.did !== activeDid
+              "
+              class="flex items-center"
+            >
+              <button
+                @click="checkWhetherContactBeforeAdmitting(member)"
+                class="mr-2 w-6 h-6 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+                :title="
+                  member.member.admitted ? 'Remove member' : 'Admit member'
+                "
+              >
+                <fa
+                  :icon="member.member.admitted ? 'minus' : 'plus'"
+                  class="text-sm"
+                />
+              </button>
+              <button
+                @click="informAboutAdmission()"
+                class="mr-2 mb-2 w-6 h-6 flex items-center justify-center rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-colors"
+                title="Admission info"
+              >
+                <fa icon="circle-info" class="text-base" />
+              </button>
+            </span>
+          </div>
+        </div>
+        <p class="text-sm text-gray-600 truncate">
+          {{ member.did }}
+        </p>
+      </div>
+      <div v-if="membersToShow().length > 0" class="flex justify-center mt-4">
+        <button
+          @click="fetchMembers"
+          class="w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 text-blue-600 hover:bg-blue-200 hover:text-blue-800 transition-colors"
+          title="Refresh members list"
+        >
+          <fa icon="rotate" :class="{ 'fa-spin': isLoading }" />
+        </button>
+      </div>
+
+      <p v-if="members.length === 0" class="text-gray-500 py-4">
+        No members have joined this meeting yet
+      </p>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-facing-decorator";
+
+import {
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+  db,
+} from "@/db/index";
+import {
+  errorStringForLog,
+  getHeaders,
+  register,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
+import { decryptMessage } from "@/libs/crypto";
+import { Contact } from "@/db/tables/contacts";
+import * as libsUtil from "@/libs/util";
+import { NotificationIface } from "@/constants/app";
+
+interface Member {
+  admitted: boolean;
+  content: string;
+  memberId: number;
+}
+
+interface DecryptedMember {
+  member: Member;
+  name: string;
+  did: string;
+  isRegistered: boolean;
+}
+
+@Component
+export default class MembersList extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  libsUtil = libsUtil;
+
+  @Prop({ required: true }) password!: string;
+  @Prop({ default: false }) showOrganizerTools!: boolean;
+
+  decryptedMembers: DecryptedMember[] = [];
+  firstName = "";
+  isLoading = true;
+  isOrganizer = false;
+  members: Member[] = [];
+  missingPassword = false;
+  missingMyself = false;
+  activeDid = "";
+  apiServer = "";
+  contacts: Array<Contact> = [];
+
+  async created() {
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    this.firstName = settings.firstName || "";
+    await this.fetchMembers();
+    await this.loadContacts();
+  }
+
+  async fetchMembers() {
+    try {
+      this.isLoading = true;
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        `${this.apiServer}/api/partner/groupOnboardMembers`,
+        { headers },
+      );
+
+      if (response.data && response.data.data) {
+        this.members = response.data.data;
+        await this.decryptMemberContents();
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error fetching members: " + errorStringForLog(error),
+        true,
+      );
+      this.$emit(
+        "error",
+        serverMessageForUser(error) || "Failed to fetch members.",
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  async decryptMemberContents() {
+    this.decryptedMembers = [];
+
+    if (!this.password) {
+      this.missingPassword = true;
+      return;
+    }
+
+    let isFirstEntry = true,
+      foundMyself = false;
+    for (const member of this.members) {
+      try {
+        const decryptedContent = await decryptMessage(
+          member.content,
+          this.password,
+        );
+        const content = JSON.parse(decryptedContent);
+
+        this.decryptedMembers.push({
+          member: member,
+          name: content.name,
+          did: content.did,
+          isRegistered: !!content.isRegistered,
+        });
+        if (isFirstEntry && content.did === this.activeDid) {
+          this.isOrganizer = true;
+        }
+        if (content.did === this.activeDid) {
+          foundMyself = true;
+        }
+      } catch (error) {
+        // do nothing, relying on the count of members to determine if there was an error
+      }
+      isFirstEntry = false;
+    }
+    this.missingMyself = !foundMyself;
+  }
+
+  decryptionErrorMessage(): string {
+    if (this.isOrganizer) {
+      if (this.decryptedMembers.length < this.members.length) {
+        return "Some members have data that cannot be decrypted with that password.";
+      } else {
+        // the lists must be equal
+        return "";
+      }
+    } else {
+      // non-organizers should only see problems if the first (organizer) member is not decrypted
+      if (
+        this.decryptedMembers.length === 0 ||
+        this.decryptedMembers[0].member.memberId !== this.members[0].memberId
+      ) {
+        return "Your password is not the same as the organizer. Reload or have them check their password.";
+      } else {
+        // the first (organizer) member was decrypted OK
+        return "";
+      }
+    }
+  }
+
+  membersToShow(): DecryptedMember[] {
+    if (this.isOrganizer) {
+      if (this.showOrganizerTools) {
+        return this.decryptedMembers;
+      } else {
+        return this.decryptedMembers.filter(
+          (member: DecryptedMember) => member.member.admitted,
+        );
+      }
+    }
+    // non-organizers only get visible members from server
+    return this.decryptedMembers;
+  }
+
+  informAboutAdmission() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Admission info",
+        text: "This is to register people in Time Safari and to admit them to the meeting. A '+' symbol means they are not yet admitted and you can register and admit them. A '-' means you can remove them, but they will stay registered.",
+      },
+      10000,
+    );
+  }
+
+  informAboutAddingContact(contactImportedAlready: boolean) {
+    if (contactImportedAlready) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Contact Exists",
+          text: "They are in your contacts. If you want to remove them, you must do that from the contacts screen.",
+        },
+        10000,
+      );
+    } else {
+      this.$notify(
+        {
+          group: "alert",
+          type: "info",
+          title: "Contact Available",
+          text: "This is to add them to your contacts. If you want to remove them later, you must do that from the contacts screen.",
+        },
+        10000,
+      );
+    }
+  }
+
+  async loadContacts() {
+    this.contacts = await db.contacts.toArray();
+  }
+
+  getContactFor(did: string): Contact | undefined {
+    return this.contacts.find((contact) => contact.did === did);
+  }
+
+  checkWhetherContactBeforeAdmitting(decrMember: DecryptedMember) {
+    const contact = this.getContactFor(decrMember.did);
+    if (!decrMember.member.admitted && !contact) {
+      // If not a contact, show confirmation dialog
+      this.$notify(
+        {
+          group: "modal",
+          type: "confirm",
+          title: "Add as Contact First?",
+          text: "This person is not in your contacts. Would you like to add them as a contact first?",
+          yesText: "Add as Contact",
+          noText: "Skip Adding Contact",
+          onYes: async () => {
+            await this.addAsContact(decrMember);
+            // After adding as contact, proceed with admission
+            await this.toggleAdmission(decrMember);
+          },
+          onNo: async () => {
+            // If they choose not to add as contact, show second confirmation
+            this.$notify(
+              {
+                group: "modal",
+                type: "confirm",
+                title: "Continue Without Adding?",
+                text: "Are you sure you want to proceed with admission? If they are not a contact, you will not know their name after this meeting.",
+                yesText: "Continue",
+                onYes: async () => {
+                  await this.toggleAdmission(decrMember);
+                },
+                onCancel: async () => {
+                  // Do nothing, effectively canceling the operation
+                },
+              },
+              -1,
+            );
+          },
+        },
+        -1,
+      );
+    } else {
+      // If already a contact, proceed directly with admission
+      this.toggleAdmission(decrMember);
+    }
+  }
+
+  async toggleAdmission(decrMember: DecryptedMember) {
+    try {
+      const headers = await getHeaders(this.activeDid);
+      await this.axios.put(
+        `${this.apiServer}/api/partner/groupOnboardMember/${decrMember.member.memberId}`,
+        { admitted: !decrMember.member.admitted },
+        { headers },
+      );
+      // Update local state
+      decrMember.member.admitted = !decrMember.member.admitted;
+
+      const oldContact = this.getContactFor(decrMember.did);
+      // if admitted, now register that user if they are not registered
+      if (
+        decrMember.member.admitted &&
+        !decrMember.isRegistered &&
+        !oldContact?.registered
+      ) {
+        const contactOldOrNew: Contact = oldContact || {
+          did: decrMember.did,
+          name: decrMember.name,
+        };
+        try {
+          const result = await register(
+            this.activeDid,
+            this.apiServer,
+            this.axios,
+            contactOldOrNew,
+          );
+          if (result.success) {
+            decrMember.isRegistered = true;
+            if (oldContact) {
+              await db.contacts.update(decrMember.did, { registered: true });
+              oldContact.registered = true;
+            }
+            this.$notify(
+              {
+                group: "alert",
+                type: "success",
+                title: "Registered",
+                text: "Besides being admitted, they were also registered.",
+              },
+              3000,
+            );
+          } else {
+            throw result;
+          }
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        } catch (error: any) {
+          // registration failure is likely explained by a message from the server
+          const additionalInfo =
+            serverMessageForUser(error) || error?.error || "";
+          this.$notify(
+            {
+              group: "alert",
+              type: "warning",
+              title: "Registration failed",
+              text:
+                "They were admitted to the meeting. However, registration failed. You can register them from the contacts screen. " +
+                additionalInfo,
+            },
+            12000,
+          );
+        }
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error toggling admission: " + errorStringForLog(error),
+        true,
+      );
+      this.$emit(
+        "error",
+        serverMessageForUser(error) ||
+          "Failed to update member admission status.",
+      );
+    }
+  }
+
+  async addAsContact(member: DecryptedMember) {
+    try {
+      const newContact = {
+        did: member.did,
+        name: member.name,
+      };
+
+      await db.contacts.add(newContact);
+      this.contacts.push(newContact);
+
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Contact Added",
+          text: "They were added to your contacts.",
+        },
+        3000,
+      );
+    } catch (err) {
+      logConsoleAndDb("Error adding contact: " + errorStringForLog(err), true);
+      let message = "An error prevented adding this contact.";
+      if (err instanceof Error && err.message?.indexOf("already exists") > -1) {
+        message = "This person is already in your contact list.";
+      }
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Contact Not Added",
+          text: message,
+        },
+        5000,
+      );
+    }
+  }
+}
+</script>

src/components/OfferDialog.vue

@@ -83,7 +83,10 @@
 import { Vue, Component, Prop } from "vue-facing-decorator";
 
 import { NotificationIface } from "@/constants/app";
-import { createAndSubmitOffer } from "@/libs/endorserServer";
+import {
+  createAndSubmitOffer,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
 import { retrieveSettingsForActiveAccount } from "@/db/index";
 
@@ -304,9 +307,9 @@ export default class OfferDialog extends Vue {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getOfferCreationErrorMessage(result: any) {
     return (
+      serverMessageForUser(result) ||
       result.error?.userMessage ||
-      result.error?.error ||
-      result.response?.data?.error?.message
+      result.error?.error
     );
   }
 }
@@ -314,6 +317,7 @@ export default class OfferDialog extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/components/OnboardingDialog.vue

@@ -5,33 +5,37 @@
       <h1 class="text-xl font-bold text-center mb-4 relative">
         Welcome to Time Safari
         <br />
-        - Showcasing Gratitude & Magnifing Time
+        - Showcasing Gratitude & Magnifying Time
         <div
           class="text-lg text-center leading-none absolute right-0 -top-1"
           @click="onClickClose(true)"
         >
-          <fa icon="xmark" class="w-[1em]"></fa>
+          <fa icon="xmark" class="w-[1em]" />
         </div>
       </h1>
 
       <p v-if="isRegistered" class="mt-4">
-        You can now log things that you've received or witnessed:
+        You can now log things that you've seen:
         <span v-if="numContacts > 0">
-          click on {{ firstContactName }}'s name or
+          click on any name (like {{ firstContactName }}) or
         </span>
-        click on "Unnamed" to express your appreciation for... whatever -- like
-        thanks for showing you all these fascinating stories of
+        click on the
+        <span class="bg-green-600 text-white rounded-full">
+          <fa icon="plus" class="fa-fw" />
+        </span>
+        button to express your appreciation for... whatever -- maybe thanks for
+        showing you all these fascinating stories of
         <em>gratitude</em>.
       </p>
       <p v-else class="mt-4">
-        The feed underneath this pop-up shows the latest gifts recognized by
-        others. Once someone registers you, you'll be able to log your
-        appreciation, too.
+        The feed underneath this pop-up shows the latest gifts that others have
+        recognized. Once someone registers you, you can log your appreciation,
+        too.
       </p>
 
       <p class="mt-4">
         The more you illuminate cool things people are doing, the more you
-        attract people to work together with you.
+        attract people to work with you.
       </p>
 
       <p class="mt-4 flex items-center">
@@ -80,7 +84,7 @@
           class="text-lg text-center leading-none absolute right-0 -top-1"
           @click="onClickClose(true)"
         >
-          <fa icon="xmark" class="w-[1em]"></fa>
+          <fa icon="xmark" class="w-[1em]" />
         </div>
       </h1>
 
@@ -97,7 +101,7 @@
       <p class="mt-4">
         When you find some that seem interesting, you can offer your help. You
         are welcome to make your offer conditional, for example if they get 2
-        other people, too.
+        other people to help besides you.
       </p>
 
       <p class="mt-4 flex items-center">
@@ -137,14 +141,14 @@
           class="text-lg text-center leading-none absolute right-0 -top-1"
           @click="onClickClose(true)"
         >
-          <fa icon="xmark" class="w-[1em]"></fa>
+          <fa icon="xmark" class="w-[1em]" />
         </div>
       </h1>
 
       <p class="relative">
         Now you can take a turn: click on the
         <span class="bg-green-600 text-white rounded-full">
-          <fa icon="plus" class="fa-fw"></fa>
+          <fa icon="plus" class="fa-fw" />
         </span>
         button to throw out projects of your own... anything you'd like to see
         happen. If your first idea doesn't catch anyone, try, try again... and
@@ -259,6 +263,7 @@ export default class OnboardingDialog extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 40;
   position: fixed;
   top: 0;
   left: 0;

src/components/PhotoDialog.vue

@@ -409,6 +409,7 @@ export default class PhotoDialog extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 60;
   position: fixed;
   top: 0;
   left: 0;

src/components/PushNotificationPermission.vue

@@ -9,7 +9,7 @@
   >
     <div
       v-if="isVisible"
-      class="fixed z-[100] top-0 inset-x-0 w-full absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
+      class="fixed z-[100] top-0 inset-x-0 w-full inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
     >
       <div
         class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
@@ -101,7 +101,12 @@
 import { Component, Vue } from "vue-facing-decorator";
 
 import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
-import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import {
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+  secretDB,
+} from "@/db/index";
+import { MASTER_SECRET_KEY } from "@/db/tables/secret";
 import { urlBase64ToUint8Array } from "@/libs/crypto/vc/util";
 import * as libsUtil from "@/libs/util";
 
@@ -231,7 +236,7 @@ export default class PushNotificationPermission extends Vue {
 
     if (this.pushType === this.DIRECT_PUSH_TITLE) {
       this.messageInput =
-        "Just a friendly reminder: click and share some gratitude with the world.";
+        "Click to share some gratitude with the world -- even if they're unnamed.";
       // focus on the message input
       setTimeout(function () {
         document.getElementById("push-message")?.focus();
@@ -270,17 +275,18 @@ export default class PushNotificationPermission extends Vue {
     });
   }
 
-  private askPermission(): Promise<NotificationPermission> {
-    logConsoleAndDb(
-      "Requesting permission for notifications: " + JSON.stringify(navigator),
-    );
+  private async askPermission(): Promise<NotificationPermission> {
+    // console.log(
+    //   "Requesting permission for notifications: " + JSON.stringify(navigator),
+    // );
     if (
       !("serviceWorker" in navigator && navigator.serviceWorker?.controller)
     ) {
       return Promise.reject("Service worker not available.");
     }
 
-    const secret = localStorage.getItem("secret");
+    await secretDB.open();
+    const secret = (await secretDB.secret.get(MASTER_SECRET_KEY))?.secret;
     if (!secret) {
       return Promise.reject("No secret found.");
     }
@@ -338,7 +344,7 @@ export default class PushNotificationPermission extends Vue {
             },
             -1,
           );
-          throw new Error("We weren't granted permission.");
+          throw new Error("Permission was not granted to this app.");
         }
         return permission;
       },

src/components/QuickNav.vue

@@ -11,8 +11,11 @@
           'text-slate-500': selected !== 'Home',
         }"
       >
-        <router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
+        <router-link :to="{ name: 'home' }" class="block text-center py-2 px-1">
+          <div class="flex flex-col items-center">
             <fa icon="house-chimney" class="fa-fw" />
+            <span class="text-xs mt-1">feed</span>
+          </div>
         </router-link>
       </li>
       <!-- Search -->
@@ -26,9 +29,12 @@
       >
         <router-link
           :to="{ name: 'discover' }"
-          class="block text-center py-3 px-1"
+          class="block text-center py-2 px-1"
         >
+          <div class="flex flex-col items-center">
             <fa icon="magnifying-glass" class="fa-fw" />
+            <span class="text-xs mt-1">search</span>
+          </div>
         </router-link>
       </li>
       <!-- Projects -->
@@ -42,9 +48,12 @@
       >
         <router-link
           :to="{ name: 'projects' }"
-          class="block text-center py-3 px-1"
+          class="block text-center py-2 px-1"
         >
+          <div class="flex flex-col items-center">
             <fa icon="hand" class="fa-fw" />
+            <span class="text-xs mt-1">your work</span>
+          </div>
         </router-link>
       </li>
       <!-- Contacts -->
@@ -58,9 +67,12 @@
       >
         <router-link
           :to="{ name: 'contacts' }"
-          class="block text-center py-3 px-1"
+          class="block text-center py-2 px-1"
         >
+          <div class="flex flex-col items-center">
             <fa icon="users" class="fa-fw" />
+            <span class="text-xs mt-1">contacts</span>
+          </div>
         </router-link>
       </li>
       <!-- Profile -->
@@ -74,9 +86,18 @@
       >
         <router-link
           :to="{ name: 'account' }"
-          class="block text-center py-3 px-1"
+          class="block text-center py-2 px-1"
         >
+          <div class="flex flex-col items-center">
             <fa icon="circle-user" class="fa-fw" />
+            <!--
+             We used to say "account", so we'll keep that in the code,
+             but it isn't accurate because we don't hold anything for them.
+             We'll say "profile" to the users.
+             (Or: settings, face, registry, cache, repo, vault... or separate preferences from identity.)
+            -->
+            <span class="text-xs mt-1">profile</span>
+          </div>
         </router-link>
       </li>
     </ul>

src/components/UserNameDialog.vue

@@ -4,8 +4,7 @@
     <div class="dialog">
       <h1 class="text-xl font-bold text-center mb-4">Set Your Name</h1>
 
-      This is not sent to servers. It is only shared with people when you send
-      it to them.
+      {{ sharingExplanation }}
       <input
         type="text"
         placeholder="Name"
@@ -36,7 +35,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component } from "vue-facing-decorator";
+import { Vue, Component, Prop } from "vue-facing-decorator";
 
 import { NotificationIface } from "@/constants/app";
 import { db, retrieveSettingsForActiveAccount } from "@/db/index";
@@ -46,14 +45,21 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 export default class UserNameDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  callback: (name: string) => void = () => {};
+  @Prop({
+    default:
+      "This is not sent to servers. It is only shared with people when you send it to them.",
+  })
+  sharingExplanation!: string;
+  @Prop({ default: false }) callbackOnCancel!: boolean;
+
+  callback: (name?: string) => void = () => {};
   givenName = "";
   visible = false;
 
   /**
    * @param aCallback - callback function for name, which may be ""
    */
-  async open(aCallback?: (name: string) => void) {
+  async open(aCallback?: (name?: string) => void) {
     this.callback = aCallback || this.callback;
     const settings = await retrieveSettingsForActiveAccount();
     this.givenName = settings.firstName || "";
@@ -70,12 +76,16 @@ export default class UserNameDialog extends Vue {
 
   onClickCancel() {
     this.visible = false;
+    if (this.callbackOnCancel) {
+      this.callback();
+    }
   }
 }
 </script>
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/db/index.ts

@@ -5,6 +5,7 @@ import * as R from "ramda";
 import { Account, AccountsSchema } from "./tables/accounts";
 import { Contact, ContactSchema } from "./tables/contacts";
 import { Log, LogSchema } from "./tables/logs";
+import { MASTER_SECRET_KEY, Secret, SecretSchema } from "./tables/secret";
 import {
   MASTER_SETTINGS_KEY,
   Settings,
@@ -14,6 +15,7 @@ import { Temp, TempSchema } from "./tables/temp";
 import { DEFAULT_ENDORSER_API_SERVER } from "@/constants/app";
 
 // Define types for tables that hold sensitive and non-sensitive data
+type SecretTable = { secret: Table<Secret> };
 type SensitiveTables = { accounts: Table<Account> };
 type NonsensitiveTables = {
   contacts: Table<Contact>;
@@ -23,25 +25,39 @@ type NonsensitiveTables = {
 };
 
 // Using 'unknown' instead of 'any' for stricter typing and to avoid TypeScript warnings
+export type SecretDexie<T extends unknown = SecretTable> = BaseDexie & T;
 export type SensitiveDexie<T extends unknown = SensitiveTables> = BaseDexie & T;
 export type NonsensitiveDexie<T extends unknown = NonsensitiveTables> =
   BaseDexie & T;
 
-// Initialize Dexie databases for sensitive and non-sensitive data
-export const accountsDB = new BaseDexie("TimeSafariAccounts") as SensitiveDexie;
+//// Initialize the DBs, starting with the sensitive ones.
+
+// Initialize Dexie database for secret, which is then used to encrypt accountsDB
+export const secretDB = new BaseDexie("TimeSafariSecret") as SecretDexie;
+secretDB.version(1).stores(SecretSchema);
+
+// Initialize Dexie database for accounts
+const accountsDexie = new BaseDexie("TimeSafariAccounts") as SensitiveDexie;
+
+// Instead of accountsDBPromise, use libs/util retrieveAccountMetadata or retrieveFullyDecryptedAccount
+// so that it's clear whether the usage needs the private key inside.
+//
+// This is a promise because the decryption key comes from IndexedDB
+// and someday it may come from a password or keystore or external wallet.
+// It's important that usages take into account that there may be a delay due
+// to a user action required to unlock the data.
+export const accountsDBPromise = useSecretAndInitializeAccountsDB(
+  secretDB,
+  accountsDexie,
+);
+
+//// Now initialize the other DB.
+
+// Initialize Dexie databases for non-sensitive data
 export const db = new BaseDexie("TimeSafari") as NonsensitiveDexie;
 
-// Manage the encryption key. If not present in localStorage, create and store it.
-const secret =
-  localStorage.getItem("secret") || Encryption.createRandomEncryptionKey();
-if (!localStorage.getItem("secret")) localStorage.setItem("secret", secret);
-
-// Apply encryption to the sensitive database using the secret key
-encrypted(accountsDB, { secretKey: secret });
-
-// Define the schemas for our databases
 // Only the tables with index modifications need listing. https://dexie.org/docs/Tutorial/Design#database-versioning
-accountsDB.version(1).stores(AccountsSchema);
+
 // v1 also had contacts & settings
 // v2 added Log
 db.version(2).stores({
@@ -73,6 +89,79 @@ db.on("populate", async () => {
   await db.settings.add(DEFAULT_SETTINGS);
 });
 
+// Manage the encryption key.
+
+// It's not really secure to maintain the secret next to the user's data.
+// However, until we have better hooks into a real wallet or reliable secure
+// storage, we'll do this for user convenience. As they sign more records
+// and integrate with more people, they'll value it more and want to be more
+// secure, so we'll prompt them to take steps to back it up, properly encrypt,
+// etc. At the beginning, we'll prompt for a password, then we'll prompt for a
+// PWA so it's not in a browser... and then we hope to be integrated with a
+// real wallet or something else more secure.
+
+// One might ask: why encrypt at all? We figure a basic encryption is better
+// than none. Plus, we expect to support their own password or keystore or
+// external wallet as better signing options in the future, so it's gonna be
+// important to have the structure where each account access might require
+// user action.
+
+// (Once upon a time we stored the secret in localStorage, but it frequently
+// got erased, even though the IndexedDB still had the identity data. This
+// ended up throwing lots of errors to the user... and they'd end up in a state
+// where they couldn't take action because they couldn't unlock that identity.)
+
+// check for the secret in storage
+async function useSecretAndInitializeAccountsDB(
+  secretDB: SecretDexie,
+  accountsDB: SensitiveDexie,
+): Promise<SensitiveDexie> {
+  return secretDB
+    .open()
+    .then(() => {
+      return secretDB.secret.get(MASTER_SECRET_KEY);
+    })
+    .then((secretRow?: Secret) => {
+      let secret = secretRow?.secret;
+      if (secret != null) {
+        // they already have it in IndexedDB, so just pass it along
+        return secret;
+      } else {
+        // check localStorage (for users before v 0.3.37)
+        const localSecret = localStorage.getItem("secret");
+        if (localSecret != null) {
+          // they had one, so we want to move it to IndexedDB
+          secret = localSecret;
+        } else {
+          // they didn't have one, so let's generate one
+          secret = Encryption.createRandomEncryptionKey();
+        }
+        // it is not in IndexedDB, so add it now
+        return secretDB.secret
+          .add({ id: MASTER_SECRET_KEY, secret })
+          .then(() => {
+            return secret;
+          });
+      }
+    })
+    .then((secret?: string) => {
+      if (secret == null) {
+        throw new Error("No secret found or created.");
+      } else {
+        // apply encryption to the sensitive database using the secret key
+        encrypted(accountsDB, { secretKey: secret });
+        accountsDB.version(1).stores(AccountsSchema);
+        accountsDB.open();
+        return accountsDB;
+      }
+    })
+    .catch((error) => {
+      logConsoleAndDb("Error processing secret & encrypted accountsDB.", error);
+      // alert("There was an error processing encrypted data. See the Help page.");
+      throw error;
+    });
+}
+
 // retrieves default settings
 // calls db.open()
 export async function retrieveSettingsForDefaultAccount(): Promise<Settings> {

src/db/tables/accounts.ts

@@ -5,7 +5,7 @@ export type Account = {
   /**
    * Auto-generated ID by Dexie
    */
-  id?: number;
+  id?: number; // this is only blank on input, when the database assigns it
 
   /**
    * The date the account was created
@@ -48,7 +48,7 @@ export type Account = {
 /**
  * Schema for the accounts table in the database.
  * Fields starting with a $ character are encrypted.
- * @see {@link https://github.com/PVermeer/dexie-addon-suite-monorepo/tree/master/packages/dexie-encrypted-addon}
+ * @see {@link https://github.com/PVermeer/dexie-addon-suite-monorepo/tree/master/packages/dexie-encrypted-addon#added-schema-syntax}
  */
 export const AccountsSchema = {
   accounts:

src/db/tables/contacts.ts

@@ -1,7 +1,18 @@
+export interface ContactMethod {
+  label: string;
+  type: string; // eg. "EMAIL", "SMS", "WHATSAPP", maybe someday "GOOGLE-CONTACT-API"
+  value: string;
+}
+
 export interface Contact {
+  //
+  // When adding a property, consider whether it should be added when exporting & sharing contacts.
+
   did: string;
+  contactMethods?: Array<ContactMethod>;
   name?: string;
   nextPubKeyHashB64?: string; // base64-encoded SHA256 hash of next public key
+  notes?: string;
   profileImageUrl?: string;
   publicKeyBase64?: string;
   seesMe?: boolean; // cached value of the server setting

src/db/tables/secret.ts

@@ -0,0 +1,18 @@
+/**
+ * Represents an account stored in the database.
+ */
+export type Secret = {
+  /**
+   * Auto-generated ID by Dexie
+   */
+  id: number;
+
+  /**
+   * The secret key used to decrypt the identity if they're not using their own password
+   */
+  secret: string;
+};
+
+export const SecretSchema = { secret: "++id, secret" };
+
+export const MASTER_SECRET_KEY = 0;

src/db/tables/settings.ts

@@ -13,14 +13,14 @@ export type BoundingBox = {
  */
 export type Settings = {
   // default entry is keyed with MASTER_SETTINGS_KEY; other entries are linked to an account with account ID
-  id?: number; // this is only blank on input, when the database assigns it
+  id?: number; // this is erased for all those entries that are keyed with accountDid
 
   // if supplied, this settings record overrides the master record when the user switches to this account
   accountDid?: string; // not used in the MASTER_SETTINGS_KEY entry
   // active Decentralized ID
   activeDid?: string; // only used in the MASTER_SETTINGS_KEY entry
 
-  apiServer?: string; // API server URL
+  apiServer: string; // API server URL
 
   filterFeedByNearby?: boolean; // filter by nearby
   filterFeedByVisible?: boolean; // filter by visible users ie. anyone not hidden
@@ -29,7 +29,7 @@ export type Settings = {
   firstName?: string; // user's full name, may be null if unwanted for a particular account
   hideRegisterPromptOnNewContact?: boolean;
   isRegistered?: boolean;
-  imageServer?: string;
+  // imageServer?: string; // if we want to allow modification then we should make image functionality optional -- or at least customizable
   lastName?: string; // deprecated - put all names in firstName
 
   lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing

src/db/tables/temp.ts

@@ -9,6 +9,4 @@ export type Temp = {
 /**
  * Schema for the Temp table in the database.
  */
-export const TempSchema = {
-  temp: "id",
-};
+export const TempSchema = { temp: "id" };

src/libs/crypto/index.ts

@@ -5,11 +5,12 @@ import { wordlist } from "ethereum-cryptography/bip39/wordlists/english";
 import { HDNode } from "@ethersproject/hdnode";
 
 import {
+  CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI,
   createEndorserJwtForDid,
-  ENDORSER_JWT_URL_LOCATION,
+  CONTACT_URL_PATH_ENDORSER_CH_OLD,
+  CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
 } from "@/libs/endorserServer";
 import { DEFAULT_DID_PROVIDER_NAME } from "../veramo/setup";
-import { decodeEndorserJwt } from "@/libs/crypto/vc";
 
 export const DEFAULT_ROOT_DERIVATION_PATH = "m/84737769'/0'/0'/0'";
 
@@ -51,7 +52,7 @@ export const newIdentifier = (
  *
  *
  * @param {string} mnemonic
- * @return {*}  {[string, string, string, string]}
+ * @return {[string, string, string, string]} address, privateHex, publicHex, derivationPath
  */
 export const deriveAddress = (
   mnemonic: string,
@@ -87,7 +88,8 @@ export const generateSeed = (): string => {
 /**
  * Retrieve an access token, or "" if no DID is provided.
  *
- * @return {*}
+ * @param {string} did
+ * @return {string} JWT with basic payload
  */
 export const accessToken = async (did?: string) => {
   if (did) {
@@ -101,24 +103,34 @@ export const accessToken = async (did?: string) => {
 };
 
 /**
- @return results of uportJwtPayload:
- { iat: number, iss: string (DID), own: { name, publicEncKey (base64-encoded key) } }
-
- Note that similar code is also contained in time-safari
+ @return payload of JWT pulled out of any recognized URL path (if any)
  */
-export const getContactPayloadFromJwtUrl = (jwtUrlText: string) => {
+export const getContactJwtFromJwtUrl = (jwtUrlText: string) => {
   let jwtText = jwtUrlText;
-  const endorserContextLoc = jwtText.indexOf(ENDORSER_JWT_URL_LOCATION);
-  if (endorserContextLoc > -1) {
+  const appImportConfirmUrlLoc = jwtText.indexOf(
+    CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI,
+  );
+  if (appImportConfirmUrlLoc > -1) {
     jwtText = jwtText.substring(
-      endorserContextLoc + ENDORSER_JWT_URL_LOCATION.length,
+      appImportConfirmUrlLoc +
+        CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI.length,
     );
   }
-
-  // JWT format: { header, payload, signature, data }
-  const jwt = decodeEndorserJwt(jwtText);
-
-  return jwt.payload;
+  const appImportOneUrlLoc = jwtText.indexOf(
+    CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
+  );
+  if (appImportOneUrlLoc > -1) {
+    jwtText = jwtText.substring(
+      appImportOneUrlLoc + CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI.length,
+    );
+  }
+  const endorserUrlPathLoc = jwtText.indexOf(CONTACT_URL_PATH_ENDORSER_CH_OLD);
+  if (endorserUrlPathLoc > -1) {
+    jwtText = jwtText.substring(
+      endorserUrlPathLoc + CONTACT_URL_PATH_ENDORSER_CH_OLD.length,
+    );
+  }
+  return jwtText;
 };
 
 export const nextDerivationPath = (origDerivPath: string) => {
@@ -136,3 +148,156 @@ export const nextDerivationPath = (origDerivPath: string) => {
     .join("/");
   return newDerivPath;
 };
+
+// Base64 encoding/decoding utilities for browser
+function base64ToArrayBuffer(base64: string): Uint8Array {
+  const binaryString = atob(base64);
+  const bytes = new Uint8Array(binaryString.length);
+  for (let i = 0; i < binaryString.length; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
+  }
+  return bytes;
+}
+
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+  const binary = String.fromCharCode(...new Uint8Array(buffer));
+  return btoa(binary);
+}
+
+const SALT_LENGTH = 16;
+const IV_LENGTH = 12;
+const KEY_LENGTH = 256;
+const ITERATIONS = 100000;
+
+// Encryption helper function
+export async function encryptMessage(message: string, password: string) {
+  const encoder = new TextEncoder();
+  const salt = crypto.getRandomValues(new Uint8Array(SALT_LENGTH));
+  const iv = crypto.getRandomValues(new Uint8Array(IV_LENGTH));
+
+  // Derive key from password using PBKDF2
+  const keyMaterial = await crypto.subtle.importKey(
+    "raw",
+    encoder.encode(password),
+    "PBKDF2",
+    false,
+    ["deriveBits", "deriveKey"],
+  );
+
+  const key = await crypto.subtle.deriveKey(
+    {
+      name: "PBKDF2",
+      salt,
+      iterations: ITERATIONS,
+      hash: "SHA-256",
+    },
+    keyMaterial,
+    { name: "AES-GCM", length: KEY_LENGTH },
+    false,
+    ["encrypt"],
+  );
+
+  // Encrypt the message
+  const encryptedContent = await crypto.subtle.encrypt(
+    {
+      name: "AES-GCM",
+      iv,
+    },
+    key,
+    encoder.encode(message),
+  );
+
+  // Return a JSON structure with base64-encoded components
+  const result = {
+    salt: arrayBufferToBase64(salt),
+    iv: arrayBufferToBase64(iv),
+    encrypted: arrayBufferToBase64(encryptedContent),
+  };
+
+  return btoa(JSON.stringify(result));
+}
+
+// Decryption helper function
+export async function decryptMessage(encryptedJson: string, password: string) {
+  const decoder = new TextDecoder();
+  const { salt, iv, encrypted } = JSON.parse(atob(encryptedJson));
+
+  // Convert base64 components back to Uint8Arrays
+  const saltArray = base64ToArrayBuffer(salt);
+  const ivArray = base64ToArrayBuffer(iv);
+  const encryptedContent = base64ToArrayBuffer(encrypted);
+
+  // Derive the same key using PBKDF2 with the extracted salt
+  const keyMaterial = await crypto.subtle.importKey(
+    "raw",
+    new TextEncoder().encode(password),
+    "PBKDF2",
+    false,
+    ["deriveBits", "deriveKey"],
+  );
+
+  const key = await crypto.subtle.deriveKey(
+    {
+      name: "PBKDF2",
+      salt: saltArray,
+      iterations: ITERATIONS,
+      hash: "SHA-256",
+    },
+    keyMaterial,
+    { name: "AES-GCM", length: KEY_LENGTH },
+    false,
+    ["decrypt"],
+  );
+
+  // Decrypt the content
+  const decryptedContent = await crypto.subtle.decrypt(
+    {
+      name: "AES-GCM",
+      iv: ivArray,
+    },
+    key,
+    encryptedContent,
+  );
+
+  // Convert the decrypted content back to a string
+  return decoder.decode(decryptedContent);
+}
+
+// Test function to verify encryption/decryption
+export async function testEncryptionDecryption() {
+  try {
+    const testMessage = "Hello, this is a test message! 🚀";
+    const testPassword = "myTestPassword123";
+
+    console.log("Original message:", testMessage);
+
+    // Test encryption
+    console.log("Encrypting...");
+    const encrypted = await encryptMessage(testMessage, testPassword);
+    console.log("Encrypted result:", encrypted);
+
+    // Test decryption
+    console.log("Decrypting...");
+    const decrypted = await decryptMessage(encrypted, testPassword);
+    console.log("Decrypted result:", decrypted);
+
+    // Verify
+    const success = testMessage === decrypted;
+    console.log("Test " + (success ? "PASSED ✅" : "FAILED ❌"));
+    console.log("Messages match:", success);
+
+    // Test with wrong password
+    console.log("\nTesting with wrong password...");
+    try {
+      await decryptMessage(encrypted, "wrongPassword");
+      console.log("Should not reach here");
+    } catch (error) {
+      console.log("Correctly failed with wrong password ✅");
+    }
+
+    return success;
+  } catch (error) {
+    console.error("Test failed with error:", error);
+    return false;
+  }
+}

src/libs/crypto/vc/did-eth-local-resolver.ts

@@ -7,7 +7,7 @@
  * @param did : string
  * @returns {Promise<DIDResolutionResult>}
  *
- * Similar code resides in image-api
+ * Similar code resides in endorser-ch and image-api
  */
 export const didEthLocalResolver = async (did: string) => {
   const didRegex = /^did:ethr:(0x[0-9a-fA-F]{40})$/;
@@ -31,7 +31,7 @@ export const didEthLocalResolver = async (did: string) => {
         verificationMethod: [
           {
             id: `${did}#controller`,
-            type: "EcdsaSec256k1RecoveryMethod2020",
+            type: "EcdsaSecp256k1RecoveryMethod2020",
             controller: did,
             blockchainAccountId: "eip155:1:" + publicKeyHex,
           },

src/libs/crypto/vc/index.ts

@@ -9,7 +9,6 @@
 import { Buffer } from "buffer/";
 import * as didJwt from "did-jwt";
 import { JWTVerified } from "did-jwt";
-import { JWTDecoded } from "did-jwt/lib/JWT";
 import { Resolver } from "did-resolver";
 import { IIdentifier } from "@veramo/core";
 import * as u8a from "uint8arrays";
@@ -41,7 +40,7 @@ export interface KeyMeta {
   passkeyCredIdHex?: string;
 }
 
-const resolver = new Resolver({ ethr: didEthLocalResolver });
+const ethLocalResolver = new Resolver({ ethr: didEthLocalResolver });
 
 /**
  * Tell whether a key is from a passkey
@@ -62,6 +61,7 @@ export async function createEndorserJwtForKey(
     const privateKeyHex = identity.keys[0].privateKeyHex;
     const signer = await SimpleSigner(privateKeyHex as string);
     const options = {
+      // alg: "ES256K", // "K" is the default, "K-R" is used by the server in tests
       issuer: account.did,
       signer: signer,
       expiresIn: undefined as number | undefined,
@@ -124,7 +124,8 @@ function bytesToHex(b: Uint8Array): string {
 }
 
 // We should be calling 'verify' in more places, showing warnings if it fails.
-export function decodeEndorserJwt(jwt: string): JWTDecoded {
+// @returns JWTDecoded with { header: JWTHeader, payload: any, signature: string, data: string } (but doesn't verify the signature)
+export function decodeEndorserJwt(jwt: string) {
   return didJwt.decodeJWT(jwt);
 }
 
@@ -134,10 +135,8 @@ export async function decodeAndVerifyJwt(
   jwt: string,
 ): Promise<Omit<JWTVerified, "didResolutionResult" | "signer" | "jwt">> {
   const pieces = jwt.split(".");
-  console.log("WTF decodeAndVerifyJwt", typeof jwt, jwt, pieces);
   const header = JSON.parse(base64urlDecodeString(pieces[0]));
   const payload = JSON.parse(base64urlDecodeString(pieces[1]));
-  console.log("WTF decodeAndVerifyJwt after", header, payload);
   const issuerDid = payload.iss;
   if (!issuerDid) {
     return Promise.reject({
@@ -149,7 +148,9 @@ export async function decodeAndVerifyJwt(
 
   if (issuerDid.startsWith(ETHR_DID_PREFIX)) {
     try {
-      const verified = await didJwt.verifyJWT(jwt, { resolver });
+      const verified = await didJwt.verifyJWT(jwt, {
+        resolver: ethLocalResolver,
+      });
       return verified;
     } catch (e: unknown) {
       return Promise.reject({

src/libs/endorserServer.ts

@@ -4,12 +4,17 @@ import { sha256 } from "ethereum-cryptography/sha256";
 import { LRUCache } from "lru-cache";
 import * as R from "ramda";
 
-import { DEFAULT_IMAGE_API_SERVER } from "@/constants/app";
+import {
+  APP_SERVER,
+  DEFAULT_IMAGE_API_SERVER,
+  NotificationIface,
+} from "@/constants/app";
 import { Contact } from "@/db/tables/contacts";
 import { accessToken, deriveAddress, nextDerivationPath } from "@/libs/crypto";
-import { NonsensitiveDexie } from "@/db/index";
+import { logConsoleAndDb, NonsensitiveDexie } from "@/db/index";
 import {
-  getAccount,
+  retrieveAccountMetadata,
+  retrieveFullyDecryptedAccount,
   getPasskeyExpirationSeconds,
   GiverReceiverInputInfo,
 } from "@/libs/util";
@@ -21,10 +26,14 @@ export const SCHEMA_ORG_CONTEXT = "https://schema.org";
 export const SERVICE_ID = "endorser.ch";
 // the header line for contacts exported via Endorser Mobile
 export const CONTACT_CSV_HEADER = "name,did,pubKeyBase64,seesMe,registered";
-// the prefix for the contact URL
-export const CONTACT_URL_PREFIX = "https://endorser.ch";
-// the suffix for the contact URL
-export const ENDORSER_JWT_URL_LOCATION = "/contact?jwt=";
+// the suffix for the contact URL in this app where they are confirmed before import
+export const CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI = "/contact-import/";
+// the suffix for the contact URL in this app where a single one gets imported automatically
+export const CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI = "/contacts?contactJwt=";
+// the suffix for the old contact URL -- deprecated Jan 2025, though "endorser.ch/contact?jwt=" shows data on endorser.ch server
+export const CONTACT_URL_PATH_ENDORSER_CH_OLD = "/contact?jwt=";
+// unused now that we match on the URL path; just note that it was used for a while to create URLs that showed at endorser.ch
+//export const CONTACT_URL_PREFIX_ENDORSER_CH_OLD = "https://endorser.ch";
 // the prefix for handle IDs, the permanent ID for claims on Endorser
 export const ENDORSER_CH_HANDLE_PREFIX = "https://endorser.ch/entity/";
 
@@ -182,13 +191,9 @@ export interface PlanVerifiableCredential extends GenericVerifiableCredential {
  * Represents data about a project
  *
  * @deprecated
- * We should use PlanSummaryRecord instead.
+ * (Maybe we should use PlanSummaryRecord instead, either by adding rowId or by iterating with jwtId.)
  **/
 export interface PlanData {
-  /**
-   * Name of the project
-   **/
-  name: string;
   /**
    * Description of the project
    **/
@@ -203,9 +208,14 @@ export interface PlanData {
    */
   issuerDid: string;
   /**
-   * The identifier of the project -- different from jwtId, needs to be fixed
+   * Name of the project
    **/
-  rowid?: string;
+  name: string;
+  /**
+   * The identifier of the project record -- different from jwtId
+   * (Maybe we should use the jwtId to iterate through the records instead.)
+   **/
+  rowId?: string;
 }
 
 export interface EndorserRateLimits {
@@ -285,7 +295,12 @@ export interface ErrorResult extends ResultWithType {
 
 export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
 
+/**
+ * This is similar to Contact but it grew up in different logic paths.
+ * We may want to change this to be a Contact.
+ */
 export interface UserInfo {
+  did: string;
   name: string;
   publicEncKey: string;
   registered: boolean;
@@ -436,6 +451,7 @@ export function didInfoForContact(
   activeDid: string | undefined,
   contact?: Contact,
   allMyDids: string[] = [],
+  showDidForVisible: boolean = false,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): { known: boolean; displayName: string; profileImageUrl?: string } {
   if (!did) return { displayName: "Someone Unnamed/Unknown", known: false };
@@ -444,7 +460,7 @@ export function didInfoForContact(
   } else if (contact) {
     return {
       displayName: contact.name || "Contact With No Name",
-      known: !!contact,
+      known: true,
       profileImageUrl: contact.profileImageUrl,
     };
   } else {
@@ -452,14 +468,29 @@ export function didInfoForContact(
     return myId
       ? { displayName: "You (Alt ID)", known: true }
       : isHiddenDid(did)
-        ? { displayName: "Someone Totally Outside Your View", known: false }
+        ? { displayName: "Someone Outside Your View", known: false }
         : {
-            displayName: "Someone Visible But Outside Your Contact List",
+            displayName: showDidForVisible
+              ? did
+              : "Someone Visible But Not In Your Contact List",
             known: false,
           };
   }
 }
 
+/**
+ * @returns full contact info object (never undefined), where did is searched in contacts and allMyDids
+ */
+export function didInfoObject(
+  did: string | undefined,
+  activeDid: string | undefined,
+  allMyDids: string[],
+  contacts: Contact[],
+): { known: boolean; displayName: string; profileImageUrl?: string } {
+  const contact = contactForDid(did, contacts);
+  return didInfoForContact(did, activeDid, contact, allMyDids);
+}
+
 /**
  always returns text, maybe something like "unnamed" or "unknown"
 
@@ -475,6 +506,22 @@ export function didInfo(
   return didInfoForContact(did, activeDid, contact, allMyDids).displayName;
 }
 
+/**
+ * return text description without any references to "you" as user
+ */
+export function didInfoForCertificate(
+  did: string | undefined,
+  contacts: Contact[],
+): string {
+  return didInfoForContact(
+    did,
+    undefined,
+    contactForDid(did, contacts),
+    [],
+    true,
+  ).displayName;
+}
+
 let passkeyAccessToken: string = "";
 let passkeyTokenExpirationEpochSeconds: number = 0;
 
@@ -500,13 +547,18 @@ export function tokenExpiryTimeDescription() {
 /**
  * Get the headers for a request, potentially including Authorization
  */
-export async function getHeaders(did?: string) {
+export async function getHeaders(
+  did?: string,
+  $notify?: (notification: NotificationIface, timeout?: number) => void,
+  failureMessage?: string,
+) {
   const headers: { "Content-Type": string; Authorization?: string } = {
     "Content-Type": "application/json",
   };
   if (did) {
+    try {
       let token;
-    const account = await getAccount(did);
+      const account = await retrieveAccountMetadata(did);
       if (account?.passkeyCredIdHex) {
         if (
           passkeyAccessToken &&
@@ -527,8 +579,40 @@ export async function getHeaders(did?: string) {
         token = await accessToken(did);
       }
       headers["Authorization"] = "Bearer " + token;
+    } catch (error) {
+      // This rarely happens: we've seen it when they have account info but the
+      // encryption secret got lost. But in most cases we want users to at
+      // least see their feed -- and anything else that returns results for
+      // anonymous users.
+
+      // We'll continue with an anonymous request... still want to show feed and other things, but ideally let them know.
+      logConsoleAndDb(
+        "Something failed in getHeaders call (will proceed anonymously" +
+          ($notify ? " and notify user" : "") +
+          "): " +
+          // IntelliJ type system complains about getCircularReplacer() with: Argument of type '(obj: any, key: string, value: any) => any' is not assignable to parameter of type '(this: any, key: string, value: any) => any'.
+          //JSON.stringify(error, getCircularReplacer()), // JSON.stringify(error) on a Dexie error throws another error about: Converting circular structure to JSON
+          error,
+        true,
+      );
+      if ($notify) {
+        // remember: only want to do this if they supplied a DID, expecting personal results
+        const notifyMessage =
+          failureMessage ||
+          "Showing anonymous data. See the Help page for help with personal data.";
+        $notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Personal Data Error",
+            text: notifyMessage,
+          },
+          3000,
+        );
+      }
+    }
   } else {
-    // it's often OK to request without auth; we assume necessary checks are done earlier
+    // it's usually OK to request without auth; we assume we're only here when allowed
   }
   return headers;
 }
@@ -591,6 +675,56 @@ export async function setPlanInCache(
   planCache.set(handleId, planSummary);
 }
 
+/**
+ *
+ * @param error that is thrown from an Endorser server call by Axios
+ * @returns user-friendly message, or undefined if none found
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function serverMessageForUser(error: any) {
+  return (
+    // this is how most user messages are returned
+    error?.response?.data?.error?.message
+    // some are returned as "error" with a string, but those are more for devs and are less helpful to the user
+  );
+}
+
+/**
+ * Helpful for server errors, to get all the info -- including stuff skipped by toString & JSON.stringify
+ * It works with AxiosError, eg handling an error.response intelligently.
+ *
+ * @param error
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function errorStringForLog(error: any) {
+  let stringifiedError = "" + error;
+  try {
+    stringifiedError = JSON.stringify(error);
+  } catch (e) {
+    // can happen with Dexie, eg:
+    // TypeError: Converting circular structure to JSON
+    // --> starting at object with constructor 'DexieError2'
+    // |     property '_promise' -> object with constructor 'DexiePromise'
+    // --- property '_value' closes the circle
+  }
+  let fullError = "" + error + " - JSON: " + stringifiedError;
+  const errorResponseText = JSON.stringify(error.response);
+  // for some reason, error.response is not included in stringify result (eg. for 400 errors on invite redemptions)
+  if (!R.empty(errorResponseText) && !fullError.includes(errorResponseText)) {
+    // add error.response stuff
+    if (R.equals(error?.config, error?.response?.config)) {
+      // but exclude "config" because it's already in there
+      const newErrorResponseText = JSON.stringify(
+        R.omit(["config"] as never[], error.response),
+      );
+      fullError += " - .response w/o same config JSON: " + newErrorResponseText;
+    } else {
+      fullError += " - .response JSON: " + errorResponseText;
+    }
+  }
+  return fullError;
+}
+
 /**
  *
  * @returns { data: Array<OfferSummaryRecord>, hitLimit: boolean true if maximum was hit and there may be more }
@@ -994,7 +1128,7 @@ export async function createAndSubmitClaim(
   } catch (error: any) {
     console.error("Error submitting claim:", error);
     const errorMessage: string =
-      error.response?.data?.error?.message ||
+      serverMessageForUser(error) ||
       error.message ||
       "Got some error submitting the claim. Check your permissions, network, and error logs.";
 
@@ -1007,7 +1141,7 @@ export async function createAndSubmitClaim(
   }
 }
 
-export async function generateEndorserJwtForAccount(
+export async function generateEndorserJwtUrlForAccount(
   account: Account,
   isRegistered?: boolean,
   name?: string,
@@ -1022,6 +1156,7 @@ export async function generateEndorserJwtForAccount(
     iat: Date.now(),
     iss: account.did,
     own: {
+      did: account.did,
       name: name ?? "",
       publicEncKey,
       registered: !!isRegistered,
@@ -1031,6 +1166,7 @@ export async function generateEndorserJwtForAccount(
     contactInfo.own.profileImageUrl = profileImageUrl;
   }
 
+  // Add the next key -- not recommended for the QR code for such a high resolution
   if (includeNextKeyIfDerived && account?.mnemonic && account?.derivationPath) {
     const newDerivPath = nextDerivationPath(account.derivationPath as string);
     const nextPublicHex = deriveAddress(
@@ -1043,9 +1179,10 @@ export async function generateEndorserJwtForAccount(
       Buffer.from(nextPublicEncKeyHash).toString("base64");
     contactInfo.own.nextPublicEncKeyHash = nextPublicEncKeyHashBase64;
   }
+
   const vcJwt = await createEndorserJwtForDid(account.did, contactInfo);
 
-  const viewPrefix = CONTACT_URL_PREFIX + ENDORSER_JWT_URL_LOCATION;
+  const viewPrefix = APP_SERVER + CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI;
   return viewPrefix + vcJwt;
 }
 
@@ -1054,7 +1191,7 @@ export async function createEndorserJwtForDid(
   payload: object,
   expiresIn?: number,
 ) {
-  const account = await getAccount(issuerDid);
+  const account = await retrieveFullyDecryptedAccount(issuerDid);
   return createEndorserJwtForKey(account as KeyMeta, payload, expiresIn);
 }
 

src/libs/partnerServer.ts

@@ -0,0 +1,9 @@
+export interface UserProfile {
+  description: string;
+  locLat?: number;
+  locLon?: number;
+  locLat2?: number;
+  locLon2?: number;
+  issuerDid: string;
+  rowId?: string; // set on profile retrieved from server
+}

src/libs/util.ts

@@ -5,9 +5,9 @@ import { Buffer } from "buffer";
 import * as R from "ramda";
 import { useClipboard } from "@vueuse/core";
 
-import { DEFAULT_PUSH_SERVER } from "@/constants/app";
+import { DEFAULT_PUSH_SERVER, NotificationIface } from "@/constants/app";
 import {
-  accountsDB,
+  accountsDBPromise,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
   updateDefaultSettings,
@@ -21,6 +21,7 @@ import {
   containsHiddenDid,
   GenericCredWrapper,
   GenericVerifiableCredential,
+  GiveSummaryRecord,
   OfferVerifiableCredential,
 } from "@/libs/endorserServer";
 import { KeyMeta } from "@/libs/crypto/vc";
@@ -101,10 +102,29 @@ export const isGlobalUri = (uri: string) => {
   return uri && uri.match(new RegExp(/^[A-Za-z][A-Za-z0-9+.-]+:/));
 };
 
+export const isGiveClaimType = (claimType?: string) => {
+  return claimType === "GiveAction";
+};
+
 export const isGiveAction = (
   veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
 ) => {
-  return veriClaim.claimType === "GiveAction";
+  return isGiveClaimType(veriClaim.claimType);
+};
+
+export const shortDid = (did: string) => {
+  if (did.startsWith("did:peer:")) {
+    return (
+      did.substring(0, "did:peer:".length + 2) +
+      "..." +
+      did.substring("did:peer:".length + 18, "did:peer:".length + 25) +
+      "..."
+    );
+  } else if (did.startsWith("did:ethr:")) {
+    return did.substring(0, "did:ethr:".length + 9) + "...";
+  } else {
+    return did.substring(0, did.indexOf(":", 4) + 7) + "...";
+  }
 };
 
 export const nameForDid = (
@@ -136,16 +156,92 @@ export const doCopyTwoSecRedo = (text: string, fn: () => void) => {
     .then(() => setTimeout(fn, 2000));
 };
 
+export interface ConfirmerData {
+  confirmerIdList: string[];
+  confsVisibleToIdList: string[];
+  numConfsNotVisible: number;
+}
+
+// // This is meant to be a second argument to JSON.stringify to avoid circular references.
+// // Usage: JSON.stringify(error, getCircularReplacer())
+// // Beware: we've seen this return "undefined" when there is actually a message, eg: DatabaseClosedError: Error DEXIE ENCRYPT ADDON: Encryption key has changed
+// function getCircularReplacer() {
+//   const seen = new WeakSet();
+//   // eslint-disable-next-line @typescript-eslint/no-explicit-any
+//   return (obj: any, key: string, value: any): any => {
+//     if (typeof value === "object" && value !== null) {
+//       if (seen.has(value)) {
+//         return "[circular ref]";
+//       }
+//       seen.add(value);
+//     }
+//     return value;
+//   };
+// }
+
+/**
+ * @return only confirmers, excluding the issuer and hidden DIDs
+ */
+export async function retrieveConfirmerIdList(
+  apiServer: string,
+  claimId: string,
+  claimIssuerId: string,
+  userDid: string,
+): Promise<ConfirmerData | undefined> {
+  const confirmUrl =
+    apiServer +
+    "/api/report/issuersWhoClaimedOrConfirmed?claimId=" +
+    encodeURIComponent(serverUtil.stripEndorserPrefix(claimId));
+  const confirmHeaders = await serverUtil.getHeaders(userDid);
+  const response = await axios.get(confirmUrl, {
+    headers: confirmHeaders,
+  });
+  if (response.status === 200) {
+    const resultList1 = response.data.result || [];
+    //const publicUrls = resultList.publicUrls || [];
+    delete resultList1.publicUrls;
+    // exclude hidden DIDs
+    const resultList2 = R.reject(serverUtil.isHiddenDid, resultList1);
+    // exclude the issuer
+    const resultList3 = R.reject(
+      (did: string) => did === claimIssuerId,
+      resultList2,
+    );
+    const confirmerIdList = resultList3;
+    let numConfsNotVisible = resultList1.length - resultList2.length;
+    if (resultList3.length === resultList2.length) {
+      // the issuer was not in the "visible" list so they must be hidden
+      // so subtract them from the non-visible confirmers count
+      numConfsNotVisible = numConfsNotVisible - 1;
+    }
+    const confsVisibleToIdList = response.data.result.resultVisibleToDids || [];
+    const result: ConfirmerData = {
+      confirmerIdList,
+      confsVisibleToIdList,
+      numConfsNotVisible,
+    };
+    return result;
+  } else {
+    console.error(
+      "Bad response status of",
+      response.status,
+      "for confirmers:",
+      response,
+    );
+    return undefined;
+  }
+}
+
 /**
  * @returns true if the user can confirm the claim
  * @param veriClaim is expected to have fields: claim, claimType, and issuer
  */
-export const isGiveRecordTheUserCanConfirm = (
+export function isGiveRecordTheUserCanConfirm(
   isRegistered: boolean,
   veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
   activeDid: string,
   confirmerIdList: string[] = [],
-) => {
+): boolean {
   return (
     isRegistered &&
     isGiveAction(veriClaim) &&
@@ -153,7 +249,78 @@ export const isGiveRecordTheUserCanConfirm = (
     veriClaim.issuer !== activeDid &&
     !containsHiddenDid(veriClaim.claim)
   );
-};
+}
+
+export function notifyWhyCannotConfirm(
+  notifyFun: (notification: NotificationIface, timeout: number) => void,
+  isRegistered: boolean,
+  claimType: string | undefined,
+  giveDetails: GiveSummaryRecord | undefined,
+  activeDid: string,
+  confirmerIdList: string[] = [],
+) {
+  if (!isRegistered) {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Not Registered",
+        text: "Someone needs to register you before you can confirm.",
+      },
+      3000,
+    );
+  } else if (!isGiveClaimType(claimType)) {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Not A Give",
+        text: "This is not a giving action to confirm.",
+      },
+      3000,
+    );
+  } else if (confirmerIdList.includes(activeDid)) {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Already Confirmed",
+        text: "You already confirmed this claim.",
+      },
+      3000,
+    );
+  } else if (giveDetails?.issuerDid == activeDid) {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Cannot Confirm",
+        text: "You cannot confirm this because you issued this claim.",
+      },
+      3000,
+    );
+  } else if (serverUtil.containsHiddenDid(giveDetails?.fullClaim)) {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Cannot Confirm",
+        text: "You cannot confirm this because some people are hidden.",
+      },
+      3000,
+    );
+  } else {
+    notifyFun(
+      {
+        group: "alert",
+        type: "info",
+        title: "Cannot Confirm",
+        text: "You cannot confirm this claim. There are no other details -- we can help more if you contact us and send us screenshots.",
+      },
+      3000,
+    );
+  }
+}
 
 export async function blobToBase64(blob: Blob): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -191,9 +358,9 @@ export function base64ToBlob(base64DataUrl: string, sliceSize = 512) {
  * @returns the DID of the person who offered, or undefined if hidden
  * @param veriClaim is expected to have fields: claim and issuer
  */
-export const offerGiverDid: (
-  arg0: GenericCredWrapper<OfferVerifiableCredential>,
-) => string | undefined = (veriClaim) => {
+export function offerGiverDid(
+  veriClaim: GenericCredWrapper<OfferVerifiableCredential>,
+): string | undefined {
   let giver;
   if (
     veriClaim.claim.offeredBy?.identifier &&
@@ -204,7 +371,7 @@ export const offerGiverDid: (
     giver = veriClaim.issuer;
   }
   return giver;
-};
+}
 
 /**
  * @returns true if the user can fulfill the offer
@@ -213,9 +380,9 @@ export const offerGiverDid: (
 export const canFulfillOffer = (
   veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
 ) => {
-  return !!(
+  return (
     veriClaim.claimType === "Offer" &&
-    offerGiverDid(veriClaim as GenericCredWrapper<OfferVerifiableCredential>)
+    !!offerGiverDid(veriClaim as GenericCredWrapper<OfferVerifiableCredential>)
   );
 };
 
@@ -287,10 +454,56 @@ export function findAllVisibleToDids(
 
 export interface AccountKeyInfo extends Account, KeyMeta {}
 
-export const getAccount = async (
+export const retrieveAccountCount = async (): Promise<number> => {
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
+  return await accountsDB.accounts.count();
+};
+
+export const retrieveAccountDids = async (): Promise<string[]> => {
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
+  const allAccounts = await accountsDB.accounts.toArray();
+  const allDids = allAccounts.map((acc) => acc.did);
+  return allDids;
+};
+
+// This is provided and recommended when the full key is not necessary so that
+// future work could separate this info from the sensitive key material.
+export const retrieveAccountMetadata = async (
   activeDid: string,
 ): Promise<AccountKeyInfo | undefined> => {
-  await accountsDB.open();
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
+  const account = (await accountsDB.accounts
+    .where("did")
+    .equals(activeDid)
+    .first()) as Account;
+  if (account) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { identity, mnemonic, ...metadata } = account;
+    return metadata;
+  } else {
+    return undefined;
+  }
+};
+
+export const retrieveAllAccountsMetadata = async (): Promise<Account[]> => {
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
+  const array = await accountsDB.accounts.toArray();
+  return array.map((account) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { identity, mnemonic, ...metadata } = account;
+    return metadata;
+  });
+};
+
+export const retrieveFullyDecryptedAccount = async (
+  activeDid: string,
+): Promise<AccountKeyInfo | undefined> => {
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
   const account = (await accountsDB.accounts
     .where("did")
     .equals(activeDid)
@@ -298,6 +511,15 @@ export const getAccount = async (
   return account;
 };
 
+// let's try and eliminate this
+export const retrieveAllFullyDecryptedAccounts = async (): Promise<
+  Array<AccountKeyInfo>
+> => {
+  const accountsDB = await accountsDBPromise;
+  const allAccounts = await accountsDB.accounts.toArray();
+  return allAccounts;
+};
+
 /**
  * Generates a new identity, saves it to the database, and sets it as the active identity.
  * @return {Promise<string>} with the DID of the new identity
@@ -311,7 +533,8 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
   const newId = newIdentifier(address, publicHex, privateHex, derivationPath);
   const identity = JSON.stringify(newId);
 
-  await accountsDB.open();
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
   await accountsDB.accounts.add({
     dateCreated: new Date().toISOString(),
     derivationPath: derivationPath,
@@ -342,7 +565,8 @@ export const registerAndSavePasskey = async (
     passkeyCredIdHex,
     publicKeyHex: Buffer.from(publicKeyBytes).toString("hex"),
   };
-  await accountsDB.open();
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
   await accountsDB.accounts.add(account);
   return account;
 };

src/main.ts

@@ -22,6 +22,8 @@ import {
   faBurst,
   faCalendar,
   faCamera,
+  faCaretDown,
+  faChair,
   faCheck,
   faChevronDown,
   faChevronLeft,
@@ -43,6 +45,7 @@ import {
   faEraser,
   faEye,
   faEyeSlash,
+  faFileContract,
   faFileLines,
   faFilter,
   faFloppyDisk,
@@ -58,6 +61,7 @@ import {
   faImagePortrait,
   faLeftRight,
   faLightbulb,
+  faLink,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
@@ -70,6 +74,7 @@ import {
   faPlus,
   faQuestion,
   faQrcode,
+  faRightFromBracket,
   faRotate,
   faShareNodes,
   faSpinner,
@@ -96,6 +101,8 @@ library.add(
   faBurst,
   faCalendar,
   faCamera,
+  faCaretDown,
+  faChair,
   faCheck,
   faChevronDown,
   faChevronLeft,
@@ -117,6 +124,7 @@ library.add(
   faEraser,
   faEye,
   faEyeSlash,
+  faFileContract,
   faFileLines,
   faFilter,
   faFloppyDisk,
@@ -132,6 +140,7 @@ library.add(
   faImagePortrait,
   faLeftRight,
   faLightbulb,
+  faLink,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
@@ -145,6 +154,7 @@ library.add(
   faQrcode,
   faQuestion,
   faRotate,
+  faRightFromBracket,
   faShareNodes,
   faSpinner,
   faSquare,
@@ -170,11 +180,14 @@ function setupGlobalErrorHandler(app: VueApp) {
     info: string,
   ) => {
     console.error(
-      "Ouch! Global Error Handler. Info:",
-      info,
+      "Ouch! Global Error Handler.",
       "Error:",
       err,
-      "Instance:",
+      "- Error toString:",
+      err.toString(),
+      "- Info:",
+      info,
+      "- Instance:",
       instance,
     );
     // Want to show a nice notiwind notification but can't figure out how.

src/router/index.ts

@@ -5,7 +5,7 @@ import {
   RouteLocationNormalized,
   RouteRecordRaw,
 } from "vue-router";
-import { accountsDB } from "@/db/index";
+import { accountsDBPromise } from "@/db/index";
 
 /**
  *
@@ -18,7 +18,8 @@ const enterOrStart = async (
   from: RouteLocationNormalized,
   next: NavigationGuardNext,
 ) => {
-  await accountsDB.open();
+  // one of the few times we use accountsDBPromise directly; try to avoid more usage
+  const accountsDB = await accountsDBPromise;
   const num_accounts = await accountsDB.accounts.count();
   if (num_accounts > 0) {
     next();
@@ -43,6 +44,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "claim-add-raw",
     component: () => import("../views/ClaimAddRawView.vue"),
   },
+  {
+    path: "/claim-cert/:id",
+    name: "claim-cert",
+    component: () => import("../views/ClaimCertificateView.vue"),
+  },
   {
     path: "/confirm-contact",
     name: "confirm-contact",
@@ -58,13 +64,18 @@ const routes: Array<RouteRecordRaw> = [
     name: "contact-amounts",
     component: () => import("../views/ContactAmountsView.vue"),
   },
+  {
+    path: "/contact-edit/:did",
+    name: "contact-edit",
+    component: () => import("../views/ContactEditView.vue"),
+  },
   {
     path: "/contact-gift",
     name: "contact-gift",
     component: () => import("../views/ContactGiftingView.vue"),
   },
   {
-    path: "/contact-import",
+    path: "/contact-import/:jwt?",
     name: "contact-import",
     component: () => import("../views/ContactImportView.vue"),
   },
@@ -138,6 +149,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "invite-one",
     component: () => import("../views/InviteOneView.vue"),
   },
+  {
+    path: "/invite-one-accept/:jwt?",
+    name: "InviteOneAcceptView",
+    component: () => import("@/views/InviteOneAcceptView.vue"),
+  },
   {
     path: "/new-activity",
     name: "new-activity",
@@ -163,6 +179,21 @@ const routes: Array<RouteRecordRaw> = [
     name: "offer-details",
     component: () => import("../views/OfferDetailsView.vue"),
   },
+  {
+    path: "/onboard-meeting-list",
+    name: "onboard-meeting-list",
+    component: () => import("../views/OnboardMeetingListView.vue"),
+  },
+  {
+    path: "/onboard-meeting-members/:groupId",
+    name: "onboard-meeting-members",
+    component: () => import("../views/OnboardMeetingMembersView.vue"),
+  },
+  {
+    path: "/onboard-meeting-setup",
+    name: "onboard-meeting-setup",
+    component: () => import("../views/OnboardMeetingSetupView.vue"),
+  },
   {
     path: "/project/:id?",
     name: "project",
@@ -242,6 +273,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "test",
     component: () => import("../views/TestView.vue"),
   },
+  {
+    path: "/userProfile/:id?",
+    name: "userProfile",
+    component: () => import("../views/UserProfileView.vue"),
+  },
 ];
 
 /** @type {*} */
@@ -258,6 +294,7 @@ const errorHandler = (
 ) => {
   // Handle the error here
   console.error("Caught in top level error handler:", error, to, from);
+  alert("Something is very wrong. Try reloading or restarting the app.");
 
   // You can also perform additional actions, such as displaying an error message or redirecting the user to a specific page
 };

src/views/AccountViewView.vue

@@ -82,13 +82,12 @@
         <div v-else class="text-center">
           <div class @click="openImageDialog()">
             <fa
-              icon="camera"
+              icon="image-portrait"
               class="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-2 rounded-l"
             />
             <fa
-              icon="image-portrait"
+              icon="camera"
               class="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-2 rounded-r"
-              @click="openImageDialog()"
             />
           </div>
         </div>
@@ -159,7 +158,7 @@
      We'll just pop the message in only if we discover that they need it.
     -->
     <div
-      v-if="!loadingLimits && !endorserLimits?.nextWeekBeginDateTime"
+      v-if="!isRegistered"
       id="noticeBeforeAnnounce"
       class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mt-4"
     >
@@ -176,6 +175,7 @@
     </div>
 
     <div
+      v-if="isRegistered"
       id="sectionNotifications"
       class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
     >
@@ -243,26 +243,118 @@
         {{ notifyingNewActivityTime.replace(" ", "&nbsp;") }}
       </div>
       <router-link class="pl-4 text-sm text-blue-500" to="/help-notifications">
-        Troubleshoot your notification setup.
+        Troubleshoot your notifications.
       </router-link>
     </div>
     <PushNotificationPermission ref="pushNotificationPermission" />
 
     <div
       id="sectionSearchLocation"
-      class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
+      class="flex justify-between bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
     >
       <!-- label -->
-      <div class="mb-2 font-bold">Location for Searches</div>
+      <span class="mb-2 font-bold">Location for Searches</span>
       <router-link
         :to="{ name: 'search-area' }"
-        class="block w-full text-center text-m 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-1.5 py-2 rounded-md mb-2 mt-6"
+        class="text-m 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-1.5 py-2 rounded-md mb-2"
       >
-        Set Search Area…
-        <!-- If already set, change button label to "Change Search Area" -->
+        {{ isSearchAreasSet ? "Change" : "Set" }} Search Area…
       </router-link>
     </div>
 
+    <!-- User Profile -->
+    <div
+      v-if="isRegistered"
+      class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
+    >
+      <div v-if="loadingProfile" class="text-center mb-2">
+        <fa icon="spinner" class="fa-spin text-slate-400"></fa> Loading
+        profile...
+      </div>
+      <div v-else class="flex items-center mb-2">
+        <span class="font-bold">Public Profile</span>
+        <fa
+          icon="circle-info"
+          class="text-slate-400 fa-fw ml-2 cursor-pointer"
+          @click="showProfileInfo"
+        />
+      </div>
+      <textarea
+        v-model="userProfileDesc"
+        class="w-full h-32 p-2 border border-slate-300 rounded-md"
+        placeholder="Write something about yourself for the public..."
+        :readonly="loadingProfile || savingProfile"
+        :class="{ 'bg-slate-100': loadingProfile || savingProfile }"
+      ></textarea>
+
+      <div class="flex items-center mb-4" @click="toggleUserProfileLocation">
+        <input
+          type="checkbox"
+          class="mr-2"
+          v-model="includeUserProfileLocation"
+        />
+        <label for="includeUserProfileLocation">Include Location</label>
+      </div>
+      <div v-if="includeUserProfileLocation" class="mb-4 aspect-video">
+        <p class="text-sm mb-2 text-slate-500">
+          For your security, choose a location nearby but not exactly at your
+          place.
+        </p>
+
+        <l-map
+          ref="profileMap"
+          class="!z-40 rounded-md"
+          @click="
+            (event: LeafletMouseEvent) => {
+              userProfileLatitude = event.latlng.lat;
+              userProfileLongitude = event.latlng.lng;
+            }
+          "
+          @ready="onMapReady"
+        >
+          <l-tile-layer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            layer-type="base"
+            name="OpenStreetMap"
+          />
+          <l-marker
+            v-if="userProfileLatitude && userProfileLongitude"
+            :lat-lng="[userProfileLatitude, userProfileLongitude]"
+            @click="confirmEraseLatLong()"
+          />
+        </l-map>
+      </div>
+      <div v-if="!loadingProfile && !savingProfile">
+        <div class="flex justify-between items-center">
+          <button
+            @click="saveProfile"
+            class="mt-2 px-4 py-2 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
+            :disabled="loadingProfile || savingProfile"
+            :class="{
+              'opacity-50 cursor-not-allowed': loadingProfile || savingProfile,
+            }"
+          >
+            Save Profile
+          </button>
+          <button
+            @click="confirmDeleteProfile"
+            class="mt-2 px-4 py-2 bg-gradient-to-b from-red-400 to-red-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white rounded-md"
+            :disabled="loadingProfile || savingProfile"
+            :class="{
+              'opacity-50 cursor-not-allowed':
+                loadingProfile ||
+                savingProfile ||
+                (!userProfileDesc && !includeUserProfileLocation),
+            }"
+          >
+            Delete Profile
+          </button>
+        </div>
+      </div>
+      <div v-else-if="loadingProfile">Loading...</div>
+      <div v-else>Saving...</div>
+    </div>
+
     <div
       v-if="activeDid"
       id="sectionUsageLimits"
@@ -599,7 +691,7 @@
       <h2 class="text-slate-500 text-sm font-bold mb-2">
         Notification Push Server
       </h2>
-      <div id="sectionNotificationPushServer" class="px-3 py-4">
+      <div class="px-3 py-4">
         <input
           type="text"
           class="block w-full rounded border border-slate-400 px-3 py-2"
@@ -676,7 +768,7 @@
         {{ DEFAULT_PARTNER_API_SERVER }}
       </span>
 
-      <div id="sectionImageServerURL" class="mt-2">
+      <div class="mt-2">
         <span class="text-slate-500 text-sm font-bold">Image Server URL</span>
         &nbsp;
         <span class="text-sm">{{ DEFAULT_IMAGE_API_SERVER }}</span>
@@ -791,17 +883,21 @@
 </template>
 
 <script lang="ts">
+import "leaflet/dist/leaflet.css";
+
 import { AxiosError } from "axios";
 import { Buffer } from "buffer/";
 import Dexie from "dexie";
 import "dexie-export-import";
 import { ImportProgress } from "dexie-export-import/dist/import";
+import { LeafletMouseEvent } from "leaflet";
 import * as R from "ramda";
 import { IIdentifier } from "@veramo/core";
 import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
+import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 
 import EntityIcon from "@/components/EntityIcon.vue";
 import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
@@ -819,7 +915,7 @@ import {
 } from "@/constants/app";
 import {
   db,
-  accountsDB,
+  logConsoleAndDb,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
 } from "@/db/index";
@@ -831,15 +927,21 @@ import {
 } from "@/db/tables/settings";
 import {
   clearPasskeyToken,
-  ErrorResponse,
   EndorserRateLimits,
+  ErrorResponse,
+  errorStringForLog,
   fetchEndorserRateLimits,
   fetchImageRateLimits,
   getHeaders,
   ImageRateLimits,
   tokenExpiryTimeDescription,
 } from "@/libs/endorserServer";
-import { DAILY_CHECK_TITLE, DIRECT_PUSH_TITLE, getAccount } from "@/libs/util";
+import {
+  DAILY_CHECK_TITLE,
+  DIRECT_PUSH_TITLE,
+  retrieveAccountMetadata,
+} from "@/libs/util";
+import { UserProfile } from "@/libs/partnerServer";
 
 const inputImportFileNameRef = ref<Blob>();
 
@@ -847,6 +949,10 @@ const inputImportFileNameRef = ref<Blob>();
   components: {
     EntityIcon,
     ImageMethodDialog,
+    LeafletMouseEvent,
+    LMap,
+    LMarker,
+    LTileLayer,
     PushNotificationPermission,
     QuickNav,
     TopMessage,
@@ -870,23 +976,26 @@ export default class AccountViewView extends Vue {
   givenName = "";
   hideRegisterPromptOnNewContact = false;
   imageLimits: ImageRateLimits | null = null;
-  imageServer = "";
+  includeUserProfileLocation = false;
   isRegistered = false;
+  isSearchAreasSet = false;
   limitsMessage = "";
   loadingLimits = false;
+  loadingProfile = true;
   notifyingNewActivity = false;
   notifyingNewActivityTime = "";
   notifyingReminder = false;
   notifyingReminderMessage = "";
   notifyingReminderTime = "";
-  partnerApiServer = "";
-  partnerApiServerInput = "";
+  partnerApiServer = DEFAULT_PARTNER_API_SERVER;
+  partnerApiServerInput = DEFAULT_PARTNER_API_SERVER;
   passkeyExpirationDescription = "";
   passkeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
   previousPasskeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
   profileImageUrl?: string;
   publicHex = "";
   publicBase64 = "";
+  savingProfile = false;
   showAdvanced = false;
   showB64Copy = false;
   showContactGives = false;
@@ -900,8 +1009,12 @@ export default class AccountViewView extends Vue {
   subscription: PushSubscription | null = null;
   warnIfProdServer = false;
   warnIfTestServer = false;
-  webPushServer = "";
-  webPushServerInput = "";
+  webPushServer = DEFAULT_PUSH_SERVER;
+  webPushServerInput = DEFAULT_PUSH_SERVER;
+  userProfileDesc = "";
+  userProfileLatitude = 0;
+  userProfileLongitude = 0;
+  zoom = 2;
 
   /**
    * Async function executed when the component is mounted.
@@ -916,8 +1029,71 @@ export default class AccountViewView extends Vue {
       await this.initializeState();
       await this.processIdentity();
 
-      this.passkeyExpirationDescription = tokenExpiryTimeDescription();
+      // Load the user profile
+      if (this.isRegistered) {
+        try {
+          const headers = await getHeaders(this.activeDid);
+          const response = await this.axios.get(
+            this.apiServer +
+              "/api/partner/userProfileForIssuer/" +
+              this.activeDid,
+            { headers },
+          );
+          if (response.status === 200) {
+            this.userProfileDesc = response.data.data.description || "";
+            this.userProfileLatitude = response.data.data.locLat || 0;
+            this.userProfileLongitude = response.data.data.locLon || 0;
+            if (this.userProfileLatitude && this.userProfileLongitude) {
+              this.includeUserProfileLocation = true;
+            }
+          } else {
+            // won't get here because axios throws an error instead
+            throw Error("Unable to load profile.");
+          }
+        } catch (error) {
+          if (error.status === 404) {
+            // this is ok: the profile is not yet created
+          } else {
+            logConsoleAndDb(
+              "Error loading profile: " + errorStringForLog(error),
+            );
+            this.$notify(
+              {
+                group: "alert",
+                type: "danger",
+                title: "Error Loading Profile",
+                text: "Your server profile is not available.",
+              },
+              5000,
+            );
+          }
+        } finally {
+          this.loadingProfile = false;
+        }
+      }
+    } catch (error) {
+      // this can happen when running automated tests in dev mode because notifications don't work
+      console.error(
+        "Telling user to clear cache at page create because:",
+        error,
+      );
+      // this sometimes gives different information on the error
+      console.error(
+        "To repeat with concatenated error: telling user to clear cache at page create because: " +
+          error,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Loading Profile",
+          text: "See the Help page about errors with your personal data.",
+        },
+        5000,
+      );
+    }
 
+    try {
       /**
        * Beware! I've seen where this "ready" never resolves.
        */
@@ -934,26 +1110,17 @@ export default class AccountViewView extends Vue {
        * Beware! I've seen where we never get to this point because "ready" never resolves.
        */
     } catch (error) {
-      // this can happen when running automated tests in dev mode because notifications don't work
-      console.error(
-        "Telling user to clear cache at page create because:",
-        error,
-      );
-      // this sometimes gives different information on the error
-      console.error(
-        "Telling user to clear cache at page create because (error added): " +
-          error,
-      );
       this.$notify(
         {
           group: "alert",
-          type: "danger",
-          title: "Error Loading Account",
-          text: "Clear your cache and start over (after data backup).",
+          type: "warning",
+          title: "Cannot Set Notifications",
+          text: "This browser does not support notifications. Use Chrome, or install this to the home screen, or try other suggestions on the 'Troubleshoot your notifications' page.",
         },
-        -1,
+        3000,
       );
     }
+    this.passkeyExpirationDescription = tokenExpiryTimeDescription();
   }
 
   beforeUnmount() {
@@ -978,14 +1145,15 @@ export default class AccountViewView extends Vue {
     this.hideRegisterPromptOnNewContact =
       !!settings.hideRegisterPromptOnNewContact;
     this.isRegistered = !!settings?.isRegistered;
-    this.imageServer = settings.imageServer || "";
+    this.isSearchAreasSet = !!settings.searchBoxes;
     this.notifyingNewActivity = !!settings.notifyingNewActivityTime;
     this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
     this.notifyingReminder = !!settings.notifyingReminderTime;
     this.notifyingReminderMessage = settings.notifyingReminderMessage || "";
     this.notifyingReminderTime = settings.notifyingReminderTime || "";
-    this.partnerApiServer = settings.partnerApiServer || "";
-    this.partnerApiServerInput = settings.partnerApiServer || "";
+    this.partnerApiServer = settings.partnerApiServer || this.partnerApiServer;
+    this.partnerApiServerInput =
+      settings.partnerApiServer || this.partnerApiServerInput;
     this.profileImageUrl = settings.profileImageUrl;
     this.showContactGives = !!settings.showContactGivesInline;
     this.passkeyExpirationMinutes =
@@ -995,8 +1163,8 @@ export default class AccountViewView extends Vue {
     this.showShortcutBvc = !!settings.showShortcutBvc;
     this.warnIfProdServer = !!settings.warnIfProdServer;
     this.warnIfTestServer = !!settings.warnIfTestServer;
-    this.webPushServer = settings.webPushServer || "";
-    this.webPushServerInput = settings.webPushServer || "";
+    this.webPushServer = settings.webPushServer || this.webPushServer;
+    this.webPushServerInput = settings.webPushServer || this.webPushServerInput;
   }
 
   // call fn, copy text to the clipboard, then redo fn after 2 seconds
@@ -1055,7 +1223,9 @@ export default class AccountViewView extends Vue {
    * Processes the identity and updates the component's state.
    */
   async processIdentity() {
-    const account: Account | undefined = await getAccount(this.activeDid);
+    const account: Account | undefined = await retrieveAccountMetadata(
+      this.activeDid,
+    );
     if (account?.identity) {
       const identity = JSON.parse(account.identity as string) as IIdentifier;
       this.publicHex = identity.keys[0].publicKeyHex;
@@ -1323,7 +1493,7 @@ export default class AccountViewView extends Vue {
         title: "Export Error",
         text: "There was an error exporting the data.",
       },
-      -1,
+      3000,
     );
   }
 
@@ -1459,7 +1629,7 @@ export default class AccountViewView extends Vue {
                 title: "Update Error",
                 text: "Unable to update your settings. Check claim limits again.",
               },
-              -1,
+              5000,
             );
           }
         }
@@ -1482,87 +1652,25 @@ export default class AccountViewView extends Vue {
    */
   private handleRateLimitsError(error: unknown) {
     if (error instanceof AxiosError) {
+      if (error.status == 400 || error.status == 404) {
+        // no worries: they probably just aren't registered and don't have any limits
+        console.log(
+          "Got 400 or 404 response retrieving limits which probably means they're not registered:",
+          error,
+        );
+        this.limitsMessage = "No limits were found, so no actions are allowed.";
+      } else {
         const data = error.response?.data as ErrorResponse;
         this.limitsMessage =
           (data?.error?.message as string) || "Bad server response.";
-      console.error(
-        "Got bad response retrieving limits, which usually means user isn't registered.",
-        error,
-      );
+        console.error("Got bad response retrieving limits:", error);
+      }
     } else {
       this.limitsMessage = "Got an error retrieving limits.";
       console.error("Got some error retrieving limits:", error);
     }
   }
 
-  /**
-   * Asynchronously switches the active account based on the provided account number.
-   *
-   * @param {number} accountNum - The account number to switch to. 0 means none.
-   */
-  public async switchAccount(accountNum: number) {
-    await db.open(); // Assumes db needs to be open for both cases
-
-    if (accountNum === 0) {
-      this.switchToNoAccount();
-    } else {
-      await this.switchToAccountNumber(accountNum);
-    }
-  }
-
-  /**
-   * Switches to no active account and clears relevant properties.
-   */
-  private async switchToNoAccount() {
-    await db.settings.update(MASTER_SETTINGS_KEY, { activeDid: undefined });
-    this.clearActiveAccountProperties();
-  }
-
-  /**
-   * Clears properties related to the active account.
-   */
-  private clearActiveAccountProperties() {
-    this.activeDid = "";
-    this.derivationPath = "";
-    this.publicHex = "";
-    this.publicBase64 = "";
-  }
-
-  /**
-   * Switches to an account based on its number in the list.
-   *
-   * @param {number} accountNum - The account number to switch to.
-   */
-  private async switchToAccountNumber(accountNum: number) {
-    await accountsDB.open();
-    const accounts = await accountsDB.accounts.toArray();
-    const account = accounts[accountNum - 1];
-
-    await db.open();
-    await db.settings.update(MASTER_SETTINGS_KEY, { activeDid: account.did });
-
-    this.updateActiveAccountProperties(account);
-  }
-
-  /**
-   * Updates properties related to the active account.
-   *
-   * @param {AccountType} account - The account object.
-   */
-  private updateActiveAccountProperties(account: Account) {
-    this.activeDid = account.did;
-    this.derivationPath = account.derivationPath || "";
-    this.publicHex = account.publicKeyHex;
-    this.publicBase64 = Buffer.from(this.publicHex, "hex").toString("base64");
-  }
-
-  public showContactGivesClassNames() {
-    return {
-      "bg-slate-900": !this.showContactGives,
-      "bg-green-600": this.showContactGives,
-    };
-  }
-
   async onClickSaveApiServer() {
     await db.open();
     await db.settings.update(MASTER_SETTINGS_KEY, {
@@ -1592,7 +1700,7 @@ export default class AccountViewView extends Vue {
         title: "Reload",
         text: "Now reload the app to get a new VAPID to use with this push server.",
       },
-      -1,
+      5000,
     );
   }
 
@@ -1650,7 +1758,7 @@ export default class AccountViewView extends Vue {
             title: "Error",
             text: "There was a problem deleting the image. Contact support if you want it removed from the servers.",
           },
-          -1,
+          5000,
         );
         // keep the imageUrl in localStorage so the user can try again if they want
       }
@@ -1682,10 +1790,179 @@ export default class AccountViewView extends Vue {
             title: "Error",
             text: "There was an error deleting the image.",
           },
-          5000,
+          3000,
         );
       }
     }
   }
+
+  onMapReady(map: L.Map) {
+    // doing this here instead of on the l-map element avoids a recentering after a drag then zoom at startup
+    const zoom = this.userProfileLatitude && this.userProfileLongitude ? 12 : 2;
+    map.setView([this.userProfileLatitude, this.userProfileLongitude], zoom);
+  }
+
+  showProfileInfo() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Public Profile Information",
+        text: "This data will be published for all to see, so be careful what your write. Your ID will only be shared with people who you allow to see your activity.",
+      },
+      7000,
+    );
+  }
+
+  async saveProfile() {
+    this.savingProfile = true;
+    try {
+      const headers = await getHeaders(this.activeDid);
+      const payload: UserProfile = {
+        description: this.userProfileDesc,
+      };
+      if (this.userProfileLatitude && this.userProfileLongitude) {
+        payload.locLat = this.userProfileLatitude;
+        payload.locLon = this.userProfileLongitude;
+      } else if (this.includeUserProfileLocation) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "toast",
+            title: "",
+            text: "No profile location is saved.",
+          },
+          3000,
+        );
+      }
+      const response = await this.axios.post(
+        this.apiServer + "/api/partner/userProfile",
+        payload,
+        { headers },
+      );
+      if (response.status === 201) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Profile Saved",
+            text: "Your profile has been updated successfully.",
+          },
+          3000,
+        );
+      } else {
+        // won't get here because axios throws an error on non-success
+        throw Error("Profile not saved");
+      }
+    } catch (error) {
+      logConsoleAndDb("Error saving profile: " + errorStringForLog(error));
+      const errorMessage: string =
+        error.response?.data?.error?.message ||
+        error.response?.data?.error ||
+        error.message ||
+        "There was an error saving your profile.";
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Saving Profile",
+          text: errorMessage,
+        },
+        3000,
+      );
+    } finally {
+      this.savingProfile = false;
+    }
+  }
+
+  toggleUserProfileLocation() {
+    this.includeUserProfileLocation = !this.includeUserProfileLocation;
+    if (!this.includeUserProfileLocation) {
+      this.userProfileLatitude = 0;
+      this.userProfileLongitude = 0;
+      this.zoom = 2;
+    }
+  }
+
+  confirmEraseLatLong() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Erase Marker",
+        text: "Are you sure you don't want to mark a location? This will erase the current location.",
+        onYes: async () => {
+          this.eraseLatLong();
+        },
+      },
+      -1,
+    );
+  }
+
+  eraseLatLong() {
+    this.userProfileLatitude = 0;
+    this.userProfileLongitude = 0;
+    this.zoom = 2;
+    this.includeUserProfileLocation = false;
+  }
+
+  async confirmDeleteProfile() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Delete Profile",
+        text: "Are you sure you want to delete your public profile? This will remove your description and location from the server, and it cannot be undone.",
+        onYes: this.deleteProfile,
+      },
+      -1,
+    );
+  }
+
+  async deleteProfile() {
+    this.savingProfile = true;
+    try {
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.delete(
+        this.apiServer + "/api/partner/userProfile",
+        { headers },
+      );
+      if (response.status === 204) {
+        this.userProfileDesc = "";
+        this.userProfileLatitude = 0;
+        this.userProfileLongitude = 0;
+        this.includeUserProfileLocation = false;
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Profile Deleted",
+            text: "Your profile has been deleted successfully.",
+          },
+          3000,
+        );
+      } else {
+        throw Error("Profile not deleted");
+      }
+    } catch (error) {
+      logConsoleAndDb("Error deleting profile: " + errorStringForLog(error));
+      const errorMessage: string =
+        error.response?.data?.error?.message ||
+        error.response?.data?.error ||
+        error.message ||
+        "There was an error deleting your profile.";
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Deleting Profile",
+          text: errorMessage,
+        },
+        3000,
+      );
+    } finally {
+      this.savingProfile = false;
+    }
+  }
 }
 </script>

src/views/ClaimAddRawView.vue

@@ -32,10 +32,12 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { NotificationIface } from "@/constants/app";
-import { retrieveSettingsForActiveAccount } from "@/db/index";
-import * as serverUtil from "@/libs/endorserServer";
 import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import * as serverUtil from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
+import { errorStringForLog } from "@/libs/endorserServer";
 
 @Component({
   components: { QuickNav },
@@ -54,11 +56,55 @@ export default class ClaimAddRawView extends Vue {
     this.apiServer = settings.apiServer || "";
 
     this.claimStr = (this.$route as Router).query["claim"];
+    if (this.claimStr) {
       try {
-      this.veriClaim = JSON.parse(this.claimStr);
-      this.claimStr = JSON.stringify(this.veriClaim, null, 2);
+        const veriClaim = JSON.parse(this.claimStr);
+        this.claimStr = JSON.stringify(veriClaim, null, 2);
       } catch (e) {
-      // ignore a parse
+        // ignore a parse error
+      }
+    } else {
+      // there may be no link that uses this, meaning you'd have to enter it in a browser
+      const claimJwtId = (this.$route as Router).query["claimJwtId"];
+      if (claimJwtId) {
+        const urlPath = libsUtil.isGlobalUri(claimJwtId)
+          ? "/api/claim/byHandle/"
+          : "/api/claim/";
+        const url = this.apiServer + urlPath + encodeURIComponent(claimJwtId);
+        const headers = await serverUtil.getHeaders(this.activeDid);
+
+        try {
+          const response = await this.axios.get(url, { headers });
+          if (response.status === 200) {
+            const claim = response.data?.claim;
+            claim.lastClaimId = serverUtil.stripEndorserPrefix(claimJwtId);
+            this.claimStr = JSON.stringify(claim, null, 2);
+          } else {
+            throw {
+              message: "Got an error loading that claim.",
+              response: {
+                status: response.status,
+                statusText: response.statusText,
+                // url is in "fetch" response but not in AxiosResponse
+              },
+            };
+          }
+        } catch (error: unknown) {
+          logConsoleAndDb(
+            "Error retrieving claim: " + errorStringForLog(error),
+            true,
+          );
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Error",
+              text: "Got an error retrieving claim data.",
+            },
+            3000,
+          );
+        }
+      }
     }
   }
 
@@ -89,7 +135,7 @@ export default class ClaimAddRawView extends Vue {
           title: "Error",
           text: "There was a problem submitting the claim.",
         },
-        -1,
+        5000,
       );
     }
   }

src/views/ClaimCertificateView.vue

@@ -0,0 +1,270 @@
+<template>
+  <section id="Content">
+    <div class="flex items-center justify-center h-screen">
+      <div v-if="claimData">
+        <router-link :to="'/claim/' + this.claimId">
+          <canvas class="w-full block mx-auto" ref="claimCanvas"></canvas>
+        </router-link>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { nextTick } from "vue";
+import QRCode from "qrcode";
+
+import { APP_SERVER, NotificationIface } from "@/constants/app";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import * as serverUtil from "@/libs/endorserServer";
+
+@Component
+export default class ClaimCertificateView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  allMyDids: Array<string> = [];
+  apiServer = "";
+  claimId = "";
+  claimData = null;
+
+  serverUtil = serverUtil;
+
+  async created() {
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    const pathParams = window.location.pathname.substring(
+      "/claim-cert/".length,
+    );
+    this.claimId = pathParams;
+    await this.fetchClaim();
+  }
+
+  async fetchClaim() {
+    try {
+      const headers = await serverUtil.getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        `${this.apiServer}/api/claim/${this.claimId}`,
+        { headers },
+      );
+      if (response.status === 200) {
+        this.claimData = await response.data;
+        const claimEntryIds = [this.claimId];
+        const headers = await serverUtil.getHeaders(this.activeDid);
+        const confirmerResponse = await this.axios.post(
+          `${this.apiServer}/api/v2/report/confirmers/?claimEntryIds=${this.claimId}`,
+          { claimEntryIds },
+          { headers },
+        );
+        let confirmerIds: Array<string> = [];
+        if (confirmerResponse.status === 200) {
+          confirmerIds = await confirmerResponse.data.data;
+        }
+        await nextTick(); // Wait for the DOM to update
+        if (this.claimData) {
+          this.drawCanvas(this.claimData, confirmerIds);
+        }
+      } else {
+        throw new Error(`Error fetching claim: ${response.statusText}`);
+      }
+    } catch (error) {
+      console.error("Failed to load claim:", error);
+      this.$notify({
+        group: "alert",
+        type: "danger",
+        title: "Error",
+        text: "There was a problem loading the claim.",
+      });
+    }
+  }
+
+  async drawCanvas(
+    claimData: serverUtil.GenericCredWrapper<serverUtil.GenericVerifiableCredential>,
+    confirmerIds: Array<string>,
+  ) {
+    await db.open();
+    const allContacts = await db.contacts.toArray();
+
+    const canvas = this.$refs.claimCanvas as HTMLCanvasElement;
+    if (canvas) {
+      const CANVAS_WIDTH = 1100;
+      const CANVAS_HEIGHT = 850;
+
+      // size to approximate portrait of 8.5"x11"
+      canvas.width = CANVAS_WIDTH;
+      canvas.height = CANVAS_HEIGHT;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        // Load the background image
+        const backgroundImage = new Image();
+        backgroundImage.src = "/img/background/cert-frame-2.jpg";
+        backgroundImage.onload = async () => {
+          // Draw the background image
+          ctx.drawImage(backgroundImage, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+          // Set font and styles
+          ctx.fillStyle = "black";
+
+          // Draw claim type
+          ctx.font = "bold 20px Arial";
+          const claimTypeText =
+            claimData.claimType === "GiveAction"
+              ? "Gift"
+              : claimData.claimType === "PlanAction"
+                ? "Project"
+                : this.serverUtil.capitalizeAndInsertSpacesBeforeCaps(
+                    claimData.claimType || "",
+                  );
+          const claimTypeWidth = ctx.measureText(claimTypeText).width;
+          ctx.fillText(
+            claimTypeText,
+            (CANVAS_WIDTH - claimTypeWidth) / 2, // Center horizontally
+            CANVAS_HEIGHT * 0.33,
+          );
+
+          if (claimData.claimType === "GiveAction" && claimData.claim.agent) {
+            const presentedText = "Thanks To";
+            ctx.font = "14px Arial";
+            const presentedWidth = ctx.measureText(presentedText).width;
+            ctx.fillText(
+              presentedText,
+              (CANVAS_WIDTH - presentedWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.37,
+            );
+            const agentDid =
+              claimData.claim.agent.identifier || claimData.claim.agent;
+            const agentText = serverUtil.didInfoForCertificate(
+              agentDid,
+              allContacts,
+            );
+            ctx.font = "bold 20px Arial";
+            const agentWidth = ctx.measureText(agentText).width;
+            ctx.fillText(
+              agentText,
+              (CANVAS_WIDTH - agentWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.41,
+            );
+          }
+
+          // alternatively, show some offer details
+          if (claimData.claimType === "Offer") {
+            const presentedText = "To";
+            ctx.font = "14px Arial";
+            const presentedWidth = ctx.measureText(presentedText).width;
+            ctx.fillText(
+              presentedText,
+              (CANVAS_WIDTH - presentedWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.37,
+            );
+            // fulfills
+            const agentDid =
+              claimData.claim.agent.identifier || claimData.claim.agent;
+            const agentText = serverUtil.didInfoForCertificate(
+              agentDid,
+              allContacts,
+            );
+            ctx.font = "bold 20px Arial";
+            const agentWidth = ctx.measureText(agentText).width;
+            ctx.fillText(
+              agentText,
+              (CANVAS_WIDTH - agentWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.41,
+            );
+          }
+
+          const descriptionText =
+            claimData.claim.name ||
+            claimData.claim.description ||
+            claimData.claim.itemOffered?.description; // for Offers
+          if (descriptionText) {
+            const descriptionLine =
+              descriptionText.length > 50
+                ? descriptionText.substring(0, 75) + "..."
+                : descriptionText;
+            ctx.font = "14px Arial";
+            const descriptionWidth = ctx.measureText(descriptionLine).width;
+            ctx.fillText(
+              descriptionLine,
+              (CANVAS_WIDTH - descriptionWidth) / 2,
+              CANVAS_HEIGHT * 0.495,
+            );
+          }
+
+          const possibleObject =
+            claimData.claim.object || // for GiveActions
+            claimData.claim.includesObject; // for Offers
+          if (possibleObject?.amountOfThisGood && possibleObject?.unitCode) {
+            const amount = possibleObject.amountOfThisGood;
+            const unit = possibleObject.unitCode;
+            const amountText = serverUtil.displayAmount(unit, amount);
+            const amountWidth = ctx.measureText(amountText).width;
+            // if there was no description then put this in that spot, otherwise put it below the description
+            const yPos = descriptionText
+              ? CANVAS_HEIGHT * 0.525
+              : CANVAS_HEIGHT * 0.495;
+            ctx.font = "14px Arial";
+            ctx.fillText(amountText, (CANVAS_WIDTH - amountWidth) / 2, yPos);
+          }
+
+          // Draw claim issuer
+          if (
+            claimData.issuer == null ||
+            serverUtil.isHiddenDid(claimData.issuer) ||
+            // don't show if issuer claimed for themselves
+            // (The confirmations are the good stuff anyway, and self-issued certs shouldn't detract from that.)
+            claimData.issuer !== claimData.claim.agent?.identifier
+          ) {
+            ctx.font = "14px Arial";
+            let fullIssuer = serverUtil.didInfoForCertificate(
+              claimData.issuer,
+              allContacts,
+            );
+            if (fullIssuer.length > 30) {
+              fullIssuer = fullIssuer.substring(0, 30) + "...";
+            }
+            const issuerText = "Issued by " + fullIssuer;
+            ctx.fillText(issuerText, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.6);
+          }
+
+          // Draw number of claim confirmers
+          if (confirmerIds.length > 0) {
+            const confirmerText =
+              "Confirmed by " +
+              confirmerIds.length +
+              (confirmerIds.length === 1 ? " person" : " people");
+            ctx.font = "14px Arial";
+            ctx.fillText(
+              confirmerText,
+              CANVAS_WIDTH * 0.3,
+              CANVAS_HEIGHT * 0.63,
+            );
+          }
+
+          // Draw claim ID
+          ctx.font = "14px Arial";
+          ctx.fillText(this.claimId, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.7);
+          ctx.fillText(
+            "via EndorserSearch.com",
+            CANVAS_WIDTH * 0.3,
+            CANVAS_HEIGHT * 0.73,
+          );
+
+          // Generate and draw QR code
+          const qrCodeCanvas = document.createElement("canvas");
+          await QRCode.toCanvas(
+            qrCodeCanvas,
+            APP_SERVER + "/claim/" + this.claimId,
+            {
+              width: 150,
+              color: { light: "#0000" /* Transparent background */ },
+            },
+          );
+          ctx.drawImage(qrCodeCanvas, CANVAS_WIDTH * 0.6, CANVAS_HEIGHT * 0.55);
+        };
+      }
+    }
+  }
+}
+</script>

src/views/ClaimReportCertificateView.vue

@@ -0,0 +1,190 @@
+<template>
+  <section id="Content">
+    <div v-if="claimData">
+      <canvas ref="claimCanvas"></canvas>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { nextTick } from "vue";
+import QRCode from "qrcode";
+
+import { APP_SERVER, NotificationIface } from "@/constants/app";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import * as endorserServer from "@/libs/endorserServer";
+
+@Component
+export default class ClaimReportCertificateView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid = "";
+  allMyDids: Array<string> = [];
+  apiServer = "";
+  claimId = "";
+  claimData = null;
+
+  endorserServer = endorserServer;
+
+  async created() {
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    const pathParams = window.location.pathname.substring(
+      "/claim-cert/".length,
+    );
+    this.claimId = pathParams;
+    await this.fetchClaim();
+  }
+
+  async fetchClaim() {
+    try {
+      const response = await fetch(
+        `${this.apiServer}/api/claim/${this.claimId}`,
+      );
+      if (response.ok) {
+        this.claimData = await response.json();
+        await nextTick(); // Wait for the DOM to update
+        if (this.claimData) {
+          this.drawCanvas(this.claimData);
+        }
+      } else {
+        throw new Error(`Error fetching claim: ${response.statusText}`);
+      }
+    } catch (error) {
+      console.error("Failed to load claim:", error);
+      this.$notify({
+        group: "alert",
+        type: "danger",
+        title: "Error",
+        text: "There was a problem loading the claim.",
+      });
+    }
+  }
+
+  async drawCanvas(
+    claimData: endorserServer.GenericCredWrapper<endorserServer.GenericVerifiableCredential>,
+  ) {
+    await db.open();
+    const allContacts = await db.contacts.toArray();
+
+    const canvas = this.$refs.claimCanvas as HTMLCanvasElement;
+    if (canvas) {
+      const CANVAS_WIDTH = 1100;
+      const CANVAS_HEIGHT = 850;
+
+      // size to approximate portrait of 8.5"x11"
+      canvas.width = CANVAS_WIDTH;
+      canvas.height = CANVAS_HEIGHT;
+      const ctx = canvas.getContext("2d");
+      if (ctx) {
+        // Load the background image
+        const backgroundImage = new Image();
+        backgroundImage.src = "/img/background/cert-frame-2.jpg";
+        backgroundImage.onload = async () => {
+          // Draw the background image
+          ctx.drawImage(backgroundImage, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
+
+          // Set font and styles
+          ctx.fillStyle = "black";
+
+          // Draw claim type
+          ctx.font = "bold 20px Arial";
+          const claimTypeText =
+            this.endorserServer.capitalizeAndInsertSpacesBeforeCaps(
+              claimData.claimType || "",
+            );
+          const claimTypeWidth = ctx.measureText(claimTypeText).width;
+          ctx.fillText(
+            claimTypeText,
+            (CANVAS_WIDTH - claimTypeWidth) / 2, // Center horizontally
+            CANVAS_HEIGHT * 0.33,
+          );
+
+          if (claimData.claim.agent) {
+            const presentedText = "Presented to ";
+            ctx.font = "14px Arial";
+            const presentedWidth = ctx.measureText(presentedText).width;
+            ctx.fillText(
+              presentedText,
+              (CANVAS_WIDTH - presentedWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.37,
+            );
+            const agentText = endorserServer.didInfoForCertificate(
+              claimData.claim.agent,
+              allContacts,
+            );
+            ctx.font = "bold 20px Arial";
+            const agentWidth = ctx.measureText(agentText).width;
+            ctx.fillText(
+              agentText,
+              (CANVAS_WIDTH - agentWidth) / 2, // Center horizontally
+              CANVAS_HEIGHT * 0.4,
+            );
+          }
+
+          const descriptionText =
+            claimData.claim.name || claimData.claim.description;
+          if (descriptionText) {
+            const descriptionLine =
+              descriptionText.length > 50
+                ? descriptionText.substring(0, 75) + "..."
+                : descriptionText;
+            ctx.font = "14px Arial";
+            const descriptionWidth = ctx.measureText(descriptionLine).width;
+            ctx.fillText(
+              descriptionLine,
+              (CANVAS_WIDTH - descriptionWidth) / 2,
+              CANVAS_HEIGHT * 0.45,
+            );
+          }
+
+          // Draw claim issuer & recipient
+          if (claimData.issuer) {
+            ctx.font = "14px Arial";
+            const issuerText =
+              "Issued by " +
+              endorserServer.didInfoForCertificate(
+                claimData.issuer,
+                allContacts,
+              );
+            ctx.fillText(issuerText, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.6);
+          }
+
+          // Draw claim ID
+          ctx.font = "14px Arial";
+          ctx.fillText(this.claimId, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.7);
+          ctx.fillText(
+            "via EndorserSearch.com",
+            CANVAS_WIDTH * 0.3,
+            CANVAS_HEIGHT * 0.73,
+          );
+
+          // Generate and draw QR code
+          const qrCodeCanvas = document.createElement("canvas");
+          await QRCode.toCanvas(
+            qrCodeCanvas,
+            APP_SERVER + "/claim/" + this.claimId,
+            {
+              width: 150,
+              color: { light: "#0000" /* Transparent background */ },
+            },
+          );
+          ctx.drawImage(qrCodeCanvas, CANVAS_WIDTH * 0.6, CANVAS_HEIGHT * 0.55);
+        };
+      }
+    }
+  }
+}
+</script>

src/views/ClaimView.vue

@@ -17,16 +17,20 @@
     </div>
 
     <!-- Details -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <div class="block flex gap-4 overflow-hidden">
-        <div class="overflow-hidden">
-          <h2 class="text-md font-bold">
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4 w-full">
+      <div class="block flex gap-4 overflow-hidden w-full">
+        <div class="w-full">
+          <div class="flex columns-3">
+            <h2 class="text-md font-bold w-full">
               {{ capitalizeAndInsertSpacesBeforeCaps(veriClaim.claimType) }}
               <button
                 v-if="
-                ['GiveAction', 'Offer'].includes(
+                  ['GiveAction', 'Offer', 'PlanAction'].includes(
                     veriClaim.claimType as string,
                   ) && veriClaim.issuer === activeDid
+                  // a PlanAction agent also could edit one of those,
+                  // but rather than add more Plan-specific logic to detect the agent
+                  // we'll let them click the Project link and edit from there
                 "
                 @click="onClickEditClaim"
                 title="Edit"
@@ -35,6 +39,27 @@
                 <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
               </button>
             </h2>
+            <div class="flex justify-center w-full">
+              <router-link
+                :to="'/claim-cert/' + encodeURIComponent(veriClaim.id)"
+                class="text-blue-500 mt-2"
+                title="Printable Certificate"
+              >
+                <fa icon="square" class="text-white bg-yellow-500 p-1" />
+              </router-link>
+            </div>
+            <!-- show link icon to copy this URL to the clipboard -->
+            <div class="flex justify-end w-full">
+              <button
+                title="Copy Link"
+                @click="
+                  copyToClipboard('A link to this page', window.location.href)
+                "
+              >
+                <fa icon="link" class="text-slate-500" />
+              </button>
+            </div>
+          </div>
           <div class="text-sm">
             <div data-testId="description">
               <fa icon="message" class="fa-fw text-slate-400" />
@@ -49,6 +74,7 @@
             </div>
             <div>
               <fa icon="calendar" class="fa-fw text-slate-400" />
+              Recorded
               {{ veriClaim.issuedAt?.replace(/T/, " ").replace(/Z/, " UTC") }}
             </div>
             <div v-if="veriClaim.claim.image" class="flex justify-center">
@@ -150,6 +176,18 @@
         </div>
       </div>
     </div>
+    <div class="mt-2">
+      <fa icon="comment" class="text-slate-400" />
+      {{ issuerName }} posted that.
+    </div>
+    <!--
+    <div>
+      <router-link :to="'/claim-cert/' + encodeURIComponent(veriClaim.id)">
+        <fa icon="file-contract" class="text-slate-400" />
+        <span class="ml-2 text-blue-500">Printable Certificate</span>
+      </router-link>
+    </div>
+    -->
 
     <div class="mt-8">
       <button
@@ -194,11 +232,15 @@
         </span>
       </div>
 
+      <div class="mt-2">
         <span v-if="totalConfirmers() === 0">Nobody has confirmed this.</span>
         <span v-else-if="totalConfirmers() === 1">
           One person has confirmed this.
         </span>
-      <span v-else> {{ totalConfirmers() }} people have confirmed this. </span>
+        <span v-else>
+          {{ totalConfirmers() }} people have confirmed this.
+        </span>
+      </div>
 
       <div v-if="totalConfirmers() > 0">
         <div
@@ -217,7 +259,7 @@
           Nobody that you know has issued or confirmed this claim.
         </div>
         <div v-if="confirmerIdList.length > 0">
-          The following people have issued or confirmed this claim.
+          The following people have confirmed this claim.
           <ul class="ml-4">
             <li
               v-for="confirmerId in confirmerIdList"
@@ -229,16 +271,13 @@
                   <div class="text-sm">
                     {{ didInfo(confirmerId) }}
                     <span v-if="!serverUtil.isEmptyOrHiddenDid(confirmerId)">
-                      <button
-                        @click="
-                          copyToClipboard(
-                            'The DID of ' + confirmerId,
-                            confirmerId,
-                          )
-                        "
+                      <a
+                        :href="`/did/${confirmerId}`"
+                        target="_blank"
+                        class="text-blue-500"
                       >
-                        <fa icon="copy" class="text-slate-400 fa-fw" />
-                      </button>
+                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                      </a>
                     </span>
                   </div>
                 </div>
@@ -270,16 +309,13 @@
                   <div class="text-sm">
                     {{ didInfo(confsVisibleTo) }}
                     <span v-if="!serverUtil.isEmptyOrHiddenDid(confsVisibleTo)">
-                      <button
-                        @click="
-                          copyToClipboard(
-                            'The DID of ' + confsVisibleTo,
-                            confsVisibleTo,
-                          )
-                        "
+                      <a
+                        :href="`/did/${confsVisibleTo}`"
+                        target="_blank"
+                        class="text-blue-500"
                       >
-                        <fa icon="copy" class="text-slate-400 fa-fw" />
-                      </button>
+                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                      </a>
                     </span>
                   </div>
                 </div>
@@ -303,11 +339,16 @@
       </div>
     </div>
 
-    <!-- Note that a similar section is found in ConfirmGiftView.vue -->
-    <div>
-      <h2 class="font-bold uppercase text-xl mt-8 mb-2">
-        {{ serverUtil.containsHiddenDid(veriClaim) ? "Visible " : "" }}Details
+    <!-- Note that a similar section is found in ConfirmGiftView.vue, and kinda in HiddenDidDialog.vue -->
+    <h2
+      class="font-bold uppercase text-xl text-blue-500 mt-8 cursor-pointer"
+      @click="showVeriClaimDump = !showVeriClaimDump"
+    >
+      Details
+      <fa v-if="showVeriClaimDump" icon="chevron-up" />
+      <fa v-else icon="chevron-right" />
     </h2>
+    <div v-if="showVeriClaimDump">
       <div
         v-if="
           serverUtil.containsHiddenDid(veriClaim) &&
@@ -318,24 +359,26 @@
         Some of the details are not visible to you; they show as "HIDDEN". They
         are not visible to any of your direct contacts, either.
         <span v-if="canShare">
-          If you'd like to ask any of your contacts to take a look and see if
-          their contacts can see more details,
+          You can ask one of your contacts to take a look and see if their
+          contacts can see more details:
           <a @click="onClickShareClaim()" class="text-blue-500"
-            >click to send them this info</a
+            >click to send them this page info</a
           >
-          and see if they are willing to make an introduction. They are surely
-          connected to someone; if you don't know who to ask, you might try the
-          person who registered you.
+          and see if they can make an introduction. Someone is connected to
+          people closer to them; if you don't know who to ask, try the person
+          who registered you.
         </span>
         <span v-else>
-          If you'd like to ask any of your contacts to take a look and see if
-          their contacts can see more details,
+          You can ask one of your contacts to take a look and see if their
+          contacts can see more details:
           <a
             @click="copyToClipboard('A link to this page', windowLocation)"
             class="text-blue-500"
-            >share this page with them</a
+            >click to copy this page info</a
           >
-          and see if they are willing to make an introduction.
+          and see if they can make an introduction. Someone is connected to
+          people closer to them; if you don't know who to ask, try the person
+          who registered you.
         </span>
       </div>
 
@@ -379,18 +422,22 @@
                   <span>
                     {{ didInfo(visDid) }}
                     <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
-                      <button
-                        @click="copyToClipboard('The DID of ' + visDid, visDid)"
+                      <a
+                        :href="`/did/${visDid}`"
+                        target="_blank"
+                        class="text-blue-500"
                       >
-                        <fa icon="copy" class="text-slate-400 fa-fw" />
-                      </button>
+                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                      </a>
                     </span>
                     <span v-if="veriClaim.publicUrls?.[visDid]"
-                      >, found at
-                      <fa icon="globe" class="fa-fw text-slate-400" />&nbsp;<a
+                      >, found at&nbsp;<a
                         :href="veriClaim.publicUrls?.[visDid]"
+                        target="_blank"
                         class="text-blue-500"
-                        >{{
+                      >
+                        <fa icon="globe" class="fa-fw" />
+                        {{
                           veriClaim.publicUrls[visDid].substring(
                             veriClaim.publicUrls[visDid].indexOf("//") + 2,
                           )
@@ -405,23 +452,17 @@
         </div>
       </div>
       <span v-if="isEditedGlobalId" class="mt-2">
-        This record is an edited version. The latest version is here.
+        This record is an edited version. The latest version is shown.
       </span>
       <br />
-      <button @click="showVeriClaimDump = !showVeriClaimDump" class="ml-2">
-        Details
-        <fa v-if="showVeriClaimDump" icon="chevron-up" class="text-blue-400" />
-        <fa v-else icon="chevron-down" class="text-blue-400" />
-      </button>
       <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
       <pre
         v-if="showVeriClaimDump"
         class="text-sm overflow-x-scroll bg-slate-100 px-4 py-3 rounded-md"
         >{{ veriClaimDump }}</pre
       >
-    </div>
 
-    <h2 class="font-bold uppercase text-xl mt-8 mb-2">Full Claim</h2>
+      <h2 class="text-xl mt-8 mb-2">Full Claim</h2>
       <p class="mb-4">
         The full claim includes the claim as it was originally issued, including
         the signature (ie. the proof of issuance by that person).
@@ -432,9 +473,10 @@
         </p>
         <button
           v-else
-        class="block w-full text-center text-md 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-1.5 py-2 rounded-md mb-2"
+          class="text-blue-500 cursor-pointer"
           @click="showFullClaim(veriClaim.id as string)"
         >
+          <fa icon="file-lines" class="fa-fw" />
           Load Full Claim Details
         </button>
       </div>
@@ -448,10 +490,13 @@
       <a
         :href="apiServer + '/api/claim/' + veriClaim.id"
         target="_blank"
-      class="block w-full text-center text-md 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-1.5 py-2 rounded-md mb-2"
+        class="text-blue-500 cursor-pointer"
       >
+        <fa icon="file-lines" class="fa-fw" />
+        <fa icon="arrow-up-right-from-square" class="ml-1 fa-fw" />
         View on the Public Server
       </a>
+    </div>
   </section>
 </template>
 
@@ -464,17 +509,20 @@ import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
+import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import {
+  db,
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import * as serverUtil from "@/libs/endorserServer";
-import * as libsUtil from "@/libs/util";
-import QuickNav from "@/components/QuickNav.vue";
-import { Account } from "@/db/tables/accounts";
 import {
   GenericCredWrapper,
   OfferVerifiableCredential,
 } from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
 
 interface ProviderInfo {
   identifier: string; // could be a DID or a handleId
@@ -503,6 +551,7 @@ export default class ClaimView extends Vue {
   fullClaimMessage = "";
   isEditedGlobalId = false;
   isRegistered = false;
+  issuerName = "";
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
   providersForGive: ProviderInfo[] = [];
   showIdCopy = false;
@@ -516,6 +565,7 @@ export default class ClaimView extends Vue {
   yaml = yaml;
   libsUtil = libsUtil;
   serverUtil = serverUtil;
+  window = window;
 
   resetThisValues() {
     this.confirmerIdList = [];
@@ -541,10 +591,24 @@ export default class ClaimView extends Vue {
     this.allContacts = await db.contacts.toArray();
     this.isRegistered = settings.isRegistered || false;
 
-    await accountsDB.open();
-    const accounts = accountsDB.accounts;
-    const accountsArr: Array<Account> = await accounts?.toArray();
-    this.allMyDids = accountsArr.map((acc) => acc.did);
+    try {
+      this.allMyDids = await libsUtil.retrieveAccountDids();
+    } catch (error) {
+      // continue because we want to see claims, even anonymously
+      logConsoleAndDb(
+        "Error retrieving all account DIDs on home page:" + error,
+        true,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Loading Profile",
+          text: "See the Help page for problems with your personal data.",
+        },
+        5000,
+      );
+    }
 
     const pathParam = window.location.pathname.substring("/claim/".length);
     let claimId;
@@ -559,7 +623,7 @@ export default class ClaimView extends Vue {
           title: "Error",
           text: "No claim ID was provided.",
         },
-        -1,
+        5000,
       );
     }
 
@@ -605,6 +669,7 @@ export default class ClaimView extends Vue {
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200) {
         this.veriClaim = resp.data;
+        this.issuerName = this.didInfo(this.veriClaim.issuer);
         this.veriClaimDump = yaml.dump(this.veriClaim);
         this.veriClaimDidsVisible = libsUtil.findAllVisibleToDids(
           this.veriClaim,
@@ -620,7 +685,7 @@ export default class ClaimView extends Vue {
             title: "Error",
             text: "There was a problem retrieving that claim.",
           },
-          -1,
+          5000,
         );
         return;
       }
@@ -667,7 +732,7 @@ export default class ClaimView extends Vue {
               title: "Error",
               text: "Got error retrieving linked provider data.",
             },
-            -1,
+            5000,
           );
         }
       } else if (this.veriClaim.claimType === "Offer") {
@@ -690,38 +755,22 @@ export default class ClaimView extends Vue {
               title: "Error",
               text: "Got error retrieving linked offer data.",
             },
-            -1,
+            5000,
           );
         }
       }
 
       // retrieve the list of confirmers
-      const confirmUrl =
-        this.apiServer +
-        "/api/report/issuersWhoClaimedOrConfirmed?claimId=" +
-        encodeURIComponent(serverUtil.stripEndorserPrefix(claimId));
-      const confirmHeaders = await serverUtil.getHeaders(userDid);
-      const response = await this.axios.get(confirmUrl, {
-        headers: confirmHeaders,
-      });
-      if (response.status === 200) {
-        const resultList1 = response.data.result || [];
-        //const publicUrls = resultList.publicUrls || [];
-        delete resultList1.publicUrls;
-        const resultList2 = R.reject(serverUtil.isHiddenDid, resultList1);
-        const resultList3 = R.reject(
-          (did: string) => did === this.veriClaim.issuer,
-          resultList2,
+      const confirmerInfo = await libsUtil.retrieveConfirmerIdList(
+        this.apiServer,
+        claimId,
+        this.veriClaim.issuer,
+        userDid,
       );
-        this.confirmerIdList = resultList3;
-        this.numConfsNotVisible = resultList1.length - resultList2.length;
-        if (resultList3.length === resultList2.length) {
-          // the issuer was not in the "visible" list so they must be hidden
-          // so subtract them from the non-visible confirmers count
-          this.numConfsNotVisible = this.numConfsNotVisible - 1;
-        }
-        this.confsVisibleToIdList =
-          response.data.result.resultVisibleToDids || [];
+      if (confirmerInfo) {
+        this.confirmerIdList = confirmerInfo.confirmerIdList;
+        this.confsVisibleToIdList = confirmerInfo.confsVisibleToIdList;
+        this.numConfsNotVisible = confirmerInfo.numConfsNotVisible;
       } else {
         this.confsVisibleErrorMessage =
           "Had problems retrieving confirmations.";
@@ -736,7 +785,7 @@ export default class ClaimView extends Vue {
           title: "Error",
           text: "Something went wrong retrieving claim data.",
         },
-        -1,
+        3000,
       );
     }
   }
@@ -761,20 +810,42 @@ export default class ClaimView extends Vue {
             title: "Error",
             text: "There was a problem getting that claim.",
           },
-          -1,
+          5000,
         );
       }
     } catch (error: unknown) {
       console.error("Error retrieving full claim:", error);
       const serverError = error as AxiosError;
       if (serverError.response?.status === 403) {
+        let issuerPhrase = "";
+        const issuerContact = serverUtil.contactForDid(
+          this.veriClaim.issuer,
+          this.allContacts,
+        );
+        if (issuerContact?.name) {
+          issuerPhrase +=
+            "Ask " +
+            issuerContact.name +
+            " to show you the full claim details.";
+        }
+        if (
+          this.confirmerIdList.length > 0 ||
+          this.confsVisibleToIdList.length > 0
+        ) {
+          if (issuerContact?.name) {
+            issuerPhrase +=
+              "You could also ask someone in the Confirmations section to make an introduction.";
+          } else {
+            issuerPhrase +=
+              "Ask someone in the Confirmations section to make an introduction.";
+          }
+        }
         this.fullClaimMessage =
           "You are not authorized to view the full contents of this claim." +
-          " To see all the details, ask the issuer to allow you to see their claims." +
-          " If you cannot see the issuer's DID, ask someone in the Confirmations section above." +
-          " If there are no connections, you will have to ask people in your" +
-          " network for their help, some other way; send them to this page and" +
-          " see if they can make a connection for you.";
+          issuerPhrase +
+          " You might ask someone in your network -- like the person who registered you --" +
+          " if they can find out more and make an introduction: " +
+          " send them this page and see if they can make a connection for you.";
       } else {
         this.$notify(
           {
@@ -783,7 +854,7 @@ export default class ClaimView extends Vue {
             title: "Error",
             text: "Something went wrong retrieving that claim.",
           },
-          -1,
+          5000,
         );
       }
     }
@@ -846,7 +917,7 @@ export default class ClaimView extends Vue {
           title: "Error",
           text: "There was a problem submitting the confirmation.",
         },
-        -1,
+        5000,
       );
     }
   }
@@ -867,7 +938,6 @@ export default class ClaimView extends Vue {
         this.veriClaim as GenericCredWrapper<OfferVerifiableCredential>,
       ),
     };
-    console.log("giver & dialog", giver, this.$refs.customGiveDialog);
     (this.$refs.customGiveDialog as GiftedDialog).open(
       giver,
       undefined,
@@ -893,9 +963,10 @@ export default class ClaimView extends Vue {
   }
 
   onClickShareClaim() {
+    this.copyToClipboard("A link to this page", this.windowLocation);
     window.navigator.share({
       title: "Help Connect Me",
-      text: "I'm trying to find the full details of this claim. Can you help me?",
+      text: "I'm trying to find the people who recorded this. Can you help me?",
       url: this.windowLocation,
     });
   }
@@ -921,6 +992,12 @@ export default class ClaimView extends Vue {
         },
       };
       (this.$router as Router).push(route);
+    } else if (this.veriClaim.claimType === "PlanAction") {
+      const route = {
+        name: "new-edit-project",
+        query: { projectId: this.veriClaim.handleId },
+      };
+      (this.$router as Router).push(route);
     } else {
       console.error(
         "Unrecognized claim type for edit:",
@@ -939,3 +1016,37 @@ export default class ClaimView extends Vue {
   }
 }
 </script>
+<style>
+/*
+  Tooltip, generated on "title" attributes on "fa" icons
+  Kudos to https://www.w3schools.com/css/css_tooltip.asp
+*/
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 200px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  position: absolute;
+  z-index: 1;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+.tooltip:hover .tooltiptext-left {
+  visibility: visible;
+}
+</style>

src/views/ConfirmGiftView.vue

@@ -54,13 +54,6 @@
           Confirm
           <fa icon="circle-check" class="ml-2 text-white cursor-pointer" />
         </button>
-        <a
-          v-if="isRegistered"
-          class="col-span-1 bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-2 px-4 py-2 rounded-md"
-          :href="urlForNewGive"
-        >
-          Record a Similar One
-        </a>
       </div>
 
       <!-- Details -->
@@ -172,7 +165,7 @@
             Nobody that you know issued or confirmed this claim.
           </div>
           <div v-if="confirmerIdList.length > 0">
-            The following people issued or confirmed this claim.
+            The following people confirmed this claim.
             <ul class="ml-4">
               <li
                 v-for="confirmerId in confirmerIdList"
@@ -261,16 +254,16 @@
         </div>
       </div>
 
-      <!-- Note that a similar section is found in ClaimView.vue -->
+      <!-- Note that a similar section is found in ClaimView.vue, and kinda in HiddenDidDialog.vue -->
       <h2
-        class="font-bold uppercase text-xl text-blue-500 mt-8 mb-2 cursor-pointer"
-        @click="showDetails = !showDetails"
+        class="font-bold uppercase text-xl text-blue-500 mt-8 cursor-pointer"
+        @click="showVeriClaimDump = !showVeriClaimDump"
       >
-        {{ serverUtil.containsHiddenDid(veriClaim) ? "Visible " : "" }}Details
-        <span v-if="!showDetails"><fa icon="chevron-down" /></span>
-        <span v-else><fa icon="chevron-up" /></span>
+        Details
+        <fa v-if="showVeriClaimDump" icon="chevron-up" />
+        <fa v-else icon="chevron-right" />
       </h2>
-      <div v-if="showDetails">
+      <div v-if="showVeriClaimDump">
         <div
           v-if="
             serverUtil.containsHiddenDid(veriClaim) &&
@@ -281,22 +274,26 @@
           Some of the details are not visible to you; they show as "HIDDEN".
           They are not visible to any of your direct contacts, either.
           <span v-if="canShare">
-            If you'd like to ask any of your contacts to take a look and see if
-            their contacts can see more details,
+            You can ask one of your contacts to take a look and see if their
+            contacts can see more details:
             <a @click="onClickShareClaim()" class="text-blue-500"
-              >click to send them this info</a
+              >click to send them this page info</a
             >
-            and see if they are willing to make an introduction.
+            and see if they can make an introduction. Someone is connected to
+            people closer to them; if you don't know who to ask, try the person
+            who registered you.
           </span>
           <span v-else>
-            If you'd like to ask any of your contacts to take a look and see if
-            their contacts can see more details,
+            You can ask one of your contacts to take a look and see if their
+            contacts can see more details:
             <a
-              @click="copyToClipboard('Location', windowLocation.href)"
+              @click="copyToClipboard('A link to this page', windowLocation)"
               class="text-blue-500"
-              >share this page with them</a
+              >click to copy this page info</a
             >
-            and see if they are willing to make an introduction.
+            and see if they can make an introduction. Someone is connected to
+            people closer to them; if you don't know who to ask, try the person
+            who registered you.
           </span>
         </div>
 
@@ -313,7 +310,7 @@
           <span v-else>
             If you'd like an introduction,
             <a
-              @click="copyToClipboard('Location', windowLocation.href)"
+              @click="copyToClipboard('A link to this page', windowLocation)"
               class="text-blue-500"
               >share this page with them and ask if they'll tell you more about
               about the participants.</a
@@ -373,19 +370,28 @@
           class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
           >{{ veriClaimDump }}</pre
         >
-      </div>
-    </div>
-    <div v-else-if="!isLoading">This does not have details to confirm.</div>
-
-    <div class="mt-4" v-if="!isLoading">
+        <div class="mt-2 ml-2">
           <a
             @click="showClaimPage(veriClaim.id)"
             class="text-blue-500 cursor-pointer"
           >
-        <fa icon="file-lines" class="pl-2" />
-        All Generic Info
+            <fa icon="file-lines" />
+            See All Generic Info
           </a>
         </div>
+        <div class="mt-2 ml-2">
+          <a
+            v-if="isRegistered"
+            class="text-blue-500 cursor-pointer"
+            :href="urlForNewGive"
+          >
+            <fa icon="file-lines" />
+            Record a Give Similar to the Original
+          </a>
+        </div>
+      </div>
+    </div>
+    <div v-else-if="!isLoading">This does not have details to confirm.</div>
 
     <div
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
@@ -406,13 +412,12 @@ import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { Account } from "@/db/tables/accounts";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import * as serverUtil from "@/libs/endorserServer";
 import { displayAmount, GiveSummaryRecord } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { isGiveAction } from "@/libs/util";
+import { isGiveAction, retrieveAccountDids } from "@/libs/util";
 import TopMessage from "@/components/TopMessage.vue";
 
 @Component({
@@ -438,12 +443,12 @@ export default class ClaimView extends Vue {
   isRegistered = false;
   numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
   recipientName = "";
-  showDetails = false;
+  showVeriClaimDump = false;
   urlForNewGive = "";
   veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
   veriClaimDump = "";
   veriClaimDidsVisible = {};
-  windowLocation = window.location;
+  windowLocation = window.location.href;
 
   R = R;
   yaml = yaml;
@@ -470,10 +475,7 @@ export default class ClaimView extends Vue {
     this.allContacts = await db.contacts.toArray();
     this.isRegistered = settings.isRegistered || false;
 
-    await accountsDB.open();
-    const accounts = accountsDB.accounts;
-    const accountsArr: Array<Account> = await accounts?.toArray();
-    this.allMyDids = accountsArr.map((acc) => acc.did);
+    this.allMyDids = await retrieveAccountDids();
 
     const pathParam = window.location.pathname.substring(
       "/confirm-gift/".length,
@@ -661,34 +663,16 @@ export default class ClaimView extends Vue {
       }
 
       // retrieve the list of confirmers
-      const confirmUrl =
-        this.apiServer +
-        "/api/report/issuersWhoClaimedOrConfirmed?claimId=" +
-        encodeURIComponent(serverUtil.stripEndorserPrefix(claimId));
-      const confirmHeaders = await serverUtil.getHeaders(userDid);
-      const response = await this.axios.get(confirmUrl, {
-        headers: confirmHeaders,
-      });
-      if (response.status === 200) {
-        const resultList1 = response.data.result || [];
-        //const publicUrls = resultList.publicUrls || [];
-        delete resultList1.publicUrls;
-        // remove any hidden DIDs
-        const resultList2 = R.reject(serverUtil.isHiddenDid, resultList1);
-        // remove confirmations by this user
-        const resultList3 = R.reject(
-          (did: string) => did === this.giveDetails?.issuerDid,
-          resultList2,
+      const confirmerInfo = await libsUtil.retrieveConfirmerIdList(
+        this.apiServer,
+        claimId,
+        this.veriClaim.issuer,
+        userDid,
       );
-        this.confirmerIdList = resultList3;
-        this.numConfsNotVisible = resultList1.length - resultList2.length;
-        if (resultList3.length === resultList2.length) {
-          // the issuer was not in the "visible" list so they must be hidden
-          // so subtract them from the non-visible confirmers count
-          this.numConfsNotVisible = this.numConfsNotVisible - 1;
-        }
-        this.confsVisibleToIdList =
-          response.data.result.resultVisibleToDids || [];
+      if (confirmerInfo) {
+        this.confirmerIdList = confirmerInfo.confirmerIdList;
+        this.confsVisibleToIdList = confirmerInfo.confsVisibleToIdList;
+        this.numConfsNotVisible = confirmerInfo.numConfsNotVisible;
       } else {
         this.confsVisibleErrorMessage =
           "Had problems retrieving confirmations.";
@@ -797,6 +781,17 @@ export default class ClaimView extends Vue {
   }
 
   notifyWhyCannotConfirm() {
+    libsUtil.notifyWhyCannotConfirm(
+      this.$notify,
+      this.isRegistered,
+      this.veriClaim.claimType,
+      this.giveDetails,
+      this.activeDid,
+      this.confirmerIdList,
+    );
+  }
+
+  notifyWhyCannotConfirmBak() {
     if (!this.isRegistered) {
       this.$notify(
         {
@@ -853,7 +848,7 @@ export default class ClaimView extends Vue {
           group: "alert",
           type: "info",
           title: "Cannot Confirm",
-          text: "You cannot confirm this claim.",
+          text: "You cannot confirm this claim. There are no other details, but we can help more if you contact us and send us screenshots.",
         },
         3000,
       );
@@ -861,10 +856,11 @@ export default class ClaimView extends Vue {
   }
 
   onClickShareClaim() {
+    this.copyToClipboard("A link to this page", this.windowLocation);
     window.navigator.share({
       title: "Help Connect Me",
       text: "I'm trying to find the full details of this claim. Can you help me?",
-      url: this.windowLocation.href,
+      url: this.windowLocation,
     });
   }
 }

src/views/ContactAmountsView.vue

@@ -112,7 +112,7 @@ import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
   AgreeVerifiableCredential,
@@ -123,6 +123,7 @@ import {
   GiveVerifiableCredential,
   SCHEMA_ORG_CONTEXT,
 } from "@/libs/endorserServer";
+import { retrieveAccountCount } from "@/libs/util";
 
 @Component({ components: { QuickNav } })
 export default class ContactAmountssView extends Vue {
@@ -137,8 +138,7 @@ export default class ContactAmountssView extends Vue {
   displayAmount = displayAmount;
 
   async beforeCreate() {
-    await accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
+    this.numAccounts = await retrieveAccountCount();
   }
 
   async created() {
@@ -165,7 +165,7 @@ export default class ContactAmountssView extends Vue {
             err.userMessage ||
             "There was an error retrieving your settings or contacts or gives.",
         },
-        -1,
+        5000,
       );
     }
   }
@@ -196,7 +196,7 @@ export default class ContactAmountssView extends Vue {
             title: "Error With Server",
             text: "Got an error retrieving your given time from the server.",
           },
-          -1,
+          5000,
         );
       }
 
@@ -223,7 +223,7 @@ export default class ContactAmountssView extends Vue {
             title: "Error With Server",
             text: "Got an error retrieving your given time from the server.",
           },
-          -1,
+          5000,
         );
       }
 
@@ -241,7 +241,7 @@ export default class ContactAmountssView extends Vue {
           title: "Error With Server",
           text: error as string,
         },
-        -1,
+        5000,
       );
     }
   }
@@ -297,7 +297,7 @@ export default class ContactAmountssView extends Vue {
           title: "Error With Server",
           text: userMessage,
         },
-        -1,
+        5000,
       );
     }
   }
@@ -310,7 +310,7 @@ export default class ContactAmountssView extends Vue {
         title: "Not Allowed",
         text: "Only the recipient can confirm final receipt.",
       },
-      -1,
+      5000,
     );
   }
 }

src/views/ContactEditView.vue

@@ -0,0 +1,238 @@
+<template>
+  <QuickNav selected="Contacts" />
+  <TopMessage />
+
+  <section id="ContactEdit" class="p-6 max-w-3xl mx-auto">
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-4xl text-center font-light relative px-7">
+        <!-- Back -->
+        <button
+          @click="$router.go(-1)"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        >
+          <fa icon="chevron-left" class="fa-fw" />
+        </button>
+        {{ contact.name || AppString.NO_CONTACT_NAME }}
+      </h1>
+    </div>
+
+    <!-- Contact Name -->
+    <div class="mt-4 flex" data-testId="contactName">
+      <label
+        for="contactName"
+        class="block text-sm font-medium text-gray-700 mt-2"
+      >
+        Name
+      </label>
+      <input
+        type="text"
+        class="block w-full ml-2 mt-1 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+        v-model="contactName"
+      />
+    </div>
+
+    <!-- Contact Notes -->
+    <div class="mt-4">
+      <label for="contactNotes" class="block text-sm font-medium text-gray-700">
+        Notes
+      </label>
+      <textarea
+        id="contactNotes"
+        rows="4"
+        class="block w-full mt-1 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+        v-model="contactNotes"
+      ></textarea>
+    </div>
+
+    <!-- Contact Methods -->
+    <div class="mt-4">
+      <h2 class="text-lg font-medium text-gray-700">Contact Methods</h2>
+      <div
+        v-for="(method, index) in contactMethods"
+        :key="index"
+        class="flex mt-2"
+      >
+        <input
+          type="text"
+          v-model="method.label"
+          class="block w-1/4 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+          placeholder="Label"
+        />
+        <input
+          type="text"
+          v-model="method.type"
+          class="block ml-2 w-1/4 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+          placeholder="Type"
+        />
+        <div class="relative">
+          <button
+            @click="toggleDropdown(index)"
+            class="px-2 py-1 bg-gray-200 rounded-md"
+          >
+            <fa icon="caret-down" class="fa-fw" />
+          </button>
+          <div
+            v-if="dropdownIndex === index"
+            class="absolute bg-white border border-gray-300 rounded-md mt-1"
+          >
+            <div
+              @click="setMethodType(index, 'CELL')"
+              class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+            >
+              CELL
+            </div>
+            <div
+              @click="setMethodType(index, 'EMAIL')"
+              class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+            >
+              EMAIL
+            </div>
+            <div
+              @click="setMethodType(index, 'WHATSAPP')"
+              class="px-4 py-2 hover:bg-gray-100 cursor-pointer"
+            >
+              WHATSAPP
+            </div>
+          </div>
+        </div>
+        <input
+          type="text"
+          v-model="method.value"
+          class="block ml-2 w-1/2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+          placeholder="Number, email, etc."
+        />
+        <button @click="removeContactMethod(index)" class="ml-2 text-red-500">
+          <fa icon="trash-can" class="fa-fw" />
+        </button>
+      </div>
+      <button @click="addContactMethod" class="mt-2">
+        <fa
+          icon="plus"
+          class="fa-fw px-2 py-2.5 bg-green-500 text-green-100 rounded-full"
+        />
+      </button>
+    </div>
+
+    <!-- Save Button -->
+    <div class="mt-8 flex justify-between">
+      <button
+        class="px-4 py-2 bg-blue-500 text-white rounded-md"
+        @click="saveEdit"
+      >
+        Save
+      </button>
+      <button
+        class="ml-4 px-4 py-2 bg-slate-500 text-white rounded-md"
+        @click="$router.go(-1)"
+      >
+        Cancel
+      </button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import * as R from "ramda";
+import { Component, Vue } from "vue-facing-decorator";
+import { RouteLocation, Router } from "vue-router";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import { AppString, NotificationIface } from "@/constants/app";
+import { db } from "@/db/index";
+import { Contact, ContactMethod } from "@/db/tables/contacts";
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class ContactEditView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  contact: Contact = {
+    did: "",
+    name: "",
+    notes: "",
+  };
+  contactName = "";
+  contactNotes = "";
+  contactMethods: Array<ContactMethod> = [];
+  dropdownIndex: number | null = null;
+
+  AppString = AppString;
+
+  async created() {
+    const contactDid = (this.$route as RouteLocation).params.did;
+    const contact = await db.contacts.get(contactDid || "");
+    if (contact) {
+      this.contact = contact;
+      this.contactName = contact.name || "";
+      this.contactNotes = contact.notes || "";
+      this.contactMethods = contact.contactMethods || [];
+    } else {
+      this.$notify({
+        group: "alert",
+        type: "danger",
+        title: "Contact Not Found",
+        text: "There is no contact with DID " + contactDid,
+      });
+      (this.$router as Router).push({ path: "/contacts" });
+      return;
+    }
+  }
+
+  addContactMethod() {
+    this.contactMethods.push({ label: "", type: "", value: "" });
+  }
+
+  removeContactMethod(index: number) {
+    this.contactMethods.splice(index, 1);
+  }
+
+  toggleDropdown(index: number) {
+    this.dropdownIndex = this.dropdownIndex === index ? null : index;
+  }
+
+  setMethodType(index: number, type: string) {
+    this.contactMethods[index].type = type;
+    this.dropdownIndex = null;
+  }
+
+  async saveEdit() {
+    // without this conversion, "Failed to execute 'put' on 'IDBObjectStore': [object Array] could not be cloned."
+    const contactMethodsObj = JSON.parse(JSON.stringify(this.contactMethods));
+    const contactMethods = contactMethodsObj.map((method: ContactMethod) =>
+      R.set(R.lensProp("type"), method.type.toUpperCase(), method),
+    );
+    if (!R.equals(contactMethodsObj, contactMethods)) {
+      this.contactMethods = contactMethods;
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Contact Methods Updated",
+          text: "Note that some methods have been updated, such as uppercasing 'email' to 'EMAIL'. Save again if the changes are acceptable.",
+        },
+        15000,
+      );
+      return;
+    }
+    await db.contacts.update(this.contact.did, {
+      name: this.contactName,
+      notes: this.contactNotes,
+      contactMethods: contactMethods,
+    });
+    this.$notify({
+      group: "alert",
+      type: "success",
+      title: "Contact Saved",
+      text: "The contact info has been updated successfully.",
+    });
+    (this.$router as Router).push({
+      path: "/did/" + encodeURIComponent(this.contact.did),
+    });
+  }
+}
+</script>

src/views/ContactGiftingView.vue

@@ -65,7 +65,7 @@
       </li>
     </ul>
 
-    <GiftedDialog ref="customDialog" :projectId="projectId" />
+    <GiftedDialog ref="customDialog" :toProjectId="projectId" />
   </section>
 </template>
 

src/views/ContactImportView.vue

@@ -16,10 +16,18 @@
       Contact Import
     </h1>
 
-    <span class="flex justify-center">
+    <div v-if="checkingImports" class="text-center">
+      <fa icon="spinner" class="animate-spin" />
+    </div>
+    <div v-else>
+      <span
+        v-if="contactsImporting.length > sameCount"
+        class="flex justify-center"
+      >
         <input type="checkbox" v-model="makeVisible" class="mr-2" />
         Make my activity visible to these contacts.
       </span>
+
       <div v-if="sameCount > 0">
         <span v-if="sameCount == 1"
           >One contact is the same as an existing contact</span
@@ -30,7 +38,10 @@
       </div>
 
       <!-- Results List -->
-    <ul v-if="contactsImporting.length > 0" class="border-t border-slate-300">
+      <ul
+        v-if="contactsImporting.length > sameCount"
+        class="border-t border-slate-300"
+      >
         <li v-for="(contact, index) in contactsImporting" :key="contact.did">
           <div
             v-if="
@@ -54,16 +65,20 @@
             <div v-if="contactDifferences[contact.did]">
               <div>
                 <div class="grid grid-cols-3 gap-2">
-                <div class="font-bold">Field</div>
+                  <div></div>
                   <div class="font-bold">Old Value</div>
                   <div class="font-bold">New Value</div>
                 </div>
                 <div
-                v-for="(value, contactField) in contactDifferences[contact.did]"
+                  v-for="(value, contactField) in contactDifferences[
+                    contact.did
+                  ]"
                   :key="contactField"
                   class="grid grid-cols-3 border"
                 >
-                <div class="border p-1">{{ contactField }}</div>
+                  <div class="border font-bold p-1">
+                    {{ capitalizeAndInsertSpacesBeforeCaps(contactField) }}
+                  </div>
                   <div class="border p-1">{{ value.old }}</div>
                   <div class="border p-1">{{ value.new }}</div>
                 </div>
@@ -71,32 +86,64 @@
             </div>
           </div>
         </li>
-      <fa icon="spinner" v-if="importing" class="animate-spin" />
         <button
-        v-else
           class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-sm text-white mt-2 px-2 py-1.5 rounded"
           @click="importContacts"
         >
           Import Selected Contacts
         </button>
       </ul>
-    <p v-else>There are no contacts to import.</p>
+      <p v-else-if="contactsImporting.length > 0">
+        All those contacts are already in your list with the same information.
+      </p>
+      <div v-else>
+        There are no contacts in that import. If some were sent, try again to
+        get the full text and paste it. (Note that iOS cuts off data in text
+        messages.) Ask the person to send the data a different way, eg. email.
+        <div class="mt-4 text-center">
+          <textarea
+            v-model="inputJwt"
+            placeholder="Contact-import data"
+            class="mt-4 border-2 border-gray-300 p-2 rounded"
+            cols="30"
+            @input="() => checkContactJwt(inputJwt)"
+          />
+          <br />
+          <button
+            @click="() => processContactJwt(inputJwt)"
+            class="ml-2 p-2 bg-blue-500 text-white rounded"
+          >
+            Check Import
+          </button>
+        </div>
+      </div>
+    </div>
   </section>
 </template>
 
 <script lang="ts">
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
-import { Router } from "vue-router";
+import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 
-import { AppString, NotificationIface } from "@/constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { Contact } from "@/db/tables/contacts";
-import * as libsUtil from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import OfferDialog from "@/components/OfferDialog.vue";
-import { setVisibilityUtil } from "@/libs/endorserServer";
+import { APP_SERVER, AppString, NotificationIface } from "@/constants/app";
+import {
+  db,
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
+import { Contact, ContactMethod } from "@/db/tables/contacts";
+import * as libsUtil from "@/libs/util";
+import { decodeEndorserJwt } from "@/libs/crypto/vc";
+import {
+  capitalizeAndInsertSpacesBeforeCaps,
+  errorStringForLog,
+  setVisibilityUtil,
+} from "@/libs/endorserServer";
+import { getContactJwtFromJwtUrl } from "@/libs/crypto";
 
 @Component({
   components: { EntityIcon, OfferDialog, QuickNav },
@@ -105,6 +152,7 @@ export default class ContactImportView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   AppString = AppString;
+  capitalizeAndInsertSpacesBeforeCaps = capitalizeAndInsertSpacesBeforeCaps;
   libsUtil = libsUtil;
   R = R;
 
@@ -115,9 +163,16 @@ export default class ContactImportView extends Vue {
   contactsSelected: Array<boolean> = []; // whether each contact in contactsImporting is selected
   contactDifferences: Record<
     string,
-    Record<string, { new: string; old: string }>
+    Record<
+      string,
+      {
+        new: string | boolean | Array<ContactMethod> | undefined;
+        old: string | boolean | Array<ContactMethod> | undefined;
+      }
+    >
   > = {}; // for existing contacts, it shows the difference between imported and existing contacts for each key
-  importing = false;
+  checkingImports = false;
+  inputJwt: string = "";
   makeVisible = true;
   sameCount = 0;
 
@@ -126,10 +181,53 @@ export default class ContactImportView extends Vue {
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
 
-    // Retrieve the imported contacts from the query parameter
-    const importedContacts =
-      ((this.$route as Router).query["contacts"] as string) || "[]";
-    this.contactsImporting = JSON.parse(importedContacts);
+    // look for any imported contact array from the query parameter
+    const importedContacts = (this.$route as RouteLocationNormalizedLoaded)
+      .query["contacts"] as string;
+    if (importedContacts) {
+      await this.setContactsSelected(JSON.parse(importedContacts));
+    }
+
+    // look for a JWT after /contact-import/ in the window.location.pathname
+    const jwt = window.location.pathname.match(
+      /\/contact-import\/(ey.+)$/,
+    )?.[1];
+    if (jwt) {
+      // would prefer to validate but we've got an error with JWTs on QR codes generated in the future
+      // eslint-disable-next-line prettier/prettier
+      // const parsedJwt: Omit<JWTVerified, "didResolutionResult" | "signer" | "jwt"> = await decodeAndVerifyJwt(jwt);
+      // decode the JWT
+      const parsedJwt = decodeEndorserJwt(jwt);
+
+      const contacts: Array<Contact> =
+        parsedJwt.payload.contacts || // someday this will be the only payload sent to this page
+        (Array.isArray(parsedJwt.payload) ? parsedJwt.payload : undefined);
+      if (!contacts && parsedJwt.payload.own) {
+        // handle this single-contact JWT in the contacts page, better suited to single additions
+        (this.$router as Router).push({
+          name: "contacts",
+          query: { contactJwt: jwt },
+        });
+      }
+      if (contacts) {
+        await this.setContactsSelected(contacts);
+      } else {
+        // no contacts found so default message should be OK
+      }
+    }
+
+    if (
+      this.contactsImporting.length === 1 &&
+      R.isEmpty(this.contactsExisting)
+    ) {
+      // if there is only one contact and it's new, then we will automatically import it
+      this.contactsSelected[0] = true;
+      this.importContacts(); // ... which routes to the contacts list
+    }
+  }
+
+  async setContactsSelected(contacts: Array<Contact>) {
+    this.contactsImporting = contacts;
     this.contactsSelected = new Array(this.contactsImporting.length).fill(true);
 
     await db.open();
@@ -143,12 +241,19 @@ export default class ContactImportView extends Vue {
       if (existingContact) {
         this.contactsExisting[contactIn.did] = existingContact;
 
-        const differences: Record<string, { new: string; old: string }> = {};
+        const differences: Record<
+          string,
+          {
+            new: string | boolean | Array<ContactMethod> | undefined;
+            old: string | boolean | Array<ContactMethod> | undefined;
+          }
+        > = {};
         Object.keys(contactIn).forEach((key) => {
-          if (contactIn[key] !== existingContact[key]) {
+          // eslint-disable-next-line prettier/prettier
+          if (!R.equals(contactIn[key as keyof Contact], existingContact[key as keyof Contact])) {
             differences[key] = {
-              old: existingContact[key],
-              new: contactIn[key],
+              old: existingContact[key as keyof Contact],
+              new: contactIn[key as keyof Contact],
             };
           }
         });
@@ -163,8 +268,59 @@ export default class ContactImportView extends Vue {
     }
   }
 
+  // check the contact-import JWT
+  async checkContactJwt(jwtInput: string) {
+    if (
+      jwtInput.endsWith(APP_SERVER) ||
+      jwtInput.endsWith(APP_SERVER + "/") ||
+      jwtInput.endsWith("contact-import") ||
+      jwtInput.endsWith("contact-import/")
+    ) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "That is only part of the contact-import data; it's missing data at the end. Try another way to get the full data.",
+        },
+        5000,
+      );
+    }
+  }
+
+  // process the invite JWT and/or text message containing the URL with the JWT
+  async processContactJwt(jwtInput: string) {
+    this.checkingImports = true;
+
+    try {
+      // (For another approach used with invites, see InviteOneAcceptView.processInvite)
+      const jwt: string = getContactJwtFromJwtUrl(jwtInput);
+      // JWT format: { header, payload, signature, data }
+      const payload = decodeEndorserJwt(jwt).payload;
+
+      if (Array.isArray(payload.contacts)) {
+        await this.setContactsSelected(payload.contacts);
+      } else {
+        throw new Error("Invalid contact-import JWT or URL: " + jwtInput);
+      }
+    } catch (error) {
+      const fullError = "Error importing contacts: " + errorStringForLog(error);
+      logConsoleAndDb(fullError, true);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was an error processing the contact-import data.",
+        },
+        3000,
+      );
+    }
+    this.checkingImports = false;
+  }
+
   async importContacts() {
-    this.importing = true;
+    this.checkingImports = true;
     let importedCount = 0,
       updatedCount = 0;
     for (let i = 0; i < this.contactsImporting.length; i++) {
@@ -176,6 +332,7 @@ export default class ContactImportView extends Vue {
           updatedCount++;
         } else {
           // without explicit clone on the Proxy, we get: DataCloneError: Failed to execute 'add' on 'IDBObjectStore': #<Object> could not be cloned.
+          // DataError: Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path yielded a value that is not a valid key.
           await db.contacts.add(R.clone(contact));
           importedCount++;
         }
@@ -184,6 +341,7 @@ export default class ContactImportView extends Vue {
     if (this.makeVisible) {
       const failedVisibileToContacts = [];
       for (let i = 0; i < this.contactsImporting.length; i++) {
+        if (this.contactsSelected[i]) {
           const contact = this.contactsImporting[i];
           if (contact) {
             const visResult = await setVisibilityUtil(
@@ -199,7 +357,8 @@ export default class ContactImportView extends Vue {
             }
           }
         }
-      if (failedVisibileToContacts.length) {
+      }
+      if (failedVisibileToContacts.length > 0) {
         this.$notify(
           {
             group: "alert",
@@ -214,7 +373,7 @@ export default class ContactImportView extends Vue {
       }
     }
 
-    this.importing = false;
+    this.checkingImports = false;
 
     this.$notify(
       {

src/views/ContactQRScanShowView.vue

@@ -91,7 +91,6 @@
 <script lang="ts">
 import { AxiosError } from "axios";
 import QRCodeVue3 from "qr-code-generator-vue3";
-import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { QrcodeStream } from "vue-qrcode-reader";
 import { useClipboard } from "@vueuse/core";
@@ -99,17 +98,18 @@ import { useClipboard } from "@vueuse/core";
 import QuickNav from "@/components/QuickNav.vue";
 import UserNameDialog from "@/components/UserNameDialog.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { getContactPayloadFromJwtUrl } from "@/libs/crypto";
+import { getContactJwtFromJwtUrl } from "@/libs/crypto";
 import {
-  generateEndorserJwtForAccount,
+  generateEndorserJwtUrlForAccount,
   isDid,
   register,
   setVisibilityUtil,
 } from "@/libs/endorserServer";
-import { ETHR_DID_PREFIX } from "@/libs/crypto/vc";
+import { decodeEndorserJwt, ETHR_DID_PREFIX } from "@/libs/crypto/vc";
+import { retrieveAccountMetadata } from "@/libs/util";
 
 @Component({
   components: {
@@ -140,15 +140,13 @@ export default class ContactQRScanShow extends Vue {
       !!settings.hideRegisterPromptOnNewContact;
     this.isRegistered = !!settings.isRegistered;
 
-    await accountsDB.open();
-    const accounts = await accountsDB.accounts.toArray();
-    const account = R.find((acc) => acc.did === this.activeDid, accounts);
+    const account = await retrieveAccountMetadata(this.activeDid);
     if (account) {
       const name =
         (settings.firstName || "") +
         (settings.lastName ? ` ${settings.lastName}` : ""); // lastName is deprecated, pre v 0.1.3
 
-      this.qrValue = await generateEndorserJwtForAccount(
+      this.qrValue = await generateEndorserJwtUrlForAccount(
         account,
         !!settings.isRegistered,
         name,
@@ -181,8 +179,8 @@ export default class ContactQRScanShow extends Vue {
     if (url) {
       let newContact: Contact;
       try {
-        const payload = getContactPayloadFromJwtUrl(url);
-        if (!payload) {
+        const jwt = getContactJwtFromJwtUrl(url);
+        if (!jwt) {
           this.$notify(
             {
               group: "alert",
@@ -194,8 +192,9 @@ export default class ContactQRScanShow extends Vue {
           );
           return;
         }
+        const { payload } = decodeEndorserJwt(jwt);
         newContact = {
-          did: payload.iss as string,
+          did: payload.own.did || payload.iss, // ".own.did" is reliable as of v 0.3.49
           name: payload.own.name,
           nextPubKeyHashB64: payload.own.nextPublicEncKeyHash,
           profileImageUrl: payload.own.profileImageUrl,
@@ -407,7 +406,7 @@ export default class ContactQRScanShow extends Vue {
     useClipboard()
       .copy(this.qrValue)
       .then(() => {
-        console.log("Contact URL:", this.qrValue);
+        // console.log("Contact URL:", this.qrValue);
         this.$notify(
           {
             group: "alert",

src/views/ContactsView.vue

@@ -23,6 +23,7 @@
 
     <!-- New Contact -->
     <div id="formAddNewContact" class="mt-4 mb-4 flex items-stretch">
+      <span class="flex" v-if="isRegistered">
         <router-link
           :to="{ name: 'invite-one' }"
           class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
@@ -30,6 +31,44 @@
           <fa icon="envelope-open-text" class="fa-fw text-2xl" />
         </router-link>
 
+        <button
+          @click="showOnboardMeetingDialog()"
+          class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
+        >
+          <fa icon="chair" class="fa-fw text-2xl" />
+        </button>
+      </span>
+      <span v-else class="flex">
+        <span
+          class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
+        >
+          <fa
+            icon="envelope-open-text"
+            class="fa-fw text-2xl"
+            @click="
+              warning(
+                'You must get registered before you can create invites.',
+                'Not Registered',
+              )
+            "
+          />
+        </span>
+        <span
+          class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
+        >
+          <fa
+            icon="chair"
+            class="fa-fw text-2xl"
+            @click="
+              warning(
+                'You must get registered before you can initiate an onboarding meeting.',
+                'Not Registered',
+              )
+            "
+          />
+        </span>
+      </span>
+
       <router-link
         :to="{ name: 'contact-qr' }"
         class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
@@ -53,9 +92,9 @@
 
     <div class="flex justify-between" v-if="contacts.length > 0">
       <div class="w-full text-left">
+        <div v-if="!showGiveNumbers">
           <input
             type="checkbox"
-          v-if="!showGiveNumbers"
             :checked="contactsSelected.length === contacts.length"
             @click="
               contactsSelected.length === contacts.length
@@ -79,6 +118,10 @@
           >
             Copy Selections
           </button>
+          <button @click="showCopySelectionsInfo()">
+            <fa icon="circle-info" class="text-xl text-blue-500 ml-4" />
+          </button>
+        </div>
       </div>
 
       <div class="w-full text-right">
@@ -154,14 +197,18 @@
                     )
                   : contactsSelected.push(contact.did)
               "
-              class="ml-2 h-6 w-6"
+              class="ml-2 h-6 w-6 flex-shrink-0"
               data-testId="contactCheckOne"
             />
 
-            <h2 class="text-base font-semibold ml-2">
-              {{ contact.name || AppString.NO_CONTACT_NAME }}
+            <h2
+              class="text-base font-semibold ml-2 w-1/3 truncate flex-shrink-0"
+            >
+              {{ contactNameNonBreakingSpace(contact.name) }}
             </h2>
 
+            <span>
+              <div class="flex items-center">
                 <router-link
                   :to="{
                     path: '/did/' + encodeURIComponent(contact.did),
@@ -171,9 +218,14 @@
                   <fa icon="circle-info" class="text-xl text-blue-500 ml-4" />
                 </router-link>
 
-            <span class="ml-4 text-sm overflow-hidden"
-              >{{ shortDid(contact.did) }}...</span
-            ><!-- The first 18 characters of did:peer are the same. -->
+                <span class="ml-4 text-sm overflow-hidden">{{
+                  libsUtil.shortDid(contact.did)
+                }}</span>
+              </div>
+              <div class="ml-4 text-sm">
+                {{ contact.notes }}
+              </div>
+            </span>
           </div>
           <div id="ContactActions" class="flex gap-1.5 mt-2">
             <div
@@ -306,19 +358,21 @@ import GiftedDialog from "@/components/GiftedDialog.vue";
 import OfferDialog from "@/components/OfferDialog.vue";
 import ContactNameDialog from "@/components/ContactNameDialog.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { AppString, NotificationIface } from "@/constants/app";
+import { APP_SERVER, AppString, NotificationIface } from "@/constants/app";
 import {
   db,
+  logConsoleAndDb,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
   updateDefaultSettings,
 } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
-import { getContactPayloadFromJwtUrl } from "@/libs/crypto";
+import { getContactJwtFromJwtUrl } from "@/libs/crypto";
 import { decodeEndorserJwt } from "@/libs/crypto/vc";
 import {
   CONTACT_CSV_HEADER,
-  CONTACT_URL_PREFIX,
+  createEndorserJwtForDid,
+  errorStringForLog,
   GiveSummaryRecord,
   getHeaders,
   isDid,
@@ -326,6 +380,9 @@ import {
   setVisibilityUtil,
   UserInfo,
   VerifiableCredential,
+  CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI,
+  CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
+  CONTACT_URL_PATH_ENDORSER_CH_OLD,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
 import { generateSaveAndActivateIdentity } from "@/libs/util";
@@ -382,6 +439,11 @@ export default class ContactsView extends Vue {
     this.apiServer = settings.apiServer || "";
     this.isRegistered = !!settings.isRegistered;
 
+    // if these detect a query parameter, they can and then redirect to this URL without a query parameter
+    // to avoid problems when they reload or they go forward & back and it tries to reprocess
+    await this.processContactJwt();
+    await this.processInviteJwt();
+
     this.showGiveNumbers = !!settings.showContactGivesInline;
     this.hideRegisterPromptOnNewContact =
       !!settings.hideRegisterPromptOnNewContact;
@@ -396,8 +458,13 @@ export default class ContactsView extends Vue {
     this.contacts = baseContacts.sort((a, b) =>
       (a.name || "").localeCompare(b.name || ""),
     );
+  }
 
+  private async processContactJwt() {
     // handle a contact sent via URL
+    //
+    // For external links, use /contact-import/:jwt with a JWT that has an array of contacts
+    // because that will do better error checking for things like missing data on iOS platforms.
     const importedContactJwt = (this.$route as RouteLocationNormalizedLoaded)
       .query["contactJwt"] as string;
     if (importedContactJwt) {
@@ -405,27 +472,31 @@ export default class ContactsView extends Vue {
       const { payload } = decodeEndorserJwt(importedContactJwt);
       const userInfo = payload["own"] as UserInfo;
       const newContact = {
-        did: payload["iss"],
+        did: userInfo.did || payload["iss"], // ".did" is reliable as of v 0.3.49
         name: userInfo.name,
         nextPubKeyHashB64: userInfo.nextPublicEncKeyHash,
         profileImageUrl: userInfo.profileImageUrl,
         publicKeyBase64: userInfo.publicEncKey,
         registered: userInfo.registered,
       } as Contact;
-      this.addContact(newContact);
+      await this.addContact(newContact);
+      // if we're here, they haven't redirected anywhere, so we'll redirect here without a query parameter
+      (this.$router as Router).push({ path: "/contacts" });
+    }
   }
 
+  private async processInviteJwt() {
     // handle an invite JWT sent via URL
     const importedInviteJwt = (this.$route as RouteLocationNormalizedLoaded)
       .query["inviteJwt"] as string;
     if (importedInviteJwt === "") {
-      // this happens when a platform (usually iOS) doesn't include anything after the "=" in a shared link.
+      // this happens when a platform (eg iOS) doesn't include anything after the "=" in a shared link.
       this.$notify(
         {
           group: "alert",
-          type: "warning",
+          type: "danger",
           title: "Blank Invite",
-          text: "The invite was not included. This can happen when your device cuts off the link, so you might try pasting the full link into a browser.",
+          text: "The invite was not included, which can happen when your iOS device cuts off the link. Try pasting the full link into a browser.",
         },
         7000,
       );
@@ -457,35 +528,43 @@ export default class ContactsView extends Vue {
           3000,
         );
 
+        // wait for a second before continuing so they see the registration message
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+
         // now add the inviter as a contact
+        // (similar code is in InviteOneAcceptView.vue)
         const payload: JWTPayload =
           decodeEndorserJwt(importedInviteJwt).payload;
         const registration = payload as VerifiableCredential;
         (this.$refs.contactNameDialog as ContactNameDialog).open(
           "Who Invited You?",
           "",
-          (name) => {
-            // not doing await on purpose, so that they always see the onboarding
-            this.addContact({
+          async (name) => {
+            await this.addContact({
               did: registration.vc.credentialSubject.agent.identifier,
               name: name,
               registered: true,
             });
+            // wait for a second before continuing so they see the user-added message
+            await new Promise((resolve) => setTimeout(resolve, 1000));
             this.showOnboardingInfo();
           },
-          () => {
-            // not doing await on purpose, so that they always see the onboarding
-            this.addContact({
+          async () => {
+            // on cancel, will still add the contact
+            await this.addContact({
               did: registration.vc.credentialSubject.agent.identifier,
               name: "(person who invited you)",
               registered: true,
             });
+            // wait for a second before continuing so they see the user-added message
+            await new Promise((resolve) => setTimeout(resolve, 1000));
             this.showOnboardingInfo();
           },
         );
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (error: any) {
-        console.error("Error redeeming invite:", error);
+        const fullError = "Error redeeming invite: " + errorStringForLog(error);
+        logConsoleAndDb(fullError, true);
         let message = "Got an error sending the invite.";
         if (
           error.response &&
@@ -510,9 +589,15 @@ export default class ContactsView extends Vue {
           5000,
         );
       }
+      // if we're here, they haven't redirected anywhere, so we'll redirect here without a query parameter
+      (this.$router as Router).push({ path: "/contacts" });
     }
   }
 
+  private contactNameNonBreakingSpace(contactName?: string) {
+    return (contactName || AppString.NO_CONTACT_NAME).replace(/\s/g, "\u00A0");
+  }
+
   private danger(message: string, title: string = "Error", timeout = 5000) {
     this.$notify(
       {
@@ -525,6 +610,18 @@ export default class ContactsView extends Vue {
     );
   }
 
+  private warning(message: string, title: string = "Error", timeout = 5000) {
+    this.$notify(
+      {
+        group: "alert",
+        type: "warning",
+        title: title,
+        text: message,
+      },
+      timeout,
+    );
+  }
+
   private showOnboardingInfo() {
     this.$notify(
       {
@@ -595,13 +692,13 @@ export default class ContactsView extends Vue {
               (useRecipient ? "given" : "received") +
               " data from the server.",
           },
-          5000,
+          3000,
         );
       }
     };
 
     try {
-      const headers = await getHeaders(this.activeDid);
+      const headers = await getHeaders(this.activeDid, this.$notify);
       const givenByUrl =
         this.apiServer +
         "/api/v2/report/gives?agentDid=" +
@@ -644,7 +741,8 @@ export default class ContactsView extends Vue {
       this.givenToMeConfirmed = givenToMeConfirmed;
       this.givenToMeUnconfirmed = givenToMeUnconfirmed;
     } catch (error) {
-      console.error("Error loading gives", error);
+      const fullError = "Error loading gives: " + errorStringForLog(error);
+      logConsoleAndDb(fullError, true);
       this.$notify(
         {
           group: "alert",
@@ -652,7 +750,7 @@ export default class ContactsView extends Vue {
           title: "Load Error",
           text: "Got an error loading your gives.",
         },
-        5000,
+        3000,
       );
     }
   }
@@ -660,12 +758,37 @@ export default class ContactsView extends Vue {
   private async onClickNewContact(): Promise<void> {
     const contactInput = this.contactInput.trim();
     if (!contactInput) {
-      this.danger("There was no contact info to add.", "No Contact");
+      this.danger(
+        "There was no contact info to add. Try the other green buttons.",
+        "No Contact",
+      );
       return;
     }
 
-    if (contactInput.startsWith(CONTACT_URL_PREFIX)) {
-      await this.addContactFromScan(contactInput);
+    if (contactInput.includes(CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI)) {
+      const jwt = getContactJwtFromJwtUrl(contactInput);
+      (this.$router as Router).push({
+        path: "/contact-import/" + jwt,
+      });
+      return;
+    }
+
+    if (
+      contactInput.includes(CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI) ||
+      contactInput.includes(CONTACT_URL_PATH_ENDORSER_CH_OLD)
+    ) {
+      const jwt = getContactJwtFromJwtUrl(contactInput);
+      const { payload } = decodeEndorserJwt(jwt);
+      const userInfo = payload["own"] as UserInfo;
+      const newContact = {
+        did: userInfo.did || payload["iss"], // "did" is reliable as of v 0.3.49
+        name: userInfo.name,
+        nextPubKeyHashB64: userInfo.nextPublicEncKeyHash,
+        profileImageUrl: userInfo.profileImageUrl,
+        publicKeyBase64: userInfo.publicEncKey,
+        registered: userInfo.registered,
+      } as Contact;
+      await this.addContact(newContact);
       return;
     }
 
@@ -690,6 +813,9 @@ export default class ContactsView extends Vue {
           3000, // keeping it up so that the "visibility" message is seen
         );
       } catch (e) {
+        const fullError =
+          "Error adding contacts from CSV: " + errorStringForLog(e);
+        logConsoleAndDb(fullError, true);
         this.danger("An error occurred. Some contacts may have been added.");
       }
 
@@ -756,6 +882,9 @@ export default class ContactsView extends Vue {
           query: { contacts: JSON.stringify(contacts) },
         });
       } catch (e) {
+        const fullError =
+          "Error adding contacts from array: " + errorStringForLog(e);
+        logConsoleAndDb(fullError, true);
         this.danger("The input could not be parsed.", "Invalid Contact List");
       }
       return;
@@ -807,31 +936,6 @@ export default class ContactsView extends Vue {
     return db.contacts.add(newContact);
   }
 
-  private async addContactFromScan(url: string): Promise<void> {
-    const payload = getContactPayloadFromJwtUrl(url);
-    if (!payload) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "No Contact Info",
-          text: "The contact info could not be parsed.",
-        },
-        3000,
-      );
-      return;
-    } else {
-      return this.addContact({
-        did: payload.iss,
-        name: payload.own.name,
-        nextPubKeyHashB64: payload.own.nextPublicEncKeyHash,
-        profileImageUrl: payload.own.profileImageUrl,
-        publicKeyBase64: payload.own.publicEncKey,
-        registered: payload.own.registered,
-      } as Contact);
-    }
-  }
-
   private async addContact(newContact: Contact) {
     if (!newContact.did) {
       this.danger("Cannot add a contact without a DID.", "Incomplete Contact");
@@ -891,7 +995,7 @@ export default class ContactsView extends Vue {
                 },
                 -1,
               );
-            }, 500);
+            }, 1000);
           }
         }
         this.$notify(
@@ -905,7 +1009,9 @@ export default class ContactsView extends Vue {
         );
       })
       .catch((err) => {
-        console.error("Error when adding contact to storage:", err);
+        const fullError =
+          "Error when adding contact to storage: " + errorStringForLog(err);
+        logConsoleAndDb(fullError, true);
         let message = "An error prevented this import.";
         if (
           err.message?.indexOf("Key already exists in the object store.") > -1
@@ -917,7 +1023,7 @@ export default class ContactsView extends Vue {
           message +=
             " Check that the contact doesn't conflict with any you already have.";
         }
-        this.danger(message, "Contact Not Added", -1);
+        this.danger(message, "Contact Not Added", 5000);
       });
   }
 
@@ -966,7 +1072,7 @@ export default class ContactsView extends Vue {
             text:
               (contact.name || "That unnamed person") + " has been registered.",
           },
-          5000,
+          3000,
         );
       } else {
         this.$notify(
@@ -982,7 +1088,8 @@ export default class ContactsView extends Vue {
         );
       }
     } catch (error) {
-      console.error("Error when registering:", error);
+      const fullError = "Error when registering: " + errorStringForLog(error);
+      logConsoleAndDb(fullError, true);
       let userMessage = "There was an error.";
       const serverError = error as AxiosError;
       if (serverError.isAxiosError) {
@@ -1168,6 +1275,9 @@ export default class ContactsView extends Vue {
         showContactGivesInline: newShowValue,
       });
     } catch (err) {
+      const fullError =
+        "Error updating contact-amounts setting: " + errorStringForLog(err);
+      logConsoleAndDb(fullError, true);
       this.$notify(
         {
           group: "alert",
@@ -1177,10 +1287,6 @@ export default class ContactsView extends Vue {
         },
         5000,
       );
-      console.error(
-        "Telling user to try again after contact-amounts setting update because:",
-        err,
-      );
     }
     this.showGiveNumbers = newShowValue;
     if (
@@ -1220,44 +1326,116 @@ export default class ContactsView extends Vue {
     };
   }
 
-  private copySelectedContacts() {
+  private async copySelectedContacts() {
     if (this.contactsSelected.length === 0) {
       this.danger("You must select contacts to copy.");
       return;
     }
-    const selectedContacts = this.contacts.filter((c) =>
+    const selectedContactsFull = this.contacts.filter((c) =>
       this.contactsSelected.includes(c.did),
     );
-    const message =
-      "To add contacts, paste this into the box on the 'Contacts' screen.\n\n" +
-      JSON.stringify(selectedContacts);
+    const selectedContacts: Array<Contact> = selectedContactsFull.map((c) => {
+      const contact: Contact = {
+        did: c.did,
+        name: c.name,
+      };
+      if (c.nextPubKeyHashB64) {
+        contact.nextPubKeyHashB64 = c.nextPubKeyHashB64;
+      }
+      if (c.profileImageUrl) {
+        contact.profileImageUrl = c.profileImageUrl;
+      }
+      if (c.publicKeyBase64) {
+        contact.publicKeyBase64 = c.publicKeyBase64;
+      }
+      return contact;
+    });
+    // console.log(
+    //   "Array of selected contacts:",
+    //   JSON.stringify(selectedContacts),
+    // );
+    const contactsJwt = await createEndorserJwtForDid(this.activeDid, {
+      contacts: selectedContacts,
+    });
+    const contactsJwtUrl = APP_SERVER + "/contact-import/" + contactsJwt;
     useClipboard()
-      .copy(message)
+      .copy(contactsJwtUrl)
       .then(() => {
         this.$notify(
           {
             group: "alert",
             type: "info",
             title: "Copied",
-            text: "Those contacts were copied to the clipboard. Have them paste it in the box on their 'Contacts' screen.",
+            text: "The link for those contacts is now in the clipboard.",
           },
-          5000,
+          3000,
         );
       });
   }
 
-  private shortDid(did: string) {
-    if (did.startsWith("did:peer:")) {
-      return (
-        did.substring(0, "did:peer:".length + 2) +
-        "..." +
-        did.substring("did:peer:".length + 18, "did:peer:".length + 25) +
-        "..."
+  private showCopySelectionsInfo() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Copying Contacts",
+        text: "Contact info will include name, ID, profile image, and public key.",
+      },
+      5000,
     );
-    } else if (did.startsWith("did:ethr:")) {
-      return did.substring(0, "did:ethr:".length + 9) + "...";
+  }
+
+  private async showOnboardMeetingDialog() {
+    try {
+      // First check if they're in a meeting
+      const headers = await getHeaders(this.activeDid);
+      const memberResponse = await this.axios.get(
+        this.apiServer + "/api/partner/groupOnboardMember",
+        { headers },
+      );
+
+      if (memberResponse.data.data) {
+        // They're in a meeting, check if they're the host
+        const hostResponse = await this.axios.get(
+          this.apiServer + "/api/partner/groupOnboard",
+          { headers },
+        );
+
+        if (hostResponse.data.data) {
+          // They're the host, take them to setup
+          (this.$router as Router).push({ name: "onboard-meeting-setup" });
         } else {
-      return did.substring(0, did.indexOf(":", 4) + 7) + "...";
+          // They're not the host, take them to list
+          (this.$router as Router).push({ name: "onboard-meeting-list" });
+        }
+      } else {
+        // They're not in a meeting, show the dialog
+        this.$notify(
+          {
+            group: "modal",
+            type: "confirm",
+            title: "Onboarding Meeting",
+            text: "Would you like to start a new meeting?",
+            onYes: async () => {
+              (this.$router as Router).push({ name: "onboard-meeting-setup" });
+            },
+            yesText: "Start New Meeting",
+            onNo: async () => {
+              (this.$router as Router).push({ name: "onboard-meeting-list" });
+            },
+            noText: "Join Existing Meeting",
+          },
+          -1,
+        );
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error checking meeting status:" + errorStringForLog(error),
+      );
+      this.danger(
+        "There was an error checking your meeting status.",
+        "Meeting Error",
+      );
     }
   }
 }

src/views/DIDView.vue

@@ -6,7 +6,7 @@
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
         <!-- Back -->
         <button
           @click="$router.go(-1)"
@@ -26,15 +26,11 @@
       <div>
         <h2 class="text-xl font-semibold">
           {{ contactFromDid?.name || "(no name)" }}
-          <button
-            @click="
-              contactEdit = true;
-              contactNewName = (contactFromDid?.name as string) || '';
-            "
-            title="Edit"
+          <router-link
+            :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
           >
             <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
-          </button>
+          </router-link>
         </h2>
         <button
           @click="showDidDetails = !showDidDetails"
@@ -163,34 +159,6 @@
       </div>
     </div>
 
-    <!-- Edit Name Dialog, maybe should be replaced by ContactNameDialog -->
-    <div v-if="contactEdit" class="dialog-overlay">
-      <div class="dialog">
-        <h1 class="text-xl font-bold text-center mb-4">Edit Name</h1>
-        <input
-          type="text"
-          class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-          placeholder="Name"
-          v-model="contactNewName"
-        />
-        <div class="flex justify-between">
-          <button
-            class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded -ml-1.5 border-l border-blue-400"
-            @click="onClickSaveName(contactNewName)"
-          >
-            <fa icon="save" />
-          </button>
-          <span class="inline-block w-2" />
-          <button
-            class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded -ml-1.5 border-l border-blue-400"
-            @click="onClickCancelName()"
-          >
-            <fa icon="ban" />
-          </button>
-        </div>
-      </div>
-    </div>
-
     <!-- Loading Animation -->
     <div
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
@@ -254,7 +222,7 @@ import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { BoundingBox } from "@/db/tables/settings";
 import {
@@ -290,8 +258,6 @@ export default class DIDView extends Vue {
   apiServer = "";
   claims: Array<GenericCredWrapper<GenericVerifiableCredential>> = [];
   contactFromDid?: Contact;
-  contactEdit = false;
-  contactNewName: string = "";
   contactYaml = "";
   hitEnd = false;
   isLoading = false;
@@ -312,22 +278,31 @@ export default class DIDView extends Vue {
     this.apiServer = settings.apiServer || "";
 
     const pathParam = window.location.pathname.substring("/did/".length);
-    if (pathParam) {
-      this.viewingDid = decodeURIComponent(pathParam);
+    let showDid = pathParam;
+    if (!showDid) {
+      showDid = this.activeDid;
+      if (showDid) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "toast",
+            title: "Your Info",
+            text: "No user was specified so showing your info.",
+          },
+          3000,
+        );
+      }
+    }
+    if (showDid) {
+      this.viewingDid = decodeURIComponent(showDid);
       this.contactFromDid = await db.contacts.get(this.viewingDid);
       if (this.contactFromDid) {
         this.contactYaml = yaml.dump(this.contactFromDid);
       }
       await this.loadClaimsAbout();
 
-      await accountsDB.open();
-      const allAccounts = await accountsDB.accounts.toArray();
-      for (const account of allAccounts) {
-        if (account.did === this.viewingDid) {
-          this.isMyDid = true;
-          break;
-        }
-      }
+      const allAccountDids = await libsUtil.retrieveAccountDids();
+      this.isMyDid = allAccountDids.includes(this.viewingDid);
     }
   }
 
@@ -519,7 +494,7 @@ export default class DIDView extends Vue {
           title: "Error",
           text: e.userMessage || "There was a problem retrieving claims.",
         },
-        -1,
+        3000,
       );
     } finally {
       this.isLoading = false;
@@ -565,29 +540,6 @@ export default class DIDView extends Vue {
     return claim.claim.name || claim.claim.description || "";
   }
 
-  private async onClickCancelName() {
-    this.contactEdit = false;
-  }
-
-  private async onClickSaveName(newName: string) {
-    if (!this.contactFromDid) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Not A Contact",
-          text: "First add this on the contact page, then you can edit here.",
-        },
-        5000,
-      );
-      return;
-    }
-    this.contactFromDid.name = newName;
-    return db.contacts
-      .update(this.contactFromDid.did, { name: newName })
-      .then(() => (this.contactEdit = false));
-  }
-
   // note that this is also in ContactView.vue
   async confirmSetVisibility(contact: Contact, visibility: boolean) {
     const visibilityPrompt = visibility
@@ -732,6 +684,7 @@ export default class DIDView extends Vue {
 
 <style>
 .dialog-overlay {
+  z-index: 50;
   position: fixed;
   top: 0;
   left: 0;

src/views/DiscoverView.vue

@@ -6,7 +6,7 @@
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light">
-      Discover Projects
+      Discover Projects & People
     </h1>
 
     <OnboardingDialog ref="onboardingDialog" />
@@ -15,43 +15,40 @@
     <div
       id="QuickSearch"
       class="mt-8 mb-4 flex"
-      v-on:keyup.enter="searchSelected()"
+      :style="{ visibility: isSearchVisible ? 'visible' : 'hidden' }"
     >
       <input
         type="text"
         v-model="searchTerms"
         placeholder="Search…"
         class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
+        v-on:keyup.enter="searchSelected()"
       />
       <button
-        @click="searchSelected()"
         class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
+        @click="searchSelected()"
       >
         <fa icon="magnifying-glass" class="fa-fw"></fa>
       </button>
     </div>
 
     <!-- Result Tabs -->
-    <div class="text-center text-slate-500 border-b border-slate-300">
+    <!-- Top Level Selection -->
+    <div class="text-center text-slate-500 border-b border-slate-300 mb-4">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
         <li>
           <a
             href="#"
             @click="
               projects = [];
-              isLocalActive = true;
-              isRemoteActive = false;
-              searchLocal();
+              userProfiles = [];
+              isProjectsActive = true;
+              isPeopleActive = false;
+              searchSelected();
             "
-            v-bind:class="computedLocalTabStyleClassNames()"
+            v-bind:class="computedProjectsTabStyleClassNames()"
           >
-            Nearby
-            <span
-              class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
-              v-if="isLocalActive"
-            >
-              {{ localCount > -1 ? localCount : "?" }}
-            </span>
+            Projects
           </a>
         </li>
         <li>
@@ -59,19 +56,91 @@
             href="#"
             @click="
               projects = [];
-              isRemoteActive = true;
+              userProfiles = [];
+              isProjectsActive = false;
+              isPeopleActive = true;
+              searchSelected();
+            "
+            v-bind:class="computedPeopleTabStyleClassNames()"
+          >
+            People
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Secondary Tabs -->
+    <div class="text-center text-slate-500 border-b border-slate-300">
+      <ul class="flex flex-wrap justify-center gap-4 -mb-px">
+        <li>
+          <a
+            href="#"
+            @click="
+              projects = [];
+              userProfiles = [];
+              isLocalActive = true;
+              isMappedActive = false;
+              isAnywhereActive = false;
+              isSearchVisible = true;
+              tempSearchBox = null;
+              searchLocal();
+            "
+            v-bind:class="computedLocalTabStyleClassNames()"
+          >
+            Nearby
+            <!-- restore when the links don't jump around for different numbers
+            <span
+              class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
+              v-if="isLocalActive"
+            >
+              {{ localCount > -1 ? localCount : "?" }}
+            </span>
+            -->
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            @click="
+              projects = [];
+              userProfiles = [];
               isLocalActive = false;
+              isMappedActive = true;
+              isAnywhereActive = false;
+              isSearchVisible = false;
+              searchTerms = '';
+              tempSearchBox = null;
+            "
+            v-bind:class="computedMappedTabStyleClassNames()"
+          >
+            <!-- search is triggered when map component gets to "ready" state -->
+            Mapped
+          </a>
+        </li>
+        <li>
+          <a
+            href="#"
+            @click="
+              projects = [];
+              userProfiles = [];
+              isLocalActive = false;
+              isMappedActive = false;
+              isAnywhereActive = true;
+              isSearchVisible = true;
+              tempSearchBox = null;
               searchAll();
             "
             v-bind:class="computedRemoteTabStyleClassNames()"
           >
             Anywhere
+            <!-- restore when the links don't jump around for different numbers
             <span
               class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
-              v-if="isRemoteActive"
+              v-if="isAnywhereActive"
             >
               {{ remoteCount > -1 ? remoteCount : "?" }}
             </span>
+            -->
           </a>
         </li>
       </ul>
@@ -89,6 +158,25 @@
       </div>
     </div>
 
+    <div v-if="isMappedActive && !tempSearchBox">
+      <div class="mt-4 h-96 w-5/6 mx-auto">
+        <l-map
+          ref="projectMap"
+          @ready="onMapReady"
+          @moveend="onMoveEnd"
+          @movestart="onMoveStart"
+          @zoomend="onZoomEnd"
+          @zoomstart="onZoomStart"
+        >
+          <l-tile-layer
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            layer-type="base"
+            name="OpenStreetMap"
+          />
+        </l-map>
+      </div>
+    </div>
+
     <!-- Loading Animation -->
     <div
       class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
@@ -96,26 +184,33 @@
     >
       <fa icon="spinner" class="fa-spin-pulse"></fa>
     </div>
-    <div v-else-if="projects.length === 0" class="text-center mt-8">
+    <div
+      v-else-if="projects.length === 0 && userProfiles.length === 0"
+      class="text-center mt-8"
+    >
       <p class="text-lg text-slate-500">
         <span v-if="isLocalActive">
           <span v-if="searchBox"> None found in the selected area. </span>
           <!-- Otherwise there's no search area selected so we'll just leave the search box for them to click. -->
         </span>
-        <span v-else>No projects were found with that search.</span>
+        <span v-else-if="isAnywhereActive"
+          >No projects were found with that search.</span
+        >
       </p>
     </div>
 
     <!-- Results List -->
     <InfiniteScroll @reached-bottom="loadMoreData">
       <ul id="listDiscoverResults">
+        <!-- Projects List -->
+        <template v-if="isProjectsActive">
           <li
             class="border-b border-slate-300"
             v-for="project in projects"
             :key="project.handleId"
           >
             <a
-            @click="onClickLoadProject(project.handleId)"
+              @click="onClickLoadItem(project.handleId)"
               class="block py-4 flex gap-4 cursor-pointer"
             >
               <div>
@@ -132,36 +227,113 @@
                 <div class="text-sm">
                   <fa icon="user" class="fa-fw text-slate-400"></fa>
                   {{
-                  didInfo(project.issuerDid, activeDid, allMyDids, allContacts)
+                    didInfo(
+                      project.issuerDid,
+                      activeDid,
+                      allMyDids,
+                      allContacts,
+                    )
                   }}
                 </div>
               </div>
             </a>
           </li>
+        </template>
+
+        <!-- Profiles List -->
+        <template v-else>
+          <li
+            class="border-b border-slate-300"
+            v-for="profile in userProfiles"
+            :key="profile.issuerDid"
+          >
+            <a
+              @click="onClickLoadItem(profile?.rowId || '')"
+              class="block py-4 flex gap-4 cursor-pointer"
+            >
+              <div class="grow">
+                <div class="text-sm">
+                  <fa icon="user" class="fa-fw text-slate-400"></fa>
+                  {{
+                    didInfo(
+                      profile.issuerDid,
+                      activeDid,
+                      allMyDids,
+                      allContacts,
+                    )
+                  }}
+                </div>
+                <p
+                  v-if="profile.description"
+                  class="mt-1 text-sm text-slate-600"
+                >
+                  {{ profile.description }}
+                </p>
+                <div
+                  v-if="isAnywhereActive && profile.locLat && profile.locLon"
+                  class="mt-1 text-xs text-slate-500"
+                >
+                  <fa icon="location-dot" class="fa-fw"></fa>
+                  {{
+                    (profile.locLat > 0 ? "North" : "South") +
+                    " in " +
+                    (profile.locLon > 0 ? "Eastern" : "Western") +
+                    " Hemisphere"
+                  }}
+                </div>
+              </div>
+            </a>
+          </li>
+        </template>
       </ul>
     </InfiniteScroll>
   </section>
 </template>
 
 <script lang="ts">
+import "leaflet/dist/leaflet.css";
+import * as L from "leaflet";
 import { Component, Vue } from "vue-facing-decorator";
-import { Router } from "vue-router";
+import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
+import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { DEFAULT_PARTNER_API_SERVER, NotificationIface } from "@/constants/app";
+import {
+  db,
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { BoundingBox } from "@/db/tables/settings";
-import { didInfo, getHeaders, PlanData } from "@/libs/endorserServer";
-import { OnboardPage } from "@/libs/util";
+import {
+  didInfo,
+  errorStringForLog,
+  getHeaders,
+  PlanData,
+} from "@/libs/endorserServer";
+import { UserProfile } from "@/libs/partnerServer";
+import { OnboardPage, retrieveAccountDids } from "@/libs/util";
+
+interface Tile {
+  indexLat: number;
+  indexLon: number;
+  minFoundLat: number;
+  maxFoundLat: number;
+  minFoundLon: number;
+  maxFoundLon: number;
+  recordCount: number;
+}
 
 @Component({
   components: {
     InfiniteScroll,
+    LMap,
+    LTileLayer,
     OnboardingDialog,
     ProjectIcon,
     QuickNav,
@@ -170,19 +342,32 @@ import { OnboardPage } from "@/libs/util";
 })
 export default class DiscoverView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
+  $router!: Router;
+  $route!: RouteLocationNormalizedLoaded;
 
   activeDid = "";
   allContacts: Array<Contact> = [];
   allMyDids: Array<string> = [];
   apiServer = "";
-  searchTerms = "";
-  projects: PlanData[] = [];
   isLoading = false;
   isLocalActive = true;
-  isRemoteActive = false;
+  isMappedActive = false;
+  isAnywhereActive = false;
+  isProjectsActive = true;
+  isPeopleActive = false;
+  isSearchVisible = true;
+  localCenterLat = 0;
+  localCenterLong = 0;
   localCount = -1;
+  markers: { [key: string]: L.Marker } = {};
+  partnerApiServer = DEFAULT_PARTNER_API_SERVER;
+  projects: PlanData[] = [];
   remoteCount = -1;
   searchBox: { name: string; bbox: BoundingBox } | null = null;
+  searchTerms = "";
+  tempSearchBox: BoundingBox | null = null;
+  userProfiles: UserProfile[] = [];
+  zoomedSoDoNotMove = false;
 
   // make this function available to the Vue template
   didInfo = didInfo;
@@ -191,15 +376,15 @@ export default class DiscoverView extends Vue {
     const settings = await retrieveSettingsForActiveAccount();
     this.activeDid = (settings.activeDid as string) || "";
     this.apiServer = (settings.apiServer as string) || "";
+    this.partnerApiServer =
+      (settings.partnerApiServer as string) || this.partnerApiServer;
     this.searchBox = settings.searchBoxes?.[0] || null;
 
     this.allContacts = await db.contacts.toArray();
 
-    await accountsDB.open();
-    const allAccounts = await accountsDB.accounts.toArray();
-    this.allMyDids = allAccounts.map((acc) => acc.did);
+    this.allMyDids = await retrieveAccountDids();
 
-    this.searchTerms = (this.$route as Router).query["searchText"] || "";
+    this.searchTerms = this.$route.query["searchText"]?.toString() || "";
 
     if (!settings.finishedOnboarding) {
       (this.$refs.onboardingDialog as OnboardingDialog).open(
@@ -209,9 +394,14 @@ export default class DiscoverView extends Vue {
 
     if (this.searchBox) {
       await this.searchLocal();
+
+      const bbox = this.searchBox.bbox;
+      this.localCenterLat = (bbox.maxLat + bbox.minLat) / 2;
+      this.localCenterLong = (bbox.eastLong + bbox.westLong) / 2;
     } else {
       this.isLocalActive = false;
-      this.isRemoteActive = true;
+      this.isMappedActive = false;
+      this.isAnywhereActive = true;
       await this.searchAll();
     }
   }
@@ -224,6 +414,9 @@ export default class DiscoverView extends Vue {
   public async searchSelected() {
     if (this.isLocalActive) {
       await this.searchLocal();
+    } else if (this.isMappedActive) {
+      const mapRef = this.$refs.projectMap as L.Map;
+      this.requestTiles(mapRef.leafletObject); // not ideal because I found this from experimentation, not documentation
     } else {
       await this.searchAll();
     }
@@ -235,6 +428,7 @@ export default class DiscoverView extends Vue {
     if (!beforeId) {
       // this was an initial search so clear any previous results
       this.projects = [];
+      this.userProfiles = [];
     }
 
     let queryParams = "claimContents=" + encodeURIComponent(this.searchTerms);
@@ -243,64 +437,60 @@ export default class DiscoverView extends Vue {
       queryParams = queryParams + `&beforeId=${beforeId}`;
     }
 
+    const endpoint = this.isProjectsActive
+      ? this.apiServer + "/api/v2/report/plans"
+      : this.partnerApiServer + "/api/partner/userProfile";
+
     try {
       this.isLoading = true;
-      const response = await fetch(
-        this.apiServer + "/api/v2/report/plans?" + queryParams,
-        {
+      const response = await fetch(endpoint + "?" + queryParams, {
         method: "GET",
         headers: await getHeaders(this.activeDid),
-        },
-      );
+      });
 
       if (response.status !== 200) {
         const details = await response.text();
-        console.error("Problem with full search:", details);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: `There was a problem accessing the server. Try again later.`,
-          },
-          -1,
-        );
-
         throw details;
       }
 
       const results = await response.json();
 
+      if (this.isProjectsActive) {
+        this.userProfiles = [];
         const plans: PlanData[] = results.data;
         if (plans) {
-        for (const plan of plans) {
-          const { name, description, handleId, image, issuerDid, rowid } = plan;
-          this.projects.push({
-            name,
-            description,
-            handleId,
-            image,
-            issuerDid,
-            rowid,
-          });
-        }
+          this.projects.push(...plans);
           this.remoteCount = this.projects.length;
         } else {
           throw JSON.stringify(results);
         }
+      } else {
+        this.projects = [];
+        const profiles: UserProfile[] = results.data;
+        if (profiles) {
+          this.userProfiles.push(...profiles);
+          this.remoteCount = this.userProfiles.length;
+        } else {
+          throw JSON.stringify(results);
+        }
+      }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
-      console.error("Error with feed load:", e);
+      console.error("Error with search all:", e);
       // this sometimes gives different information
-      console.error("Error with feed load (error added): " + e);
+      console.error("Error with search all (error added): " + e);
       this.$notify(
         {
           group: "alert",
           type: "danger",
-          title: "Error",
-          text: e.userMessage || "There was a problem retrieving projects.",
+          title: "Error Searching",
+          text:
+            e.userMessage ||
+            "There was a problem retrieving " +
+              (this.isProjectsActive ? "projects" : "profiles") +
+              ".",
         },
-        -1,
+        5000,
       );
     } finally {
       this.isLoading = false;
@@ -310,14 +500,20 @@ export default class DiscoverView extends Vue {
   public async searchLocal(beforeId?: string) {
     this.resetCounts();
 
-    if (!this.searchBox) {
+    const searchBox =
+      (this.isMappedActive && this.tempSearchBox) ||
+      (this.isLocalActive && this.searchBox?.bbox);
+
+    if (!searchBox) {
       this.projects = [];
+      this.userProfiles = [];
       return;
     }
 
     if (!beforeId) {
       // this was an initial search so clear any previous results
       this.projects = [];
+      this.userProfiles = [];
     }
 
     const claimContents =
@@ -325,74 +521,68 @@ export default class DiscoverView extends Vue {
 
     let queryParams = [
       claimContents,
-      "minLocLat=" + this.searchBox.bbox.minLat,
-      "maxLocLat=" + this.searchBox.bbox.maxLat,
-      "westLocLon=" + this.searchBox.bbox.westLong,
-      "eastLocLon=" + this.searchBox.bbox.eastLong,
+      "minLocLat=" + searchBox.minLat,
+      "maxLocLat=" + searchBox.maxLat,
+      "minLocLon=" + searchBox.westLong,
+      "maxLocLon=" + searchBox.eastLong,
     ].join("&");
 
     if (beforeId) {
       queryParams = queryParams + `&beforeId=${beforeId}`;
     }
 
+    const endpoint = this.isProjectsActive
+      ? this.apiServer + "/api/v2/report/plansByLocation"
+      : this.partnerApiServer + "/api/partner/userProfile";
+
     try {
       this.isLoading = true;
-      const response = await fetch(
-        this.apiServer + "/api/v2/report/plansByLocation?" + queryParams,
-        {
+      const response = await fetch(endpoint + "?" + queryParams, {
         method: "GET",
         headers: await getHeaders(this.activeDid),
-        },
-      );
+      });
 
       if (response.status !== 200) {
         const details = await response.text();
-        console.error("Problem with nearby search:", details);
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "There was a problem accessing the server. Try again later.",
-          },
-          -1,
-        );
-        throw await response.text();
+        throw details;
       }
 
       const results = await response.json();
 
-      if (results.data) {
-        if (beforeId) {
+      if (this.isProjectsActive) {
+        this.userProfiles = [];
         const plans: PlanData[] = results.data;
-          for (const plan of plans) {
-            const { name, description, handleId, issuerDid, rowid } = plan;
-            this.projects.push({
-              name,
-              description,
-              handleId,
-              issuerDid,
-              rowid,
-            });
-          }
-        } else {
-          this.projects = results.data;
-        }
+        if (plans) {
+          this.projects.push(...plans);
           this.localCount = this.projects.length;
         } else {
           throw JSON.stringify(results);
         }
+      } else {
+        this.projects = [];
+        const profiles: UserProfile[] = results.data;
+        if (profiles) {
+          this.userProfiles.push(...profiles);
+          this.localCount = this.userProfiles.length;
+        } else {
+          throw JSON.stringify(results);
+        }
+      }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
-      console.error("Error with feed load:", e);
+      console.error("Error with search local:", e);
       this.$notify(
         {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: e.userMessage || "There was a problem retrieving projects.",
+          text:
+            e.userMessage ||
+            "There was a problem retrieving " +
+              (this.isProjectsActive ? "projects" : "profiles") +
+              ".",
         },
-        -1,
+        5000,
       );
     } finally {
       this.isLoading = false;
@@ -404,25 +594,156 @@ export default class DiscoverView extends Vue {
    * @param payload is the flag from the InfiniteScroll indicating if it should load
    **/
   async loadMoreData(payload: boolean) {
-    if (this.projects.length > 0 && payload) {
+    if (payload) {
+      if (this.isProjectsActive && this.projects.length > 0) {
         const latestProject = this.projects[this.projects.length - 1];
-      if (this.isLocalActive) {
-        this.searchLocal(latestProject["rowid"]);
-      } else if (this.isRemoteActive) {
-        this.searchAll(latestProject["rowid"]);
+        if (this.isLocalActive || this.isMappedActive) {
+          this.searchLocal(latestProject.rowId);
+        } else if (this.isAnywhereActive) {
+          this.searchAll(latestProject.rowId);
+        }
+      } else if (this.isPeopleActive && this.userProfiles.length > 0) {
+        const latestProfile = this.userProfiles[this.userProfiles.length - 1];
+        if (this.isLocalActive || this.isMappedActive) {
+          this.searchLocal(latestProfile.rowId || "");
+        } else if (this.isAnywhereActive) {
+          this.searchAll(latestProfile.rowId || "");
+        }
       }
     }
   }
 
-  /**
-   * Handle clicking on a project entry found in the list
-   * @param id of the project
-   **/
-  onClickLoadProject(id: string) {
-    const route = {
-      path: "/project/" + encodeURIComponent(id),
+  clearMarkers() {
+    Object.values(this.markers).forEach((marker) => marker.remove());
+    this.markers = {};
+  }
+
+  async onMapReady(map: L.Map) {
+    // doing this here instead of on the l-map element avoids a recentering after a drag then zoom at startup
+    map.setView([this.localCenterLat, this.localCenterLong], 2);
+    this.requestTiles(map);
+  }
+
+  // Tried but failed to use other vue-leaflet methods update:zoom and update:bounds
+  // To access the from this.$refs, use this.$refs.projectMap.leafletObject (or maybe mapObject)
+
+  onMoveStart(/* event: L.LocationEvent */) {
+    // don't remove markers because they follow the map when moving (and the experience is jarring)
+  }
+
+  async onMoveEnd(event: L.LocationEvent) {
+    if (this.zoomedSoDoNotMove) {
+      // since a zoom triggers a moveend, too, don't duplicate a tile request
+      this.zoomedSoDoNotMove = false;
+    } else {
+      // not part of a zoom so request tiles
+      await this.requestTiles(event.target);
+    }
+  }
+
+  onZoomStart(/* event: L.LocationEvent */) {
+    // remove markers because otherwise they jump around at zoom end
+    this.clearMarkers();
+
+    this.zoomedSoDoNotMove = true;
+  }
+
+  async onZoomEnd(event: L.LocationEvent) {
+    await this.requestTiles(event.target);
+  }
+
+  async requestTiles(targetMap: L.Map) {
+    try {
+      const bounds = targetMap.getBounds();
+      const queryParams = [
+        "minLocLat=" + bounds?.getSouthWest().lat,
+        "maxLocLat=" + bounds?.getNorthEast().lat,
+        "westLocLon=" + bounds?.getSouthWest().lng,
+        "eastLocLon=" + bounds?.getNorthEast().lng,
+      ].join("&");
+      const endpoint = this.isProjectsActive
+        ? this.apiServer + "/api/v2/report/planCountsByBBox"
+        : this.partnerApiServer + "/api/partner/userProfileCountsByBBox";
+      const response = await fetch(endpoint + "?" + queryParams);
+      if (response.status === 200) {
+        this.clearMarkers();
+        const results = await response.json();
+        if (results.data?.tiles?.length > 0) {
+          for (const tile: Tile of results.data.tiles) {
+            const pinLat = (tile.minFoundLat + tile.maxFoundLat) / 2;
+            const pinLon = (tile.minFoundLon + tile.maxFoundLon) / 2;
+            const numberIcon = L.divIcon({
+              className: "numbered-marker",
+              html: `<strong>${tile.recordCount}</strong>`,
+              iconSize: [24, 24],
+              // Why isn't this showing?
+              iconAnchor: [12, 12], // coordinates of the tip of the icon relative to the top-left corner of the icon
+            });
+            const marker = L.marker([pinLat, pinLon], { icon: numberIcon });
+            marker.addTo(targetMap);
+            marker.on("click", () => {
+              this.tempSearchBox = {
+                minLat: tile.minFoundLat,
+                maxLat: tile.maxFoundLat,
+                westLong: tile.minFoundLon,
+                eastLong: tile.maxFoundLon,
               };
-    (this.$router as Router).push(route);
+              this.searchLocal();
+            });
+            this.markers[
+              "" +
+                tile.indexLat +
+                "X" +
+                tile.indexLon +
+                "_" +
+                tile.minFoundLat +
+                "X" +
+                tile.minFoundLon +
+                "-" +
+                tile.maxFoundLat +
+                "X" +
+                tile.maxFoundLon
+            ] = marker;
+          }
+        }
+      } else {
+        throw {
+          message: "Got an error loading projects on the map.",
+          response: {
+            status: response.status,
+            statusText: response.statusText,
+            url: response.url,
+          },
+        };
+      }
+    } catch (e) {
+      logConsoleAndDb(
+        "Error loading projects on the map: " + errorStringForLog(e),
+        true,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Map Error",
+          text: "There was a problem loading projects on the map.",
+        },
+        3000,
+      );
+    }
+  }
+
+  /**
+   * Handle clicking on a project or profile entry found in the list
+   * @param id of the project or profile
+   **/
+  onClickLoadItem(id: string) {
+    const route = {
+      path: this.isProjectsActive
+        ? "/project/" + encodeURIComponent(id)
+        : "/userProfile/" + encodeURIComponent(id),
+    };
+    this.$router.push(route);
   }
 
   public computedLocalTabStyleClassNames() {
@@ -443,6 +764,24 @@ export default class DiscoverView extends Vue {
     };
   }
 
+  public computedMappedTabStyleClassNames() {
+    return {
+      "inline-block": true,
+      "py-3": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
+      active: this.isMappedActive,
+      "text-black": this.isMappedActive,
+      "border-black": this.isMappedActive,
+      "font-semibold": this.isMappedActive,
+
+      "text-blue-600": !this.isMappedActive,
+      "border-transparent": !this.isMappedActive,
+      "hover:border-slate-400": !this.isMappedActive,
+    };
+  }
+
   public computedRemoteTabStyleClassNames() {
     return {
       "inline-block": true,
@@ -450,15 +789,67 @@ export default class DiscoverView extends Vue {
       "rounded-t-lg": true,
       "border-b-2": true,
 
-      active: this.isRemoteActive,
-      "text-black": this.isRemoteActive,
-      "border-black": this.isRemoteActive,
-      "font-semibold": this.isRemoteActive,
+      active: this.isAnywhereActive,
+      "text-black": this.isAnywhereActive,
+      "border-black": this.isAnywhereActive,
+      "font-semibold": this.isAnywhereActive,
 
-      "text-blue-600": !this.isRemoteActive,
-      "border-transparent": !this.isRemoteActive,
-      "hover:border-slate-400": !this.isRemoteActive,
+      "text-blue-600": !this.isAnywhereActive,
+      "border-transparent": !this.isAnywhereActive,
+      "hover:border-slate-400": !this.isAnywhereActive,
+    };
+  }
+
+  public computedProjectsTabStyleClassNames() {
+    return {
+      "inline-block": true,
+      "py-3": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
+      active: this.isProjectsActive,
+      "text-black": this.isProjectsActive,
+      "border-black": this.isProjectsActive,
+      "font-semibold": this.isProjectsActive,
+
+      "text-blue-600": !this.isProjectsActive,
+      "border-transparent": !this.isProjectsActive,
+      "hover:border-slate-400": !this.isProjectsActive,
+    };
+  }
+
+  public computedPeopleTabStyleClassNames() {
+    return {
+      "inline-block": true,
+      "py-3": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
+      active: this.isPeopleActive,
+      "text-black": this.isPeopleActive,
+      "border-black": this.isPeopleActive,
+      "font-semibold": this.isPeopleActive,
+
+      "text-blue-600": !this.isPeopleActive,
+      "border-transparent": !this.isPeopleActive,
+      "hover:border-slate-400": !this.isPeopleActive,
     };
   }
 }
 </script>
+<style>
+.numbered-marker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 14px;
+  font-weight: bold;
+  color: white;
+  background: blue;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 2px solid white;
+}
+</style>

src/views/GiftedDetailsView.vue

@@ -39,7 +39,7 @@
             ? fulfillsProjectName
             : givenToRecipient
               ? recipientName
-              : "someone unidentified"
+              : "someone not named"
         }}</span
       >
     </h1>
@@ -95,7 +95,37 @@
     </div>
     <ImageMethodDialog ref="imageDialog" />
 
-    <div class="h-7 mt-4 flex">
+    <div class="mt-4 flex justify-between gap-2">
+      <!-- First Column for Giver -->
+      <div class="flex-grow border border-slate-400 p-2 rounded-md">
+        <div class="flex">
+          <input
+            v-if="giverDid && !providedByProject"
+            type="checkbox"
+            class="h-6 w-6 mr-2"
+            v-model="providedByGiver"
+          />
+          <fa
+            v-else
+            icon="square"
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
+          />
+          <label class="text-sm mt-1">
+            {{
+              giverDid
+                ? "This was provided by " + giverName + "."
+                : "No named individual gave."
+            }}
+          </label>
+          <fa
+            v-if="!giverDid || providedByProject"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserOfGiver()"
+          />
+        </div>
+
+        <div class="flex">
           <input
             v-if="providerProjectId && !providedByGiver"
             type="checkbox"
@@ -105,41 +135,31 @@
           <fa
             v-else
             icon="square"
-        class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
-        @click="notifyUserOfProvidingProject()"
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
           />
           <label class="text-sm mt-1">
             {{
               providerProjectId
-            ? "This was provided by " + providerProjectName
-            : "This was not provided by a project"
+                ? "This was provided by " + providerProjectName + "."
+                : "This was not provided by a project."
             }}
           </label>
-    </div>
-
-    <div class="h-7 mt-4 flex">
-      <input
-        v-if="fulfillsProjectId && !givenToRecipient"
-        type="checkbox"
-        class="h-6 w-6 mr-2"
-        v-model="givenToProject"
-      />
           <fa
-        v-else
-        icon="square"
-        class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
-        @click="notifyUserFulfillsProject()"
+            v-if="!providerProjectId || providedByGiver"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserOfProvidingProject()"
           />
-      <label class="text-sm mt-1">
-        {{
-          fulfillsProjectId
-            ? "This was given to " + fulfillsProjectName
-            : "No recipient project was chosen"
-        }}
-      </label>
+        </div>
       </div>
 
-    <div class="h-7 mt-4 flex">
+      <div class="flex-shrink flex justify-center items-center">
+        <fa icon="arrow-right" class="fa-fw h-7" />
+      </div>
+
+      <!-- Third Column for Recipient -->
+      <div class="flex-grow border border-slate-400 p-2 rounded-md">
+        <div class="flex">
           <input
             v-if="recipientDid && !givenToProject"
             type="checkbox"
@@ -149,19 +169,53 @@
           <fa
             v-else
             icon="square"
-        class="bg-slate-500 text-slate-500 h-5 w-5 px-0.5 py-0.5 mr-2 rounded"
-        @click="notifyUserOfRecipient()"
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
           />
           <label class="text-sm mt-1">
             {{
               recipientDid
-            ? "This was given to " + recipientName
-            : "No recipient was chosen."
+                ? "This was given to " + recipientName + "."
+                : "No individual benefitted."
             }}
           </label>
+          <fa
+            v-if="!recipientDid || givenToProject"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserOfRecipient()"
+          />
         </div>
 
-    <div class="mt-4 flex">
+        <div class="flex">
+          <input
+            v-if="fulfillsProjectId && !givenToRecipient"
+            type="checkbox"
+            class="h-6 w-6 mr-2"
+            v-model="givenToProject"
+          />
+          <fa
+            v-else
+            icon="square"
+            class="mr-2 bg-white text-white h-5 w-5 px-0.5 py-0.5 rounded-sm"
+          />
+          <label class="text-sm mt-1">
+            {{
+              fulfillsProjectId
+                ? "This was given to " + fulfillsProjectName + ". "
+                : "No project benefitted."
+            }}
+          </label>
+          <fa
+            v-if="!fulfillsProjectId || givenToRecipient"
+            icon="info-circle"
+            class="-mt-1 bg-white text-slate-500 h-5 w-5 px-0.5 py-0.5 rounded-sm"
+            @click="notifyUserFulfillsProject()"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-8 flex">
       <input type="checkbox" class="h-6 w-6 mr-2" v-model="isTrade" />
       <label class="text-sm mt-1">This was a trade (not a gift)</label>
     </div>
@@ -176,7 +230,7 @@
         }"
         class="text-blue-500"
       >
-        Edit & Submit Raw
+        Edit Raw Data
       </router-link>
     </div>
 
@@ -213,7 +267,7 @@ import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import {
   createAndSubmitGive,
   didInfo,
@@ -225,7 +279,7 @@ import {
   hydrateGive,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { Contact } from "@/db/tables/contacts";
+import { retrieveAccountDids } from "@/libs/util";
 
 @Component({
   components: {
@@ -247,7 +301,7 @@ export default class GiftedDetails extends Vue {
   fulfillsProjectName = "a project";
   givenToProject = false; // basically static, based on input; if we allow changing then let's fix things (see below)
   givenToRecipient = false; // basically static, based on input; if we allow changing then let's fix things (see below)
-  giverDid: string | undefined;
+  giverDid = "";
   giverName = "";
   hideBackButton = false;
   imageUrl = "";
@@ -378,17 +432,12 @@ export default class GiftedDetails extends Vue {
     this.apiServer = settings.apiServer || "";
     this.activeDid = settings.activeDid || "";
 
-    let allContacts: Contact[] = [];
-    let allMyDids: string[] = [];
     if (
       (this.giverDid && !this.giverName) ||
       (this.recipientDid && !this.recipientName)
     ) {
-      allContacts = await db.contacts.toArray();
-
-      await accountsDB.open();
-      const allAccounts = await accountsDB.accounts.toArray();
-      allMyDids = allAccounts.map((acc) => acc.did);
+      const allContacts = await db.contacts.toArray();
+      const allMyDids = await retrieveAccountDids();
       if (this.giverDid && !this.giverName) {
         this.giverName = didInfo(
           this.giverDid,
@@ -602,6 +651,55 @@ export default class GiftedDetails extends Vue {
     await this.recordGive();
   }
 
+  notifyUserOfGiver() {
+    if (!this.giverDid) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Go To The Contacts Page",
+          text: "To assign a giver, you must open this page from a contact.",
+        },
+        3000,
+      );
+    } else {
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Unavailable",
+          text: "You cannot assign both a giver and a project.",
+        },
+        3000,
+      );
+    }
+  }
+
+  notifyUserOfRecipient() {
+    if (!this.recipientDid) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Go To The Contacts Page",
+          text: "To assign to a recipient, you must open this page from a contact.",
+        },
+        3000,
+      );
+    } else {
+      // must be because givenToProject is true
+      this.$notify(
+        {
+          group: "alert",
+          type: "warning",
+          title: "Unavailable",
+          text: "You cannot assign both to a recipient and to a project.",
+        },
+        3000,
+      );
+    }
+  }
+
   notifyUserOfProvidingProject() {
     // we're here because they clicked and either there is no provider project or there is a giver chosen
     if (!this.providerProjectId) {
@@ -609,7 +707,7 @@ export default class GiftedDetails extends Vue {
         {
           group: "alert",
           type: "warning",
-          title: "Error",
+          title: "Go To The Project Page",
           text: "To select a project as a provider, you must open this page through a project.",
         },
         3000,
@@ -620,7 +718,7 @@ export default class GiftedDetails extends Vue {
         {
           group: "alert",
           type: "warning",
-          title: "Error",
+          title: "Unavailable",
           text: "You cannot select both a giving project and person.",
         },
         3000,
@@ -635,7 +733,7 @@ export default class GiftedDetails extends Vue {
         {
           group: "alert",
           type: "warning",
-          title: "Error",
+          title: "Go To The Project Page",
           text: "To assign to a project, you must open this page through a project.",
         },
         3000,
@@ -646,7 +744,7 @@ export default class GiftedDetails extends Vue {
         {
           group: "alert",
           type: "warning",
-          title: "Error",
+          title: "Unavailable",
           text: "You cannot assign both to a project and to a recipient.",
         },
         3000,
@@ -654,31 +752,6 @@ export default class GiftedDetails extends Vue {
     }
   }
 
-  notifyUserOfRecipient() {
-    if (!this.recipientDid) {
-      this.$notify(
-        {
-          group: "alert",
-          type: "warning",
-          title: "Error",
-          text: "To assign to a recipient, you must open this page from a contact.",
-        },
-        3000,
-      );
-    } else {
-      // must be because givenToProject is true
-      this.$notify(
-        {
-          group: "alert",
-          type: "warning",
-          title: "Error",
-          text: "You cannot assign both to a recipient and to a project.",
-        },
-        3000,
-      );
-    }
-  }
-
   /**
    *
    * @param giverDid may be null
@@ -688,6 +761,7 @@ export default class GiftedDetails extends Vue {
    */
   public async recordGive() {
     try {
+      const giverDid = this.providedByGiver ? this.giverDid : undefined;
       const recipientDid = this.givenToRecipient
         ? this.recipientDid
         : undefined;
@@ -702,7 +776,7 @@ export default class GiftedDetails extends Vue {
           this.apiServer,
           this.prevCredToEdit,
           this.activeDid,
-          this.giverDid,
+          giverDid,
           recipientDid,
           this.description,
           parseFloat(this.amountInput),
@@ -718,7 +792,7 @@ export default class GiftedDetails extends Vue {
           this.axios,
           this.apiServer,
           this.activeDid,
-          this.giverDid,
+          giverDid,
           recipientDid,
           this.description,
           parseFloat(this.amountInput),
@@ -744,7 +818,7 @@ export default class GiftedDetails extends Vue {
             title: "Error",
             text: errorMessage || "There was an error creating the give.",
           },
-          -1,
+          5000,
         );
       } else {
         this.$notify(
@@ -754,7 +828,7 @@ export default class GiftedDetails extends Vue {
             title: "Success",
             text: `That ${this.isTrade ? "trade" : "gift"} was recorded.`,
           },
-          5000,
+          3000,
         );
         localStorage.removeItem("imageUrl");
         if (this.destinationPathAfter) {
@@ -777,19 +851,20 @@ export default class GiftedDetails extends Vue {
           title: "Error",
           text: errorMessage,
         },
-        -1,
+        5000,
       );
     }
   }
 
   constructGiveParam() {
+    const giverDid = this.providedByGiver ? this.giverDid : undefined;
     const recipientDid = this.givenToRecipient ? this.recipientDid : undefined;
     const fulfillsProjectId = this.givenToProject
       ? this.fulfillsProjectId
       : undefined;
     const giveClaim = hydrateGive(
       this.prevCredToEdit?.claim as GiveVerifiableCredential,
-      this.giverDid,
+      giverDid,
       recipientDid,
       this.description,
       parseFloat(this.amountInput),
@@ -837,7 +912,7 @@ export default class GiftedDetails extends Vue {
         title: "Data Sharing",
         text: libsUtil.PRIVACY_MESSAGE,
       },
-      -1,
+      7000,
     );
   }
 }

src/views/HelpNotificationTypesView.vue

@@ -48,10 +48,10 @@
         </p>
         <p>
           This type is not as reliable as a Reminder Notification because mobile devices often suppress
-          such notifications to save battery. (We are working on other ways to notify you more
-          reliably. If you want to quickly check for relevant activity daily, use the Reminder
-          Notification and open the app and look for a large green button that points out new
-          activity that is personal to you.)
+          such notifications to save battery. (If you want to quickly check for relevant activity daily,
+          use the Reminder Notification and open the app and look for a large green button that points out new
+          activity that is personal to you. We are working on other ways to notify you more
+          reliably -- <router-link class="text-blue-500" to="/help">go here to follow us or contact us</router-link>.)
         </p>
       </div>
     </div>

src/views/HelpNotificationsView.vue

@@ -75,6 +75,7 @@
           <button class="text-blue-500" @click="showNotificationChoice()">
             Click here.
           </button>
+          <PushNotificationPermission ref="pushNotificationPermission" />
         </p>
       </div>
 
@@ -193,14 +194,18 @@
       <h2 class="text-xl font-semibold mt-4">Reinstall</h2>
       <div>
         <p>
-          If all else fails, uninstall the app, ensure all the browser tabs with
-          it are closed, and clear out caches and storage.
+          If all else fails, it's best to start over.
         </p>
         <p>
           Of course, you'll want to back up all your data first -- all seeds as
-          well as the contacts & settings -- on the Account
+          well as the contacts & settings -- on the Profile
           <fa icon="circle-user" /> page.
         </p>
+        <p>
+          Here are instructions to uninstall the app and clear out caches and storage.
+          Note that you should first ensure check that the browser tabs with Time Safari are closed.
+          (If any are open then that will interfere with your refresh.)
+        </p>
         <ul class="ml-4 list-disc">
           <li>
             Clear cache.
@@ -304,9 +309,12 @@ import { Component, Vue } from "vue-facing-decorator";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { sendTestThroughPushServer } from "@/libs/util";
+import { DIRECT_PUSH_TITLE, sendTestThroughPushServer } from "@/libs/util";
+import PushNotificationPermission from "@/components/PushNotificationPermission.vue";
+import { db } from "@/db/index";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
-@Component({ components: { QuickNav } })
+@Component({ components: { PushNotificationPermission, QuickNav } })
 export default class HelpNotificationsView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
@@ -323,10 +331,10 @@ export default class HelpNotificationsView extends Vue {
   }
 
   alertWebPushSubscription() {
-    console.log(
-      "Web push subscription:",
-      JSON.parse(JSON.stringify(this.subscriptionJSON)), // gives more info than plain console logging
-    );
+    // console.log(
+    //   "Web push subscription:",
+    //   JSON.parse(JSON.stringify(this.subscriptionJSON)), // gives more info than plain console logging
+    // );
     alert(JSON.stringify(this.subscriptionJSON));
   }
 
@@ -340,7 +348,7 @@ export default class HelpNotificationsView extends Vue {
           // Note that this exact verbiage shows in help text.
           text: "You must enable notifications before testing the web push.",
         },
-        -1,
+        5000,
       );
       return;
     }
@@ -357,7 +365,7 @@ export default class HelpNotificationsView extends Vue {
             "Check your device for the test web push message" +
             (skipFilter ? "." : " if there are new items in your feed."),
         },
-        -1,
+        5000,
       );
     } catch (error) {
       console.error("Got an error sending test notification:", error);
@@ -368,7 +376,7 @@ export default class HelpNotificationsView extends Vue {
           title: "Error Sending Test",
           text: "Got an error sending the test web push notification.",
         },
-        -1,
+        5000,
       );
     }
   }
@@ -401,20 +409,25 @@ export default class HelpNotificationsView extends Vue {
             title: "Failed",
             text: "Got an error sending a notification.",
           },
-          -1,
+          5000,
         );
       });
   }
 
   showNotificationChoice() {
-    this.$notify(
-      {
-        group: "modal",
-        type: "notification-permission",
-        title: "", // unused, only here to satisfy type check
-        text: "", // unused, only here to satisfy type check
+    (this.$refs.pushNotificationPermission as PushNotificationPermission).open(
+      DIRECT_PUSH_TITLE,
+      async (success: boolean, timeText: string, message?: string) => {
+        if (success) {
+          await db.settings.update(MASTER_SETTINGS_KEY, {
+            notifyingReminderMessage: message,
+            notifyingReminderTime: timeText,
+          });
+          this.notifyingReminder = true;
+          this.notifyingReminderMessage = message || "";
+          this.notifyingReminderTime = timeText;
+        }
       },
-      -1,
     );
   }
 }

src/views/HelpOnboardingView.vue

@@ -96,7 +96,7 @@
         <p>
           Enable notifications from the Account page <fa icon="circle-user" />.
           Those notifications might show up on the device depending on your settings.
-          For the most reliable habits, people should own alarm or some other ritual to look every day.
+          For the most reliable habits, set an alarm or do some other ritual to record gratitude every day.
         </p>
       </div>
 

src/views/HelpView.vue

@@ -383,7 +383,7 @@
         How do I access even more functionality?
       </h2>
       <p>
-        There is an "Advanced" section at the bottom of the Account
+        There is an "Advanced" section at the bottom of the Profile
         <fa icon="circle-user" /> page.
       </p>
       <p>
@@ -422,19 +422,19 @@
       </p>
 
       <h2 class="text-xl font-semibold">
-        My app is misbehaving, like showing me a blank screen or failing to show a feed.
+        This app is misbehaving, like showing me a blank screen or failing to show my personal data.
         What can I do?
       </h2>
       <p>
         First, note that clearing the cache will clear all your identity and contact info,
-        so we recommend doing other things first (unless you know you have your backups ready).
+        so we recommend doing other things first -- and only clearing when have your backups ready.
       </p>
       <ul class="list-disc list-outside ml-4">
         <li>
           Drag down on the screen to refresh it; do that multiple times, because
-          it sometimes takes multiple tries for the app to refresh to the current version.
+          it sometimes takes multiple tries for the app to refresh to the latest version.
           You can see the version information at the bottom of this page; the best
-          way to determine the current version is to open this page in an incognito
+          way to determine the latest version is to open this page in an incognito/private
           browser window and look at the version there.
         </li>
         <li>
@@ -480,7 +480,7 @@
 
       <h2 class="text-xl font-semibold">What are the terms & conditions and the privacy policy?</h2>
       <p style="display:inline; align-items: center">
-        This work is public domain. If you like rules, reference
+        This work is public domain. (If you like rules, reference
         <a href="http://creativecommons.org/publicdomain/zero/1.0?ref=chooser-v1" target="_blank" rel="license noopener noreferrer">
           <span class="text-blue-500 mr-1">CC0 1.0</span>
           <img
@@ -496,14 +496,32 @@
               style="display: inline"
           />
         </a>
+        .) This is offered freely, with the hope that it helps but without any warranty or guarantee;
+        if it helps you then enjoy using it,
+        but if you may try to forcibly collect damages for things you think it should do (or not do)
+        then don't use it.
         <br />
-        For notifications, this service stores push token data; that can be revoked at any time
-        by disabling notifications on the Account <fa icon="circle-user" class="fa-fw" /> page.
-        <br />
+        As for data & privacy:
+        <ul class="list-disc list-outside ml-4">
+          <li>
+            If using notifications, a server stores push token data. That can be revoked at any time
+            by disabling notifications on the Profile <fa icon="circle-user" class="fa-fw" /> page.
+          </li>
+          <li>
+            If sending images, a server stores them, too. They can be removed by editing the claim
+            and deleting them.
+          </li>
+          <li>
+            If sending other partner system data (eg. to Trustroots) a public key and message
+            data are stored on a server. Those can be removed via direct personal request.
+          </li>
+          <li>
             For all other claim data,
             <a href="https://endorser.ch/privacy-policy" target="_blank" class="text-blue-500">
               the Endorser Service has this Privacy Policy.
             </a>
+          </li>
+        </ul>
       </p>
 
       <h2 class="text-xl font-semibold">How can I contribute?</h2>
@@ -520,9 +538,9 @@
           class="text-blue-500 ml-2"
         >
           bc1q90v4ted6cpt63tjfh2lvd5xzfc67sd4g9w8xma
-          <fa v-show="!showDidCopy" icon="copy" class="text-slate-400 fa-fw" />
+          <fa v-show="!showDidCopy" icon="copy" class="text-sm text-slate-400 fa-fw" />
+          <fa v-show="showDidCopy" icon="circle-check" class="text-sm text-green-500 fa-fw"/>
         </button>
-        <span v-show="showDidCopy" class="ml-2 text-sm text-green-500">Copied</span>
         You can donate online via
         <a href="https://www.patreon.com/TimeSafari" target="_blank" class="text-blue-500">Patreon here</a>.
         For other donations, contact us.
@@ -541,7 +559,7 @@
       <p>{{ package.version }} ({{ commitHash }})</p>
 
       <h2 class="text-xl font-semibold">
-        I have other questions, like getting a new account or removing all my data from the public ledger.
+        I have other questions or feedback, like getting a new profile or removing my data or requesting an improvement.
       </h2>
       <p>
         Contact us at

src/views/HomeView.vue

@@ -73,7 +73,8 @@
     <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" /> Loading&hellip;
+          <fa icon="spinner" class="fa-spin-pulse" />
+          Loading&hellip;
         </p>
       </div>
 
@@ -128,10 +129,10 @@
               <li @click="openDialog()">
                 <img
                   src="../assets/blank-square.svg"
-                  class="mx-auto border border-slate-300 rounded-md mb-1"
+                  class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
                 />
                 <h3
-                  class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+                  class="text-xs text-blue-500 italic font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
                 >
                   Unnamed/Unknown
                 </h3>
@@ -147,10 +148,10 @@
                 <EntityIcon
                   :contact="contact"
                   :iconSize="64"
-                  class="mx-auto border border-slate-300 rounded-md mb-1 cursor-pointer"
+                  class="mx-auto border border-blue-500 rounded-md mb-1 cursor-pointer"
                 />
                 <h3
-                  class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
+                  class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
                 >
                   {{ contact.name || contact.did }}
                 </h3>
@@ -159,7 +160,7 @@
                 <router-link
                   v-if="allContacts.length >= 6"
                   :to="{ name: 'contact-gift' }"
-                  class="flex align-bottom text-xs text-blue-500 mt-12"
+                  class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
                 >
                   ... or someone else...
                 </router-link>
@@ -174,6 +175,16 @@
     <GiftedPrompts ref="giftedPrompts" />
     <FeedFilters ref="feedFilters" />
 
+    <div class="relative">
+      <button
+        v-if="isRegistered"
+        class="absolute right-6 bottom-0 transform translate-y-1/2 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full"
+        @click="openDialog()"
+      >
+        <fa icon="plus" class="fa-fw" />
+      </button>
+    </div>
+
     <!-- Results List -->
     <div class="bg-slate-100 rounded-md px-4 py-3 mt-4 mb-4">
       <div class="flex items-center mb-4">
@@ -270,7 +281,7 @@
                   />
                 </span>
               </span>
-              <span class="col-span-10 justify-self-stretch">
+              <span class="col-span-10 justify-self-stretch overflow-hidden">
                 <!-- show giver and/or receiver profiles... which seemed like a good idea but actually adds clutter
                 <span
                   v-if="
@@ -304,7 +315,7 @@
                   />
                 </span>
                 -->
-                <span class="pl-2">
+                <span class="pl-2 block break-words">
                   {{ giveDescription(record) }}
                 </span>
                 <a @click="onClickLoadClaim(record.jwtId)">
@@ -335,10 +346,18 @@
                 </router-link>
               </span>
             </div>
-            <div v-if="record.image" class="flex justify-center">
-              <a :href="record.image" target="_blank">
-                <img :src="record.image" class="h-24 mt-2 rounded-xl" />
-              </a>
+            <div v-if="record.image" class="w-full">
+              <div
+                class="cursor-pointer"
+                @click="openImageViewer(record.image)"
+              >
+                <img
+                  :src="record.image"
+                  class="w-full aspect-[3/2] object-cover rounded-xl mt-2"
+                  alt="shared content"
+                  @load="cacheImageData($event, record.image)"
+                />
+              </div>
             </div>
           </li>
         </ul>
@@ -355,6 +374,14 @@
       </div>
     </div>
   </section>
+
+  <ChoiceButtonDialog ref="choiceButtonDialog" />
+
+  <ImageViewer
+    :image-url="selectedImage"
+    :image-data="selectedImageData"
+    v-model:is-open="isImageViewerOpen"
+  />
 </template>
 
 <script lang="ts">
@@ -372,14 +399,16 @@ import OnboardingDialog from "@/components/OnboardingDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import UserNameDialog from "@/components/UserNameDialog.vue";
+import ChoiceButtonDialog from "@/components/ChoiceButtonDialog.vue";
+import ImageViewer from "@/components/ImageViewer.vue";
 import {
   AppString,
   NotificationIface,
   PASSKEYS_ENABLED,
 } from "@/constants/app";
 import {
-  accountsDB,
   db,
+  logConsoleAndDb,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
 } from "@/db/index";
@@ -402,6 +431,7 @@ import {
 } from "@/libs/endorserServer";
 import {
   generateSaveAndActivateIdentity,
+  retrieveAccountDids,
   GiverReceiverInputInfo,
   OnboardPage,
   registerSaveAndActivatePasskey,
@@ -436,9 +466,11 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     GiftedPrompts,
     InfiniteScroll,
     OnboardingDialog,
+    ChoiceButtonDialog,
     QuickNav,
     TopMessage,
     UserNameDialog,
+    ImageViewer,
   },
 })
 export default class HomeView extends Vue {
@@ -473,19 +505,29 @@ export default class HomeView extends Vue {
   }> = [];
   showShortcutBvc = false;
   userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
+  selectedImage = "";
+  selectedImageData: Blob | null = null;
+  isImageViewerOpen = false;
+  imageCache: Map<string, Blob | null> = new Map();
 
   async mounted() {
     try {
-      await accountsDB.open();
-      const allAccounts = await accountsDB.accounts.toArray();
-      if (allAccounts.length > 0) {
-        this.allMyDids = allAccounts.map((acc) => acc.did);
-      } else {
+      try {
+        this.allMyDids = await retrieveAccountDids();
+        if (this.allMyDids.length === 0) {
           this.isCreatingIdentifier = true;
           const newDid = await generateSaveAndActivateIdentity();
           this.isCreatingIdentifier = false;
           this.allMyDids = [newDid];
         }
+      } catch (error) {
+        // continue because we want the feed to work, even anonymously
+        logConsoleAndDb(
+          "Error retrieving all account DIDs on home page:" + error,
+          true,
+        );
+        // some other piece will display an error about personal info
+      }
 
       const settings = await retrieveSettingsForActiveAccount();
       this.apiServer = settings.apiServer || "";
@@ -556,7 +598,7 @@ export default class HomeView extends Vue {
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
-      console.error("Error retrieving settings or feed.", err);
+      logConsoleAndDb("Error retrieving settings or feed: " + err, true);
       this.$notify(
         {
           group: "alert",
@@ -566,7 +608,7 @@ export default class HomeView extends Vue {
             err.userMessage ||
             "There was an error retrieving your settings or the latest activity.",
         },
-        -1,
+        5000,
       );
     }
   }
@@ -753,13 +795,19 @@ export default class HomeView extends Vue {
    */
   async retrieveGives(endorserApiServer: string, beforeId?: string) {
     const beforeQuery = beforeId == null ? "" : "&beforeId=" + beforeId;
+    const doNotShowErrorAgain = !!beforeId; // don't show error again if we're loading more
+    const headers = await getHeaders(
+      this.activeDid,
+      doNotShowErrorAgain ? undefined : this.$notify,
+    );
+    // retrieve headers for this user, but if an error happens then report it but proceed with the fetch with no header
     const response = await fetch(
       endorserApiServer +
         "/api/v2/report/gives?giftNotTrade=true" +
         beforeQuery,
       {
         method: "GET",
-        headers: await getHeaders(this.activeDid),
+        headers: headers,
       },
     );
 
@@ -925,24 +973,38 @@ export default class HomeView extends Vue {
   }
 
   promptForShareMethod() {
-    this.$notify(
-      {
-        group: "modal",
-        type: "confirm",
-        title: "Are you nearby with cameras?",
-        text: "If so, we'll use those with QR codes to share.",
-        onCancel: async () => {},
-        onNo: async () => {
-          (this.$router as Router).push({ name: "share-my-contact-info" });
+    (this.$refs.choiceButtonDialog as ChoiceButtonDialog).open({
+      title: "How can you share your info?",
+      text: "",
+      option1Text: "We are in a meeting together",
+      option2Text: "We are nearby with cameras",
+      option3Text: "We will share some other way",
+      onOption1: () => {
+        (this.$router as Router).push({ name: "onboard-meeting-list" });
       },
-        onYes: async () => {
+      onOption2: () => {
         (this.$router as Router).push({ name: "contact-qr" });
       },
-        noText: "we will share another way",
-        yesText: "we are nearby with cameras",
+      onOption3: () => {
+        (this.$router as Router).push({ name: "share-my-contact-info" });
       },
-      -1,
-    );
+    });
+  }
+
+  async cacheImageData(event: Event, imageUrl: string) {
+    try {
+      // For images that might fail CORS, just store the URL
+      // The Web Share API will handle sharing the URL appropriately
+      this.imageCache.set(imageUrl, null);
+    } catch (error) {
+      console.warn("Failed to cache image:", error);
+    }
+  }
+
+  async openImageViewer(imageUrl: string) {
+    this.selectedImageData = this.imageCache.get(imageUrl) ?? null;
+    this.selectedImage = imageUrl;
+    this.isImageViewerOpen = true;
   }
 }
 </script>

src/views/IdentitySwitcherView.vue

@@ -101,10 +101,15 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { NotificationIface } from "@/constants/app";
-import { db, accountsDB, retrieveSettingsForActiveAccount } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import QuickNav from "@/components/QuickNav.vue";
+import { NotificationIface } from "@/constants/app";
+import {
+  accountsDBPromise,
+  db,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { retrieveAllAccountsMetadata } from "@/libs/util";
 
 @Component({ components: { QuickNav } })
 export default class IdentitySwitcherView extends Vue {
@@ -123,8 +128,7 @@ export default class IdentitySwitcherView extends Vue {
       this.apiServer = settings.apiServer || "";
       this.apiServerInput = settings.apiServer || "";
 
-      await accountsDB.open();
-      const accounts = await accountsDB.accounts.toArray();
+      const accounts = await retrieveAllAccountsMetadata();
       for (let n = 0; n < accounts.length; n++) {
         const acct = accounts[n];
         this.otherIdentities.push({ id: acct.id as string, did: acct.did });
@@ -140,7 +144,7 @@ export default class IdentitySwitcherView extends Vue {
           title: "Error Loading Accounts",
           text: "Clear your cache and start over (after data backup).",
         },
-        -1,
+        5000,
       );
       console.error("Telling user to clear cache at page create because:", err);
     }
@@ -166,7 +170,8 @@ export default class IdentitySwitcherView extends Vue {
         title: "Delete Identity?",
         text: "Are you sure you want to erase this identity? (There is no undo. You may want to select it and back it up just in case.)",
         onYes: async () => {
-          await accountsDB.open();
+          // one of the few times we use accountsDBPromise directly; try to avoid more usage
+          const accountsDB = await accountsDBPromise;
           await accountsDB.accounts.delete(id);
           this.otherIdentities = this.otherIdentities.filter(
             (ident) => ident.id !== id,
@@ -183,7 +188,7 @@ export default class IdentitySwitcherView extends Vue {
         group: "alert",
         type: "warning",
         title: "Cannot Delete",
-        text: "You cannot delete the active identity.",
+        text: "You cannot delete the active identity. Set to another identity or 'no identity' first.",
       },
       3000,
     );

src/views/ImportAccountView.vue

@@ -87,13 +87,18 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
 import { AppString, NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import {
+  accountsDBPromise,
+  db,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import {
   DEFAULT_ROOT_DERIVATION_PATH,
   deriveAddress,
   newIdentifier,
 } from "@/libs/crypto";
+import { retrieveAccountCount } from "@/libs/util";
 
 @Component({
   components: {},
@@ -118,8 +123,7 @@ export default class ImportAccountView extends Vue {
   shouldErase = false;
 
   async created() {
-    await accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
+    this.numAccounts = await retrieveAccountCount();
     // get the server, to help with import on the test server
     const settings = await retrieveSettingsForActiveAccount();
     this.apiServer = settings.apiServer || "";
@@ -148,7 +152,7 @@ export default class ImportAccountView extends Vue {
         this.derivationPath,
       );
 
-      await accountsDB.open();
+      const accountsDB = await accountsDBPromise;
       if (this.shouldErase) {
         await accountsDB.accounts.clear();
       }
@@ -178,7 +182,7 @@ export default class ImportAccountView extends Vue {
             title: "Invalid Mnemonic",
             text: "Please check your mnemonic and try again.",
           },
-          -1,
+          5000,
         );
       } else {
         this.$notify(
@@ -188,7 +192,7 @@ export default class ImportAccountView extends Vue {
             title: "Error",
             text: "Got an error creating that identifier.",
           },
-          -1,
+          5000,
         );
       }
     }

src/views/ImportDerivedAccountView.vue

@@ -33,7 +33,7 @@
           <fa
             v-if="dids[0] == selectedArrayFirstDid"
             icon="circle"
-            class="fa-fw text-blue-400 text-xl mr-3"
+            class="fa-fw text-blue-500 text-xl mr-3"
           ></fa>
           <fa
             v-else
@@ -78,8 +78,9 @@ import {
   newIdentifier,
   nextDerivationPath,
 } from "@/libs/crypto";
-import { accountsDB, db } from "@/db/index";
+import { accountsDBPromise, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { retrieveAllFullyDecryptedAccounts } from "@/libs/util";
 
 @Component({
   components: {},
@@ -90,8 +91,7 @@ export default class ImportAccountView extends Vue {
   selectedArrayFirstDid = "";
 
   async mounted() {
-    await accountsDB.open();
-    const accounts = await accountsDB.accounts.toArray();
+    const accounts = await retrieveAllFullyDecryptedAccounts(); // let's match derived accounts differently so we don't need the private info
     const seedDids: Record<string, Array<string>> = {};
     accounts.forEach((account) => {
       const prevDids: Array<string> = seedDids[account.mnemonic] || [];
@@ -110,11 +110,11 @@ export default class ImportAccountView extends Vue {
   }
 
   public async incrementDerivation() {
-    await accountsDB.open();
     // find the maximum derivation path for the selected DIDs
     const selectedArray: Array<string> =
       this.didArrays.find((dids) => dids[0] === this.selectedArrayFirstDid) ||
       [];
+    const accountsDB = await accountsDBPromise; // let's match derived accounts differently so we don't need the private info
     const allMatchingAccounts = await accountsDB.accounts
       .where("did")
       .anyOf(...selectedArray)

src/views/InviteOneAcceptView.vue

@@ -0,0 +1,169 @@
+<template>
+  <QuickNav selected="Invite" />
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <div
+      v-if="checkingInvite"
+      class="text-lg text-center font-light relative px-7"
+    >
+      <fa icon="spinner" class="fa-spin-pulse" />
+    </div>
+    <div v-else class="text-center mt-4">
+      <p>That invitation did not work.</p>
+      <p class="mt-2">
+        Go back to your invite message and copy the entire text, then paste it
+        here.
+      </p>
+      <p class="mt-2">
+        If the data looks correct, try Chrome. (For example, iOS may have cut
+        off the invite data, or it may have shown a preview that stole your
+        invite.) If it still complains, you may need the person who invited you
+        to send a new one.
+      </p>
+      <textarea
+        v-model="inputJwt"
+        placeholder="Paste invitation..."
+        class="mt-4 border-2 border-gray-300 p-2 rounded"
+        cols="30"
+        @input="() => checkInvite(inputJwt)"
+      />
+      <br />
+      <button
+        @click="() => processInvite(inputJwt, true)"
+        class="ml-2 p-2 bg-blue-500 text-white rounded"
+      >
+        Accept
+      </button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+
+import QuickNav from "@/components/QuickNav.vue";
+import { APP_SERVER, NotificationIface } from "@/constants/app";
+import {
+  db,
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
+import { decodeEndorserJwt } from "@/libs/crypto/vc";
+import { errorStringForLog } from "@/libs/endorserServer";
+import { generateSaveAndActivateIdentity } from "@/libs/util";
+
+@Component({ components: { QuickNav } })
+export default class InviteOneAcceptView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  activeDid: string = "";
+  apiServer: string = "";
+  checkingInvite: boolean = true;
+  inputJwt: string = "";
+
+  async mounted() {
+    this.checkingInvite = true;
+    await db.open();
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+
+    if (!this.activeDid) {
+      this.activeDid = await generateSaveAndActivateIdentity();
+    }
+
+    const jwt = window.location.pathname.substring(
+      "/invite-one-accept/".length,
+    );
+    await this.processInvite(jwt, false);
+
+    this.checkingInvite = false;
+  }
+
+  // process the invite JWT and/or text message containing the URL with the JWT
+  async processInvite(jwtInput: string, notifyOnFailure: boolean) {
+    this.checkingInvite = true;
+
+    try {
+      let jwt: string = jwtInput ?? "";
+
+      // parse the string: extract the URL or JWT if surrounded by spaces
+      // and then extract the JWT from the URL
+      // (For another approach used with contacts, see getContactPayloadFromJwtUrl)
+      const urlMatch = jwtInput.match(/(https?:\/\/[^\s]+)/);
+      if (urlMatch && urlMatch[1]) {
+        // extract the JWT from the URL, meaning any character except "?"
+        const internalMatch = urlMatch[1].match(/\/invite-one-accept\/([^?]+)/);
+        if (internalMatch && internalMatch[1]) {
+          jwt = internalMatch[1];
+        }
+      } else {
+        // extract the JWT (which starts with "ey") if it is surrounded by other input
+        const spaceMatch = jwtInput.match(/(ey[\w.-]+)/);
+        if (spaceMatch && spaceMatch[1]) {
+          jwt = spaceMatch[1];
+        }
+      }
+
+      if (!jwt) {
+        if (notifyOnFailure) {
+          this.$notify(
+            {
+              group: "alert",
+              type: "danger",
+              title: "Missing Invite",
+              text: "There was no invite. Paste the entire text that has the data.",
+            },
+            5000,
+          );
+        }
+      } else {
+        //const payload: JWTPayload =
+        decodeEndorserJwt(jwt);
+
+        // That's good enough for an initial check.
+        // Send them to the contacts page to finish, with inviteJwt in the query string.
+        (this.$router as Router).push({
+          name: "contacts",
+          query: { inviteJwt: jwt },
+        });
+      }
+    } catch (error) {
+      const fullError = "Error accepting invite: " + errorStringForLog(error);
+      logConsoleAndDb(fullError, true);
+      if (notifyOnFailure) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "There was an error processing that invite.",
+          },
+          3000,
+        );
+      }
+    }
+    this.checkingInvite = false;
+  }
+
+  // check the invite JWT
+  async checkInvite(jwtInput: string) {
+    if (
+      jwtInput.endsWith(APP_SERVER) ||
+      jwtInput.endsWith(APP_SERVER + "/") ||
+      jwtInput.endsWith("invite-one-accept") ||
+      jwtInput.endsWith("invite-one-accept/")
+    ) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "That is only part of the invite data; it's missing some at the end. Try another way to get the full data.",
+        },
+        5000,
+      );
+    }
+  }
+}
+</script>

src/views/InviteOneView.vue

@@ -99,7 +99,7 @@
               {{ invite.notes }}
             </td>
             <td class="text-center">
-              {{ invite.expiresAt.substring(0, 10) }}
+              {{ invite.redeemedAt ? "" : invite.expiresAt.substring(0, 10) }}
             </td>
             <td class="text-center">
               {{ invite.redeemedAt?.substring(0, 10) }}
@@ -110,7 +110,7 @@
                 v-if="invite.redeemedBy && !contactsRedeemed[invite.redeemedBy]"
                 icon="plus"
                 class="bg-green-600 text-white px-1 py-1 rounded-full cursor-pointer"
-                @click="addNewContact(invite.redeemedBy)"
+                @click="addNewContact(invite.redeemedBy, invite.notes)"
               />
             </td>
             <td>
@@ -137,8 +137,9 @@ import ContactNameDialog from "@/components/ContactNameDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import InviteDialog from "@/components/InviteDialog.vue";
-import { APP_SERVER, NotificationIface } from "@/constants/app";
-import { db, retrieveSettingsForActiveAccount } from "@/db";
+import { APP_SERVER, AppString, NotificationIface } from "@/constants/app";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
 import { createInviteJwt, getHeaders } from "@/libs/endorserServer";
 
 interface Invite {
@@ -159,7 +160,7 @@ export default class InviteOneView extends Vue {
   invites: Invite[] = [];
   activeDid: string = "";
   apiServer: string = "";
-  contactsRedeemed = {};
+  contactsRedeemed: { [key: string]: Contact } = {};
   isRegistered: boolean = false;
   showAppleWarning = false;
 
@@ -178,12 +179,12 @@ export default class InviteOneView extends Vue {
       );
       this.invites = response.data.data;
 
-      const baseContacts = await db.contacts.toArray();
+      const baseContacts: Contact[] = await db.contacts.toArray();
       for (const invite of this.invites) {
         const contact = baseContacts.find(
           (contact) => contact.did === invite.redeemedBy,
         );
-        if (contact) {
+        if (contact && invite.redeemedBy) {
           this.contactsRedeemed[invite.redeemedBy] = contact;
         }
       }
@@ -209,14 +210,16 @@ export default class InviteOneView extends Vue {
   getTruncatedRedeemedBy(redeemedBy: string | null): string {
     if (!redeemedBy) return "";
     if (this.contactsRedeemed[redeemedBy]) {
-      return this.contactsRedeemed[redeemedBy].name;
+      return (
+        this.contactsRedeemed[redeemedBy].name || AppString.NO_CONTACT_NAME
+      );
     }
     if (redeemedBy.length <= 19) return redeemedBy;
     return `${redeemedBy.slice(0, 13)}...${redeemedBy.slice(-3)}`;
   }
 
   inviteLink(jwt: string): string {
-    return APP_SERVER + "/contacts?inviteJwt=" + jwt;
+    return APP_SERVER + "/invite-one-accept/" + jwt;
   }
 
   copyInviteAndNotify(inviteId: string, jwt: string) {
@@ -251,7 +254,8 @@ export default class InviteOneView extends Vue {
     );
   }
 
-  lookForErrorAndNotify(error, title: string, defaultMessage: string) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  lookForErrorAndNotify(error: any, title: string, defaultMessage: string) {
     console.error(title, "-", error);
     let message = defaultMessage;
     if (error.response && error.response.data && error.response.data.error) {
@@ -301,14 +305,15 @@ export default class InviteOneView extends Vue {
             { inviteJwt: inviteJwt, notes: notes },
             { headers },
           );
-          this.invites.push({
+          const newInvite = {
             inviteIdentifier: inviteIdentifier,
             expiresAt: expiresAt,
             jwt: inviteJwt,
             notes: notes,
             redeemedAt: null,
             redeemedBy: null,
-          });
+          };
+          this.invites = [newInvite, ...this.invites];
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
         } catch (error: any) {
           this.lookForErrorAndNotify(
@@ -321,9 +326,9 @@ export default class InviteOneView extends Vue {
     );
   }
 
-  addNewContact(did) {
+  addNewContact(did: string, notes: string) {
     (this.$refs.contactNameDialog as ContactNameDialog).open(
-      "Who Sent You The Invite?",
+      "To Whom Did You Send The Invite?",
       "Their name will be added to your contact list.",
       (name) => {
         // the person obviously registered themselves and this user already granted visibility, so we just add them
@@ -344,6 +349,8 @@ export default class InviteOneView extends Vue {
           3000,
         );
       },
+      () => {},
+      notes,
     );
   }
 

src/views/NewActivityView.vue

@@ -61,7 +61,7 @@
           >
             <fa icon="file-lines" class="pl-2 text-blue-500 cursor-pointer" />
           </router-link>
-          <!-- New line that appears on hover -->
+          <!-- New line that appears on hover or when the offer is clicked -->
           <div
             @click="markOffersAsReadStartingWith(offer.jwtId)"
             class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
@@ -149,7 +149,6 @@ import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import { NotificationIface } from "@/constants/app";
 import {
-  accountsDB,
   db,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
@@ -163,6 +162,7 @@ import {
   OfferSummaryRecord,
   OfferToPlanSummaryRecord,
 } from "@/libs/endorserServer";
+import { retrieveAccountDids } from "@/libs/util";
 
 @Component({
   components: { GiftedDialog, QuickNav, EntityIcon },
@@ -196,12 +196,7 @@ export default class NewActivityView extends Vue {
         settings.lastAckedOfferToUserProjectsJwtId || "";
 
       this.allContacts = await db.contacts.toArray();
-
-      await accountsDB.open();
-      const allAccounts = await accountsDB.accounts.toArray();
-      if (allAccounts.length > 0) {
-        this.allMyDids = allAccounts.map((acc) => acc.did);
-      }
+      this.allMyDids = await retrieveAccountDids();
 
       const offersToUserData = await getNewOffersToUser(
         this.axios,
@@ -276,7 +271,7 @@ export default class NewActivityView extends Vue {
         group: "alert",
         type: "info",
         title: "Marked as Unread",
-        text: "All offers above that one are marked as unread.",
+        text: "All offers above that line are marked as unread.",
       },
       3000,
     );
@@ -297,7 +292,7 @@ export default class NewActivityView extends Vue {
           group: "alert",
           type: "info",
           title: "Marked as Read",
-          text: "The offers are marked as viewed. Click in the list to keep them as new.",
+          text: "The offers are now marked as viewed. Click in the list to keep them as new.",
         },
         5000,
       );
@@ -326,7 +321,7 @@ export default class NewActivityView extends Vue {
         group: "alert",
         type: "info",
         title: "Marked as Unread",
-        text: "All offers above that one are marked as unread.",
+        text: "All offers above that line are marked as unread.",
       },
       3000,
     );

src/views/NewEditProjectView.vue

@@ -6,12 +6,14 @@
     <div id="ViewBreadcrumb" class="mb-8">
       <h1 class="text-lg text-center font-light relative px-7">
         <!-- Cancel -->
-        <router-link
-          :to="{ name: 'project' }"
+        <!-- Back -->
+        <button
+          @click="$router.go(-1)"
           class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><fa icon="chevron-left" class="fa-fw"></fa
-        ></router-link>
-        Edit Idea
+        >
+          <fa icon="chevron-left" class="fa-fw"></fa>
+        </button>
+        Edit Project Idea
       </h1>
     </div>
 
@@ -69,15 +71,17 @@
 
     <textarea
       placeholder="Description"
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      class="block w-full rounded border border-slate-400 px-3 py-2"
       rows="5"
       v-model="fullClaim.description"
       maxlength="5000"
     ></textarea>
-    <div class="text-xs text-slate-500 italic -mt-3 mb-4">
-      If you want to be contacted, be sure to include your contact information.
+    <div class="text-xs text-slate-500 italic">
+      If you want to be contacted, be sure to include your contact information
+      -- just remember that this information is public and saved in a public
+      history.
     </div>
-    <div class="text-xs text-slate-500 italic -mt-3 mb-4">
+    <div class="text-xs text-slate-500 italic">
       {{ fullClaim.description?.length }}/5000 max. characters
     </div>
 
@@ -85,28 +89,55 @@
       v-model="fullClaim.url"
       placeholder="Website"
       autocapitalize="none"
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
+      class="block w-full rounded border border-slate-400 mt-4 px-3 py-2"
     />
 
-    <div class="flex mb-4 columns-3 w-full">
+    <div>
+      <div class="flex items-center mt-4">
+        <span class="mr-2">Starts At</span>
         <input
           v-model="startDateInput"
           placeholder="Start Date"
           type="date"
-        class="col-span-1 w-full rounded border border-slate-400 px-3 py-2"
+          class="rounded border border-slate-400 px-3 py-2"
         />
         <input
           :disabled="!startDateInput"
           placeholder="Start Time"
           v-model="startTimeInput"
           type="time"
-        class="col-span-1 w-full rounded border border-slate-400 ml-2 px-3 py-2"
+          class="rounded border border-slate-400 ml-2 px-3 py-2"
         />
-      <span class="col-span-1 w-full flex justify-center">{{ zoneName }}</span>
+      </div>
+
+      <div class="flex w-full justify-end items-center">
+        <span class="w-full flex justify-end items-center">
+          {{ zoneName }} time zone
+        </span>
+      </div>
+
+      <div class="flex items-center">
+        <div class="mr-2">
+          <span>Ends at</span>
+        </div>
+        <input
+          v-model="endDateInput"
+          placeholder="End Date"
+          type="date"
+          class="ml-2 rounded border border-slate-400 px-3 py-2"
+        />
+        <input
+          :disabled="!endDateInput"
+          placeholder="End Time"
+          v-model="endTimeInput"
+          type="time"
+          class="rounded border border-slate-400 ml-2 px-3 py-2"
+        />
+      </div>
     </div>
 
     <div
-      class="flex items-center mb-4"
+      class="flex items-center mt-4"
       @click="includeLocation = !includeLocation"
     >
       <input type="checkbox" class="mr-2" v-model="includeLocation" />
@@ -150,11 +181,17 @@
       <div class="flex" @click="sendToTrustroots = !sendToTrustroots">
         <input type="checkbox" class="mr-2" v-model="sendToTrustroots" />
         <label>Send to Trustroots</label>
+        <fa
+          icon="circle-info"
+          class="text-blue-500 ml-2 cursor-pointer"
+          @click.stop="showNostrPartnerInfo"
+        />
       </div>
       <!--
       <div class="flex" @click="sendToTripHopping = !sendToTripHopping">
         <input type="checkbox" class="mr-2" v-model="sendToTripHopping" />
         <label>Send to TripHopping</label>
+        <fa icon="circle-info" class="text-blue-500 ml-2 cursor-pointer" @click.stop="showNostrPartnerInfo" />
       </div>
       -->
     </div>
@@ -193,9 +230,17 @@ import "leaflet/dist/leaflet.css";
 import { AxiosError, AxiosRequestHeaders } from "axios";
 import { DateTime } from "luxon";
 import { hexToBytes } from "@noble/hashes/utils";
-import type { EventTemplate, VerifiedEvent } from "nostr-tools/lib/types/core";
-import { accountFromSeedWords } from "nostr-tools/nip06";
-import { finalizeEvent, serializeEvent } from "nostr-tools/pure";
+// these core imports could also be included as "import type ..."
+import {
+  EventTemplate,
+  UnsignedEvent,
+  VerifiedEvent,
+} from "nostr-tools/lib/types/core";
+import {
+  accountFromExtendedKey,
+  extendedKeysFromSeedWords,
+} from "nostr-tools/lib/types/nip06";
+import { finalizeEvent, serializeEvent } from "nostr-tools";
 import { Component, Vue } from "vue-facing-decorator";
 import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
@@ -207,13 +252,16 @@ import {
   DEFAULT_PARTNER_API_SERVER,
   NotificationIface,
 } from "@/constants/app";
-import { accountsDB, retrieveSettingsForActiveAccount } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "@/db/index";
 import {
   createEndorserJwtVcFromClaim,
   getHeaders,
   PlanVerifiableCredential,
 } from "@/libs/endorserServer";
-import { getAccount } from "@/libs/util";
+import {
+  retrieveAccountCount,
+  retrieveFullyDecryptedAccount,
+} from "@/libs/util";
 
 @Component({
   components: { ImageMethodDialog, LMap, LMarker, LTileLayer, QuickNav },
@@ -230,6 +278,8 @@ export default class NewEditProjectView extends Vue {
   activeDid = "";
   agentDid = "";
   apiServer = "";
+  endDateInput?: string;
+  endTimeInput?: string;
   errorMessage = "";
   fullClaim: PlanVerifiableCredential = {
     "@context": "https://schema.org",
@@ -256,8 +306,7 @@ export default class NewEditProjectView extends Vue {
   zoom = 2;
 
   async mounted() {
-    await accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
+    this.numAccounts = await retrieveAccountCount();
 
     const settings = await retrieveSettingsForActiveAccount();
     this.activeDid = settings.activeDid || "";
@@ -305,6 +354,13 @@ export default class NewEditProjectView extends Vue {
           this.startDateInput = localDateTime.toFormat("yyyy-MM-dd");
           this.startTimeInput = localDateTime.toFormat("HH:mm");
         }
+        if (this.fullClaim.endTime) {
+          const localDateTime = DateTime.fromISO(
+            this.fullClaim.endTime as string,
+          ).toLocal();
+          this.endDateInput = localDateTime.toFormat("yyyy-MM-dd");
+          this.endTimeInput = localDateTime.toFormat("HH:mm");
+        }
       }
     } catch (error) {
       console.error("Got error retrieving that project", error);
@@ -403,6 +459,18 @@ export default class NewEditProjectView extends Vue {
       delete vcClaim.image;
     }
     if (this.includeLocation) {
+      if (!this.latitude || !this.longitude) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Location Error",
+            text: "The location was invalid so it was not set.",
+          },
+          5000,
+        );
+        delete vcClaim.location;
+      } else {
         vcClaim.location = {
           geo: {
             "@type": "GeoCoordinates",
@@ -410,6 +478,7 @@ export default class NewEditProjectView extends Vue {
             longitude: this.longitude,
           },
         };
+      }
     } else {
       delete vcClaim.location;
     }
@@ -426,8 +495,8 @@ export default class NewEditProjectView extends Vue {
           {
             group: "alert",
             type: "danger",
-            title: "Error",
-            text: "The date was invalid so it was not set.",
+            title: "Date Error",
+            text: "The start date was invalid so it was not set.",
           },
           5000,
         );
@@ -435,6 +504,28 @@ export default class NewEditProjectView extends Vue {
     } else {
       delete vcClaim.startTime;
     }
+    if (this.endDateInput) {
+      try {
+        const endTimeFull = this.endTimeInput || "23:59:59";
+        const fullTimeString = this.endDateInput + " " + endTimeFull;
+        // throw an error on an invalid date or time string
+        vcClaim.endTime = new Date(fullTimeString).toISOString(); // ensure timezone is part of it
+      } catch {
+        // it's not a valid date so erase it and tell the user
+        delete vcClaim.endTime;
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Date Error",
+            text: "The end date was invalid so it was not set.",
+          },
+          5000,
+        );
+      }
+    } else {
+      delete vcClaim.endTime;
+    }
     const vcJwt = await createEndorserJwtVcFromClaim(this.activeDid, vcClaim);
 
     // Make the xhr request payload
@@ -446,31 +537,59 @@ export default class NewEditProjectView extends Vue {
     try {
       const resp = await this.axios.post(url, payload, { headers });
       if (resp.data?.success?.handleId) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Saved",
+            text: "The project was saved successfully.",
+          },
+          3000,
+        );
+
         this.errorMessage = "";
 
         const projectPath = encodeURIComponent(resp.data.success.handleId);
 
-        let signedPayload: VerifiedEvent | undefined; // sign something to prove ownership of pubkey
+        if (this.sendToTrustroots || this.sendToTripHopping) {
+          if (this.latitude && this.longitude) {
+            let payloadAndKey; // sign something to prove ownership of pubkey
             if (this.sendToTrustroots) {
-          signedPayload = await this.signPayload();
+              payloadAndKey = await this.signSomePayload();
+              // not going to await... the save was successful, so we'll continue to the next page
               this.sendToNostrPartner(
                 "NOSTR-EVENT-TRUSTROOTS",
                 "Trustroots",
                 resp.data.success.claimId,
-            signedPayload,
+                payloadAndKey.signedEvent,
+                payloadAndKey.publicExtendedKey,
               );
             }
             if (this.sendToTripHopping) {
-          if (!signedPayload) {
-            signedPayload = await this.signPayload();
+              if (!payloadAndKey) {
+                payloadAndKey = await this.signSomePayload();
               }
+              // not going to await... the save was successful, so we'll continue to the next page
               this.sendToNostrPartner(
                 "NOSTR-EVENT-TRIPHOPPING",
                 "TripHopping",
                 resp.data.success.claimId,
-            signedPayload,
+                payloadAndKey.signedEvent,
+                payloadAndKey.publicExtendedKey,
               );
             }
+          } else {
+            this.$notify(
+              {
+                group: "alert",
+                type: "danger",
+                title: "Partner Error",
+                text: "A partner was selected but the location was not set, so it was not sent to any partner.",
+              },
+              5000,
+            );
+          }
+        }
 
         (this.$router as Router).push({ path: "/project/" + projectPath });
       } else {
@@ -485,7 +604,7 @@ export default class NewEditProjectView extends Vue {
             title: "Error Saving Idea",
             text: "Server did not save the idea. Try again.",
           },
-          -1,
+          5000,
         );
       }
     } catch (error) {
@@ -506,7 +625,7 @@ export default class NewEditProjectView extends Vue {
               title: "User Message",
               text: userMessage,
             },
-            -1,
+            5000,
           );
         } else {
           this.$notify(
@@ -516,7 +635,7 @@ export default class NewEditProjectView extends Vue {
               title: "Server Message",
               text: JSON.stringify(serverError.toJSON()),
             },
-            -1,
+            5000,
           );
         }
       } else {
@@ -528,7 +647,7 @@ export default class NewEditProjectView extends Vue {
             title: "Claim Error",
             text: error as string,
           },
-          -1,
+          5000,
         );
       }
       // Now set that error for the user to see.
@@ -536,19 +655,28 @@ export default class NewEditProjectView extends Vue {
     }
   }
 
-  private async signPayload(): Promise<VerifiedEvent> {
-    const account = await getAccount(this.activeDid);
+  /**
+   * @return a signed payload and an extended public key for later transmission
+   */
+  private async signSomePayload(): Promise<{
+    signedEvent: VerifiedEvent;
+    publicExtendedKey: string;
+  }> {
+    const account = await retrieveFullyDecryptedAccount(this.activeDid);
     // get the last number of the derivationPath
     const finalDerNum = account?.derivationPath?.split?.("/")?.reverse()[0];
     // remove any trailing '
     const finalDerNumNoApostrophe = finalDerNum?.replace(/'/g, "");
     const accountNum = Number(finalDerNumNoApostrophe || 0);
-    const pubPri = accountFromSeedWords(
+    const extPubPri = extendedKeysFromSeedWords(
       account?.mnemonic as string,
       "",
       accountNum,
     );
-    const privateBytes = hexToBytes(pubPri?.privateKey);
+    const publicExtendedKey: string = extPubPri?.publicExtendedKey;
+    const privateExtendedKey = extPubPri?.privateExtendedKey;
+    const privateKey = accountFromExtendedKey(privateExtendedKey).privateKey;
+    const privateBytes = hexToBytes(privateKey);
     // No real content is necessary, we just want something signed,
     // so we might as well use nostr libs for nostr functions.
     // Besides: someday we may create real content that we can relay.
@@ -558,9 +686,12 @@ export default class NewEditProjectView extends Vue {
       content: "",
       created_at: 0,
     };
+    const signedEvent: VerifiedEvent = finalizeEvent(
       // Why does IntelliJ not see matching types?
-    const signedEvent = finalizeEvent(event, privateBytes);
-    return signedEvent;
+      event as EventTemplate,
+      privateBytes,
+    ) as VerifiedEvent;
+    return { signedEvent, publicExtendedKey };
   }
 
   private async sendToNostrPartner(
@@ -568,45 +699,40 @@ export default class NewEditProjectView extends Vue {
     serviceName: string,
     jwtId: string,
     signedPayload: VerifiedEvent,
+    publicExtendedKey: string,
   ) {
-    // first, get the public key for nostr
-    const account = await getAccount(this.activeDid);
-    // get the last number of the derivationPath
-    const finalDerNum = account?.derivationPath?.split?.("/")?.reverse()[0];
-    // remove any trailing '
-    const finalDerNumNoApostrophe = finalDerNum?.replace(/'/g, "");
-    const accountNum = Number(finalDerNumNoApostrophe || 0);
-    const pubPri = accountFromSeedWords(
-      account?.mnemonic as string,
-      "",
-      accountNum,
-    );
-    const nostrPubKey = pubPri?.publicKey;
-
+    try {
       let partnerServer = DEFAULT_PARTNER_API_SERVER;
       const settings = await retrieveSettingsForActiveAccount();
       if (settings.partnerApiServer) {
         partnerServer = settings.partnerApiServer;
       }
-    const trustrootsUrl = partnerServer + "/api/partner/link";
+      const endorserPartnerUrl = partnerServer + "/api/partner/link";
       const timeSafariUrl = window.location.origin + "/claim/" + jwtId;
       const content = this.fullClaim.name + " - see " + timeSafariUrl;
+      const publicKeyHex = accountFromExtendedKey(publicExtendedKey).publicKey;
+      const unsignedPayload: UnsignedEvent = {
+        // why doesn't "...signedPayload" work?
+        kind: signedPayload.kind,
+        tags: signedPayload.tags,
+        content: signedPayload.content,
+        created_at: signedPayload.created_at,
+        pubkey: publicKeyHex,
+      };
       // Why does IntelliJ not see matching types?
-    const payload = serializeEvent(signedPayload);
-    const trustrootsParams = {
+      const payload = serializeEvent(unsignedPayload as UnsignedEvent);
+      const partnerParams = {
         jwtId: jwtId,
         linkCode: linkCode,
         inputJson: JSON.stringify(content),
-      pubKeyHex: nostrPubKey,
+        pubKeyHex: publicKeyHex,
         pubKeyImage: payload,
         pubKeySigHex: signedPayload.sig,
       };
-    const fullTrustrootsUrl = trustrootsUrl;
       const headers = await getHeaders(this.activeDid);
-    try {
       const linkResp = await this.axios.post(
-        fullTrustrootsUrl,
-        trustrootsParams,
+        endorserPartnerUrl,
+        partnerParams,
         { headers },
       );
       if (linkResp.status === 201) {
@@ -645,7 +771,7 @@ export default class NewEditProjectView extends Vue {
           title: `Error Sending to ${serviceName}`,
           text: errorMessage,
         },
-        5000,
+        7000,
       );
     }
   }
@@ -685,5 +811,17 @@ export default class NewEditProjectView extends Vue {
   public onCancelClick() {
     (this.$router as Router).back();
   }
+
+  public showNostrPartnerInfo() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "About Nostr Events",
+        text: "This will submit this project to a partner on the nostr network. It will contain your public key data which may allow correlation, so don't allow this if you're not comfortable with that.",
+      },
+      7000,
+    );
+  }
 }
 </script>

src/views/OfferDetailsView.vue

@@ -28,7 +28,7 @@
             ? projectName
             : offeredToRecipient
               ? recipientName
-              : "someone unidentified"
+              : "someone not named"
         }}</span
       >
     </h1>
@@ -181,7 +181,7 @@ import { Router } from "vue-router";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import {
   createAndSubmitOffer,
   didInfo,
@@ -192,7 +192,7 @@ import {
   OfferVerifiableCredential,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
-import { Contact } from "@/db/tables/contacts";
+import { retrieveAccountDids } from "@/libs/util";
 
 @Component({
   components: {
@@ -242,7 +242,7 @@ export default class OfferDetailsView extends Vue {
           title: "Retrieval Error",
           text: "The previous record isn't available for editing. If you submit, you'll create a new record.",
         },
-        6000,
+        5000,
       );
     }
 
@@ -301,14 +301,9 @@ export default class OfferDetailsView extends Vue {
       this.activeDid = settings.activeDid ?? "";
       this.showGeneralAdvanced = settings.showGeneralAdvanced ?? false;
 
-      let allContacts: Contact[] = [];
-      let allMyDids: string[] = [];
       if (this.recipientDid && !this.recipientName) {
-        allContacts = await db.contacts.toArray();
-
-        await accountsDB.open();
-        const allAccounts = await accountsDB.accounts.toArray();
-        allMyDids = allAccounts.map((acc) => acc.did);
+        const allContacts = await db.contacts.toArray();
+        const allMyDids = await retrieveAccountDids();
         this.recipientName = didInfo(
           this.recipientDid,
           this.activeDid,
@@ -330,7 +325,7 @@ export default class OfferDetailsView extends Vue {
           title: "Error",
           text: err.message || "There was an error retrieving your settings.",
         },
-        -1,
+        5000,
       );
     }
 
@@ -535,7 +530,7 @@ export default class OfferDetailsView extends Vue {
             title: "Error",
             text: errorMessage || "There was an error creating the offer.",
           },
-          -1,
+          5000,
         );
       } else {
         this.$notify(
@@ -568,7 +563,7 @@ export default class OfferDetailsView extends Vue {
           title: "Error",
           text: errorMessage,
         },
-        -1,
+        5000,
       );
     }
   }
@@ -626,7 +621,7 @@ export default class OfferDetailsView extends Vue {
         title: "Data Sharing",
         text: libsUtil.PRIVACY_MESSAGE,
       },
-      -1,
+      7000,
     );
   }
 }

src/views/OnboardMeetingListView.vue

@@ -0,0 +1,343 @@
+<template>
+  <QuickNav selected="Contacts" />
+  <TopMessage />
+
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+      Onboarding Meetings
+    </h1>
+
+    <!-- Loading State -->
+    <div v-if="isLoading" class="flex justify-center items-center py-8">
+      <fa icon="spinner" class="fa-spin-pulse" />
+    </div>
+
+    <div v-else-if="attendingMeeting">
+      <p>You are in this meeting.</p>
+      <div
+        class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer"
+        @click="promptPassword(attendingMeeting)"
+      >
+        <div class="flex justify-between items-center">
+          <h2 class="text-xl font-medium">{{ attendingMeeting.name }}</h2>
+          <button
+            @click.stop="leaveMeeting"
+            class="text-red-600 hover:text-red-700 p-2"
+            title="Leave Meeting"
+          >
+            <fa icon="right-from-bracket" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Meeting List -->
+    <div v-else class="space-y-4">
+      <div
+        v-for="meeting in meetings"
+        :key="meeting.groupId"
+        class="p-4 bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer"
+        @click="promptPassword(meeting)"
+      >
+        <h2 class="text-xl font-medium">{{ meeting.name }}</h2>
+      </div>
+
+      <p v-if="meetings.length === 0" class="text-center text-gray-500 py-8">
+        No onboarding meetings available
+      </p>
+    </div>
+
+    <!-- Password Dialog -->
+    <div
+      v-if="showPasswordDialog"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4"
+    >
+      <div class="bg-white rounded-lg p-6 max-w-sm w-full">
+        <h3 class="text-lg font-medium mb-4">Enter Meeting Password</h3>
+        <input
+          ref="passwordInput"
+          v-model="password"
+          type="text"
+          class="w-full px-3 py-2 border rounded-md mb-4"
+          placeholder="Enter password"
+          @keyup.enter="submitPassword"
+        />
+        <div class="flex justify-end space-x-4">
+          <button
+            @click="cancelPasswordDialog"
+            class="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300"
+          >
+            Cancel
+          </button>
+          <button
+            @click="submitPassword"
+            class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Submit
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { nextTick } from "vue";
+import { Router } from "vue-router";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import {
+  errorStringForLog,
+  getHeaders,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
+import { encryptMessage } from "@/libs/crypto";
+
+interface Meeting {
+  name: string;
+  groupId: number;
+}
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class OnboardMeetingListView extends Vue {
+  $notify!: (
+    notification: {
+      group: string;
+      type: string;
+      title: string;
+      text: string;
+      onYes?: () => void;
+      yesText?: string;
+    },
+    timeout?: number,
+  ) => void;
+
+  activeDid = "";
+  apiServer = "";
+  attendingMeeting: Meeting | null = null;
+  firstName = "";
+  isLoading = false;
+  isRegistered = false;
+  meetings: Meeting[] = [];
+  password = "";
+  selectedMeeting: Meeting | null = null;
+  showPasswordDialog = false;
+
+  async created() {
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    this.firstName = settings.firstName || "";
+    this.isRegistered = !!settings.isRegistered;
+    await this.fetchMeetings();
+  }
+
+  async fetchMeetings() {
+    this.isLoading = true;
+    try {
+      // get the meeting that the user is attending
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        this.apiServer + "/api/partner/groupOnboardMember",
+        { headers },
+      );
+
+      if (response.data?.data) {
+        // they're in a meeting already
+        const attendingMeetingId = response.data.data.groupId;
+        // retrieve the meeting details
+        const headers2 = await getHeaders(this.activeDid);
+        const response2 = await this.axios.get(
+          this.apiServer + "/api/partner/groupOnboard/" + attendingMeetingId,
+          { headers: headers2 },
+        );
+
+        if (response2.data?.data) {
+          this.attendingMeeting = response2.data.data;
+          return;
+        } else {
+          // this should never happen
+          logConsoleAndDb(
+            "Error fetching meeting for user after saying they are in one.",
+            true,
+          );
+        }
+      }
+
+      const headers2 = await getHeaders(this.activeDid);
+      const response2 = await this.axios.get(
+        this.apiServer + "/api/partner/groupsOnboarding",
+        { headers: headers2 },
+      );
+
+      if (response2.data?.data) {
+        this.meetings = response2.data.data;
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error fetching meetings: " + errorStringForLog(error),
+        true,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: serverMessageForUser(error) || "Failed to fetch meetings.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  promptPassword(meeting: Meeting) {
+    this.password = "";
+    this.selectedMeeting = meeting;
+    this.showPasswordDialog = true;
+    nextTick(() => {
+      const input = this.$refs.passwordInput as HTMLInputElement;
+      if (input) {
+        input.focus();
+      }
+    });
+  }
+
+  cancelPasswordDialog() {
+    this.password = "";
+    this.selectedMeeting = null;
+    this.showPasswordDialog = false;
+  }
+
+  async submitPassword() {
+    if (!this.selectedMeeting) {
+      // this should never happen
+      logConsoleAndDb(
+        "No meeting selected when prompting for password, which should never happen.",
+        true,
+      );
+      return;
+    }
+
+    try {
+      // Create member data object
+      const memberData = {
+        name: this.firstName,
+        did: this.activeDid,
+        isRegistered: this.isRegistered,
+      };
+      const memberDataString = JSON.stringify(memberData);
+      const encryptedMemberData = await encryptMessage(
+        memberDataString,
+        this.password,
+      );
+
+      // Get headers for authentication
+      const headers = await getHeaders(this.activeDid);
+
+      // Encrypt the member data
+      const postResult = await this.axios.post(
+        this.apiServer + "/api/partner/groupOnboardMember",
+        {
+          groupId: this.selectedMeeting.groupId,
+          content: encryptedMemberData,
+        },
+        { headers },
+      );
+
+      if (postResult.data && postResult.data.success) {
+        // Navigate to members view with password and groupId
+        (this.$router as Router).push({
+          name: "onboard-meeting-members",
+          params: {
+            groupId: this.selectedMeeting.groupId.toString(),
+          },
+          query: {
+            password: this.password,
+            memberId: postResult.data.memberId,
+          },
+        });
+
+        this.cancelPasswordDialog();
+      } else {
+        throw { response: postResult };
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error joining meeting: " + errorStringForLog(error),
+        true,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text:
+            serverMessageForUser(error) || "You failed to join the meeting.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async leaveMeeting() {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Leave Meeting",
+        text: "Are you sure you want to leave this meeting?",
+        onYes: async () => {
+          try {
+            const headers = await getHeaders(this.activeDid);
+            await this.axios.delete(
+              this.apiServer + "/api/partner/groupOnboardMember",
+              { headers },
+            );
+
+            this.attendingMeeting = null;
+            await this.fetchMeetings();
+
+            this.$notify(
+              {
+                group: "alert",
+                type: "success",
+                title: "Success",
+                text: "You left the meeting.",
+              },
+              5000,
+            );
+          } catch (error) {
+            logConsoleAndDb(
+              "Error leaving meeting: " + errorStringForLog(error),
+              true,
+            );
+            this.$notify(
+              {
+                group: "alert",
+                type: "danger",
+                title: "Error",
+                text:
+                  serverMessageForUser(error) ||
+                  "You failed to leave the meeting.",
+              },
+              5000,
+            );
+          }
+        },
+      },
+      -1,
+    );
+  }
+}
+</script>

src/views/OnboardMeetingMembersView.vue

@@ -0,0 +1,216 @@
+<template>
+  <QuickNav selected="Contacts" />
+  <TopMessage />
+
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+      Meeting Members
+    </h1>
+
+    <!-- Loading Animation -->
+    <div
+      class="mt-16 text-center text-4xl bg-slate-400 text-white w-14 py-2.5 rounded-full mx-auto"
+      v-if="isLoading"
+    >
+      <fa icon="spinner" class="fa-spin-pulse"></fa>
+    </div>
+
+    <!-- Error State -->
+    <div v-else-if="errorMessage">
+      <div class="text-center text-red-600 py-8">
+        {{ errorMessage }}
+      </div>
+      <div class="text-center">
+        For authorization, wait for your meeting organizer to approve you.
+      </div>
+    </div>
+
+    <!-- Members List -->
+    <MembersList v-else :password="password" @error="handleError" />
+  </section>
+
+  <UserNameDialog
+    ref="userNameDialog"
+    :callback-on-cancel="true"
+    sharing-explanation="This is encrypted and shared only with people in this meeting."
+  />
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import { RouteLocation } from "vue-router";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import MembersList from "@/components/MembersList.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import { encryptMessage } from "@/libs/crypto";
+import {
+  errorStringForLog,
+  getHeaders,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
+import { generateSaveAndActivateIdentity } from "@/libs/util";
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+    MembersList,
+    UserNameDialog,
+  },
+})
+export default class OnboardMeetingMembersView extends Vue {
+  activeDid = "";
+  apiServer = "";
+  errorMessage = "";
+  firstName = "";
+  isRegistered = false;
+  isLoading = true;
+
+  $refs!: {
+    userNameDialog: InstanceType<typeof UserNameDialog>;
+  };
+
+  get groupId(): string {
+    return (this.$route as RouteLocation).params.groupId as string;
+  }
+
+  get password(): string {
+    return (this.$route as RouteLocation).query.password as string;
+  }
+
+  async created() {
+    if (!this.groupId) {
+      this.errorMessage = "The group info is missing. Go back and try again.";
+      return;
+    }
+    if (!this.password) {
+      this.errorMessage = "The password is missing. Go back and try again.";
+      return;
+    }
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    this.firstName = settings.firstName || "";
+    this.isRegistered = settings.isRegistered || false;
+    try {
+      if (!this.activeDid) {
+        this.activeDid = await generateSaveAndActivateIdentity();
+        this.isRegistered = false;
+      }
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        `${this.apiServer}/api/partner/groupOnboardMember`,
+        { headers },
+      );
+      const member = response.data?.data;
+      if (!member) {
+        if (!this.firstName) {
+          this.$refs.userNameDialog.open(this.addMemberToMeeting);
+          // addMemberToMeeting sets isLoading to false
+        } else {
+          await this.addMemberToMeeting(this.firstName);
+          // addMemberToMeeting sets isLoading to false
+        }
+      } else if (String(member.groupId) !== this.groupId) {
+        this.errorMessage =
+          "You are already in a different meeting. Reload or go back and try again.";
+        this.isLoading = false;
+      } else {
+        // must be already in the right meeting
+        if (!this.firstName) {
+          this.$refs.userNameDialog.open(this.updateMemberInMeeting);
+          // updateMemberInMeeting sets isLoading to false
+        } else {
+          await this.updateMemberInMeeting(this.firstName);
+          // updateMemberInMeeting sets isLoading to false
+        }
+      }
+    } catch (error) {
+      this.errorMessage =
+        serverMessageForUser(error) ||
+        "There was an error checking for that meeting. Reload or go back and try again.";
+      logConsoleAndDb(
+        "Error checking meeting: " + errorStringForLog(error),
+        true,
+      );
+      this.isLoading = false;
+    }
+  }
+
+  async addMemberToMeeting(name?: string) {
+    if (name != null) {
+      this.firstName = name;
+    }
+
+    const memberData = {
+      name: this.firstName,
+      did: this.activeDid,
+      isRegistered: this.isRegistered,
+    };
+    const memberDataString = JSON.stringify(memberData);
+    const encryptedMemberData = await encryptMessage(
+      memberDataString,
+      this.password,
+    );
+
+    const headers = await getHeaders(this.activeDid);
+    try {
+      await this.axios.post(
+        `${this.apiServer}/api/partner/groupOnboardMember`,
+        { groupId: this.groupId, content: encryptedMemberData },
+        { headers },
+      );
+    } catch (error) {
+      logConsoleAndDb(
+        "Error adding member to meeting: " + errorStringForLog(error),
+        true,
+      );
+      this.errorMessage =
+        serverMessageForUser(error) ||
+        "You're not in a meeting and couldn't be added to this one. Reload or go back and try again.";
+    }
+    this.isLoading = false;
+  }
+
+  async updateMemberInMeeting(name?: string) {
+    if (name != null) {
+      this.firstName = name;
+    }
+    const memberData = {
+      name: this.firstName,
+      did: this.activeDid,
+      isRegistered: this.isRegistered,
+    };
+    const memberDataString = JSON.stringify(memberData);
+    const encryptedMemberData = await encryptMessage(
+      memberDataString,
+      this.password,
+    );
+    const headers = await getHeaders(this.activeDid);
+    try {
+      await this.axios.put(
+        `${this.apiServer}/api/partner/groupOnboardMember`,
+        { content: encryptedMemberData },
+        { headers },
+      );
+    } catch (error) {
+      logConsoleAndDb(
+        "Error updating member in meeting: " + errorStringForLog(error),
+        true,
+      );
+      this.errorMessage =
+        serverMessageForUser(error) ||
+        "There was an error updating your name. Reload or go back and try again.";
+    }
+    this.isLoading = false;
+  }
+
+  handleError(message: string) {
+    this.errorMessage = message;
+  }
+}
+</script>

src/views/OnboardMeetingSetupView.vue

@@ -0,0 +1,673 @@
+<template>
+  <QuickNav selected="Contacts" />
+  <TopMessage />
+
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Heading -->
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+      Onboarding Meeting
+    </h1>
+
+    <!-- Existing Meeting Section -->
+    <div
+      v-if="!isLoading && currentMeeting != null && !isInEditOrCreateMode()"
+      class="mt-8 p-4 border rounded-lg bg-white shadow"
+    >
+      <div class="flex items-center justify-between mb-4">
+        <div class="flex items-center">
+          <h2 class="text-2xl">Current Meeting</h2>
+          <button
+            @click="startEditing"
+            class="mb-4 text-blue-600 hover:text-blue-800 transition-colors duration-200 ml-2"
+            title="Edit Meeting"
+          >
+            <fa icon="pen" class="fa-fw" />
+            <span class="sr-only">{{
+              isInCreateMode() ? "Create Meeting" : "Edit Meeting"
+            }}</span>
+          </button>
+        </div>
+        <button
+          @click="confirmDelete"
+          class="text-red-600 hover:text-red-800 transition-colors duration-200"
+          :disabled="isDeleting"
+          :class="{ 'opacity-50 cursor-not-allowed': isDeleting }"
+          title="Delete Meeting"
+        >
+          <fa icon="trash-can" class="fa-fw" />
+          <span class="sr-only">{{
+            isDeleting ? "Deleting..." : "Delete Meeting"
+          }}</span>
+        </button>
+      </div>
+      <div class="space-y-2">
+        <p><strong>Name:</strong> {{ currentMeeting.name }}</p>
+        <p>
+          <strong>Expires:</strong>
+          {{ formatExpirationTime(currentMeeting.expiresAt) }}
+        </p>
+
+        <div v-if="currentMeeting.password" class="mt-4">
+          <p class="text-gray-600">
+            Share the password with the people you want to onboard.
+          </p>
+        </div>
+        <div v-else class="text-red-600">
+          Your copy of the password is not saved. Edit the meeting, or delete it
+          and create a new meeting.
+        </div>
+      </div>
+    </div>
+
+    <!-- Delete Confirmation Dialog -->
+    <div
+      v-if="showDeleteConfirm"
+      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4"
+    >
+      <div class="bg-white rounded-lg p-6 max-w-sm w-full">
+        <h3 class="text-lg font-medium mb-4">Delete Meeting?</h3>
+        <p class="text-gray-600 mb-6">
+          This action cannot be undone. Are you sure you want to delete this
+          meeting?
+        </p>
+        <div class="flex justify-between space-x-4">
+          <button
+            @click="showDeleteConfirm = false"
+            class="px-4 py-2 bg-slate-500 text-white rounded hover:bg-slate-700"
+          >
+            Cancel
+          </button>
+          <button
+            @click="deleteMeeting"
+            class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Create/Edit Meeting Form -->
+    <div
+      v-if="
+        !isLoading &&
+        isInEditOrCreateMode() &&
+        newOrUpdatedMeeting != null /* duplicate check is for typechecks */
+      "
+      class="mt-8"
+    >
+      <h2 class="text-2xl mb-4">
+        {{ isInCreateMode() ? "Create New Meeting" : "Edit Meeting" }}
+      </h2>
+      <!-- This is my first form. Not sure if I like it; will see if the browser benefits extend to the native app. -->
+      <form
+        @submit.prevent="isInCreateMode() ? createMeeting() : updateMeeting()"
+        class="space-y-4"
+      >
+        <div>
+          <label
+            for="meetingName"
+            class="block text-sm font-medium text-gray-700"
+            >Meeting Name</label
+          >
+          <input
+            id="meetingName"
+            v-model="newOrUpdatedMeeting.name"
+            type="text"
+            required
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+            placeholder="Enter meeting name"
+          />
+        </div>
+
+        <div>
+          <label
+            for="expirationTime"
+            class="block text-sm font-medium text-gray-700"
+            >Meeting Expiration Time</label
+          >
+          <input
+            id="expirationTime"
+            v-model="newOrUpdatedMeeting.expiresAt"
+            type="datetime-local"
+            required
+            :min="minDateTime"
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+          />
+        </div>
+
+        <div>
+          <label for="password" class="block text-sm font-medium text-gray-700"
+            >Meeting Password</label
+          >
+          <input
+            id="password"
+            v-model="newOrUpdatedMeeting.password"
+            type="text"
+            required
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+            placeholder="Enter meeting password"
+          />
+        </div>
+
+        <div>
+          <label for="userName" class="block text-sm font-medium text-gray-700"
+            >Your Name</label
+          >
+          <input
+            id="userName"
+            v-model="newOrUpdatedMeeting.userFullName"
+            type="text"
+            required
+            class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none"
+            placeholder="Your name"
+          />
+        </div>
+
+        <button
+          type="submit"
+          class="w-full bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md hover:from-green-500 hover:to-green-800"
+          :disabled="isLoading"
+        >
+          {{
+            isLoading
+              ? isInCreateMode()
+                ? "Creating..."
+                : "Updating..."
+              : isInCreateMode()
+                ? "Create Meeting"
+                : "Update Meeting"
+          }}
+        </button>
+        <button
+          v-if="isInEditOrCreateMode()"
+          type="button"
+          @click="cancelEditing"
+          class="w-full bg-slate-500 text-white px-4 py-2 rounded-md hover:bg-slate-600"
+        >
+          Cancel
+        </button>
+      </form>
+    </div>
+
+    <!-- Members Section -->
+    <div
+      v-if="!isLoading && currentMeeting != null && !!currentMeeting.password"
+      class="mt-8 p-4 border rounded-lg bg-white shadow"
+    >
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-2xl">Meeting Members</h2>
+      </div>
+      <router-link
+        v-if="!!currentMeeting.password"
+        :to="onboardMeetingMembersLink()"
+        class="inline-block text-blue-600"
+        target="_blank"
+      >
+        &bull; Open shortcut page for members <fa icon="external-link" />
+      </router-link>
+
+      <MembersList
+        :password="currentMeeting.password || ''"
+        :show-organizer-tools="true"
+        @error="handleMembersError"
+        class="mt-4"
+      />
+    </div>
+
+    <div v-else-if="isLoading">
+      <div class="flex justify-center items-center h-full">
+        <fa icon="spinner" class="fa-spin-pulse" />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import MembersList from "@/components/MembersList.vue";
+import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "@/db/index";
+import {
+  errorStringForLog,
+  getHeaders,
+  serverMessageForUser,
+} from "@/libs/endorserServer";
+import { encryptMessage } from "@/libs/crypto";
+
+interface ServerMeeting {
+  groupId: number; // from the server
+  name: string; // from the server
+  expiresAt: string; // from the server
+  userFullName?: string; // from the user's session
+  password?: string; // from the user's session
+}
+
+interface MeetingSetupInfo {
+  name: string;
+  expiresAt: string;
+  userFullName: string;
+  password: string;
+}
+
+@Component({
+  components: {
+    QuickNav,
+    TopMessage,
+    MembersList,
+  },
+})
+export default class OnboardMeetingView extends Vue {
+  $notify!: (
+    notification: { group: string; type: string; title: string; text: string },
+    timeout?: number,
+  ) => void;
+
+  currentMeeting: ServerMeeting | null = null;
+  newOrUpdatedMeeting: MeetingSetupInfo | null = null;
+  activeDid = "";
+  apiServer = "";
+  isDeleting = false;
+  isLoading = true;
+  isRegistered = false;
+  showDeleteConfirm = false;
+  fullName = "";
+  get minDateTime() {
+    const now = new Date();
+    now.setMinutes(now.getMinutes() + 5); // Set minimum 5 minutes in the future
+    return this.formatDateForInput(now);
+  }
+
+  async created() {
+    const settings = await retrieveSettingsForActiveAccount();
+    this.activeDid = settings.activeDid || "";
+    this.apiServer = settings.apiServer || "";
+    this.fullName = settings.firstName || "";
+    this.isRegistered = !!settings.isRegistered;
+
+    await this.fetchCurrentMeeting();
+    this.isLoading = false;
+  }
+
+  isInCreateMode(): boolean {
+    return this.newOrUpdatedMeeting != null && this.currentMeeting == null;
+  }
+
+  isInEditOrCreateMode(): boolean {
+    return this.newOrUpdatedMeeting != null;
+  }
+
+  getDefaultExpirationTime(): string {
+    const date = new Date();
+    // Round up to the next hour
+    date.setMinutes(0);
+    date.setSeconds(0);
+    date.setMilliseconds(0);
+    date.setHours(date.getHours() + 1); // Round up to next hour
+    date.setHours(date.getHours() + 2); // Add 2 more hours
+    return this.formatDateForInput(date);
+  }
+
+  // Format a date object to YYYY-MM-DDTHH:mm format for datetime-local input
+  private formatDateForInput(date: Date): string {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    const hours = String(date.getHours()).padStart(2, "0");
+    const minutes = String(date.getMinutes()).padStart(2, "0");
+
+    return `${year}-${month}-${day}T${hours}:${minutes}`;
+  }
+
+  blankMeeting(): MeetingSetupInfo {
+    return {
+      // no groupId yet
+      name: "",
+      expiresAt: this.getDefaultExpirationTime(),
+      userFullName: this.fullName,
+      password: (this.currentMeeting?.password as string) || "",
+    };
+  }
+
+  async fetchCurrentMeeting() {
+    try {
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.get(
+        this.apiServer + "/api/partner/groupOnboard",
+        { headers },
+      );
+
+      if (response?.data?.data) {
+        this.currentMeeting = {
+          ...response.data.data,
+          userFullName: this.fullName,
+          password: this.currentMeeting?.password || "",
+        };
+      } else {
+        // no meeting found
+        this.newOrUpdatedMeeting = this.blankMeeting();
+      }
+    } catch (error) {
+      // no meeting found
+      this.newOrUpdatedMeeting = this.blankMeeting();
+    }
+  }
+
+  async createMeeting() {
+    this.isLoading = true;
+
+    try {
+      if (!this.newOrUpdatedMeeting) {
+        throw Error(
+          "There was no meeting data to create. We should never get here.",
+        );
+      }
+
+      // Convert local time to UTC for comparison and server submission
+      const localExpiresAt = new Date(this.newOrUpdatedMeeting.expiresAt);
+      const now = new Date();
+      if (localExpiresAt <= now) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Time",
+            text: "Select a future time for the meeting expiration.",
+          },
+          5000,
+        );
+        return;
+      }
+      if (!this.newOrUpdatedMeeting.userFullName) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Name",
+            text: "Please enter your name.",
+          },
+          5000,
+        );
+        return;
+      }
+      if (!this.newOrUpdatedMeeting.password) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Password",
+            text: "Please enter a password.",
+          },
+          5000,
+        );
+        return;
+      }
+
+      // create content with user's name and DID encrypted with password
+      const content = {
+        name: this.newOrUpdatedMeeting.userFullName,
+        did: this.activeDid,
+        isRegistered: this.isRegistered,
+      };
+      const encryptedContent = await encryptMessage(
+        JSON.stringify(content),
+        this.newOrUpdatedMeeting.password,
+      );
+
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.post(
+        this.apiServer + "/api/partner/groupOnboard",
+        {
+          name: this.newOrUpdatedMeeting.name,
+          expiresAt: localExpiresAt.toISOString(),
+          content: encryptedContent,
+        },
+        { headers },
+      );
+
+      if (response.data && response.data.success) {
+        this.currentMeeting = {
+          ...this.newOrUpdatedMeeting,
+          groupId: response.data.success.groupId,
+        };
+
+        this.newOrUpdatedMeeting = null;
+        this.$notify(
+          {
+            group: "alert",
+            type: "success",
+            title: "Success",
+            text: "Meeting created.",
+          },
+          3000,
+        );
+      } else {
+        throw { response: response };
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error creating meeting: " + errorStringForLog(error),
+        true,
+      );
+      const errorMessage = serverMessageForUser(error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text:
+            errorMessage ||
+            "Failed to create meeting. Try reloading or submitting again.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  formatExpirationTime(expiresAt: string): string {
+    const expiration = new Date(expiresAt); // Server time is in UTC
+    const now = new Date();
+    const diffHours = Math.round(
+      (expiration.getTime() - now.getTime()) / (1000 * 60 * 60),
+    );
+
+    if (diffHours < 0) {
+      return "Expired";
+    } else if (diffHours < 1) {
+      return "Less than an hour";
+    } else if (diffHours === 1) {
+      return "1 hour";
+    } else {
+      return `${diffHours} hours`;
+    }
+  }
+
+  confirmDelete() {
+    this.showDeleteConfirm = true;
+  }
+
+  async deleteMeeting() {
+    this.isDeleting = true;
+    try {
+      const headers = await getHeaders(this.activeDid);
+      await this.axios.delete(this.apiServer + "/api/partner/groupOnboard", {
+        headers,
+      });
+
+      this.currentMeeting = null;
+      this.newOrUpdatedMeeting = this.blankMeeting();
+      this.showDeleteConfirm = false;
+
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Success",
+          text: "Meeting deleted successfully.",
+        },
+        3000,
+      );
+    } catch (error) {
+      console.error("Error deleting meeting:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: serverMessageForUser(error) || "Failed to delete meeting.",
+        },
+        5000,
+      );
+    } finally {
+      this.isDeleting = false;
+    }
+  }
+
+  startEditing() {
+    // Populate form with existing meeting data
+    if (this.currentMeeting) {
+      const localExpiresAt = new Date(this.currentMeeting.expiresAt);
+      this.newOrUpdatedMeeting = {
+        name: this.currentMeeting.name,
+        expiresAt: this.formatDateForInput(localExpiresAt),
+        userFullName: this.currentMeeting.userFullName || "",
+        password: this.currentMeeting.password || "",
+      };
+    } else {
+      console.error(
+        "There is no current meeting to edit. We should never get here.",
+      );
+    }
+  }
+
+  cancelEditing() {
+    // Reset form data
+    this.newOrUpdatedMeeting = null;
+  }
+
+  async updateMeeting() {
+    this.isLoading = true;
+    if (!this.newOrUpdatedMeeting) {
+      throw Error("There was no meeting data to update.");
+    }
+
+    try {
+      // Convert local time to UTC for comparison and server submission
+      const localExpiresAt = new Date(this.newOrUpdatedMeeting.expiresAt);
+      const now = new Date();
+      if (localExpiresAt <= now) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Time",
+            text: "Select a future time for the meeting expiration.",
+          },
+          5000,
+        );
+        return;
+      }
+      if (!this.newOrUpdatedMeeting.userFullName) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Name",
+            text: "Please enter your name.",
+          },
+          5000,
+        );
+        return;
+      }
+      if (!this.newOrUpdatedMeeting.password) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Password",
+            text: "Please enter a password.",
+          },
+          5000,
+        );
+        return;
+      }
+      // create content with user's name and DID encrypted with password
+      const content = {
+        name: this.newOrUpdatedMeeting.userFullName,
+        did: this.activeDid,
+        isRegistered: this.isRegistered,
+      };
+      const encryptedContent = await encryptMessage(
+        JSON.stringify(content),
+        this.newOrUpdatedMeeting.password,
+      );
+
+      const headers = await getHeaders(this.activeDid);
+      const response = await this.axios.put(
+        this.apiServer + "/api/partner/groupOnboard",
+        {
+          // the groupId is in the currentMeeting but it's not necessary while users only have one meeting
+          name: this.newOrUpdatedMeeting.name,
+          expiresAt: localExpiresAt.toISOString(),
+          content: encryptedContent,
+        },
+        { headers },
+      );
+
+      if (response.data && response.data.success) {
+        // Update the current meeting with only the necessary fields
+        this.currentMeeting = {
+          ...this.newOrUpdatedMeeting,
+          groupId: (this.currentMeeting?.groupId as number) || -1,
+        };
+        this.newOrUpdatedMeeting = null;
+      } else {
+        throw { response: response };
+      }
+    } catch (error) {
+      logConsoleAndDb(
+        "Error updating meeting: " + errorStringForLog(error),
+        true,
+      );
+      const errorMessage = serverMessageForUser(error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text:
+            errorMessage ||
+            "Failed to update meeting. Try reloading or submitting again.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
+  onboardMeetingMembersLink(): string {
+    if (this.currentMeeting) {
+      return `/onboard-meeting-members/${this.currentMeeting?.groupId}?password=${encodeURIComponent(
+        this.currentMeeting?.password || "",
+      )}`;
+    }
+    return "";
+  }
+
+  handleMembersError(message: string) {
+    this.$notify(
+      {
+        group: "alert",
+        type: "danger",
+        title: "Error",
+        text: message,
+      },
+      5000,
+    );
+  }
+}
+</script>

src/views/ProjectViewView.vue

@@ -6,7 +6,8 @@
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Breadcrumb -->
     <div id="ViewBreadcrumb">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <div>
+        <h1 class="text-center text-lg font-light relative px-7">
           <!-- Back -->
           <button
             @click="$router.go(-1)"
@@ -14,9 +15,20 @@
           >
             <fa icon="chevron-left" class="fa-fw"></fa>
           </button>
-        Idea
-        <h2 class="text-xl font-semibold">{{ name }}</h2>
+          Project Idea
         </h1>
+        <h2 class="text-center text-xl font-semibold">
+          {{ name }}
+          <button
+            v-if="activeDid === issuer || activeDid === agentDid"
+            @click="onEditClick()"
+            title="Edit"
+            data-testId="editClaimButton"
+          >
+            <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+          </button>
+        </h2>
+      </div>
     </div>
 
     <!-- Project Details -->
@@ -37,41 +49,52 @@
             <div class="text-sm mb-3">
               <div class="truncate">
                 <fa icon="user" class="fa-fw text-slate-400"></fa>
-                {{
-                  serverUtil.didInfo(issuer, activeDid, allMyDids, allContacts)
-                }}
+                {{ issuerInfoObject?.displayName }}
                 <span v-if="!serverUtil.isEmptyOrHiddenDid(issuer)">
-                  <button
-                    @click="
-                      libsUtil.doCopyTwoSecRedo(
-                        issuer,
-                        () => (showDidCopy = !showDidCopy),
-                      )
-                    "
-                    class="ml-2 mr-2"
+                  <a
+                    :href="`/did/${issuer}`"
+                    target="_blank"
+                    class="text-blue-500"
                   >
-                    <fa icon="copy" class="text-slate-400 fa-fw"></fa>
-                  </button>
-                  <span v-show="showDidCopy">Copied DID</span>
+                    <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                  </a>
+                </span>
+                <span v-else-if="serverUtil.isHiddenDid(issuer)">
+                  <fa
+                    icon="info-circle"
+                    class="fa-fw text-blue-500 cursor-pointer"
+                    @click="openHiddenDidDialog()"
+                  />
                 </span>
               </div>
               <div v-if="startTime">
                 <fa icon="calendar" class="fa-fw text-slate-400"></fa>
-                {{ startTime }}
+                Starts {{ startTime }}
+              </div>
+              <div v-if="endTime">
+                <fa icon="calendar" class="fa-fw text-slate-400"></fa>
+                Ends {{ endTime }}
               </div>
               <div v-if="latitude || longitude">
                 <fa icon="location-dot" class="fa-fw text-slate-400"></fa>
                 <a
                   :href="getOpenStreetMapUrl()"
                   target="_blank"
-                  class="underline"
+                  class="underline text-blue-500"
                   >Map View
-                  <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                  <fa
+                    icon="arrow-up-right-from-square"
+                    class="fa-fw text-blue-500"
+                  />
                 </a>
               </div>
               <div v-if="url">
                 <fa icon="globe" class="fa-fw text-slate-400"></fa>
-                <a :href="addScheme(url)" target="_blank" class="underline">
+                <a
+                  :href="addScheme(url)"
+                  target="_blank"
+                  class="underline text-blue-500"
+                >
                   {{ domainForWebsite(this.url) }}
                   <fa icon="arrow-up-right-from-square" class="fa-fw" />
                 </a>
@@ -104,15 +127,6 @@
           <fa icon="file-lines" class="pl-2 pt-1 text-blue-500" />
         </a>
       </div>
-
-      <button
-        v-if="activeDid === issuer || activeDid === agentDid"
-        type="button"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-        @click="onEditClick()"
-      >
-        Edit
-      </button>
     </div>
 
     <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
@@ -159,14 +173,73 @@
       </div>
     </div>
 
-    <div v-if="activeDid && isRegistered" class="mt-4">
+    <div v-if="activeDid && isRegistered">
+      <div class="text-center">
+        <p class="mt-2 mt-4 text-center">Record a contribution from:</p>
+      </div>
+      <ul
+        class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5 mt-2"
+      >
+        <li @click="openGiftDialogToProject({ name: 'you', did: activeDid })">
+          <fa icon="hand" class="fa-fw text-blue-500 text-5xl cursor-pointer" />
+          <h3
+            class="mt-5 text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
+          >
+            You
+          </h3>
+        </li>
+        <li @click="openGiftDialogToProject()">
+          <img
+            src="../assets/blank-square.svg"
+            class="mx-auto border border-blue-300 rounded-md mb-1 cursor-pointer"
+          />
+          <h3
+            class="text-xs text-blue-500 italic font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
+          >
+            Unnamed/Unknown
+          </h3>
+        </li>
+        <li
+          v-for="contact in allContacts.slice(0, 5)"
+          :key="contact.did"
+          @click="openGiftDialogToProject(contact)"
+        >
+          <EntityIcon
+            :contact="contact"
+            :iconSize="64"
+            class="mx-auto border border-blue-300 rounded-md mb-1 cursor-pointer"
+          />
+          <h3
+            class="text-xs text-blue-500 font-medium text-ellipsis whitespace-nowrap overflow-hidden cursor-pointer"
+          >
+            {{ contact.name || "(no name)" }}
+          </h3>
+        </li>
+        <li>
+          <span
+            v-if="allContacts.length >= 5"
+            @click="onClickAllContactsGifting()"
+            class="flex align-bottom text-xs text-blue-500 mt-12 cursor-pointer"
+          >
+            ... or someone else...
+          </span>
+        </li>
+      </ul>
+      <GiftedDialog ref="giveDialogToThis" :toProjectId="this.projectId" />
+    </div>
+
+    <!-- Offers & Gifts to & from this -->
+    <div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
+      <!-- First, offers on the left-->
+      <div class="bg-slate-100 px-4 py-3 rounded-md">
+        <div v-if="activeDid && isRegistered">
           <div class="text-center">
             <button
               data-testId="offerButton"
               @click="openOfferDialog()"
-          class="block w-full text-lg 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 px-2 py-3 rounded-md"
+              class="block w-full 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-1 rounded-md"
             >
-          Offer (maybe with conditions)...
+              Offer to this (maybe with conditions)...
             </button>
           </div>
         </div>
@@ -176,69 +249,7 @@
           :projectName="this.name"
         />
 
-    <div v-if="activeDid && isRegistered">
-      <div class="text-center">
-        <p class="mt-2 mt-4 text-center">Record a contribution from:</p>
-      </div>
-      <ul
-        class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mb-5"
-      >
-        <li @click="openGiftDialog({ name: 'you', did: activeDid })">
-          <fa icon="hand" class="fa-fw text-slate-400 text-5xl" />
-          <h3
-            class="mt-5 text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-          >
-            You
-          </h3>
-        </li>
-        <li @click="openGiftDialog()">
-          <img
-            src="../assets/blank-square.svg"
-            class="mx-auto border border-slate-300 rounded-md mb-1"
-          />
-          <h3
-            class="text-xs italic font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-          >
-            Unnamed/Unknown
-          </h3>
-        </li>
-        <li
-          v-for="contact in allContacts.slice(0, 6)"
-          :key="contact.did"
-          @click="openGiftDialog(contact)"
-        >
-          <EntityIcon
-            :contact="contact"
-            :iconSize="64"
-            class="mx-auto border border-slate-300 rounded-md mb-1 cursor-pointer"
-          />
-          <h3
-            class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
-          >
-            {{ contact.name || "(no name)" }}
-          </h3>
-        </li>
-      </ul>
-
-      <!--
-       Ideally, this button should only be visible when the active account has more than 7 or 11 contacts in their list
-        (we want to limit the grid count above to 8 or 12 accounts to keep it compact)
-      -->
-      <a
-        v-if="allContacts.length >= 7"
-        @click="onClickAllContactsGifting()"
-        class="block text-center text-md font-bold bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
-      >
-        Show More Contacts&hellip;
-      </a>
-
-      <GiftedDialog ref="customGiveDialog" :projectId="this.projectId" />
-    </div>
-
-    <!-- Offers & Gifts to & from this -->
-    <div class="grid items-start grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
-      <div class="bg-slate-100 px-4 py-3 rounded-md">
-        <h3 class="text-sm font-semibold mb-3">Offered To This Idea</h3>
+        <h3 class="text-lg font-bold mb-3 mt-4">Offered To This Idea</h3>
 
         <div v-if="offersToThis.length === 0">
           (None yet. Wanna
@@ -300,15 +311,27 @@
         </div>
       </div>
 
-      <div class="bg-slate-100 px-4 py-3 rounded-md">
-        <h3 class="text-sm font-semibold mb-3">Given To This Idea</h3>
+      <!-- Now, gives TO this project in the middle -->
+      <!-- (similar to "FROM" gift display below) -->
+      <div class="bg-slate-100 px-4 py-3 rounded-md" data-testId="gives-to">
+        <div v-if="activeDid && isRegistered">
+          <div class="text-center">
+            <button
+              @click="openGiftDialogToProject()"
+              class="block w-full 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-1rounded-md"
+            >
+              Given To This...
+            </button>
+          </div>
+        </div>
+
+        <h3 class="text-lg font-bold mb-3 mt-4">Given To This Idea</h3>
 
         <div v-if="givesToThis.length === 0">
           (None yet. If you've seen something, say something by clicking a
           contact above.)
         </div>
 
-        <!-- similar to gift display below -->
         <ul v-else class="text-sm border-t border-slate-300">
           <li
             v-for="give in givesToThis"
@@ -346,12 +369,22 @@
               <a @click="onClickLoadClaim(give.jwtId)">
                 <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
               </a>
+
               <a
-                v-if="checkIsConfirmable(give)"
-                @click="confirmConfirmClaim(give)"
+                v-if="
+                  checkIsConfirmable(give) &&
+                  !recentlyCheckedAndUnconfirmableJwts.includes(give.jwtId)
+                "
+                @click="deepCheckConfirmable(give)"
               >
                 <fa icon="circle-check" class="text-blue-500 cursor-pointer" />
               </a>
+              <a v-else-if="checkingConfirmationForJwtId === give.jwtId">
+                <fa icon="spinner" class="fa-spin-pulse" />
+              </a>
+              <a v-else @click="shallowNotifyWhyCannotConfirm(give)">
+                <fa icon="circle-check" class="text-slate-500 cursor-pointer" />
+              </a>
             </div>
             <div v-if="give.fullClaim.image" class="flex justify-center">
               <a :href="give.fullClaim.image" target="_blank">
@@ -365,17 +398,31 @@
         </div>
       </div>
 
-      <div class="grid items-start grid-cols-1 gap-4">
-        <div
-          v-if="givesProvidedByThis.length > 0"
-          class="bg-slate-100 px-4 py-3 rounded-md"
+      <!-- Finally, gives FROM this project on the right -->
+      <!-- (similar to "TO" gift display above) -->
+      <div class="bg-slate-100 px-4 py-3 rounded-md" data-testId="gives-from">
+        <div v-if="activeDid && isRegistered">
+          <div class="text-center">
+            <button
+              @click="openGiftDialogFromProject()"
+              class="block w-full 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-1 rounded-md"
             >
-          <div>
-            <h3 class="text-sm font-semibold border-b">
-              Individuals Getting Contributions From This
+              Given By This...
+            </button>
+          </div>
+        </div>
+        <GiftedDialog
+          ref="giveDialogFromThis"
+          :fromProjectId="this.projectId"
+        />
+
+        <h3 class="text-lg font-bold mb-3 mt-4">
+          Benefitted From This Project
         </h3>
-            <!-- similar to gift display above -->
-            <ul class="text-sm border-t border-slate-300">
+
+        <div v-if="givesProvidedByThis.length === 0">(None yet.)</div>
+
+        <ul v-else class="text-sm border-t border-slate-300">
           <li
             v-for="give in givesProvidedByThis"
             :key="give.id"
@@ -407,9 +454,32 @@
               <fa icon="comment" class="fa-fw text-slate-400" />
               {{ give.description }}
             </div>
+            <div class="flex justify-between">
               <a @click="onClickLoadClaim(give.jwtId)">
                 <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
               </a>
+
+              <a
+                v-if="
+                  checkIsConfirmable(give) &&
+                  !recentlyCheckedAndUnconfirmableJwts.includes(give.jwtId)
+                "
+                @click="deepCheckConfirmable(give)"
+              >
+                <fa icon="circle-check" class="text-blue-500 cursor-pointer" />
+              </a>
+              <a v-else-if="checkingConfirmationForJwtId === give.jwtId">
+                <fa icon="spinner" class="fa-spin-pulse" />
+              </a>
+              <a v-else @click="shallowNotifyWhyCannotConfirm(give)">
+                <fa icon="circle-check" class="text-slate-500 cursor-pointer" />
+              </a>
+            </div>
+            <div v-if="give.fullClaim.image" class="flex justify-center">
+              <a :href="give.fullClaim.image" target="_blank">
+                <img :src="give.fullClaim.image" class="h-24 mt-2 rounded-xl" />
+              </a>
+            </div>
           </li>
         </ul>
         <div v-if="givesProvidedByHitLimit" class="text-center">
@@ -417,9 +487,9 @@
         </div>
       </div>
     </div>
-      </div>
-    </div>
   </section>
+
+  <HiddenDidDialog ref="hiddenDidDialog" />
 </template>
 
 <script lang="ts">
@@ -434,14 +504,15 @@ import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { Account } from "@/db/tables/accounts";
+import {
+  db,
+  logConsoleAndDb,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import * as libsUtil from "@/libs/util";
 import {
-  BLANK_GENERIC_SERVER_RECORD,
   GenericCredWrapper,
-  getHeaders,
   GiveSummaryRecord,
   GiveVerifiableCredential,
   OfferSummaryRecord,
@@ -449,11 +520,14 @@ import {
   PlanSummaryRecord,
 } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
+import { retrieveAccountDids } from "@/libs/util";
+import HiddenDidDialog from "@/components/HiddenDidDialog.vue";
 
 @Component({
   components: {
     EntityIcon,
     GiftedDialog,
+    HiddenDidDialog,
     OfferDialog,
     ProjectIcon,
     QuickNav,
@@ -465,10 +539,13 @@ export default class ProjectViewView extends Vue {
 
   activeDid = "";
   agentDid = "";
+  agentDidVisibleToDids: Array<string> = [];
   allMyDids: Array<string> = [];
   allContacts: Array<Contact> = [];
   apiServer = "";
+  checkingConfirmationForJwtId = "";
   description = "";
+  endTime = "";
   expanded = false;
   fulfilledByThis: PlanSummaryRecord | null = null;
   fulfillersToThis: Array<PlanSummaryRecord> = [];
@@ -480,13 +557,19 @@ export default class ProjectViewView extends Vue {
   imageUrl = "";
   isRegistered = false;
   issuer = "";
+  issuerInfoObject: {
+    known: boolean;
+    displayName: string;
+    profileImageUrl?: string;
+  } | null = null;
+  issuerVisibleToDids: Array<string> = [];
   latitude = 0;
   longitude = 0;
   name = "";
   offersToThis: Array<OfferSummaryRecord> = [];
   offersHitLimit = false;
   projectId = ""; // handle ID
-  showDidCopy = false;
+  recentlyCheckedAndUnconfirmableJwts: string[] = [];
   startTime = "";
   truncatedDesc = "";
   truncateLength = 40;
@@ -502,10 +585,24 @@ export default class ProjectViewView extends Vue {
     this.allContacts = await db.contacts.toArray();
     this.isRegistered = !!settings.isRegistered;
 
-    await accountsDB.open();
-    const accounts = accountsDB.accounts;
-    const accountsArr: Account[] = await accounts?.toArray();
-    this.allMyDids = accountsArr.map((acc) => acc.did);
+    try {
+      this.allMyDids = await retrieveAccountDids();
+    } catch (error) {
+      // continue because we want to see claims, even anonymously
+      logConsoleAndDb(
+        "Error retrieving all account DIDs on home page:" + error,
+        true,
+      );
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error Loading Profile",
+          text: "See the Help page to fix problems with your personal data.",
+        },
+        5000,
+      );
+    }
 
     const pathParam = window.location.pathname.substring("/project/".length);
     if (pathParam) {
@@ -536,7 +633,7 @@ export default class ProjectViewView extends Vue {
 
     const url =
       this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(projectId);
-    const headers = await getHeaders(userDid);
+    const headers = await serverUtil.getHeaders(userDid);
 
     try {
       const resp = await this.axios.get(url, { headers });
@@ -549,9 +646,26 @@ export default class ProjectViewView extends Vue {
             " " +
             startDateTime.toLocaleTimeString();
         }
+        const endTime = resp.data.claim?.endTime;
+        if (endTime != null) {
+          const endDateTime = new Date(endTime);
+          this.endTime =
+            endDateTime.toLocaleDateString() +
+            " " +
+            endDateTime.toLocaleTimeString();
+        }
         this.agentDid = resp.data.claim?.agent?.identifier;
+        this.agentDidVisibleToDids =
+          resp.data.claim?.agent?.identifierVisibleToDids || [];
         this.imageUrl = resp.data.claim?.image;
         this.issuer = resp.data.issuer;
+        this.issuerInfoObject = serverUtil.didInfoObject(
+          this.issuer,
+          this.activeDid,
+          this.allMyDids,
+          this.allContacts,
+        );
+        this.issuerVisibleToDids = resp.data.issuerVisibleToDids || [];
         this.name = resp.data.claim?.name || "(no name)";
         this.description = resp.data.claim?.description || "(no description)";
         this.truncatedDesc = this.description.slice(0, this.truncateLength);
@@ -584,49 +698,20 @@ export default class ProjectViewView extends Vue {
       );
     }
 
+    this.givesToThis = [];
     this.loadGives();
 
+    this.givesProvidedByThis = [];
     this.loadGivesProvidedBy();
 
+    this.offersToThis = [];
     this.loadOffers();
 
+    this.fulfillersToThis = [];
     this.loadPlanFulfillersTo();
 
-    const fulfilledByUrl =
-      this.apiServer +
-      "/api/v2/report/planFulfilledByPlan?planHandleId=" +
-      encodeURIComponent(projectId);
-    try {
-      const resp = await this.axios.get(fulfilledByUrl, { headers });
-      if (resp.status === 200) {
-        this.fulfilledByThis = resp.data.data;
-      } else {
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "Failed to retrieve plans fulfilled by this project.",
-          },
-          5000,
-        );
-      }
-    } catch (error: unknown) {
-      const serverError = error as AxiosError;
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong retrieving plans fulfilled by this project.",
-        },
-        5000,
-      );
-      console.error(
-        "Error retrieving plans fulfilled by this project:",
-        serverError.message,
-      );
-    }
+    this.fulfilledByThis = null;
+    this.loadPlanFulfilledBy();
   }
 
   async loadGives() {
@@ -641,7 +726,7 @@ export default class ProjectViewView extends Vue {
     }
     const givesInUrl = givesUrl + postfix;
 
-    const headers = await getHeaders(this.activeDid);
+    const headers = await serverUtil.getHeaders(this.activeDid);
     try {
       const resp = await this.axios.get(givesInUrl, { headers });
       if (resp.status === 200 && resp.data.data) {
@@ -676,6 +761,56 @@ export default class ProjectViewView extends Vue {
     }
   }
 
+  async loadGivesProvidedBy() {
+    const providedByUrl =
+      this.apiServer +
+      "/api/v2/report/givesProvidedBy?providerId=" +
+      encodeURIComponent(this.projectId);
+    let postfix = "";
+    if (this.givesProvidedByThis.length > 0) {
+      postfix =
+        "&beforeId=" +
+        this.givesProvidedByThis[this.givesProvidedByThis.length - 1].jwtId;
+    }
+    const providedByFullUrl = providedByUrl + postfix;
+
+    const headers = await serverUtil.getHeaders(this.activeDid);
+    try {
+      const resp = await this.axios.get(providedByFullUrl, { headers });
+      if (resp.status === 200) {
+        this.givesProvidedByThis = this.givesProvidedByThis.concat(
+          resp.data.data,
+        );
+        this.givesProvidedByHitLimit = resp.data.hitLimit;
+      } else {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to retrieve gives that were provided by this project.",
+          },
+          5000,
+        );
+      }
+    } catch (error: unknown) {
+      const serverError = error as AxiosError;
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Something went wrong retrieving gives that were provided by this project.",
+        },
+        5000,
+      );
+      console.error(
+        "Something went wrong retrieving gives that were provided by this project:",
+        serverError.message,
+      );
+    }
+  }
+
   async loadOffers() {
     const offersUrl =
       this.apiServer +
@@ -688,7 +823,7 @@ export default class ProjectViewView extends Vue {
     }
     const offersInUrl = offersUrl + postfix;
 
-    const headers = await getHeaders(this.activeDid);
+    const headers = await serverUtil.getHeaders(this.activeDid);
     try {
       const resp = await this.axios.get(offersInUrl, { headers });
       if (resp.status === 200 && resp.data.data) {
@@ -736,7 +871,7 @@ export default class ProjectViewView extends Vue {
     }
     const fulfillsInUrl = fulfillsUrl + postfix;
 
-    const headers = await getHeaders(this.activeDid);
+    const headers = await serverUtil.getHeaders(this.activeDid);
     try {
       const resp = await this.axios.get(fulfillsInUrl, { headers });
       if (resp.status === 200) {
@@ -771,34 +906,23 @@ export default class ProjectViewView extends Vue {
     }
   }
 
-  async loadGivesProvidedBy() {
-    const providedByUrl =
+  async loadPlanFulfilledBy() {
+    const fulfilledByUrl =
       this.apiServer +
-      "/api/v2/report/givesProvidedBy?providerId=" +
+      "/api/v2/report/planFulfilledByPlan?planHandleId=" +
       encodeURIComponent(this.projectId);
-    let postfix = "";
-    if (this.givesProvidedByThis.length > 0) {
-      postfix =
-        "&beforeId=" +
-        this.givesProvidedByThis[this.givesProvidedByThis.length - 1].jwtId;
-    }
-    const providedByFullUrl = providedByUrl + postfix;
-
-    const headers = await getHeaders(this.activeDid);
+    const headers = await serverUtil.getHeaders(this.activeDid);
     try {
-      const resp = await this.axios.get(providedByFullUrl, { headers });
+      const resp = await this.axios.get(fulfilledByUrl, { headers });
       if (resp.status === 200) {
-        this.givesProvidedByThis = this.givesProvidedByThis.concat(
-          resp.data.data,
-        );
-        this.givesProvidedByHitLimit = resp.data.hitLimit;
+        this.fulfilledByThis = resp.data.data;
       } else {
         this.$notify(
           {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: "Failed to retrieve gives that were provided by this project.",
+            text: "Failed to retrieve plans fulfilled by this project.",
           },
           5000,
         );
@@ -810,12 +934,12 @@ export default class ProjectViewView extends Vue {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "Something went wrong retrieving gives that were provided by this project.",
+          text: "Something went wrong retrieving plans fulfilled by this project.",
         },
         5000,
       );
       console.error(
-        "Something went wrong retrieving gives that were provided by this project:",
+        "Error retrieving plans fulfilled by this project:",
         serverError.message,
       );
     }
@@ -847,12 +971,21 @@ export default class ProjectViewView extends Vue {
     );
   }
 
-  openGiftDialog(contact?: libsUtil.GiverReceiverInputInfo) {
-    (this.$refs.customGiveDialog as GiftedDialog).open(
+  openGiftDialogToProject(contact?: libsUtil.GiverReceiverInputInfo) {
+    (this.$refs.giveDialogToThis as GiftedDialog).open(
       contact,
       undefined,
       undefined,
-      "Given by " + (contact?.name || "someone not named"),
+      (contact?.name || "Someone not named") + ` gave to this project`,
+    );
+  }
+
+  openGiftDialogFromProject() {
+    (this.$refs.giveDialogFromThis as GiftedDialog).open(
+      undefined,
+      { did: this.activeDid, name: "You" },
+      undefined,
+      `This project gave to you`,
     );
   }
 
@@ -879,7 +1012,7 @@ export default class ProjectViewView extends Vue {
 
   checkIsFulfillable(offer: OfferSummaryRecord) {
     const offerRecord: GenericCredWrapper<OfferVerifiableCredential> = {
-      ...BLANK_GENERIC_SERVER_RECORD,
+      ...serverUtil.BLANK_GENERIC_SERVER_RECORD,
       claim: offer.fullClaim,
       claimType: "Offer",
       issuer: offer.offeredByDid,
@@ -889,14 +1022,14 @@ export default class ProjectViewView extends Vue {
 
   onClickFulfillGiveToOffer(offer: OfferSummaryRecord) {
     const offerRecord: GenericCredWrapper<OfferVerifiableCredential> = {
-      ...BLANK_GENERIC_SERVER_RECORD,
+      ...serverUtil.BLANK_GENERIC_SERVER_RECORD,
       claim: offer.fullClaim,
       issuer: offer.offeredByDid,
     };
     const giver: libsUtil.GiverReceiverInputInfo = {
       did: libsUtil.offerGiverDid(offerRecord),
     };
-    (this.$refs.customGiveDialog as GiftedDialog).open(
+    (this.$refs.giveDialogToThis as GiftedDialog).open(
       giver,
       undefined,
       offer.handleId,
@@ -932,20 +1065,70 @@ export default class ProjectViewView extends Vue {
     }
   }
 
-  checkIsConfirmable(give: GiveSummaryRecord) {
+  /**
+   * @param confirmerIdList optional list of DIDs who confirmed; if missing, doesn't do a full server check
+   */
+  checkIsConfirmable(give: GiveSummaryRecord, confirmerIdList?: string[]) {
     const giveDetails: GenericCredWrapper<GiveVerifiableCredential> = {
-      ...BLANK_GENERIC_SERVER_RECORD,
+      ...serverUtil.BLANK_GENERIC_SERVER_RECORD,
       claim: give.fullClaim,
       claimType: "GiveAction",
-      issuer: give.agentDid,
+      issuer: give.issuerDid,
     };
     return libsUtil.isGiveRecordTheUserCanConfirm(
       this.isRegistered,
       giveDetails,
       this.activeDid,
+      confirmerIdList,
     );
   }
 
+  shallowNotifyWhyCannotConfirm(give: GiveSummaryRecord) {
+    const confirmerIds = this.recentlyCheckedAndUnconfirmableJwts.includes(
+      give.jwtId,
+    )
+      ? [this.activeDid]
+      : [];
+    libsUtil.notifyWhyCannotConfirm(
+      this.$notify,
+      this.isRegistered,
+      "GiveAction",
+      give,
+      this.activeDid,
+      confirmerIds,
+    );
+  }
+
+  async deepCheckConfirmable(give: GiveSummaryRecord) {
+    this.checkingConfirmationForJwtId = give.jwtId;
+    const confirmerInfo: libsUtil.ConfirmerData | undefined =
+      await libsUtil.retrieveConfirmerIdList(
+        this.apiServer,
+        give.jwtId,
+        give.issuerDid,
+        this.activeDid,
+      );
+    if (
+      this.checkIsConfirmable(give, confirmerInfo?.confirmerIdList as string[])
+    ) {
+      this.confirmConfirmClaim(give);
+    } else {
+      this.recentlyCheckedAndUnconfirmableJwts = [
+        ...this.recentlyCheckedAndUnconfirmableJwts,
+        give.jwtId,
+      ];
+      libsUtil.notifyWhyCannotConfirm(
+        this.$notify,
+        this.isRegistered,
+        "GiveAction",
+        give,
+        this.activeDid,
+        confirmerInfo?.confirmerIdList as string[],
+      );
+    }
+    this.checkingConfirmationForJwtId = "";
+  }
+
   confirmConfirmClaim(give: GiveSummaryRecord) {
     this.$notify(
       {
@@ -994,6 +1177,10 @@ export default class ProjectViewView extends Vue {
         },
         5000,
       );
+      this.recentlyCheckedAndUnconfirmableJwts = [
+        ...this.recentlyCheckedAndUnconfirmableJwts,
+        give.jwtId,
+      ];
     } else {
       console.error("Got error submitting the confirmation:", result);
       const message =
@@ -1010,5 +1197,15 @@ export default class ProjectViewView extends Vue {
       );
     }
   }
+
+  openHiddenDidDialog() {
+    (this.$refs.hiddenDidDialog as HiddenDidDialog).open(
+      "creator",
+      this.issuerVisibleToDids,
+      this.allContacts,
+      this.activeDid,
+      this.allMyDids,
+    );
+  }
 }
 </script>

src/views/ProjectsView.vue

@@ -4,7 +4,9 @@
 
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
     <!-- Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">Your Ideas</h1>
+    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+      Your Project Ideas
+    </h1>
 
     <OnboardingDialog ref="onboardingDialog" />
 
@@ -261,8 +263,7 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
-import * as libsUtil from "@/libs/util";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import EntityIcon from "@/components/EntityIcon.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
@@ -278,6 +279,7 @@ import {
   OfferSummaryRecord,
   PlanData,
 } from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
 import { OnboardPage } from "@/libs/util";
 
 @Component({
@@ -326,9 +328,7 @@ export default class ProjectsView extends Vue {
 
       this.allContacts = await db.contacts.toArray();
 
-      await accountsDB.open();
-      const allAccounts = await accountsDB.accounts.toArray();
-      this.allMyDids = allAccounts.map((acc) => acc.did);
+      this.allMyDids = await libsUtil.retrieveAccountDids();
 
       if (!settings.finishedOnboarding) {
         (this.$refs.onboardingDialog as OnboardingDialog).open(
@@ -336,7 +336,7 @@ export default class ProjectsView extends Vue {
         );
       }
 
-      if (allAccounts.length === 0) {
+      if (this.allMyDids.length === 0) {
         console.error("No accounts found.");
         this.errNote("You need an identifier to load your projects.");
       } else {
@@ -355,20 +355,20 @@ export default class ProjectsView extends Vue {
    **/
   async projectDataLoader(url: string) {
     try {
-      const headers = await getHeaders(this.activeDid);
+      const headers = await getHeaders(this.activeDid, this.$notify);
       this.isLoading = true;
       const resp = await this.axios.get(url, { headers } as AxiosRequestConfig);
       if (resp.status === 200 && resp.data.data) {
         const plans: PlanData[] = resp.data.data;
         for (const plan of plans) {
-          const { name, description, handleId, image, issuerDid, rowid } = plan;
+          const { name, description, handleId, image, issuerDid, rowId } = plan;
           this.projects.push({
             name,
             description,
             image,
             handleId,
             issuerDid,
-            rowid,
+            rowId,
           });
         }
       } else {
@@ -395,7 +395,7 @@ export default class ProjectsView extends Vue {
   async loadMoreProjectData(payload: boolean) {
     if (this.projects.length > 0 && payload) {
       const latestProject = this.projects[this.projects.length - 1];
-      await this.loadProjects(`beforeId=${latestProject.rowid}`);
+      await this.loadProjects(`beforeId=${latestProject.rowId}`);
     }
   }
 
@@ -475,9 +475,9 @@ export default class ProjectsView extends Vue {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: "Failed to get offers from the server. Try again later.",
+            text: "Failed to get offers from the server.",
           },
-          -1,
+          5000,
         );
       }
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -490,7 +490,7 @@ export default class ProjectsView extends Vue {
           title: "Error",
           text: "Got an error loading offers.",
         },
-        -1,
+        5000,
       );
     } finally {
       this.isLoading = false;

src/views/QuickActionBvcEndView.vue

@@ -22,7 +22,7 @@
     <div>
       <h2 class="text-2xl m-2">Confirm</h2>
       <div v-if="loadingConfirms" class="flex justify-center">
-        <fa icon="spinner" class="animate-spin" />
+        <fa icon="spinner" class="fa-spin-pulse" />
       </div>
       <div v-else-if="claimsToConfirm.length === 0">
         There are no claims yet today for you to confirm.
@@ -145,7 +145,11 @@ import { Router } from "vue-router";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import {
+  accountsDBPromise,
+  db,
+  retrieveSettingsForActiveAccount,
+} from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
   BVC_MEETUPS_PROJECT_CLAIM_ID,
@@ -207,6 +211,7 @@ export default class QuickActionBvcBeginView extends Vue {
         suppressMilliseconds: true,
       }) || "";
 
+    const accountsDB = await accountsDBPromise;
     await accountsDB.open();
     const allAccounts = await accountsDB.accounts.toArray();
     this.allMyDids = allAccounts.map((acc) => acc.did);

src/views/RecentOffersToUserProjectsView.vue

@@ -81,7 +81,7 @@ import GiftedDialog from "@/components/GiftedDialog.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
   didInfo,
@@ -89,6 +89,7 @@ import {
   getNewOffersToUserProjects,
   OfferToPlanSummaryRecord,
 } from "@/libs/endorserServer";
+import { retrieveAccountDids } from "@/libs/util";
 
 @Component({
   components: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav },
@@ -119,11 +120,7 @@ export default class RecentOffersToUserView extends Vue {
 
       this.allContacts = await db.contacts.toArray();
 
-      await accountsDB.open();
-      const allAccounts = await accountsDB.accounts.toArray();
-      if (allAccounts.length > 0) {
-        this.allMyDids = allAccounts.map((acc) => acc.did);
-      }
+      this.allMyDids = await retrieveAccountDids();
 
       const offersToUserProjectsData = await getNewOffersToUserProjects(
         this.axios,

src/views/RecentOffersToUserView.vue

@@ -74,7 +74,7 @@ import EntityIcon from "@/components/EntityIcon.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import {
   didInfo,
@@ -82,6 +82,7 @@ import {
   getNewOffersToUser,
   OfferSummaryRecord,
 } from "@/libs/endorserServer";
+import { retrieveAccountDids } from "@/libs/util";
 
 @Component({
   components: { EntityIcon, GiftedDialog, InfiniteScroll, QuickNav },
@@ -111,11 +112,7 @@ export default class RecentOffersToUserView extends Vue {
 
       this.allContacts = await db.contacts.toArray();
 
-      await accountsDB.open();
-      const allAccounts = await accountsDB.accounts.toArray();
-      if (allAccounts.length > 0) {
-        this.allMyDids = allAccounts.map((acc) => acc.did);
-      }
+      this.allMyDids = await retrieveAccountDids();
 
       const offersToUserData = await getNewOffersToUser(
         this.axios,

src/views/SearchAreaView.vue

@@ -68,7 +68,7 @@
       </div>
     </div>
 
-    <div class="mb-4 aspect-video">
+    <div class="aspect-video">
       <l-map
         ref="map"
         :center="[localCenterLat, localCenterLong]"
@@ -129,7 +129,7 @@ const DEFAULT_ZOOM = 2;
     LTileLayer,
   },
 })
-export default class DiscoverView extends Vue {
+export default class SearchAreaView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   isChoosingSearchBox = false;
@@ -166,8 +166,10 @@ export default class DiscoverView extends Vue {
       // This doesn't seem like the right approach but it's the only way I can find to get the screen bounds.
       const bounds = event.target.boxZoom?._map?.getBounds();
       if (bounds) {
-        latDiff = Math.abs(bounds._northEast.lat - bounds._southWest.lat) / 8;
-        longDiff = Math.abs(bounds._northEast.lng - bounds._southWest.lng) / 8;
+        latDiff =
+          Math.abs(bounds.getNorthEast().lat - bounds.getSouthWest().lat) / 8;
+        longDiff =
+          Math.abs(bounds.getNorthEast().lng - bounds.getSouthWest().lng) / 8;
       }
       this.localLatDiff = latDiff;
       this.localLongDiff = longDiff;
@@ -226,7 +228,7 @@ export default class DiscoverView extends Vue {
             title: "Error Updating Search Settings",
             text: "Try going to a different page and then coming back.",
           },
-          -1,
+          5000,
         );
         console.error(
           "Telling user to retry the location search setting because:",
@@ -241,7 +243,7 @@ export default class DiscoverView extends Vue {
           title: "No Location Selected",
           text: "Select a location on the map.",
         },
-        -1,
+        5000,
       );
     }
   }
@@ -269,7 +271,7 @@ export default class DiscoverView extends Vue {
           title: "Error Updating Search Settings",
           text: "Try going to a different page and then coming back.",
         },
-        -1,
+        5000,
       );
       console.error(
         "Telling user to retry the location search setting because:",

src/views/SeedBackupView.vue

@@ -94,19 +94,22 @@
         </button>
       </div>
     </div>
-    <div v-else>You do not have an active identifier.</div>
+    <div v-else>You do not have an active identity.</div>
   </section>
 </template>
 
 <script lang="ts">
-import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, retrieveSettingsForActiveAccount } from "@/db/index";
+import { retrieveSettingsForActiveAccount } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
+import {
+  retrieveAccountCount,
+  retrieveFullyDecryptedAccount,
+} from "@/libs/util";
 
 @Component({ components: { QuickNav } })
 export default class SeedBackupView extends Vue {
@@ -124,20 +127,18 @@ export default class SeedBackupView extends Vue {
       const settings = await retrieveSettingsForActiveAccount();
       const activeDid = settings.activeDid || "";
 
-      await accountsDB.open();
-      const accounts = await accountsDB.accounts.toArray();
-      this.numAccounts = accounts.length;
-      this.activeAccount = R.find((acc) => acc.did === activeDid, accounts);
+      this.numAccounts = await retrieveAccountCount();
+      this.activeAccount = await retrieveFullyDecryptedAccount(activeDid);
     } catch (err: unknown) {
       console.error("Got an error loading an identifier:", err);
       this.$notify(
         {
           group: "alert",
           type: "danger",
-          title: "Error Loading Account",
+          title: "Error Loading Profile",
           text: "Got an error loading your seed data.",
         },
-        -1,
+        3000,
       );
     }
   }

src/views/ShareMyContactInfoView.vue

@@ -41,7 +41,6 @@
 </template>
 
 <script lang="ts">
-import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
@@ -49,8 +48,9 @@ import { useClipboard } from "@vueuse/core";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
 import { NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
-import { generateEndorserJwtForAccount } from "@/libs/endorserServer";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { generateEndorserJwtUrlForAccount } from "@/libs/endorserServer";
+import { retrieveAccountMetadata } from "@/libs/util";
 
 @Component({
   components: { QuickNav, TopMessage },
@@ -65,14 +65,12 @@ export default class ShareMyContactInfoView extends Vue {
     const isRegistered = !!settings.isRegistered;
     const profileImageUrl = settings.profileImageUrl || "";
 
-    await accountsDB.open();
-    const accounts = await accountsDB.accounts.toArray();
-    const account = R.find((acc) => acc.did === activeDid, accounts);
+    const account = await retrieveAccountMetadata(activeDid);
 
     const numContacts = await db.contacts.count();
 
     if (account) {
-      const message = await generateEndorserJwtForAccount(
+      const message = await generateEndorserJwtUrlForAccount(
         account,
         isRegistered,
         givenName,

src/views/SharedPhotoView.vue

@@ -120,7 +120,7 @@ export default class SharedPhotoView extends Vue {
           title: "Error",
           text: "Got an error loading this data.",
         },
-        -1,
+        3000,
       );
     }
   }

src/views/StartView.vue

@@ -92,8 +92,11 @@ import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
 import { AppString, PASSKEYS_ENABLED } from "@/constants/app";
-import { accountsDB, retrieveSettingsForActiveAccount } from "@/db/index";
-import { registerSaveAndActivatePasskey } from "@/libs/util";
+import { retrieveSettingsForActiveAccount } from "@/db/index";
+import {
+  registerSaveAndActivatePasskey,
+  retrieveAccountCount,
+} from "@/libs/util";
 
 @Component({
   components: {},
@@ -108,8 +111,7 @@ export default class StartView extends Vue {
     const settings = await retrieveSettingsForActiveAccount();
     this.givenName = settings.firstName || "";
 
-    await accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
+    this.numAccounts = await retrieveAccountCount();
   }
 
   public onClickNewSeed() {

src/views/StatisticsView.vue

@@ -91,7 +91,7 @@ export default class StatisticsView extends Vue {
           title: "Mounting Error",
           text: error.message,
         },
-        -1,
+        5000,
       );
     }
   }

src/views/TestView.vue

@@ -35,7 +35,7 @@
             5000,
           )
         "
-        class="font-bold uppercase bg-slate-900 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-900 text-white px-3 py-2 rounded-md mr-2"
       >
         Toast
       </button>
@@ -49,10 +49,10 @@
               title: 'Information Alert',
               text: 'Just wanted you to know.',
             },
-            -1,
+            5000,
           )
         "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Info
       </button>
@@ -66,10 +66,10 @@
               title: 'Success Alert',
               text: 'Congratulations!',
             },
-            -1,
+            5000,
           )
         "
-        class="font-bold uppercase bg-emerald-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-emerald-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Success
       </button>
@@ -83,10 +83,10 @@
               title: 'Warning Alert',
               text: 'You might wanna look at this.',
             },
-            -1,
+            5000,
           )
         "
-        class="font-bold uppercase bg-amber-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-amber-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Warning
       </button>
@@ -100,10 +100,10 @@
               title: 'Danger Alert',
               text: 'Something terrible has happened!',
             },
-            -1,
+            5000,
           )
         "
-        class="font-bold uppercase bg-rose-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-rose-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Danger
       </button>
@@ -118,7 +118,7 @@
             -1,
           )
         "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Notif ON
       </button>
@@ -133,7 +133,7 @@
             -1,
           )
         "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Notif MUTE
       </button>
@@ -148,7 +148,7 @@
             -1,
           )
         "
-        class="font-bold uppercase bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-600 text-white px-3 py-2 rounded-md mr-2"
       >
         Notif OFF
       </button>
@@ -184,7 +184,7 @@
         Register Passkey
         <button
           @click="register()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           Simplewebauthn
         </button>
@@ -194,13 +194,13 @@
         Create JWT
         <button
           @click="createJwtSimplewebauthn()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           Simplewebauthn
         </button>
         <button
           @click="createJwtNavigator()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           Navigator
         </button>
@@ -210,19 +210,19 @@
         Verify New JWT
         <button
           @click="verifySimplewebauthn()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           Simplewebauthn
         </button>
         <button
           @click="verifyWebCrypto()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           WebCrypto
         </button>
         <button
           @click="verifyP256()"
-          class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
         >
           p256 - broken
         </button>
@@ -230,11 +230,25 @@
       <div v-else>Verify New JWT -- requires creation first</div>
       <button
         @click="verifyMyJwt()"
-        class="font-bold uppercase bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+        class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
       >
         Verify Hard-Coded JWT
       </button>
     </div>
+
+    <div class="mt-8">
+      <h2 class="text-xl font-bold mb-4">Encryption & Decryption</h2>
+      See console for more output.
+      <div>
+        <button
+          @click="testEncryptionDecryption()"
+          class="font-bold capitalize bg-slate-500 text-white px-3 py-2 rounded-md mr-2"
+        >
+          Run Test
+        </button>
+        Result: {{ encryptionTestResult }}
+      </div>
+    </div>
   </section>
 </template>
 
@@ -247,7 +261,8 @@ import { Router } from "vue-router";
 
 import QuickNav from "@/components/QuickNav.vue";
 import { AppString, NotificationIface } from "@/constants/app";
-import { accountsDB, db, retrieveSettingsForActiveAccount } from "@/db/index";
+import { db, retrieveSettingsForActiveAccount } from "@/db/index";
+import * as cryptoLib from "@/libs/crypto";
 import * as vcLib from "@/libs/crypto/vc";
 import {
   PeerSetup,
@@ -258,7 +273,7 @@ import {
 import {
   AccountKeyInfo,
   blobToBase64,
-  getAccount,
+  retrieveAccountMetadata,
   registerAndSavePasskey,
   SHARED_PHOTO_BASE64_KEY,
 } from "@/libs/util";
@@ -279,6 +294,9 @@ const TEST_PAYLOAD = {
 export default class Help extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
+  // for encryption/decryption
+  encryptionTestResult?: boolean;
+
   // for file import
   fileName?: string;
 
@@ -289,16 +307,14 @@ export default class Help extends Vue {
   peerSetup?: PeerSetup;
   userName?: string;
 
+  cryptoLib = cryptoLib;
+
   async mounted() {
     const settings = await retrieveSettingsForActiveAccount();
     this.activeDid = settings.activeDid || "";
     this.userName = settings.firstName;
 
-    await accountsDB.open();
-    const account: { identity?: string } | undefined = await accountsDB.accounts
-      .where("did")
-      .equals(this.activeDid)
-      .first();
+    const account = await retrieveAccountMetadata(this.activeDid);
     if (this.activeDid) {
       if (account) {
         this.credIdHex = account.passkeyCredIdHex as string;
@@ -367,8 +383,12 @@ export default class Help extends Vue {
     this.credIdHex = account.passkeyCredIdHex;
   }
 
+  public async testEncryptionDecryption() {
+    this.encryptionTestResult = await cryptoLib.testEncryptionDecryption();
+  }
+
   public async createJwtSimplewebauthn() {
-    const account: AccountKeyInfo | undefined = await getAccount(
+    const account: AccountKeyInfo | undefined = await retrieveAccountMetadata(
       this.activeDid || "",
     );
     if (!vcLib.isFromPasskey(account)) {
@@ -385,7 +405,7 @@ export default class Help extends Vue {
   }
 
   public async createJwtNavigator() {
-    const account: AccountKeyInfo | undefined = await getAccount(
+    const account: AccountKeyInfo | undefined = await retrieveAccountMetadata(
       this.activeDid || "",
     );
     if (!vcLib.isFromPasskey(account)) {

src/views/UserProfileView.vue

@@ -0,0 +1,184 @@
+<template>
+  <QuickNav selected="Discover" />
+  <TopMessage />
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
+        <!-- Back -->
+        <button
+          @click="$router.go(-1)"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        >
+          <fa icon="chevron-left" class="fa-fw"></fa>
+        </button>
+        Individual Profile
+      </h1>
+    </div>
+
+    <!-- Loading Animation -->
+    <div
+      class="fixed left-6 mt-16 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full"
+      v-if="isLoading"
+    >
+      <fa icon="spinner" class="fa-spin-pulse"></fa>
+    </div>
+
+    <div v-else-if="profile">
+      <!-- Profile Info -->
+      <div class="mt-8">
+        <div class="text-sm">
+          <fa icon="user" class="fa-fw text-slate-400"></fa>
+          {{ didInfo(profile.issuerDid, activeDid, allMyDids, allContacts) }}
+        </div>
+        <p v-if="profile.description" class="mt-4 text-slate-600">
+          {{ profile.description }}
+        </p>
+      </div>
+
+      <!-- Map for first coordinates -->
+      <div v-if="profile?.locLat && profile?.locLon" class="mt-4">
+        <h2 class="text-lg font-semibold">Location</h2>
+        <div class="h-96 mt-2 w-full">
+          <l-map
+            ref="profileMap"
+            :center="[profile.locLat, profile.locLon]"
+            :zoom="12"
+          >
+            <l-tile-layer
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              layer-type="base"
+              name="OpenStreetMap"
+            />
+            <l-marker :lat-lng="[profile.locLat, profile.locLon]">
+              <l-popup>{{
+                didInfo(profile.issuerDid, activeDid, allMyDids, allContacts)
+              }}</l-popup>
+            </l-marker>
+          </l-map>
+        </div>
+      </div>
+
+      <!-- Map for second coordinates -->
+      <div v-if="profile?.locLat2 && profile?.locLon2" class="mt-4">
+        <h2 class="text-lg font-semibold">Second Location</h2>
+        <div class="h-96 mt-2 w-full">
+          <l-map
+            ref="profileMap"
+            :center="[profile.locLat2, profile.locLon2]"
+            :zoom="12"
+          >
+            <l-tile-layer
+              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+              layer-type="base"
+              name="OpenStreetMap"
+            />
+            <l-marker :lat-lng="[profile.locLat2, profile.locLon2]">
+              <l-popup>{{
+                didInfo(profile.issuerDid, activeDid, allMyDids, allContacts)
+              }}</l-popup>
+            </l-marker>
+          </l-map>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="text-center mt-8">
+      <p class="text-lg text-slate-500">Profile not found.</p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import "leaflet/dist/leaflet.css";
+import { Component, Vue } from "vue-facing-decorator";
+import { LMap, LTileLayer, LMarker, LPopup } from "@vue-leaflet/vue-leaflet";
+import { Router, RouteLocationNormalizedLoaded } from "vue-router";
+
+import QuickNav from "@/components/QuickNav.vue";
+import TopMessage from "@/components/TopMessage.vue";
+import { DEFAULT_PARTNER_API_SERVER, NotificationIface } from "@/constants/app";
+import { db } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import { didInfo, getHeaders } from "@/libs/endorserServer";
+import { UserProfile } from "@/libs/partnerServer";
+import { retrieveAccountDids } from "@/libs/util";
+
+@Component({
+  components: {
+    LMap,
+    LMarker,
+    LPopup,
+    LTileLayer,
+    QuickNav,
+    TopMessage,
+  },
+})
+export default class UserProfileView extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+  $router!: Router;
+  $route!: RouteLocationNormalizedLoaded;
+
+  activeDid = "";
+  allContacts: Array<Contact> = [];
+  allMyDids: Array<string> = [];
+  isLoading = true;
+  partnerApiServer = DEFAULT_PARTNER_API_SERVER;
+  profile: UserProfile | null = null;
+
+  // make this function available to the Vue template
+  didInfo = didInfo;
+
+  async mounted() {
+    const settings = await db.settings.toArray();
+    this.activeDid = settings[0]?.activeDid || "";
+    this.partnerApiServer =
+      settings[0]?.partnerApiServer || this.partnerApiServer;
+
+    this.allContacts = await db.contacts.toArray();
+    this.allMyDids = await retrieveAccountDids();
+
+    await this.loadProfile();
+  }
+
+  async loadProfile() {
+    const profileId: string = this.$route.params.id as string;
+    if (!profileId) {
+      this.isLoading = false;
+      return;
+    }
+
+    try {
+      const response = await fetch(
+        `${this.partnerApiServer}/api/partner/userProfile/${encodeURIComponent(profileId)}`,
+        {
+          method: "GET",
+          headers: await getHeaders(this.activeDid),
+        },
+      );
+
+      if (response.status === 200) {
+        const result = await response.json();
+        this.profile = result.data;
+      } else {
+        throw new Error("Failed to load profile");
+      }
+    } catch (error) {
+      console.error("Error loading profile:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was a problem loading the profile.",
+        },
+        5000,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+}
+</script>

sw_scripts/additional-scripts.js

@@ -115,7 +115,7 @@ self.addEventListener("push", function (event) {
 self.addEventListener("message", (event) => {
   logConsoleAndDb("Service worker got a message...", event);
   if (event.data && event.data.type === "SEND_LOCAL_DATA") {
-    self.secret = event.data.data;
+    self.secret = event.data.data; // used in safari-notifications.js to decrypt the account identity
     event.ports[0].postMessage({ success: true });
   }
   logConsoleAndDb("Service worker posted a message.");

sw_scripts/safari-notifications.js

@@ -515,6 +515,7 @@ async function getNotificationCount() {
 
   const identity = activeAccount && activeAccount["identity"];
   if (identity && "secret" in self) {
+    // get the "secret" pulled in additional-scripts.js to decrypt the "identity" inside the IndexedDB; see account.ts
     const secret = self.secret;
     const secretUint8Array = self.decodeBase64(secret);
     const messageWithNonceAsUint8Array = self.decodeBase64(identity);

test-playwright/00-noid-tests.spec.ts

@@ -84,8 +84,8 @@ test('Check setting name & sharing info', async ({ page }) => {
   await expect(page.getByText('Set Your Name')).toBeVisible();
   await page.getByRole('textbox').fill('Me Test User');
   await page.locator('button:has-text("Save")').click();
-  await expect(page.getByText('share another way')).toBeVisible();
-  await page.getByRole('button', { name: /share another way/ }).click();
+  await expect(page.getByText('share some other way')).toBeVisible();
+  await page.getByRole('button', { name: /share some other way/ }).click();
   await expect(page.getByRole('button', { name: 'copy to clipboard' })).toBeVisible();
   await page.getByRole('button', { name: 'copy to clipboard' }).click();
   await expect(page.getByText('contact info was copied')).toBeVisible();

test-playwright/05-invite.spec.ts

@@ -2,8 +2,6 @@ import { test, expect } from '@playwright/test';
 import { deleteContact, generateNewEthrUser, generateRandomString, importUser, switchToUser } from './testUtils';
 
 test('Check User 0 can invite someone', async ({ page }) => {
-  const newDid = await generateNewEthrUser(page);
-
   await importUser(page, '00');
   await page.goto('./invite-one');
   await page.locator('button > svg.fa-plus').click();
@@ -23,6 +21,7 @@ test('Check User 0 can invite someone', async ({ page }) => {
   expect(inviteLink).not.toBeNull();
 
   // become the new user and accept the invite
+  const newDid = await generateNewEthrUser(page);
   await switchToUser(page, newDid);
   await page.goto(inviteLink as string);
   await page.getByPlaceholder('Name', { exact: true }).fill(`My pal User #0`);

test-playwright/10-check-usage-limits.spec.ts

@@ -23,6 +23,6 @@ test('Check usage limits', async ({ page }) => {
   await page.getByRole('button', { name: 'Set Your Name' }).click();
   const name = 'User ' + did.slice(11, 14);
   await page.getByPlaceholder('Name').fill(name);
-  await page.getByRole('button', { name: 'Save' }).click();
+  await page.getByRole('button', { name: 'Save', exact: true }).click();
 
 });

test-playwright/20-create-project.spec.ts

@@ -2,7 +2,6 @@ import { test, expect } from '@playwright/test';
 import { importUser } from './testUtils';
 
 test('Create new project, then search for it', async ({ page }) => {
-  test.slow();
 
   // Generate a random string of 16 characters
   let randomString = Math.random().toString(36).substring(2, 18);

test-playwright/25-create-project-x10.spec.ts

@@ -2,6 +2,8 @@ import { test, expect } from '@playwright/test';
 import { importUser, createUniqueStringsArray } from './testUtils';
 
 test('Create 10 new projects', async ({ page }) => {
+  test.slow(); // Set timeout longer since it often fails at 30 seconds
+
   const projectCount = 10;
 
   // Standard texts

test-playwright/30-record-gift.spec.ts

@@ -25,6 +25,7 @@ test('Record something given', async ({ page }) => {
   await page.getByRole('spinbutton').fill(randomNonZeroNumber.toString());
   await page.getByRole('button', { name: 'Sign & Send' }).click();
   await expect(page.getByText('That gift was recorded.')).toBeVisible();
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
 
   // Refresh home view and check gift
   await page.goto('./');
@@ -32,6 +33,8 @@ test('Record something given', async ({ page }) => {
   await expect(page.getByRole('heading', { name: 'Verifiable Claim Details' })).toBeVisible();
   await expect(page.getByText(finalTitle, { exact: true })).toBeVisible();
   const page1Promise = page.waitForEvent('popup');
+  // expand the Details section to see the extended details
+  await page.getByRole('heading', { name: 'Details', exact: true }).click();
   await page.getByRole('link', { name: 'View on the Public Server' }).click();
   const page1 = await page1Promise;
 });

test-playwright/33-record-gift-x10.spec.ts

@@ -38,6 +38,7 @@ test('Record 9 new gifts', async ({ page }) => {
     await page.getByRole('spinbutton').fill(finalNumbers[i].toString());
     await page.getByRole('button', { name: 'Sign & Send' }).click();
     await expect(page.getByText('That gift was recorded.')).toBeVisible();
+    await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
 
     // Refresh home view and check gift
     await page.goto('./');

test-playwright/35-record-gift-from-image-share.spec.ts

@@ -27,8 +27,12 @@ test('Record item given from image-share', async ({ page }) => {
   await page.getByPlaceholder('What was received').fill(finalTitle);
   await page.getByRole('spinbutton').fill('2');
   await page.getByRole('button', { name: 'Sign & Send' }).click();
-  await expect(page.getByText('That gift was recorded.')).toBeVisible();
 
+  // we end up on a page with the onboarding info
+  await page.getByTestId('closeOnboardingAndFinish').click();
+
+  await expect(page.getByText('That gift was recorded.')).toBeVisible();
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
 
   // Refresh home view and check gift
   await page.goto('./');

test-playwright/37-record-gift-on-project.spec.ts

@@ -0,0 +1,50 @@
+import { test, expect, Page } from '@playwright/test';
+import { importUser } from './testUtils';
+
+async function testProjectGive(page: Page, selector: string) {
+
+  // Generate a random string of a few characters
+  const randomString = Math.random().toString(36).substring(2, 6);
+
+  // Generate a random non-zero single-digit number
+  const randomNonZeroNumber = Math.floor(Math.random() * 99) + 1;
+
+  // Standard title prefix
+  const standardTitle = 'Gift ';
+
+  // Combine title prefix with the random string
+  const finalTitle = standardTitle + randomString;
+
+  // find a project and enter a give to it and see that it shows
+  await importUser(page, '00');
+  await page.goto('./discover');
+  await page.getByTestId('closeOnboardingAndFinish').click();
+
+  await page.locator('ul#listDiscoverResults li:first-child a').click()
+  // wait for the project page to load
+  await page.waitForLoadState('networkidle');
+  // click the give button, inside the first div
+  await page.getByTestId(selector).locator('div:first-child div button').click();
+  await page.getByPlaceholder('What was given').fill(finalTitle);
+  await page.getByRole('spinbutton').fill(randomNonZeroNumber.toString());
+  await page.getByRole('button', { name: 'Sign & Send' }).click();
+  await expect(page.getByText('That gift was recorded.')).toBeVisible();
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
+
+  // refresh the page
+  await page.reload();
+  // check that the give is in the list
+  await page
+    .getByTestId(selector)
+    .locator('div ul li:first-child')
+    .filter({ hasText: finalTitle })
+    .isVisible();
+}
+
+test('Record a give to a project', async ({ page }) => {
+  await testProjectGive(page, 'gives-to');
+});
+
+test('Record a give from a project', async ({ page }) => {
+  await testProjectGive(page, 'gives-from');
+});

test-playwright/40-add-contact.spec.ts

@@ -21,15 +21,15 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
   // Combine title prefix with the random string
   const finalTitle = standardTitle + finalRandomString;
 
-  // Contact name
   const contactName = 'Contact #000 renamed';
+  const userName = 'User #000';
 
   // Import user 01
   await importUser(page, '01');
 
   // Add new contact
   await page.goto('./contacts');
-  await page.getByPlaceholder('URL or DID, Name, Public Key').fill('did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F, User #000');
+  await page.getByPlaceholder('URL or DID, Name, Public Key').fill('did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F, ' + userName);
   await page.locator('button > svg.fa-plus').click();
   await expect(page.locator('div[role="alert"] span:has-text("Contact Added")')).toBeVisible();
   await page.locator('div[role="alert"] button:has-text("No")').click(); // don't register
@@ -37,15 +37,19 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
   await expect(page.locator('div[role="alert"] button > svg.fa-xmark')).toBeHidden(); // ensure alert is gone
 
   // Verify added contact
-  await expect(page.locator('li.border-b')).toContainText('User #000');
+  await expect(page.locator('li.border-b')).toContainText(userName);
 
   // Rename contact
-  await page.locator('li.border-b div div > a[title="See more about this person"]').click();
-  await page.locator('h2 > button > svg.fa-pen').click();
-  await expect(page.locator('div.dialog-overlay > div.dialog').filter({ hasText: 'Edit Name' })).toBeVisible();
-  await page.getByPlaceholder('Name', { exact: true }).fill(contactName);
-  await page.locator('.dialog > .flex > button').first().click();
-  // await page.locator('.dialog > .flex > button').first().click(); // close alert
+  await page.locator(`li[data-testid="contactListItem"] h2:has-text("${userName}") + span svg.fa-circle-info`).click();
+  // now on the DID view page
+  await page.locator('h2 svg.fa-pen').click();
+  // now on the contact edit page
+  await expect(page.getByTestId('contactName').locator('input')).toBeVisible();
+  // check that the input field has userName
+  await expect(page.getByTestId('contactName').locator('input')).toHaveValue(userName);
+  await page.getByTestId('contactName').locator('input').fill(contactName);
+  await page.getByRole('button', { name: 'Save' }).click();
+  await expect(page.locator('h2', { hasText: contactName })).toBeVisible();
 
   // Confirm that home shows contact in "Record Something…"
   await page.goto('./');
@@ -76,6 +80,7 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
   await page.getByText('You have a seed').click();
   await page.getByPlaceholder('Seed Phrase').fill('rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage');
   await page.getByRole('button', { name: 'Import' }).click();
+  await expect(page.getByRole('code')).toContainText('did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F');
 
   // Go to home view and look for gift
   await page.goto('./');
@@ -87,6 +92,7 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
   await page.getByRole('button', { name: 'Confirm' }).click();
   await page.getByRole('button', { name: 'Yes' }).click();
   await expect(page.getByText('Confirmation submitted.')).toBeVisible();
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
 
   // Refresh claim page, Confirm button should throw an alert because they already confirmed
   await page.reload();
@@ -112,7 +118,7 @@ test('Without being registered, add contacts without registration', async ({ pag
 
 });
 
-test('Add contact, copy details, delete, and import various ways', async ({ page, context }) => {
+test('Add contact, copy details, delete, and import from paste & from file', async ({ page, context }) => {
   await importUser(page, '00');
 
   // Add new contact
@@ -143,10 +149,7 @@ test('Add contact, copy details, delete, and import various ways', async ({ page
   await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss alert
   await expect(page.locator('div[role="alert"]')).toBeHidden();
   // I would prefer to copy from the clipboard, but the recommended approaches don't work.
-  // this seems to fail in non-chromium browsers
-  //await context.grantPermissions(['clipboard-read', 'clipboard-write']);
-  // this seems to fail in chromium (at least) where clipboard is undefined
-  //const contactData = await navigator.clipboard.readText();
+  // See a different clipboard solution below.
 
   // see contact details on the second contact
   await page.getByTestId('contactListItem').nth(1).locator('a').click();
@@ -179,11 +182,10 @@ test('Add contact, copy details, delete, and import various ways', async ({ page
   // check that there are more contacts
   await expect(page.getByTestId('contactListItem')).toHaveCount(2);
 
-  // Import via the file backup-import
+  // Import via the file backup-import, with both new and existing contacts
   await page.goto('./account');
   await page.getByRole('heading', { name: 'Advanced' }).click();
   const fileSelect = await page.locator('input[type="file"]')
-  //fileSelect.click();
   fileSelect.setInputFiles('./test-playwright/exported-data.json');
   await page.locator('button', { hasText: 'Import Only Contacts' }).click();
   // we're on the contact-import page
@@ -197,3 +199,64 @@ test('Add contact, copy details, delete, and import various ways', async ({ page
   // But it should only show that one, for User #000.
 
 });
+
+test('Copy contact to clipboard, then import ', async ({ page, context }, testInfo) => {
+  await importUser(page, '00');
+
+  await page.goto('./account');
+  await page.getByRole('heading', { name: 'Advanced' }).click();
+  const fileSelect = await page.locator('input[type="file"]')
+  fileSelect.setInputFiles('./test-playwright/exported-data.json');
+  await page.locator('button', { hasText: 'Import Only Contacts' }).click();
+  // we're on the contact-import page
+  await expect(page.getByRole('heading', { name: "Contact Import" })).toBeVisible();
+  await page.locator('button', { hasText: 'Import' }).click();
+
+  await page.goto('./contacts');
+  // Copy contact details
+  await page.getByTestId('contactCheckAllTop').click();
+
+  // // There's a crazy amount of overlap in all the userAgent values. Ug.
+  // const agent = await page.evaluate(() => {
+  //   return navigator.userAgent;
+  // });
+  // console.log("agent: ", agent);
+
+  const isFirefox = await page.evaluate(() => {
+    return navigator.userAgent.includes('Firefox');
+  });
+  if (isFirefox) {
+    // Firefox doesn't grant permissions like this but it works anyway.
+  } else {
+    await context.grantPermissions(['clipboard-read']);
+  }
+
+  const isWebkit = await page.evaluate(() => {
+    return navigator.userAgent.includes('Macintosh') || navigator.userAgent.includes('iPhone');
+  });
+  if (isWebkit) {
+    console.log("Haven't found a way to access clipboard text in Webkit. Skipping.");
+    return;
+  }
+
+  console.log("Running test that copies contact details to clipboard.");
+  await page.getByTestId('copySelectedContactsButtonTop').click();
+  const clipboardText = await page.evaluate(async () => {
+    return navigator.clipboard.readText();
+  });
+
+  // look into the playwright.config file for the server URL
+  const webServer = testInfo.config.webServer;
+  const clientServerUrl = webServer?.url;
+
+  const PATH_PART = clientServerUrl + "/contact-import/";
+  expect(clipboardText).toContain(PATH_PART);
+
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss alert
+  await expect(page.locator('div[role="alert"]')).toBeHidden();
+
+  await page.goto(clipboardText);
+  // we're on the contact-import page
+  await expect(page.getByRole('heading', { name: "Contact Import" })).toBeVisible();
+  await expect(page.locator('span', { hasText: '4 contacts are the same' })).toBeVisible();
+});

test-playwright/50-record-offer.spec.ts

@@ -2,6 +2,8 @@ import { test, expect } from '@playwright/test';
 import { importUser } from './testUtils';
 
 test('Record an offer', async ({ page }) => {
+  test.setTimeout(45000);
+
   // Generate a random string of 3 characters, skipping the "0." at the beginning
   const randomString = Math.random().toString(36).substring(2, 5);
   // Standard title prefix
@@ -25,6 +27,7 @@ test('Record an offer', async ({ page }) => {
   expect(page.getByRole('button', { name: 'Sign & Send' }));
   await page.getByRole('button', { name: 'Sign & Send' }).click();
   await expect(page.getByText('That offer was recorded.')).toBeVisible();
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
 
   // go to the offer and check the values
   await page.goto('./projects');
@@ -35,6 +38,8 @@ test('Record an offer', async ({ page }) => {
   await expect(page.getByText('Offered to a bigger plan')).toBeVisible();
 
   const serverPagePromise = page.waitForEvent('popup');
+  // expand the Details section to see the extended details
+  await page.getByRole('heading', { name: 'Details', exact: true }).click();
   await page.getByRole('link', { name: 'View on the Public Server' }).click();
   const serverPage = await serverPagePromise;
   await expect(serverPage.getByText(description)).toBeVisible();
@@ -57,6 +62,7 @@ test('Record an offer', async ({ page }) => {
   await amount.fill(String(randomNonZeroNumber + 1));
   await page.getByRole('button', { name: 'Sign & Send' }).click();
   await expect(page.getByText('That offer was recorded.')).toBeVisible();
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
 
   // go to the offer claim again and check the updated values
   await page.goto('./projects');
@@ -73,7 +79,17 @@ test('Record an offer', async ({ page }) => {
   // go to the home page and check that the offer is shown as new
   await page.goto('./');
   const offerNumElem = page.getByTestId('newOffersToUserProjectsActivityNumber');
-  await expect(offerNumElem).toHaveText('50+');
+  // extract the number and check that it's greater than 0 or "50+"
+  const offerNumText = await offerNumElem.textContent();
+  if (offerNumText === null) {
+    throw new Error('Expected Activity Number greater than 0 but got null.');
+  } else if (offerNumText === '50+') {
+    // we're OK
+  } else if (parseInt(offerNumText) > 0) {
+    // we're OK
+  } else {
+    throw new Error(`Expected Activity Number of greater than 0 but got ${offerNumText}.`);
+  }
 
   // click on the number of new offers to go to the list page
   await offerNumElem.click();
@@ -107,4 +123,5 @@ test('Affirm delivery of an offer', async ({ page }) => {
   await page.getByRole('spinbutton').fill('2');
   await page.getByRole('button', { name: 'Sign & Send' }).click();
   await expect(page.getByText('That gift was recorded.')).toBeVisible();
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click(); // dismiss info alert
 });

test-playwright/60-new-activity.spec.ts

@@ -4,6 +4,7 @@ import { importUser, generateNewEthrUser, switchToUser } from './testUtils';
 test('New offers for another user', async ({ page }) => {
   const user01Did = await generateNewEthrUser(page);
   await page.goto('./');
+  await page.getByTestId('closeOnboardingAndFinish').click();
   await expect(page.getByTestId('newDirectOffersActivityNumber')).toBeHidden();
 
   await importUser(page, '00');
@@ -43,7 +44,7 @@ test('New offers for another user', async ({ page }) => {
   // as user 1, go to the home page and check that two offers are shown as new
   await switchToUser(page, user01Did);
   await page.goto('./');
-  await page.getByTestId('closeOnboardingAndFinish').click();
+  // await page.getByTestId('closeOnboardingAndFinish').click();
   let offerNumElem = page.getByTestId('newDirectOffersActivityNumber');
   await expect(offerNumElem).toHaveText('2');
 

test-playwright/testUtils.ts

@@ -1,8 +1,9 @@
 import { expect, Page } from '@playwright/test';
 
 // Import the seed and switch to the user based on the ID.
-// '01' -> 111
-// otherwise -> 000
+// '01' -> user 111
+// otherwise -> user 000
+// (... which is a weird convention but I haven't taken the time to change it)
 export async function importUser(page: Page, id?: string): Promise<string> {
   let seedPhrase, userName, did;
 
@@ -55,7 +56,7 @@ export async function deleteContact(page: Page, did: string): Promise<void> {
   await page.goto('./contacts');
   const contactName = createContactName(did);
   // go to the detail page for this contact
-  await page.locator(`li[data-testid="contactListItem"] h2:has-text("${contactName}") + a`).click();
+  await page.locator(`li[data-testid="contactListItem"] h2:has-text("${contactName}") + span svg.fa-circle-info`).click();
   // delete the contact
   await page.locator('button > svg.fa-trash-can').click();
   await page.locator('div[role="alert"] button:has-text("Yes")').click();