add copy-link on the claim view page & enable certificate

src/libs/endorserServer.ts

@@ -483,7 +483,8 @@ export function didInfoForCertificate(
   did: string | undefined,
   contacts: Contact[],
 ): string {
-  return didInfoForContact(did, undefined, contactForDid(did, contacts), []).displayName;
+  return didInfoForContact(did, undefined, contactForDid(did, contacts), [])
+    .displayName;
 }
 
 let passkeyAccessToken: string = "";

src/main.ts

@@ -59,6 +59,7 @@ import {
   faImagePortrait,
   faLeftRight,
   faLightbulb,
+  faLink,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
@@ -134,6 +135,7 @@ library.add(
   faImagePortrait,
   faLeftRight,
   faLightbulb,
+  faLink,
   faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,

src/router/index.ts

@@ -45,7 +45,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("../views/ClaimAddRawView.vue"),
   },
   {
-    path: "/claim-cert/:id?",
+    path: "/claim-cert/:id",
     name: "claim-cert",
     component: () => import("../views/ClaimCertificateView.vue"),
   },

src/views/ClaimCertificateView.vue

@@ -26,7 +26,7 @@ import { db, retrieveSettingsForActiveAccount } from "@/db/index";
 import * as endorserServer from "@/libs/endorserServer";
 
 @Component
-export default class ClaimViewCertificate extends Vue {
+export default class ClaimCertificateView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
   activeDid = "";

src/views/ClaimView.vue

@@ -39,16 +39,26 @@
                 <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
               </button>
             </h2>
-            <!--
             <div>
               <router-link
                 :to="'/claim-cert/' + encodeURIComponent(veriClaim.id)"
                 class="text-blue-500 mt-2"
+                title="Printable Certificate"
               >
                 <fa icon="square" class="text-white bg-yellow-500 p-1" />
               </router-link>
             </div>
-            -->
+            <!-- show link icon to copy this URL to the clipboard -->
+            <div>
+              <button
+                title="Copy Link"
+                @click="
+                  copyToClipboard('Current page link', window.location.href)
+                "
+              >
+                <fa icon="link" class="text-slate-500" />
+              </button>
+            </div>
           </div>
           <div class="text-sm">
             <div data-testId="description">
@@ -550,6 +560,7 @@ export default class ClaimView extends Vue {
   yaml = yaml;
   libsUtil = libsUtil;
   serverUtil = serverUtil;
+  window = window;
 
   resetThisValues() {
     this.confirmerIdList = [];
@@ -999,3 +1010,37 @@ export default class ClaimView extends Vue {
   }
 }
 </script>
+<style>
+/*
+  Tooltip, generated on "title" attributes on "fa" icons
+  Kudos to https://www.w3schools.com/css/css_tooltip.asp
+*/
+/* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  visibility: hidden;
+  width: 200px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  position: absolute;
+  z-index: 1;
+}
+
+/* Show the tooltip text when you mouse over the tooltip container */
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+.tooltip:hover .tooltiptext-left {
+  visibility: visible;
+}
+</style>