refactor(webapp): replace vue-clipboard2

www/webapp/.eslintrc.js

@@ -17,6 +17,8 @@ module.exports = {
     'vue/v-bind-style': 'warn',
     'vue/v-on-style': 'warn',
     'vue/v-slot-style': 'warn',
+    'vue/mustache-interpolation-spacing': ['warn', 'always'],
+    'vue/no-multi-spaces': 'warn',
   },
   ignorePatterns: ['**/src/modules/**/*'],
   parserOptions: {

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/App.vue

@@ -14,12 +14,12 @@
                 :to="{name: item.name}"
                 :exact="true">
           <v-list-item-action>
-            <v-icon>{{item.icon}}</v-icon>
+            <v-icon>{{ item.icon }}</v-icon>
           </v-list-item-action>
           <v-list-item-content>
             <v-list-item-title>
-              {{item.text}}
-              <v-icon :color="item.post_icon_color" class="text--darken-2" small v-if="item.post_icon">{{item.post_icon}}</v-icon>
+              {{ item.text }}
+              <v-icon :color="item.post_icon_color" class="text--darken-2" small v-if="item.post_icon">{{ item.post_icon }}</v-icon>
             </v-list-item-title>
           </v-list-item-content>
         </v-list-item>
@@ -41,8 +41,8 @@
           <router-link
                   class="primary--text text--darken-2"
                   :to="{name: item.name}"
-          >{{item.text}}</router-link>
-          <v-icon :color="item.post_icon_color" class="ml-1 text--darken-1" small v-if="item.post_icon">{{item.post_icon}}</v-icon>
+          >{{ item.text }}</router-link>
+          <v-icon :color="item.post_icon_color" class="ml-1 text--darken-1" small v-if="item.post_icon">{{ item.post_icon }}</v-icon>
         </span>
       </div>
       <v-btn class="mx-4" color="primary" depressed :to="{name: 'signup', query: $route.query}" v-if="!user.authenticated">Create Account</v-btn>
@@ -70,7 +70,7 @@
                       v-on="on"
               >
                 more
-                <v-icon right>{{mdiMenuDown}}</v-icon>
+                <v-icon right>{{ mdiMenuDown }}</v-icon>
               </v-btn>
             </template>
 
@@ -143,7 +143,7 @@
       </div>
       <div class="grey darken-4 d-md-flex flex-row justify-space-between pa-6">
         <div>
-          <p>{{email}}</p>
+          <p>{{ email }}</p>
           <p>
             Kyffhäuserstraße 5<br/>
             10781 Berlin<br/>
@@ -153,7 +153,7 @@
         <div>
           <p>
             Please <router-link :to="{name: 'donate'}">donate</router-link>!
-            <v-icon color="red" class="text--darken-2" dense>{{mdiHeart}}</v-icon>
+            <v-icon color="red" class="text--darken-2" dense>{{ mdiHeart }}</v-icon>
           </p>
           <p>
             European Bank Account:<br>

www/webapp/src/components/Field/RecordList.vue

@@ -24,7 +24,7 @@
             small
             text
             v-if="!readonly && !disabled"
-    ><v-icon>{{mdiPlus}}</v-icon> add another value</v-btn>
+    ><v-icon>{{ mdiPlus }}</v-icon> add another value</v-btn>
     <!--div><code style="white-space: normal">{{ value }}</code></div-->
   </div>
 </template>

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/AboutPage.vue

@@ -36,8 +36,8 @@
         <v-row class="pb-8">
           <v-col class="col-12 col-sm-6 d-flex" v-for="p in purposes" :key="p.title">
             <v-card>
-              <v-card-title>{{p.title}}</v-card-title>
-              <v-card-text>{{p.text}}</v-card-text>
+              <v-card-title>{{ p.title }}</v-card-title>
+              <v-card-text>{{ p.text }}</v-card-text>
             </v-card>
           </v-col>
         </v-row>

www/webapp/src/views/Console/TOTPVerifyDialog.vue

@@ -14,7 +14,7 @@
           </div>
           <v-spacer/>
           <v-icon @click.stop="close">
-            {{mdiClose}}
+            {{ mdiClose }}
           </v-icon>
         </v-card-title>
         <v-divider/>
@@ -29,22 +29,22 @@
 
         <v-card-text v-if="!!successDetail" class="text-center">
           <p class="mt-2">
-            <v-icon>{{mdiCheck}}</v-icon>
+            <v-icon>{{ mdiCheck }}</v-icon>
             Great! Continue to <router-link :to="{name: 'login'}">log in</router-link>.
           </p>
         </v-card-text>
 
         <v-card-text v-if="!!data && !successDetail" class="text-center">
           <p class="mt-2">
-            <v-icon>{{mdiNumeric1Circle}}</v-icon>
+            <v-icon>{{ mdiNumeric1Circle }}</v-icon>
             Please scan the following QR code with an authenticator app (e.g. Google Authenticator).<br />
             <strong>This code is only displayed once.</strong>
           </p>
           <div class="text-center">
             <qrcode-vue :value="data.uri" size="300" level="H"/>
           </div>
           <p class="mt-6">
-            <v-icon>{{mdiNumeric2Circle}}</v-icon>
+            <v-icon>{{ mdiNumeric2Circle }}</v-icon>
             Enter the code displayed in the authenticator app to confirm and activate the token:
           </p>
 

www/webapp/src/views/CrudList.vue

@@ -62,7 +62,7 @@
                         depressed
                         :disabled="user.working"
                 >
-                  <v-icon>{{mdiPlus}}</v-icon>
+                  <v-icon>{{ mdiPlus }}</v-icon>
                 </v-btn>
                 <template #extension v-if="$vuetify.breakpoint.xsOnly">
                   <v-text-field

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;

www/webapp/src/views/DonatePage.vue

@@ -18,7 +18,7 @@
               <v-expansion-panel>
                 <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
-                    <v-icon class="mr-2">{{mdiBankTransferIn}}</v-icon> Direct Debit – Let us Take your Money (Europe)
+                    <v-icon class="mr-2">{{ mdiBankTransferIn }}</v-icon> Direct Debit – Let us Take your Money (Europe)
                   </v-layout>
                 </v-expansion-panel-header>
                 <v-expansion-panel-content class="pt-4">
@@ -32,7 +32,7 @@
               <v-expansion-panel>
                 <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
-                    <v-icon class="mr-2">{{mdiBankTransferOut}}</v-icon> Bank Transfer – Send us Money (Europe)
+                    <v-icon class="mr-2">{{ mdiBankTransferOut }}</v-icon> Bank Transfer – Send us Money (Europe)
                   </v-layout>
                 </v-expansion-panel-header>
                 <v-expansion-panel-content class="pt-4">
@@ -63,7 +63,7 @@
               <v-expansion-panel>
                 <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
-                    <v-icon class="mr-2">{{mdiCreditCardOutline}}</v-icon> Credit Card
+                    <v-icon class="mr-2">{{ mdiCreditCardOutline }}</v-icon> Credit Card
                   </v-layout>
                 </v-expansion-panel-header>
                 <v-expansion-panel-content class="pt-4">
@@ -81,7 +81,7 @@
               <v-expansion-panel>
                 <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
-                    <v-icon class="mr-2">{{mdiGithub}}</v-icon> GitHub Sponsors
+                    <v-icon class="mr-2">{{ mdiGithub }}</v-icon> GitHub Sponsors
                   </v-layout>
                 </v-expansion-panel-header>
                 <v-expansion-panel-content class="pt-4">
@@ -94,7 +94,7 @@
               <v-expansion-panel>
                 <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
-                    <v-icon class="mr-2">{{mdiGiftOutline}}</v-icon> PayPal
+                    <v-icon class="mr-2">{{ mdiGiftOutline }}</v-icon> PayPal
                   </v-layout>
                 </v-expansion-panel-header>
                 <v-expansion-panel-content class="pt-4">
@@ -112,7 +112,7 @@
               <v-expansion-panel>
                 <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
-                    <v-icon class="mr-2">{{mdiHeartMultipleOutline}}</v-icon> Double-up with Your Employer
+                    <v-icon class="mr-2">{{ mdiHeartMultipleOutline }}</v-icon> Double-up with Your Employer
                   </v-layout>
                 </v-expansion-panel-header>
                 <v-expansion-panel-content class="pt-4">

www/webapp/src/views/DynSetup.vue

@@ -30,7 +30,7 @@
               All operations on your domain require the following authorization token secret shown below:
             </p>
             <p align="center">
-              <code>{{token}}</code>
+              <code>{{ token }}</code>
             </p>
             <p>
               Please keep this token secret in a safe place.
@@ -53,15 +53,15 @@
                     <tbody>
                     <tr>
                       <td>URL</td>
-                      <td class="fixed-width">https://update.{{LOCAL_PUBLIC_SUFFIXES[0]}}/</td>
+                      <td class="fixed-width">https://update.{{ LOCAL_PUBLIC_SUFFIXES[0] }}/</td>
                     </tr>
                     <tr>
                       <td>Username</td>
-                      <td class="fixed-width">{{domain}}</td>
+                      <td class="fixed-width">{{ domain }}</td>
                     </tr>
                     <tr>
                       <td>Password</td>
-                      <td class="fixed-width">{{token}}</td>
+                      <td class="fixed-width">{{ token }}</td>
                     </tr>
                     </tbody>
                   </v-simple-table>
@@ -119,10 +119,10 @@
                 <span v-if="ips.length > 1">are:</span><span v-if="ips.length === 1">is:</span>
               </p>
               <ul class="mb-4">
-                <li v-for="ip in ips" :key="ip"><span class="fixed-width">{{ip}}</span></li>
+                <li v-for="ip in ips" :key="ip"><span class="fixed-width">{{ ip }}</span></li>
               </ul>
               <p>
-                The last time your DNS information changed was at {{lastChanged}}.
+                The last time your DNS information changed was at {{ lastChanged }}.
               </p>
               <p>
                 Your deSEC account setup looks good and is ready to use.

www/webapp/src/views/HomePage.vue

@@ -63,8 +63,8 @@
     <v-container>
       <v-row justify="center" class="py-8">
         <v-col class="col-12 col-sm-4 text-center" v-for="f in features" :key="f.title">
-          <v-icon x-large>{{f.icon}}</v-icon>
-          <h1 class="grey--text text--darken-2"><span>{{f.title}}</span></h1>
+          <v-icon x-large>{{ f.icon }}</v-icon>
+          <h1 class="grey--text text--darken-2"><span>{{ f.title }}</span></h1>
           <p v-html="f.text"></p>
         </v-col>
       </v-row>
@@ -171,8 +171,8 @@
                 </v-img>
               </template>
               <span>
-                {{f.name}}
-                <span v-if="f.adopted_by">sponsored by {{f.adopted_by}}</span>
+                {{ f.name }}
+                <span v-if="f.adopted_by">sponsored by {{ f.adopted_by }}</span>
                 <span v-else>has no sponsor, support it now!</span>
               </span>
             </v-tooltip>

www/webapp/src/views/ImpressumPage.vue

@@ -7,7 +7,7 @@
     <h3>Postanschrift / Address</h3>
     <p>Kyffhäuserstr. 5<br>10781 Berlin</p>
     <h3>E-Mail</h3>
-    <p>{{email}}</p>
+    <p>{{ email }}</p>
     <h3>Vertreten durch / Represented by</h3>
     <p>
       Dr. Nils Wisiol<br>

www/webapp/src/views/PrivacyPolicy.vue

@@ -10,8 +10,8 @@
         <v-row class="pb-8">
           <v-col class="col-12 col-sm-6 d-flex" v-for="p in privacy_policy" :key="p.title">
             <v-card>
-              <v-card-title>{{p.title}}</v-card-title>
-              <v-card-text>{{p.text}}</v-card-text>
+              <v-card-title>{{ p.title }}</v-card-title>
+              <v-card-text>{{ p.text }}</v-card-text>
             </v-card>
           </v-col>
         </v-row>
@@ -86,7 +86,7 @@
       <p></p><h3>Änderung unserer Datenschutzbestimmungen</h3>
       <p>Wir behalten uns vor, diese Datenschutzerklärung anzupassen, damit sie stets den aktuellen rechtlichen Anforderungen entspricht oder um Änderungen unserer Leistungen in der Datenschutzerklärung umzusetzen, z.B. bei der Einführung neuer Services. Für Ihren erneuten Besuch gilt dann die neue Datenschutzerklärung.</p>
       <h3>Fragen an den Datenschutzbeauftragten</h3>
-      <p>Wenn Sie Fragen zum Datenschutz haben, schreiben Sie uns bitte eine E-Mail oder wenden Sie sich direkt an die für den Datenschutz verantwortliche Person in unserer Organisation: {{email}}</p>
+      <p>Wenn Sie Fragen zum Datenschutz haben, schreiben Sie uns bitte eine E-Mail oder wenden Sie sich direkt an die für den Datenschutz verantwortliche Person in unserer Organisation: {{ email }}</p>
       <p><em>Die Datenschutzerklärung wurde <a href="https://www.activemind.de/datenschutz/datenschutzhinweis-generator/">mithilfe der activeMind AG</a> erstellt.</em></p>
     </v-container>
   </div>

www/webapp/src/views/TermsPage.vue

@@ -31,7 +31,7 @@
       <v-row class="pb-8">
         <v-col class="col-12 col-sm-6 d-flex" v-for="(t, idx) in terms_of_use" :key="t.title">
           <v-card>
-            <v-card-title>§{{idx+1}} {{t.title}}</v-card-title>
+            <v-card-title>§{{ idx+1 }} {{ t.title }}</v-card-title>
             <v-card-text><span v-html="t.text"></span></v-card-text>
           </v-card>
         </v-col>