From 75f09ec5dbd173bc8d20d1d0af798fbeaba3df78 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 12 Dec 2021 18:01:51 +0100
Subject: [PATCH 01/24] chore: move to script setup

---
 src/views/user/settings/Caldav.vue | 43 +++++++++++-------------------
 1 file changed, 15 insertions(+), 28 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 6c4cbc0a5..cb4189d74 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -17,40 +17,27 @@
 			</div>
 		</div>
 		<p>
-			<a href="https://vikunja.io/docs/caldav/" rel="noreferrer noopener nofollow" target="_blank">
+			<a :href="CALDAV_DOCS" rel="noreferrer noopener nofollow" target="_blank">
 				{{ $t('user.settings.caldav.more') }}
 			</a>
 		</p>
 	</card>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
+<script lang="ts" setup>
 import copy from 'copy-to-clipboard'
-import {mapState} from 'vuex'
-import {CALDAV_DOCS} from '@/urls'
+import {computed} from 'vue'
+import {useI18n} from 'vue-i18n'
+import {useStore} from 'vuex'
 
-export default defineComponent({
-	name: 'user-settings-caldav',
-	data() {
-		return {
-			caldavDocsUrl: CALDAV_DOCS,
-		}
-	},
-	mounted() {
-		this.setTitle(`${this.$t('user.settings.caldav.title')} - ${this.$t('user.settings.title')}`)
-	},
-	computed: {
-		caldavUrl() {
-			return `${this.$store.getters['config/apiBase']}/dav/principals/${this.userInfo.username}/`
-		},
-		...mapState('config', ['caldavEnabled']),
-		...mapState({
-			userInfo: state => state.auth.info,
-		}),
-	},
-	methods: {
-		copy,
-	},
-})
+import {CALDAV_DOCS} from '@/urls'
+import {useTitle} from '@/composables/useTitle'
+
+const store = useStore()
+const {t} = useI18n()
+
+useTitle(() => `${t('user.settings.caldav.title')} - ${t('user.settings.title')}`)
+
+const caldavUrl = computed(() => `${store.getters['config/apiBase']}/dav/principals/${store.state.auth.info.username}/`)
+const caldavEnabled = computed(() => store.state.config.caldavEnabled)
 </script>

From 8e5a318d4c1fe749867174657ec43cc1f886cf7a Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 12 Dec 2021 18:28:14 +0100
Subject: [PATCH 02/24] feat: manage tokens

---
 src/i18n/lang/en.json              | 12 +++++-
 src/models/caldavToken.js          | 15 +++++++
 src/services/caldavToken.js        | 23 ++++++++++
 src/views/user/settings/Caldav.vue | 68 +++++++++++++++++++++++++++++-
 4 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 src/models/caldavToken.js
 create mode 100644 src/services/caldavToken.js

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index ca476f47b..b272aeaf8 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -105,7 +105,12 @@
       "caldav": {
         "title": "Caldav",
         "howTo": "You can connect Vikunja to caldav clients to view and manage all tasks from different clients. Enter this url into your client:",
-        "more": "More information about caldav in Vikunja"
+        "more": "More information about caldav in Vikunja",
+        "tokens": "Caldav Tokens",
+        "tokensHowTo": "You can use a caldav token to use instead of a password to log in the above endpoint.",
+        "createToken": "Create a token",
+        "tokenCreated": "Here is your token: {token}",
+        "wontSeeItAgain": "Write it down, you won't be able to see it again."
       },
       "avatar": {
         "title": "Avatar",
@@ -486,7 +491,10 @@
     "hideMenu": "Hide the menu",
     "forExample": "For example:",
     "welcomeBack": "Welcome Back!",
-    "custom": "Custom"
+    "custom": "Custom",
+    "id": "ID",
+    "created": "Created at",
+    "actions": "Actions"
   },
   "input": {
     "resetColor": "Reset Color",
diff --git a/src/models/caldavToken.js b/src/models/caldavToken.js
new file mode 100644
index 000000000..2d7a4ebd5
--- /dev/null
+++ b/src/models/caldavToken.js
@@ -0,0 +1,15 @@
+import AbstractModel from './abstractModel'
+
+export default class CaldavTokenModel extends AbstractModel {
+	constructor(data) {
+		super(data)
+		this.created = new Date(this.created)
+	}
+
+	defaults() {
+		return {
+			id: 0,
+			created: null,
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/services/caldavToken.js b/src/services/caldavToken.js
new file mode 100644
index 000000000..2c124ade6
--- /dev/null
+++ b/src/services/caldavToken.js
@@ -0,0 +1,23 @@
+import {formatISO} from 'date-fns'
+import CaldavTokenModel from '../models/caldavToken'
+import AbstractService from './abstractService'
+
+export default class CaldavTokenService extends AbstractService {
+	constructor() {
+		super({
+			getAll: '/user/settings/token/caldav',
+			create: '/user/settings/token/caldav',
+			delete: '/user/settings/token/caldav/{id}',
+		})
+	}
+
+	processModel(model) {
+		model.created = formatISO(new Date(model.created))
+		return model
+	}
+
+	modelFactory(data) {
+		return new CaldavTokenModel(data)
+	}
+}
+	
\ No newline at end of file
diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index cb4189d74..e9d010a4d 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -16,6 +16,41 @@
 				/>
 			</div>
 		</div>
+
+		<p class="my-4 has-text-weight-bold">
+			{{ $t('user.settings.caldav.tokens') }}
+		</p>
+
+		<p>
+			{{ $t('user.settings.caldav.tokensHowTo') }}
+		</p>
+
+		<table class="table" v-if="tokens.length > 0">
+			<tr>
+				<th>{{ $t('misc.id') }}</th>
+				<th>{{ $t('misc.created') }}</th>
+				<th>{{ $t('misc.actions') }}</th>
+			</tr>
+			<tr v-for="tk in tokens">
+				<td>{{ tk.id }}</td>
+				<td>{{ formatDateShort(tk.created) }}</td>
+				<td>
+					<x-button type="secondary" @click="deleteToken(tk)">
+						{{ $t('misc.delete') }}
+					</x-button>
+				</td>
+			</tr>
+		</table>
+
+		<Message v-if="newToken" class="mb-4">
+			{{ $t('user.settings.caldav.tokenCreated', {token: newToken.token}) }}<br/>
+			{{ $t('user.settings.caldav.wontSeeItAgain') }}
+		</Message>
+
+		<x-button icon="plus" class="mb-4" @click="createToken" :loading="service.loading">
+			{{ $t('user.settings.caldav.createToken') }}
+		</x-button>
+
 		<p>
 			<a :href="CALDAV_DOCS" rel="noreferrer noopener nofollow" target="_blank">
 				{{ $t('user.settings.caldav.more') }}
@@ -26,12 +61,15 @@
 
 <script lang="ts" setup>
 import copy from 'copy-to-clipboard'
-import {computed} from 'vue'
+import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useStore} from 'vuex'
 
 import {CALDAV_DOCS} from '@/urls'
 import {useTitle} from '@/composables/useTitle'
+import {success} from '@/message'
+import Message from '../../../components/misc/message'
+import CaldavTokenService from '../../../services/caldavToken'
 
 const store = useStore()
 const {t} = useI18n()
@@ -40,4 +78,32 @@ useTitle(() => `${t('user.settings.caldav.title')} - ${t('user.settings.title')}
 
 const caldavUrl = computed(() => `${store.getters['config/apiBase']}/dav/principals/${store.state.auth.info.username}/`)
 const caldavEnabled = computed(() => store.state.config.caldavEnabled)
+
+const service = new CaldavTokenService()
+const tokens = ref([])
+service.getAll()
+	.then(r => {
+		tokens.value = r
+	})
+
+const newToken = ref(null)
+const createToken = () => {
+	service.create({})
+		.then(r => {
+			tokens.value.push(r)
+			newToken.value = r
+		})
+}
+
+const deleteToken = token => {
+	service.delete(token)
+		.then(r => {
+			success(r)
+			for (const i in tokens.value) {
+				if (tokens.value[i].id === token.id) {
+					tokens.value.splice(i, 1)
+				}
+			}
+		})
+}
 </script>

From 7bdefd9a3e8ea878c0ce2f24ec7a9c3fbc0e549c Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 12 Dec 2021 18:32:32 +0100
Subject: [PATCH 03/24] chore: put action buttons right

---
 src/views/user/settings/Caldav.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index e9d010a4d..23a74cc34 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -29,12 +29,12 @@
 			<tr>
 				<th>{{ $t('misc.id') }}</th>
 				<th>{{ $t('misc.created') }}</th>
-				<th>{{ $t('misc.actions') }}</th>
+				<th class="has-text-right">{{ $t('misc.actions') }}</th>
 			</tr>
 			<tr v-for="tk in tokens">
 				<td>{{ tk.id }}</td>
 				<td>{{ formatDateShort(tk.created) }}</td>
-				<td>
+				<td class="has-text-right">
 					<x-button type="secondary" @click="deleteToken(tk)">
 						{{ $t('misc.delete') }}
 					</x-button>

From 6b899be202783ae5d9ebf6ce4913bfbac4019a0c Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 12 Dec 2021 18:39:17 +0100
Subject: [PATCH 04/24] chore: clarify token is required for non-local users

---
 src/i18n/lang/en.json              |  4 +++-
 src/views/user/settings/Caldav.vue | 10 +++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index b272aeaf8..82ebec7bf 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -110,7 +110,9 @@
         "tokensHowTo": "You can use a caldav token to use instead of a password to log in the above endpoint.",
         "createToken": "Create a token",
         "tokenCreated": "Here is your token: {token}",
-        "wontSeeItAgain": "Write it down, you won't be able to see it again."
+        "wontSeeItAgain": "Write it down, you won't be able to see it again.",
+        "mustUseToken": "You need to create a caldav token if you want to use caldav with a third party client. Use the token as the password.",
+        "usernameIs": "Your username is: {0}"
       },
       "avatar": {
         "title": "Avatar",
diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 23a74cc34..82a5d4793 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -22,7 +22,13 @@
 		</p>
 
 		<p>
-			{{ $t('user.settings.caldav.tokensHowTo') }}
+			{{ isLocalUser ? $t('user.settings.caldav.tokensHowTo') : $t('user.settings.caldav.mustUseToken') }}
+			<template v-if="!isLocalUser">
+				<br/>
+				<i18n-t keypath="user.settings.caldav.usernameIs">
+					<strong>{{ username }}</strong>
+				</i18n-t>
+			</template>
 		</p>
 
 		<table class="table" v-if="tokens.length > 0">
@@ -78,6 +84,8 @@ useTitle(() => `${t('user.settings.caldav.title')} - ${t('user.settings.title')}
 
 const caldavUrl = computed(() => `${store.getters['config/apiBase']}/dav/principals/${store.state.auth.info.username}/`)
 const caldavEnabled = computed(() => store.state.config.caldavEnabled)
+const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
+const username = computed(() => store.state.auth.info?.username)
 
 const service = new CaldavTokenService()
 const tokens = ref([])

From cb067461aa360dff90f144ca3267af45598d3aa4 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 14 Dec 2021 21:27:16 +0100
Subject: [PATCH 05/24] chore: use ts for caldav component

---
 src/views/user/settings/Caldav.vue | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 82a5d4793..8a1b30ff3 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -9,10 +9,10 @@
 			</div>
 			<div class="control">
 				<x-button
-					@click="copy(caldavUrl)"
-					:shadow="false"
-					v-tooltip="$t('misc.copy')"
-					icon="paste"
+						@click="copy(caldavUrl)"
+						:shadow="false"
+						v-tooltip="$t('misc.copy')"
+						icon="paste"
 				/>
 			</div>
 		</div>
@@ -74,8 +74,9 @@ import {useStore} from 'vuex'
 import {CALDAV_DOCS} from '@/urls'
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
-import Message from '../../../components/misc/message'
-import CaldavTokenService from '../../../services/caldavToken'
+import Message from '@/components/misc/message.vue'
+import CaldavTokenService from '@/services/caldavToken'
+import CaldavTokenModel from '@/models/caldavToken'
 
 const store = useStore()
 const {t} = useI18n()
@@ -88,9 +89,9 @@ const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
 const username = computed(() => store.state.auth.info?.username)
 
 const service = new CaldavTokenService()
-const tokens = ref([])
+const tokens = ref<CaldavTokenModel[]>([])
 service.getAll()
-	.then(r => {
+	.then((r: CaldavTokenModel[]) => {
 		tokens.value = r
 	})
 
@@ -103,12 +104,15 @@ const createToken = () => {
 		})
 }
 
-const deleteToken = token => {
+const deleteToken = (token: CaldavTokenModel) => {
 	service.delete(token)
+		// @ts-ignore
 		.then(r => {
 			success(r)
 			for (const i in tokens.value) {
+				// @ts-ignore
 				if (tokens.value[i].id === token.id) {
+					// @ts-ignore
 					tokens.value.splice(i, 1)
 				}
 			}

From 0299ed32f3366f6a1093329646105f2ae5bfa4d2 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 14 Dec 2021 21:30:01 +0100
Subject: [PATCH 06/24] chore: use findIndex to remove caldav token

---
 src/views/user/settings/Caldav.vue | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 8a1b30ff3..a9618d8fc 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -109,13 +109,10 @@ const deleteToken = (token: CaldavTokenModel) => {
 		// @ts-ignore
 		.then(r => {
 			success(r)
-			for (const i in tokens.value) {
-				// @ts-ignore
-				if (tokens.value[i].id === token.id) {
-					// @ts-ignore
-					tokens.value.splice(i, 1)
-				}
-			}
+			// @ts-ignore
+			const i = tokens.value.findIndex(v => v.id === token.id)
+			// @ts-ignore
+			tokens.value.splice(i, 1)
 		})
 }
 </script>

From f0426519868c72f15e31ac24ea87899cb4a09aae Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 14 Dec 2021 21:31:25 +0100
Subject: [PATCH 07/24] chore: make server functions async

---
 src/views/user/settings/Caldav.vue | 27 +++++++++++----------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index a9618d8fc..6d887a96f 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -96,23 +96,18 @@ service.getAll()
 	})
 
 const newToken = ref(null)
-const createToken = () => {
-	service.create({})
-		.then(r => {
-			tokens.value.push(r)
-			newToken.value = r
-		})
+const createToken = async () => {
+	const r = await service.create({})
+	tokens.value.push(r)
+	newToken.value = r
 }
 
-const deleteToken = (token: CaldavTokenModel) => {
-	service.delete(token)
-		// @ts-ignore
-		.then(r => {
-			success(r)
-			// @ts-ignore
-			const i = tokens.value.findIndex(v => v.id === token.id)
-			// @ts-ignore
-			tokens.value.splice(i, 1)
-		})
+const deleteToken = async (token: CaldavTokenModel) => {
+	const r = await service.delete(token)
+	success(r)
+	// @ts-ignore
+	const i = tokens.value.findIndex(v => v.id === token.id)
+	// @ts-ignore
+	tokens.value.splice(i, 1)
 }
 </script>

From 043bf62ef38555cca91f45cc9794cd071da15cd0 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 14 Dec 2021 21:36:42 +0100
Subject: [PATCH 08/24] chore: extract getting all tokens into a composable

---
 src/views/user/settings/Caldav.vue | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 6d887a96f..3c7d5a473 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -78,6 +78,16 @@ import Message from '@/components/misc/message.vue'
 import CaldavTokenService from '@/services/caldavToken'
 import CaldavTokenModel from '@/models/caldavToken'
 
+const service = new CaldavTokenService()
+
+async function useToken() {
+	const tokens = ref<CaldavTokenModel[]>([])
+	tokens.value = await service.getAll()
+	return tokens
+}
+
+const tokens = useToken()
+
 const store = useStore()
 const {t} = useI18n()
 
@@ -88,13 +98,6 @@ const caldavEnabled = computed(() => store.state.config.caldavEnabled)
 const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
 const username = computed(() => store.state.auth.info?.username)
 
-const service = new CaldavTokenService()
-const tokens = ref<CaldavTokenModel[]>([])
-service.getAll()
-	.then((r: CaldavTokenModel[]) => {
-		tokens.value = r
-	})
-
 const newToken = ref(null)
 const createToken = async () => {
 	const r = await service.create({})

From b65839d0d76a13b95a38aa162c9b751ff22d7990 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 14 Dec 2021 21:39:16 +0100
Subject: [PATCH 09/24] fix: lint

---
 src/views/user/settings/Caldav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 3c7d5a473..a8d8a4d90 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -37,7 +37,7 @@
 				<th>{{ $t('misc.created') }}</th>
 				<th class="has-text-right">{{ $t('misc.actions') }}</th>
 			</tr>
-			<tr v-for="tk in tokens">
+			<tr v-for="tk in tokens" :key="tk.id">
 				<td>{{ tk.id }}</td>
 				<td>{{ formatDateShort(tk.created) }}</td>
 				<td class="has-text-right">

From 19b772f8ee378417729c042d683ab6ae123b16e4 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 20 Dec 2021 18:32:32 +0100
Subject: [PATCH 10/24] fix: type

---
 src/views/user/settings/Caldav.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index a8d8a4d90..7f6cf06a5 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -80,7 +80,7 @@ import CaldavTokenModel from '@/models/caldavToken'
 
 const service = new CaldavTokenService()
 
-async function useToken() {
+async function useToken(): ref<CaldavTokenModel[]> {
 	const tokens = ref<CaldavTokenModel[]>([])
 	tokens.value = await service.getAll()
 	return tokens
@@ -108,9 +108,7 @@ const createToken = async () => {
 const deleteToken = async (token: CaldavTokenModel) => {
 	const r = await service.delete(token)
 	success(r)
-	// @ts-ignore
 	const i = tokens.value.findIndex(v => v.id === token.id)
-	// @ts-ignore
 	tokens.value.splice(i, 1)
 }
 </script>

From af6385bc606fa1a2b1a7af3396c90cbd86314a9d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 20 Dec 2021 18:32:57 +0100
Subject: [PATCH 11/24] chore: check for no results

---
 src/views/user/settings/Caldav.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 7f6cf06a5..8f18ca437 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -9,10 +9,10 @@
 			</div>
 			<div class="control">
 				<x-button
-						@click="copy(caldavUrl)"
-						:shadow="false"
-						v-tooltip="$t('misc.copy')"
-						icon="paste"
+					@click="copy(caldavUrl)"
+					:shadow="false"
+					v-tooltip="$t('misc.copy')"
+					icon="paste"
 				/>
 			</div>
 		</div>
@@ -109,6 +109,9 @@ const deleteToken = async (token: CaldavTokenModel) => {
 	const r = await service.delete(token)
 	success(r)
 	const i = tokens.value.findIndex(v => v.id === token.id)
+	if (i === -1) {
+		return
+	}
 	tokens.value.splice(i, 1)
 }
 </script>

From ca330fe63b3bf328ae4c1ce36513beee66657db2 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Mon, 20 Dec 2021 18:39:01 +0100
Subject: [PATCH 12/24] chore: use function statements everywhere

---
 src/views/user/settings/Caldav.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 8f18ca437..e785436a2 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -99,13 +99,14 @@ const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
 const username = computed(() => store.state.auth.info?.username)
 
 const newToken = ref(null)
-const createToken = async () => {
+
+async function createToken() {
 	const r = await service.create({})
 	tokens.value.push(r)
 	newToken.value = r
 }
 
-const deleteToken = async (token: CaldavTokenModel) => {
+async function deleteToken(token: CaldavTokenModel) {
 	const r = await service.delete(token)
 	success(r)
 	const i = tokens.value.findIndex(v => v.id === token.id)

From da4f5a0f758cf4dcaedb5407fcf58b31e1dab58d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 26 Dec 2021 11:30:44 +0100
Subject: [PATCH 13/24] chore: move success message after state changes

---
 src/views/user/settings/Caldav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index e785436a2..eb2e69f42 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -108,11 +108,11 @@ async function createToken() {
 
 async function deleteToken(token: CaldavTokenModel) {
 	const r = await service.delete(token)
-	success(r)
 	const i = tokens.value.findIndex(v => v.id === token.id)
 	if (i === -1) {
 		return
 	}
 	tokens.value.splice(i, 1)
+	success(r)
 }
 </script>

From cd245e467c2bee0fa7fb7efd9a670625fb91526b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 26 Dec 2021 11:32:24 +0100
Subject: [PATCH 14/24] chore: fix CalDAV casing

---
 src/i18n/lang/en.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 82ebec7bf..8e9c587ed 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -103,15 +103,15 @@
         "disableSuccess": "Two factor authentication was sucessfully disabled."
       },
       "caldav": {
-        "title": "Caldav",
-        "howTo": "You can connect Vikunja to caldav clients to view and manage all tasks from different clients. Enter this url into your client:",
-        "more": "More information about caldav in Vikunja",
-        "tokens": "Caldav Tokens",
-        "tokensHowTo": "You can use a caldav token to use instead of a password to log in the above endpoint.",
+        "title": "CalDAV",
+        "howTo": "You can connect Vikunja to CalDAV clients to view and manage all tasks from different clients. Enter this url into your client:",
+        "more": "More information about CalDAV in Vikunja",
+        "tokens": "CalDAV Tokens",
+        "tokensHowTo": "You can use a CalDAV token to use instead of a password to log in the above endpoint.",
         "createToken": "Create a token",
         "tokenCreated": "Here is your token: {token}",
         "wontSeeItAgain": "Write it down, you won't be able to see it again.",
-        "mustUseToken": "You need to create a caldav token if you want to use caldav with a third party client. Use the token as the password.",
+        "mustUseToken": "You need to create a CalDAV token if you want to use CalDAV with a third party client. Use the token as the password.",
         "usernameIs": "Your username is: {0}"
       },
       "avatar": {

From d865af58a8206ecd8f1f2ed8edd767c0de37dd5a Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 26 Dec 2021 11:34:36 +0100
Subject: [PATCH 15/24] chore: return new model instead of modifying the
 existing

---
 src/services/caldavToken.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/services/caldavToken.js b/src/services/caldavToken.js
index 2c124ade6..6e4397655 100644
--- a/src/services/caldavToken.js
+++ b/src/services/caldavToken.js
@@ -12,8 +12,10 @@ export default class CaldavTokenService extends AbstractService {
 	}
 
 	processModel(model) {
-		model.created = formatISO(new Date(model.created))
-		return model
+		return {
+			...model,
+			created: formatISO(new Date(model.created)),
+		}
 	}
 
 	modelFactory(data) {

From 460a4dbdbe2848295a22ab409cff7d57e628bbee Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 26 Dec 2021 11:36:54 +0100
Subject: [PATCH 16/24] chore: use h5

---
 src/views/user/settings/Caldav.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index eb2e69f42..fd568ca09 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -17,9 +17,9 @@
 			</div>
 		</div>
 
-		<p class="my-4 has-text-weight-bold">
+		<h5 class="mt-5 mb-4 has-text-weight-bold">
 			{{ $t('user.settings.caldav.tokens') }}
-		</p>
+		</h5>
 
 		<p>
 			{{ isLocalUser ? $t('user.settings.caldav.tokensHowTo') : $t('user.settings.caldav.mustUseToken') }}

From b9fa08116d5c1f728a783c25b466c6386d9489b7 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 26 Dec 2021 11:43:15 +0100
Subject: [PATCH 17/24] chore: rename to useTokens

---
 src/views/user/settings/Caldav.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index fd568ca09..4e3b0bdb1 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -80,13 +80,13 @@ import CaldavTokenModel from '@/models/caldavToken'
 
 const service = new CaldavTokenService()
 
-async function useToken(): ref<CaldavTokenModel[]> {
+async function useTokens(): ref<CaldavTokenModel[]> {
 	const tokens = ref<CaldavTokenModel[]>([])
 	tokens.value = await service.getAll()
 	return tokens
 }
 
-const tokens = useToken()
+const tokens = useTokens()
 
 const store = useStore()
 const {t} = useI18n()

From 343be4d5d6048a89d42b33433aeff7d458a680de Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 26 Dec 2021 11:54:27 +0100
Subject: [PATCH 18/24] chore: directly use newToken.value

---
 src/views/user/settings/Caldav.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 4e3b0bdb1..945a03f32 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -101,9 +101,8 @@ const username = computed(() => store.state.auth.info?.username)
 const newToken = ref(null)
 
 async function createToken() {
-	const r = await service.create({})
-	tokens.value.push(r)
-	newToken.value = r
+	newToken.value = await service.create({})
+	tokens.value.push(newToken.value)
 }
 
 async function deleteToken(token: CaldavTokenModel) {

From 041f8884923904ccbf1d9897f12738d8a1f25ef4 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 26 Dec 2021 11:56:59 +0100
Subject: [PATCH 19/24] chore: use .then instead of await

---
 src/views/user/settings/Caldav.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 945a03f32..a81761b3d 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -80,9 +80,12 @@ import CaldavTokenModel from '@/models/caldavToken'
 
 const service = new CaldavTokenService()
 
-async function useTokens(): ref<CaldavTokenModel[]> {
+function useTokens(): ref<CaldavTokenModel[]> {
 	const tokens = ref<CaldavTokenModel[]>([])
-	tokens.value = await service.getAll()
+	service.getAll()
+		.then((t: CaldavTokenModel[]) => {
+			tokens.value = t
+		})
 	return tokens
 }
 

From eb7667e27edc47893d6d661265498d304ffde998 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 5 Jan 2022 00:13:16 +0100
Subject: [PATCH 20/24] chore: use BaseButton

---
 src/views/user/settings/Caldav.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index a81761b3d..6c663d8a3 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -58,9 +58,9 @@
 		</x-button>
 
 		<p>
-			<a :href="CALDAV_DOCS" rel="noreferrer noopener nofollow" target="_blank">
+			<BaseButton :href="CALDAV_DOCS" rel="noreferrer noopener nofollow" target="_blank">
 				{{ $t('user.settings.caldav.more') }}
-			</a>
+			</BaseButton>
 		</p>
 	</card>
 </template>
@@ -74,6 +74,7 @@ import {useStore} from 'vuex'
 import {CALDAV_DOCS} from '@/urls'
 import {useTitle} from '@/composables/useTitle'
 import {success} from '@/message'
+import BaseButton from '@/components/base/BaseButton.vue'
 import Message from '@/components/misc/message.vue'
 import CaldavTokenService from '@/services/caldavToken'
 import CaldavTokenModel from '@/models/caldavToken'

From 50575ffd687ceaf067076bf3b531861362c8c967 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 5 Jan 2022 00:13:08 +0100
Subject: [PATCH 21/24] feat: flatten and reorder after all

---
 src/models/abstractModel.ts        |  9 +++----
 src/models/caldavToken.js          | 15 -----------
 src/models/caldavToken.ts          | 14 ++++++++++
 src/views/user/settings/Caldav.vue | 42 +++++++++++-------------------
 4 files changed, 32 insertions(+), 48 deletions(-)
 delete mode 100644 src/models/caldavToken.js
 create mode 100644 src/models/caldavToken.ts

diff --git a/src/models/abstractModel.ts b/src/models/abstractModel.ts
index 202ccde9d..fbf074e29 100644
--- a/src/models/abstractModel.ts
+++ b/src/models/abstractModel.ts
@@ -5,15 +5,13 @@ export default class AbstractModel {
 
 	/**
 	 * The max right the user has on this object, as returned by the x-max-right header from the api.
-	 * @type {number|null}
 	 */
-	maxRight = null
+	maxRight: number | null = null
 
 	/**
 	 * The abstract constructor takes an object and merges its data with the default data of this model.
-	 * @param data
 	 */
-	constructor(data) {
+	constructor(data : Object = {}) {
 		data = objectToCamelCase(data)
 
 		// Put all data in our model while overriding those with a value of null or undefined with their defaults
@@ -26,9 +24,8 @@ export default class AbstractModel {
 
 	/**
 	 * Default attributes that define the "empty" state.
-	 * @return {{}}
 	 */
-	defaults() {
+	defaults(): Object {
 		return {}
 	}
 }
\ No newline at end of file
diff --git a/src/models/caldavToken.js b/src/models/caldavToken.js
deleted file mode 100644
index 2d7a4ebd5..000000000
--- a/src/models/caldavToken.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import AbstractModel from './abstractModel'
-
-export default class CaldavTokenModel extends AbstractModel {
-	constructor(data) {
-		super(data)
-		this.created = new Date(this.created)
-	}
-
-	defaults() {
-		return {
-			id: 0,
-			created: null,
-		}
-	}
-}
\ No newline at end of file
diff --git a/src/models/caldavToken.ts b/src/models/caldavToken.ts
new file mode 100644
index 000000000..9ecf22325
--- /dev/null
+++ b/src/models/caldavToken.ts
@@ -0,0 +1,14 @@
+import AbstractModel from './abstractModel'
+
+export default class CaldavTokenModel extends AbstractModel {
+	id = 0
+	created : undefined | Date = undefined
+
+	constructor(data? : Object) {
+		super(data)
+
+		if (this.created) {
+			this.created = new Date(this.created)
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 6c663d8a3..ec68c8a43 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -67,7 +67,7 @@
 
 <script lang="ts" setup>
 import copy from 'copy-to-clipboard'
-import {computed, ref} from 'vue'
+import {computed, ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
 import {useStore} from 'vuex'
 
@@ -79,43 +79,31 @@ import Message from '@/components/misc/message.vue'
 import CaldavTokenService from '@/services/caldavToken'
 import CaldavTokenModel from '@/models/caldavToken'
 
-const service = new CaldavTokenService()
-
-function useTokens(): ref<CaldavTokenModel[]> {
-	const tokens = ref<CaldavTokenModel[]>([])
-	service.getAll()
-		.then((t: CaldavTokenModel[]) => {
-			tokens.value = t
-		})
-	return tokens
-}
-
-const tokens = useTokens()
-
-const store = useStore()
 const {t} = useI18n()
-
 useTitle(() => `${t('user.settings.caldav.title')} - ${t('user.settings.title')}`)
 
-const caldavUrl = computed(() => `${store.getters['config/apiBase']}/dav/principals/${store.state.auth.info.username}/`)
-const caldavEnabled = computed(() => store.state.config.caldavEnabled)
-const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
-const username = computed(() => store.state.auth.info?.username)
+const service = shallowReactive(new CaldavTokenService())
+const tokens = ref<CaldavTokenModel[]>([])
 
-const newToken = ref(null)
+service.getAll().then((result: CaldavTokenModel[]) => {
+	tokens.value = result
+})
 
+const newToken = ref<CaldavTokenModel>()
 async function createToken() {
-	newToken.value = await service.create({})
+	newToken.value = await service.create() as CaldavTokenModel
 	tokens.value.push(newToken.value)
 }
 
 async function deleteToken(token: CaldavTokenModel) {
 	const r = await service.delete(token)
-	const i = tokens.value.findIndex(v => v.id === token.id)
-	if (i === -1) {
-		return
-	}
-	tokens.value.splice(i, 1)
+	tokens.value = tokens.value.filter(({id}) => id !== token.id)
 	success(r)
 }
+
+const store = useStore()
+const username = computed(() => store.state.auth.info?.username)
+const caldavUrl = computed(() => `${store.getters['config/apiBase']}/dav/principals/${username.value}/`)
+const caldavEnabled = computed(() => store.state.config.caldavEnabled)
+const isLocalUser = computed(() => store.state.auth.info?.isLocalUser)
 </script>

From b1159f331f9ef704dc96f5ea27af5b2deff2fa41 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Sun, 13 Feb 2022 21:54:40 +0100
Subject: [PATCH 22/24] feat: remove duplicate rel attribute

---
 src/views/user/settings/Caldav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index ec68c8a43..329d9215d 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -58,7 +58,7 @@
 		</x-button>
 
 		<p>
-			<BaseButton :href="CALDAV_DOCS" rel="noreferrer noopener nofollow" target="_blank">
+			<BaseButton :href="CALDAV_DOCS" target="_blank">
 				{{ $t('user.settings.caldav.more') }}
 			</BaseButton>
 		</p>

From 898b22b37794d8d42face1062a97c557c13f1141 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 2 Apr 2022 17:34:48 +0200
Subject: [PATCH 23/24] fix: create token

---
 src/views/user/settings/Caldav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/user/settings/Caldav.vue b/src/views/user/settings/Caldav.vue
index 329d9215d..ca8518722 100644
--- a/src/views/user/settings/Caldav.vue
+++ b/src/views/user/settings/Caldav.vue
@@ -91,7 +91,7 @@ service.getAll().then((result: CaldavTokenModel[]) => {
 
 const newToken = ref<CaldavTokenModel>()
 async function createToken() {
-	newToken.value = await service.create() as CaldavTokenModel
+	newToken.value = await service.create({}) as CaldavTokenModel
 	tokens.value.push(newToken.value)
 }
 

From 58b0397cec5b287d7a369228bb748eb45873c200 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 2 Apr 2022 17:34:58 +0200
Subject: [PATCH 24/24] fix: caldavToken model typehints

---
 src/models/caldavToken.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/models/caldavToken.ts b/src/models/caldavToken.ts
index 9ecf22325..2f8f1d547 100644
--- a/src/models/caldavToken.ts
+++ b/src/models/caldavToken.ts
@@ -1,13 +1,14 @@
 import AbstractModel from './abstractModel'
 
 export default class CaldavTokenModel extends AbstractModel {
-	id = 0
-	created : undefined | Date = undefined
-
 	constructor(data? : Object) {
 		super(data)
+		
+		/** @type {number} */
+		this.id
 
 		if (this.created) {
+			/** @type {Date} */
 			this.created = new Date(this.created)
 		}
 	}