feat: manage caldav tokens (#1307)

Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1307
Reviewed-by: konrad <k@knt.li>
This commit is contained in:
konrad 2022-04-02 15:51:42 +00:00
commit 0b31cce567
5 changed files with 138 additions and 38 deletions

View File

@ -103,9 +103,16 @@
"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"
"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.",
"usernameIs": "Your username is: {0}"
},
"avatar": {
"title": "Avatar",
@ -486,7 +493,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",

View File

@ -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 {}
}
}

15
src/models/caldavToken.ts Normal file
View File

@ -0,0 +1,15 @@
import AbstractModel from './abstractModel'
export default class CaldavTokenModel extends AbstractModel {
constructor(data? : Object) {
super(data)
/** @type {number} */
this.id
if (this.created) {
/** @type {Date} */
this.created = new Date(this.created)
}
}
}

View File

@ -0,0 +1,25 @@
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) {
return {
...model,
created: formatISO(new Date(model.created)),
}
}
modelFactory(data) {
return new CaldavTokenModel(data)
}
}

View File

@ -16,41 +16,94 @@
/>
</div>
</div>
<h5 class="mt-5 mb-4 has-text-weight-bold">
{{ $t('user.settings.caldav.tokens') }}
</h5>
<p>
<a href="https://vikunja.io/docs/caldav/" rel="noreferrer noopener nofollow" target="_blank">
{{ 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">
<tr>
<th>{{ $t('misc.id') }}</th>
<th>{{ $t('misc.created') }}</th>
<th class="has-text-right">{{ $t('misc.actions') }}</th>
</tr>
<tr v-for="tk in tokens" :key="tk.id">
<td>{{ tk.id }}</td>
<td>{{ formatDateShort(tk.created) }}</td>
<td class="has-text-right">
<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>
<BaseButton :href="CALDAV_DOCS" target="_blank">
{{ $t('user.settings.caldav.more') }}
</a>
</BaseButton>
</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, ref, shallowReactive} 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'
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'
const {t} = useI18n()
useTitle(() => `${t('user.settings.caldav.title')} - ${t('user.settings.title')}`)
const service = shallowReactive(new CaldavTokenService())
const tokens = ref<CaldavTokenModel[]>([])
service.getAll().then((result: CaldavTokenModel[]) => {
tokens.value = result
})
const newToken = ref<CaldavTokenModel>()
async function createToken() {
newToken.value = await service.create({}) as CaldavTokenModel
tokens.value.push(newToken.value)
}
async function deleteToken(token: CaldavTokenModel) {
const r = await service.delete(token)
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>