From 7cf4193083c89f6fd475acd4dbdceda66178f9bd Mon Sep 17 00:00:00 2001
From: Lukas Lihotzki <lukas@lihotzki.de>
Date: Sun, 12 Mar 2023 00:28:01 +0100
Subject: [PATCH 1/7] refactor(webapp): remove unused dependency

---
 www/webapp/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/www/webapp/package.json b/www/webapp/package.json
index 48a0f5447..7f11f49f5 100644
--- a/www/webapp/package.json
+++ b/www/webapp/package.json
@@ -13,7 +13,6 @@
     "@mdi/font": "^6.9.96",
     "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",

From eaee43f5bba881b8ea92dc7df97b0805ee66868e Mon Sep 17 00:00:00 2001
From: Lukas Lihotzki <lukas@lihotzki.de>
Date: Sun, 12 Mar 2023 00:28:14 +0100
Subject: [PATCH 2/7] chore(webapp): update to vue 3

---
 www/webapp/.eslintrc.js                       |  5 +--
 www/webapp/package.json                       | 13 +++---
 www/webapp/src/App.vue                        | 40 +++++++++----------
 .../ActivateAccountActionHandler.vue          | 10 ++---
 .../src/components/DonateDirectDebitForm.vue  | 20 +++++-----
 www/webapp/src/components/Field/Checkbox.vue  |  4 +-
 .../src/components/Field/GenericText.vue      |  6 +--
 .../src/components/Field/GenericTextarea.vue  |  6 +--
 www/webapp/src/components/Field/RRSetType.vue |  4 +-
 www/webapp/src/components/Field/Record.vue    |  2 +-
 .../src/components/Field/RecordList.vue       |  4 +-
 www/webapp/src/components/Field/Switchbox.vue |  2 +-
 www/webapp/src/components/Field/TTL.vue       |  6 +--
 .../components/ResetPasswordActionHandler.vue |  2 +-
 www/webapp/src/views/About.vue                |  6 +--
 www/webapp/src/views/ChangeEmail.vue          | 10 ++---
 www/webapp/src/views/Confirmation.vue         |  4 +-
 .../src/views/Console/DomainSetupDialog.vue   |  2 +-
 .../src/views/Console/TOTPVerifyDialog.vue    |  4 +-
 www/webapp/src/views/CrudList.vue             | 26 ++++++------
 www/webapp/src/views/DeleteAccount.vue        |  6 +--
 www/webapp/src/views/DomainSetup.vue          | 24 +++++------
 www/webapp/src/views/DomainSetupPage.vue      |  8 ++--
 www/webapp/src/views/Donate.vue               | 14 +++----
 www/webapp/src/views/DynSetup.vue             | 22 +++++-----
 www/webapp/src/views/Home.vue                 | 38 +++++++++---------
 www/webapp/src/views/Login.vue                |  8 ++--
 www/webapp/src/views/MFA.vue                  |  6 +--
 www/webapp/src/views/PrivacyPolicy.vue        |  2 +-
 www/webapp/src/views/ResetPassword.vue        | 14 +++----
 www/webapp/src/views/SignUp.vue               | 16 ++++----
 www/webapp/src/views/Terms.vue                |  6 +--
 www/webapp/src/views/Welcome.vue              |  2 +-
 33 files changed, 171 insertions(+), 171 deletions(-)

diff --git a/www/webapp/.eslintrc.js b/www/webapp/.eslintrc.js
index 171b20c3d..d8a4b758f 100644
--- a/www/webapp/.eslintrc.js
+++ b/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: {
diff --git a/www/webapp/package.json b/www/webapp/package.json
index 7f11f49f5..eb4301285 100644
--- a/www/webapp/package.json
+++ b/www/webapp/package.json
@@ -11,15 +11,17 @@
   "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",
     "pinia": "^2.0.30",
-    "vue": "~2.7.14",
+    "vue": "^3.2.47",
     "vue-clipboard2": "^0.3.3",
-    "vue-router": "~3.6.5",
+    "vue-router": "^4.1.6",
     "vue-timeago": "^5.1.3",
     "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",
@@ -29,10 +31,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"
   }
 }
diff --git a/www/webapp/src/App.vue b/www/webapp/src/App.vue
index 719eeea01..cdf7c53de 100644
--- a/www/webapp/src/App.vue
+++ b/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="flat" 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"
@@ -60,21 +60,21 @@
           </v-tab>
           <v-spacer></v-spacer>
           <v-menu
-                  bottom
-                  left
+                  location="bottom"
+                  location="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,7 +102,7 @@
         <template #actions>
           <v-btn
             color="primary"
-            depressed
+            variant="flat"
             :href="alert.href"
             v-if="alert.href"
           >
@@ -110,7 +110,7 @@
           </v-btn>
           <v-btn
             color="primary"
-            text
+            variant="text"
             @click="user.unalert(alert.id)"
           >
             Hide
@@ -127,9 +127,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 +141,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 +167,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/>
diff --git a/www/webapp/src/components/ActivateAccountActionHandler.vue b/www/webapp/src/components/ActivateAccountActionHandler.vue
index 9a5edd13b..26feb7f67 100644
--- a/www/webapp/src/components/ActivateAccountActionHandler.vue
+++ b/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="text" 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="text" variant="outlined" value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-eye</v-icon></v-btn>
+              <v-btn variant="text" 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"
diff --git a/www/webapp/src/components/DonateDirectDebitForm.vue b/www/webapp/src/components/DonateDirectDebitForm.vue
index cf470d783..355d3c0c0 100644
--- a/www/webapp/src/components/DonateDirectDebitForm.vue
+++ b/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="flat" 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"
diff --git a/www/webapp/src/components/Field/Checkbox.vue b/www/webapp/src/components/Field/Checkbox.vue
index 52af7b181..1ac47fe80 100644
--- a/www/webapp/src/components/Field/Checkbox.vue
+++ b/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>
 
diff --git a/www/webapp/src/components/Field/GenericText.vue b/www/webapp/src/components/Field/GenericText.vue
index 926d7d0c5..5dc9d8b35 100644
--- a/www/webapp/src/components/Field/GenericText.vue
+++ b/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>
diff --git a/www/webapp/src/components/Field/GenericTextarea.vue b/www/webapp/src/components/Field/GenericTextarea.vue
index 56818c060..ca5464f71 100644
--- a/www/webapp/src/components/Field/GenericTextarea.vue
+++ b/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"
diff --git a/www/webapp/src/components/Field/RRSetType.vue b/www/webapp/src/components/Field/RRSetType.vue
index 8c0773ef9..28a8bf3c4 100644
--- a/www/webapp/src/components/Field/RRSetType.vue
+++ b/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>
 
diff --git a/www/webapp/src/components/Field/Record.vue b/www/webapp/src/components/Field/Record.vue
index d496bd14f..6bba58c80 100644
--- a/www/webapp/src/components/Field/Record.vue
+++ b/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)"
diff --git a/www/webapp/src/components/Field/RecordList.vue b/www/webapp/src/components/Field/RecordList.vue
index 8bf2114b7..4c7323ea4 100644
--- a/www/webapp/src/components/Field/RecordList.vue
+++ b/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-->
diff --git a/www/webapp/src/components/Field/Switchbox.vue b/www/webapp/src/components/Field/Switchbox.vue
index bcb8b9bce..746cb94cc 100644
--- a/www/webapp/src/components/Field/Switchbox.vue
+++ b/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>
 
diff --git a/www/webapp/src/components/Field/TTL.vue b/www/webapp/src/components/Field/TTL.vue
index c91d38c31..daa0f0791 100644
--- a/www/webapp/src/components/Field/TTL.vue
+++ b/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>
diff --git a/www/webapp/src/components/ResetPasswordActionHandler.vue b/www/webapp/src/components/ResetPasswordActionHandler.vue
index d0ea9f122..f5ec5e0cf 100644
--- a/www/webapp/src/components/ResetPasswordActionHandler.vue
+++ b/www/webapp/src/components/ResetPasswordActionHandler.vue
@@ -15,7 +15,7 @@
                 tabindex="1"
         ></v-text-field>
         <v-btn
-                depressed
+                variant="flat"
                 color="primary"
                 type="submit"
                 :disabled="working || !valid"
diff --git a/www/webapp/src/views/About.vue b/www/webapp/src/views/About.vue
index 9b608a60c..23a87bf08 100644
--- a/www/webapp/src/views/About.vue
+++ b/www/webapp/src/views/About.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-card outline tile class="pa-md-12 pa-8 elevation-4" style="overflow: hidden">
+    <v-card outline rounded="0" class="pa-md-12 pa-8 elevation-4" style="overflow: hidden">
       <div class="d-md-block logo-bg pt-4">
         <v-img
                   :src="require('../assets/logo.notext.svg')"
@@ -12,7 +12,7 @@
       <v-container class="pa-0">
         <v-row align="center">
           <v-col class="col-md-6 col-12 py-8 triangle-fg">
-            <h1 class="display-1 font-weight-bold">About Us</h1>
+            <h1 class="text-h4 font-weight-bold">About Us</h1>
             <h3 class="subheading mt-2 py-8 font-weight-regular">
               <p>
                 Our services are operated by deSEC e.V., a registered non-profit organization in Berlin, Germany.
@@ -26,7 +26,7 @@
         </v-row>
       </v-container>
     </v-card>
-    <v-container fluid class="grey lighten-4">
+    <v-container fluid class="bg-grey-lighten-4">
       <v-container>
         <v-row class="pt-8">
           <v-col class="text-center">
diff --git a/www/webapp/src/views/ChangeEmail.vue b/www/webapp/src/views/ChangeEmail.vue
index 86f7d98b8..be764d886 100644
--- a/www/webapp/src/views/ChangeEmail.vue
+++ b/www/webapp/src/views/ChangeEmail.vue
@@ -35,10 +35,10 @@
                                     v-model="email"
                                     label="Current Email"
                                     prepend-icon="mdi-blank"
-                                    outline
+                                    variant="outlined"
                                     required
                                     :disabled="true"
-                                    validate-on-blur
+                                    validate-on="blur"
                             />
                             <v-text-field
                                     v-model="password"
@@ -59,19 +59,19 @@
                                     v-model="new_email"
                                     label="New Email"
                                     prepend-icon="mdi-email"
-                                    outline
+                                    variant="outlined"
                                     required
                                     :disabled="working"
                                     :rules="[rules.required, rules.email]"
                                     :error-messages="email_errors"
                                     @change="email_errors=[]"
-                                    validate-on-blur
+                                    validate-on="blur"
                                     tabindex="2"
                             />
                         </v-card-text>
                         <v-card-actions class="justify-center">
                             <v-btn
-                                    depressed
+                                    variant="flat"
                                     color="primary"
                                     type="submit"
                                     :disabled="working"
diff --git a/www/webapp/src/views/Confirmation.vue b/www/webapp/src/views/Confirmation.vue
index 3c5e2540f..8d966989e 100644
--- a/www/webapp/src/views/Confirmation.vue
+++ b/www/webapp/src/views/Confirmation.vue
@@ -34,13 +34,13 @@
                       @clearerrors="clearErrors"
               ></div>
             </v-form>
-            <h2 class="title">Keep deSEC Going</h2>
+            <h2 class="text-h6">Keep deSEC Going</h2>
             <p>
               To offer free DNS hosting for everyone, deSEC relies on donations only.
               If you like our service, please consider donating.
             </p>
             <p>
-              <v-btn block outlined :to="{name: 'donate'}">Donate</v-btn>
+              <v-btn block variant="outlined" :to="{name: 'donate'}">Donate</v-btn>
             </p>
           </v-card-text>
           <v-card-actions>
diff --git a/www/webapp/src/views/Console/DomainSetupDialog.vue b/www/webapp/src/views/Console/DomainSetupDialog.vue
index 3d8d1a257..c3a653050 100644
--- a/www/webapp/src/views/Console/DomainSetupDialog.vue
+++ b/www/webapp/src/views/Console/DomainSetupDialog.vue
@@ -8,7 +8,7 @@
   >
     <v-card>
       <v-card-title>
-        <div class="title">
+        <div class="text-h6">
           Setup Instructions for <b>{{ domain }}</b>
         </div>
         <v-spacer/>
diff --git a/www/webapp/src/views/Console/TOTPVerifyDialog.vue b/www/webapp/src/views/Console/TOTPVerifyDialog.vue
index ef2d68c6a..b5aa2f626 100644
--- a/www/webapp/src/views/Console/TOTPVerifyDialog.vue
+++ b/www/webapp/src/views/Console/TOTPVerifyDialog.vue
@@ -9,7 +9,7 @@
     <v-form @submit.prevent="verify" ref="form">
       <v-card>
         <v-card-title>
-          <div class="title">
+          <div class="text-h6">
             Verify TOTP: <b>{{ name }}</b>
           </div>
           <v-spacer/>
@@ -65,7 +65,7 @@
             <v-row dense align="center" class="justify-center">
               <v-col cols="auto">
                 <v-btn
-                        depressed
+                        variant="flat"
                         color="primary"
                         type="submit"
                         :disabled="working || code.length != 6"
diff --git a/www/webapp/src/views/CrudList.vue b/www/webapp/src/views/CrudList.vue
index df331f5f1..12ddba83f 100644
--- a/www/webapp/src/views/CrudList.vue
+++ b/www/webapp/src/views/CrudList.vue
@@ -57,9 +57,9 @@
                         id="create"
                         color="primary"
                         dark
-                        small
+                        size="small"
                         fab
-                        depressed
+                        variant="flat"
                         :disabled="user.working"
                 >
                   <v-icon>mdi-plus</v-icon>
@@ -84,7 +84,7 @@
                   <v-card>
                     <v-form v-model="valid" @submit.prevent="save()">
                       <v-card-title>
-                        <span class="headline">{{ headlines.create }}</span>
+                        <span class="text-h5">{{ headlines.create }}</span>
                         <v-spacer />
                         <v-icon @click.stop="close">
                           mdi-close
@@ -137,7 +137,7 @@
                               v-if="Object.keys(writeableAdvancedColumns).length > 0"
                           >
                             <v-expansion-panel>
-                              <v-expansion-panel-header class="primary lighten-5">
+                              <v-expansion-panel-header class="bg-primary-lighten-5">
                                 <span>Advanced settings</span>
                               </v-expansion-panel-header>
                               <v-expansion-panel-content>
@@ -166,7 +166,7 @@
                         <v-btn
                                 color="primary"
                                 class="grow"
-                                :outlined="!createDialogSuccess"
+                                :variant="!createDialogSuccess && 'outlined'"
                                 :disabled="createDialogWorking"
                                 @click.native="close"
                         >
@@ -176,7 +176,7 @@
                                 type="submit"
                                 color="primary"
                                 class="grow"
-                                depressed
+                                variant="flat"
                                 :disabled="createInhibited || !valid || createDialogWorking || createDialogSuccess"
                                 :loading="createDialogWorking"
                                 v-if="!createDialogSuccess"
@@ -215,7 +215,7 @@
                 <div :key="key" v-for="[key, action] in getActions(actions)">
                   <v-tooltip
                       :disabled="!action.tooltip"
-                      top
+                      location="top"
                       transition="fade-transition"
                   >
                     <template #activator="{ on, attrs }">
@@ -237,8 +237,8 @@
             </template>
             <template #no-data>
               <div v-if="!pagination_required">
-                <div class="py-4 text-xs-center">
-                  <h2 class="title">Feels so empty here!</h2>
+                <div class="py-4 text-center">
+                  <h2 class="text-h6">Feels so empty here!</h2>
                   <p>No entries yet.</p>
                 </div>
               </div>
@@ -251,7 +251,7 @@
                   type="warning"
               >
                 <div class="py-4">
-                  <h2 class="title">Too much data!</h2>
+                  <h2 class="text-h6">Too much data!</h2>
                   <p>
                     Wow! There are more than 500 entries here.<br>
                     Unfortunately, the web interface can't handle this.
@@ -275,7 +275,7 @@
             <v-card>
               <v-form @submit.prevent="destroy(destroyDialogItem)">
                 <v-card-title>
-                  <span class="headline">{{ headlines.destroy }}</span>
+                  <span class="text-h5">{{ headlines.destroy }}</span>
                 </v-card-title>
 
                 <v-divider />
@@ -308,7 +308,7 @@
                   <v-btn
                     color="primary"
                     class="grow"
-                    outlined
+                    variant="outlined"
                     :disabled="destroyDialogWorking"
                     @click.native="destroyClose"
                   >
@@ -317,7 +317,7 @@
                   <v-btn
                     color="primary"
                     class="grow"
-                    depressed
+                    variant="flat"
                     type="submit"
                     :loading="destroyDialogWorking"
                   >
diff --git a/www/webapp/src/views/DeleteAccount.vue b/www/webapp/src/views/DeleteAccount.vue
index 10dde899c..1b6da7ca9 100644
--- a/www/webapp/src/views/DeleteAccount.vue
+++ b/www/webapp/src/views/DeleteAccount.vue
@@ -33,10 +33,10 @@
                                     v-model="email"
                                     label="Current Email"
                                     prepend-icon="mdi-blank"
-                                    outline
+                                    variant="outlined"
                                     required
                                     :disabled="true"
-                                    validate-on-blur
+                                    validate-on="blur"
                             />
                             <v-text-field
                                     v-model="password"
@@ -56,7 +56,7 @@
                         </v-card-text>
                         <v-card-actions class="justify-center">
                             <v-btn
-                                    depressed
+                                    variant="flat"
                                     color="primary"
                                     type="submit"
                                     :disabled="working"
diff --git a/www/webapp/src/views/DomainSetup.vue b/www/webapp/src/views/DomainSetup.vue
index b61bdd23f..7fcf6c94e 100644
--- a/www/webapp/src/views/DomainSetup.vue
+++ b/www/webapp/src/views/DomainSetup.vue
@@ -6,7 +6,7 @@
     </p>
 
     <div v-if="!user.authenticated">
-      <div class="subtitle-1">
+      <div class="text-subtitle-1">
         <v-icon>mdi-numeric-0-circle</v-icon>
         DNS Configuration
       </div>
@@ -14,12 +14,12 @@
         To ensure a smooth transition when moving your domain to deSEC, setup a password for your deSEC account,
         log in and configure the DNS for <span class="fixed-width">{{ domain }}</span>, before you proceed below.
       </p>
-      <v-btn outlined block :to="{name: 'reset-password'}" target="_blank">
+      <v-btn variant="outlined" block :to="{name: 'reset-password'}" target="_blank">
         Assign Account Password
       </v-btn>
     </div>
 
-    <div class="mt-2 subtitle-1">
+    <div class="mt-2 text-subtitle-1">
       <v-icon>mdi-numeric-1-circle</v-icon>
       Delegate your domain
     </div>
@@ -29,7 +29,7 @@
       <strong>{{ domain }}</strong> (usually your provider or technical administrator):
     </p>
     <v-card>
-      <v-tabs v-model="tab1" background-color="transparent" grow>
+      <v-tabs v-model="tab1" bg-color="transparent" grow>
         <v-tab href="#ns">Nameservers</v-tab>
       </v-tabs>
 
@@ -42,8 +42,8 @@
                   v-clipboard:copy="ns.join('\n')"
                   v-clipboard:success="copySuccess"
                   v-clipboard:error="copyError"
-                  outlined
-                  text
+                  variant="outlined"
+                  variant="text"
               >
                 <v-icon>mdi-content-copy</v-icon>
                 copy to clipboard
@@ -62,7 +62,7 @@
       Once your provider processes this information, the Internet will start directing DNS queries to deSEC.
     </p>
 
-    <div class="subtitle-1">
+    <div class="text-subtitle-1">
       <v-icon>mdi-numeric-2-circle</v-icon>
       Enable DNSSEC
     </div>
@@ -75,7 +75,7 @@
     <v-card>
       <v-tabs
           v-model="tab2"
-          background-color="transparent"
+          bg-color="transparent"
           grow
       >
         <v-tab v-for="t in tabs" :key="t.key" :href="'#' + t.key">{{ t.title }}</v-tab>
@@ -91,8 +91,8 @@
                   v-clipboard:copy="t.data"
                   v-clipboard:success="copySuccess"
                   v-clipboard:error="copyError"
-                  outlined
-                  text
+                  variant="outlined"
+                  variant="text"
               >
                 <v-icon>mdi-content-copy</v-icon>
                 copy to clipboard
@@ -110,7 +110,7 @@
       </v-tabs-items>
     </v-card>
 
-    <div class="subtitle-1">
+    <div class="text-subtitle-1">
       <v-icon>mdi-numeric-3-circle</v-icon>
       Check Setup
     </div>
@@ -125,7 +125,7 @@
       <template #action="{ attrs }">
         <v-btn
             color="pink"
-            text
+            variant="text"
             v-bind="attrs"
             @click="snackbar = false"
         >
diff --git a/www/webapp/src/views/DomainSetupPage.vue b/www/webapp/src/views/DomainSetupPage.vue
index 797faecb0..486b4746b 100644
--- a/www/webapp/src/views/DomainSetupPage.vue
+++ b/www/webapp/src/views/DomainSetupPage.vue
@@ -21,26 +21,26 @@
     <v-row align="center" justify="center">
       <v-col cols="12" sm="8" md="4">
         <v-card>
-          <v-card-title><div class="title">Find Help</div></v-card-title>
+          <v-card-title><div class="text-h6">Find Help</div></v-card-title>
           <v-card-text>
             In our forum <router-link :to="{name: 'talk'}">talk.desec.io</router-link>, members of the community
             discuss ideas and applications of deSEC. If you have a question, chances are that you may be able to find
             the answer there.
           </v-card-text>
           <v-card-actions>
-            <v-btn block outlined :to="{name: 'talk'}">Find Help</v-btn>
+            <v-btn block variant="outlined" :to="{name: 'talk'}">Find Help</v-btn>
           </v-card-actions>
         </v-card>
       </v-col>
       <v-col cols="12" sm="8" md="4">
         <v-card>
-          <v-card-title><div class="title">Keep deSEC Going</div></v-card-title>
+          <v-card-title><div class="text-h6">Keep deSEC Going</div></v-card-title>
           <v-card-text>
             To offer free DNS hosting for everyone, deSEC relies on donations only.
             If you like our service, please consider donating.
           </v-card-text>
           <v-card-actions>
-            <v-btn block outlined :to="{name: 'donate'}">Donate</v-btn>
+            <v-btn block variant="outlined" :to="{name: 'donate'}">Donate</v-btn>
           </v-card-actions>
         </v-card>
       </v-col>
diff --git a/www/webapp/src/views/Donate.vue b/www/webapp/src/views/Donate.vue
index b983fdd91..e00ef4871 100644
--- a/www/webapp/src/views/Donate.vue
+++ b/www/webapp/src/views/Donate.vue
@@ -16,7 +16,7 @@
           <v-card-text>
             <v-expansion-panels class="mb-4" focusable>
               <v-expansion-panel>
-                <v-expansion-panel-header class="subtitle-1">
+                <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
                     <v-icon class="mr-2">mdi-bank-transfer-in</v-icon> Direct Debit – Let us Take your Money (Europe)
                   </v-layout>
@@ -30,7 +30,7 @@
                 </v-expansion-panel-content>
               </v-expansion-panel>
               <v-expansion-panel>
-                <v-expansion-panel-header class="subtitle-1">
+                <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
                     <v-icon class="mr-2">mdi-bank-transfer-out</v-icon> Bank Transfer – Send us Money (Europe)
                   </v-layout>
@@ -58,7 +58,7 @@
                 </v-expansion-panel-content>
               </v-expansion-panel>
               <v-expansion-panel>
-                <v-expansion-panel-header class="subtitle-1">
+                <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
                     <v-icon class="mr-2">mdi-credit-card-outline</v-icon> Credit Card
                   </v-layout>
@@ -76,7 +76,7 @@
                 </v-expansion-panel-content>
               </v-expansion-panel>
               <v-expansion-panel>
-                <v-expansion-panel-header class="subtitle-1">
+                <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
                     <v-icon class="mr-2">mdi-github</v-icon> GitHub Sponsors
                   </v-layout>
@@ -89,7 +89,7 @@
                 </v-expansion-panel-content>
               </v-expansion-panel>
               <v-expansion-panel>
-                <v-expansion-panel-header class="subtitle-1">
+                <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
                     <v-icon class="mr-2">mdi-gift-outline</v-icon> PayPal
                   </v-layout>
@@ -107,7 +107,7 @@
                 </v-expansion-panel-content>
               </v-expansion-panel>
               <v-expansion-panel>
-                <v-expansion-panel-header class="subtitle-1">
+                <v-expansion-panel-header class="text-subtitle-1">
                   <v-layout>
                     <v-icon class="mr-2">mdi-heart-multiple-outline</v-icon> Double-up with Your Employer
                   </v-layout>
@@ -129,7 +129,7 @@
               <strong>Based in Europe?</strong> You almost certainly can donate via direct debit or bank transfer (you
               only need your IBAN). <strong>No fees</strong> will be subtracted, so you can do more good!
             </p>
-            <div class="title">Donation Receipts</div>
+            <div class="text-h6">Donation Receipts</div>
             <p>
               deSEC e.V. is registered as a charitable organization in Germany. If you pay taxes here, your donation is
               tax-deductible, and we're happy to provide you with a donation receipt for that purpose. Note that for
diff --git a/www/webapp/src/views/DynSetup.vue b/www/webapp/src/views/DynSetup.vue
index f11a547ed..2bb4b2d4d 100644
--- a/www/webapp/src/views/DynSetup.vue
+++ b/www/webapp/src/views/DynSetup.vue
@@ -25,7 +25,7 @@
             <p>
               Congratulations, you are now the owner of <span class="fixed-width">{{ $route.params.domain }}</span>!
             </p>
-            <h2 class="title">Set Up Your Domain</h2>
+            <h2 class="text-h6">Set Up Your Domain</h2>
             <p>
               All operations on your domain require the following authorization token secret shown below:
             </p>
@@ -42,7 +42,7 @@
             </p>
             <v-expansion-panels class="mb-4" focusable>
               <v-expansion-panel>
-                <v-expansion-panel-header class="subtitle-1">Configure Your Router</v-expansion-panel-header>
+                <v-expansion-panel-header class="text-subtitle-1">Configure Your Router</v-expansion-panel-header>
                 <v-expansion-panel-content>
                   <p>
                     To continuously update your domain to point to your home router, configure your
@@ -75,7 +75,7 @@
                 </v-expansion-panel-content>
               </v-expansion-panel>
               <v-expansion-panel>
-                <v-expansion-panel-header class="subtitle-1">One-Off Manual Update</v-expansion-panel-header>
+                <v-expansion-panel-header class="text-subtitle-1">One-Off Manual Update</v-expansion-panel-header>
                 <v-expansion-panel-content>
                   <p>
                     Your domain can be configured to your current public IP address as seen by our servers.
@@ -87,7 +87,7 @@
                 </v-expansion-panel-content>
               </v-expansion-panel>
               <v-expansion-panel>
-                <v-expansion-panel-header class="subtitle-1">Alternative IP Update Approaches</v-expansion-panel-header>
+                <v-expansion-panel-header class="text-subtitle-1">Alternative IP Update Approaches</v-expansion-panel-header>
                 <v-expansion-panel-content>
                   <p>
                     For alternative approaches to updating your IP address and for a
@@ -102,7 +102,7 @@
               that someone had the same question before.
             </p>
 
-            <h2 class="title">Check Domain Status</h2>
+            <h2 class="text-h6">Check Domain Status</h2>
             <v-alert type="info" v-if="ips !== undefined && ips.length === 0">
               <p>
                 Currently, no IPv4 or IPv6 address is associated with
@@ -110,7 +110,7 @@
                 Please verify that your client is using the credentials provided by deSEC and then come back to check
                 again.
               </p>
-              <v-btn depressed outlined block @click="check" :loading="working">Check Again</v-btn>
+              <v-btn variant="flat" variant="outlined" block @click="check" :loading="working">Check Again</v-btn>
             </v-alert>
             <v-alert type="success" v-if="ips !== undefined && ips.length > 0">
               <p>
@@ -129,7 +129,7 @@
                 Enjoy!
               </p>
               <p>
-                <v-btn depressed outlined block @click="check" :loading="working">Update</v-btn>
+                <v-btn variant="flat" variant="outlined" block @click="check" :loading="working">Update</v-btn>
               </p>
               <p>
                 Please note that deSEC only assigns your IP address to your domain name.
@@ -138,24 +138,24 @@
             </v-alert>
 
             <div v-if="!user.authenticated">
-              <h2 class="title">Optional: Assign deSEC Account Password</h2>
+              <h2 class="text-h6">Optional: Assign deSEC Account Password</h2>
               <p>
                 To use more features of deSEC, assign a password to your account. This is not required for using deSEC
                 for dynamic DNS only, but enables to you add more domains and other DNS information.
                 You can also assign a password later at any time.
               </p>
-              <v-btn outlined block :to="{name: 'reset-password'}">
+              <v-btn variant="outlined" block :to="{name: 'reset-password'}">
                 Assign Account Password
               </v-btn>
             </div>
 
-            <h2 class="title mt-4">Keep deSEC Going</h2>
+            <h2 class="text-h6 mt-4">Keep deSEC Going</h2>
             <p>
               To offer free DNS hosting for everyone, deSEC relies on donations only.
               If you like our service, please consider donating.
             </p>
             <p>
-              <v-btn block outlined :to="{name: 'donate'}">Donate</v-btn>
+              <v-btn block variant="outlined" :to="{name: 'donate'}">Donate</v-btn>
             </p>
           </v-card-text>
           <v-card-actions>
diff --git a/www/webapp/src/views/Home.vue b/www/webapp/src/views/Home.vue
index b89ede082..7db8d9da9 100644
--- a/www/webapp/src/views/Home.vue
+++ b/www/webapp/src/views/Home.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-  <v-card outline tile class="pa-md-12 pa-8 elevation-4" style="overflow: hidden">
+  <v-card outline rounded="0" class="pa-md-12 pa-8 elevation-4" style="overflow: hidden">
     <div class="d-none d-md-block triangle-bg"></div>
     <v-container class="pa-0">
       <v-row align="center">
         <v-col class="col-md-6 col-12 py-8 triangle-fg">
-          <h1 class="display-1 font-weight-bold">Modern DNS Hosting for Everyone</h1>
+          <h1 class="text-h4 font-weight-bold">Modern DNS Hosting for Everyone</h1>
           <h3 class="subheading mt-2 pt-8 font-weight-regular">
             <p>
               deSEC is a <strong>free DNS hosting</strong> service, <strong>designed with security in mind</strong>.
@@ -16,7 +16,7 @@
             </p>
           </h3>
           <div class="pa-2">
-            <v-form @submit.prevent="signup" :value="valid" ref="form">
+            <v-form @submit.prevent="signup" :model-value="valid" ref="form">
               <v-row>
                 <v-col md="9" cols="12">
                   <div class="d-flex align-center flex-column">
@@ -25,28 +25,28 @@
                             class="pb-2"
                             hide-details
                             row
-                            @change="$router.push({query: {domainType: domainType}})"
+                            @update:model-value="$router.push({query: {domainType: domainType}})"
                     >
                       <v-radio class="pb-2" label="Managed DNS account" value="custom"></v-radio>
                       <v-radio class="pb-2" label="dynDNS account" value="dynDNS"></v-radio>
                     </v-radio-group>
                   </div>
                   <v-text-field
-                    outlined
-                    solo
+                    variant="outlined"
+                    variant="solo"
                     flat
                     v-model="email"
                     prepend-inner-icon="mdi-email"
                     type="email"
                     placeholder="Account Email Address"
                     :rules="email_rules"
-                    validate-on-blur
+                    validate-on="blur"
                     ></v-text-field>
                   <v-btn
                     color="primary"
                     type="submit"
-                    depressed
-                    x-large
+                    variant="flat"
+                    size="x-large"
                     block
                   >
                     Create Account
@@ -63,14 +63,14 @@
     <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 size="x-large">{{f.icon}}</v-icon>
+          <h1 class="text-grey-darken-2"><span>{{f.title}}</span></h1>
           <p v-html="f.text"></p>
         </v-col>
       </v-row>
     </v-container>
   </v-container>
-  <v-container fluid class="grey lighten-4">
+  <v-container fluid class="bg-grey-lighten-4">
     <v-container class="py-8">
       <v-row align="center">
         <v-col class="text-center">
@@ -84,7 +84,7 @@
           </v-layout>
         </v-col>
         <v-col class="col-12 col-sm-10 col-lg-9 py-4 text-center">
-          <a class="primary--text text--darken-2" href="https://securesystems.de/">SSE</a> supports us with staff for
+          <a class="text-primary-darken-2" href="https://securesystems.de/">SSE</a> supports us with staff for
           software development and our standardization activities within the IETF and ICANN.
           We trust them because creating and auditing security solutions is their daily business.
         </v-col>
@@ -96,7 +96,7 @@
           </v-layout>
         </v-col>
         <v-col class="col-12 col-sm-10 col-lg-9 py-4 text-center">
-          Through their Community Projects Fund, <a class="primary--text text--darken-2" href="https://ripe.net/">RIPE NCC</a>
+          Through their Community Projects Fund, <a class="text-primary-darken-2" href="https://ripe.net/">RIPE NCC</a>
           supports the ongoing operation of our DNS platform and covers global Anycast network expenses in
           particular. We greatly appreciate their support.
         </v-col>
@@ -118,21 +118,21 @@
       </v-row>
     </v-container>
   </v-container>
-  <v-container fluid class="grey lighten-4">
+  <v-container fluid class="bg-grey-lighten-4">
     <v-container>
       <v-row align="center" justify="center">
         <v-card
           class="mx-auto col-12"
-          color="grey lighten-5"
+          color="grey-lighten-5"
         >
           <v-card-text
                   class="pt-6"
                   style="position: relative;"
           >
-            <h3 class="display-1 mb-2 text--darken-2 grey--text text-center">
+            <h3 class="text-h4 mb-2 text-grey-darken-2 text-center">
               deSEC Global Anycast Networks
             </h3>
-            <div class="font-weight-light title mb-2">
+            <div class="font-weight-light text-h6 mb-2">
               Global distribution of our frontend servers ensures quick answers to queries, regardless of the user's
               location on the globe. You can
               <a :href="'mailto:' + contact_email + '?subject=' + encodeURIComponent(contact_subject) +
@@ -146,7 +146,7 @@
             class="justify-center"
             style="display: block; width: 100%; aspect-ratio: 2/1"
           >
-            <v-tooltip bottom v-for="f in frontends" :key="f.host">
+            <v-tooltip location="bottom" v-for="f in frontends" :key="f.host">
               <template #activator="{ on }">
                 <v-img
                   v-on="on"
diff --git a/www/webapp/src/views/Login.vue b/www/webapp/src/views/Login.vue
index 0afc00455..3108cfe94 100644
--- a/www/webapp/src/views/Login.vue
+++ b/www/webapp/src/views/Login.vue
@@ -29,7 +29,7 @@
               <v-text-field
                 v-model="email"
                 label="Email"
-                outline
+                variant="outlined"
                 required
                 :disabled="working"
                 :rules="email_rules"
@@ -42,7 +42,7 @@
                 label="Password"
                 :append-icon="hide_password ? 'mdi-eye' : 'mdi-eye-off'"
                 :type="hide_password ? 'password' : 'text'"
-                outline
+                variant="outlined"
                 required
                 :disabled="working"
                 :rules="password_rules"
@@ -62,7 +62,7 @@
               <v-btn
                 type="submit"
                 color="primary"
-                depressed
+                variant="flat"
                 :disabled="!valid || working"
                 :loading="working"
                 tabindex="4"
@@ -71,7 +71,7 @@
               </v-btn>
               <v-btn
                 id="forgotPassword"
-                text
+                variant="text"
                 color="primary"
                 :to="{name: 'reset-password', params: email ? {email: email} : {}}"
                 tabindex="5"
diff --git a/www/webapp/src/views/MFA.vue b/www/webapp/src/views/MFA.vue
index 79fad022b..e2b0d5d5b 100644
--- a/www/webapp/src/views/MFA.vue
+++ b/www/webapp/src/views/MFA.vue
@@ -8,7 +8,7 @@
     <v-form @submit.prevent="verify" ref="form">
       <v-card>
         <v-card-title>
-          <div class="title">
+          <div class="text-h6">
             2FA Required
           </div>
           <v-spacer/>
@@ -28,7 +28,7 @@
                 <v-col cols="12" sm="6">
                   <v-select
                     :items="factors"
-                    item-text="name"
+                    item-title="name"
                     item-value="id"
                     v-model="id"
                     label="Token"
@@ -59,7 +59,7 @@
               <v-row dense align="center" class="justify-center">
                 <v-col cols="auto">
                   <v-btn
-                          depressed
+                          variant="flat"
                           color="primary"
                           type="submit"
                           :disabled="working || code.length != 6"
diff --git a/www/webapp/src/views/PrivacyPolicy.vue b/www/webapp/src/views/PrivacyPolicy.vue
index aca1f31f7..dc9d669bb 100644
--- a/www/webapp/src/views/PrivacyPolicy.vue
+++ b/www/webapp/src/views/PrivacyPolicy.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-container fluid class="grey lighten-4">
+    <v-container fluid class="bg-grey-lighten-4">
       <v-container>
         <v-row class="pt-8">
           <v-col class="text-center">
diff --git a/www/webapp/src/views/ResetPassword.vue b/www/webapp/src/views/ResetPassword.vue
index 5b65807a3..e83542e7d 100644
--- a/www/webapp/src/views/ResetPassword.vue
+++ b/www/webapp/src/views/ResetPassword.vue
@@ -39,13 +39,13 @@
                                     v-model="email"
                                     label="Email"
                                     prepend-icon="mdi-email"
-                                    outline
+                                    variant="outlined"
                                     required
                                     :disabled="working"
                                     :rules="email_rules"
                                     :error-messages="email_errors"
                                     @change="email_errors=[]"
-                                    validate-on-blur
+                                    validate-on="blur"
                                     ref="emailField"
                                     tabindex="1"
                             />
@@ -57,7 +57,7 @@
                                             v-model="captchaSolution"
                                             label="Type CAPTCHA text here"
                                             prepend-icon="mdi-account-check"
-                                            outline
+                                            variant="outlined"
                                             required
                                             :disabled="working"
                                             :rules="captcha_rules"
@@ -87,12 +87,12 @@
                                     </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="text" 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="text" variant="outlined" value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-eye</v-icon></v-btn>
+                                      <v-btn variant="text" 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>
@@ -100,7 +100,7 @@
                         </v-card-text>
                         <v-card-actions class="justify-center">
                             <v-btn
-                                    depressed
+                                    variant="flat"
                                     color="primary"
                                     type="submit"
                                     :disabled="working"
diff --git a/www/webapp/src/views/SignUp.vue b/www/webapp/src/views/SignUp.vue
index 11814987f..716698dd3 100644
--- a/www/webapp/src/views/SignUp.vue
+++ b/www/webapp/src/views/SignUp.vue
@@ -29,13 +29,13 @@
                       v-model="email"
                       label="Email"
                       prepend-icon="mdi-email"
-                      outline
+                      variant="outlined"
                       required
                       :disabled="working"
                       :rules="email_rules"
                       :error-messages="email_errors"
                       @change="email_errors=[]"
-                      validate-on-blur
+                      validate-on="blur"
                       ref="emailField"
                       tabindex="1"
               />
@@ -56,7 +56,7 @@
                       v-model="domain"
                       :label="domainType === 'dynDNS' ? 'DynDNS domain' : 'Domain name'"
                       prepend-icon="mdi-blank"
-                      outline
+                      variant="outlined"
                       required
                       :disabled="working || domainType === 'none' || domainType === undefined"
                       :rules="domainType === 'dynDNS' ? dyn_domain_rules : (domainType === 'custom' ? domain_rules : [])"
@@ -80,7 +80,7 @@
                         v-model="captchaSolution"
                         label="Type CAPTCHA text here"
                         prepend-icon="mdi-account-check"
-                        outline
+                        variant="outlined"
                         required
                         :disabled="working"
                         :rules="captcha_rules"
@@ -110,12 +110,12 @@
                     </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="text" 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="text" variant="outlined" value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-eye</v-icon></v-btn>
+                      <v-btn variant="text" 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>
@@ -157,7 +157,7 @@
             </v-card-text>
             <v-card-actions class="justify-center">
               <v-btn
-                      depressed
+                      variant="flat"
                       class="px-4"
                       color="primary"
                       type="submit"
diff --git a/www/webapp/src/views/Terms.vue b/www/webapp/src/views/Terms.vue
index 946e4afee..1e30e4e0e 100644
--- a/www/webapp/src/views/Terms.vue
+++ b/www/webapp/src/views/Terms.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
-  <v-card outline tile class="pa-md-12 pa-8 elevation-4" style="overflow: hidden">
+  <v-card outline rounded="0" class="pa-md-12 pa-8 elevation-4" style="overflow: hidden">
     <div class="d-none d-md-block triangle-bg">§§</div>
     <v-container class="pa-0">
       <v-row align="center">
         <v-col class="col-md-6 col-12 py-8 triangle-fg">
-          <h1 class="display-1 font-weight-bold">Terms of Use</h1>
+          <h1 class="text-h4 font-weight-bold">Terms of Use</h1>
           <h3 class="subheading mt-2 py-8 font-weight-regular">
             <p>
               We collect as little data as possible and restrict the usage of our DNS service only where necessary to
@@ -21,7 +21,7 @@
       </v-row>
     </v-container>
   </v-card>
-  <v-container fluid class="grey lighten-4">
+  <v-container fluid class="bg-grey-lighten-4">
     <v-container>
       <v-row class="pt-8">
         <v-col class="text-center">
diff --git a/www/webapp/src/views/Welcome.vue b/www/webapp/src/views/Welcome.vue
index af4083ff7..619b588b1 100644
--- a/www/webapp/src/views/Welcome.vue
+++ b/www/webapp/src/views/Welcome.vue
@@ -31,7 +31,7 @@
           </v-card-text>
           <v-card-actions>
             <v-spacer/>
-            <v-btn outlined text depressed :to="{name: 'home'}">Home</v-btn>
+            <v-btn variant="outlined" variant="text" variant="flat" :to="{name: 'home'}">Home</v-btn>
           </v-card-actions>
         </v-card>
         </v-form>

From 60ccebaed289410cb1fc04932ab8459720741e3a Mon Sep 17 00:00:00 2001
From: Lukas Lihotzki <lukas@lihotzki.de>
Date: Sun, 12 Mar 2023 00:28:23 +0100
Subject: [PATCH 3/7] chore(webapp): manual vue 3 fixups

---
 www/webapp/.eslintignore       |  1 +
 www/webapp/src/App.vue         |  5 +---
 www/webapp/src/main.js         | 44 ++++++++++++++++------------------
 www/webapp/src/router/index.js | 11 +++++----
 4 files changed, 29 insertions(+), 32 deletions(-)
 create mode 100644 www/webapp/.eslintignore

diff --git a/www/webapp/.eslintignore b/www/webapp/.eslintignore
new file mode 100644
index 000000000..1d085cacc
--- /dev/null
+++ b/www/webapp/.eslintignore
@@ -0,0 +1 @@
+**
diff --git a/www/webapp/src/App.vue b/www/webapp/src/App.vue
index cdf7c53de..2564b3cb6 100644
--- a/www/webapp/src/App.vue
+++ b/www/webapp/src/App.vue
@@ -59,10 +59,7 @@
             {{ item.text }}
           </v-tab>
           <v-spacer></v-spacer>
-          <v-menu
-                  location="bottom"
-                  location="left"
-          >
+          <v-menu location="bottom left">
             <template #activator="{ on }">
               <v-btn
                       variant="text"
diff --git a/www/webapp/src/main.js b/www/webapp/src/main.js
index 431fba889..2e7fc49ed 100644
--- a/www/webapp/src/main.js
+++ b/www/webapp/src/main.js
@@ -1,34 +1,32 @@
-import Vue from 'vue'
+import { createApp } 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'
+
+// Vuetify
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+
 import "@fontsource/roboto/300.css" /* light */
 import "@fontsource/roboto/400.css" /* regular */
 import "@fontsource/roboto/400-italic.css" /* regular-italic */
 import "@fontsource/roboto/500.css" /* medium */
 import "@fontsource/roboto/700.css" /* bold */
 import '@mdi/font/css/materialdesignicons.css'
-import VueTimeago from 'vue-timeago'
-import {createPinia, PiniaVuePlugin} from "pinia";
 
+import { createPinia } from "pinia"
+
+import router from '@/router'
+
+const vuetify = createVuetify({
+  components,
+  directives,
+})
 
-Vue.config.productionTip = false
-VueClipboard.config.autoSetContainer = true
-Vue.use(VueClipboard)
-Vue.use(Vuelidate)
-Vue.use(VueTimeago, {})
-// `Pinia` replaces `vuex` as store.
-Vue.use(PiniaVuePlugin)
 const pinia = createPinia()
-// Must be after `pinia` initialisation to be accessible.
-Vue.use(VueRouter)
 
-new Vue({
-  router,
-  pinia,
-  vuetify,
-  render: h => h(App)
-}).$mount('#app')
+createApp(App)
+.use(vuetify)
+.use(pinia)
+.use(router)
+.mount('#app')
diff --git a/www/webapp/src/router/index.js b/www/webapp/src/router/index.js
index 316c25458..02e360143 100644
--- a/www/webapp/src/router/index.js
+++ b/www/webapp/src/router/index.js
@@ -1,4 +1,4 @@
-import VueRouter from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 import Home from '@/views/Home.vue'
 import {HTTP} from '@/utils';
 import {useUserStore} from "@/store/user";
@@ -35,12 +35,12 @@ const routes = [
     component: () => import(/* webpackChunkName: "signup" */ '@/views/Welcome.vue')
   },
   {
-    path: 'https://desec.readthedocs.io/',
+    path: '/desec.readthedocs.io/', // TODO
     name: 'docs',
     beforeEnter(to) { location.href = to.path },
   },
   {
-    path: 'https://talk.desec.io/',
+    path: '/talk.desec.io/', // TODO
     name: 'talk',
     beforeEnter(to) { location.href = to.path },
   },
@@ -90,7 +90,7 @@ const routes = [
     component: () => import(/* webpackChunkName: "extra" */ '@/views/Donate.vue')
   },
   {
-    path: 'https://github.com/desec-io/desec-stack/projects?query=is%3Aopen+sort%3Aname-asc&type=classic',
+    path: '/github.com/desec-io/desec-stack/projects?query=is%3Aopen+sort%3Aname-asc&type=classic',
     name: 'roadmap',
     beforeEnter(to) { location.href = to.path },
   },
@@ -139,8 +139,9 @@ const routes = [
   },
 ]
 
-const router = new VueRouter({
+const router = createRouter({
   mode: 'history',
+  history: createWebHistory(),
   base: process.env.BASE_URL,
   scrollBehavior (to, from) {
     // Skip if destination full path has query parameters and differs in no other way from previous

From a950f2b0f3253f3099c1e4734f4523cc697886e1 Mon Sep 17 00:00:00 2001
From: Lukas Lihotzki <lukas@lihotzki.de>
Date: Sun, 12 Mar 2023 00:28:28 +0100
Subject: [PATCH 4/7] refactor(webapp): remove unneeded `<span @click.stop>`

---
 www/webapp/src/views/SignUp.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/www/webapp/src/views/SignUp.vue b/www/webapp/src/views/SignUp.vue
index 716698dd3..7be8f4694 100644
--- a/www/webapp/src/views/SignUp.vue
+++ b/www/webapp/src/views/SignUp.vue
@@ -148,8 +148,8 @@
                 >
                   <template #label>
                     <v-flex>
-                      Yes, I agree to the <span @click.stop><router-link :to="{name: 'terms'}" target="_blank">Terms of Use</router-link></span> and
-                      <span @click.stop><router-link :to="{name: 'privacy-policy'}" target="_blank">Privacy Policy</router-link></span>.
+                      Yes, I agree to the <router-link :to="{name: 'terms'}" target="_blank">Terms of Use</router-link> and
+                      <router-link :to="{name: 'privacy-policy'}" target="_blank">Privacy Policy</router-link>.
                     </v-flex>
                   </template>
                 </v-checkbox>

From 99cff9218054bf7d3bffb62c1efbc0cd8ec3c481 Mon Sep 17 00:00:00 2001
From: Lukas Lihotzki <lukas@lihotzki.de>
Date: Sun, 12 Mar 2023 00:28:34 +0100
Subject: [PATCH 5/7] refactor(webapp): replace vue-clipboard2

---
 www/webapp/package.json              |  1 -
 www/webapp/src/views/DomainSetup.vue | 28 +++++++++-------------------
 2 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/www/webapp/package.json b/www/webapp/package.json
index eb4301285..8b9bff942 100644
--- a/www/webapp/package.json
+++ b/www/webapp/package.json
@@ -16,7 +16,6 @@
     "core-js": "^3.27.1",
     "pinia": "^2.0.30",
     "vue": "^3.2.47",
-    "vue-clipboard2": "^0.3.3",
     "vue-router": "^4.1.6",
     "vue-timeago": "^5.1.3",
     "vuelidate": "^0.7.7",
diff --git a/www/webapp/src/views/DomainSetup.vue b/www/webapp/src/views/DomainSetup.vue
index 7fcf6c94e..3e0e6554a 100644
--- a/www/webapp/src/views/DomainSetup.vue
+++ b/www/webapp/src/views/DomainSetup.vue
@@ -38,13 +38,7 @@
           <v-card flat v-if="ns.join('\n')">
             <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"
-                  variant="outlined"
-                  variant="text"
-              >
+              <v-btn @click="copy(ns.join('\n'))" variant="outlined" variant="text">
                 <v-icon>mdi-content-copy</v-icon>
                 copy to clipboard
               </v-btn>
@@ -87,13 +81,7 @@
             <v-card-text>{{ t.banner }}</v-card-text>
             <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"
-                  variant="outlined"
-                  variant="text"
-              >
+              <v-btn @click="copy(t.data)" variant="outlined" variant="text">
                 <v-icon>mdi-content-copy</v-icon>
                 copy to clipboard
               </v-btn>
@@ -187,11 +175,13 @@ export default {
     },
   },
   methods: {
-    copySuccess: function () {
-      this.showSnackbar("Copied to clipboard.");
-    },
-    copyError: function () {
-      this.showSnackbar("Copy to clipboard failed. Please try again manually.");
+    copy: async function (text) {
+      try {
+        await navigator.clipboard.writeText(text);
+        this.showSnackbar("Copied to clipboard.");
+      } catch (e) {
+        this.showSnackbar("Copy to clipboard failed. Please try again manually.");
+      }
     },
     showSnackbar: function (text) {
       this.snackbar_text = text;

From 9326acadf6ccc57c6f37645ab173fe5f4f129eaf Mon Sep 17 00:00:00 2001
From: Lukas Lihotzki <lukas@lihotzki.de>
Date: Sun, 12 Mar 2023 00:28:40 +0100
Subject: [PATCH 6/7] refactor(webapp): switch to vue-timeago3

---
 www/webapp/package.json | 2 +-
 www/webapp/src/main.js  | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/www/webapp/package.json b/www/webapp/package.json
index 8b9bff942..f1662d964 100644
--- a/www/webapp/package.json
+++ b/www/webapp/package.json
@@ -17,7 +17,7 @@
     "pinia": "^2.0.30",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
-    "vue-timeago": "^5.1.3",
+    "vue-timeago3": "^2.3.0",
     "vuelidate": "^0.7.7",
     "vuetify": "^3.1.8",
     "webpack-plugin-vuetify": "^2.0.1"
diff --git a/www/webapp/src/main.js b/www/webapp/src/main.js
index 2e7fc49ed..6afc0a426 100644
--- a/www/webapp/src/main.js
+++ b/www/webapp/src/main.js
@@ -14,6 +14,7 @@ import "@fontsource/roboto/500.css" /* medium */
 import "@fontsource/roboto/700.css" /* bold */
 import '@mdi/font/css/materialdesignicons.css'
 
+import timeago from 'vue-timeago3'
 import { createPinia } from "pinia"
 
 import router from '@/router'
@@ -27,6 +28,7 @@ const pinia = createPinia()
 
 createApp(App)
 .use(vuetify)
+.use(timeago)
 .use(pinia)
 .use(router)
 .mount('#app')

From 93708fece0b1afca1fc11c928248177bc575cecb Mon Sep 17 00:00:00 2001
From: Lukas Lihotzki <lukas@lihotzki.de>
Date: Sun, 12 Mar 2023 01:38:52 +0100
Subject: [PATCH 7/7] chore(webapp): use last variant set on duplicate
 attribute

---
 www/webapp/src/App.vue                                     | 2 +-
 www/webapp/src/components/ActivateAccountActionHandler.vue | 6 +++---
 www/webapp/src/components/DonateDirectDebitForm.vue        | 2 +-
 www/webapp/src/views/DomainSetup.vue                       | 4 ++--
 www/webapp/src/views/DynSetup.vue                          | 4 ++--
 www/webapp/src/views/Home.vue                              | 1 -
 www/webapp/src/views/ResetPassword.vue                     | 6 +++---
 www/webapp/src/views/SignUp.vue                            | 6 +++---
 www/webapp/src/views/Welcome.vue                           | 2 +-
 9 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/www/webapp/src/App.vue b/www/webapp/src/App.vue
index 2564b3cb6..1dfa5ec3f 100644
--- a/www/webapp/src/App.vue
+++ b/www/webapp/src/App.vue
@@ -47,7 +47,7 @@
       </div>
       <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="flat" variant="outlined" @click="logout" v-if="user.authenticated">Log Out</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 bg-color="primary darken-1" fixed-tabs>
diff --git a/www/webapp/src/components/ActivateAccountActionHandler.vue b/www/webapp/src/components/ActivateAccountActionHandler.vue
index 26feb7f67..5656c78cd 100644
--- a/www/webapp/src/components/ActivateAccountActionHandler.vue
+++ b/www/webapp/src/components/ActivateAccountActionHandler.vue
@@ -38,12 +38,12 @@
             </audio>
             <br/>
             <v-btn-toggle>
-              <v-btn variant="text" variant="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 variant="text" variant="outlined" value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-eye</v-icon></v-btn>
-              <v-btn variant="text" variant="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>
diff --git a/www/webapp/src/components/DonateDirectDebitForm.vue b/www/webapp/src/components/DonateDirectDebitForm.vue
index 355d3c0c0..0f952a0f6 100644
--- a/www/webapp/src/components/DonateDirectDebitForm.vue
+++ b/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 variant="flat" variant="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>
diff --git a/www/webapp/src/views/DomainSetup.vue b/www/webapp/src/views/DomainSetup.vue
index 3e0e6554a..abae477f6 100644
--- a/www/webapp/src/views/DomainSetup.vue
+++ b/www/webapp/src/views/DomainSetup.vue
@@ -38,7 +38,7 @@
           <v-card flat v-if="ns.join('\n')">
             <pre class="pa-3">{{ ns.join('\n') }}</pre>
             <v-card-actions>
-              <v-btn @click="copy(ns.join('\n'))" variant="outlined" variant="text">
+              <v-btn @click="copy(ns.join('\n'))" variant="text">
                 <v-icon>mdi-content-copy</v-icon>
                 copy to clipboard
               </v-btn>
@@ -81,7 +81,7 @@
             <v-card-text>{{ t.banner }}</v-card-text>
             <pre class="pa-3">{{ t.data }}</pre>
             <v-card-actions>
-              <v-btn @click="copy(t.data)" variant="outlined" variant="text">
+              <v-btn @click="copy(t.data)" variant="text">
                 <v-icon>mdi-content-copy</v-icon>
                 copy to clipboard
               </v-btn>
diff --git a/www/webapp/src/views/DynSetup.vue b/www/webapp/src/views/DynSetup.vue
index 2bb4b2d4d..8f4f095ae 100644
--- a/www/webapp/src/views/DynSetup.vue
+++ b/www/webapp/src/views/DynSetup.vue
@@ -110,7 +110,7 @@
                 Please verify that your client is using the credentials provided by deSEC and then come back to check
                 again.
               </p>
-              <v-btn variant="flat" variant="outlined" block @click="check" :loading="working">Check Again</v-btn>
+              <v-btn variant="outlined" block @click="check" :loading="working">Check Again</v-btn>
             </v-alert>
             <v-alert type="success" v-if="ips !== undefined && ips.length > 0">
               <p>
@@ -129,7 +129,7 @@
                 Enjoy!
               </p>
               <p>
-                <v-btn variant="flat" variant="outlined" block @click="check" :loading="working">Update</v-btn>
+                <v-btn variant="outlined" block @click="check" :loading="working">Update</v-btn>
               </p>
               <p>
                 Please note that deSEC only assigns your IP address to your domain name.
diff --git a/www/webapp/src/views/Home.vue b/www/webapp/src/views/Home.vue
index 7db8d9da9..de896f801 100644
--- a/www/webapp/src/views/Home.vue
+++ b/www/webapp/src/views/Home.vue
@@ -32,7 +32,6 @@
                     </v-radio-group>
                   </div>
                   <v-text-field
-                    variant="outlined"
                     variant="solo"
                     flat
                     v-model="email"
diff --git a/www/webapp/src/views/ResetPassword.vue b/www/webapp/src/views/ResetPassword.vue
index e83542e7d..9b0bb7799 100644
--- a/www/webapp/src/views/ResetPassword.vue
+++ b/www/webapp/src/views/ResetPassword.vue
@@ -87,12 +87,12 @@
                                     </audio>
                                     <br/>
                                     <v-btn-toggle>
-                                      <v-btn variant="text" variant="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 variant="text" variant="outlined" value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-eye</v-icon></v-btn>
-                                      <v-btn variant="text" variant="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>
diff --git a/www/webapp/src/views/SignUp.vue b/www/webapp/src/views/SignUp.vue
index 7be8f4694..e6fd1a581 100644
--- a/www/webapp/src/views/SignUp.vue
+++ b/www/webapp/src/views/SignUp.vue
@@ -110,12 +110,12 @@
                     </audio>
                     <br/>
                     <v-btn-toggle>
-                      <v-btn variant="text" variant="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 variant="text" variant="outlined" value="image" aria-label="Switch to Image CAPTCHA" :disabled="captchaWorking"><v-icon>mdi-eye</v-icon></v-btn>
-                      <v-btn variant="text" variant="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>
diff --git a/www/webapp/src/views/Welcome.vue b/www/webapp/src/views/Welcome.vue
index 619b588b1..c46a9d420 100644
--- a/www/webapp/src/views/Welcome.vue
+++ b/www/webapp/src/views/Welcome.vue
@@ -31,7 +31,7 @@
           </v-card-text>
           <v-card-actions>
             <v-spacer/>
-            <v-btn variant="outlined" variant="text" variant="flat" :to="{name: 'home'}">Home</v-btn>
+            <v-btn variant="flat" :to="{name: 'home'}">Home</v-btn>
           </v-card-actions>
         </v-card>
         </v-form>