Add downloading a user data export

src/components/tasks/partials/attachments.vue

@@ -57,7 +57,7 @@
 							@click.prevent.stop="downloadAttachment(a)"
 							v-tooltip="$t('task.attachment.downloadTooltip')"
 						>
-							{{ $t('task.attachment.download') }}
+							{{ $t('misc.download') }}
 						</a>
 						<a
 							@click.stop="copyUrl(a)"

src/i18n/lang/en.json

@@ -441,7 +441,8 @@
     "saving": "Saving…",
     "saved": "Saved!",
     "default": "Default",
-    "close": "Close"
+    "close": "Close",
+    "download": "Download"
   },
   "input": {
     "resetColor": "Reset Color",
@@ -572,7 +573,6 @@
     "attachment": {
       "title": "Attachments",
       "createdBy": "created {0} by {1}",
-      "download": "Download",
       "downloadTooltip": "Download this attachment",
       "upload": "Upload attachment",
       "drop": "Drop files here to upload",

src/router/index.js

@@ -10,6 +10,7 @@ import About from '../views/About'
 import LoginComponent from '../views/user/Login'
 import RegisterComponent from '../views/user/Register'
 import OpenIdAuth from '../views/user/OpenIdAuth'
+import DataExportDownload from '../views/user/DataExportDownload'
 // Tasks
 import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange'
 import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth'
@@ -149,6 +150,11 @@ export default new Router({
 			name: 'user.settings',
 			component: UserSettingsComponent,
 		},
+		{
+			path: '/user/export/download',
+			name: 'user.export.download',
+			component: DataExportDownload,
+		},
 		{
 			path: '/share/:share/auth',
 			name: 'link-share.auth',

src/services/dataExport.js

@@ -7,7 +7,7 @@ export default class DataExportService extends AbstractService {
 	}
 	
 	download(password) {
-		this.getBlobUrl('/user/export/download', 'POST', {password})
+		return this.getBlobUrl('/user/export/download', 'POST', {password})
 			.then(url => downloadBlob(url, 'vikunja-export.zip'))
 	}
 }

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>