src/views/ContactQRScanShowView.vue

@@ -16,7 +16,7 @@
 
       <!-- Heading -->
       <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
-        Your Contact Info
+        Share Contact Info
       </h1>
       <p
         v-if="!givenName"

src/views/ContactsView.vue

@@ -92,7 +92,7 @@
 
     <div v-if="contacts.length > 0" class="flex justify-between">
       <div class="w-full text-left">
-        <div v-if="!showGiveNumbers">
+        <div>
           <input
             type="checkbox"
             :checked="contactsSelected.length === contacts.length"
@@ -105,7 +105,6 @@
             "
           />
           <button
-            v-if="!showGiveNumbers"
             href=""
             class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
             :style="
@@ -127,28 +126,27 @@
         </div>
       </div>
 
-      <div class="w-full text-right">
+      <div v-if="!showGiveNumbers" class="w-full text-right">
         <button
           href=""
           class="text-md 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-3 py-1.5 rounded-md"
           @click="toggleShowContactAmounts()"
         >
-          {{
-            showGiveNumbers ? "Hide Hours, Offer, etc" : "See Hours, Offer, etc"
-          }}
+          See Hours, Offer, etc
         </button>
       </div>
-    </div>
-    <div v-if="showGiveNumbers" class="flex justify-between mt-1">
-      <div class="w-full text-right">
-        In the following, only the most recent hours are included. To see more,
+      <div v-else class="w-full text-right">
+        <span class="text-sm">
+          Only the most recent From/To hours show in buttons. To see more,
           click
           <span
             class="text-sm 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 py-1 rounded-md"
           >
             <font-awesome icon="file-lines" class="fa-fw" />
           </span>
+        </span>
         <br />
+        <span>
           <button
             href=""
             class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1"
@@ -164,6 +162,7 @@
             }}
             <font-awesome icon="left-right" class="fa-fw" />
           </button>
+        </span>
       </div>
     </div>
 
@@ -179,10 +178,10 @@
         class="border-b border-slate-300 pt-1 pb-1"
         data-testId="contactListItem"
       >
-        <div class="grow overflow-hidden">
-          <div class="flex items-center gap-3">
+        <div class="flex justify-between items-start">
+          <span class="grow overflow-hidden">
+            <span class="flex items-center gap-3">
               <input
-              v-if="!showGiveNumbers"
                 type="checkbox"
                 :checked="contactsSelected.includes(contact.did)"
                 class="ml-2 h-6 w-6 flex-shrink-0"
@@ -230,18 +229,20 @@
                   {{ contact.notes }}
                 </div>
               </span>
-          </div>
-          <div
-            v-if="showGiveNumbers && contact.did != activeDid"
-            class="ml-auto flex gap-1.5 mt-2"
+            </span>
+          </span>
+          <span
+            v-if="contact.did != activeDid"
+            class="flex gap-1.5 ml-2"
           >
             <button
               class="text-sm 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-1.5 rounded-l-md"
               :title="givenToMeDescriptions[contact.did] || ''"
               @click="confirmShowGiftedDialog(contact.did, activeDid)"
             >
-              From:
+              From&hellip;
               <br />
+              <span v-if="showGiveNumbers">
                 {{
                   /* eslint-disable prettier/prettier */
                   showGiveTotals
@@ -252,6 +253,7 @@
                         : (givenToMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
+              </span>
             </button>
 
             <button
@@ -259,8 +261,9 @@
               :title="givenByMeDescriptions[contact.did] || ''"
               @click="confirmShowGiftedDialog(activeDid, contact.did)"
             >
-              To:
+              To&hellip;
               <br />
+              <span v-if="showGiveNumbers">
                 {{
                   /* eslint-disable prettier/prettier */
                   showGiveTotals
@@ -271,6 +274,7 @@
                       : (givenByMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
+              </span>
             </button>
 
             <button
@@ -291,7 +295,7 @@
             >
               <font-awesome icon="file-lines" class="fa-fw" />
             </router-link>
-          </div>
+          </span>
         </div>
       </li>
     </ul>
@@ -299,7 +303,6 @@
 
     <div v-if="contacts.length > 0" class="mt-2 w-full text-left">
       <input
-        v-if="!showGiveNumbers"
         type="checkbox"
         :checked="contactsSelected.length === contacts.length"
         class="align-middle ml-2 h-6 w-6"
@@ -311,7 +314,6 @@
         "
       />
       <button
-        v-if="!showGiveNumbers"
         href=""
         class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
         :style="
@@ -448,7 +450,6 @@ export default class ContactsView extends Vue {
     await this.processContactJwt();
     await this.processInviteJwt();
 
-    this.showGiveNumbers = !!settings.showContactGivesInline;
     this.hideRegisterPromptOnNewContact =
       !!settings.hideRegisterPromptOnNewContact;
 

src/views/HelpView.vue

@@ -502,6 +502,7 @@
         then don't use it.
         <br />
         As for data & privacy:
+      </p>
       <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
@@ -522,7 +523,6 @@
           </a>
         </li>
       </ul>
-      </p>
 
       <h2 class="text-xl font-semibold">How can I contribute?</h2>
       <p>

src/views/InviteOneView.vue

@@ -14,7 +14,7 @@
     </div>
 
     <!-- Heading -->
-    <h1 class="text-4xl text-center font-light">Invitations</h1>
+    <h1 class="text-4xl text-center font-light">Single Invitations</h1>
 
     <ul class="ml-8 mt-4 list-outside list-disc w-5/6">
       <li>
@@ -73,17 +73,15 @@
                   invite.expiresAt > new Date().toISOString()
                 "
                 class="text-center text-blue-500 cursor-pointer"
-                :title="inviteLink(invite.jwt)"
-                @click="
-                  copyInviteAndNotify(invite.inviteIdentifier, invite.jwt)
-                "
+                title="Click to copy invite link"
+                @click="copyInviteAndNotify(invite)"
               >
                 {{ getTruncatedInviteId(invite.inviteIdentifier) }}
               </span>
               <span
                 v-else
                 class="text-center text-slate-500 cursor-pointer"
-                :title="inviteLink(invite.jwt)"
+                title="Click to see invite details"
                 @click="
                   showInvite(
                     invite.inviteIdentifier,
@@ -120,6 +118,8 @@
                 @click="deleteInvite(invite.inviteIdentifier, invite.notes)"
               />
             </td>
+            <td class="hidden" :data-testId="invite.jwt" aria-hidden="true">
+            </td>
           </tr>
         </tbody>
       </table>
@@ -146,7 +146,7 @@ import { logger } from "../utils/logger";
 interface Invite {
   inviteIdentifier: string;
   expiresAt: string;
-  jwt: string;
+  jwt?: string; // only used to store a JWT for testing, after the link is clicked
   notes: string;
   redeemedAt: string | null;
   redeemedBy: string | null;
@@ -220,18 +220,27 @@ export default class InviteOneView extends Vue {
     return `${redeemedBy.slice(0, 13)}...${redeemedBy.slice(-3)}`;
   }
 
-  inviteLink(jwt: string): string {
+  inviteLink(jwt: string | undefined): string {
+    if (!jwt) return "Click to set JWT link";
     return APP_SERVER + "/invite-one-accept/" + jwt;
   }
 
-  copyInviteAndNotify(inviteId: string, jwt: string) {
-    useClipboard().copy(this.inviteLink(jwt));
+  async copyInviteAndNotify(invite: Invite) {
+    const expiresIn = (new Date(invite.expiresAt).getTime() - Date.now()) / 1000;
+    const inviteJwt = await createInviteJwt(
+      this.activeDid,
+      undefined,
+      invite.inviteIdentifier,
+      expiresIn,
+    );
+    invite.jwt = inviteJwt; // set for testing
+    useClipboard().copy(this.inviteLink(inviteJwt));
     this.$notify(
       {
         group: "alert",
         type: "success",
         title: "Copied",
-        text: "Your clipboard now contains the link for invite " + inviteId,
+        text: "Your clipboard now contains the link for invite " + invite.inviteIdentifier,
       },
       5000,
     );
@@ -295,22 +304,14 @@ export default class InviteOneView extends Vue {
               },
             };
           }
-          const expiresIn = (new Date(expiresAt).getTime() - Date.now()) / 1000;
-          const inviteJwt = await createInviteJwt(
-            this.activeDid,
-            undefined,
-            inviteIdentifier,
-            expiresIn,
-          );
           await axios.post(
             this.apiServer + "/api/userUtil/invite",
-            { inviteJwt: inviteJwt, notes: notes },
+            { inviteIdentifier: inviteIdentifier, notes: notes, expiresAt: expiresAt },
             { headers },
           );
           const newInvite = {
             inviteIdentifier: inviteIdentifier,
             expiresAt: expiresAt,
-            jwt: inviteJwt,
             notes: notes,
             redeemedAt: null,
             redeemedBy: null,

test-playwright/05-invite.spec.ts

@@ -44,6 +44,11 @@ test('Check User 0 can invite someone', async ({ page }) => {
   await expect(page.locator('div[role="alert"] button:has-text("Yes")')).toBeHidden();
 
   // check that the invite is in the list
+  const newInviteRow = page.locator(`tr:has(td:has-text("Neighbor ${neighborNum}"))`);
+  await expect(newInviteRow).toBeVisible();
+  // click on the link in the first column, which generates the JWT in the other column
+  await newInviteRow.locator('td:first-child').click();
+
   const newInviteLine = page.locator(`td:has-text("Neighbor ${neighborNum}")`);
   await expect(newInviteLine).toBeVisible();
   // retrieve the link from the title