forked from vikunja/frontend
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:
parent
44bb7358b6
commit
f4c552a79f
BIN
public/images/migration/vikunja-file.png
Normal file
BIN
public/images/migration/vikunja-file.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
@ -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>
|
||||
|
@ -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)"
|
||||
|
71
src/components/user/settings/data-export.vue
Normal file
71
src/components/user/settings/data-export.vue
Normal 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>
|
7
src/helpers/downloadBlob.ts
Normal file
7
src/helpers/downloadBlob.ts
Normal 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
38
src/helpers/migrator.ts
Normal 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)
|
||||
}
|
||||
}
|
@ -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",
|
||||
|
@ -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',
|
||||
|
@ -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,
|
||||
|
@ -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))
|
||||
}
|
||||
|
||||
/**
|
||||
|
13
src/services/dataExport.js
Normal file
13
src/services/dataExport.js
Normal 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'))
|
||||
}
|
||||
}
|
31
src/services/migrator/abstractMigrationFile.js
Normal file
31
src/services/migrator/abstractMigrationFile.js
Normal 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',
|
||||
)
|
||||
}
|
||||
}
|
@ -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)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
@ -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'})
|
||||
}
|
||||
},
|
||||
}
|
||||
|
64
src/views/user/DataExportDownload.vue
Normal file
64
src/views/user/DataExportDownload.vue
Normal 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>
|
@ -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()
|
||||
|
Loading…
x
Reference in New Issue
Block a user