"Copy link" for the verify button

src/components/content-credentials/C2PAInfo.vue

@@ -14,10 +14,19 @@
   </div>
   <div v-if="!showFlagsOnly">
     <div class="attachment-info__verify-info" v-if="hasC2PA">
-      <i18n-t keypath="cc.cc_info" tag="span">
+      <i18n-t keypath="cc.cc_info" tag="span" style="position:relative">
         <template v-slot:link>
-          <a href="https://contentcredentials.org/verify" target="_blank">{{ $t("cc.cc_info_link") }}</a>
+          <a :href="verifyLink" target="_blank">{{ $t("cc.cc_info_link") }}</a>
-          <v-icon color="white">$vuetify.icons.ic_copy</v-icon>
+          <v-icon class="clickable" v-on:click="copyVerifyLink" color="white">$vuetify.icons.ic_copy</v-icon>
+          <v-btn
+            v-if="copiedVerifyLink"
+            id="btn-copy-room-link"
+            color="#333"
+            variant="flat"
+            style="position:absolute;right:0;bottom:0;color:white !important;"
+            class="filled-button link-copied-in-place"
+            >{{ $t("room_info.link_copied") }}</v-btn
+          >
         </template>
       </i18n-t>
     </div>
@@ -51,8 +60,10 @@ const props = defineProps<{
   showFlagsOnly?: boolean;
 }>();
 
+const verifyLink = ref("https://contentcredentials.org/verify");
 const infoText: Ref<string | undefined> = ref(undefined);
 const details: Ref<(CCPropertyProps & { link?: string })[]> = ref([]);
+const copiedVerifyLink = ref(false);
 
 const hasC2PA = computed(() => {
   return props.proof?.integrity?.c2pa !== undefined;
@@ -117,6 +128,21 @@ const updateDetails = () => {
   details.value = d;
 };
 
+const copyVerifyLink = async () => {
+  if (copiedVerifyLink.value) return
+  try {
+    await navigator.clipboard.writeText(verifyLink.value);
+    // Success!
+    copiedVerifyLink.value = true;
+    setInterval(() => {
+      // Hide again
+      copiedVerifyLink.value = false;
+    }, 3000);
+  } catch ($e) {
+    console.error('Cannot copy');
+  }
+};
+
 watch(
   props,
   () => {