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,43 +126,43 @@
         </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,
-        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" />
+      <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 />
-        <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"
-          :class="showGiveAmountsClassNames()"
-          @click="toggleShowGiveTotals()"
-        >
-          {{
-            showGiveTotals
-              ? "Totals"
-              : showGiveConfirmed
-                ? "Confirmed Amounts"
-                : "Unconfirmed Amounts"
-          }}
-          <font-awesome icon="left-right" class="fa-fw" />
-        </button>
+        <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"
+            :class="showGiveAmountsClassNames()"
+            @click="toggleShowGiveTotals()"
+          >
+            {{
+              showGiveTotals
+                ? "Totals"
+                : showGiveConfirmed
+                  ? "Confirmed Amounts"
+                  : "Unconfirmed Amounts"
+            }}
+            <font-awesome icon="left-right" class="fa-fw" />
+          </button>
+        </span>
       </div>
     </div>
 
@@ -179,79 +178,82 @@
         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">
-            <input
-              v-if="!showGiveNumbers"
-              type="checkbox"
-              :checked="contactsSelected.includes(contact.did)"
-              class="ml-2 h-6 w-6 flex-shrink-0"
-              data-testId="contactCheckOne"
-              @click="
-                contactsSelected.includes(contact.did)
-                  ? contactsSelected.splice(
-                      contactsSelected.indexOf(contact.did),
-                      1,
-                    )
-                  : contactsSelected.push(contact.did)
-              "
-            />
-
-            <EntityIcon
-              :contact="contact"
-              :icon-size="48"
-              class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
-              @click="showLargeIdenticon = contact"
-            />
-
-            <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
-              {{ contactNameNonBreakingSpace(contact.name) }}
-            </h2>
-
-            <span>
-              <div class="flex gap-2 items-center">
-                <router-link
-                  :to="{
-                    path: '/did/' + encodeURIComponent(contact.did),
-                  }"
-                  title="See more about this person"
-                >
-                  <font-awesome
-                    icon="circle-info"
-                    class="text-xl text-blue-500"
-                  />
-                </router-link>
-
-                <span class="text-sm overflow-hidden">{{
-                  libsUtil.shortDid(contact.did)
-                }}</span>
-              </div>
-              <div class="text-sm">
-                {{ contact.notes }}
-              </div>
+        <div class="flex justify-between items-start">
+          <span class="grow overflow-hidden">
+            <span class="flex items-center gap-3">
+              <input
+                type="checkbox"
+                :checked="contactsSelected.includes(contact.did)"
+                class="ml-2 h-6 w-6 flex-shrink-0"
+                data-testId="contactCheckOne"
+                @click="
+                  contactsSelected.includes(contact.did)
+                    ? contactsSelected.splice(
+                        contactsSelected.indexOf(contact.did),
+                        1,
+                      )
+                    : contactsSelected.push(contact.did)
+                "
+              />
+
+              <EntityIcon
+                :contact="contact"
+                :icon-size="48"
+                class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
+                @click="showLargeIdenticon = contact"
+              />
+
+              <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
+                {{ contactNameNonBreakingSpace(contact.name) }}
+              </h2>
+
+              <span>
+                <div class="flex gap-2 items-center">
+                  <router-link
+                    :to="{
+                      path: '/did/' + encodeURIComponent(contact.did),
+                    }"
+                    title="See more about this person"
+                  >
+                    <font-awesome
+                      icon="circle-info"
+                      class="text-xl text-blue-500"
+                    />
+                  </router-link>
+
+                  <span class="text-sm overflow-hidden">{{
+                    libsUtil.shortDid(contact.did)
+                  }}</span>
+                </div>
+                <div class="text-sm">
+                  {{ contact.notes }}
+                </div>
+              </span>
             </span>
-          </div>
-          <div
-            v-if="showGiveNumbers && contact.did != activeDid"
-            class="ml-auto flex gap-1.5 mt-2"
+          </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 />
-              {{
-                /* eslint-disable prettier/prettier */
-                showGiveTotals
-                  ? ((givenToMeConfirmed[contact.did] || 0)
-                      + (givenToMeUnconfirmed[contact.did] || 0))
-                  : showGiveConfirmed
-                      ? (givenToMeConfirmed[contact.did] || 0)
-                      : (givenToMeUnconfirmed[contact.did] || 0)
-                /* eslint-enable prettier/prettier */
-              }}
+              <span v-if="showGiveNumbers">
+                {{
+                  /* eslint-disable prettier/prettier */
+                  showGiveTotals
+                    ? ((givenToMeConfirmed[contact.did] || 0)
+                        + (givenToMeUnconfirmed[contact.did] || 0))
+                    : showGiveConfirmed
+                        ? (givenToMeConfirmed[contact.did] || 0)
+                        : (givenToMeUnconfirmed[contact.did] || 0)
+                  /* eslint-enable prettier/prettier */
+                }}
+              </span>
             </button>
 
             <button
@@ -259,18 +261,20 @@
               :title="givenByMeDescriptions[contact.did] || ''"
               @click="confirmShowGiftedDialog(activeDid, contact.did)"
             >
-              To:
+              To&hellip;
               <br />
-              {{
-                /* eslint-disable prettier/prettier */
-                showGiveTotals
+              <span v-if="showGiveNumbers">
+                {{
+                  /* eslint-disable prettier/prettier */
+                  showGiveTotals
                   ? ((givenByMeConfirmed[contact.did] || 0)
                     + (givenByMeUnconfirmed[contact.did] || 0))
                   : showGiveConfirmed
                       ? (givenByMeConfirmed[contact.did] || 0)
                       : (givenByMeUnconfirmed[contact.did] || 0)
-                /* eslint-enable prettier/prettier */
-              }}
+                  /* 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,27 +502,27 @@
         then don't use it.
         <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 <font-awesome 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>
+      <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 <font-awesome 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>
 
       <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