feat: manage tokens

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",

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,
+		}
+	}
+}

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)
+	}
+}
+	

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>