vikunja-frontend/src/views/user/settings/Caldav.vue

<template>
	<card v-if="caldavEnabled" :title="$t('user.settings.caldav.title')">
		<p>
			{{ $t('user.settings.caldav.howTo') }}
		</p>
		<div class="field has-addons no-input-mobile">
			<div class="control is-expanded">
				<input type="text" v-model="caldavUrl" class="input" readonly/>
			</div>
			<div class="control">
				<x-button
					@click="copy(caldavUrl)"
					:shadow="false"
					v-tooltip="$t('misc.copy')"
					icon="paste"
				/>
			</div>
		</div>
		<p>
			<a :href="CALDAV_DOCS" rel="noreferrer noopener nofollow" target="_blank">
				{{ $t('user.settings.caldav.more') }}
			</a>
		</p>
	</card>
</template>

<script lang="ts" setup>
import copy from 'copy-to-clipboard'
import {computed} from 'vue'
import {useI18n} from 'vue-i18n'
import {useStore} from 'vuex'

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>