Add todoist migrator to the frontend

src/components/migrator/migrate-service.vue

@@ -0,0 +1,39 @@
+<template>
+	<migration
+			:identifier="identifier"
+			:name="name"
+	/>
+</template>
+
+<script>
+	import Migration from './migration'
+	import router from '../../router'
+
+	export default {
+		name: 'migrateService',
+		components: {
+			Migration,
+		},
+		data() {
+			return {
+				name: '',
+				identifier: '',
+			}
+		},
+		created() {
+			switch (this.$route.params.service) {
+				case 'wunderlist':
+					this.name = 'Wunderlist'
+					this.identifier = 'wunderlist'
+					break
+				case 'todoist':
+					this.name = 'Todoist'
+					this.identifier = 'todoist'
+					break
+				default:
+					router.push({name: '404'})
+			}
+		},
+	}
+</script>
+

src/components/migrator/migrate.vue

@@ -3,7 +3,7 @@
 		<h1>Import your data from other services to Vikunja</h1>
 		<p>Click on the logo of one of the third-party services below to get started.</p>
 		<div class="migration-services-overview">
-			<router-link :to="{name: 'migrate.'+m}" v-for="m in availableMigrators" :key="m">
+			<router-link :to="{name: 'migrate', params: {service: m}}" v-for="m in availableMigrators" :key="m">
 				<img :src="`/images/migration/${m}.png`" :alt="m"/>
 				{{ m }}
 			</router-link>

src/components/migrator/migration.vue

@@ -1,14 +1,14 @@
 <template>
 	<div class="content">
-		<h1>Import your data from Wunderlist to Vikunja</h1>
-		<p>Vikunja will import all folders, lists, tasks, notes, reminders and files you have access to.</p>
+		<h1>Import your data from {{ name }} to Vikunja</h1>
+		<p>Vikunja will import all lists, tasks, notes, reminders and files you have access to.</p>
 		<template v-if="isMigrating === false && message === '' && lastMigrationDate === 0">
-			<p>To authorize Vikunja to access your Wunderlist Account, click the button below.</p>
+			<p>To authorize Vikunja to access your {{ name }} Account, click the button below.</p>
 			<a :href="authUrl" class="button is-primary" :class="{'is-loading': migrationService.loading}" :disabled="migrationService.loading">Get Started</a>
 		</template>
 		<div class="migration-in-progress-container" v-else-if="isMigrating === true && message === '' && lastMigrationDate === 0">
 			<div class="migration-in-progress">
-				<img src="/images/migration/wunderlist.png" alt="Wunderlist Logo"/>
+				<img :src="`/images/migration/${identifier}.png`" :alt="name"/>
 				<div class="progress-dots">
 					<span></span>
 					<span></span>
@@ -19,13 +19,13 @@
 					<span></span>
 					<span></span>
 				</div>
-				<img src="/images/logo.svg" alt="Vikunja Logo">
+				<img src="/images/logo.svg" alt="Vikunja">
 			</div>
 			<p>Importing in progress, hang tight...</p>
 		</div>
 		<div v-else-if="lastMigrationDate > 0">
 			<p>
-				It looks like you've already imported your stuff from wunderlist at {{ new Date(lastMigrationDate * 1000) }}.<br/>
+				It looks like you've already imported your stuff from {{ name }} at {{ new Date(lastMigrationDate * 1000) }}.<br/>
 				Importing again is possible, but might create duplicates.
 				Are you sure?
 			</p>
@@ -46,13 +46,12 @@
 </template>
 
 <script>
-	import WunderlistMigrationService from '../../services/migrator/wunderlist'
+	import AbstractMigrationService from "../../services/migrator/abstractMigrationService";
 
 	export default {
-		name: 'wunderlist',
+		name: 'migration',
 		data() {
 			return {
-				migrationService: WunderlistMigrationService,
 				authUrl: '',
 				isMigrating: false,
 				lastMigrationDate: 0,
@@ -60,8 +59,18 @@
 				wunderlistCode: '',
 			}
 		},
+		props: {
+			name: {
+				type: String,
+				required: true,
+			},
+			identifier: {
+				type: String,
+				required: true,
+			},
+		},
 		created() {
-			this.migrationService = new WunderlistMigrationService()
+			this.migrationService = new AbstractMigrationService(this.identifier)
 			this.getAuthUrl()
 			this.message = ''
 

src/router/index.js

@@ -27,7 +27,7 @@ import NewTeamComponent from '@/components/teams/NewTeam'
 import ListLabelsComponent from '@/components/labels/ListLabels'
 // Migration
 import MigrationComponent from '../components/migrator/migrate'
-import WunderlistMigrationComponent from '../components/migrator/wunderlist'
+import MigrateServiceComponent from '../components/migrator/migrate-service'
 // List Views
 import ShowListComponent from '../components/lists/ShowList'
 import Kanban from '../components/lists/views/Kanban'
@@ -195,9 +195,9 @@ export default new Router({
 			component: MigrationComponent,
 		},
 		{
-			path: '/migrate/wunderlist',
-			name: 'migrate.wunderlist',
-			component: WunderlistMigrationComponent,
+			path: '/migrate/:service',
+			name: 'migrate',
+			component: MigrateServiceComponent,
 		},
 		{
 			path: '/user/settings',

src/services/migrator/wunderlist.js

@@ -1,7 +0,0 @@
-import AbstractMigrationService from './abstractMigrationService'
-
-export default class WunderlistMigrationService extends AbstractMigrationService {
-	constructor() {
-		super('wunderlist')
-	}
-}

src/styles/components/migrator.scss

@@ -5,6 +5,7 @@
     display: inline-block;
     width: 100px;
     text-transform: capitalize;
+    margin-right: 1em;
 
     img {
       display: block;