Upgrade to Vue 3

www/webapp/.eslintignore

@@ -0,0 +1 @@
+**

www/webapp/.eslintrc.js

@@ -5,9 +5,8 @@ module.exports = {
     node: true
   },
   extends: [
-    'plugin:vue/essential',
-    // 'plugin:vue/strongly-recommended',
-    // 'plugin:vue/recommended',
+    'plugin:vue/base',
+    'plugin:vuetify/base',
     'eslint:recommended'
   ],
   rules: {

www/webapp/package.json

@@ -11,16 +11,16 @@
   "dependencies": {
     "@fontsource/roboto": "^4.5.8",
     "@mdi/font": "^6.9.96",
+    "@vue/compiler-sfc": "^3.2.47",
     "axios": "^0.27.2",
     "core-js": "^3.27.1",
-    "javascript-time-ago": "^2.5.9",
     "pinia": "^2.0.30",
-    "vue": "~2.7.14",
-    "vue-clipboard2": "^0.3.3",
-    "vue-router": "~3.6.5",
-    "vue-timeago": "^5.1.3",
+    "vue": "^3.2.47",
+    "vue-router": "^4.1.6",
+    "vue-timeago3": "^2.3.0",
     "vuelidate": "^0.7.7",
-    "vuetify": "^2.6.13"
+    "vuetify": "^3.1.8",
+    "webpack-plugin-vuetify": "^2.0.1"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",
@@ -30,10 +30,9 @@
     "@vue/cli-service": "^5.0.8",
     "eslint": "^8.31.0",
     "eslint-plugin-vue": "^9.8.0",
+    "eslint-plugin-vuetify": "^2.0.0-beta.2",
     "sass": "~1.32.13",
     "sass-loader": "^13.2.0",
-    "vue-cli-plugin-vuetify": "^2.5.8",
-    "vue-template-compiler": "^2.7.14",
-    "vuetify-loader": "~1.9.1"
+    "vue-demi": "^0.13.11"
   }
 }

www/webapp/src/App.vue

@@ -3,7 +3,7 @@
     <v-navigation-drawer
             v-model="drawer"
             app
-            right
+            location="right"
             disable-resize-watcher
     >
       <v-list dense>
@@ -19,14 +19,14 @@
           <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>
+              <v-icon :color="item.post_icon_color" class="text--darken-2" size="small" v-if="item.post_icon">{{item.post_icon}}</v-icon>
             </v-list-item-title>
           </v-list-item-content>
         </v-list-item>
       </v-list>
     </v-navigation-drawer>
 
-    <v-app-bar app class="white">
+    <v-app-bar app class="bg-white">
       <v-toolbar-title><router-link :to="{name: 'home'}">
         <v-img
                 :src="require('./assets/logo.svg')"
@@ -39,18 +39,18 @@
       <div class="d-none d-md-block">
         <span class="mx-2" v-for="(item, key) in menu" :key="key">
           <router-link
-                  class="primary--text text--darken-2"
+                  class="text-primary-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>
+          <v-icon :color="item.post_icon_color" class="ml-1 text--darken-1" size="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>
-      <v-btn class="mx-4 mr-0" color="primary" depressed :to="{name: 'login'}" v-if="!user.authenticated">Log In</v-btn>
-      <v-btn class="mx-4 mr-0" color="primary" depressed outlined @click="logout" v-if="user.authenticated">Log Out</v-btn>
+      <v-btn class="mx-4" color="primary" variant="flat" :to="{name: 'signup', query: $route.query}" v-if="!user.authenticated">Create Account</v-btn>
+      <v-btn class="mx-4 mr-0" color="primary" variant="flat" :to="{name: 'login'}" v-if="!user.authenticated">Log In</v-btn>
+      <v-btn class="mx-4 mr-0" color="primary" variant="outlined" @click="logout" v-if="user.authenticated">Log Out</v-btn>
       <v-app-bar-nav-icon class="d-md-none" @click.stop="drawer = !drawer" />
       <template #extension v-if="user.authenticated">
-        <v-tabs background-color="primary darken-1" fixed-tabs>
+        <v-tabs bg-color="primary darken-1" fixed-tabs>
           <v-tab
             v-for="(item, key) in tabmenu"
             :key="key"
@@ -59,22 +59,19 @@
             {{ item.text }}
           </v-tab>
           <v-spacer></v-spacer>
-          <v-menu
-                  bottom
-                  left
-          >
+          <v-menu location="bottom left">
             <template #activator="{ on }">
               <v-btn
-                      text
+                      variant="text"
                       class="align-self-center mr-4"
                       v-on="on"
               >
                 more
-                <v-icon right>mdi-menu-down</v-icon>
+                <v-icon end>mdi-menu-down</v-icon>
               </v-btn>
             </template>
 
-            <v-list class="grey lighten-3">
+            <v-list class="bg-grey-lighten-3">
               <v-list-item
                       v-for="(item, key) in tabmenumore"
                       :key="key"
@@ -102,15 +99,15 @@
         <template #actions>
           <v-btn
             color="primary"
-            depressed
+            variant="flat"
             :href="alert.href"
             v-if="alert.href"
           >
             {{ alert.button || 'More' }}
           </v-btn>
           <v-btn
             color="primary"
-            text
+            variant="text"
             @click="user.unalert(alert.id)"
           >
             Hide
@@ -127,9 +124,9 @@
       <router-view/>
     </v-main>
     <v-footer
-      class="d-flex flex-column align-stretch pa-0 white--text text--darken-1 elevation-12"
+      class="d-flex flex-column align-stretch pa-0 text-white-darken-1 elevation-12"
     >
-      <div class="grey darken-3 d-sm-flex flex-row justify-space-between pa-4">
+      <div class="bg-grey-darken-3 d-sm-flex flex-row justify-space-between pa-4">
         <div class="pa-2">
           <b>deSEC e.V.</b>
         </div>
@@ -141,7 +138,7 @@
           <div class="px-2"><router-link :to="{name: 'impressum'}">Legal Notice (Impressum)</router-link></div>
         </div>
       </div>
-      <div class="grey darken-4 d-md-flex flex-row justify-space-between pa-6">
+      <div class="bg-grey-darken-4 d-md-flex flex-row justify-space-between pa-6">
         <div>
           <p>{{email}}</p>
           <p>
@@ -167,7 +164,7 @@
         </div>
         <div>
           <p>Vorstand</p>
-          <p class="white--text text--darken-2">
+          <p class="text-white-darken-2">
             Nils Wisiol<br/>
             Peter Thomassen<br/>
             Wolfgang Studier<br/>

www/webapp/src/components/ActivateAccountActionHandler.vue

@@ -8,7 +8,7 @@
                     v-model="payload.captcha.solution"
                     label="Type CAPTCHA text here"
                     prepend-icon="mdi-account-check"
-                    outline
+                    variant="outlined"
                     required
                     :disabled="working"
                     :rules="captcha_rules"
@@ -38,18 +38,18 @@
             </audio>
             <br/>
             <v-btn-toggle>
-              <v-btn text outlined @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>mdi-refresh</v-icon></v-btn>
+              <v-btn variant="outlined" @click="getCaptcha(true)" :disabled="captchaWorking"><v-icon>mdi-refresh</v-icon></v-btn>
             </v-btn-toggle>
             &nbsp;
             <v-btn-toggle v-model="captcha_kind">
-              <v-btn text outlined value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-eye</v-icon></v-btn>
-              <v-btn text outlined value="audio" aria-label="Switch to Audio CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-ear-hearing</v-icon></v-btn>
+              <v-btn variant="outlined" value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-eye</v-icon></v-btn>
+              <v-btn variant="outlined" value="audio" aria-label="Switch to Audio CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-ear-hearing</v-icon></v-btn>
             </v-btn-toggle>
           </v-col>
         </v-row>
       </v-container>
         <v-btn
-                depressed
+                variant="flat"
                 color="primary"
                 type="submit"
                 :disabled="working || !valid"

www/webapp/src/components/DonateDirectDebitForm.vue

@@ -17,7 +17,7 @@
         may be the name appearing on your bank statement.
       </p>
       <p>Again, thank you so much.</p>
-      <v-btn depressed outlined block :to="{name: 'home'}">Done</v-btn>
+      <v-btn variant="outlined" block :to="{name: 'home'}">Done</v-btn>
     </v-alert>
     <v-form v-if="!done" @submit.prevent="donate" ref="form">
       <error-alert :errors="errors"></error-alert>
@@ -36,7 +36,7 @@
               v-model="name"
               label="Full Name of the Account Holder"
               prepend-icon="mdi-account"
-              outline
+              variant="outlined"
               required
               :disabled="working"
               :rules="name_rules"
@@ -47,19 +47,19 @@
               v-model="iban"
               label="IBAN"
               prepend-icon="mdi-bank"
-              outline
+              variant="outlined"
               required
               :disabled="working"
               :rules="iban_rules"
               :error-messages="iban_errors"
-              validate-on-blur
+              validate-on="blur"
       />
 
       <v-text-field
               v-model="amount"
               label="Amount in Euros"
               prepend-icon="mdi-cash-100"
-              outline
+              variant="outlined"
               required
               :disabled="working"
               :rules="amount_rules"
@@ -70,24 +70,24 @@
               v-model="message"
               label="Message (optional)"
               prepend-icon="mdi-message-text-outline"
-              outline
+              variant="outlined"
               :disabled="working"
-              validate-on-blur
+              validate-on="blur"
       />
 
       <v-text-field
               v-model="email"
               label="Email Address (optional)"
               prepend-icon="mdi-email"
-              outline
+              variant="outlined"
               :disabled="working"
               :rules="email_rules"
               :error-messages="email_errors"
-              validate-on-blur
+              validate-on="blur"
       />
 
       <v-btn
-              depressed
+              variant="flat"
               block
               color="primary"
               type="submit"

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

@@ -3,10 +3,10 @@
     :label="label"
     :disabled="disabled || readonly"
     :error-messages="errorMessages"
-    :input-value="value"
+    :model-value="value"
     :required="required"
     :rules="[v => !required || !!v || 'Required.']"
-    @change="change"
+    @update:model-value="change"
   />
 </template>
 

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

@@ -3,15 +3,15 @@
     :label="label"
     :disabled="disabled || readonly"
     :error-messages="errorMessages"
-    :value="value"
+    :model-value="value"
     :type="type || ''"
     :placeholder="placeholder || (required ? '' : '(optional)')"
     :hint="hint"
     persistent-hint
     :required="required"
     :rules="[v => !required || !!v || 'Required.'].concat(rules)"
-    @input="changed('input', $event)"
-    @input.native="$emit('dirty', $event)"
+    @update:model-value="changed('input', $event)"
+    @update:model-value.native="$emit('dirty', $event)"
     @keyup="changed('keyup', $event)"
   />
 </template>

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

@@ -3,15 +3,15 @@
     :label="label"
     :disabled="disabled || readonly"
     :error-messages="errorMessages"
-    :value="value"
+    :model-value="value"
     :type="type || ''"
     :placeholder="required ? '' : '(optional)'"
     :hint="hint"
     persistent-hint
     :required="required"
     :rules="[v => !required || !!v || 'Required.'].concat(rules)"
-    @input="changed('input', $event)"
-    @input.native="$emit('dirty', $event)"
+    @update:model-value="changed('input', $event)"
+    @update:model-value.native="$emit('dirty', $event)"
     @keyup="changed('keyup', $event)"
     dense
     rows="8"

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

@@ -5,11 +5,11 @@
     :error-messages="errorMessages"
     hint="You can also enter other types. For a full list, check the documentation."
     :persistent-hint="!readonly"
-    :value="value"
+    :model-value="value"
     :items="types"
     :required="required"
     :rules="[v => !required || !!v || 'Required.']"
-    @input="input($event)"
+    @update:model-value="input($event)"
   />
 </template>
 

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

@@ -19,7 +19,7 @@
         :style="{ width: fieldWidth(index) }"
         :append-icon="index == fields.length-1 && !readonly && !disabled ? appendIcon : ''"
         @click:append="$emit('remove', $event)"
-        @input="inputHandler()"
+        @update:model-value="inputHandler()"
         @paste.prevent="pasteHandler($event)"
         @keydown.8="backspaceHandler(index, $event)"
         @keydown.32="spaceHandler(index, $event)"

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

@@ -21,8 +21,8 @@
             @click="addHandler"
             class="px-0 text-none"
             color="grey"
-            small
-            text
+            size="small"
+            variant="text"
             v-if="!readonly && !disabled"
     ><v-icon>mdi-plus</v-icon> add another value</v-btn>
     <!--div><code style="white-space: normal">{{ value }}</code></div-->

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

@@ -6,7 +6,7 @@
     :input-value="value"
     :required="required"
     :rules="[v => !required || !!v || 'Required.']"
-    @change="change"
+    @update:model-value="change"
   />
 </template>
 

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

@@ -3,15 +3,15 @@
     :label="label"
     :disabled="disabled || readonly"
     :error-messages="errorMessages"
-    :value="value"
+    :model-value="value"
     type="number"
     max="86400"
     :min="min"
     :placeholder="required ? '' : '(optional)'"
     :required="required"
     :rules="rules"
-    @input="changed('input', $event)"
-    @input.native="$emit('dirty', $event)"
+    @update:model-value="changed('input', $event)"
+    @update:model-value.native="$emit('dirty', $event)"
     @keyup="changed('keyup', $event)"
   />
 </template>