refactor invite link & add test

src/components/InviteDialog.vue

@@ -1,12 +1,14 @@
 <template>
   <div v-if="visible" class="dialog-overlay">
     <div class="dialog">
-      <h1 class="text-xl font-bold text-center mb-4">{{ title }}</h1>
+      <h1 class="text-xl font-bold text-center mb-4">Invitation & Notes</h1>
 
-      {{ message }}
+      These are optional notes for your use, to make comments for to recall
+      later when redeemed by someone. These notes are sent to the server. If you
+      want to store your own way, the invitation ID is: {{ inviteIdentifier }}
       <input
         type="text"
-        placeholder="Name"
+        placeholder="Notes"
         class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
         v-model="text"
       />
@@ -52,22 +54,19 @@ export default class InviteDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   callback: (text: string, expiresAt: string) => void = () => {};
-  message = "";
+  inviteIdentifier = "";
   text = "";
-  title = "";
   visible = false;
   expiresAt = new Date(Date.now() + 1000 * 60 * 60 * 24 * 30 * 3)
     .toISOString()
     .substring(0, 10);
 
   async open(
-    title: string,
-    message: string,
+    inviteIdentifier: string,
     aCallback: (text: string, expiresAt: string) => void,
   ) {
     this.callback = aCallback;
-    this.title = title;
-    this.message = message;
+    this.inviteIdentifier = inviteIdentifier;
     this.visible = true;
   }
 

src/views/ContactsView.vue

@@ -460,7 +460,8 @@ export default class ContactsView extends Vue {
             registered: true,
           }),
         );
-      } catch (error) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      } catch (error: any) {
         console.error("Error redeeming invite:", error);
         let message = "Got an error sending the invite.";
         if (

src/views/InviteOneView.vue

@@ -46,11 +46,14 @@
           >
             <td
               class="py-2 text-center text-blue-500"
-              @click="copyInviteAndNotify(invite.jwt)"
+              @click="copyInviteAndNotify(invite.inviteIdentifier, invite.jwt)"
+              title="{{ inviteLink(invite.jwt) }}"
             >
               {{ getTruncatedInviteId(invite.inviteIdentifier) }}
             </td>
-            <td class="py-2 text-left">{{ invite.notes }}</td>
+            <td class="py-2 text-left" :data-testId="inviteLink(invite.jwt)">
+              {{ invite.notes }}
+            </td>
             <td class="py-2 text-center">
               {{ invite.expiresAt.substring(0, 10) }}
             </td>
@@ -134,31 +137,31 @@ export default class InviteOneView extends Vue {
     return `${redeemedBy.slice(0, 13)}...${redeemedBy.slice(-3)}`;
   }
 
-  copyInviteAndNotify(jwt: string) {
-    const link = APP_SERVER + "/contacts?inviteJwt=" + jwt;
-    useClipboard().copy(link);
+  inviteLink(jwt: string): string {
+    return APP_SERVER + "/contacts?inviteJwt=" + jwt;
+  }
+  copyInviteAndNotify(inviteId: string, jwt: string) {
+    useClipboard().copy(this.inviteLink(jwt));
     this.$notify(
       {
         group: "alert",
         type: "success",
         title: "Copied",
-        text: "Invitation link is copied to clipboard.",
+        text: "Link for invite " + inviteId + " is copied to clipboard.",
       },
       3000,
     );
   }
 
   async createInvite() {
+    const inviteIdentifier =
+      Math.random().toString(36).substring(2) +
+      Math.random().toString(36).substring(2) +
+      Math.random().toString(36).substring(2);
     (this.$refs.inviteDialog as InviteDialog).open(
-      "Invitation Note",
-      `These notes are only for your use, to make comments for a link to recall later if redeemed by someone. 
-       Note that this is sent to the server.`,
+      inviteIdentifier,
       async (notes, expiresAt) => {
         try {
-          const inviteIdentifier =
-            Math.random().toString(36).substring(2) +
-            Math.random().toString(36).substring(2) +
-            Math.random().toString(36).substring(2);
           const headers = await getHeaders(this.activeDid);
           if (!expiresAt) {
             throw {