From 5063b56b4e2ca925929b6dd7795be54f235b7205 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 4 Sep 2021 20:14:40 +0200
Subject: [PATCH] Add downloading a user data export

---
 src/components/tasks/partials/attachments.vue |  2 +-
 src/i18n/lang/en.json                         |  4 +-
 src/router/index.js                           |  6 ++
 src/services/dataExport.js                    |  2 +-
 src/views/user/DataExportDownload.vue         | 64 +++++++++++++++++++
 5 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 src/views/user/DataExportDownload.vue

diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index d49409f21..aa93494f7 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/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)"
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 806224de2..297888659 100644
--- a/src/i18n/lang/en.json
+++ b/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",
diff --git a/src/router/index.js b/src/router/index.js
index 493d0a5e7..a485ab801 100644
--- a/src/router/index.js
+++ b/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',
diff --git a/src/services/dataExport.js b/src/services/dataExport.js
index 7d66e9835..22b436935 100644
--- a/src/services/dataExport.js
+++ b/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'))
 	}
 }
\ No newline at end of file
diff --git a/src/views/user/DataExportDownload.vue b/src/views/user/DataExportDownload.vue
new file mode 100644
index 000000000..f22dd9262
--- /dev/null
+++ b/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>