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:
commit
0b31cce567
|
@ -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",
|
||||
|
|
|
@ -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 {}
|
||||
}
|
||||
}
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue