User Data Export and import (#699)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: vikunja/frontend#699
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>
This commit is contained in:
konrad 2021-09-04 19:26:38 +00:00
parent 44bb7358b6
commit f4c552a79f
17 changed files with 347 additions and 54 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -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>

View File

@ -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)"

View File

@ -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>

View File

@ -0,0 +1,7 @@
export const downloadBlob = (url: string, filename: string) => {
const link = document.createElement('a')
link.href = url
link.setAttribute('download', filename)
link.click()
window.URL.revokeObjectURL(url)
}

38
src/helpers/migrator.ts Normal file
View File

@ -0,0 +1,38 @@
export interface Migrator {
name: string
identifier: string
isFileMigrator?: boolean
}
export const getMigratorFromSlug = (slug: string): Migrator => {
switch (slug) {
case 'wunderlist':
return {
name: 'Wunderlist',
identifier: 'wunderlist',
}
case 'todoist':
return {
name: 'Todoist',
identifier: 'todoist',
}
case 'trello':
return {
name: 'Trello',
identifier: 'trello',
}
case 'microsoft-todo':
return {
name: 'Microsoft Todo',
identifier: 'microsoft-todo',
}
case 'vikunja-file':
return {
name: 'Vikunja Export',
identifier: 'vikunja-file',
isFileMigrator: true,
}
default:
throw Error('Unknown migrator slug ' + slug)
}
}

View File

@ -111,6 +111,13 @@
"scheduledCancelText": "To cancel the deletion of your account, please enter your password below:",
"scheduledCancelConfirm": "Cancel the deletion of my account",
"scheduledCancelSuccess": "We will not delete your account."
},
"export": {
"title": "Export your Vikunja Data",
"description": "You can request a copy of all your Vikunja data. This include Namespaces, Lists, Tasks and everything associated to them. You can import this data in any Vikunja instance through the migration function.",
"descriptionPasswordRequired": "Please enter your password to proceed:",
"request": "Request a copy of my Vikunja Data",
"success": "You've successfully requested your Vikunja Data! We will send you an email once it's ready to download."
}
},
"list": {
@ -371,7 +378,9 @@
"inProgress": "Importing in progress…",
"alreadyMigrated1": "It looks like you've already imported your stuff from {name} at {date}.",
"alreadyMigrated2": "Importing again is possible, but might create duplicates. Are you sure?",
"confirm": "I am sure, please start migrating now!"
"confirm": "I am sure, please start migrating now!",
"importUpload": "To import data from {name} into Vikunja, click the button below to select a file.",
"upload": "Upload file"
},
"label": {
"title": "Labels",
@ -432,7 +441,8 @@
"saving": "Saving…",
"saved": "Saved!",
"default": "Default",
"close": "Close"
"close": "Close",
"download": "Download"
},
"input": {
"resetColor": "Reset Color",
@ -563,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",

View File

@ -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',

View File

@ -319,6 +319,17 @@ export default class AbstractService {
})
}
getBlobUrl(url, method = 'GET', data = {}) {
return this.http({
url: url,
method: method,
responseType: 'blob',
data: data,
}).then(response => {
return window.URL.createObjectURL(new Blob([response.data]))
})
}
/**
* Performs a get request to the url specified before.
* The difference between this and get() is this one is used to get a bunch of data (an array), not just a single object.
@ -487,6 +498,8 @@ export default class AbstractService {
* @returns {Q.Promise<unknown>}
*/
uploadFormData(url, formData) {
console.log(formData, formData._boundary)
const cancel = this.setLoading()
return this.http.put(
url,

View File

@ -1,6 +1,7 @@
import AbstractService from './abstractService'
import AttachmentModel from '../models/attachment'
import {formatISO} from 'date-fns'
import {downloadBlob} from '@/helpers/downloadBlob'
export default class AttachmentService extends AbstractService {
constructor() {
@ -33,23 +34,12 @@ export default class AttachmentService extends AbstractService {
}
getBlobUrl(model) {
return this.http({
url: '/tasks/' + model.taskId + '/attachments/' + model.id,
method: 'GET',
responseType: 'blob',
}).then(response => {
return window.URL.createObjectURL(new Blob([response.data]))
})
return AbstractService.prototype.getBlobUrl.call(this, '/tasks/' + model.taskId + '/attachments/' + model.id)
}
download(model) {
this.getBlobUrl(model).then(url => {
const link = document.createElement('a')
link.href = url
link.setAttribute('download', model.file.name)
link.click()
window.URL.revokeObjectURL(url)
})
this.getBlobUrl(model)
.then(url => downloadBlob(url, model.file.name))
}
/**

View File

@ -0,0 +1,13 @@
import AbstractService from './abstractService'
import {downloadBlob} from '../helpers/downloadBlob'
export default class DataExportService extends AbstractService {
request(password) {
return this.post('/user/export/request', {password: password})
}
download(password) {
return this.getBlobUrl('/user/export/download', 'POST', {password})
.then(url => downloadBlob(url, 'vikunja-export.zip'))
}
}

View File

@ -0,0 +1,31 @@
import AbstractService from '../abstractService'
// This service builds on top of the abstract service and basically just hides away method names.
// It enables migration services to be created with minimal overhead and even better method names.
export default class AbstractMigrationFileService extends AbstractService {
serviceUrlKey = ''
constructor(serviceUrlKey) {
super({
create: '/migration/' + serviceUrlKey + '/migrate',
})
this.serviceUrlKey = serviceUrlKey
}
getStatus() {
return this.getM('/migration/' + this.serviceUrlKey + '/status')
}
useCreateInterceptor() {
return false
}
migrate(file) {
console.log(file)
return this.uploadFile(
this.paths.create,
file,
'import',
)
}
}

View File

@ -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)
},
},
}

View File

@ -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'})
}
},
}

View File

@ -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>

View File

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