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

@@ -3,15 +3,20 @@
 		<h1>{{ $t('migrate.title') }}</h1>
 		<p>{{ $t('migrate.description') }}</p>
 		<div class="migration-services-overview">
-			<router-link :key="m" :to="{name: 'migrate.service', params: {service: m}}" v-for="m in availableMigrators">
-				<img :alt="m" :src="`/images/migration/${m}.png`"/>
-				{{ m }}
+			<router-link
+				:key="m.identifier"
+				:to="{name: 'migrate.service', params: {service: m.identifier}}"
+				v-for="m in availableMigrators">
+				<img :alt="m.name" :src="`/images/migration/${m.identifier}.png`"/>
+				{{ m.name }}
 			</router-link>
 		</div>
 	</div>
 </template>
 
 <script>
+import {getMigratorFromSlug} from '../../helpers/migrator'
+
 export default {
 	name: 'migrate.service',
 	mounted() {
@@ -19,7 +24,7 @@ export default {
 	},
 	computed: {
 		availableMigrators() {
-			return this.$store.state.config.availableMigrators
+			return this.$store.state.config.availableMigrators.map(getMigratorFromSlug)
 		},
 	},
 }

src/views/migrator/MigrateService.vue

@@ -2,12 +2,13 @@
 	<migration
 		:identifier="identifier"
 		:name="name"
+		:is-file-migrator="isFileMigrator"
 	/>
 </template>
 
 <script>
 import Migration from '../../components/migrator/migration'
-import router from '../../router'
+import {getMigratorFromSlug} from '../../helpers/migrator'
 
 export default {
 	name: 'migrateService',
@@ -18,31 +19,20 @@ export default {
 		return {
 			name: '',
 			identifier: '',
+			isFileMigrator: false,
 		}
 	},
 	mounted() {
 		this.setTitle(this.$t('migrate.titleService', {name: this.name}))
 	},
 	created() {
-		switch (this.$route.params.service) {
-			case 'wunderlist':
-				this.name = 'Wunderlist'
-				this.identifier = 'wunderlist'
-				break
-			case 'todoist':
-				this.name = 'Todoist'
-				this.identifier = 'todoist'
-				break
-			case 'trello':
-				this.name = 'Trello'
-				this.identifier = 'trello'
-				break
-			case 'microsoft-todo':
-				this.name = 'Microsoft Todo'
-				this.identifier = 'microsoft-todo'
-				break
-			default:
-				router.push({name: '404'})
+		try {
+			const {name, identifier, isFileMigrator} = getMigratorFromSlug(this.$route.params.service)
+			this.name = name
+			this.identifier = identifier
+			this.isFileMigrator = isFileMigrator
+		} catch (e) {
+			this.$router.push({name: '404'})
 		}
 	},
 }

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()