From 40afecb91df35ea2f82d4e1287387d5b71af458c Mon Sep 17 00:00:00 2001
From: Rotzbua <Rotzbua@users.noreply.github.com>
Date: Tue, 11 Jul 2023 20:43:44 +0200
Subject: [PATCH 1/3] feat(webapp): add eslint rule for mustache style

Effect: grant uniform style
Reference: https://eslint.vuejs.org/rules/mustache-interpolation-spacing.html
---
 www/webapp/.eslintrc.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/www/webapp/.eslintrc.js b/www/webapp/.eslintrc.js
index 6d807148f..e9bedc3b7 100644
--- a/www/webapp/.eslintrc.js
+++ b/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: {

From 0ad7a6e5057b2f1e26ac5ae0a6da6d4a64df1feb Mon Sep 17 00:00:00 2001
From: Rotzbua <Rotzbua@users.noreply.github.com>
Date: Tue, 11 Jul 2023 20:45:35 +0200
Subject: [PATCH 2/3] fix(webapp): autoformatting for mustache eslint style

---
 www/webapp/src/App.vue                           | 16 ++++++++--------
 www/webapp/src/components/Field/RecordList.vue   |  2 +-
 www/webapp/src/views/AboutPage.vue               |  4 ++--
 .../src/views/Console/TOTPVerifyDialog.vue       |  8 ++++----
 www/webapp/src/views/CrudList.vue                |  2 +-
 www/webapp/src/views/DonatePage.vue              | 12 ++++++------
 www/webapp/src/views/DynSetup.vue                | 12 ++++++------
 www/webapp/src/views/HomePage.vue                |  8 ++++----
 www/webapp/src/views/ImpressumPage.vue           |  2 +-
 www/webapp/src/views/PrivacyPolicy.vue           |  6 +++---
 www/webapp/src/views/TermsPage.vue               |  2 +-
 11 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/www/webapp/src/App.vue b/www/webapp/src/App.vue
index 482c44e8f..40b823a1d 100644
--- a/www/webapp/src/App.vue
+++ b/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>
diff --git a/www/webapp/src/components/Field/RecordList.vue b/www/webapp/src/components/Field/RecordList.vue
index 8f7ab05fc..64a7eb12f 100644
--- a/www/webapp/src/components/Field/RecordList.vue
+++ b/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>
diff --git a/www/webapp/src/views/AboutPage.vue b/www/webapp/src/views/AboutPage.vue
index ccd53ddfd..49067bf8b 100644
--- a/www/webapp/src/views/AboutPage.vue
+++ b/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>
diff --git a/www/webapp/src/views/Console/TOTPVerifyDialog.vue b/www/webapp/src/views/Console/TOTPVerifyDialog.vue
index 744020f6e..b30a18ad4 100644
--- a/www/webapp/src/views/Console/TOTPVerifyDialog.vue
+++ b/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,14 +29,14 @@
 
         <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>
@@ -44,7 +44,7 @@
             <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>
 
diff --git a/www/webapp/src/views/CrudList.vue b/www/webapp/src/views/CrudList.vue
index 388cbac96..c4baab16e 100644
--- a/www/webapp/src/views/CrudList.vue
+++ b/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
diff --git a/www/webapp/src/views/DonatePage.vue b/www/webapp/src/views/DonatePage.vue
index 4c23ea812..1fcc842d0 100644
--- a/www/webapp/src/views/DonatePage.vue
+++ b/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">
diff --git a/www/webapp/src/views/DynSetup.vue b/www/webapp/src/views/DynSetup.vue
index ab0adaf0c..7ce9cfa6c 100644
--- a/www/webapp/src/views/DynSetup.vue
+++ b/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.
diff --git a/www/webapp/src/views/HomePage.vue b/www/webapp/src/views/HomePage.vue
index a6f694a98..db102667b 100644
--- a/www/webapp/src/views/HomePage.vue
+++ b/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>
diff --git a/www/webapp/src/views/ImpressumPage.vue b/www/webapp/src/views/ImpressumPage.vue
index bcfc9de5a..b537c9f09 100644
--- a/www/webapp/src/views/ImpressumPage.vue
+++ b/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>
diff --git a/www/webapp/src/views/PrivacyPolicy.vue b/www/webapp/src/views/PrivacyPolicy.vue
index aca1f31f7..953ff5224 100644
--- a/www/webapp/src/views/PrivacyPolicy.vue
+++ b/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>
diff --git a/www/webapp/src/views/TermsPage.vue b/www/webapp/src/views/TermsPage.vue
index 78d2ab32c..fae872b53 100644
--- a/www/webapp/src/views/TermsPage.vue
+++ b/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>

From 9762509d3d3c7b4bc6e2f06590f5b4718e39275b Mon Sep 17 00:00:00 2001
From: Lukas Lihotzki <lukas@lihotzki.de>
Date: Wed, 12 Jul 2023 11:26:13 +0200
Subject: [PATCH 3/3] refactor(webapp): replace vue-clipboard2

---
 www/webapp/package.json              |  1 -
 www/webapp/src/main.js               |  3 ---
 www/webapp/src/views/DomainSetup.vue | 26 +++++++++++++++-----------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/www/webapp/package.json b/www/webapp/package.json
index ea5007562..e4f816015 100644
--- a/www/webapp/package.json
+++ b/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"
diff --git a/www/webapp/src/main.js b/www/webapp/src/main.js
index dd10330a2..66982588e 100644
--- a/www/webapp/src/main.js
+++ b/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)
diff --git a/www/webapp/src/views/DomainSetup.vue b/www/webapp/src/views/DomainSetup.vue
index ac01e02a2..fdccea707 100644
--- a/www/webapp/src/views/DomainSetup.vue
+++ b/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;