From e24cd06e3d7dd79a9dd71742236802b4a018e424 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sat, 24 Aug 2024 06:36:49 -0600
Subject: [PATCH] make the user-name pop-up the preferred way to set the name

---
 src/views/AccountViewView.vue        | 22 ++++++++++++++++------
 src/views/ContactQRScanShowView.vue  | 13 +++++++++----
 src/views/ShareMyContactInfoView.vue |  2 +-
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 28acc3e88..bc847e9f5 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -55,14 +55,17 @@
       </div>
       <span
         v-else
-        class="block w-full text-center text-md bg-amber-200 text-blue-500 uppercase border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
+        class="block w-full text-center text-md bg-amber-200 border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
       >
-        <router-link
-          :to="{ name: 'new-edit-account' }"
-          class="inline-block text-md 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-4 py-2 rounded-md"
+        <span
+          @click="
+            () => $refs.userNameDialog.open((name) => (this.givenName = name))
+          "
+          class="inline-block 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-4 py-2 rounded-md"
         >
           Set Your Name
-        </router-link>
+        </span>
+        <UserNameDialog ref="userNameDialog" />
       </span>
       <div class="flex justify-center mt-4">
         <span v-if="profileImageUrl" class="flex justify-between">
@@ -720,6 +723,7 @@ import EntityIcon from "@/components/EntityIcon.vue";
 import ImageMethodDialog from "@/components/ImageMethodDialog.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
+import UserNameDialog from "@/components/UserNameDialog.vue";
 import {
   AppString,
   DEFAULT_IMAGE_API_SERVER,
@@ -750,7 +754,13 @@ import { getAccount } from "@/libs/util";
 const inputImportFileNameRef = ref<Blob>();
 
 @Component({
-  components: { EntityIcon, ImageMethodDialog, QuickNav, TopMessage },
+  components: {
+    EntityIcon,
+    ImageMethodDialog,
+    QuickNav,
+    TopMessage,
+    UserNameDialog,
+  },
 })
 export default class AccountViewView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 11abd0cf7..189dc2374 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -25,13 +25,16 @@
         <span class="text-red">Beware!</span>
         You aren't sharing your name, so quickly
         <br />
-        <router-link
-          :to="{ name: 'new-edit-account' }"
+        <span
+          @click="
+            () => $refs.userNameDialog.open((name) => (this.givenName = name))
+          "
           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-1.5 py-1 rounded-md"
         >
           click here to set it for them.
-        </router-link>
+        </span>
       </p>
+      <UserNameDialog ref="userNameDialog" />
     </div>
 
     <div
@@ -50,7 +53,7 @@
         class="flex justify-center"
       />
       <span>
-        Click this or QR code to copy your contact URL to your clipboard.
+        Click the QR code to copy your contact info to your clipboard.
       </span>
     </div>
     <div v-else-if="activeDid" class="text-center">
@@ -96,6 +99,7 @@ import { QrcodeStream } from "vue-qrcode-reader";
 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 } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
@@ -121,6 +125,7 @@ import { ETHR_DID_PREFIX } from "@/libs/crypto/vc";
     QrcodeStream,
     QRCodeVue3,
     QuickNav,
+    UserNameDialog,
   },
 })
 export default class ContactQRScanShow extends Vue {
diff --git a/src/views/ShareMyContactInfoView.vue b/src/views/ShareMyContactInfoView.vue
index 552d2ca65..defbc1254 100644
--- a/src/views/ShareMyContactInfoView.vue
+++ b/src/views/ShareMyContactInfoView.vue
@@ -84,7 +84,7 @@ export default class ShareMyContactInfoView extends Vue {
               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: "Your contact info was copied to the clipboard. Have them paste it in the box on their 'Contacts' screen.",
             },
             5000,
           );