feat: manage tokens

This commit is contained in:
kolaente 2021-12-12 18:28:14 +01:00
parent 75f09ec5db
commit 8e5a318d4c
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
4 changed files with 115 additions and 3 deletions

View file

@ -105,7 +105,12 @@
"caldav": { "caldav": {
"title": "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:", "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": { "avatar": {
"title": "Avatar", "title": "Avatar",
@ -486,7 +491,10 @@
"hideMenu": "Hide the menu", "hideMenu": "Hide the menu",
"forExample": "For example:", "forExample": "For example:",
"welcomeBack": "Welcome Back!", "welcomeBack": "Welcome Back!",
"custom": "Custom" "custom": "Custom",
"id": "ID",
"created": "Created at",
"actions": "Actions"
}, },
"input": { "input": {
"resetColor": "Reset Color", "resetColor": "Reset Color",

15
src/models/caldavToken.js Normal file
View file

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

View file

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

View file

@ -16,6 +16,41 @@
/> />
</div> </div>
</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> <p>
<a :href="CALDAV_DOCS" rel="noreferrer noopener nofollow" target="_blank"> <a :href="CALDAV_DOCS" rel="noreferrer noopener nofollow" target="_blank">
{{ $t('user.settings.caldav.more') }} {{ $t('user.settings.caldav.more') }}
@ -26,12 +61,15 @@
<script lang="ts" setup> <script lang="ts" setup>
import copy from 'copy-to-clipboard' import copy from 'copy-to-clipboard'
import {computed} from 'vue' import {computed, ref} from 'vue'
import {useI18n} from 'vue-i18n' import {useI18n} from 'vue-i18n'
import {useStore} from 'vuex' import {useStore} from 'vuex'
import {CALDAV_DOCS} from '@/urls' import {CALDAV_DOCS} from '@/urls'
import {useTitle} from '@/composables/useTitle' import {useTitle} from '@/composables/useTitle'
import {success} from '@/message'
import Message from '../../../components/misc/message'
import CaldavTokenService from '../../../services/caldavToken'
const store = useStore() const store = useStore()
const {t} = useI18n() 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 caldavUrl = computed(() => `${store.getters['config/apiBase']}/dav/principals/${store.state.auth.info.username}/`)
const caldavEnabled = computed(() => store.state.config.caldavEnabled) 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> </script>