User Data Export and import (#699)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/699
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>

src/views/user/DataExportDownload.vue

@@ -0,0 +1,64 @@
+<template>
+	<div class="content">
+		<h1>{{ $t('user.export.downloadTitle') }}</h1>
+		<p>{{ $t('user.export.descriptionPasswordRequired') }}</p>
+		<div class="field">
+			<label class="label" for="currentPasswordDataExport">
+				{{ $t('user.settings.currentPassword') }}
+			</label>
+			<div class="control">
+				<input
+					class="input"
+					:class="{'is-danger': errPasswordRequired}"
+					id="currentPasswordDataExport"
+					:placeholder="$t('user.settings.currentPasswordPlaceholder')"
+					type="password"
+					v-model="password"
+					@keyup="() => errPasswordRequired = password === ''"
+					ref="passwordInput"
+				/>
+			</div>
+			<p class="help is-danger" v-if="errPasswordRequired">
+				{{ $t('user.deletion.passwordRequired') }}
+			</p>
+		</div>
+
+		<x-button
+			v-focus
+			:loading="dataExportService.loading"
+			@click="download()"
+			class="mt-4">
+			{{ $t('misc.download') }}
+		</x-button>
+	</div>
+</template>
+
+<script>
+import DataExportService from '../../services/dataExport'
+
+export default {
+	name: 'data-export-download',
+	data() {
+		return {
+			dataExportService: DataExportService,
+			password: '',
+			errPasswordRequired: false,
+		}
+	},
+	created() {
+		this.dataExportService = new DataExportService()
+	},
+	methods: {
+		download() {
+			if (this.password === '') {
+				this.errPasswordRequired = true
+				this.$refs.passwordInput.focus()
+				return
+			}
+
+			this.dataExportService.download(this.password)
+				.catch(e => this.error(e))
+		},
+	},
+}
+</script>

src/views/user/Settings.vue

@@ -235,6 +235,9 @@
 				</div>
 			</template>
 		</card>
+		
+		<!-- Data export -->
+		<data-export/>
 
 		<!-- Migration -->
 		<card :title="$t('migrate.title')" v-if="migratorsEnabled">
@@ -293,6 +296,7 @@ import AvatarSettings from '../../components/user/avatar-settings.vue'
 import copy from 'copy-to-clipboard'
 import ListSearch from '@/components/tasks/partials/listSearch.vue'
 import UserSettingsDeletion from '../../components/user/settings/deletion'
+import DataExport from '../../components/user/settings/data-export'
 
 export default {
 	name: 'Settings',
@@ -325,6 +329,7 @@ export default {
 		UserSettingsDeletion,
 		ListSearch,
 		AvatarSettings,
+		DataExport,
 	},
 	created() {
 		this.passwordUpdateService = new PasswordUpdateService()