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/components/migrator/migration.vue

@@ -1,16 +1,34 @@
 <template>
 	<div class="content">
-		<h1>{{ $t('migrate.titleService', { name: name }) }}</h1>
+		<h1>{{ $t('migrate.titleService', {name: name}) }}</h1>
 		<p>{{ $t('migrate.descriptionDo') }}</p>
 		<template v-if="isMigrating === false && message === '' && lastMigrationDate === null">
-			<p>{{ $t('migrate.authorize', {name: name}) }}</p>
-			<x-button
-				:loading="migrationService.loading"
-				:disabled="migrationService.loading"
-				:href="authUrl"
-			>
-				{{ $t('migrate.getStarted') }}
-			</x-button>
+			<template v-if="isFileMigrator">
+				<p>{{ $t('migrate.importUpload', {name: name}) }}</p>
+				<input
+					@change="migrate"
+					class="is-hidden"
+					ref="uploadInput"
+					type="file"
+				/>
+				<x-button
+					:loading="migrationService.loading"
+					:disabled="migrationService.loading"
+					@click="$refs.uploadInput.click()"
+				>
+					{{ $t('migrate.upload') }}
+				</x-button>
+			</template>
+			<template v-else>
+				<p>{{ $t('migrate.authorize', {name: name}) }}</p>
+				<x-button
+					:loading="migrationService.loading"
+					:disabled="migrationService.loading"
+					:href="authUrl"
+				>
+					{{ $t('migrate.getStarted') }}
+				</x-button>
+			</template>
 		</template>
 		<div
 			class="migration-in-progress-container"
@@ -33,7 +51,7 @@
 		</div>
 		<div v-else-if="lastMigrationDate">
 			<p>
-				{{ $t('migrate.alreadyMigrated1', { name: name, date: formatDate(lastMigrationDate) }) }}<br/>
+				{{ $t('migrate.alreadyMigrated1', {name: name, date: formatDate(lastMigrationDate)}) }}<br/>
 				{{ $t('migrate.alreadyMigrated2') }}
 			</p>
 			<div class="buttons">
@@ -53,7 +71,8 @@
 </template>
 
 <script>
-import AbstractMigrationService from '../../services/migrator/abstractMigrationService'
+import AbstractMigrationService from '../../services/migrator/abstractMigration'
+import AbstractMigrationFileService from '../../services/migrator/abstractMigrationFile'
 
 export default {
 	name: 'migration',
@@ -75,11 +94,21 @@ export default {
 			type: String,
 			required: true,
 		},
+		isFileMigrator: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	created() {
+		this.message = ''
+
+		if (this.isFileMigrator) {
+			this.migrationService = new AbstractMigrationFileService(this.identifier)
+			return
+		}
+		
 		this.migrationService = new AbstractMigrationService(this.identifier)
 		this.getAuthUrl()
-		this.message = ''
 
 		if (typeof this.$route.query.code !== 'undefined' || location.hash.startsWith('#token=')) {
 			if (location.hash.startsWith('#token=')) {
@@ -122,6 +151,11 @@ export default {
 			this.isMigrating = true
 			this.lastMigrationDate = null
 			this.message = ''
+
+			if (this.isFileMigrator) {
+				return this.migrateFile()
+			}
+
 			this.migrationService.migrate({code: this.migratorAuthCode})
 				.then(r => {
 					this.message = r.message
@@ -134,6 +168,23 @@ export default {
 					this.isMigrating = false
 				})
 		},
+		migrateFile() {
+			if (this.$refs.uploadInput.files.length === 0) {
+				return
+			}
+
+			this.migrationService.migrate(this.$refs.uploadInput.files[0])
+				.then(r => {
+					this.message = r.message
+					this.$store.dispatch('namespaces/loadNamespaces')
+				})
+				.catch(e => {
+					this.error(e)
+				})
+				.finally(() => {
+					this.isMigrating = false
+				})
+		},
 	},
 }
 </script>

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/components/user/settings/data-export.vue

@@ -0,0 +1,71 @@
+<template>
+	<card :title="$t('user.export.title')">
+		<p>
+			{{ $t('user.export.description') }}
+		</p>
+		<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
+			:loading="dataExportService.loading"
+			@click="requestDataExport()"
+			class="is-fullwidth mt-4">
+			{{ $t('user.export.request') }}
+		</x-button>
+	</card>
+</template>
+
+<script>
+import DataExportService from '../../../services/dataExport'
+
+export default {
+	name: 'data-export',
+	data() {
+		return {
+			dataExportService: DataExportService,
+			password: '',
+			errPasswordRequired: false,
+		}
+	},
+	created() {
+		this.dataExportService = new DataExportService()
+	},
+	methods: {
+		requestDataExport() {
+			if (this.password === '') {
+				this.errPasswordRequired = true
+				this.$refs.passwordInput.focus()
+				return
+			}
+
+			this.dataExportService.request(this.password)
+				.then(() => {
+					this.success({message: this.$t('user.export.success')})
+					this.password = ''
+				})
+				.catch(e => this.error(e))
+		},
+	},
+}
+</script>