refactor(webapp): replace vue-clipboard2

Author: lukaslihotzki

www/webapp/package.json

@@ -17,7 +17,6 @@
     "date-fns": "^2.30.0",
     "pinia": "^2.0.30",
     "vue": "~2.7.14",
-    "vue-clipboard2": "^0.3.3",
     "vue-router": "~3.6.5",
     "vuelidate": "^0.7.7",
     "vuetify": "^2.6.13"

www/webapp/src/main.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import App from '@/App.vue'
 import router from '@/router'
 import vuetify from '@/plugins/vuetify'
-import VueClipboard from 'vue-clipboard2'
 import VueRouter from 'vue-router'
 import Vuelidate from 'vuelidate'
 import "@fontsource/roboto/300.css" /* light */
@@ -15,8 +14,6 @@ import {createPinia, PiniaVuePlugin} from "pinia";
 
 
 Vue.config.productionTip = false
-VueClipboard.config.autoSetContainer = true
-Vue.use(VueClipboard)
 Vue.use(Vuelidate)
 // `Pinia` replaces `vuex` as store.
 Vue.use(PiniaVuePlugin)

www/webapp/src/views/DomainSetup.vue

@@ -39,9 +39,7 @@
             <pre class="pa-3">{{ ns.join('\n') }}</pre>
             <v-card-actions>
               <v-btn
-                  v-clipboard:copy="ns.join('\n')"
-                  v-clipboard:success="copySuccess"
-                  v-clipboard:error="copyError"
+                  @click="copyToClipboard(ns.join('\n'))"
                   outlined
                   text
               >
@@ -88,9 +86,7 @@
             <pre class="pa-3">{{ t.data }}</pre>
             <v-card-actions>
               <v-btn
-                  v-clipboard:copy="t.data"
-                  v-clipboard:success="copySuccess"
-                  v-clipboard:error="copyError"
+                  @click="copyToClipboard(t.data)"
                   outlined
                   text
               >
@@ -193,11 +189,19 @@ export default {
     },
   },
   methods: {
-    copySuccess: function () {
-      this.showSnackbar("Copied to clipboard.");
-    },
-    copyError: function () {
-      this.showSnackbar("Copy to clipboard failed. Please try again manually.");
+    copyToClipboard: async function (text) {
+      try {
+        await navigator.clipboard.writeText(text).then(
+            () => {
+              this.showSnackbar("Copied to clipboard.");
+            },
+            () => {
+              this.showSnackbar("Copy to clipboard not allowed. Please try again manually.");
+            },
+        );
+      } catch (e) {
+        this.showSnackbar("Copy to clipboard failed. Please try again manually.");
+      }
     },
     showSnackbar: function (text) {
       this.snackbar_text = text;