prompt for name when showing info, and provide a "copy" page when remote

src/views/HomeView.vue

@@ -4,12 +4,12 @@
 
   <!-- CONTENT -->
   <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-8">
+    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
       {{ AppString.APP_NAME }}
     </h1>
 
-    <!-- prompt to install notifications, which we're making an advanced feature -->
-    <div class="mb-8">
+    <!-- prompt to install notifications with notificationsSupported, which we're making an advanced feature -->
+    <div class="mb-8 mt-8">
       <div
         v-if="false"
         class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
@@ -86,13 +86,14 @@
           >
             <!-- activeDid && !isRegistered -->
             To share, someone must register you.
-            <router-link
-              :to="{ name: 'contact-qr' }"
+            <div
+              @click="showNameDialog()"
               class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
             >
               Show Them {{ PASSKEYS_ENABLED ? "Default" : "Your" }} Identifier
               Info
-            </router-link>
+            </div>
+            <UserNameDialog ref="userNameDialog" />
             <div v-if="PASSKEYS_ENABLED" class="flex justify-end w-full">
               <router-link
                 :to="{ name: 'start' }"
@@ -107,7 +108,7 @@
             <!-- activeDid && isRegistered -->
 
             <!-- show the actions for recognizing a give -->
-            <div class="flex justify-between mb-4">
+            <div class="flex justify-between">
               <h2 class="text-xl font-bold">Record Something Given By:</h2>
               <div class="flex justify-end">
                 <button
@@ -120,7 +121,7 @@
             </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"
+              class="grid grid-cols-4 sm:grid-cols-5 md:grid-cols-6 gap-x-3 gap-y-5 text-center mt-4"
             >
               <li @click="openDialog()">
                 <img
@@ -169,7 +170,7 @@
     <FeedFilters ref="feedFilters" />
 
     <!-- Results List -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mt-4 mb-4">
       <div class="flex items-center mb-4">
         <h2 class="text-xl font-bold">Latest Activity</h2>
         <button @click="openFeedFilters()" class="block text-center ml-auto">
@@ -313,6 +314,7 @@ import FeedFilters from "@/components/FeedFilters.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
 import {
   AppString,
   NotificationIface,
@@ -370,6 +372,7 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     EntityIcon,
     InfiniteScroll,
     TopMessage,
+    UserNameDialog,
   },
 })
 export default class HomeView extends Vue {
@@ -426,6 +429,7 @@ export default class HomeView extends Vue {
       this.showShortcutBvc = !!settings?.showShortcutBvc;
 
       this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
+      console.log("getting through mounted");
 
       // someone may have have registered after sharing contact info, so recheck
       if (!this.isRegistered && this.activeDid) {
@@ -449,7 +453,7 @@ export default class HomeView extends Vue {
       }
 
       // this returns a Promise but we don't need to wait for it
-      await this.updateAllFeed();
+      this.updateAllFeed();
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
@@ -495,7 +499,7 @@ export default class HomeView extends Vue {
 
     this.feedData = [];
     this.feedPreviousOldestId = undefined;
-    this.updateAllFeed();
+    await this.updateAllFeed();
   }
 
   /**
@@ -507,7 +511,7 @@ export default class HomeView extends Vue {
     // and the InfiniteScroll component triggers a load before finished.
     // One alternative is to totally separate the project link loading.
     if (payload && !this.isFeedLoading) {
-      this.updateAllFeed();
+      await this.updateAllFeed();
     }
   }
 
@@ -527,6 +531,7 @@ export default class HomeView extends Vue {
   async updateAllFeed() {
     this.isFeedLoading = true;
     let endOfResults = true;
+    console.log("about to retrieveGives");
     await this.retrieveGives(this.apiServer, this.feedPreviousOldestId)
       .then(async (results) => {
         if (results.data.length > 0) {
@@ -620,7 +625,7 @@ export default class HomeView extends Vue {
       });
     if (this.feedData.length === 0 && !endOfResults) {
       // repeat until there's at least some data
-      this.updateAllFeed();
+      await this.updateAllFeed();
     }
     this.isFeedLoading = false;
   }
@@ -770,5 +775,36 @@ export default class HomeView extends Vue {
   computeKnownPersonIconStyleClassNames(known: boolean) {
     return known ? "text-slate-500" : "text-slate-100";
   }
+
+  showNameDialog() {
+    if (!this.givenName) {
+      (this.$refs.userNameDialog as UserNameDialog).open(() => {
+        this.promptForShareMethod();
+      });
+    } else {
+      this.promptForShareMethod();
+    }
+  }
+
+  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" });
+        },
+        onYes: async () => {
+          (this.$router as Router).push({ name: "contact-qr" });
+        },
+        noText: "we will share another way",
+        yesText: "we are nearby with cameras",
+      },
+      -1,
+    );
+  }
 }
 </script>