fix: make TOU and citation text identical

have an update problem here but extracting the citation itself into a
reusable component e.g., CitationCard.vue, is making it render eagerly
within the dialog so it shows up embedded in the Footer

app/components/Citation.vue

@@ -26,19 +26,19 @@
 
           <h2>Example Citation (click text to copy)</h2>
           <v-textarea
+            v-model="citationText"
             class="blockquote"
             readonly
             no-resize
-            v-model="citationText"
             @click="copyToClipboard"
           >
           </v-textarea>
           <h2>BibTeX (click text to copy)</h2>
           <v-textarea
+            v-model="citationBibTex"
             class="blockquote"
             readonly
             no-resize
-            v-model="citationBibTex"
             @click="copyToClipboard"
           >
           </v-textarea>
@@ -83,7 +83,6 @@ class Citation extends Vue {
   copyToClipboard(evt, data) {
     const srcElement = evt.srcElement;
     const citationText = srcElement.value;
-    console.log("citation text: ", citationText);
     navigator.clipboard.writeText(citationText).then(() => {
       srcElement.select();
       this.clipboardMessage = true;

app/components/TermsOfUse.vue

@@ -31,13 +31,24 @@
             itself.
           </p>
 
-          <h2>Example reference</h2>
-          <p class="text-body-1">(SKOPE 2022)</p>
-
-          <h2>Example Citation</h2>
-          <blockquote class="blockquote">{{ citationText }}</blockquote>
-          <h2>BibTeX</h2>
-          <blockquote class="blockquote">{{ citationBibTex }}</blockquote>
+          <h2>Example Citation (click text to copy)</h2>
+          <v-textarea
+            v-model="citationText"
+            class="blockquote"
+            readonly
+            no-resize
+            @click="copyToClipboard"
+          >
+          </v-textarea>
+          <h2>BibTeX (click text to copy)</h2>
+          <v-textarea
+            v-model="citationBibTex"
+            class="blockquote"
+            readonly
+            no-resize
+            @click="copyToClipboard"
+          >
+          </v-textarea>
 
           <h2>Contact us</h2>
           <p class="text-body-1">
@@ -74,6 +85,7 @@ import { CITATION_TXT, CITATION_BIB } from "@/store/modules/_constants";
 @Component()
 class TermsOfUse extends Vue {
   showTerms = true;
+  clipboardMessage = false;
 
   created() {
     if (process.client) {
@@ -101,6 +113,15 @@ class TermsOfUse extends Vue {
   declineTerms() {
     this.$warehouse.remove(this.termsAcceptedWarehouseKey);
   }
+
+  copyToClipboard(evt, data) {
+    const srcElement = evt.srcElement;
+    const citationText = srcElement.value;
+    navigator.clipboard.writeText(citationText).then(() => {
+      srcElement.select();
+      this.clipboardMessage = true;
+    });
+  }
 }
 
 export default TermsOfUse;