From a8a7f70a3cc52ff9bbb3c854e9a89ac84aa5a7b8 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 5 Sep 2020 22:35:52 +0200
Subject: [PATCH] Cleanup code & make sure it has a common code style

---
 src/App.vue                                   | 541 ++++++-------
 src/ServiceWorker/sw.js                       |  68 +-
 src/components/input/colorPicker.vue          | 112 +--
 src/components/input/editor.vue               | 734 +++++++++---------
 src/components/input/fancycheckbox.vue        |  85 +-
 .../list/partials/background-settings.vue     | 242 +++---
 src/components/list/partials/filters.vue      | 232 +++---
 src/components/migrator/migration.vue         | 144 ++--
 src/components/misc/error.vue                 |   6 +-
 src/components/misc/keyboard-shortcuts.vue    |  18 +-
 src/components/misc/legal.vue                 |  20 +-
 src/components/misc/loading.vue               |  20 +-
 src/components/misc/notification.vue          |  46 +-
 src/components/misc/user.vue                  |  86 +-
 src/components/modal/modal.vue                |  26 +-
 src/components/namespace/namespace-search.vue | 116 +--
 src/components/sharing/linkSharing.vue        | 233 +++---
 src/components/sharing/userTeam.vue           | 469 +++++------
 src/components/tasks/edit-task.vue            | 300 +++----
 src/components/tasks/gantt-component.vue      | 575 +++++++-------
 .../tasks/mixins/attachmentUpload.js          |   2 +-
 src/components/tasks/mixins/taskList.js       |   6 +-
 src/components/tasks/partials/attachments.vue | 257 +++---
 src/components/tasks/partials/comments.vue    | 304 ++++----
 .../tasks/partials/date-table-cell.vue        |  16 +-
 src/components/tasks/partials/defer-task.vue  | 180 ++---
 .../tasks/partials/editAssignees.vue          | 228 +++---
 src/components/tasks/partials/editLabels.vue  | 273 +++----
 src/components/tasks/partials/labels.vue      |  28 +-
 src/components/tasks/partials/listSearch.vue  | 137 ++--
 .../tasks/partials/percentDoneSelect.vue      |  58 +-
 .../tasks/partials/priorityLabel.vue          |  66 +-
 .../tasks/partials/prioritySelect.vue         |  62 +-
 .../tasks/partials/relatedTasks.vue           | 348 ++++-----
 src/components/tasks/partials/reminders.vue   | 162 ++--
 src/components/tasks/partials/repeatAfter.vue | 136 ++--
 .../tasks/partials/singleTaskInList.vue       | 233 +++---
 src/components/tasks/partials/sort.vue        |  26 +-
 src/components/user/avatar-settings.vue       | 190 ++---
 src/helpers/applyDrag.js                      |   3 +-
 src/helpers/case.js                           |   8 +-
 src/helpers/filterObject.js                   |   1 -
 src/helpers/saveListView.js                   |   7 +-
 src/helpers/setTitle.js                       |   1 -
 src/http-common/index.js                      |   2 +-
 src/main.js                                   | 157 ++--
 src/message/index.js                          |   4 +-
 src/models/abstractModel.js                   |   4 +-
 src/models/file.js                            |   2 +-
 src/models/label.js                           |   2 +-
 src/models/labelTask.js                       |   2 +-
 src/models/linkShare.js                       |  40 +-
 src/models/list.js                            |   4 +-
 src/models/passwordReset.js                   |   6 +-
 src/models/taskAssignee.js                    |  22 +-
 src/models/taskRelation.js                    |   2 +-
 src/models/team.js                            |   2 +-
 src/models/teamList.js                        |   2 +-
 src/models/teamMember.js                      |   2 +-
 src/models/teamNamespace.js                   |   2 +-
 src/models/teamShareBase.js                   |   4 +-
 src/models/userList.js                        |   2 +-
 src/models/userNamespace.js                   |   4 +-
 src/models/userShareBase.js                   |   2 +-
 src/registerServiceWorker.js                  |  94 +--
 src/router/index.js                           |  72 +-
 src/services/abstractService.js               |   6 +-
 src/services/attachment.js                    |  16 +-
 src/services/backgroundUpload.js              |   2 +-
 src/services/label.js                         |   4 +-
 src/services/labelTask.js                     |   6 +-
 src/services/linkShare.js                     |  32 +-
 src/services/listUsers.js                     |   2 +-
 .../migrator/abstractMigrationService.js      |   6 +-
 src/services/namespace.js                     |   2 +-
 src/services/passwordUpdateService.js         |   2 +-
 src/services/task.js                          |   2 +-
 src/services/team.js                          |   2 +-
 src/services/totp.js                          |   2 +-
 src/services/user.js                          |   2 +-
 src/store/index.js                            |   9 +-
 src/store/modules/auth.js                     |  18 +-
 src/store/modules/config.js                   |   4 +-
 src/store/modules/kanban.js                   |   4 +-
 src/store/modules/lists.js                    |   2 +-
 src/store/modules/namespaces.js               |   2 +-
 src/styles/components/attachments.scss        |   4 +-
 src/styles/components/base/card.scss          |   2 +-
 src/styles/components/base/multiselect.scss   |  26 +
 src/styles/components/base/scrollbars.scss    |   3 +-
 src/styles/components/fullpage.scss           |  12 +-
 src/styles/components/gantt.scss              |   2 +-
 src/styles/components/labels.scss             |   6 +-
 src/styles/components/migrator.scss           |  41 +-
 src/styles/components/teams.scss              |  10 +-
 src/styles/theme/fonts.scss                   | 176 ++---
 src/styles/theme/form.scss                    |  14 +-
 src/styles/theme/link-share.scss              |   4 +-
 src/styles/theme/loading.scss                 |   4 +-
 src/styles/theme/notification.scss            |   4 +-
 src/styles/theme/update-notification.scss     |   2 +-
 src/styles/utilities/animations.scss          |   1 -
 src/styles/utilities/transitions.scss         |   2 +
 src/version.json                              |   2 +-
 src/views/404.vue                             |  12 +-
 src/views/Home.vue                            |  50 +-
 src/views/labels/ListLabels.vue               | 264 +++----
 src/views/list/EditList.vue                   | 328 ++++----
 src/views/list/NewList.vue                    | 109 +--
 src/views/list/ShowList.vue                   | 223 +++---
 src/views/list/views/Gantt.vue                |  84 +-
 src/views/list/views/Kanban.vue               | 704 ++++++++---------
 src/views/list/views/List.vue                 | 446 +++++------
 src/views/list/views/Table.vue                | 268 ++++---
 src/views/migrator/Migrate.vue                |  24 +-
 src/views/migrator/MigrateService.vue         |  66 +-
 src/views/namespaces/EditNamespace.vue        | 254 +++---
 src/views/namespaces/ListNamespaces.vue       | 106 +--
 src/views/namespaces/NewNamespace.vue         | 107 +--
 src/views/sharing/LinkSharingAuth.vue         |  54 +-
 src/views/tasks/ShowTasks.vue                 | 310 ++++----
 src/views/tasks/ShowTasksInRange.vue          |  68 +-
 src/views/tasks/TaskDetailView.vue            | 722 ++++++++---------
 src/views/tasks/TaskDetailViewModal.vue       |  26 +-
 src/views/teams/EditTeam.vue                  | 426 +++++-----
 src/views/teams/ListTeams.vue                 |  62 +-
 src/views/teams/NewTeam.vue                   | 102 +--
 src/views/user/Login.vue                      | 206 ++---
 src/views/user/PasswordReset.vue              | 121 +--
 src/views/user/Register.vue                   | 153 ++--
 src/views/user/RequestPasswordReset.vue       |  91 ++-
 src/views/user/Settings.vue                   | 352 ++++-----
 132 files changed, 6821 insertions(+), 6595 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index abe13503f..4104cd4d9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,54 +4,54 @@
 			<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
 			<div class="offline" style="height: 0;width: 0;"></div>
 			<nav
-					class="navbar main-theme is-fixed-top"
-					:class="{'has-background': background}"
-					role="navigation"
-					aria-label="main navigation"
-					v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
+				:class="{'has-background': background}"
+				aria-label="main navigation"
+				class="navbar main-theme is-fixed-top"
+				role="navigation"
+				v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
 				<div class="navbar-brand">
 					<router-link :to="{name: 'home'}" class="navbar-item logo">
-						<img src="/images/logo-full-pride.svg" alt="Vikunja" v-if="(new Date()).getMonth() === 5"/>
-						<img src="/images/logo-full.svg" alt="Vikunja" v-else/>
+						<img alt="Vikunja" src="/images/logo-full-pride.svg" v-if="(new Date()).getMonth() === 5"/>
+						<img alt="Vikunja" src="/images/logo-full.svg" v-else/>
 					</router-link>
 					<a
-							@click="menuActive = true"
-							class="menu-show-button"
-							:class="{'is-visible': !menuActive}"
+						:class="{'is-visible': !menuActive}"
+						@click="menuActive = true"
+						class="menu-show-button"
 					>
 						<icon icon="bars"></icon>
 					</a>
 				</div>
 				<a
-						@click="menuActive = true"
-						class="menu-show-button"
+					@click="menuActive = true"
+					class="menu-show-button"
 				>
 					<icon icon="bars"></icon>
 				</a>
 				<div class="list-title" v-if="currentList.id">
 					<h1
-							class="title"
-							:style="{ 'opacity': currentList.title === '' ? '0': '1' }">
-						{{ currentList.title === '' ? 'Loading...': currentList.title}}
+						:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
+						class="title">
+						{{ currentList.title === '' ? 'Loading...' : currentList.title }}
 					</h1>
 					<router-link
-							:to="{ name: 'list.edit', params: { id: currentList.id } }"
-							class="icon"
-							v-if="canWriteCurrentList">
+						:to="{ name: 'list.edit', params: { id: currentList.id } }"
+						class="icon"
+						v-if="canWriteCurrentList">
 						<icon icon="cog" size="2x"/>
 					</router-link>
 				</div>
 				<div class="navbar-end">
-					<div v-if="updateAvailable" class="update-notification">
+					<div class="update-notification" v-if="updateAvailable">
 						<p>There is an update for Vikunja available!</p>
 						<a @click="refreshApp()" class="button is-primary noshadow">Update Now</a>
 					</div>
 					<div class="user">
-						<img :src="userAvatar" class="avatar" alt=""/>
+						<img :src="userAvatar" alt="" class="avatar"/>
 						<div class="dropdown is-right is-active">
 							<div class="dropdown-trigger">
-								<button class="button noshadow" @click.stop="userMenuActive = !userMenuActive">
-									<span class="username">{{userInfo.username}}</span>
+								<button @click.stop="userMenuActive = !userMenuActive" class="button noshadow">
+									<span class="username">{{ userInfo.username }}</span>
 									<span class="icon is-small">
 									<icon icon="chevron-down"/>
 								</span>
@@ -63,9 +63,16 @@
 										<router-link :to="{name: 'user.settings'}" class="dropdown-item">
 											Settings
 										</router-link>
-										<a :href="imprintUrl" v-if="imprintUrl" class="dropdown-item" target="_blank">Imprint</a>
-										<a :href="privacyPolicyUrl" v-if="privacyPolicyUrl" class="dropdown-item" target="_blank">Privacy policy</a>
-										<a @click="keyboardShortcutsActive = true" class="dropdown-item">Keyboard Shortcuts</a>
+										<a :href="imprintUrl" class="dropdown-item" target="_blank" v-if="imprintUrl">Imprint</a>
+										<a
+											:href="privacyPolicyUrl"
+											class="dropdown-item"
+											target="_blank"
+											v-if="privacyPolicyUrl">
+											Privacy policy
+										</a>
+										<a @click="keyboardShortcutsActive = true" class="dropdown-item">Keyboard
+											Shortcuts</a>
 										<a @click="logout()" class="dropdown-item">
 											Logout
 										</a>
@@ -81,14 +88,14 @@
 					<icon icon="times"></icon>
 				</a>
 				<div
-						class="app-container"
-						:class="{'has-background': background}"
-						:style="{'background-image': `url(${background})`}"
+					:class="{'has-background': background}"
+					:style="{'background-image': `url(${background})`}"
+					class="app-container"
 				>
-					<div class="namespace-container" :class="{'is-active': menuActive}">
+					<div :class="{'is-active': menuActive}" class="namespace-container">
 						<div class="menu top-menu">
 							<router-link :to="{name: 'home'}" class="logo">
-								<img src="/images/logo-full.svg" alt="Vikunja"/>
+								<img alt="Vikunja" src="/images/logo-full.svg"/>
 							</router-link>
 							<ul class="menu-list">
 								<li>
@@ -142,115 +149,119 @@
 							</ul>
 						</div>
 
-						<a @click="menuActive = false" class="collapse-menu-button" v-shortkey="['ctrl', 'e']" @shortkey="() => menuActive = !menuActive">
+						<a
+							@click="menuActive = false"
+							@shortkey="() => menuActive = !menuActive"
+							class="collapse-menu-button"
+							v-shortkey="['ctrl', 'e']">
 							Collapse Menu
 						</a>
 
 						<aside class="menu namespaces-lists">
-							<div class="spinner" :class="{ 'is-loading': namespaceService.loading}"></div>
+							<div :class="{ 'is-loading': namespaceService.loading}" class="spinner"></div>
 							<template v-for="n in namespaces">
 								<div :key="n.id">
 									<router-link
-											v-tooltip.right="'Settings'"
-											:to="{name: 'namespace.edit', params: {id: n.id} }"
-											class="nsettings"
-											v-if="n.id > 0">
+										:to="{name: 'namespace.edit', params: {id: n.id} }"
+										class="nsettings"
+										v-if="n.id > 0"
+										v-tooltip.right="'Settings'">
 										<span class="icon">
 											<icon icon="cog"/>
 										</span>
 									</router-link>
 									<router-link
-											v-tooltip="'Add a new list in the ' + n.title + ' namespace'"
-											:to="{ name: 'list.create', params: { id: n.id} }"
-											class="nsettings"
-											:key="n.id + 'list.create'"
-											v-if="n.id > 0">
+										:key="n.id + 'list.create'"
+										:to="{ name: 'list.create', params: { id: n.id} }"
+										class="nsettings"
+										v-if="n.id > 0"
+										v-tooltip="'Add a new list in the ' + n.title + ' namespace'">
 										<span class="icon">
 											<icon icon="plus"/>
 										</span>
 									</router-link>
 									<label
-											class="menu-label"
-											v-tooltip="n.title + ' (' + n.lists.length + ')'"
-											:for="n.id + 'checker'">
+										:for="n.id + 'checker'"
+										class="menu-label"
+										v-tooltip="n.title + ' (' + n.lists.length + ')'">
 										<span class="name">
 											<span
-													class="color-bubble"
-													v-if="n.hexColor !== ''"
-													:style="{ backgroundColor: n.hexColor }">
+												:style="{ backgroundColor: n.hexColor }"
+												class="color-bubble"
+												v-if="n.hexColor !== ''">
 											</span>
-											{{n.title}} ({{n.lists.length}})
+											{{ n.title }} ({{ n.lists.length }})
 										</span>
 									</label>
 								</div>
 								<input
-										:key="n.id + 'checker'"
-										type="checkbox"
-										checked="checked"
-										:id="n.id + 'checker'"
-										class="checkinput"/>
-								<div class="more-container" :key="n.id + 'child'">
+									:id="n.id + 'checker'"
+									:key="n.id + 'checker'"
+									checked="checked"
+									class="checkinput"
+									type="checkbox"/>
+								<div :key="n.id + 'child'" class="more-container">
 									<ul class="menu-list can-be-hidden">
 										<template v-for="l in n.lists">
 											<!-- This is a bit ugly but vue wouldn't want to let me filter this - probably because the lists
 													are nested inside of the namespaces makes it a lot harder.-->
-											<li v-if="!l.isArchived" :key="l.id">
+											<li :key="l.id" v-if="!l.isArchived">
 												<router-link
-														:to="{ name: 'list.index', params: { listId: l.id} }"
-														:class="{'router-link-exact-active': currentList.id === l.id}">
+													:class="{'router-link-exact-active': currentList.id === l.id}"
+													:to="{ name: 'list.index', params: { listId: l.id} }">
 													<span class="name">
 														<span
-																class="color-bubble"
-																v-if="l.hexColor !== ''"
-																:style="{ backgroundColor: l.hexColor }">
+															:style="{ backgroundColor: l.hexColor }"
+															class="color-bubble"
+															v-if="l.hexColor !== ''">
 														</span>
-														{{l.title}}
+														{{ l.title }}
 													</span>
 												</router-link>
 											</li>
 										</template>
 									</ul>
-									<label class="hidden-hint" :for="n.id + 'checker'">
-										Show hidden lists ({{n.lists.length}})...
+									<label :for="n.id + 'checker'" class="hidden-hint">
+										Show hidden lists ({{ n.lists.length }})...
 									</label>
 								</div>
 							</template>
 						</aside>
-						<a class="menu-bottom-link" target="_blank" href="https://vikunja.io">Powered by Vikunja</a>
+						<a class="menu-bottom-link" href="https://vikunja.io" target="_blank">Powered by Vikunja</a>
 					</div>
 					<div
-							class="app-content"
-							:class="[
+						:class="[
 								{
 									'fullpage-overlay': fullpage,
 									'is-menu-enabled': menuActive,
 								},
 								$route.name,
 							]"
+						class="app-content"
 					>
-						<a class="mobile-overlay" v-if="menuActive" @click="menuActive = false"></a>
+						<a @click="menuActive = false" class="mobile-overlay" v-if="menuActive"></a>
 						<transition name="fade">
 							<router-view/>
 						</transition>
-						<a class="keyboard-shortcuts-button" @click="keyboardShortcutsActive = true">
+						<a @click="keyboardShortcutsActive = true" class="keyboard-shortcuts-button">
 							<icon icon="keyboard"/>
 						</a>
 					</div>
 				</div>
 			</div>
 			<div
-					v-else-if="userAuthenticated && (userInfo && userInfo.type === authTypes.LINK_SHARE)"
-					class="link-share-container"
-					:class="{'has-background': background}"
-					:style="{'background-image': `url(${background})`}"
+				:class="{'has-background': background}"
+				:style="{'background-image': `url(${background})`}"
+				class="link-share-container"
+				v-else-if="userAuthenticated && (userInfo && userInfo.type === authTypes.LINK_SHARE)"
 			>
 				<div class="container has-text-centered link-share-view">
 					<div class="column is-10 is-offset-1">
-						<img src="/images/logo-full.svg" alt="Vikunja" class="logo"/>
+						<img alt="Vikunja" class="logo" src="/images/logo-full.svg"/>
 						<h1
-								class="title"
-								:style="{ 'opacity': currentList.title === '' ? '0': '1' }">
-							{{ currentList.title === '' ? 'Loading...': currentList.title}}
+							:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
+							class="title">
+							{{ currentList.title === '' ? 'Loading...' : currentList.title }}
 						</h1>
 						<div class="box has-text-left view">
 							<div class="logout">
@@ -268,7 +279,7 @@
 			</div>
 			<div v-else>
 				<div class="noauth-container">
-					<img src="/images/logo-full.svg" alt="Vikunja"/>
+					<img alt="Vikunja" src="/images/logo-full.svg"/>
 					<div class="message is-info" v-if="motd !== ''">
 						<div class="message-header">
 							<p>Info</p>
@@ -290,213 +301,213 @@
 		</div>
 
 		<transition name="fade">
-			<keyboard-shortcuts v-if="keyboardShortcutsActive" @close="keyboardShortcutsActive = false"/>
+			<keyboard-shortcuts @close="keyboardShortcutsActive = false" v-if="keyboardShortcutsActive"/>
 		</transition>
 	</div>
 </template>
 
 <script>
-	import router from './router'
-	import {mapState} from 'vuex'
+import router from './router'
+import {mapState} from 'vuex'
 
-	import NamespaceService from './services/namespace'
-	import authTypes from './models/authTypes'
-	import Rights from './models/rights.json'
+import NamespaceService from './services/namespace'
+import authTypes from './models/authTypes'
+import Rights from './models/rights.json'
 
-	import swEvents from './ServiceWorker/events'
-	import Notification from './components/misc/notification'
-	import {CURRENT_LIST, IS_FULLPAGE, ONLINE} from './store/mutation-types'
-	import KeyboardShortcuts from './components/misc/keyboard-shortcuts'
+import swEvents from './ServiceWorker/events'
+import Notification from './components/misc/notification'
+import {CURRENT_LIST, IS_FULLPAGE, ONLINE} from './store/mutation-types'
+import KeyboardShortcuts from './components/misc/keyboard-shortcuts'
 
-	export default {
-		name: 'app',
-		components: {
-			KeyboardShortcuts,
-			Notification,
-		},
-		data() {
-			return {
-				namespaceService: NamespaceService,
-				menuActive: true,
-				currentDate: new Date(),
-				userMenuActive: false,
-				authTypes: authTypes,
-				keyboardShortcutsActive: false,
+export default {
+	name: 'app',
+	components: {
+		KeyboardShortcuts,
+		Notification,
+	},
+	data() {
+		return {
+			namespaceService: NamespaceService,
+			menuActive: true,
+			currentDate: new Date(),
+			userMenuActive: false,
+			authTypes: authTypes,
+			keyboardShortcutsActive: false,
 
-				// Service Worker stuff
-				updateAvailable: false,
-				registration: null,
-				refreshing: false,
+			// Service Worker stuff
+			updateAvailable: false,
+			registration: null,
+			refreshing: false,
+		}
+	},
+	beforeMount() {
+		// Check if the user is offline, show a message then
+		this.$store.commit(ONLINE, navigator.onLine)
+		window.addEventListener('online', () => this.$store.commit(ONLINE, navigator.onLine))
+		window.addEventListener('offline', () => this.$store.commit(ONLINE, navigator.onLine))
+
+		// Password reset
+		if (this.$route.query.userPasswordReset !== undefined) {
+			localStorage.removeItem('passwordResetToken') // Delete an eventually preexisting old token
+			localStorage.setItem('passwordResetToken', this.$route.query.userPasswordReset)
+			router.push({name: 'user.password-reset.reset'})
+		}
+		// Email verification
+		if (this.$route.query.userEmailConfirm !== undefined) {
+			localStorage.removeItem('emailConfirmToken') // Delete an eventually preexisting old token
+			localStorage.setItem('emailConfirmToken', this.$route.query.userEmailConfirm)
+			router.push({name: 'user.login'})
+		}
+	},
+	beforeCreate() {
+		this.$store.dispatch('config/update')
+		this.$store.dispatch('auth/checkAuth')
+			.then(() => {
+				// Check if the user is already logged in, if so, redirect them to the homepage
+				if (
+					!this.userAuthenticated &&
+					this.$route.name !== 'user.login' &&
+					this.$route.name !== 'user.password-reset.request' &&
+					this.$route.name !== 'user.password-reset.reset' &&
+					this.$route.name !== 'user.register' &&
+					this.$route.name !== 'link-share.auth'
+				) {
+					router.push({name: 'user.login'})
+				}
+
+				if (this.userAuthenticated && this.userInfo.type === authTypes.USER && (this.$route.params.name === 'home' || this.namespaces.length === 0)) {
+					this.loadNamespaces()
+				}
+			})
+	},
+	created() {
+
+		// Service worker communication
+		document.addEventListener(swEvents.SW_UPDATED, this.showRefreshUI, {once: true})
+
+		if (navigator && navigator.serviceWorker) {
+			navigator.serviceWorker.addEventListener(
+				'controllerchange', () => {
+					if (this.refreshing) return
+					this.refreshing = true
+					window.location.reload()
+				},
+			)
+		}
+
+		// Hide the menu by default on mobile
+		if (window.innerWidth < 770) {
+			this.menuActive = false
+		}
+
+		// Try renewing the token every time vikunja is loaded initially
+		// (When opening the browser the focus event is not fired)
+		this.$store.dispatch('auth/renewToken')
+
+		// Check if the token is still valid if the window gets focus again to maybe renew it
+		window.addEventListener('focus', () => {
+
+			if (!this.userAuthenticated) {
+				return
 			}
-		},
-		beforeMount() {
-			// Check if the user is offline, show a message then
-			this.$store.commit(ONLINE, navigator.onLine)
-			window.addEventListener('online', () => this.$store.commit(ONLINE, navigator.onLine));
-			window.addEventListener('offline', () => this.$store.commit(ONLINE, navigator.onLine));
 
-			// Password reset
-			if (this.$route.query.userPasswordReset !== undefined) {
-				localStorage.removeItem('passwordResetToken') // Delete an eventually preexisting old token
-				localStorage.setItem('passwordResetToken', this.$route.query.userPasswordReset)
-				router.push({name: 'user.password-reset.reset'})
-			}
-			// Email verification
-			if (this.$route.query.userEmailConfirm !== undefined) {
-				localStorage.removeItem('emailConfirmToken') // Delete an eventually preexisting old token
-				localStorage.setItem('emailConfirmToken', this.$route.query.userEmailConfirm)
+			const expiresIn = this.userInfo.exp - +new Date() / 1000
+
+			// If the token expiry is negative, it is already expired and we have no choice but to redirect
+			// the user to the login page
+			if (expiresIn < 0) {
+				this.$store.dispatch('auth/checkAuth')
 				router.push({name: 'user.login'})
-			}
-		},
-		beforeCreate() {
-			this.$store.dispatch('config/update')
-			this.$store.dispatch('auth/checkAuth')
-				.then(() => {
-					// Check if the user is already logged in, if so, redirect them to the homepage
-					if (
-						!this.userAuthenticated &&
-						this.$route.name !== 'user.login' &&
-						this.$route.name !== 'user.password-reset.request' &&
-						this.$route.name !== 'user.password-reset.reset' &&
-						this.$route.name !== 'user.register' &&
-						this.$route.name !== 'link-share.auth'
-					) {
-						router.push({name: 'user.login'})
-					}
-
-					if (this.userAuthenticated && this.userInfo.type === authTypes.USER && (this.$route.params.name === 'home' || this.namespaces.length === 0)) {
-						this.loadNamespaces()
-					}
-				})
-		},
-		created() {
-
-			// Service worker communication
-			document.addEventListener(swEvents.SW_UPDATED, this.showRefreshUI, {once: true})
-
-			if (navigator && navigator.serviceWorker) {
-				navigator.serviceWorker.addEventListener(
-					'controllerchange', () => {
-						if (this.refreshing) return;
-						this.refreshing = true;
-						window.location.reload();
-					}
-				)
+				return
 			}
 
-			// Hide the menu by default on mobile
+			// Check if the token is valid for less than 60 hours and renew if thats the case
+			if (expiresIn < 60 * 3600) {
+				this.$store.dispatch('auth/renewToken')
+				console.log('renewed token')
+			}
+		})
+
+		// This will hide the menu once clicked outside of it
+		this.$nextTick(() => document.addEventListener('click', () => this.userMenuActive = false))
+	},
+	watch: {
+		// call the method again if the route changes
+		'$route': 'doStuffAfterRoute',
+	},
+	computed: mapState({
+		userInfo: state => state.auth.info,
+		userAvatar: state => state.auth.avatarUrl,
+		userAuthenticated: state => state.auth.authenticated,
+		motd: state => state.config.motd,
+		online: ONLINE,
+		fullpage: IS_FULLPAGE,
+		namespaces(state) {
+			return state.namespaces.namespaces.filter(n => !n.isArchived)
+		},
+		currentList: CURRENT_LIST,
+		background: 'background',
+		imprintUrl: state => state.config.legal.imprintUrl,
+		privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
+		canWriteCurrentList: state => state.currentList.maxRight > Rights.READ,
+	}),
+	methods: {
+		logout() {
+			this.$store.dispatch('auth/logout')
+			router.push({name: 'user.login'})
+		},
+		loadNamespaces() {
+			this.$store.dispatch('namespaces/loadNamespaces')
+		},
+		loadNamespacesIfNeeded(e) {
+			if (this.userAuthenticated && (this.userInfo && this.userInfo.type === authTypes.USER) && (e.name === 'home' || this.namespaces.length === 0)) {
+				this.loadNamespaces()
+			}
+		},
+		doStuffAfterRoute(e) {
+			// this.setTitle('') // Reset the title if the page component does not set one itself
+
+			if (this.$store.state[IS_FULLPAGE]) {
+				this.$store.commit(IS_FULLPAGE, false)
+			}
+
+			this.loadNamespacesIfNeeded(e)
+			this.userMenuActive = false
+
+			// If the menu is active on desktop, don't hide it because that would confuse the user
 			if (window.innerWidth < 770) {
 				this.menuActive = false
 			}
 
-			// Try renewing the token every time vikunja is loaded initially
-			// (When opening the browser the focus event is not fired)
-			this.$store.dispatch('auth/renewToken')
-
-			// Check if the token is still valid if the window gets focus again to maybe renew it
-			window.addEventListener('focus', () => {
-
-				if (!this.userAuthenticated) {
-					return
-				}
-
-				const expiresIn = this.userInfo.exp - +new Date() / 1000
-
-				// If the token expiry is negative, it is already expired and we have no choice but to redirect
-				// the user to the login page
-				if (expiresIn < 0) {
-					this.$store.dispatch('auth/checkAuth')
-					router.push({name: 'user.login'})
-					return
-				}
-
-				// Check if the token is valid for less than 60 hours and renew if thats the case
-				if (expiresIn < 60 * 3600) {
-					this.$store.dispatch('auth/renewToken')
-					console.log('renewed token')
-				}
-			})
-
-			// This will hide the menu once clicked outside of it
-			this.$nextTick(() => document.addEventListener('click', () => this.userMenuActive = false))
+			// Reset the current list highlight in menu if the current list is not list related.
+			if (
+				this.$route.name === 'home' ||
+				this.$route.name === 'namespace.edit' ||
+				this.$route.name === 'teams.index' ||
+				this.$route.name === 'teams.edit' ||
+				this.$route.name === 'tasks.range' ||
+				this.$route.name === 'labels.index' ||
+				this.$route.name === 'migrate.start' ||
+				this.$route.name === 'migrate.wunderlist' ||
+				this.$route.name === 'user.settings' ||
+				this.$route.name === 'namespaces.index'
+			) {
+				this.$store.commit(CURRENT_LIST, {})
+			}
 		},
-		watch: {
-			// call the method again if the route changes
-			'$route': 'doStuffAfterRoute',
+		showRefreshUI(e) {
+			console.log('recieved refresh event', e)
+			this.registration = e.detail
+			this.updateAvailable = true
 		},
-		computed: mapState({
-			userInfo: state => state.auth.info,
-			userAvatar: state => state.auth.avatarUrl,
-			userAuthenticated: state => state.auth.authenticated,
-			motd: state => state.config.motd,
-			online: ONLINE,
-			fullpage: IS_FULLPAGE,
-			namespaces(state) {
-				return state.namespaces.namespaces.filter(n => !n.isArchived)
-			},
-			currentList: CURRENT_LIST,
-			background: 'background',
-			imprintUrl: state => state.config.legal.imprintUrl,
-			privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
-			canWriteCurrentList: state => state.currentList.maxRight > Rights.READ,
-		}),
-		methods: {
-			logout() {
-				this.$store.dispatch('auth/logout')
-				router.push({name: 'user.login'})
-			},
-			loadNamespaces() {
-				this.$store.dispatch('namespaces/loadNamespaces')
-			},
-			loadNamespacesIfNeeded(e) {
-				if (this.userAuthenticated && (this.userInfo && this.userInfo.type === authTypes.USER) && (e.name === 'home' || this.namespaces.length === 0)) {
-					this.loadNamespaces()
-				}
-			},
-			doStuffAfterRoute(e) {
-				// this.setTitle('') // Reset the title if the page component does not set one itself
-
-				if (this.$store.state[IS_FULLPAGE]) {
-					this.$store.commit(IS_FULLPAGE, false)
-				}
-
-				this.loadNamespacesIfNeeded(e)
-				this.userMenuActive = false
-
-				// If the menu is active on desktop, don't hide it because that would confuse the user
-				if (window.innerWidth < 770) {
-					this.menuActive = false
-				}
-
-				// Reset the current list highlight in menu if the current list is not list related.
-				if (
-					this.$route.name === 'home' ||
-					this.$route.name === 'namespace.edit' ||
-					this.$route.name === 'teams.index' ||
-					this.$route.name === 'teams.edit' ||
-					this.$route.name === 'tasks.range' ||
-					this.$route.name === 'labels.index' ||
-					this.$route.name === 'migrate.start' ||
-					this.$route.name === 'migrate.wunderlist' ||
-					this.$route.name === 'user.settings' ||
-					this.$route.name === 'namespaces.index'
-				) {
-					this.$store.commit(CURRENT_LIST, {})
-				}
-			},
-			showRefreshUI(e) {
-				console.log('recieved refresh event', e)
-				this.registration = e.detail;
-				this.updateAvailable = true;
-			},
-			refreshApp() {
-				this.updateExists = false;
-				if (!this.registration || !this.registration.waiting) {
-					return;
-				}
-				// Notify the service worker to actually do the update
-				this.registration.waiting.postMessage('skipWaiting');
-			},
+		refreshApp() {
+			this.updateExists = false
+			if (!this.registration || !this.registration.waiting) {
+				return
+			}
+			// Notify the service worker to actually do the update
+			this.registration.waiting.postMessage('skipWaiting')
 		},
-	}
+	},
+}
 </script>
diff --git a/src/ServiceWorker/sw.js b/src/ServiceWorker/sw.js
index ce8b3dd95..3917ec1ef 100644
--- a/src/ServiceWorker/sw.js
+++ b/src/ServiceWorker/sw.js
@@ -3,71 +3,71 @@
 
 // Cache assets
 workbox.routing.registerRoute(
-    // This regexp matches all files in precache-manifest
-    new RegExp('.+\\.(css|json|js|eot|svg|ttf|woff|woff2|png|html|txt)$'),
-    new workbox.strategies.StaleWhileRevalidate()
-);
+	// This regexp matches all files in precache-manifest
+	new RegExp('.+\\.(css|json|js|eot|svg|ttf|woff|woff2|png|html|txt)$'),
+	new workbox.strategies.StaleWhileRevalidate(),
+)
 
 // Always send api reqeusts through the network
 workbox.routing.registerRoute(
 	new RegExp('api\\/v1\\/.*$'),
-	new workbox.strategies.NetworkOnly()
-);
+	new workbox.strategies.NetworkOnly(),
+)
 
 // This code listens for the user's confirmation to update the app.
 self.addEventListener('message', (e) => {
 	if (!e.data) {
-		return;
+		return
 	}
 
 	switch (e.data) {
 		case 'skipWaiting':
-			self.skipWaiting();
-			break;
+			self.skipWaiting()
+			break
 		default:
 			// NOOP
-			break;
+			break
 	}
-});
+})
 
 const getBearerToken = async () => {
 	// we can't get a client that sent the current request, therefore we need
 	// to ask any controlled page for auth token
-	const allClients = await self.clients.matchAll();
-	const client = allClients.filter(client => client.type === 'window')[0];
+	const allClients = await self.clients.matchAll()
+	const client = allClients.filter(client => client.type === 'window')[0]
 
 	// if there is no page in scope, we can't get any token
 	// and we indicate it with null value
-	if(!client) {
-		return null;
+	if (!client) {
+		return null
 	}
 
 	// to communicate with a page we will use MessageChannels
 	// they expose pipe-like interface, where a receiver of
 	// a message uses one end of a port for messaging and
 	// we use the other end for listening
-	const channel = new MessageChannel();
+	const channel = new MessageChannel()
 
 	client.postMessage({
-		'action': 'getBearerToken'
-	}, [channel.port1]);
+		'action': 'getBearerToken',
+	}, [channel.port1])
 
 	// ports support only onmessage callback which
 	// is cumbersome to use, so we wrap it with Promise
 	return new Promise((resolve, reject) => {
 		channel.port2.onmessage = event => {
 			if (event.data.error) {
-				console.error('Port error', event.error);
-				reject(event.data.error);
+				console.error('Port error', event.error)
+				reject(event.data.error)
 			}
 
-			resolve(event.data.authToken);
+			resolve(event.data.authToken)
 		}
-	});
+	})
 }
 
 // Notification action
-self.addEventListener('notificationclick', function(event) {
+self.addEventListener('notificationclick', function (event) {
 	const taskId = event.notification.data.taskId
 	event.notification.close()
 
@@ -88,15 +88,15 @@ self.addEventListener('notificationclick', function(event) {
 									'Content-Type': 'application/json',
 									'Authorization': `Bearer ${token}`,
 								},
-								body: JSON.stringify({id: taskId, done: true})
-							})
-							.then(r => r.json())
-							.then(r => {
-								console.debug('Task marked as done from notification', r)
-							})
-							.catch(e => {
-								console.debug('Error marking task as done from notification', e)
+								body: JSON.stringify({id: taskId, done: true}),
 							})
+								.then(r => r.json())
+								.then(r => {
+									console.debug('Task marked as done from notification', r)
+								})
+								.catch(e => {
+									console.debug('Error marking task as done from notification', e)
+								})
 						})
 				})
 			break
@@ -106,7 +106,7 @@ self.addEventListener('notificationclick', function(event) {
 	}
 })
 
-workbox.core.clientsClaim();
+workbox.core.clientsClaim()
 // The precaching code provided by Workbox.
-self.__precacheManifest = [].concat(self.__precacheManifest || []);
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+self.__precacheManifest = [].concat(self.__precacheManifest || [])
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {})
diff --git a/src/components/input/colorPicker.vue b/src/components/input/colorPicker.vue
index 46c0db92c..761821d37 100644
--- a/src/components/input/colorPicker.vue
+++ b/src/components/input/colorPicker.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="color-picker-container">
 		<verte
-				v-model="color"
-				:menuPosition="menuPosition"
-				picker="square"
-				model="hex"
-				:enableAlpha="false"
-				:rgbSliders="true"/>
+			:enableAlpha="false"
+			:menuPosition="menuPosition"
+			:rgbSliders="true"
+			model="hex"
+			picker="square"
+			v-model="color"/>
 		<a @click="reset" class="reset">
 			Reset Color
 		</a>
@@ -14,58 +14,58 @@
 </template>
 
 <script>
-	import verte from 'verte'
-	import 'verte/dist/verte.css'
+import verte from 'verte'
+import 'verte/dist/verte.css'
 
-	export default {
-		name: 'colorPicker',
-		data() {
-			return {
-				color: '',
-				lastChangeTimeout: null,
+export default {
+	name: 'colorPicker',
+	data() {
+		return {
+			color: '',
+			lastChangeTimeout: null,
+		}
+	},
+	components: {
+		verte,
+	},
+	props: {
+		value: {
+			required: true,
+		},
+		menuPosition: {
+			type: String,
+			default: 'top',
+		},
+	},
+	watch: {
+		value(newVal) {
+			this.color = newVal
+		},
+		color() {
+			this.update()
+		},
+	},
+	mounted() {
+		this.color = this.value
+	},
+	methods: {
+		update() {
+
+			if (this.lastChangeTimeout !== null) {
+				clearTimeout(this.lastChangeTimeout)
 			}
-		},
-		components: {
-			verte,
-		},
-		props: {
-			value: {
-				required: true,
-			},
-			menuPosition: {
-				type: String,
-				default: 'top',
-			},
-		},
-		watch: {
-			value(newVal) {
-				this.color = newVal
-			},
-			color() {
-				this.update()
-			},
-		},
-		mounted() {
-			this.color = this.value
-		},
-		methods: {
-			update() {
 
-				if(this.lastChangeTimeout !== null) {
-					clearTimeout(this.lastChangeTimeout)
-				}
-
-				this.lastChangeTimeout = setTimeout(() => {
-					this.$emit('input', this.color)
-					this.$emit('change')
-				}, 500)
-			},
-			reset() {
-				// FIXME: I havn't found a way to make it clear to the user the color war reset.
-				//  Not sure if verte is capable of this - it does not show the change when setting this.color = ''
-				this.color = ''
-				this.update()
-			},
+			this.lastChangeTimeout = setTimeout(() => {
+				this.$emit('input', this.color)
+				this.$emit('change')
+			}, 500)
 		},
-	}
+		reset() {
+			// FIXME: I havn't found a way to make it clear to the user the color war reset.
+			//  Not sure if verte is capable of this - it does not show the change when setting this.color = ''
+			this.color = ''
+			this.update()
+		},
+	},
+}
 </script>
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index 225256606..f428caf00 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="editor" :class="{'is-pulled-up': isEditEnabled}">
+	<div :class="{'is-pulled-up': isEditEnabled}" class="editor">
 		<div class="tabs is-right" v-if="hasPreview && isEditEnabled">
 			<ul>
 				<li :class="{'is-active': isPreviewActive}" v-if="isEditActive">
@@ -11,418 +11,424 @@
 			</ul>
 		</div>
 
-		<vue-easymde v-model="text" :configs="config" @change="bubble" class="content" v-if="isEditActive" @input="handleInput"/>
+		<vue-easymde
+			:configs="config"
+			@change="bubble"
+			@input="handleInput"
+			class="content"
+			v-if="isEditActive"
+			v-model="text"/>
 
-		<div class="preview content" v-if="isPreviewActive" v-html="preview">
+		<div class="preview content" v-html="preview" v-if="isPreviewActive">
 		</div>
 	</div>
 </template>
 
 <script>
-	import VueEasymde from 'vue-easymde'
-	import EasyMDE from 'easymde'
-	import marked from 'marked'
-	import DOMPurify from 'dompurify'
+import VueEasymde from 'vue-easymde'
+import EasyMDE from 'easymde'
+import marked from 'marked'
+import DOMPurify from 'dompurify'
 
-	import AttachmentModel from '../../models/attachment'
-	import AttachmentService from '../../services/attachment'
+import AttachmentModel from '../../models/attachment'
+import AttachmentService from '../../services/attachment'
 
-	export default {
-		name: 'editor',
-		components: {
-			VueEasymde
+export default {
+	name: 'editor',
+	components: {
+		VueEasymde,
+	},
+	props: {
+		value: {
+			type: String,
+			default: '',
 		},
-		props: {
-			value: {
-				type: String,
-				default: '',
-			},
-			placeholder: {
-				type: String,
-				default: '',
-			},
-			uploadEnabled: {
-				type: Boolean,
-				default() {
-					return false
-				},
-			},
-			uploadCallback: {
-				type: Function,
-			},
-			hasPreview: {
-				type: Boolean,
-				default: true,
-			},
-			previewIsDefault: {
-				type: Boolean,
-				default: true,
-			},
-			isEditEnabled: {
-				default: true,
+		placeholder: {
+			type: String,
+			default: '',
+		},
+		uploadEnabled: {
+			type: Boolean,
+			default() {
+				return false
 			},
 		},
-		data() {
-			return {
-				text: '',
-				changeTimeout: null,
-				isEditActive: false,
-				isPreviewActive: true,
-
-				preview: '',
-				attachmentService: null,
-
-				config: {
-					autoDownloadFontAwesome: false,
-					spellChecker: false,
-					placeholder: this.placeholder,
-					uploadImage: this.uploadEnabled,
-					imageUploadFunction: this.uploadCallback,
-					minHeight: '150px',
-					toolbar: [
-						{
-							name: 'heading-1',
-							action: EasyMDE.toggleHeading1,
-							title: 'Heading 1',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
-						},
-						{
-							name: 'heading-2',
-							action: EasyMDE.toggleHeading2,
-							title: 'Heading 2',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
-						},
-						{
-							name: 'heading-3',
-							action: EasyMDE.toggleHeading3,
-							title: 'Heading 3',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
-						},
-						{
-							name: 'heading-smaller',
-							action: EasyMDE.toggleHeadingSmaller,
-							title: 'Heading Smaller',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
-						},
-						{
-							name: 'heading-bigger',
-							action: EasyMDE.toggleHeadingBigger,
-							title: 'Heading Bigger',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
-						},
-						'|',
-						{
-							name: 'bold',
-							action: EasyMDE.toggleBold,
-							title: 'Bold',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 3H6.5H15.25C18.15 3 20.5 5.36 20.5 8.25C20.5 9.8 19.81 11.19 18.73 12.15C20.37 13.04 21.5 14.76 21.5 16.75C21.5 19.64 19.15 22 16.25 22H6.5H3.5C2.95 22 2.5 21.55 2.5 21C2.5 20.45 2.95 20 3.5 20H5.5V5H3.5C2.95 5 2.5 4.55 2.5 4C2.5 3.45 2.95 3 3.5 3ZM7.5 20H16.25C18.04 20 19.5 18.54 19.5 16.75C19.5 14.96 18.04 13.5 16.25 13.5H7.5V20ZM7.5 11.5H15.25C17.04 11.5 18.5 10.04 18.5 8.25C18.5 6.46 17.04 5 15.25 5H7.5V11.5Z"/></svg>',
-						},
-						{
-							name: 'italic',
-							action: EasyMDE.toggleItalic,
-							title: 'Italic',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.0967 4.2H17.0001C17.3301 4.2 17.6001 3.93 17.6001 3.6C17.6001 3.27 17.3301 3 17.0001 3H10.2001C9.8701 3 9.6001 3.27 9.6001 3.6C9.6001 3.93 9.8701 4.2 10.2001 4.2H12.8748L9.90335 19.8H6.9999C6.6699 19.8 6.3999 20.07 6.3999 20.4C6.3999 20.73 6.6699 21 6.9999 21H13.7999C14.1299 21 14.3999 20.73 14.3999 20.4C14.3999 20.07 14.1299 19.8 13.7999 19.8H11.1253L14.0967 4.2Z"/></svg>',
-						},
-						{
-							name: 'strikethrough',
-							action: EasyMDE.toggleStrikethrough,
-							title: 'Strikethrough',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.25 7.17005C18.25 7.50005 17.98 7.77005 17.65 7.77005C17.32 7.77005 17.05 7.50005 17.05 7.17005V5.96005C15.97 5.12005 14.17 4.56005 12.79 4.31005C11.1 4.00005 9.51 4.30005 8.41 5.12005C7.2 6.03005 6.67 7.67005 7.19 8.88005C7.56 9.73005 8.37 10.31 8.98 10.64C9.57215 10.9644 10.1961 11.2013 10.8465 11.3999H20.4C20.73 11.3999 21 11.6699 21 11.9999C21 12.3299 20.73 12.5999 20.4 12.5999H15.3012C16.6583 13.0929 17.5255 13.7765 17.95 14.69C18.73 16.36 17.74 18.33 16.36 19.41C15.05 20.4401 13.35 21 11.54 21H11.16C9.78 20.9401 8.34 20.5301 6.95 19.85V20.3601C6.95 20.6901 6.68 20.96 6.35 20.96C6.02 20.96 5.75 20.6901 5.75 20.3601V17.36C5.75 17.03 6.02 16.76 6.35 16.76C6.68 16.76 6.95 17.03 6.95 17.36V18.5C8.35 19.2801 9.81 19.74 11.21 19.8C12.86 19.89 14.46 19.39 15.62 18.48C16.6 17.71 17.37 16.3 16.86 15.21C16.55 14.54 15.8 14.0201 14.58 13.63C13.9711 13.4331 13.3222 13.2762 12.6906 13.1235C12.6168 13.1056 12.5432 13.0878 12.47 13.07C12.4313 13.0607 12.3925 13.0514 12.3537 13.0421C11.7861 12.9055 11.2108 12.767 10.6413 12.5999H3.6C3.27 12.5999 3 12.3299 3 11.9999C3 11.6699 3.27 11.3999 3.6 11.3999H7.90288C7.04984 10.8343 6.42752 10.1363 6.09 9.36005C5.34 7.63005 6.03 5.40005 7.69 4.16005C9.05 3.15005 10.99 2.77005 13 3.13005C13.64 3.25005 15.53 3.66005 17.05 4.53005V4.17005C17.05 3.84005 17.32 3.57005 17.65 3.57005C17.98 3.57005 18.25 3.84005 18.25 4.17005V7.17005Z"/></svg>',
-						},
-						{
-							name: 'code',
-							action: EasyMDE.toggleCodeBlock,
-							title: 'Code',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.57 20.9601C8.64 20.9901 8.71 21.0001 8.78 21.0001C9.02 21.0001 9.24 20.8501 9.34 20.6101L15.79 3.81005C15.9 3.50005 15.75 3.15005 15.44 3.03005C15.14 2.92005 14.79 3.07005 14.67 3.38005L8.22 20.1801C8.11 20.4901 8.26 20.8401 8.57 20.9601ZM7.00007 18.0001C6.85007 18.0001 6.69007 17.9401 6.58007 17.8201L1.18007 12.4201C0.950068 12.1901 0.950068 11.8101 1.18007 11.5701L6.58007 6.17006C6.81007 5.94006 7.19007 5.94006 7.43007 6.17006C7.66007 6.40006 7.66007 6.78006 7.43007 7.02006L2.45007 12.0001L7.43007 16.9801C7.66007 17.2101 7.66007 17.5901 7.43007 17.8301C7.31007 17.9401 7.15007 18.0001 7.00007 18.0001ZM17 18.0001C16.85 18.0001 16.69 17.9401 16.58 17.8201C16.35 17.5901 16.35 17.2101 16.58 16.9701L21.55 12.0001L16.57 7.02006C16.34 6.79006 16.34 6.41006 16.57 6.17006C16.81 5.94006 17.19 5.94006 17.42 6.17006L22.82 11.5701C23.05 11.8001 23.05 12.1801 22.82 12.4201L17.42 17.8201C17.31 17.9401 17.15 18.0001 17 18.0001Z"/></svg>',
-						},
-						{
-							name: 'quote',
-							action: EasyMDE.toggleBlockquote,
-							title: 'Quote',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.373 5.16357H5.62695C4.79102 5.16357 4.11133 5.84326 4.11133 6.6792V16.2095C4.11133 17.0464 4.79102 17.7261 5.62695 17.7261H6.8877V21.1245C6.8877 21.3667 7.0332 21.5854 7.25684 21.6782C7.33203 21.7095 7.41016 21.7241 7.4873 21.7241C7.64258 21.7241 7.7959 21.6636 7.91113 21.5493L11.748 17.7261H19.373C20.209 17.7261 20.8887 17.0464 20.8887 16.2095V6.6792C20.8887 5.84326 20.209 5.16357 19.373 5.16357ZM19.6895 16.2095C19.6895 16.3843 19.5469 16.5269 19.373 16.5269H11.5C11.3408 16.5269 11.1895 16.5894 11.0762 16.7017L8.08691 19.6802V17.1265C8.08691 16.7954 7.81836 16.5269 7.4873 16.5269H5.62695C5.45312 16.5269 5.31055 16.3843 5.31055 16.2095V6.6792C5.31055 6.50537 5.45312 6.36279 5.62695 6.36279H19.373C19.5469 6.36279 19.6895 6.50537 19.6895 6.6792V16.2095ZM10.3431 8.45264C9.46326 8.45264 8.75 9.16589 8.75 10.0458C8.75 10.9257 9.46326 11.639 10.3431 11.639C10.4775 11.639 10.6058 11.6173 10.7305 11.5861V11.6195C10.7305 12.1322 10.3135 12.5492 9.75586 12.5492C9.4248 12.5492 9.17871 12.8177 9.17871 13.1488C9.17871 13.4799 9.46973 13.7484 9.80078 13.7484C10.9746 13.7484 11.9297 12.7933 11.9297 11.6195V10.1176L11.9294 10.1165L11.9292 10.1155C11.9297 10.1049 11.9312 10.0946 11.9326 10.0843L11.9326 10.0843C11.9345 10.0716 11.9363 10.059 11.9363 10.0458C11.9363 9.16589 11.223 8.45264 10.3431 8.45264ZM13.0637 10.0458C13.0637 9.16589 13.7771 8.45264 14.657 8.45264C15.5369 8.45264 16.2501 9.16589 16.2501 10.0458C16.2501 10.0584 16.2484 10.0706 16.2466 10.0828C16.2452 10.0929 16.2437 10.103 16.2433 10.1134C16.2433 10.1149 16.2441 10.1161 16.2441 10.1176V11.6195C16.2441 12.7933 15.2891 13.7484 14.1152 13.7484C13.7842 13.7484 13.4922 13.4799 13.4922 13.1488C13.4922 12.8177 13.7383 12.5492 14.0693 12.5492C14.6279 12.5492 15.0449 12.1322 15.0449 11.6195V11.5858C14.9202 11.6173 14.7915 11.639 14.657 11.639C13.7771 11.639 13.0637 10.9257 13.0637 10.0458Z"/></svg>',
-						},
-						{
-							name: 'unordered-list',
-							action: EasyMDE.toggleUnorderedList,
-							title: 'Unordered List',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.5281 3.7002H3.5281C3.1981 3.7002 2.9281 3.9702 2.9281 4.3002V7.3002C2.9281 7.6302 3.1981 7.9002 3.5281 7.9002H6.5281C6.8581 7.9002 7.1281 7.6302 7.1281 7.3002V4.3002C7.1281 3.9702 6.8581 3.7002 6.5281 3.7002ZM5.9281 6.7002H4.1281V4.9002H5.9281V6.7002ZM3.5281 9.90015H6.5281C6.8581 9.90015 7.1281 10.1701 7.1281 10.5001V13.5001C7.1281 13.8301 6.8581 14.1001 6.5281 14.1001H3.5281C3.1981 14.1001 2.9281 13.8301 2.9281 13.5001V10.5001C2.9281 10.1701 3.1981 9.90015 3.5281 9.90015ZM4.1281 12.9001H5.9281V11.1001H4.1281V12.9001ZM3.5281 16.1001H6.5281C6.8581 16.1001 7.1281 16.3701 7.1281 16.7001V19.7001C7.1281 20.0301 6.8581 20.3001 6.5281 20.3001H3.5281C3.1981 20.3001 2.9281 20.0301 2.9281 19.7001V16.7001C2.9281 16.3701 3.1981 16.1001 3.5281 16.1001ZM4.1281 19.1001H5.9281V17.3001H4.1281V19.1001ZM9.72817 6.4002H20.7282C21.0582 6.4002 21.3282 6.1302 21.3282 5.8002C21.3282 5.4702 21.0582 5.2002 20.7282 5.2002H9.72817C9.39817 5.2002 9.12817 5.4702 9.12817 5.8002C9.12817 6.1302 9.39817 6.4002 9.72817 6.4002ZM9.72817 11.4001H20.7282C21.0582 11.4001 21.3282 11.6701 21.3282 12.0001C21.3282 12.3301 21.0582 12.6001 20.7282 12.6001H9.72817C9.39817 12.6001 9.12817 12.3301 9.12817 12.0001C9.12817 11.6701 9.39817 11.4001 9.72817 11.4001ZM9.72817 17.6001H20.7282C21.0582 17.6001 21.3282 17.8701 21.3282 18.2001C21.3282 18.5301 21.0582 18.8001 20.7282 18.8001H9.72817C9.39817 18.8001 9.12817 18.5301 9.12817 18.2001C9.12817 17.8701 9.39817 17.6001 9.72817 17.6001Z"/></svg>',
-						},
-						{
-							name: 'ordered-list',
-							action: EasyMDE.toggleOrderedList,
-							title: 'Ordered List',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.19494 8.29994H5.99494C6.26494 8.29994 6.49494 8.07995 6.49494 7.79994C6.49494 7.51995 6.27494 7.29994 5.99494 7.29994H5.59494V3.79994C5.59494 3.62994 5.50494 3.46994 5.36494 3.37994C5.22494 3.28994 5.04494 3.26994 4.89494 3.33994L3.89494 3.76994C3.64494 3.87994 3.52494 4.17994 3.63494 4.42994C3.74494 4.67994 4.03494 4.79994 4.29494 4.68994L4.59494 4.55994V7.29994H4.19494C3.91494 7.29994 3.69494 7.51995 3.69494 7.79994C3.69494 8.07995 3.91494 8.29994 4.19494 8.29994ZM20.195 6.39995H9.19497C8.86497 6.39995 8.59497 6.12995 8.59497 5.79995C8.59497 5.46995 8.86497 5.19995 9.19497 5.19995H20.195C20.525 5.19995 20.795 5.46995 20.795 5.79995C20.795 6.12995 20.525 6.39995 20.195 6.39995ZM3.78486 14.36H6.37486C6.65486 14.36 6.87486 14.14 6.87486 13.86C6.87486 13.58 6.65486 13.36 6.37486 13.36H4.88486C5.00486 13.23 5.12486 13.09 5.23486 12.95C5.26626 12.9151 5.29645 12.8802 5.32626 12.8458L5.32629 12.8457C5.38192 12.7814 5.43627 12.7186 5.49486 12.66C5.73486 12.4 5.98486 12.12 6.17486 11.79C6.47486 11.25 6.41486 10.63 6.01486 10.17C5.57486 9.66 4.86486 9.5 4.24486 9.74C3.74486 9.95 3.39486 10.35 3.22486 10.91C3.14486 11.18 3.29486 11.46 3.56486 11.54C3.82486 11.61 4.10486 11.46 4.18486 11.2C4.29486 10.85 4.48486 10.73 4.62486 10.67C4.88486 10.57 5.13486 10.68 5.26486 10.82C5.38486 10.96 5.40486 11.12 5.30486 11.29C5.17595 11.5202 4.99618 11.7165 4.80458 11.9257L4.75486 11.98C4.67298 12.0801 4.58283 12.1801 4.49946 12.2727L4.49945 12.2727L4.47486 12.3C4.12486 12.72 3.76486 13.13 3.40486 13.53C3.27486 13.68 3.23486 13.9 3.32486 14.07C3.41486 14.24 3.58486 14.36 3.78486 14.36ZM3.68486 20.3699C4.04486 20.5899 4.46486 20.6999 4.87486 20.6999C5.13486 20.6999 5.38486 20.6499 5.61486 20.5499C6.31486 20.2799 6.73486 19.5599 6.60486 18.8799C6.53486 18.5499 6.35486 18.2899 6.12486 18.0899C6.32486 17.8999 6.45486 17.6499 6.50486 17.3799C6.57486 17.0099 6.49486 16.6299 6.27486 16.3099C5.85486 15.6899 5.07486 15.5199 4.10486 15.8299C3.83486 15.9199 3.69486 16.1999 3.77486 16.4599C3.86486 16.7299 4.14486 16.8699 4.40486 16.7899C4.70486 16.6999 5.24486 16.5799 5.45486 16.8899C5.51486 16.9899 5.54486 17.0999 5.52486 17.1999C5.51486 17.2699 5.47486 17.3599 5.36486 17.4299C5.26486 17.4999 5.12486 17.5399 4.95486 17.5799L4.77486 17.6299C4.54486 17.6999 4.40486 17.9099 4.41486 18.1499C4.42486 18.3899 4.61486 18.5799 4.84486 18.6099C5.20486 18.6599 5.58486 18.8299 5.63486 19.0799C5.67486 19.2999 5.46486 19.5499 5.25486 19.6299C4.94486 19.7599 4.52486 19.7099 4.21486 19.5199C3.97486 19.3699 3.67486 19.4399 3.52486 19.6799C3.37486 19.9199 3.44486 20.2299 3.68486 20.3699ZM20.195 18.7999H9.19497C8.86497 18.7999 8.59497 18.5299 8.59497 18.1999C8.59497 17.8699 8.86497 17.5999 9.19497 17.5999H20.195C20.525 17.5999 20.795 17.8699 20.795 18.1999C20.795 18.5299 20.525 18.7999 20.195 18.7999ZM9.19497 12.5999H20.195C20.525 12.5999 20.795 12.3299 20.795 11.9999C20.795 11.6699 20.525 11.3999 20.195 11.3999H9.19497C8.86497 11.3999 8.59497 11.6699 8.59497 11.9999C8.59497 12.3299 8.86497 12.5999 9.19497 12.5999Z"/></svg>',
-						},
-						'|',
-						{
-							name: 'clean-block',
-							action: EasyMDE.cleanBlock,
-							title: 'Clean Block',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.25989 6.18384H20.4513C20.7823 6.18384 21.0509 6.45239 21.0509 6.78345V17.9749C21.0509 18.3059 20.7823 18.5745 20.4513 18.5745H9.25989C9.0929 18.5745 8.93469 18.5061 8.82043 18.384L3.6095 12.7883C3.39563 12.5579 3.39563 12.2004 3.6095 11.97L8.82043 6.37427C8.93469 6.2522 9.0929 6.18384 9.25989 6.18384ZM9.52063 17.3752H19.8517V7.38306H9.52063L4.86926 12.3792L9.52063 17.3752ZM12.7755 15.0686C12.6222 15.0686 12.4679 15.01 12.3517 14.8928C12.1173 14.6584 12.1173 14.2786 12.3517 14.0452L14.0503 12.3469L12.3517 10.6487C12.1173 10.4153 12.1173 10.0354 12.3517 9.80103C12.5841 9.56665 12.965 9.56665 13.1993 9.80103L14.8981 11.4994L16.5968 9.80103C16.8312 9.56665 17.212 9.56665 17.4445 9.80103C17.6788 10.0354 17.6788 10.4153 17.4445 10.6487L15.7458 12.3469L17.4445 14.0452C17.6788 14.2786 17.6788 14.6584 17.4445 14.8928C17.3282 15.01 17.174 15.0686 17.0206 15.0686C16.8673 15.0686 16.714 15.01 16.5968 14.8928L14.8981 13.1945L13.1993 14.8928C13.0822 15.01 12.9288 15.0686 12.7755 15.0686Z"/></svg>',
-						},
-						{
-							name: 'link',
-							action: EasyMDE.drawLink,
-							title: 'Link',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.4399 15.3452C11.4999 15.3652 11.5699 15.3752 11.6299 15.3752C11.8799 15.3752 12.1199 15.2152 12.1999 14.9652C12.2999 14.6452 12.1299 14.3052 11.8199 14.2052C11.3499 14.0452 10.9299 13.7852 10.5699 13.4152C10.1999 13.0552 9.9399 12.6452 9.7799 12.1552C9.6599 11.8252 9.5999 11.4652 9.5999 11.0952C9.5999 10.2152 9.9399 9.38518 10.5699 8.75518L15.1599 4.15518C16.4499 2.87518 18.5399 2.87518 19.8299 4.15518C20.4499 4.78518 20.7899 5.61518 20.7899 6.49518C20.7899 7.37518 20.4499 8.20518 19.8299 8.82518L16.7399 11.9052C16.5099 12.1452 16.5099 12.5252 16.7399 12.7552C16.9799 12.9852 17.3599 12.9852 17.5899 12.7552L20.6799 9.67518C21.5299 8.83518 21.9999 7.69518 21.9999 6.49518C21.9999 5.29518 21.5299 4.16518 20.6899 3.30518C18.9299 1.55518 16.0799 1.55518 14.3199 3.30518L9.7299 7.90518C8.8699 8.75518 8.3999 9.88518 8.3999 11.0952C8.3999 11.6152 8.4899 12.1152 8.6499 12.5552C8.8599 13.1952 9.2399 13.7952 9.7199 14.2652C10.1999 14.7552 10.7999 15.1352 11.4399 15.3452ZM3.32 20.6851C4.2 21.5551 5.35 21.9951 6.5 21.9951C7.65 21.9951 8.81 21.5551 9.69 20.7051L14.28 16.1051C15.14 15.2551 15.61 14.1251 15.61 12.9151C15.61 12.4551 15.54 11.9951 15.4 11.5551C15.17 10.8651 14.8 10.2551 14.28 9.73509C13.76 9.21509 13.15 8.84509 12.46 8.61509C12.14 8.51509 11.8 8.68509 11.7 8.99509C11.6 9.30509 11.77 9.64509 12.1 9.75509C12.61 9.91509 13.06 10.1951 13.44 10.5751C13.82 10.9551 14.09 11.4051 14.26 11.9151C14.36 12.2351 14.41 12.5651 14.41 12.9051C14.41 13.7951 14.06 14.6251 13.43 15.2451L8.84 19.8451C7.55 21.1251 5.46 21.1251 4.17 19.8451C3.55 19.2151 3.21 18.3951 3.21 17.5051C3.21 16.6151 3.55 15.7851 4.17 15.1651L7.35 11.9851C7.58 11.7451 7.59 11.3651 7.35 11.1351C7.11 10.9051 6.73 10.9051 6.5 11.1351L3.32 14.3151C2.47 15.1551 2 16.2851 2 17.4951C2 18.7051 2.47 19.8351 3.32 20.6851Z"/></svg>',
-						},
-						{
-							name: 'image',
-							action: EasyMDE.drawImage,
-							title: 'Image',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 4C2.89543 4 2 4.89543 2 6V16V17.5152V18C2 19.1046 2.89543 20 4 20H20C21.0528 20 21.9156 19.1866 21.9942 18.1539L22 18.1632V18V16V6C22 4.89543 21.1046 4 20 4H4ZM3.2 17.7V16.5642L6.78192 13.7254C6.8616 13.6622 6.97597 13.6689 7.04776 13.7409L10.3126 17.0146C10.7026 17.4056 11.3357 17.4065 11.7268 17.0165C11.7606 16.9827 11.792 16.9465 11.8207 16.9083L16.736 10.352C16.8023 10.2636 16.9277 10.2457 17.016 10.312C17.0355 10.3265 17.0521 10.3445 17.0651 10.365L20.8 16.2669V17.7C20.8 18.3075 20.3075 18.8 19.7 18.8H4.3C3.69249 18.8 3.2 18.3075 3.2 17.7ZM17.3865 8.61836L20.8 14.08V6.3C20.8 5.69249 20.3075 5.2 19.7 5.2H4.3C3.69249 5.2 3.2 5.69249 3.2 6.3V15.04L6.65054 12.2796C6.84949 12.1204 7.13629 12.1363 7.31645 12.3164L10.8369 15.8369C10.915 15.915 11.0417 15.915 11.1198 15.8369C11.1265 15.8302 16.5625 8.58336 16.5625 8.58336C16.7282 8.36245 17.0416 8.31768 17.2625 8.48336C17.3118 8.52034 17.3538 8.56611 17.3865 8.61836ZM8 8.5C8 9.32843 7.32843 10 6.5 10C5.67157 10 5 9.32843 5 8.5C5 7.67157 5.67157 7 6.5 7C7.32843 7 8 7.67157 8 8.5Z"/></svg>',
-						},
-						{
-							name: 'table',
-							action: EasyMDE.drawTable,
-							title: 'Table',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.18524 3.08496H19.4152C20.6752 3.08496 21.7152 4.11496 21.7152 5.38496V18.615C21.7152 19.885 20.6852 20.915 19.4152 20.915H6.18524C4.91524 20.915 3.88525 19.885 3.88525 18.615V5.38496C3.88525 4.11496 4.91524 3.08496 6.18524 3.08496ZM19.4052 19.705C20.0152 19.705 20.5052 19.215 20.5052 18.605H20.5153V5.38496C20.5153 4.77496 20.0252 4.28496 19.4152 4.28496H6.18524C5.57524 4.28496 5.08521 4.77496 5.08521 5.38496V18.605C5.08521 19.215 5.57524 19.705 6.18524 19.705H19.4052ZM17.4453 9.15503H8.15527C7.82527 9.15503 7.5553 9.42503 7.5553 9.75503C7.5553 10.085 7.82527 10.355 8.15527 10.355H17.4453C17.7753 10.355 18.0453 10.085 18.0453 9.75503C18.0453 9.42503 17.7753 9.15503 17.4453 9.15503ZM17.4453 13.635H8.15527C7.82527 13.635 7.5553 13.905 7.5553 14.235C7.5553 14.565 7.82527 14.835 8.15527 14.835H17.4453C17.7753 14.835 18.0453 14.565 18.0453 14.235C18.0453 13.905 17.7753 13.635 17.4453 13.635Z"/></svg>',
-						},
-						{
-							name: 'horizontal-rule',
-							action: EasyMDE.drawHorizontalRule,
-							title: 'Horizontal Rule',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 13H3C2.45 13 2 12.55 2 12C2 11.45 2.45 11 3 11H21C21.55 11 22 11.45 22 12C22 12.55 21.55 13 21 13Z"/></svg>',
-						},
-						'|',
-						{
-							name: 'side-by-side',
-							action: EasyMDE.toggleSideBySide,
-							title: 'Side By Side',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.4787 14.58C18.3587 14.69 18.2987 14.85 18.2987 15C18.2987 15.15 18.3587 15.31 18.4787 15.42C18.7187 15.65 19.0987 15.65 19.3287 15.42L22.3287 12.42C22.5587 12.18 22.5587 11.8 22.3287 11.57L19.3287 8.56996C19.0887 8.33996 18.7087 8.33996 18.4787 8.56996C18.2487 8.80996 18.2487 9.18996 18.4787 9.41996L20.451 11.3999L14.4487 11.3999L14.4487 4.6C14.4487 4.27 14.1787 4 13.8487 4C13.5187 4 13.2487 4.27 13.2487 4.6L13.2487 19.4C13.2487 19.73 13.5187 20 13.8487 20C14.1787 20 14.4487 19.73 14.4487 19.4L14.4487 12.5999L20.4511 12.5999L18.4787 14.58ZM9.54878 19.4L9.54878 12.5999L3.5486 12.5999L5.52867 14.58C5.75867 14.81 5.75867 15.19 5.52867 15.43C5.29867 15.66 4.91867 15.66 4.67867 15.43L1.67867 12.43C1.63274 12.384 1.5956 12.3323 1.56725 12.2774C1.53058 12.2077 1.50724 12.1299 1.50068 12.0477C1.49934 12.0317 1.49867 12.0158 1.49867 12C1.49867 11.9841 1.49933 11.9682 1.50067 11.9522C1.51454 11.778 1.60365 11.6242 1.73526 11.5234L4.67867 8.57997C4.90867 8.34997 5.28867 8.34997 5.52867 8.57997C5.75867 8.80997 5.75867 9.18997 5.52867 9.42997L3.55107 11.3999L9.54878 11.3999L9.54878 4.6C9.54878 4.27 9.81878 4 10.1488 4C10.4788 4 10.7488 4.27 10.7488 4.6L10.7488 11.9999L10.7488 19.4C10.7488 19.73 10.4788 20 10.1488 20C9.81878 20 9.54878 19.73 9.54878 19.4Z"/></svg>',
-						},
-						{
-							name: 'guide',
-							action: () => {
-								window.open('https://www.markdownguide.org/basic-syntax/', '_blank')
-							},
-							title: 'Guide',
-							icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.4999 2.3999H6.4999C5.0699 2.3999 3.8999 3.5699 3.8999 4.9999V18.9999C3.8999 20.4299 5.0699 21.5999 6.4999 21.5999H19.4999C19.8299 21.5999 20.0999 21.3299 20.0999 20.9999V16.9999V2.9999C20.0999 2.6699 19.8299 2.3999 19.4999 2.3999ZM5.0999 4.9999V16.8118C5.50468 16.5513 5.98546 16.3999 6.4999 16.3999H18.8999V3.5999H6.4999C5.7299 3.5999 5.0999 4.2299 5.0999 4.9999ZM6.4999 17.5999H18.8999V20.3999H6.4999C5.7299 20.3999 5.0999 19.7699 5.0999 18.9999C5.0999 18.2299 5.7299 17.5999 6.4999 17.5999ZM8.4999 8.5999H15.4999C15.8299 8.5999 16.0999 8.3299 16.0999 7.9999C16.0999 7.6699 15.8299 7.3999 15.4999 7.3999H8.4999C8.1699 7.3999 7.8999 7.6699 7.8999 7.9999C7.8999 8.3299 8.1699 8.5999 8.4999 8.5999ZM15.4999 11.3999H8.4999C8.1699 11.3999 7.8999 11.6699 7.8999 11.9999C7.8999 12.3299 8.1699 12.5999 8.4999 12.5999H15.4999C15.8299 12.5999 16.0999 12.3299 16.0999 11.9999C16.0999 11.6699 15.8299 11.3999 15.4999 11.3999Z"/></svg>',
-						},
-					]
-				},
-			}
+		uploadCallback: {
+			type: Function,
 		},
-		watch: {
-			value(newVal) {
-				this.text = newVal
-				this.$nextTick(this.renderPreview)
-			},
-			text(newVal, oldVal) {
-				if (oldVal === '') {
-					return
-				}
-				this.bubble()
-			},
+		hasPreview: {
+			type: Boolean,
+			default: true,
 		},
-		beforeMount() {
-			this.text = this.value
+		previewIsDefault: {
+			type: Boolean,
+			default: true,
+		},
+		isEditEnabled: {
+			default: true,
+		},
+	},
+	data() {
+		return {
+			text: '',
+			changeTimeout: null,
+			isEditActive: false,
+			isPreviewActive: true,
 
-			if (this.previewIsDefault && this.hasPreview) {
-				this.$nextTick(this.renderPreview)
+			preview: '',
+			attachmentService: null,
+
+			config: {
+				autoDownloadFontAwesome: false,
+				spellChecker: false,
+				placeholder: this.placeholder,
+				uploadImage: this.uploadEnabled,
+				imageUploadFunction: this.uploadCallback,
+				minHeight: '150px',
+				toolbar: [
+					{
+						name: 'heading-1',
+						action: EasyMDE.toggleHeading1,
+						title: 'Heading 1',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+					},
+					{
+						name: 'heading-2',
+						action: EasyMDE.toggleHeading2,
+						title: 'Heading 2',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+					},
+					{
+						name: 'heading-3',
+						action: EasyMDE.toggleHeading3,
+						title: 'Heading 3',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+					},
+					{
+						name: 'heading-smaller',
+						action: EasyMDE.toggleHeadingSmaller,
+						title: 'Heading Smaller',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+					},
+					{
+						name: 'heading-bigger',
+						action: EasyMDE.toggleHeadingBigger,
+						title: 'Heading Bigger',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+					},
+					'|',
+					{
+						name: 'bold',
+						action: EasyMDE.toggleBold,
+						title: 'Bold',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 3H6.5H15.25C18.15 3 20.5 5.36 20.5 8.25C20.5 9.8 19.81 11.19 18.73 12.15C20.37 13.04 21.5 14.76 21.5 16.75C21.5 19.64 19.15 22 16.25 22H6.5H3.5C2.95 22 2.5 21.55 2.5 21C2.5 20.45 2.95 20 3.5 20H5.5V5H3.5C2.95 5 2.5 4.55 2.5 4C2.5 3.45 2.95 3 3.5 3ZM7.5 20H16.25C18.04 20 19.5 18.54 19.5 16.75C19.5 14.96 18.04 13.5 16.25 13.5H7.5V20ZM7.5 11.5H15.25C17.04 11.5 18.5 10.04 18.5 8.25C18.5 6.46 17.04 5 15.25 5H7.5V11.5Z"/></svg>',
+					},
+					{
+						name: 'italic',
+						action: EasyMDE.toggleItalic,
+						title: 'Italic',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.0967 4.2H17.0001C17.3301 4.2 17.6001 3.93 17.6001 3.6C17.6001 3.27 17.3301 3 17.0001 3H10.2001C9.8701 3 9.6001 3.27 9.6001 3.6C9.6001 3.93 9.8701 4.2 10.2001 4.2H12.8748L9.90335 19.8H6.9999C6.6699 19.8 6.3999 20.07 6.3999 20.4C6.3999 20.73 6.6699 21 6.9999 21H13.7999C14.1299 21 14.3999 20.73 14.3999 20.4C14.3999 20.07 14.1299 19.8 13.7999 19.8H11.1253L14.0967 4.2Z"/></svg>',
+					},
+					{
+						name: 'strikethrough',
+						action: EasyMDE.toggleStrikethrough,
+						title: 'Strikethrough',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.25 7.17005C18.25 7.50005 17.98 7.77005 17.65 7.77005C17.32 7.77005 17.05 7.50005 17.05 7.17005V5.96005C15.97 5.12005 14.17 4.56005 12.79 4.31005C11.1 4.00005 9.51 4.30005 8.41 5.12005C7.2 6.03005 6.67 7.67005 7.19 8.88005C7.56 9.73005 8.37 10.31 8.98 10.64C9.57215 10.9644 10.1961 11.2013 10.8465 11.3999H20.4C20.73 11.3999 21 11.6699 21 11.9999C21 12.3299 20.73 12.5999 20.4 12.5999H15.3012C16.6583 13.0929 17.5255 13.7765 17.95 14.69C18.73 16.36 17.74 18.33 16.36 19.41C15.05 20.4401 13.35 21 11.54 21H11.16C9.78 20.9401 8.34 20.5301 6.95 19.85V20.3601C6.95 20.6901 6.68 20.96 6.35 20.96C6.02 20.96 5.75 20.6901 5.75 20.3601V17.36C5.75 17.03 6.02 16.76 6.35 16.76C6.68 16.76 6.95 17.03 6.95 17.36V18.5C8.35 19.2801 9.81 19.74 11.21 19.8C12.86 19.89 14.46 19.39 15.62 18.48C16.6 17.71 17.37 16.3 16.86 15.21C16.55 14.54 15.8 14.0201 14.58 13.63C13.9711 13.4331 13.3222 13.2762 12.6906 13.1235C12.6168 13.1056 12.5432 13.0878 12.47 13.07C12.4313 13.0607 12.3925 13.0514 12.3537 13.0421C11.7861 12.9055 11.2108 12.767 10.6413 12.5999H3.6C3.27 12.5999 3 12.3299 3 11.9999C3 11.6699 3.27 11.3999 3.6 11.3999H7.90288C7.04984 10.8343 6.42752 10.1363 6.09 9.36005C5.34 7.63005 6.03 5.40005 7.69 4.16005C9.05 3.15005 10.99 2.77005 13 3.13005C13.64 3.25005 15.53 3.66005 17.05 4.53005V4.17005C17.05 3.84005 17.32 3.57005 17.65 3.57005C17.98 3.57005 18.25 3.84005 18.25 4.17005V7.17005Z"/></svg>',
+					},
+					{
+						name: 'code',
+						action: EasyMDE.toggleCodeBlock,
+						title: 'Code',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.57 20.9601C8.64 20.9901 8.71 21.0001 8.78 21.0001C9.02 21.0001 9.24 20.8501 9.34 20.6101L15.79 3.81005C15.9 3.50005 15.75 3.15005 15.44 3.03005C15.14 2.92005 14.79 3.07005 14.67 3.38005L8.22 20.1801C8.11 20.4901 8.26 20.8401 8.57 20.9601ZM7.00007 18.0001C6.85007 18.0001 6.69007 17.9401 6.58007 17.8201L1.18007 12.4201C0.950068 12.1901 0.950068 11.8101 1.18007 11.5701L6.58007 6.17006C6.81007 5.94006 7.19007 5.94006 7.43007 6.17006C7.66007 6.40006 7.66007 6.78006 7.43007 7.02006L2.45007 12.0001L7.43007 16.9801C7.66007 17.2101 7.66007 17.5901 7.43007 17.8301C7.31007 17.9401 7.15007 18.0001 7.00007 18.0001ZM17 18.0001C16.85 18.0001 16.69 17.9401 16.58 17.8201C16.35 17.5901 16.35 17.2101 16.58 16.9701L21.55 12.0001L16.57 7.02006C16.34 6.79006 16.34 6.41006 16.57 6.17006C16.81 5.94006 17.19 5.94006 17.42 6.17006L22.82 11.5701C23.05 11.8001 23.05 12.1801 22.82 12.4201L17.42 17.8201C17.31 17.9401 17.15 18.0001 17 18.0001Z"/></svg>',
+					},
+					{
+						name: 'quote',
+						action: EasyMDE.toggleBlockquote,
+						title: 'Quote',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.373 5.16357H5.62695C4.79102 5.16357 4.11133 5.84326 4.11133 6.6792V16.2095C4.11133 17.0464 4.79102 17.7261 5.62695 17.7261H6.8877V21.1245C6.8877 21.3667 7.0332 21.5854 7.25684 21.6782C7.33203 21.7095 7.41016 21.7241 7.4873 21.7241C7.64258 21.7241 7.7959 21.6636 7.91113 21.5493L11.748 17.7261H19.373C20.209 17.7261 20.8887 17.0464 20.8887 16.2095V6.6792C20.8887 5.84326 20.209 5.16357 19.373 5.16357ZM19.6895 16.2095C19.6895 16.3843 19.5469 16.5269 19.373 16.5269H11.5C11.3408 16.5269 11.1895 16.5894 11.0762 16.7017L8.08691 19.6802V17.1265C8.08691 16.7954 7.81836 16.5269 7.4873 16.5269H5.62695C5.45312 16.5269 5.31055 16.3843 5.31055 16.2095V6.6792C5.31055 6.50537 5.45312 6.36279 5.62695 6.36279H19.373C19.5469 6.36279 19.6895 6.50537 19.6895 6.6792V16.2095ZM10.3431 8.45264C9.46326 8.45264 8.75 9.16589 8.75 10.0458C8.75 10.9257 9.46326 11.639 10.3431 11.639C10.4775 11.639 10.6058 11.6173 10.7305 11.5861V11.6195C10.7305 12.1322 10.3135 12.5492 9.75586 12.5492C9.4248 12.5492 9.17871 12.8177 9.17871 13.1488C9.17871 13.4799 9.46973 13.7484 9.80078 13.7484C10.9746 13.7484 11.9297 12.7933 11.9297 11.6195V10.1176L11.9294 10.1165L11.9292 10.1155C11.9297 10.1049 11.9312 10.0946 11.9326 10.0843L11.9326 10.0843C11.9345 10.0716 11.9363 10.059 11.9363 10.0458C11.9363 9.16589 11.223 8.45264 10.3431 8.45264ZM13.0637 10.0458C13.0637 9.16589 13.7771 8.45264 14.657 8.45264C15.5369 8.45264 16.2501 9.16589 16.2501 10.0458C16.2501 10.0584 16.2484 10.0706 16.2466 10.0828C16.2452 10.0929 16.2437 10.103 16.2433 10.1134C16.2433 10.1149 16.2441 10.1161 16.2441 10.1176V11.6195C16.2441 12.7933 15.2891 13.7484 14.1152 13.7484C13.7842 13.7484 13.4922 13.4799 13.4922 13.1488C13.4922 12.8177 13.7383 12.5492 14.0693 12.5492C14.6279 12.5492 15.0449 12.1322 15.0449 11.6195V11.5858C14.9202 11.6173 14.7915 11.639 14.657 11.639C13.7771 11.639 13.0637 10.9257 13.0637 10.0458Z"/></svg>',
+					},
+					{
+						name: 'unordered-list',
+						action: EasyMDE.toggleUnorderedList,
+						title: 'Unordered List',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.5281 3.7002H3.5281C3.1981 3.7002 2.9281 3.9702 2.9281 4.3002V7.3002C2.9281 7.6302 3.1981 7.9002 3.5281 7.9002H6.5281C6.8581 7.9002 7.1281 7.6302 7.1281 7.3002V4.3002C7.1281 3.9702 6.8581 3.7002 6.5281 3.7002ZM5.9281 6.7002H4.1281V4.9002H5.9281V6.7002ZM3.5281 9.90015H6.5281C6.8581 9.90015 7.1281 10.1701 7.1281 10.5001V13.5001C7.1281 13.8301 6.8581 14.1001 6.5281 14.1001H3.5281C3.1981 14.1001 2.9281 13.8301 2.9281 13.5001V10.5001C2.9281 10.1701 3.1981 9.90015 3.5281 9.90015ZM4.1281 12.9001H5.9281V11.1001H4.1281V12.9001ZM3.5281 16.1001H6.5281C6.8581 16.1001 7.1281 16.3701 7.1281 16.7001V19.7001C7.1281 20.0301 6.8581 20.3001 6.5281 20.3001H3.5281C3.1981 20.3001 2.9281 20.0301 2.9281 19.7001V16.7001C2.9281 16.3701 3.1981 16.1001 3.5281 16.1001ZM4.1281 19.1001H5.9281V17.3001H4.1281V19.1001ZM9.72817 6.4002H20.7282C21.0582 6.4002 21.3282 6.1302 21.3282 5.8002C21.3282 5.4702 21.0582 5.2002 20.7282 5.2002H9.72817C9.39817 5.2002 9.12817 5.4702 9.12817 5.8002C9.12817 6.1302 9.39817 6.4002 9.72817 6.4002ZM9.72817 11.4001H20.7282C21.0582 11.4001 21.3282 11.6701 21.3282 12.0001C21.3282 12.3301 21.0582 12.6001 20.7282 12.6001H9.72817C9.39817 12.6001 9.12817 12.3301 9.12817 12.0001C9.12817 11.6701 9.39817 11.4001 9.72817 11.4001ZM9.72817 17.6001H20.7282C21.0582 17.6001 21.3282 17.8701 21.3282 18.2001C21.3282 18.5301 21.0582 18.8001 20.7282 18.8001H9.72817C9.39817 18.8001 9.12817 18.5301 9.12817 18.2001C9.12817 17.8701 9.39817 17.6001 9.72817 17.6001Z"/></svg>',
+					},
+					{
+						name: 'ordered-list',
+						action: EasyMDE.toggleOrderedList,
+						title: 'Ordered List',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.19494 8.29994H5.99494C6.26494 8.29994 6.49494 8.07995 6.49494 7.79994C6.49494 7.51995 6.27494 7.29994 5.99494 7.29994H5.59494V3.79994C5.59494 3.62994 5.50494 3.46994 5.36494 3.37994C5.22494 3.28994 5.04494 3.26994 4.89494 3.33994L3.89494 3.76994C3.64494 3.87994 3.52494 4.17994 3.63494 4.42994C3.74494 4.67994 4.03494 4.79994 4.29494 4.68994L4.59494 4.55994V7.29994H4.19494C3.91494 7.29994 3.69494 7.51995 3.69494 7.79994C3.69494 8.07995 3.91494 8.29994 4.19494 8.29994ZM20.195 6.39995H9.19497C8.86497 6.39995 8.59497 6.12995 8.59497 5.79995C8.59497 5.46995 8.86497 5.19995 9.19497 5.19995H20.195C20.525 5.19995 20.795 5.46995 20.795 5.79995C20.795 6.12995 20.525 6.39995 20.195 6.39995ZM3.78486 14.36H6.37486C6.65486 14.36 6.87486 14.14 6.87486 13.86C6.87486 13.58 6.65486 13.36 6.37486 13.36H4.88486C5.00486 13.23 5.12486 13.09 5.23486 12.95C5.26626 12.9151 5.29645 12.8802 5.32626 12.8458L5.32629 12.8457C5.38192 12.7814 5.43627 12.7186 5.49486 12.66C5.73486 12.4 5.98486 12.12 6.17486 11.79C6.47486 11.25 6.41486 10.63 6.01486 10.17C5.57486 9.66 4.86486 9.5 4.24486 9.74C3.74486 9.95 3.39486 10.35 3.22486 10.91C3.14486 11.18 3.29486 11.46 3.56486 11.54C3.82486 11.61 4.10486 11.46 4.18486 11.2C4.29486 10.85 4.48486 10.73 4.62486 10.67C4.88486 10.57 5.13486 10.68 5.26486 10.82C5.38486 10.96 5.40486 11.12 5.30486 11.29C5.17595 11.5202 4.99618 11.7165 4.80458 11.9257L4.75486 11.98C4.67298 12.0801 4.58283 12.1801 4.49946 12.2727L4.49945 12.2727L4.47486 12.3C4.12486 12.72 3.76486 13.13 3.40486 13.53C3.27486 13.68 3.23486 13.9 3.32486 14.07C3.41486 14.24 3.58486 14.36 3.78486 14.36ZM3.68486 20.3699C4.04486 20.5899 4.46486 20.6999 4.87486 20.6999C5.13486 20.6999 5.38486 20.6499 5.61486 20.5499C6.31486 20.2799 6.73486 19.5599 6.60486 18.8799C6.53486 18.5499 6.35486 18.2899 6.12486 18.0899C6.32486 17.8999 6.45486 17.6499 6.50486 17.3799C6.57486 17.0099 6.49486 16.6299 6.27486 16.3099C5.85486 15.6899 5.07486 15.5199 4.10486 15.8299C3.83486 15.9199 3.69486 16.1999 3.77486 16.4599C3.86486 16.7299 4.14486 16.8699 4.40486 16.7899C4.70486 16.6999 5.24486 16.5799 5.45486 16.8899C5.51486 16.9899 5.54486 17.0999 5.52486 17.1999C5.51486 17.2699 5.47486 17.3599 5.36486 17.4299C5.26486 17.4999 5.12486 17.5399 4.95486 17.5799L4.77486 17.6299C4.54486 17.6999 4.40486 17.9099 4.41486 18.1499C4.42486 18.3899 4.61486 18.5799 4.84486 18.6099C5.20486 18.6599 5.58486 18.8299 5.63486 19.0799C5.67486 19.2999 5.46486 19.5499 5.25486 19.6299C4.94486 19.7599 4.52486 19.7099 4.21486 19.5199C3.97486 19.3699 3.67486 19.4399 3.52486 19.6799C3.37486 19.9199 3.44486 20.2299 3.68486 20.3699ZM20.195 18.7999H9.19497C8.86497 18.7999 8.59497 18.5299 8.59497 18.1999C8.59497 17.8699 8.86497 17.5999 9.19497 17.5999H20.195C20.525 17.5999 20.795 17.8699 20.795 18.1999C20.795 18.5299 20.525 18.7999 20.195 18.7999ZM9.19497 12.5999H20.195C20.525 12.5999 20.795 12.3299 20.795 11.9999C20.795 11.6699 20.525 11.3999 20.195 11.3999H9.19497C8.86497 11.3999 8.59497 11.6699 8.59497 11.9999C8.59497 12.3299 8.86497 12.5999 9.19497 12.5999Z"/></svg>',
+					},
+					'|',
+					{
+						name: 'clean-block',
+						action: EasyMDE.cleanBlock,
+						title: 'Clean Block',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.25989 6.18384H20.4513C20.7823 6.18384 21.0509 6.45239 21.0509 6.78345V17.9749C21.0509 18.3059 20.7823 18.5745 20.4513 18.5745H9.25989C9.0929 18.5745 8.93469 18.5061 8.82043 18.384L3.6095 12.7883C3.39563 12.5579 3.39563 12.2004 3.6095 11.97L8.82043 6.37427C8.93469 6.2522 9.0929 6.18384 9.25989 6.18384ZM9.52063 17.3752H19.8517V7.38306H9.52063L4.86926 12.3792L9.52063 17.3752ZM12.7755 15.0686C12.6222 15.0686 12.4679 15.01 12.3517 14.8928C12.1173 14.6584 12.1173 14.2786 12.3517 14.0452L14.0503 12.3469L12.3517 10.6487C12.1173 10.4153 12.1173 10.0354 12.3517 9.80103C12.5841 9.56665 12.965 9.56665 13.1993 9.80103L14.8981 11.4994L16.5968 9.80103C16.8312 9.56665 17.212 9.56665 17.4445 9.80103C17.6788 10.0354 17.6788 10.4153 17.4445 10.6487L15.7458 12.3469L17.4445 14.0452C17.6788 14.2786 17.6788 14.6584 17.4445 14.8928C17.3282 15.01 17.174 15.0686 17.0206 15.0686C16.8673 15.0686 16.714 15.01 16.5968 14.8928L14.8981 13.1945L13.1993 14.8928C13.0822 15.01 12.9288 15.0686 12.7755 15.0686Z"/></svg>',
+					},
+					{
+						name: 'link',
+						action: EasyMDE.drawLink,
+						title: 'Link',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.4399 15.3452C11.4999 15.3652 11.5699 15.3752 11.6299 15.3752C11.8799 15.3752 12.1199 15.2152 12.1999 14.9652C12.2999 14.6452 12.1299 14.3052 11.8199 14.2052C11.3499 14.0452 10.9299 13.7852 10.5699 13.4152C10.1999 13.0552 9.9399 12.6452 9.7799 12.1552C9.6599 11.8252 9.5999 11.4652 9.5999 11.0952C9.5999 10.2152 9.9399 9.38518 10.5699 8.75518L15.1599 4.15518C16.4499 2.87518 18.5399 2.87518 19.8299 4.15518C20.4499 4.78518 20.7899 5.61518 20.7899 6.49518C20.7899 7.37518 20.4499 8.20518 19.8299 8.82518L16.7399 11.9052C16.5099 12.1452 16.5099 12.5252 16.7399 12.7552C16.9799 12.9852 17.3599 12.9852 17.5899 12.7552L20.6799 9.67518C21.5299 8.83518 21.9999 7.69518 21.9999 6.49518C21.9999 5.29518 21.5299 4.16518 20.6899 3.30518C18.9299 1.55518 16.0799 1.55518 14.3199 3.30518L9.7299 7.90518C8.8699 8.75518 8.3999 9.88518 8.3999 11.0952C8.3999 11.6152 8.4899 12.1152 8.6499 12.5552C8.8599 13.1952 9.2399 13.7952 9.7199 14.2652C10.1999 14.7552 10.7999 15.1352 11.4399 15.3452ZM3.32 20.6851C4.2 21.5551 5.35 21.9951 6.5 21.9951C7.65 21.9951 8.81 21.5551 9.69 20.7051L14.28 16.1051C15.14 15.2551 15.61 14.1251 15.61 12.9151C15.61 12.4551 15.54 11.9951 15.4 11.5551C15.17 10.8651 14.8 10.2551 14.28 9.73509C13.76 9.21509 13.15 8.84509 12.46 8.61509C12.14 8.51509 11.8 8.68509 11.7 8.99509C11.6 9.30509 11.77 9.64509 12.1 9.75509C12.61 9.91509 13.06 10.1951 13.44 10.5751C13.82 10.9551 14.09 11.4051 14.26 11.9151C14.36 12.2351 14.41 12.5651 14.41 12.9051C14.41 13.7951 14.06 14.6251 13.43 15.2451L8.84 19.8451C7.55 21.1251 5.46 21.1251 4.17 19.8451C3.55 19.2151 3.21 18.3951 3.21 17.5051C3.21 16.6151 3.55 15.7851 4.17 15.1651L7.35 11.9851C7.58 11.7451 7.59 11.3651 7.35 11.1351C7.11 10.9051 6.73 10.9051 6.5 11.1351L3.32 14.3151C2.47 15.1551 2 16.2851 2 17.4951C2 18.7051 2.47 19.8351 3.32 20.6851Z"/></svg>',
+					},
+					{
+						name: 'image',
+						action: EasyMDE.drawImage,
+						title: 'Image',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 4C2.89543 4 2 4.89543 2 6V16V17.5152V18C2 19.1046 2.89543 20 4 20H20C21.0528 20 21.9156 19.1866 21.9942 18.1539L22 18.1632V18V16V6C22 4.89543 21.1046 4 20 4H4ZM3.2 17.7V16.5642L6.78192 13.7254C6.8616 13.6622 6.97597 13.6689 7.04776 13.7409L10.3126 17.0146C10.7026 17.4056 11.3357 17.4065 11.7268 17.0165C11.7606 16.9827 11.792 16.9465 11.8207 16.9083L16.736 10.352C16.8023 10.2636 16.9277 10.2457 17.016 10.312C17.0355 10.3265 17.0521 10.3445 17.0651 10.365L20.8 16.2669V17.7C20.8 18.3075 20.3075 18.8 19.7 18.8H4.3C3.69249 18.8 3.2 18.3075 3.2 17.7ZM17.3865 8.61836L20.8 14.08V6.3C20.8 5.69249 20.3075 5.2 19.7 5.2H4.3C3.69249 5.2 3.2 5.69249 3.2 6.3V15.04L6.65054 12.2796C6.84949 12.1204 7.13629 12.1363 7.31645 12.3164L10.8369 15.8369C10.915 15.915 11.0417 15.915 11.1198 15.8369C11.1265 15.8302 16.5625 8.58336 16.5625 8.58336C16.7282 8.36245 17.0416 8.31768 17.2625 8.48336C17.3118 8.52034 17.3538 8.56611 17.3865 8.61836ZM8 8.5C8 9.32843 7.32843 10 6.5 10C5.67157 10 5 9.32843 5 8.5C5 7.67157 5.67157 7 6.5 7C7.32843 7 8 7.67157 8 8.5Z"/></svg>',
+					},
+					{
+						name: 'table',
+						action: EasyMDE.drawTable,
+						title: 'Table',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.18524 3.08496H19.4152C20.6752 3.08496 21.7152 4.11496 21.7152 5.38496V18.615C21.7152 19.885 20.6852 20.915 19.4152 20.915H6.18524C4.91524 20.915 3.88525 19.885 3.88525 18.615V5.38496C3.88525 4.11496 4.91524 3.08496 6.18524 3.08496ZM19.4052 19.705C20.0152 19.705 20.5052 19.215 20.5052 18.605H20.5153V5.38496C20.5153 4.77496 20.0252 4.28496 19.4152 4.28496H6.18524C5.57524 4.28496 5.08521 4.77496 5.08521 5.38496V18.605C5.08521 19.215 5.57524 19.705 6.18524 19.705H19.4052ZM17.4453 9.15503H8.15527C7.82527 9.15503 7.5553 9.42503 7.5553 9.75503C7.5553 10.085 7.82527 10.355 8.15527 10.355H17.4453C17.7753 10.355 18.0453 10.085 18.0453 9.75503C18.0453 9.42503 17.7753 9.15503 17.4453 9.15503ZM17.4453 13.635H8.15527C7.82527 13.635 7.5553 13.905 7.5553 14.235C7.5553 14.565 7.82527 14.835 8.15527 14.835H17.4453C17.7753 14.835 18.0453 14.565 18.0453 14.235C18.0453 13.905 17.7753 13.635 17.4453 13.635Z"/></svg>',
+					},
+					{
+						name: 'horizontal-rule',
+						action: EasyMDE.drawHorizontalRule,
+						title: 'Horizontal Rule',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 13H3C2.45 13 2 12.55 2 12C2 11.45 2.45 11 3 11H21C21.55 11 22 11.45 22 12C22 12.55 21.55 13 21 13Z"/></svg>',
+					},
+					'|',
+					{
+						name: 'side-by-side',
+						action: EasyMDE.toggleSideBySide,
+						title: 'Side By Side',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.4787 14.58C18.3587 14.69 18.2987 14.85 18.2987 15C18.2987 15.15 18.3587 15.31 18.4787 15.42C18.7187 15.65 19.0987 15.65 19.3287 15.42L22.3287 12.42C22.5587 12.18 22.5587 11.8 22.3287 11.57L19.3287 8.56996C19.0887 8.33996 18.7087 8.33996 18.4787 8.56996C18.2487 8.80996 18.2487 9.18996 18.4787 9.41996L20.451 11.3999L14.4487 11.3999L14.4487 4.6C14.4487 4.27 14.1787 4 13.8487 4C13.5187 4 13.2487 4.27 13.2487 4.6L13.2487 19.4C13.2487 19.73 13.5187 20 13.8487 20C14.1787 20 14.4487 19.73 14.4487 19.4L14.4487 12.5999L20.4511 12.5999L18.4787 14.58ZM9.54878 19.4L9.54878 12.5999L3.5486 12.5999L5.52867 14.58C5.75867 14.81 5.75867 15.19 5.52867 15.43C5.29867 15.66 4.91867 15.66 4.67867 15.43L1.67867 12.43C1.63274 12.384 1.5956 12.3323 1.56725 12.2774C1.53058 12.2077 1.50724 12.1299 1.50068 12.0477C1.49934 12.0317 1.49867 12.0158 1.49867 12C1.49867 11.9841 1.49933 11.9682 1.50067 11.9522C1.51454 11.778 1.60365 11.6242 1.73526 11.5234L4.67867 8.57997C4.90867 8.34997 5.28867 8.34997 5.52867 8.57997C5.75867 8.80997 5.75867 9.18997 5.52867 9.42997L3.55107 11.3999L9.54878 11.3999L9.54878 4.6C9.54878 4.27 9.81878 4 10.1488 4C10.4788 4 10.7488 4.27 10.7488 4.6L10.7488 11.9999L10.7488 19.4C10.7488 19.73 10.4788 20 10.1488 20C9.81878 20 9.54878 19.73 9.54878 19.4Z"/></svg>',
+					},
+					{
+						name: 'guide',
+						action: () => {
+							window.open('https://www.markdownguide.org/basic-syntax/', '_blank')
+						},
+						title: 'Guide',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.4999 2.3999H6.4999C5.0699 2.3999 3.8999 3.5699 3.8999 4.9999V18.9999C3.8999 20.4299 5.0699 21.5999 6.4999 21.5999H19.4999C19.8299 21.5999 20.0999 21.3299 20.0999 20.9999V16.9999V2.9999C20.0999 2.6699 19.8299 2.3999 19.4999 2.3999ZM5.0999 4.9999V16.8118C5.50468 16.5513 5.98546 16.3999 6.4999 16.3999H18.8999V3.5999H6.4999C5.7299 3.5999 5.0999 4.2299 5.0999 4.9999ZM6.4999 17.5999H18.8999V20.3999H6.4999C5.7299 20.3999 5.0999 19.7699 5.0999 18.9999C5.0999 18.2299 5.7299 17.5999 6.4999 17.5999ZM8.4999 8.5999H15.4999C15.8299 8.5999 16.0999 8.3299 16.0999 7.9999C16.0999 7.6699 15.8299 7.3999 15.4999 7.3999H8.4999C8.1699 7.3999 7.8999 7.6699 7.8999 7.9999C7.8999 8.3299 8.1699 8.5999 8.4999 8.5999ZM15.4999 11.3999H8.4999C8.1699 11.3999 7.8999 11.6699 7.8999 11.9999C7.8999 12.3299 8.1699 12.5999 8.4999 12.5999H15.4999C15.8299 12.5999 16.0999 12.3299 16.0999 11.9999C16.0999 11.6699 15.8299 11.3999 15.4999 11.3999Z"/></svg>',
+					},
+				],
+			},
+		}
+	},
+	watch: {
+		value(newVal) {
+			this.text = newVal
+			this.$nextTick(this.renderPreview)
+		},
+		text(newVal, oldVal) {
+			if (oldVal === '') {
 				return
 			}
-
-			this.isPreviewActive = false
-			this.isEditActive = true
+			this.bubble()
 		},
-		methods: {
-			// This gets triggered when only pasting content into the editor.
-			// A change event would not get generated by that, an input event does.
-			// Therefore, we're using this handler to catch paste events.
-			// But because this also gets triggered when typing into the editor, we give
-			// it a higher timeout to make the timouts cancel each other in that case so
-			// that in the end, only one change event is triggered to the outside per change.
-			handleInput(val) {
-				this.text = val
-				this.bubble(1000)
-			},
-			bubble(timeout = 500) {
-				if (this.changeTimeout !== null) {
-					clearTimeout(this.changeTimeout)
-				}
+	},
+	beforeMount() {
+		this.text = this.value
 
-				this.changeTimeout = setTimeout(() => {
-					this.$emit('input', this.text)
-					this.$emit('change')
-				}, timeout)
-			},
-			replaceAt(str, index, replacement) {
-				return str.substr(0, index) + replacement + str.substr(index + replacement.length);
-			},
-			findNthIndex(str, n) {
+		if (this.previewIsDefault && this.hasPreview) {
+			this.$nextTick(this.renderPreview)
+			return
+		}
 
-				const searchChecked = '* [x] '
-				const searchUnchecked = '* [ ] '
+		this.isPreviewActive = false
+		this.isEditActive = true
+	},
+	methods: {
+		// This gets triggered when only pasting content into the editor.
+		// A change event would not get generated by that, an input event does.
+		// Therefore, we're using this handler to catch paste events.
+		// But because this also gets triggered when typing into the editor, we give
+		// it a higher timeout to make the timouts cancel each other in that case so
+		// that in the end, only one change event is triggered to the outside per change.
+		handleInput(val) {
+			this.text = val
+			this.bubble(1000)
+		},
+		bubble(timeout = 500) {
+			if (this.changeTimeout !== null) {
+				clearTimeout(this.changeTimeout)
+			}
 
-				let inChecked, inUnchecked, startIndex = 0
-				// We're building an array with all checkboxes, checked or unchecked.
-				// I've found this to be the best way to always get the results I need.
-				// The difficulty without an index is that we need to get all checkboxes, checked and unchecked
-				// and calculate our index based off that to compare it and find the checkbox we need.
-				let checkboxes = []
+			this.changeTimeout = setTimeout(() => {
+				this.$emit('input', this.text)
+				this.$emit('change')
+			}, timeout)
+		},
+		replaceAt(str, index, replacement) {
+			return str.substr(0, index) + replacement + str.substr(index + replacement.length)
+		},
+		findNthIndex(str, n) {
 
-				// Searching in two different loops for each search term since that is way easier and more predicatble
-				// More "intelligent" solutions sometimes don't have all values or duplicates.
-				// Because we're sorting and removing duplicates of them, we can safely put everything in one giant array.
-				while ((inChecked = str.indexOf(searchChecked, startIndex)) > -1) {
-					checkboxes.push(inChecked)
-					startIndex = startIndex + searchChecked.length
-				}
+			const searchChecked = '* [x] '
+			const searchUnchecked = '* [ ] '
 
-				startIndex = 0
-				while ((inUnchecked = str.indexOf(searchUnchecked, startIndex)) > -1) {
-					checkboxes.push(inUnchecked)
-					startIndex = startIndex + searchUnchecked.length
-				}
+			let inChecked, inUnchecked, startIndex = 0
+			// We're building an array with all checkboxes, checked or unchecked.
+			// I've found this to be the best way to always get the results I need.
+			// The difficulty without an index is that we need to get all checkboxes, checked and unchecked
+			// and calculate our index based off that to compare it and find the checkbox we need.
+			let checkboxes = []
 
-				checkboxes.sort((a, b) => a - b)
-				checkboxes = checkboxes.filter((v, i, s) => s.indexOf(v) === i && v > -1)
+			// Searching in two different loops for each search term since that is way easier and more predicatble
+			// More "intelligent" solutions sometimes don't have all values or duplicates.
+			// Because we're sorting and removing duplicates of them, we can safely put everything in one giant array.
+			while ((inChecked = str.indexOf(searchChecked, startIndex)) > -1) {
+				checkboxes.push(inChecked)
+				startIndex = startIndex + searchChecked.length
+			}
 
-				return checkboxes[n]
-			},
-			renderPreview() {
-				let checkboxNum = -1
-				marked.use({
-					renderer: {
-						image: (src, title, text) => {
+			startIndex = 0
+			while ((inUnchecked = str.indexOf(searchUnchecked, startIndex)) > -1) {
+				checkboxes.push(inUnchecked)
+				startIndex = startIndex + searchUnchecked.length
+			}
 
-							title = title ? ` title="${title}` : ''
+			checkboxes.sort((a, b) => a - b)
+			checkboxes = checkboxes.filter((v, i, s) => s.indexOf(v) === i && v > -1)
 
-							// If the url starts with the api url, the image is likely an attachment and
-							// we'll need to download and parse it properly.
-							if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) {
-								return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>`
-							}
+			return checkboxes[n]
+		},
+		renderPreview() {
+			let checkboxNum = -1
+			marked.use({
+				renderer: {
+					image: (src, title, text) => {
 
-							return `<img src="${src}" alt="${text}" ${title}/>`
-						},
-						checkbox: (checked) => {
-							if (checked) {
-								checked = ' checked="checked"'
-							}
+						title = title ? ` title="${title}` : ''
 
-							checkboxNum++
-							return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this._uid}"/>`
-						},
-					}
-				})
-
-				this.preview = DOMPurify.sanitize(marked(this.text))
-
-				// Since the render function is synchronous, we can't do async http requests in it.
-				// Therefore, we can't resolve the blob url at (markdown) compile time.
-				// To work around this, we modify the url after rendering it in the vue component.
-				// We're doing the whole thing in the next tick to ensure the image elements are available in the
-				// dom tree. If we're calling this right after setting this.preview it could be the images were
-				// not already made available.
-				// Some docs at https://stackoverflow.com/q/62865160/10924593
-				this.$nextTick(() => {
-					document.getElementsByClassName('attachment-image').forEach(img => {
-						// The url is something like /tasks/<id>/attachments/<id>
-						const parts = img.dataset.src.substr(window.API_URL.length + 1).split('/')
-						const taskId = parseInt(parts[1])
-						const attachmentId = parseInt(parts[3])
-						const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
-
-						if (this.attachmentService === null) {
-							this.attachmentService = new AttachmentService()
+						// If the url starts with the api url, the image is likely an attachment and
+						// we'll need to download and parse it properly.
+						if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) {
+							return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>`
 						}
 
-						this.attachmentService.getBlobUrl(attachment)
-							.then(url => {
-								img.src = url
-							})
-					})
+						return `<img src="${src}" alt="${text}" ${title}/>`
+					},
+					checkbox: (checked) => {
+						if (checked) {
+							checked = ' checked="checked"'
+						}
 
-					document.getElementsByClassName(`text-checkbox-${this._uid}`).forEach(check => {
-						check.removeEventListener('change', this.handleCheckboxClick)
-						check.addEventListener('change', this.handleCheckboxClick)
-					})
+						checkboxNum++
+						return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this._uid}"/>`
+					},
+				},
+			})
+
+			this.preview = DOMPurify.sanitize(marked(this.text))
+
+			// Since the render function is synchronous, we can't do async http requests in it.
+			// Therefore, we can't resolve the blob url at (markdown) compile time.
+			// To work around this, we modify the url after rendering it in the vue component.
+			// We're doing the whole thing in the next tick to ensure the image elements are available in the
+			// dom tree. If we're calling this right after setting this.preview it could be the images were
+			// not already made available.
+			// Some docs at https://stackoverflow.com/q/62865160/10924593
+			this.$nextTick(() => {
+				document.getElementsByClassName('attachment-image').forEach(img => {
+					// The url is something like /tasks/<id>/attachments/<id>
+					const parts = img.dataset.src.substr(window.API_URL.length + 1).split('/')
+					const taskId = parseInt(parts[1])
+					const attachmentId = parseInt(parts[3])
+					const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
+
+					if (this.attachmentService === null) {
+						this.attachmentService = new AttachmentService()
+					}
+
+					this.attachmentService.getBlobUrl(attachment)
+						.then(url => {
+							img.src = url
+						})
 				})
-			},
-			handleCheckboxClick(e) {
-				// Find the original markdown checkbox this is targeting
-				const checked = e.target.checked
-				const numMarkdownCheck = parseInt(e.target.dataset.checkboxNum)
 
-				const index = this.findNthIndex(this.text, numMarkdownCheck)
-				if (index < 0 || typeof index === 'undefined') {
-					console.log('no index found')
-					return
-				}
-				console.log(index, this.text.substr(index, 9))
-
-				if (checked) {
-					this.text = this.replaceAt(this.text, index, '* [x] ')
-				} else {
-					this.text = this.replaceAt(this.text, index, '* [ ] ')
-				}
-				this.bubble()
-				this.renderPreview()
-			},
-			showPreview() {
-				this.isPreviewActive = true
-				this.isEditActive = false
-				this.renderPreview()
-			},
+				document.getElementsByClassName(`text-checkbox-${this._uid}`).forEach(check => {
+					check.removeEventListener('change', this.handleCheckboxClick)
+					check.addEventListener('change', this.handleCheckboxClick)
+				})
+			})
 		},
-	}
+		handleCheckboxClick(e) {
+			// Find the original markdown checkbox this is targeting
+			const checked = e.target.checked
+			const numMarkdownCheck = parseInt(e.target.dataset.checkboxNum)
+
+			const index = this.findNthIndex(this.text, numMarkdownCheck)
+			if (index < 0 || typeof index === 'undefined') {
+				console.log('no index found')
+				return
+			}
+			console.log(index, this.text.substr(index, 9))
+
+			if (checked) {
+				this.text = this.replaceAt(this.text, index, '* [x] ')
+			} else {
+				this.text = this.replaceAt(this.text, index, '* [ ] ')
+			}
+			this.bubble()
+			this.renderPreview()
+		},
+		showPreview() {
+			this.isPreviewActive = true
+			this.isEditActive = false
+			this.renderPreview()
+		},
+	},
+}
 </script>
 
 <style lang="scss">
-	@import '../../../node_modules/easymde/dist/easymde.min.css';
-	@import '../../styles/theme/variables';
+@import '../../../node_modules/easymde/dist/easymde.min.css';
+@import '../../styles/theme/variables';
 
-	.editor {
-		.tabs ul {
-			margin-left: 0;
-		}
+.editor {
+	.tabs ul {
+		margin-left: 0;
 	}
+}
 
-	.CodeMirror {
-		padding: 0;
-		border: 1px solid $editor-border-color;
+.CodeMirror {
+	padding: 0;
+	border: 1px solid $editor-border-color;
 
-		&-lines pre {
-			margin: 0 !important;
-		}
+	&-lines pre {
+		margin: 0 !important;
 	}
+}
 
-	.CodeMirror-scroll {
-		padding: .5em;
-	}
+.CodeMirror-scroll {
+	padding: .5em;
+}
 
-	.editor-toolbar {
-		background: #ffffff;
-		border-top: 1px solid $editor-border-color;
-		border-left: 1px solid $editor-border-color;
-		border-right: 1px solid $editor-border-color;
+.editor-toolbar {
+	background: #ffffff;
+	border-top: 1px solid $editor-border-color;
+	border-left: 1px solid $editor-border-color;
+	border-right: 1px solid $editor-border-color;
 
-		button {
-			svg {
-				vertical-align: middle;
+	button {
+		svg {
+			vertical-align: middle;
 
-				&, rect {
-					width: 20px;
-					height: 20px;
-				}
-			}
-
-			&:after {
-				position: absolute;
-				top: 24px;
-				margin-left: -3px;
+			&, rect {
+				width: 20px;
+				height: 20px;
 			}
 		}
-	}
 
-	pre.CodeMirror-line {
-		margin-bottom: 0 !important;
+		&:after {
+			position: absolute;
+			top: 24px;
+			margin-left: -3px;
+		}
 	}
+}
 
-	.cm-header {
-		font-family: $vikunja-font;
-		font-weight: 400;
-	}
+pre.CodeMirror-line {
+	margin-bottom: 0 !important;
+}
+
+.cm-header {
+	font-family: $vikunja-font;
+	font-weight: 400;
+}
 </style>
diff --git a/src/components/input/fancycheckbox.vue b/src/components/input/fancycheckbox.vue
index c1edc3b83..a258ec016 100644
--- a/src/components/input/fancycheckbox.vue
+++ b/src/components/input/fancycheckbox.vue
@@ -1,15 +1,16 @@
 <template>
-	<div class="fancycheckbox" :class="{'is-disabled': disabled}">
+	<div :class="{'is-disabled': disabled}" class="fancycheckbox">
 		<input
-				@change="updateData"
-				type="checkbox"
-				:id="checkBoxId"
-				:checked="checked"
-				style="display: none;"
-				:disabled="disabled"/>
+			:checked="checked"
+			:disabled="disabled"
+			:id="checkBoxId"
+			@change="updateData"
+			style="display: none;"
+			type="checkbox"/>
 		<label :for="checkBoxId" class="check">
-			<svg width="18px" height="18px" viewBox="0 0 18 18">
-				<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+			<svg height="18px" viewBox="0 0 18 18" width="18px">
+				<path
+					d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
 				<polyline points="1 9 7 14 15 4"></polyline>
 			</svg>
 			<span>
@@ -20,41 +21,41 @@
 </template>
 
 <script>
-	export default {
-		name: 'fancycheckbox',
-		data() {
-			return {
-				checked: false,
-				checkBoxId: '',
-			}
+export default {
+	name: 'fancycheckbox',
+	data() {
+		return {
+			checked: false,
+			checkBoxId: '',
+		}
+	},
+	props: {
+		value: {
+			required: false,
 		},
-		props: {
-			value: {
-				required: false,
-			},
-			disabled: {
-				type: Boolean,
-				required: false,
-				default: false,
-			},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false,
 		},
-		watch: {
-			value(newVal) {
-				this.checked = newVal
-			},
+	},
+	watch: {
+		value(newVal) {
+			this.checked = newVal
 		},
-		mounted() {
-			this.checked = this.value
+	},
+	mounted() {
+		this.checked = this.value
+	},
+	created() {
+		this.checkBoxId = 'fancycheckbox' + Math.random()
+	},
+	methods: {
+		updateData(e) {
+			this.checked = e.target.checked
+			this.$emit('input', this.checked)
+			this.$emit('change', e.target.checked)
 		},
-		created() {
-			this.checkBoxId = 'fancycheckbox' + Math.random()
-		},
-		methods: {
-			updateData(e) {
-				this.checked = e.target.checked
-				this.$emit('input', this.checked)
-				this.$emit('change', e.target.checked)
-			},
-		},
-	}
+	},
+}
 </script>
diff --git a/src/components/list/partials/background-settings.vue b/src/components/list/partials/background-settings.vue
index cefbb725c..dc87cc69f 100644
--- a/src/components/list/partials/background-settings.vue
+++ b/src/components/list/partials/background-settings.vue
@@ -1,8 +1,8 @@
 <template>
 	<div
-			class="card list-background-setting loader-container"
-			v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled"
-			:class="{ 'is-loading': backgroundService.loading}">
+		:class="{ 'is-loading': backgroundService.loading}"
+		class="card list-background-setting loader-container"
+		v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled">
 		<header class="card-header">
 			<p class="card-header-title">
 				Set list background
@@ -11,47 +11,47 @@
 		<div class="card-content">
 			<div class="content" v-if="uploadBackgroundEnabled">
 				<input
-						type="file"
-						ref="backgroundUploadInput"
-						@change="uploadBackground"
-						class="is-hidden"
-						accept="image/*"
+					@change="uploadBackground"
+					accept="image/*"
+					class="is-hidden"
+					ref="backgroundUploadInput"
+					type="file"
 				/>
 				<a
-						class="button is-primary"
-						:class="{'is-loading': backgroundUploadService.loading}"
-						@click="$refs.backgroundUploadInput.click()"
+					:class="{'is-loading': backgroundUploadService.loading}"
+					@click="$refs.backgroundUploadInput.click()"
+					class="button is-primary"
 				>
 					Choose a background from your pc
 				</a>
 			</div>
 			<div class="content" v-if="unsplashBackgroundEnabled">
 				<input
-						type="text"
-						placeholder="Search for a background..."
-						class="input is-expanded"
-						v-model="backgroundSearchTerm"
-						@keyup="() => newBackgroundSearch()"
-						:class="{'is-loading': backgroundService.loading}"
+					:class="{'is-loading': backgroundService.loading}"
+					@keyup="() => newBackgroundSearch()"
+					class="input is-expanded"
+					placeholder="Search for a background..."
+					type="text"
+					v-model="backgroundSearchTerm"
 				/>
 				<p class="unsplash-link"><a href="https://unsplash.com" target="_blank">Powered by Unsplash</a></p>
 				<div class="image-search-result">
 					<a
-							@click="() => setBackground(im.id)"
-							class="image"
-							v-for="im in backgroundSearchResult"
-							:style="{'background-image': `url(${backgroundThumbs[im.id]})`}"
-							:key="im.id">
-						<a class="info" :href="`https://unsplash.com/@${im.info.author}`">
+						:key="im.id"
+						:style="{'background-image': `url(${backgroundThumbs[im.id]})`}"
+						@click="() => setBackground(im.id)"
+						class="image"
+						v-for="im in backgroundSearchResult">
+						<a :href="`https://unsplash.com/@${im.info.author}`" class="info">
 							{{ im.info.authorName }}
 						</a>
 					</a>
 				</div>
 				<a
-						v-if="backgroundSearchResult.length > 0"
-						class="button is-primary is-centered is-load-more-button is-outlined noshadow"
-						@click="() => searchBackgrounds(currentPage + 1)"
-						:disabled="backgroundService.loading"
+					:disabled="backgroundService.loading"
+					@click="() => searchBackgrounds(currentPage + 1)"
+					class="button is-primary is-centered is-load-more-button is-outlined noshadow"
+					v-if="backgroundSearchResult.length > 0"
 				>
 					<template v-if="backgroundService.loading">
 						Loading...
@@ -66,110 +66,110 @@
 </template>
 
 <script>
-	import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
-	import BackgroundUploadService from '../../../services/backgroundUpload'
-	import {CURRENT_LIST} from '../../../store/mutation-types'
+import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
+import BackgroundUploadService from '../../../services/backgroundUpload'
+import {CURRENT_LIST} from '@/store/mutation-types'
 
-	export default {
-		name: 'background-settings',
-		data() {
-			return {
-				backgroundSearchTerm: '',
-				backgroundSearchResult: [],
-				backgroundService: null,
-				backgroundThumbs: {},
-				currentPage: 1,
-				backgroundSearchTimeout: null,
+export default {
+	name: 'background-settings',
+	data() {
+		return {
+			backgroundSearchTerm: '',
+			backgroundSearchResult: [],
+			backgroundService: null,
+			backgroundThumbs: {},
+			currentPage: 1,
+			backgroundSearchTimeout: null,
 
-				backgroundUploadService: null,
+			backgroundUploadService: null,
+		}
+	},
+	props: {
+		listId: {
+			default: 0,
+			required: true,
+		},
+	},
+	computed: {
+		unsplashBackgroundEnabled() {
+			return this.$store.state.config.enabledBackgroundProviders.includes('unsplash')
+		},
+		uploadBackgroundEnabled() {
+			return this.$store.state.config.enabledBackgroundProviders.includes('upload')
+		},
+	},
+	created() {
+		this.backgroundService = new BackgroundUnsplashService()
+		this.backgroundUploadService = new BackgroundUploadService()
+		// Show the default collection of backgrounds
+		this.newBackgroundSearch()
+	},
+	methods: {
+		newBackgroundSearch() {
+			if (!this.unsplashBackgroundEnabled) {
+				return
 			}
+			// This is an extra method to reset a few things when searching to not break loading more photos.
+			this.$set(this, 'backgroundSearchResult', [])
+			this.$set(this, 'backgroundThumbs', {})
+			this.searchBackgrounds()
 		},
-		props: {
-			listId: {
-				default: 0,
-				required: true,
+		searchBackgrounds(page = 1) {
+
+			if (this.backgroundSearchTimeout !== null) {
+				clearTimeout(this.backgroundSearchTimeout)
 			}
-		},
-		computed: {
-			unsplashBackgroundEnabled() {
-				return this.$store.state.config.enabledBackgroundProviders.includes('unsplash')
-			},
-			uploadBackgroundEnabled() {
-				return this.$store.state.config.enabledBackgroundProviders.includes('upload')
-			},
-		},
-		created() {
-			this.backgroundService = new BackgroundUnsplashService()
-			this.backgroundUploadService = new BackgroundUploadService()
-			// Show the default collection of backgrounds
-			this.newBackgroundSearch()
-		},
-		methods: {
-			newBackgroundSearch() {
-				if (!this.unsplashBackgroundEnabled) {
-					return
-				}
-				// This is an extra method to reset a few things when searching to not break loading more photos.
-				this.$set(this, 'backgroundSearchResult', [])
-				this.$set(this, 'backgroundThumbs', {})
-				this.searchBackgrounds()
-			},
-			searchBackgrounds(page = 1) {
 
-				if (this.backgroundSearchTimeout !== null) {
-					clearTimeout(this.backgroundSearchTimeout)
-				}
-
-				// We're using the timeout to not search on every keypress but with a 300ms delay.
-				// If another key is pressed within these 300ms, the last search request is dropped and a new one is scheduled.
-				this.backgroundSearchTimeout = setTimeout(() => {
-					this.currentPage = page
-					this.backgroundService.getAll({}, {s: this.backgroundSearchTerm, p: page})
-						.then(r => {
-							this.backgroundSearchResult = this.backgroundSearchResult.concat(r)
-							r.forEach(b => {
-								this.backgroundService.thumb(b)
-									.then(t => {
-										this.$set(this.backgroundThumbs, b.id, t)
-									})
-							})
+			// We're using the timeout to not search on every keypress but with a 300ms delay.
+			// If another key is pressed within these 300ms, the last search request is dropped and a new one is scheduled.
+			this.backgroundSearchTimeout = setTimeout(() => {
+				this.currentPage = page
+				this.backgroundService.getAll({}, {s: this.backgroundSearchTerm, p: page})
+					.then(r => {
+						this.backgroundSearchResult = this.backgroundSearchResult.concat(r)
+						r.forEach(b => {
+							this.backgroundService.thumb(b)
+								.then(t => {
+									this.$set(this.backgroundThumbs, b.id, t)
+								})
 						})
-						.catch(e => {
-							this.error(e, this)
-						})
-				}, 300)
-			},
-			setBackground(backgroundId) {
-				// Don't set a background if we're in the process of setting one
-				if (this.backgroundService.loading) {
-					return
-				}
-
-				this.backgroundService.update({id: backgroundId, listId: this.listId})
-					.then(l => {
-						this.$store.commit(CURRENT_LIST, l)
-						this.$store.commit('namespaces/setListInNamespaceById', l)
-						this.success({message: 'The background has been set successfully!'}, this)
 					})
 					.catch(e => {
 						this.error(e, this)
 					})
-			},
-			uploadBackground() {
-				if (this.$refs.backgroundUploadInput.files.length === 0) {
-					return
-				}
-
-				this.backgroundUploadService.create(this.listId, this.$refs.backgroundUploadInput.files[0])
-					.then(l => {
-						this.$store.commit(CURRENT_LIST, l)
-						this.$store.commit('namespaces/setListInNamespaceById', l)
-						this.success({message: 'The background has been set successfully!'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
+			}, 300)
 		},
-	}
+		setBackground(backgroundId) {
+			// Don't set a background if we're in the process of setting one
+			if (this.backgroundService.loading) {
+				return
+			}
+
+			this.backgroundService.update({id: backgroundId, listId: this.listId})
+				.then(l => {
+					this.$store.commit(CURRENT_LIST, l)
+					this.$store.commit('namespaces/setListInNamespaceById', l)
+					this.success({message: 'The background has been set successfully!'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		uploadBackground() {
+			if (this.$refs.backgroundUploadInput.files.length === 0) {
+				return
+			}
+
+			this.backgroundUploadService.create(this.listId, this.$refs.backgroundUploadInput.files[0])
+				.then(l => {
+					this.$store.commit(CURRENT_LIST, l)
+					this.$store.commit('namespaces/setListInNamespaceById', l)
+					this.success({message: 'The background has been set successfully!'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
 </script>
diff --git a/src/components/list/partials/filters.vue b/src/components/list/partials/filters.vue
index 46f157592..d4a5ce066 100644
--- a/src/components/list/partials/filters.vue
+++ b/src/components/list/partials/filters.vue
@@ -13,11 +13,11 @@
 				<label class="label">Due Date</label>
 				<div class="control">
 					<flat-pickr
-							class="input"
-							:config="flatPickerConfig"
-							placeholder="Due Date Range"
-							v-model="filters.dueDate"
-							@on-close="setDueDateFilter"
+						:config="flatPickerConfig"
+						@on-close="setDueDateFilter"
+						class="input"
+						placeholder="Due Date Range"
+						v-model="filters.dueDate"
 					/>
 				</div>
 			</div>
@@ -26,127 +26,127 @@
 </template>
 
 <script>
-	import Fancycheckbox from '../../input/fancycheckbox'
-	import flatPickr from 'vue-flatpickr-component'
-	import 'flatpickr/dist/flatpickr.css'
+import Fancycheckbox from '../../input/fancycheckbox'
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
 
-	export default {
-		name: 'filters',
-		components: {
-			Fancycheckbox,
-			flatPickr,
+export default {
+	name: 'filters',
+	components: {
+		Fancycheckbox,
+		flatPickr,
+	},
+	data() {
+		return {
+			params: {
+				sort_by: [],
+				order_by: [],
+				filter_by: [],
+				filter_value: [],
+				filter_comparator: [],
+			},
+			filters: {
+				done: false,
+				dueDate: '',
+			},
+			flatPickerConfig: {
+				altFormat: 'j M Y H:i',
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				time_24hr: true,
+				mode: 'range',
+			},
+		}
+	},
+	mounted() {
+		this.params = this.value
+		this.prepareDone()
+	},
+	props: {
+		value: {
+			required: true,
 		},
-		data() {
-			return {
-				params: {
-					sort_by: [],
-					order_by: [],
-					filter_by: [],
-					filter_value: [],
-					filter_comparator: [],
-				},
-				filters: {
-					done: false,
-					dueDate: '',
-				},
-				flatPickerConfig: {
-					altFormat: 'j M Y H:i',
-					altInput: true,
-					dateFormat: 'Y-m-d H:i',
-					enableTime: true,
-					time_24hr: true,
-					mode: 'range',
-				},
-			}
-		},
-		mounted() {
-			this.params = this.value
+	},
+	watch: {
+		value(newVal) {
+			this.$set(this, 'params', newVal)
 			this.prepareDone()
 		},
-		props: {
-			value: {
-				required: true,
+	},
+	methods: {
+		change() {
+			this.$emit('input', this.params)
+			this.$emit('change', this.params)
+		},
+		prepareDone() {
+			// Set filters.done based on params
+			if (typeof this.params.filter_by !== 'undefined') {
+				let foundDone = false
+				this.params.filter_by.forEach((f, i) => {
+					if (f === 'done') {
+						foundDone = i
+					}
+				})
+				if (foundDone === false) {
+					this.filters.done = true
+				}
 			}
 		},
-		watch: {
-			value(newVal) {
-				this.$set(this, 'params', newVal)
-				this.prepareDone()
-			}
-		},
-		methods: {
-			change() {
-				this.$emit('input', this.params)
-				this.$emit('change', this.params)
-			},
-			prepareDone() {
-				// Set filters.done based on params
-				if(typeof this.params.filter_by !== 'undefined') {
-					let foundDone = false
-					this.params.filter_by.forEach((f, i) => {
-						if (f === 'done') {
-							foundDone = i
-						}
-					})
-					if (foundDone === false) {
-						this.filters.done = true
+		setDoneFilter() {
+			if (this.filters.done) {
+				for (const i in this.params.filter_by) {
+					if (this.params.filter_by[i] === 'done') {
+						this.params.filter_by.splice(i, 1)
+						this.params.filter_comparator.splice(i, 1)
+						this.params.filter_value.splice(i, 1)
+						break
 					}
 				}
-			},
-			setDoneFilter() {
-				if (this.filters.done) {
-					for (const i in this.params.filter_by) {
-						if (this.params.filter_by[i] === 'done') {
-							this.params.filter_by.splice(i, 1)
-							this.params.filter_comparator.splice(i, 1)
-							this.params.filter_value.splice(i, 1)
-							break
-						}
+			} else {
+				this.params.filter_by.push('done')
+				this.params.filter_comparator.push('equals')
+				this.params.filter_value.push('false')
+			}
+			this.change()
+		},
+		setDueDateFilter() {
+			// Only filter if we have a start and end due date
+			if (this.filters.dueDate !== '') {
+
+				const parts = this.filters.dueDate.split(' to ')
+
+				if (parts.length < 2) {
+					return
+				}
+
+				// Check if we already have values in params and only update them if we do
+				let foundStart = false
+				let foundEnd = false
+				this.params.filter_by.forEach((f, i) => {
+					if (f === 'due_date' && this.params.filter_comparator[i] === 'greater_equals') {
+						foundStart = true
+						this.params.filter_value[i] = +new Date(parts[0]) / 1000
 					}
-				} else {
-					this.params.filter_by.push('done')
-					this.params.filter_comparator.push('equals')
-					this.params.filter_value.push('false')
+					if (f === 'due_date' && this.params.filter_comparator[i] === 'less_equals') {
+						foundEnd = true
+						this.params.filter_value[i] = +new Date(parts[1]) / 1000
+					}
+				})
+
+				if (!foundStart) {
+					this.params.filter_by.push('due_date')
+					this.params.filter_comparator.push('greater_equals')
+					this.params.filter_value.push(+new Date(parts[0]) / 1000)
+				}
+				if (!foundEnd) {
+					this.params.filter_by.push('due_date')
+					this.params.filter_comparator.push('less_equals')
+					this.params.filter_value.push(+new Date(parts[1]) / 1000)
 				}
 				this.change()
-			},
-			setDueDateFilter() {
-				// Only filter if we have a start and end due date
-				if (this.filters.dueDate !== '') {
-
-					const parts = this.filters.dueDate.split(' to ')
-
-					if(parts.length < 2) {
-						return
-					}
-
-					// Check if we already have values in params and only update them if we do
-					let foundStart = false
-					let foundEnd = false
-					this.params.filter_by.forEach((f, i) => {
-						if (f === 'due_date' && this.params.filter_comparator[i] === 'greater_equals') {
-							foundStart = true
-							this.params.filter_value[i] = +new Date(parts[0]) / 1000
-						}
-						if (f === 'due_date' && this.params.filter_comparator[i] === 'less_equals') {
-							foundEnd = true
-							this.params.filter_value[i] = +new Date(parts[1]) / 1000
-						}
-					})
-
-					if (!foundStart) {
-						this.params.filter_by.push('due_date')
-						this.params.filter_comparator.push('greater_equals')
-						this.params.filter_value.push(+new Date(parts[0]) / 1000)
-					}
-					if (!foundEnd) {
-						this.params.filter_by.push('due_date')
-						this.params.filter_comparator.push('less_equals')
-						this.params.filter_value.push(+new Date(parts[1]) / 1000)
-					}
-					this.change()
-				}
-			},
+			}
 		},
-	}
+	},
+}
 </script>
diff --git a/src/components/migrator/migration.vue b/src/components/migrator/migration.vue
index 21df83000..ac3998114 100644
--- a/src/components/migrator/migration.vue
+++ b/src/components/migrator/migration.vue
@@ -5,18 +5,18 @@
 		<template v-if="isMigrating === false && message === '' && lastMigrationDate === null">
 			<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">
+				:class="{'is-loading': migrationService.loading}"
+				:disabled="migrationService.loading"
+				:href="authUrl"
+				class="button is-primary">
 				Get Started
 			</a>
 		</template>
 		<div
-				class="migration-in-progress-container"
-				v-else-if="isMigrating === true && message === '' && lastMigrationDate === null">
+			class="migration-in-progress-container"
+			v-else-if="isMigrating === true && message === '' && lastMigrationDate === null">
 			<div class="migration-in-progress">
-				<img :src="`/images/migration/${identifier}.png`" :alt="name"/>
+				<img :alt="name" :src="`/images/migration/${identifier}.png`"/>
 				<div class="progress-dots">
 					<span></span>
 					<span></span>
@@ -27,7 +27,7 @@
 					<span></span>
 					<span></span>
 				</div>
-				<img src="/images/logo.svg" alt="Vikunja">
+				<img alt="Vikunja" src="/images/logo.svg">
 			</div>
 			<p>Importing in progress, hang tight...</p>
 		</div>
@@ -38,7 +38,7 @@
 				Are you sure?
 			</p>
 			<div class="buttons">
-				<button class="button is-primary" @click="migrate">I am sure, please start migrating now!</button>
+				<button @click="migrate" class="button is-primary">I am sure, please start migrating now!</button>
 				<router-link :to="{name: 'home'}" class="button is-danger is-outlined">Cancel</router-link>
 			</div>
 		</div>
@@ -54,73 +54,73 @@
 </template>
 
 <script>
-	import AbstractMigrationService from '../../services/migrator/abstractMigrationService'
+import AbstractMigrationService from '../../services/migrator/abstractMigrationService'
 
-	export default {
-		name: 'migration',
-		data() {
-			return {
-				authUrl: '',
-				isMigrating: false,
-				lastMigrationDate: null,
-				message: '',
-				wunderlistCode: '',
-			}
+export default {
+	name: 'migration',
+	data() {
+		return {
+			authUrl: '',
+			isMigrating: false,
+			lastMigrationDate: null,
+			message: '',
+			wunderlistCode: '',
+		}
+	},
+	props: {
+		name: {
+			type: String,
+			required: true,
 		},
-		props: {
-			name: {
-				type: String,
-				required: true,
-			},
-			identifier: {
-				type: String,
-				required: true,
-			},
+		identifier: {
+			type: String,
+			required: true,
 		},
-		created() {
-			this.migrationService = new AbstractMigrationService(this.identifier)
-			this.getAuthUrl()
-			this.message = ''
+	},
+	created() {
+		this.migrationService = new AbstractMigrationService(this.identifier)
+		this.getAuthUrl()
+		this.message = ''
 
-			if (typeof this.$route.query.code !== 'undefined') {
-				this.wunderlistCode = this.$route.query.code
-				this.migrationService.getStatus()
-					.then(r => {
-						if (r.time) {
-							this.lastMigrationDate = new Date(r.time)
-							return
-						}
-						this.migrate()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			}
+		if (typeof this.$route.query.code !== 'undefined') {
+			this.wunderlistCode = this.$route.query.code
+			this.migrationService.getStatus()
+				.then(r => {
+					if (r.time) {
+						this.lastMigrationDate = new Date(r.time)
+						return
+					}
+					this.migrate()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		}
+	},
+	methods: {
+		getAuthUrl() {
+			this.migrationService.getAuthUrl()
+				.then(r => {
+					this.authUrl = r.url
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-		methods: {
-			getAuthUrl() {
-				this.migrationService.getAuthUrl()
-					.then(r => {
-						this.authUrl = r.url
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			migrate() {
-				this.isMigrating = true
-				this.lastMigrationDate = 0
-				this.migrationService.migrate({code: this.wunderlistCode})
-					.then(r => {
-						this.message = r.message
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.isMigrating = false
-					})
-			},
+		migrate() {
+			this.isMigrating = true
+			this.lastMigrationDate = 0
+			this.migrationService.migrate({code: this.wunderlistCode})
+				.then(r => {
+					this.message = r.message
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.isMigrating = false
+				})
 		},
-	}
+	},
+}
 </script>
diff --git a/src/components/misc/error.vue b/src/components/misc/error.vue
index 34e8bcfc3..3768f375a 100644
--- a/src/components/misc/error.vue
+++ b/src/components/misc/error.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-	export default {
-		name: 'error'
-	}
+export default {
+	name: 'error',
+}
 </script>
diff --git a/src/components/misc/keyboard-shortcuts.vue b/src/components/misc/keyboard-shortcuts.vue
index c3c26b777..4a41e1337 100644
--- a/src/components/misc/keyboard-shortcuts.vue
+++ b/src/components/misc/keyboard-shortcuts.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="modal-mask keyboard-shortcuts-modal">
-		<div class="modal-container" @click.self="close()">
+		<div @click.self="close()" class="modal-container">
 			<div class="modal-content">
 				<div class="card has-background-white has-no-shadow">
 					<header class="card-header">
@@ -28,7 +28,7 @@
 							</span>
 						</p>
 						<template
-								v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
+							v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
 							<p>
 								<strong>Assign this task to a user</strong>
 								<span class="shortcuts">
@@ -88,12 +88,12 @@
 </template>
 
 <script>
-	export default {
-		name: 'keyboard-shortcuts',
-		methods: {
-			close() {
-				this.$emit('close')
-			},
+export default {
+	name: 'keyboard-shortcuts',
+	methods: {
+		close() {
+			this.$emit('close')
 		},
-	}
+	},
+}
 </script>
diff --git a/src/components/misc/legal.vue b/src/components/misc/legal.vue
index f1eb90de0..2afcb4727 100644
--- a/src/components/misc/legal.vue
+++ b/src/components/misc/legal.vue
@@ -1,19 +1,19 @@
 <template>
 	<div class="legal-links">
-		<a :href="imprintUrl" v-if="imprintUrl" target="_blank">Imprint</a>
+		<a :href="imprintUrl" target="_blank" v-if="imprintUrl">Imprint</a>
 		<span v-if="imprintUrl && privacyPolicyUrl"> | </span>
-		<a :href="privacyPolicyUrl" v-if="privacyPolicyUrl" target="_blank">Privacy policy</a>
+		<a :href="privacyPolicyUrl" target="_blank" v-if="privacyPolicyUrl">Privacy policy</a>
 	</div>
 </template>
 
 <script>
-	import {mapState} from 'vuex'
+import {mapState} from 'vuex'
 
-	export default {
-		name: 'legal',
-		computed: mapState({
-			imprintUrl: state => state.config.legal.imprintUrl,
-			privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
-		})
-	}
+export default {
+	name: 'legal',
+	computed: mapState({
+		imprintUrl: state => state.config.legal.imprintUrl,
+		privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
+	}),
+}
 </script>
diff --git a/src/components/misc/loading.vue b/src/components/misc/loading.vue
index 9e8eeff5e..9938cab6b 100644
--- a/src/components/misc/loading.vue
+++ b/src/components/misc/loading.vue
@@ -3,17 +3,17 @@
 </template>
 
 <script>
-	export default {
-		name: 'loading'
-	}
+export default {
+	name: 'loading',
+}
 </script>
 
 <style scoped>
-	.loader-container {
-		height: 100%;
-		min-height: 200px;
-		width: 100%;
-		min-width: 600px;
-		max-width: 100vw;
-	}
+.loader-container {
+	height: 100%;
+	min-height: 200px;
+	width: 100%;
+	min-width: 600px;
+	max-width: 100vw;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/misc/notification.vue b/src/components/misc/notification.vue
index 5d887231d..dc1752a43 100644
--- a/src/components/misc/notification.vue
+++ b/src/components/misc/notification.vue
@@ -3,21 +3,23 @@
 		<template slot="body" slot-scope="props">
 			<div :class="['vue-notification-template', 'vue-notification', props.item.type]" @click="close(props)">
 				<div
-						v-if="props.item.title"
-						class="notification-title"
-						v-html="props.item.title"
+					class="notification-title"
+					v-html="props.item.title"
+					v-if="props.item.title"
 				>
 				</div>
 				<div
-						class="notification-content"
-						v-html="props.item.text"
+					class="notification-content"
+					v-html="props.item.text"
 				>
 				</div>
-				<div class="buttons is-right" v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
+				<div
+					class="buttons is-right"
+					v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
 					<button
-							class="button noshadow is-small"
-							@click="action.callback"
-							v-for="(action, i) in props.item.data.actions" :key="'action_'+i">
+						:key="'action_'+i"
+						@click="action.callback"
+						class="button noshadow is-small" v-for="(action, i) in props.item.data.actions">
 						{{ action.title }}
 					</button>
 				</div>
@@ -27,23 +29,23 @@
 </template>
 
 <script>
-	export default {
-		name: 'notification',
-		methods: {
-			close(props) {
-				props.close()
-			},
+export default {
+	name: 'notification',
+	methods: {
+		close(props) {
+			props.close()
 		},
-	}
+	},
+}
 </script>
 
 <style scoped>
 
-	.vue-notification {
-		z-index: 9999;
-	}
+.vue-notification {
+	z-index: 9999;
+}
 
-	.buttons {
-		margin-top: .5em;
-	}
+.buttons {
+	margin-top: .5em;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/misc/user.vue b/src/components/misc/user.vue
index ec8191d20..7c3e1be3b 100644
--- a/src/components/misc/user.vue
+++ b/src/components/misc/user.vue
@@ -1,52 +1,58 @@
 <template>
-	<div class="user" :class="{'is-inline': isInline}">
-		<img :src="user.getAvatarUrl(avatarSize)" class="avatar" alt="" v-tooltip="user.username" :width="avatarSize" :height="avatarSize"/>
-		<span v-if="showUsername" class="username">{{ user.username }}</span>
+	<div :class="{'is-inline': isInline}" class="user">
+		<img
+			:height="avatarSize"
+			:src="user.getAvatarUrl(avatarSize)"
+			:width="avatarSize"
+			alt=""
+			class="avatar"
+			v-tooltip="user.username"/>
+		<span class="username" v-if="showUsername">{{ user.username }}</span>
 	</div>
 </template>
 
 <script>
-	export default {
-		name: 'user',
-		props: {
-			user: {
-				required: true,
-				type: Object,
-			},
-			showUsername: {
-				required: false,
-				type: Boolean,
-				default: true,
-			},
-			avatarSize: {
-				required: false,
-				type: Number,
-				default: 50,
-			},
-			isInline: {
-				required: false,
-				type: Boolean,
-				default: false,
-			},
+export default {
+	name: 'user',
+	props: {
+		user: {
+			required: true,
+			type: Object,
 		},
-	}
+		showUsername: {
+			required: false,
+			type: Boolean,
+			default: true,
+		},
+		avatarSize: {
+			required: false,
+			type: Number,
+			default: 50,
+		},
+		isInline: {
+			required: false,
+			type: Boolean,
+			default: false,
+		},
+	},
+}
 </script>
 
 <style lang="scss" scoped>
-	.user {
-		margin: .5em;
+.user {
+	margin: .5em;
 
-		&.is-inline {
-			display: inline;
-		}
-
-		img {
-			-webkit-border-radius: 100%;
-			-moz-border-radius: 100%;
-			border-radius: 100%;
-
-			vertical-align: middle;
-			margin-right: .5em;
-		}
+	&.is-inline {
+		display: inline;
 	}
+
+	img {
+		-webkit-border-radius: 100%;
+		-moz-border-radius: 100%;
+		border-radius: 100%;
+
+		vertical-align: middle;
+		margin-right: .5em;
+	}
+}
 </style>
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 1e409767f..8664fa218 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -10,8 +10,8 @@
 						<slot name="text"></slot>
 					</div>
 					<div class="actions">
-						<button class="button is-danger is-inverted noshadow" @click="$emit('close')">Cancel</button>
-						<button class="button is-success noshadow" @click="$emit('submit')">Do it!</button>
+						<button @click="$emit('close')" class="button is-danger is-inverted noshadow">Cancel</button>
+						<button @click="$emit('submit')" class="button is-success noshadow">Do it!</button>
 					</div>
 				</div>
 			</div>
@@ -20,15 +20,15 @@
 </template>
 
 <script>
-	export default {
-		name: 'modal',
-		mounted: function () {
-			document.addEventListener('keydown', (e) => {
-				// Close the model when escape is pressed
-				if (e.keyCode === 27) {
-					this.$emit('close')
-				}
-			})
-		}
-	}
+export default {
+	name: 'modal',
+	mounted: function () {
+		document.addEventListener('keydown', (e) => {
+			// Close the model when escape is pressed
+			if (e.keyCode === 27) {
+				this.$emit('close')
+			}
+		})
+	},
+}
 </script>
diff --git a/src/components/namespace/namespace-search.vue b/src/components/namespace/namespace-search.vue
index e058a7f7c..59474f194 100644
--- a/src/components/namespace/namespace-search.vue
+++ b/src/components/namespace/namespace-search.vue
@@ -1,73 +1,73 @@
 <template>
 	<multiselect
-			v-model="namespace"
-			:options="namespaces"
-			:multiple="false"
-			:searchable="true"
-			:loading="namespaceService.loading"
-			:internal-search="true"
-			@search-change="findNamespaces"
-			@select="select"
-			placeholder="Search for a namespace..."
-			:showNoOptions="false"
-			label="title"
-			track-by="id">
+		:internal-search="true"
+		:loading="namespaceService.loading"
+		:multiple="false"
+		:options="namespaces"
+		:searchable="true"
+		:showNoOptions="false"
+		@search-change="findNamespaces"
+		@select="select"
+		label="title"
+		placeholder="Search for a namespace..."
+		track-by="id"
+		v-model="namespace">
 		<template slot="clear" slot-scope="props">
 			<div
-					class="multiselect__clear" v-if="namespace.id !== 0"
-					@mousedown.prevent.stop="clearAll(props.search)"></div>
+				@mousedown.prevent.stop="clearAll(props.search)" class="multiselect__clear"
+				v-if="namespace.id !== 0"></div>
 		</template>
 		<span slot="noResult">No namespace found. Consider changing the search query.</span>
 	</multiselect>
 </template>
 
 <script>
-	import NamespaceService from '../../services/namespace'
-	import NamespaceModel from '../../models/namespace'
-	import LoadingComponent from '../misc/loading'
-	import ErrorComponent from '../misc/error'
+import NamespaceService from '../../services/namespace'
+import NamespaceModel from '../../models/namespace'
+import LoadingComponent from '../misc/loading'
+import ErrorComponent from '../misc/error'
 
-	export default {
-		name: 'namespace-search',
-		data() {
-			return {
-				namespaceService: NamespaceService,
-				namespace: NamespaceModel,
-				namespaces: [],
+export default {
+	name: 'namespace-search',
+	data() {
+		return {
+			namespaceService: NamespaceService,
+			namespace: NamespaceModel,
+			namespaces: [],
+		}
+	},
+	components: {
+		multiselect: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	created() {
+		this.namespaceService = new NamespaceService()
+	},
+	methods: {
+		findNamespaces(query) {
+			if (query === '') {
+				this.clearAll()
+				return
 			}
-		},
-		components: {
-			multiselect: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
-		},
-		created() {
-			this.namespaceService = new NamespaceService()
-		},
-		methods: {
-			findNamespaces(query) {
-				if (query === '') {
-					this.clearAll()
-					return
-				}
 
-				this.namespaceService.getAll({}, {s: query})
-					.then(response => {
-						this.$set(this, 'namespaces', response)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			clearAll() {
-				this.$set(this, 'namespaces', [])
-			},
-			select(namespace) {
-				this.$emit('selected', namespace)
-			},
+			this.namespaceService.getAll({}, {s: query})
+				.then(response => {
+					this.$set(this, 'namespaces', response)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		clearAll() {
+			this.$set(this, 'namespaces', [])
+		},
+		select(namespace) {
+			this.$emit('selected', namespace)
+		},
+	},
+}
 </script>
diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue
index 93eb2aed7..3e6fbdf72 100644
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@@ -21,7 +21,7 @@
 						</div>
 					</div>
 					<div class="control">
-						<button type="submit" class="button is-success">
+						<button class="button is-success" type="submit">
 							Share
 						</button>
 					</div>
@@ -36,61 +36,62 @@
 					<th>Delete</th>
 				</tr>
 				<template v-if="linkShares.length > 0">
-				<tr v-for="s in linkShares" :key="s.id">
-					<td>
-						<div class="field has-addons">
-							<div class="control">
-								<input class="input" type="text" :value="getShareLink(s.hash)" readonly/>
-							</div>
-							<div class="control">
-								<a class="button is-success noshadow" @click="copy(getShareLink(s.hash))">
+					<tr :key="s.id" v-for="s in linkShares">
+						<td>
+							<div class="field has-addons">
+								<div class="control">
+									<input :value="getShareLink(s.hash)" class="input" readonly type="text"/>
+								</div>
+								<div class="control">
+									<a @click="copy(getShareLink(s.hash))" class="button is-success noshadow">
 									<span class="icon">
 										<icon icon="paste"/>
 									</span>
-								</a>
+									</a>
+								</div>
 							</div>
-						</div>
-					</td>
-					<td>
-						{{ s.sharedBy.username }}
-					</td>
-					<td class="type">
-						<template v-if="s.right === rights.ADMIN">
+						</td>
+						<td>
+							{{ s.sharedBy.username }}
+						</td>
+						<td class="type">
+							<template v-if="s.right === rights.ADMIN">
 						<span class="icon is-small">
 							<icon icon="lock"/>
 						</span>
-							Admin
-						</template>
-						<template v-else-if="s.right === rights.READ_WRITE">
+								Admin
+							</template>
+							<template v-else-if="s.right === rights.READ_WRITE">
 						<span class="icon is-small">
 							<icon icon="pen"/>
 						</span>
-							Write
-						</template>
-						<template v-else>
+								Write
+							</template>
+							<template v-else>
 						<span class="icon is-small">
 							<icon icon="users"/>
 						</span>
-							Read-only
-						</template>
-					</td>
-					<td class="actions">
-						<button @click="() => {linkIdToDelete = s.id; showDeleteModal = true}" class="button is-danger icon-only">
+								Read-only
+							</template>
+						</td>
+						<td class="actions">
+							<button @click="() => {linkIdToDelete = s.id; showDeleteModal = true}"
+									class="button is-danger icon-only">
 							<span class="icon">
 								<icon icon="trash-alt"/>
 							</span>
-						</button>
-					</td>
-				</tr>
+							</button>
+						</td>
+					</tr>
 				</template>
 				</tbody>
 			</table>
 		</div>
 
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="remove()">
+			@close="showDeleteModal = false"
+			@submit="remove()"
+			v-if="showDeleteModal">
 			<span slot="header">Remove a link share</span>
 			<p slot="text">Are you sure you want to remove this link share?<br/>
 				It will no longer be possible to access this list with this link share.<br/>
@@ -100,95 +101,95 @@
 </template>
 
 <script>
-	import rights from '../../models/rights'
+import rights from '../../models/rights'
 
-	import LinkShareService from '../../services/linkShare'
-	import LinkShareModel from '../../models/linkShare'
+import LinkShareService from '../../services/linkShare'
+import LinkShareModel from '../../models/linkShare'
 
-	import copy from 'copy-to-clipboard'
-	import {mapState} from 'vuex'
+import copy from 'copy-to-clipboard'
+import {mapState} from 'vuex'
 
-	export default {
-		name: 'linkSharing',
-		props: {
-			listId: {
-				default: 0,
-				required: true,
-			},
+export default {
+	name: 'linkSharing',
+	props: {
+		listId: {
+			default: 0,
+			required: true,
 		},
-		data() {
-			return {
-				linkShares: [],
-				linkShareService: LinkShareService,
-				newLinkShare: LinkShareModel,
-				rights: rights,
-				selectedRight: rights.READ,
-				showDeleteModal: false,
-				linkIdToDelete: 0,
-			}
-		},
-		beforeMount() {
-			this.linkShareService = new LinkShareService()
-		},
-		created() {
-			this.linkShareService = new LinkShareService()
+	},
+	data() {
+		return {
+			linkShares: [],
+			linkShareService: LinkShareService,
+			newLinkShare: LinkShareModel,
+			rights: rights,
+			selectedRight: rights.READ,
+			showDeleteModal: false,
+			linkIdToDelete: 0,
+		}
+	},
+	beforeMount() {
+		this.linkShareService = new LinkShareService()
+	},
+	created() {
+		this.linkShareService = new LinkShareService()
+		this.load()
+	},
+	watch: {
+		listId: () => { // watch it
 			this.load()
 		},
-		watch: {
-			listId: () => { // watch it
-				this.load()
+	},
+	computed: mapState({
+		frontendUrl: state => state.config.frontendUrl,
+	}),
+	methods: {
+		load() {
+			// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
+			if (this.listId === 0) {
+				return
 			}
-		},
-		computed: mapState({
-			frontendUrl: state => state.config.frontendUrl,
-		}),
-		methods: {
-			load() {
-				// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
-				if (this.listId === 0) {
-					return
-				}
 
-				this.linkShareService.getAll({listId: this.listId})
-					.then(r => {
-						this.linkShares = r
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			add() {
-				let newLinkShare = new LinkShareModel({right: this.selectedRight, listId: this.listId})
-				this.linkShareService.create(newLinkShare)
-					.then(() => {
-						this.selectedRight = rights.READ
-						this.success({message: 'The link share was successfully created'}, this)
-						this.load()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			remove() {
-				let linkshare = new LinkShareModel({id: this.linkIdToDelete, listId: this.listId})
-				this.linkShareService.delete(linkshare)
-					.then(() => {
-						this.success({message: 'The link share was successfully deleted'}, this)
-						this.load()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.showDeleteModal = false
-					})
-			},
-			copy(text) {
-				copy(text)
-			},
-			getShareLink(hash) {
-				return this.frontendUrl + 'share/'  + hash + '/auth'
-			},
+			this.linkShareService.getAll({listId: this.listId})
+				.then(r => {
+					this.linkShares = r
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		add() {
+			let newLinkShare = new LinkShareModel({right: this.selectedRight, listId: this.listId})
+			this.linkShareService.create(newLinkShare)
+				.then(() => {
+					this.selectedRight = rights.READ
+					this.success({message: 'The link share was successfully created'}, this)
+					this.load()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		remove() {
+			let linkshare = new LinkShareModel({id: this.linkIdToDelete, listId: this.listId})
+			this.linkShareService.delete(linkshare)
+				.then(() => {
+					this.success({message: 'The link share was successfully deleted'}, this)
+					this.load()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.showDeleteModal = false
+				})
+		},
+		copy(text) {
+			copy(text)
+		},
+		getShareLink(hash) {
+			return this.frontendUrl + 'share/' + hash + '/auth'
+		},
+	},
+}
 </script>
diff --git a/src/components/sharing/userTeam.vue b/src/components/sharing/userTeam.vue
index 92ae57186..77fd2557d 100644
--- a/src/components/sharing/userTeam.vue
+++ b/src/components/sharing/userTeam.vue
@@ -2,7 +2,7 @@
 	<div class="card is-fullwidth">
 		<header class="card-header">
 			<p class="card-header-title">
-				Shared with these {{shareType}}s
+				Shared with these {{ shareType }}s
 			</p>
 		</header>
 		<div class="card-content content sharables-list">
@@ -10,25 +10,30 @@
 				<div class="field is-grouped">
 					<p class="control is-expanded" v-bind:class="{ 'is-loading': searchService.loading}">
 						<multiselect
-								v-model="sharable"
-								:options="found"
-								:multiple="false"
-								:searchable="true"
-								:loading="searchService.loading"
-								:internal-search="true"
-								@search-change="find"
-								placeholder="Type to search..."
-								:showNoOptions="false"
-								:label="searchLabel"
-								track-by="id">
+							:internal-search="true"
+							:label="searchLabel"
+							:loading="searchService.loading"
+							:multiple="false"
+							:options="found"
+							:searchable="true"
+							:showNoOptions="false"
+							@search-change="find"
+							placeholder="Type to search..."
+							track-by="id"
+							v-model="sharable">
 							<template slot="clear" slot-scope="props">
-								<div class="multiselect__clear" v-if="sharable.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
+								<div
+									@mousedown.prevent.stop="clearAll(props.search)"
+									class="multiselect__clear"
+									v-if="sharable.id !== 0"></div>
 							</template>
-							<span slot="noResult">Oops! No {{shareType}} found. Consider changing the search query.</span>
+							<span slot="noResult">
+								Oops! No {{ shareType }} found. Consider changing the search query.
+							</span>
 						</multiselect>
 					</p>
 					<p class="control">
-						<button type="submit" class="button is-success">
+						<button class="button is-success" type="submit">
 								<span class="icon is-small">
 									<icon icon="plus"/>
 								</span>
@@ -39,9 +44,9 @@
 			</form>
 			<table class="table is-striped is-hoverable is-fullwidth">
 				<tbody>
-				<tr v-for="s in sharables" :key="s.id">
+				<tr :key="s.id" v-for="s in sharables">
 					<template v-if="shareType === 'user'">
-						<td>{{s.username}}</td>
+						<td>{{ s.username }}</td>
 						<td>
 							<template v-if="s.id === userInfo.id">
 								<b class="is-success">You</b>
@@ -51,7 +56,7 @@
 					<template v-if="shareType === 'team'">
 						<td>
 							<router-link :to="{name: 'teams.edit', params: {id: s.id}}">
-								{{s.name}}
+								{{ s.name }}
 							</router-link>
 						</td>
 					</template>
@@ -77,13 +82,16 @@
 					</td>
 					<td class="actions" v-if="userIsAdmin">
 						<div class="select">
-							<select @change="toggleType(s)" v-model="selectedRight[s.id]" class="button buttonright">
-								<option :value="rights.READ" :selected="s.right === rights.READ">Read only</option>
-								<option :value="rights.READ_WRITE" :selected="s.right === rights.READ_WRITE">Read & write</option>
-								<option :value="rights.ADMIN" :selected="s.right === rights.ADMIN">Admin</option>
+							<select @change="toggleType(s)" class="button buttonright" v-model="selectedRight[s.id]">
+								<option :selected="s.right === rights.READ" :value="rights.READ">Read only</option>
+								<option :selected="s.right === rights.READ_WRITE" :value="rights.READ_WRITE">Read &
+									write
+								</option>
+								<option :selected="s.right === rights.ADMIN" :value="rights.ADMIN">Admin</option>
 							</select>
 						</div>
-						<button @click="() => {sharable = s; showDeleteModal = true}" class="button is-danger icon-only">
+						<button @click="() => {sharable = s; showDeleteModal = true}"
+								class="button is-danger icon-only">
 							<span class="icon is-small">
 								<icon icon="trash-alt"/>
 							</span>
@@ -95,234 +103,233 @@
 		</div>
 
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="deleteSharable()">
-			<span slot="header">Remove a {{shareType}} from the {{typeString}}</span>
-			<p slot="text">Are you sure you want to remove this {{shareType}} from the {{typeString}}?<br/>
+			@close="showDeleteModal = false"
+			@submit="deleteSharable()"
+			v-if="showDeleteModal">
+			<span slot="header">Remove a {{ shareType }} from the {{ typeString }}</span>
+			<p slot="text">Are you sure you want to remove this {{ shareType }} from the {{ typeString }}?<br/>
 				<b>This CANNOT BE UNDONE!</b></p>
 		</modal>
 	</div>
 </template>
 
 <script>
-	import {mapState} from 'vuex'
+import {mapState} from 'vuex'
 
-	import UserNamespaceService from '../../services/userNamespace'
-	import UserNamespaceModel from '../../models/userNamespace'
-	import UserListModel from '../../models/userList'
-	import UserListService from '../../services/userList'
-	import UserService from '../../services/user'
-	import UserModel from '../../models/user'
+import UserNamespaceService from '../../services/userNamespace'
+import UserNamespaceModel from '../../models/userNamespace'
+import UserListModel from '../../models/userList'
+import UserListService from '../../services/userList'
+import UserService from '../../services/user'
+import UserModel from '../../models/user'
 
-	import TeamNamespaceService from '../../services/teamNamespace'
-	import TeamNamespaceModel from '../../models/teamNamespace'
-	import TeamListModel from '../../models/teamList'
-	import TeamListService from '../../services/teamList'
-	import TeamService from '../../services/team'
-	import TeamModel from '../../models/team'
+import TeamNamespaceService from '../../services/teamNamespace'
+import TeamNamespaceModel from '../../models/teamNamespace'
+import TeamListModel from '../../models/teamList'
+import TeamListService from '../../services/teamList'
+import TeamService from '../../services/team'
+import TeamModel from '../../models/team'
 
-	import rights from '../../models/rights'
-	import LoadingComponent from '../misc/loading'
-	import ErrorComponent from '../misc/error'
+import rights from '../../models/rights'
+import LoadingComponent from '../misc/loading'
+import ErrorComponent from '../misc/error'
 
-	export default {
-		name: 'userTeamShare',
-		props: {
-			type: {
-				type: String,
-				default: '',
-			},
-			shareType: {
-				type: String,
-				default: '',
-			},
-			id: {
-				type: Number,
-				default: 0,
-			},
-			userIsAdmin: {
-				type: Boolean,
-				default: false,
-			},
+export default {
+	name: 'userTeamShare',
+	props: {
+		type: {
+			type: String,
+			default: '',
 		},
-		data() {
-			return {
-				stuffService: Object, // This user service is either a userNamespaceService or a userListService, depending on the type we are using
-				stuffModel: Object,
-				searchService: Object,
-				sharable: Object,
-
-				found: [],
-				searchLabel: '',
-				rights: rights,
-				selectedRight: {},
-
-				typeString: '',
-				sharables: [], // This holds either teams or users who this namepace or list is shared with
-				showDeleteModal: false,
-			}
+		shareType: {
+			type: String,
+			default: '',
 		},
-		components: {
-			multiselect: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
+		id: {
+			type: Number,
+			default: 0,
 		},
-		computed: mapState({
-			userInfo: state => state.auth.info
+		userIsAdmin: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			stuffService: Object, // This user service is either a userNamespaceService or a userListService, depending on the type we are using
+			stuffModel: Object,
+			searchService: Object,
+			sharable: Object,
+
+			found: [],
+			searchLabel: '',
+			rights: rights,
+			selectedRight: {},
+
+			typeString: '',
+			sharables: [], // This holds either teams or users who this namepace or list is shared with
+			showDeleteModal: false,
+		}
+	},
+	components: {
+		multiselect: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
 		}),
-		created() {
+	},
+	computed: mapState({
+		userInfo: state => state.auth.info,
+	}),
+	created() {
+
+		if (this.shareType === 'user') {
+			this.searchService = new UserService()
+			this.sharable = new UserModel()
+			this.searchLabel = 'username'
+
+			if (this.type === 'list') {
+				this.typeString = `list`
+				this.stuffService = new UserListService()
+				this.stuffModel = new UserListModel({listId: this.id})
+			} else if (this.type === 'namespace') {
+				this.typeString = `namespace`
+				this.stuffService = new UserNamespaceService()
+				this.stuffModel = new UserNamespaceModel({namespaceId: this.id})
+			} else {
+				throw new Error('Unknown type: ' + this.type)
+			}
+		} else if (this.shareType === 'team') {
+			this.searchService = new TeamService()
+			this.sharable = new TeamModel()
+			this.searchLabel = 'name'
+
+			if (this.type === 'list') {
+				this.typeString = `list`
+				this.stuffService = new TeamListService()
+				this.stuffModel = new TeamListModel({listId: this.id})
+			} else if (this.type === 'namespace') {
+				this.typeString = `namespace`
+				this.stuffService = new TeamNamespaceService()
+				this.stuffModel = new TeamNamespaceModel({namespaceId: this.id})
+			} else {
+				throw new Error('Unknown type: ' + this.type)
+			}
+		} else {
+			throw new Error('Unkown share type')
+		}
+
+		this.load()
+	},
+	methods: {
+		load() {
+			this.stuffService.getAll(this.stuffModel)
+				.then(r => {
+					this.$set(this, 'sharables', r)
+					r.forEach(s => this.$set(this.selectedRight, s.id, s.right))
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		deleteSharable() {
 
 			if (this.shareType === 'user') {
-				this.searchService = new UserService()
-				this.sharable = new UserModel()
-				this.searchLabel = 'username'
-
-				if (this.type === 'list') {
-					this.typeString = `list`
-					this.stuffService = new UserListService()
-					this.stuffModel = new UserListModel({listId: this.id})
-				} else if (this.type === 'namespace') {
-					this.typeString = `namespace`
-					this.stuffService = new UserNamespaceService()
-					this.stuffModel = new UserNamespaceModel({namespaceId: this.id})
-				} else {
-					throw new Error('Unknown type: ' + this.type)
-				}
+				this.stuffModel.userId = this.sharable.username
+			} else if (this.shareType === 'team') {
+				this.stuffModel.teamId = this.sharable.id
 			}
-			else if (this.shareType === 'team') {
-				this.searchService = new TeamService()
-				this.sharable = new TeamModel()
-				this.searchLabel = 'name'
-
-				if (this.type === 'list') {
-					this.typeString = `list`
-					this.stuffService = new TeamListService()
-					this.stuffModel = new TeamListModel({listId: this.id})
-				} else if (this.type === 'namespace') {
-					this.typeString = `namespace`
-					this.stuffService = new TeamNamespaceService()
-					this.stuffModel = new TeamNamespaceModel({namespaceId: this.id})
-				} else {
-					throw new Error('Unknown type: ' + this.type)
-				}
-			} else {
-				throw new Error('Unkown share type')
-			}
-
-			this.load()
+			this.stuffService.delete(this.stuffModel)
+				.then(() => {
+					this.showDeleteModal = false
+					for (const i in this.sharables) {
+						if (
+							(this.sharables[i].id === this.stuffModel.userId && this.shareType === 'user') ||
+							(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
+						) {
+							this.sharables.splice(i, 1)
+						}
+					}
+					this.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-		methods: {
-			load() {
-				this.stuffService.getAll(this.stuffModel)
-					.then(r => {
-						this.$set(this, 'sharables', r)
-						r.forEach(s => this.$set(this.selectedRight, s.id, s.right))
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			deleteSharable() {
+		add(admin) {
+			if (admin === null) {
+				admin = false
+			}
+			this.stuffModel.right = rights.READ
+			if (admin) {
+				this.stuffModel.right = rights.ADMIN
+			}
 
-				if (this.shareType === 'user') {
-					this.stuffModel.userId = this.sharable.username
-				} else if (this.shareType === 'team') {
-					this.stuffModel.teamId = this.sharable.id
-				}
-				this.stuffService.delete(this.stuffModel)
-					.then(() => {
-						this.showDeleteModal = false
-						for (const i in this.sharables) {
-							if (
-								(this.sharables[i].id === this.stuffModel.userId && this.shareType === 'user') ||
-								(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
-							) {
-								this.sharables.splice(i, 1)
-							}
+			if (this.shareType === 'user') {
+				this.stuffModel.userId = this.sharable.username
+			} else if (this.shareType === 'team') {
+				this.stuffModel.teamId = this.sharable.id
+			}
+
+			this.stuffService.create(this.stuffModel)
+				.then(() => {
+					this.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
+					this.load()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		toggleType(sharable) {
+			if (this.selectedRight[sharable.id] !== rights.ADMIN &&
+				this.selectedRight[sharable.id] !== rights.READ &&
+				this.selectedRight[sharable.id] !== rights.READ_WRITE
+			) {
+				this.selectedRight[sharable.id] = rights.READ
+			}
+			this.stuffModel.right = this.selectedRight[sharable.id]
+
+
+			if (this.shareType === 'user') {
+				this.stuffModel.userId = sharable.username
+			} else if (this.shareType === 'team') {
+				this.stuffModel.teamId = sharable.id
+			}
+
+			this.stuffService.update(this.stuffModel)
+				.then(r => {
+					for (const i in this.sharables) {
+						if (
+							(this.sharables[i].username === this.stuffModel.userId && this.shareType === 'user') ||
+							(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
+						) {
+							this.$set(this.sharables[i], 'right', r.right)
 						}
-						this.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			add(admin) {
-				if(admin === null) {
-					admin = false
-				}
-				this.stuffModel.right = rights.READ
-				if (admin) {
-					this.stuffModel.right = rights.ADMIN
-				}
-
-				if (this.shareType === 'user') {
-					this.stuffModel.userId = this.sharable.username
-				} else if (this.shareType === 'team') {
-					this.stuffModel.teamId = this.sharable.id
-				}
-
-				this.stuffService.create(this.stuffModel)
-					.then(() => {
-						this.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
-						this.load()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			toggleType(sharable) {
-				if (this.selectedRight[sharable.id] !== rights.ADMIN &&
-					this.selectedRight[sharable.id] !== rights.READ &&
-					this.selectedRight[sharable.id] !== rights.READ_WRITE
-				) {
-					this.selectedRight[sharable.id] = rights.READ
-				}
-				this.stuffModel.right = this.selectedRight[sharable.id]
-
-
-				if (this.shareType === 'user') {
-					this.stuffModel.userId = sharable.username
-				} else if (this.shareType === 'team') {
-					this.stuffModel.teamId = sharable.id
-				}
-
-				this.stuffService.update(this.stuffModel)
-					.then(r => {
-						for (const i in this.sharables) {
-							if (
-								(this.sharables[i].username === this.stuffModel.userId && this.shareType === 'user') ||
-								(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
-							) {
-								this.$set(this.sharables[i], 'right', r.right)
-							}
-						}
-						this.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			find(query) {
-				if(query === '') {
-					this.$set(this, 'found', [])
-					return
-				}
-
-				this.searchService.getAll({}, {s: query})
-					.then(response => {
-						this.$set(this, 'found', response)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			clearAll () {
+					}
+					this.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		find(query) {
+			if (query === '') {
 				this.$set(this, 'found', [])
-			},
+				return
+			}
+
+			this.searchService.getAll({}, {s: query})
+				.then(response => {
+					this.$set(this, 'found', response)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		clearAll() {
+			this.$set(this, 'found', [])
+		},
+	},
+}
 </script>
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 9e01b13fa..fadbebea4 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -4,45 +4,45 @@
 			<label class="label" for="tasktext">Task Text</label>
 			<div class="control">
 				<input
-						v-focus
-						:class="{ 'disabled': taskService.loading}"
-						:disabled="taskService.loading"
-						class="input"
-						type="text"
-						id="tasktext"
-						placeholder="The task text is here..."
-						v-model="taskEditTask.title"
-						@change="editTaskSubmit()"/>
+					:class="{ 'disabled': taskService.loading}"
+					:disabled="taskService.loading"
+					@change="editTaskSubmit()"
+					class="input"
+					id="tasktext"
+					placeholder="The task text is here..."
+					type="text"
+					v-focus
+					v-model="taskEditTask.title"/>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label" for="taskdescription">Description</label>
 			<div class="control">
 				<editor
-						placeholder="The tasks description goes here..."
-						id="taskdescription"
-						v-model="taskEditTask.description"
-						:preview-is-default="false"
-						v-if="editorActive"
+					:preview-is-default="false"
+					id="taskdescription"
+					placeholder="The tasks description goes here..."
+					v-if="editorActive"
+					v-model="taskEditTask.description"
 				/>
 			</div>
 		</div>
 
 		<b>Reminder Dates</b>
-		<reminders v-model="taskEditTask.reminderDates" @change="editTaskSubmit()"/>
+		<reminders @change="editTaskSubmit()" v-model="taskEditTask.reminderDates"/>
 
 		<div class="field">
 			<label class="label" for="taskduedate">Due Date</label>
 			<div class="control">
 				<flat-pickr
-						:class="{ 'disabled': taskService.loading}"
-						class="input"
-						:disabled="taskService.loading"
-						v-model="taskEditTask.dueDate"
-						:config="flatPickerConfig"
-						@on-close="editTaskSubmit()"
-						id="taskduedate"
-						placeholder="The tasks due date is here...">
+					:class="{ 'disabled': taskService.loading}"
+					:config="flatPickerConfig"
+					:disabled="taskService.loading"
+					@on-close="editTaskSubmit()"
+					class="input"
+					id="taskduedate"
+					placeholder="The tasks due date is here..."
+					v-model="taskEditTask.dueDate">
 				</flat-pickr>
 			</div>
 		</div>
@@ -52,26 +52,26 @@
 			<div class="control columns">
 				<div class="column">
 					<flat-pickr
-							:class="{ 'disabled': taskService.loading}"
-							class="input"
-							:disabled="taskService.loading"
-							v-model="taskEditTask.startDate"
-							:config="flatPickerConfig"
-							@on-close="editTaskSubmit()"
-							id="taskduedate"
-							placeholder="Start date">
+						:class="{ 'disabled': taskService.loading}"
+						:config="flatPickerConfig"
+						:disabled="taskService.loading"
+						@on-close="editTaskSubmit()"
+						class="input"
+						id="taskduedate"
+						placeholder="Start date"
+						v-model="taskEditTask.startDate">
 					</flat-pickr>
 				</div>
 				<div class="column">
 					<flat-pickr
-							:class="{ 'disabled': taskService.loading}"
-							class="input"
-							:disabled="taskService.loading"
-							v-model="taskEditTask.endDate"
-							:config="flatPickerConfig"
-							@on-close="editTaskSubmit()"
-							id="taskduedate"
-							placeholder="End date">
+						:class="{ 'disabled': taskService.loading}"
+						:config="flatPickerConfig"
+						:disabled="taskService.loading"
+						@on-close="editTaskSubmit()"
+						class="input"
+						id="taskduedate"
+						placeholder="End date"
+						v-model="taskEditTask.endDate">
 					</flat-pickr>
 				</div>
 			</div>
@@ -79,20 +79,20 @@
 
 		<div class="field">
 			<label class="label" for="">Repeat after</label>
-			<repeat-after v-model="taskEditTask.repeatAfter" @change="editTaskSubmit()"/>
+			<repeat-after @change="editTaskSubmit()" v-model="taskEditTask.repeatAfter"/>
 		</div>
 
 		<div class="field">
 			<label class="label" for="">Priority</label>
 			<div class="control priority-select">
-				<priority-select v-model="taskEditTask.priority" @change="editTaskSubmit()"/>
+				<priority-select @change="editTaskSubmit()" v-model="taskEditTask.priority"/>
 			</div>
 		</div>
 
 		<div class="field">
 			<label class="label">Percent Done</label>
 			<div class="control">
-				<percent-done-select v-model="taskEditTask.percentDone" @change="editTaskSubmit()"/>
+				<percent-done-select @change="editTaskSubmit()" v-model="taskEditTask.percentDone"/>
 			</div>
 		</div>
 
@@ -106,8 +106,8 @@
 		<div class="field">
 			<label class="label" for="">Assignees</label>
 			<ul class="assingees">
-				<li v-for="(a, index) in taskEditTask.assignees" :key="a.id">
-					{{a.username}}
+				<li :key="a.id" v-for="(a, index) in taskEditTask.assignees">
+					{{ a.username }}
 					<a @click="deleteAssigneeByIndex(index)">
 						<icon icon="times"/>
 					</a>
@@ -118,9 +118,9 @@
 		<div class="field has-addons">
 			<div class="control is-expanded">
 				<edit-assignees
-						:task-id="taskEditTask.id"
-						:list-id="taskEditTask.listId"
-						:initial-assignees="taskEditTask.assignees"/>
+					:initial-assignees="taskEditTask.assignees"
+					:list-id="taskEditTask.listId"
+					:task-id="taskEditTask.id"/>
 			</div>
 		</div>
 
@@ -132,13 +132,13 @@
 		</div>
 
 		<related-tasks
-				class="is-narrow"
-				:task-id="task.id"
-				:list-id="task.listId"
-				:initial-related-tasks="task.relatedTasks"
+			:initial-related-tasks="task.relatedTasks"
+			:list-id="task.listId"
+			:task-id="task.id"
+			class="is-narrow"
 		/>
 
-		<button type="submit" class="button is-success is-fullwidth" :class="{ 'is-loading': taskService.loading}">
+		<button :class="{ 'is-loading': taskService.loading}" class="button is-success is-fullwidth" type="submit">
 			Save
 		</button>
 
@@ -146,113 +146,113 @@
 </template>
 
 <script>
-	import flatPickr from 'vue-flatpickr-component'
-	import 'flatpickr/dist/flatpickr.css'
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
 
-	import ListService from '../../services/list'
-	import TaskService from '../../services/task'
-	import TaskModel from '../../models/task'
-	import priorities from '../../models/priorities'
-	import PrioritySelect from './partials/prioritySelect'
-	import PercentDoneSelect from './partials/percentDoneSelect'
-	import EditLabels from './partials/editLabels'
-	import EditAssignees from './partials/editAssignees'
-	import RelatedTasks from './partials/relatedTasks'
-	import RepeatAfter from './partials/repeatAfter'
-	import Reminders from './partials/reminders'
-	import ColorPicker from '../input/colorPicker'
-	import LoadingComponent from '../misc/loading'
-	import ErrorComponent from '../misc/error'
+import ListService from '../../services/list'
+import TaskService from '../../services/task'
+import TaskModel from '../../models/task'
+import priorities from '../../models/priorities'
+import PrioritySelect from './partials/prioritySelect'
+import PercentDoneSelect from './partials/percentDoneSelect'
+import EditLabels from './partials/editLabels'
+import EditAssignees from './partials/editAssignees'
+import RelatedTasks from './partials/relatedTasks'
+import RepeatAfter from './partials/repeatAfter'
+import Reminders from './partials/reminders'
+import ColorPicker from '../input/colorPicker'
+import LoadingComponent from '../misc/loading'
+import ErrorComponent from '../misc/error'
 
-	export default {
-		name: 'edit-task',
-		data() {
-			return {
-				listId: this.$route.params.id,
-				listService: ListService,
-				taskService: TaskService,
+export default {
+	name: 'edit-task',
+	data() {
+		return {
+			listId: this.$route.params.id,
+			listService: ListService,
+			taskService: TaskService,
 
-				priorities: priorities,
-				list: {},
-				editorActive: false,
-				newTask: TaskModel,
-				isTaskEdit: false,
-				taskEditTask: TaskModel,
-				flatPickerConfig: {
-					altFormat: 'j M Y H:i',
-					altInput: true,
-					dateFormat: 'Y-m-d H:i',
-					enableTime: true,
-					onOpen: this.updateLastReminderDate,
-					onClose: this.addReminderDate,
-				},
-			}
+			priorities: priorities,
+			list: {},
+			editorActive: false,
+			newTask: TaskModel,
+			isTaskEdit: false,
+			taskEditTask: TaskModel,
+			flatPickerConfig: {
+				altFormat: 'j M Y H:i',
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				onOpen: this.updateLastReminderDate,
+				onClose: this.addReminderDate,
+			},
+		}
+	},
+	components: {
+		ColorPicker,
+		Reminders,
+		RepeatAfter,
+		RelatedTasks,
+		EditAssignees,
+		EditLabels,
+		PercentDoneSelect,
+		PrioritySelect,
+		flatPickr,
+		editor: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	props: {
+		task: {
+			type: TaskModel,
+			required: true,
 		},
-		components: {
-			ColorPicker,
-			Reminders,
-			RepeatAfter,
-			RelatedTasks,
-			EditAssignees,
-			EditLabels,
-			PercentDoneSelect,
-			PrioritySelect,
-			flatPickr,
-			editor: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
-		},
-		props: {
-			task: {
-				type: TaskModel,
-				required: true,
-			}
-		},
-		watch: {
-			task() {
-				this.taskEditTask = this.task
-				this.initTaskFields()
-			}
-		},
-		created() {
-			this.listService = new ListService()
-			this.taskService = new TaskService()
-			this.newTask = new TaskModel()
+	},
+	watch: {
+		task() {
 			this.taskEditTask = this.task
 			this.initTaskFields()
 		},
-		methods: {
-			initTaskFields() {
-				this.taskEditTask.dueDate = +new Date(this.task.dueDate) === 0 ? null : this.task.dueDate
-				this.taskEditTask.startDate = +new Date(this.task.startDate) === 0 ? null : this.task.startDate
-				this.taskEditTask.endDate = +new Date(this.task.endDate) === 0 ? null : this.task.endDate
-				// This makes the editor trigger its mounted function again which makes it forget every input
-				// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
-				// which made it impossible to detect change from the outside. Therefore the component would
-				// not update if new content from the outside was made available.
-				// See https://github.com/NikulinIlya/vue-easymde/issues/3
-				this.editorActive = false
-				this.$nextTick(() => this.editorActive = true)
-			},
-			editTaskSubmit() {
-				this.taskService.update(this.taskEditTask)
-					.then(r => {
-						this.$set(this, 'taskEditTask', r)
-						this.initTaskFields()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
+	},
+	created() {
+		this.listService = new ListService()
+		this.taskService = new TaskService()
+		this.newTask = new TaskModel()
+		this.taskEditTask = this.task
+		this.initTaskFields()
+	},
+	methods: {
+		initTaskFields() {
+			this.taskEditTask.dueDate = +new Date(this.task.dueDate) === 0 ? null : this.task.dueDate
+			this.taskEditTask.startDate = +new Date(this.task.startDate) === 0 ? null : this.task.startDate
+			this.taskEditTask.endDate = +new Date(this.task.endDate) === 0 ? null : this.task.endDate
+			// This makes the editor trigger its mounted function again which makes it forget every input
+			// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
+			// which made it impossible to detect change from the outside. Therefore the component would
+			// not update if new content from the outside was made available.
+			// See https://github.com/NikulinIlya/vue-easymde/issues/3
+			this.editorActive = false
+			this.$nextTick(() => this.editorActive = true)
 		},
-	}
+		editTaskSubmit() {
+			this.taskService.update(this.taskEditTask)
+				.then(r => {
+					this.$set(this, 'taskEditTask', r)
+					this.initTaskFields()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
 </script>
 
 <style scoped>
-	form {
-		margin-bottom: 1em;
-	}
+form {
+	margin-bottom: 1em;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index 09826067d..e817f567f 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -2,21 +2,22 @@
 	<div class="gantt-chart box">
 		<div class="dates">
 			<template v-for="(y, yk) in days">
-				<div class="months" :key="yk + 'year'">
-					<div class="month" v-for="(m, mk) in days[yk]" :key="mk + 'month'">
-						{{new Date((new Date(yk)).setMonth(mk)).toLocaleString('en-us', { month: 'long' })}}, {{(new Date(yk)).getFullYear()}}
+				<div :key="yk + 'year'" class="months">
+					<div :key="mk + 'month'" class="month" v-for="(m, mk) in days[yk]">
+						{{ new Date((new Date(yk)).setMonth(mk)).toLocaleString('en-us', {month: 'long'}) }},
+						{{ (new Date(yk)).getFullYear() }}
 						<div class="days">
 							<div
-									class="day"
-									v-for="(d, dk) in days[yk][mk]"
-									:key="dk + 'day'"
-									:style="{'width': dayWidth + 'px'}"
-									:class="{'today': d.toDateString() === now.toDateString()}">
+								:class="{'today': d.toDateString() === now.toDateString()}"
+								:key="dk + 'day'"
+								:style="{'width': dayWidth + 'px'}"
+								class="day"
+								v-for="(d, dk) in days[yk][mk]">
 								<span class="theday" v-if="dayWidth > 25">
-									{{d.getDate()}}
+									{{ d.getDate() }}
 								</span>
 								<span class="weekday" v-if="dayWidth > 25">
-									{{d.toLocaleString('en-us', { weekday: 'short' })}}
+									{{ d.toLocaleString('en-us', {weekday: 'short'}) }}
 								</span>
 							</div>
 						</div>
@@ -24,38 +25,42 @@
 				</div>
 			</template>
 		</div>
-		<div class="tasks" :style="{'width': fullWidth + 'px'}">
-			<div class="row" v-for="(t, k) in theTasks" :key="t.id" :style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}">
+		<div :style="{'width': fullWidth + 'px'}" class="tasks">
+			<div
+				:key="t.id"
+				:style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}"
+				class="row"
+				v-for="(t, k) in theTasks">
 				<VueDragResize
-						class="task"
-						:class="{
+					:class="{
 							'done': t.done,
 							'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id,
 							'has-light-text': !colorIsDark(t.hexColor),
 							'has-dark-text': colorIsDark(t.hexColor)
 						}"
-						:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
-						:isActive="canWrite"
-						:x="t.offsetDays * dayWidth - 6"
-						:y="0"
-						:w="t.durationDays * dayWidth"
-						:h="31"
-						:minw="dayWidth"
-						:snapToGrid="true"
-						:gridX="dayWidth"
-						:sticks="['mr', 'ml']"
-						axis="x"
-						:parentLimitation="true"
-						:parentW="fullWidth"
-						@resizestop="resizeTask"
-						@dragstop="resizeTask"
-						@clicked="setTaskDragged(t)"
+					:gridX="dayWidth"
+					:h="31"
+					:isActive="canWrite"
+					:minw="dayWidth"
+					:parentLimitation="true"
+					:parentW="fullWidth"
+					:snapToGrid="true"
+					:sticks="['mr', 'ml']"
+					:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
+					:w="t.durationDays * dayWidth"
+					:x="t.offsetDays * dayWidth - 6"
+					:y="0"
+					@clicked="setTaskDragged(t)"
+					@dragstop="resizeTask"
+					@resizestop="resizeTask"
+					axis="x"
+					class="task"
 				>
 					<span :class="{
 					'has-high-priority': t.priority >= priorities.HIGH,
 					'has-not-so-high-priority': t.priority === priorities.HIGH,
 					'has-super-high-priority': t.priority === priorities.DO_NOW
-					}">{{t.title}}</span>
+					}">{{ t.title }}</span>
 					<priority-label :priority="t.priority"/>
 					<!-- using the key here forces vue to use the updated version model and not the response returned by the api -->
 					<a @click="editTask(theTasks[k])" class="edit-toggle">
@@ -64,26 +69,30 @@
 				</VueDragResize>
 			</div>
 			<template v-if="showTaskswithoutDates">
-				<div class="row" v-for="(t, k) in tasksWithoutDates" :key="t.id" :style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}">
+				<div
+					:key="t.id"
+					:style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}"
+					class="row"
+					v-for="(t, k) in tasksWithoutDates">
 					<VueDragResize
-							class="task nodate"
-							:isActive="canWrite"
-							:x="dayOffsetUntilToday * dayWidth - 6"
-							:y="0"
-							:h="31"
-							:minw="dayWidth"
-							:snapToGrid="true"
-							:gridX="dayWidth"
-							:sticks="['mr', 'ml']"
-							axis="x"
-							:parentLimitation="true"
-							:parentW="fullWidth"
-							@resizestop="resizeTask"
-							@dragstop="resizeTask"
-							@clicked="setTaskDragged(t)"
-							v-tooltip="'This task has no dates set.'"
+						:gridX="dayWidth"
+						:h="31"
+						:isActive="canWrite"
+						:minw="dayWidth"
+						:parentLimitation="true"
+						:parentW="fullWidth"
+						:snapToGrid="true"
+						:sticks="['mr', 'ml']"
+						:x="dayOffsetUntilToday * dayWidth - 6"
+						:y="0"
+						@clicked="setTaskDragged(t)"
+						@dragstop="resizeTask"
+						@resizestop="resizeTask"
+						axis="x"
+						class="task nodate"
+						v-tooltip="'This task has no dates set.'"
 					>
-						<span>{{t.title}}</span>
+						<span>{{ t.title }}</span>
 					</VueDragResize>
 				</div>
 			</template>
@@ -91,16 +100,16 @@
 		<form @submit.prevent="addNewTask()" class="add-new-task" v-if="canWrite">
 			<transition name="width">
 				<input
-					type="text"
-					v-model="newTaskTitle"
-					class="input"
-					v-if="newTaskFieldActive"
-					ref="newTaskTitleField"
-					@keyup.esc="newTaskFieldActive = false"
 					@blur="hideCrateNewTask"
+					@keyup.esc="newTaskFieldActive = false"
+					class="input"
+					ref="newTaskTitleField"
+					type="text"
+					v-if="newTaskFieldActive"
+					v-model="newTaskTitle"
 				/>
 			</transition>
-			<button class="button is-primary noshadow" @click="showCreateNewTask">
+			<button @click="showCreateNewTask" class="button is-primary noshadow">
 				<span class="icon is-small">
 					<icon icon="plus"/>
 				</span>
@@ -113,7 +122,7 @@
 					<p class="card-header-title">
 						Edit Task
 					</p>
-					<a class="card-header-icon" @click="() => {isTaskEdit = false; taskToEdit = null}">
+					<a @click="() => {isTaskEdit = false; taskToEdit = null}" class="card-header-icon">
 						<span class="icon">
 							<icon icon="times"/>
 						</span>
@@ -130,258 +139,258 @@
 </template>
 
 <script>
-	import VueDragResize from 'vue-drag-resize'
-	import EditTask from './edit-task'
+import VueDragResize from 'vue-drag-resize'
+import EditTask from './edit-task'
 
-	import TaskService from '../../services/task'
-	import TaskModel from '../../models/task'
-	import priorities from '../../models/priorities'
-	import PriorityLabel from './partials/priorityLabel'
-	import TaskCollectionService from '../../services/taskCollection'
-	import {mapState} from 'vuex'
-	import Rights from '../../models/rights.json'
+import TaskService from '../../services/task'
+import TaskModel from '../../models/task'
+import priorities from '../../models/priorities'
+import PriorityLabel from './partials/priorityLabel'
+import TaskCollectionService from '../../services/taskCollection'
+import {mapState} from 'vuex'
+import Rights from '../../models/rights.json'
 
-	export default {
-		name: 'GanttChart',
-		components: {
-			PriorityLabel,
-			EditTask,
-			VueDragResize,
+export default {
+	name: 'GanttChart',
+	components: {
+		PriorityLabel,
+		EditTask,
+		VueDragResize,
+	},
+	props: {
+		listId: {
+			type: Number,
+			required: true,
 		},
-		props: {
-			listId: {
-				type: Number,
-				required: true,
-			},
-			showTaskswithoutDates: {
-				type: Boolean,
-				default: false,
-			},
-			dateFrom: {
-				default: new Date((new Date()).setDate((new Date()).getDate() - 15))
-			},
-			dateTo: {
-				default: new Date((new Date()).setDate((new Date()).getDate() + 30))
-			},
-			// The width of a day in pixels, used to calculate all sorts of things.
-			dayWidth: {
-				type: Number,
-				default: 35,
-			}
+		showTaskswithoutDates: {
+			type: Boolean,
+			default: false,
 		},
-		data() {
-			return {
-				days: [],
-				startDate: null,
-				endDate: null,
-				theTasks: [], // Pretty much a copy of the prop, since we cant mutate the prop directly
-				tasksWithoutDates: [],
-				taskService: TaskService,
-				taskDragged: null, // Saves to currently dragged task to be able to update it
-				fullWidth: 0,
-				now: null,
-				dayOffsetUntilToday: 0,
-				isTaskEdit: false,
-				taskToEdit: null,
-				newTaskTitle: '',
-				newTaskFieldActive: false,
-				priorities: {},
-				taskCollectionService: TaskCollectionService,
-			}
+		dateFrom: {
+			default: new Date((new Date()).setDate((new Date()).getDate() - 15)),
 		},
-		watch: {
-			'dateFrom': 'buildTheGanttChart',
-			'dateTo': 'buildTheGanttChart',
-			'listId': 'parseTasks',
+		dateTo: {
+			default: new Date((new Date()).setDate((new Date()).getDate() + 30)),
 		},
-		created() {
-			this.now = new Date()
-			this.taskCollectionService = new TaskCollectionService()
-			this.taskService = new TaskService()
-			this.priorities = priorities
+		// The width of a day in pixels, used to calculate all sorts of things.
+		dayWidth: {
+			type: Number,
+			default: 35,
 		},
-		mounted() {
-			this.buildTheGanttChart()
+	},
+	data() {
+		return {
+			days: [],
+			startDate: null,
+			endDate: null,
+			theTasks: [], // Pretty much a copy of the prop, since we cant mutate the prop directly
+			tasksWithoutDates: [],
+			taskService: TaskService,
+			taskDragged: null, // Saves to currently dragged task to be able to update it
+			fullWidth: 0,
+			now: null,
+			dayOffsetUntilToday: 0,
+			isTaskEdit: false,
+			taskToEdit: null,
+			newTaskTitle: '',
+			newTaskFieldActive: false,
+			priorities: {},
+			taskCollectionService: TaskCollectionService,
+		}
+	},
+	watch: {
+		'dateFrom': 'buildTheGanttChart',
+		'dateTo': 'buildTheGanttChart',
+		'listId': 'parseTasks',
+	},
+	created() {
+		this.now = new Date()
+		this.taskCollectionService = new TaskCollectionService()
+		this.taskService = new TaskService()
+		this.priorities = priorities
+	},
+	mounted() {
+		this.buildTheGanttChart()
+	},
+	computed: mapState({
+		canWrite: state => state.currentList.maxRight > Rights.READ,
+	}),
+	methods: {
+		buildTheGanttChart() {
+			this.setDates()
+			this.prepareGanttDays()
+			this.parseTasks()
 		},
-		computed: mapState({
-			canWrite: state => state.currentList.maxRight > Rights.READ,
-		}),
-		methods: {
-			buildTheGanttChart() {
-				this.setDates()
-				this.prepareGanttDays()
-				this.parseTasks()
-			},
-			setDates() {
-				this.startDate = new Date(this.dateFrom)
-				this.endDate = new Date(this.dateTo)
+		setDates() {
+			this.startDate = new Date(this.dateFrom)
+			this.endDate = new Date(this.dateTo)
 
-				this.dayOffsetUntilToday = Math.floor((this.now - this.startDate) / 1000 / 60 / 60 / 24) +1
-			},
-			prepareGanttDays() {
-				// Layout: years => [months => [days]]
-				let years = {};
-				for (let d = this.startDate; d <= this.endDate; d.setDate(d.getDate() + 1)) {
-					let date = new Date(d)
-					if (years[date.getFullYear() + ''] === undefined) {
-						years[date.getFullYear() + ''] = {}
-					}
-					if (years[date.getFullYear() + ''][date.getMonth()  + ''] === undefined) {
-						years[date.getFullYear() + ''][date.getMonth()  + ''] = []
-					}
-					years[date.getFullYear() + ''][date.getMonth()  + ''].push(date)
-					this.fullWidth += this.dayWidth
+			this.dayOffsetUntilToday = Math.floor((this.now - this.startDate) / 1000 / 60 / 60 / 24) + 1
+		},
+		prepareGanttDays() {
+			// Layout: years => [months => [days]]
+			let years = {}
+			for (let d = this.startDate; d <= this.endDate; d.setDate(d.getDate() + 1)) {
+				let date = new Date(d)
+				if (years[date.getFullYear() + ''] === undefined) {
+					years[date.getFullYear() + ''] = {}
 				}
-				this.$set(this, 'days', years)
-			},
-			parseTasks() {
-				this.setDates()
-				this.prepareTasks()
-			},
-			prepareTasks() {
-
-				const getAllTasks = (page = 1) => {
-					return this.taskCollectionService.getAll({listId: this.listId}, {}, page)
-						.then(tasks => {
-							if(page < this.taskCollectionService.totalPages) {
-								return getAllTasks(page + 1)
-									.then(nextTasks => {
-										return tasks.concat(nextTasks)
-									})
-							} else {
-								return tasks
-							}
-						})
-						.catch(e => {
-							return Promise.reject(e)
-						})
+				if (years[date.getFullYear() + ''][date.getMonth() + ''] === undefined) {
+					years[date.getFullYear() + ''][date.getMonth() + ''] = []
 				}
+				years[date.getFullYear() + ''][date.getMonth() + ''].push(date)
+				this.fullWidth += this.dayWidth
+			}
+			this.$set(this, 'days', years)
+		},
+		parseTasks() {
+			this.setDates()
+			this.prepareTasks()
+		},
+		prepareTasks() {
 
-				getAllTasks()
+			const getAllTasks = (page = 1) => {
+				return this.taskCollectionService.getAll({listId: this.listId}, {}, page)
 					.then(tasks => {
-						this.theTasks = tasks
-							.filter(t => {
-								if(t.startDate === null && !t.done) {
-									this.tasksWithoutDates.push(t)
-								}
-								return t.startDate >= this.startDate && t.endDate <= this.endDate
-							})
-							.map(t => {
-								return this.addGantAttributes(t)
-							})
-							.sort(function(a,b) {
-								if (a.startDate < b.startDate)
-									return -1
-								if (a.startDate > b.startDate)
-									return 1
-								return 0
-							})
+						if (page < this.taskCollectionService.totalPages) {
+							return getAllTasks(page + 1)
+								.then(nextTasks => {
+									return tasks.concat(nextTasks)
+								})
+						} else {
+							return tasks
+						}
 					})
 					.catch(e => {
-						this.error(e, this)
+						return Promise.reject(e)
 					})
-			},
-			addGantAttributes(t) {
-				t.endDate === null ? this.endDate : t.endDate
-				t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
-				t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1
-				return t
-			},
-			setTaskDragged(t) {
-				this.taskDragged = t
-			},
-			resizeTask(newRect) {
+			}
 
-				// Timeout to definitly catch if the user clicked on taskedit
-				setTimeout(() => {
-
-					if(this.isTaskEdit) {
-						return
-					}
-
-					let didntHaveDates = this.taskDragged.startDate === null ? true : false
-
-					let startDate = new Date(this.startDate)
-					startDate.setDate(startDate.getDate() + newRect.left / this.dayWidth)
-					startDate.setUTCHours(0)
-					startDate.setUTCMinutes(0)
-					startDate.setUTCSeconds(0)
-					startDate.setUTCMilliseconds(0)
-					this.taskDragged.startDate = startDate
-					let endDate = new Date(startDate)
-					endDate.setDate(startDate.getDate() + newRect.width / this.dayWidth)
-					this.taskDragged.startDate = startDate
-					this.taskDragged.endDate = endDate
-
-			
-					// We take the task from the overall tasks array because the one in it has bad data after it was updated once.
-					// FIXME: This is a workaround. We should use a better mechanism to get the task or, even better,
-					// prevent it from containing outdated Data in the first place.
-					for (const tt in this.theTasks) {
-						if (this.theTasks[tt].id === this.taskDragged.id) {
-							this.$set(this, 'taskDragged', this.theTasks[tt])
-							break
-						}
-					}
-
-					this.taskService.update(this.taskDragged)
-						.then(r => {
-							// If the task didn't have dates before, we'll update the list
-							if(didntHaveDates) {
-								for (const t in this.tasksWithoutDates) {
-									if (this.tasksWithoutDates[t].id === r.id) {
-										this.tasksWithoutDates.splice(t, 1)
-										break
-									}
-								}
-								this.theTasks.push(this.addGantAttributes(r))
-							} else {
-								for (const tt in this.theTasks) {
-									if (this.theTasks[tt].id === r.id) {
-										this.$set(this.theTasks, tt, this.addGantAttributes(r))
-										break
-									}
-								}
+			getAllTasks()
+				.then(tasks => {
+					this.theTasks = tasks
+						.filter(t => {
+							if (t.startDate === null && !t.done) {
+								this.tasksWithoutDates.push(t)
 							}
+							return t.startDate >= this.startDate && t.endDate <= this.endDate
 						})
-						.catch(e => {
-							this.error(e, this)
+						.map(t => {
+							return this.addGantAttributes(t)
 						})
-				}, 100)
-			},
-			editTask(task) {
-				this.taskToEdit = task
-				this.isTaskEdit = true
-			},
-			showCreateNewTask() {
-				if(!this.newTaskFieldActive) {
-					// Timeout to not send the form if the field isn't even shown
-					setTimeout(() => {
-						this.newTaskFieldActive = true
-						this.$nextTick(() => this.$refs.newTaskTitleField.focus())
-					}, 100)
-				}
-			},
-			hideCrateNewTask() {
-				if(this.newTaskTitle === '') {
-					this.$nextTick(() => this.newTaskFieldActive = false)
-				}
-			},
-			addNewTask() {
-				if (!this.newTaskFieldActive) {
+						.sort(function (a, b) {
+							if (a.startDate < b.startDate)
+								return -1
+							if (a.startDate > b.startDate)
+								return 1
+							return 0
+						})
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		addGantAttributes(t) {
+			t.endDate === null ? this.endDate : t.endDate
+			t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
+			t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1
+			return t
+		},
+		setTaskDragged(t) {
+			this.taskDragged = t
+		},
+		resizeTask(newRect) {
+
+			// Timeout to definitly catch if the user clicked on taskedit
+			setTimeout(() => {
+
+				if (this.isTaskEdit) {
 					return
 				}
-				let task = new TaskModel({title: this.newTaskTitle, listId: this.listId})
-				this.taskService.create(task)
+
+				let didntHaveDates = this.taskDragged.startDate === null ? true : false
+
+				let startDate = new Date(this.startDate)
+				startDate.setDate(startDate.getDate() + newRect.left / this.dayWidth)
+				startDate.setUTCHours(0)
+				startDate.setUTCMinutes(0)
+				startDate.setUTCSeconds(0)
+				startDate.setUTCMilliseconds(0)
+				this.taskDragged.startDate = startDate
+				let endDate = new Date(startDate)
+				endDate.setDate(startDate.getDate() + newRect.width / this.dayWidth)
+				this.taskDragged.startDate = startDate
+				this.taskDragged.endDate = endDate
+
+
+				// We take the task from the overall tasks array because the one in it has bad data after it was updated once.
+				// FIXME: This is a workaround. We should use a better mechanism to get the task or, even better,
+				// prevent it from containing outdated Data in the first place.
+				for (const tt in this.theTasks) {
+					if (this.theTasks[tt].id === this.taskDragged.id) {
+						this.$set(this, 'taskDragged', this.theTasks[tt])
+						break
+					}
+				}
+
+				this.taskService.update(this.taskDragged)
 					.then(r => {
-						this.tasksWithoutDates.push(this.addGantAttributes(r))
-						this.newTaskTitle = ''
-						this.hideCrateNewTask()
+						// If the task didn't have dates before, we'll update the list
+						if (didntHaveDates) {
+							for (const t in this.tasksWithoutDates) {
+								if (this.tasksWithoutDates[t].id === r.id) {
+									this.tasksWithoutDates.splice(t, 1)
+									break
+								}
+							}
+							this.theTasks.push(this.addGantAttributes(r))
+						} else {
+							for (const tt in this.theTasks) {
+								if (this.theTasks[tt].id === r.id) {
+									this.$set(this.theTasks, tt, this.addGantAttributes(r))
+									break
+								}
+							}
+						}
 					})
 					.catch(e => {
 						this.error(e, this)
 					})
-			},
+			}, 100)
 		},
-	}
+		editTask(task) {
+			this.taskToEdit = task
+			this.isTaskEdit = true
+		},
+		showCreateNewTask() {
+			if (!this.newTaskFieldActive) {
+				// Timeout to not send the form if the field isn't even shown
+				setTimeout(() => {
+					this.newTaskFieldActive = true
+					this.$nextTick(() => this.$refs.newTaskTitleField.focus())
+				}, 100)
+			}
+		},
+		hideCrateNewTask() {
+			if (this.newTaskTitle === '') {
+				this.$nextTick(() => this.newTaskFieldActive = false)
+			}
+		},
+		addNewTask() {
+			if (!this.newTaskFieldActive) {
+				return
+			}
+			let task = new TaskModel({title: this.newTaskTitle, listId: this.listId})
+			this.taskService.create(task)
+				.then(r => {
+					this.tasksWithoutDates.push(this.addGantAttributes(r))
+					this.newTaskTitle = ''
+					this.hideCrateNewTask()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
 </script>
diff --git a/src/components/tasks/mixins/attachmentUpload.js b/src/components/tasks/mixins/attachmentUpload.js
index 7dac9340e..08580f62e 100644
--- a/src/components/tasks/mixins/attachmentUpload.js
+++ b/src/components/tasks/mixins/attachmentUpload.js
@@ -28,5 +28,5 @@ export default {
 					this.error(e, this)
 				})
 		},
-	}
+	},
 }
\ No newline at end of file
diff --git a/src/components/tasks/mixins/taskList.js b/src/components/tasks/mixins/taskList.js
index 5055f0315..fd741f145 100644
--- a/src/components/tasks/mixins/taskList.js
+++ b/src/components/tasks/mixins/taskList.js
@@ -137,7 +137,7 @@ export default {
 
 			this.$router.push({
 				name: 'list.list',
-				query: {search: this.searchTerm}
+				query: {search: this.searchTerm},
 			})
 		},
 		hideSearchBar() {
@@ -154,12 +154,12 @@ export default {
 			return {
 				name: 'list.' + type,
 				params: {
-					type: type
+					type: type,
 				},
 				query: {
 					page: page,
 				},
 			}
 		},
-	}
+	},
 }
\ No newline at end of file
diff --git a/src/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 120159a2f..033d38bbf 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -6,17 +6,30 @@
 			</span>
 			Attachments
 			<a
-					v-if="editEnabled"
-					class="button is-primary is-outlined is-small noshadow"
-					@click="$refs.files.click()"
-					:disabled="attachmentService.loading">
+				:disabled="attachmentService.loading"
+				@click="$refs.files.click()"
+				class="button is-primary is-outlined is-small noshadow"
+				v-if="editEnabled">
 				<span class="icon is-small"><icon icon="cloud-upload-alt"/></span>
 				Upload attachment
 			</a>
 		</h3>
 
-		<input type="file" id="files" ref="files" multiple @change="uploadNewAttachment()" :disabled="attachmentService.loading" v-if="editEnabled"/>
-		<progress v-if="attachmentService.uploadProgress > 0" class="progress is-primary" :value="attachmentService.uploadProgress" max="100">{{ attachmentService.uploadProgress }}%</progress>
+		<input
+			:disabled="attachmentService.loading"
+			@change="uploadNewAttachment()"
+			id="files"
+			multiple
+			ref="files"
+			type="file"
+			v-if="editEnabled"/>
+		<progress
+			:value="attachmentService.uploadProgress"
+			class="progress is-primary"
+			max="100"
+			v-if="attachmentService.uploadProgress > 0">
+			{{ attachmentService.uploadProgress }}%
+		</progress>
 
 		<table>
 			<tr>
@@ -27,22 +40,30 @@
 				<th>Created By</th>
 				<th>Action</th>
 			</tr>
-			<tr class="attachment" v-for="a in attachments" :key="a.id">
+			<tr :key="a.id" class="attachment" v-for="a in attachments">
 				<td>
 					{{ a.file.name }}
 				</td>
 				<td>{{ a.file.getHumanSize() }}</td>
 				<td>{{ a.file.mime }}</td>
 				<td v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</td>
-				<td><user :user="a.createdBy" :avatar-size="30"/></td>
+				<td>
+					<user :avatar-size="30" :user="a.createdBy"/>
+				</td>
 				<td>
 					<div class="buttons has-addons">
-						<a class="button is-primary noshadow" @click="downloadAttachment(a)" v-tooltip="'Download this attachment'">
+						<a
+							@click="downloadAttachment(a)"
+							class="button is-primary noshadow"
+							v-tooltip="'Download this attachment'">
 							<span class="icon">
 								<icon icon="cloud-download-alt"/>
 							</span>
 						</a>
-						<a v-if="editEnabled" class="button is-danger noshadow" v-tooltip="'Delete this attachment'" @click="() => {attachmentToDelete = a; showDeleteModal = true}">
+						<a
+							@click="() => {attachmentToDelete = a; showDeleteModal = true}"
+							class="button is-danger noshadow" v-if="editEnabled"
+							v-tooltip="'Delete this attachment'">
 							<span class="icon">
 								<icon icon="trash-alt"/>
 							</span>
@@ -53,7 +74,7 @@
 		</table>
 
 		<!-- Dropzone -->
-		<div class="dropzone" :class="{ 'hidden': !showDropzone }" v-if="editEnabled">
+		<div :class="{ 'hidden': !showDropzone }" class="dropzone" v-if="editEnabled">
 			<div class="drop-hint">
 				<div class="icon">
 					<icon icon="cloud-upload-alt"/>
@@ -66,9 +87,9 @@
 
 		<!-- Delete modal -->
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				v-on:submit="deleteAttachment()">
+			@close="showDeleteModal = false"
+			v-if="showDeleteModal"
+			v-on:submit="deleteAttachment()">
 			<span slot="header">Delete attachment</span>
 			<p slot="text">Are you sure you want to delete the attachment {{ attachmentToDelete.file.name }}?<br/>
 				<b>This CANNOT BE UNDONE!</b></p>
@@ -77,115 +98,115 @@
 </template>
 
 <script>
-	import AttachmentService from '../../../services/attachment'
-	import AttachmentModel from '../../../models/attachment'
-	import User from '../../misc/user'
-	import {mapState} from 'vuex'
+import AttachmentService from '../../../services/attachment'
+import AttachmentModel from '../../../models/attachment'
+import User from '../../misc/user'
+import {mapState} from 'vuex'
 
-	export default {
-		name: 'attachments',
-		components: {
-			User,
+export default {
+	name: 'attachments',
+	components: {
+		User,
+	},
+	data() {
+		return {
+			attachmentService: AttachmentService,
+			showDropzone: false,
+
+			showDeleteModal: false,
+			attachmentToDelete: AttachmentModel,
+		}
+	},
+	props: {
+		taskId: {
+			required: true,
+			type: Number,
 		},
-		data() {
-			return {
-				attachmentService: AttachmentService,
-				showDropzone: false,
+		initialAttachments: {
+			type: Array,
+		},
+		editEnabled: {
+			default: true,
+		},
+	},
+	created() {
+		this.attachmentService = new AttachmentService()
+	},
+	computed: mapState({
+		attachments: state => state.attachments.attachments,
+	}),
+	mounted() {
+		document.addEventListener('dragenter', e => {
+			e.stopPropagation()
+			e.preventDefault()
+			this.showDropzone = true
+		})
 
-				showDeleteModal: false,
-				attachmentToDelete: AttachmentModel,
+		window.addEventListener('dragleave', e => {
+			e.stopPropagation()
+			e.preventDefault()
+			this.showDropzone = false
+		})
+
+		document.addEventListener('dragover', e => {
+			e.stopPropagation()
+			e.preventDefault()
+			this.showDropzone = true
+		})
+
+		document.addEventListener('drop', e => {
+			e.stopPropagation()
+			e.preventDefault()
+
+			let files = e.dataTransfer.files
+			this.uploadFiles(files)
+			this.showDropzone = false
+		})
+	},
+	methods: {
+		downloadAttachment(attachment) {
+			this.attachmentService.download(attachment)
+		},
+		uploadNewAttachment() {
+			if (this.$refs.files.files.length === 0) {
+				return
 			}
-		},
-		props: {
-			taskId: {
-				required: true,
-				type: Number,
-			},
-			initialAttachments: {
-				type: Array,
-			},
-			editEnabled: {
-				default: true,
-			},
-		},
-		created() {
-			this.attachmentService = new AttachmentService()
-		},
-		computed: mapState({
-			attachments: state => state.attachments.attachments
-		}),
-		mounted() {
-			document.addEventListener('dragenter', e => {
-				e.stopPropagation()
-				e.preventDefault()
-				this.showDropzone = true
-			});
 
-			window.addEventListener('dragleave', e => {
-				e.stopPropagation()
-				e.preventDefault()
-				this.showDropzone = false
-			});
-
-			document.addEventListener('dragover', e => {
-				e.stopPropagation()
-				e.preventDefault()
-				this.showDropzone = true
-			});
-
-			document.addEventListener('drop', e => {
-				e.stopPropagation()
-				e.preventDefault()
-
-				let files = e.dataTransfer.files
-				this.uploadFiles(files)
-				this.showDropzone = false
-			})
+			this.uploadFiles(this.$refs.files.files)
 		},
-		methods: {
-			downloadAttachment(attachment) {
-				this.attachmentService.download(attachment)
-			},
-			uploadNewAttachment() {
-				if(this.$refs.files.files.length === 0) {
-					return
-				}
-
-				this.uploadFiles(this.$refs.files.files)
-			},
-			uploadFiles(files) {
-				const attachmentModel = new AttachmentModel({taskId: this.taskId})
-				this.attachmentService.create(attachmentModel, files)
-					.then(r => {
-						if(r.success !== null) {
-							r.success.forEach(a => {
-								this.$store.commit('attachments/add', a)
-								this.$store.dispatch('tasks/addTaskAttachment', {taskId: this.taskId, attachment: a})
-							})
-						}
-						if(r.errors !== null) {
-							r.errors.forEach(m => {
-								this.error(m)
-							})
-						}
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			deleteAttachment() {
-				this.attachmentService.delete(this.attachmentToDelete)
-					.then(r => {
-						this.$store.commit('attachments/removeById', this.attachmentToDelete.id)
-						this.success(r, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.showDeleteModal = false
-					})
-			},
+		uploadFiles(files) {
+			const attachmentModel = new AttachmentModel({taskId: this.taskId})
+			this.attachmentService.create(attachmentModel, files)
+				.then(r => {
+					if (r.success !== null) {
+						r.success.forEach(a => {
+							this.$store.commit('attachments/add', a)
+							this.$store.dispatch('tasks/addTaskAttachment', {taskId: this.taskId, attachment: a})
+						})
+					}
+					if (r.errors !== null) {
+						r.errors.forEach(m => {
+							this.error(m)
+						})
+					}
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		deleteAttachment() {
+			this.attachmentService.delete(this.attachmentToDelete)
+				.then(r => {
+					this.$store.commit('attachments/removeById', this.attachmentToDelete.id)
+					this.success(r, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.showDeleteModal = false
+				})
+		},
+	},
+}
 </script>
diff --git a/src/components/tasks/partials/comments.vue b/src/components/tasks/partials/comments.vue
index 20bb85e89..1126900c0 100644
--- a/src/components/tasks/partials/comments.vue
+++ b/src/components/tasks/partials/comments.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="content details" :class="{'has-top-border': canWrite || comments.length > 0}">
+	<div :class="{'has-top-border': canWrite || comments.length > 0}" class="content details">
 		<h1 v-if="canWrite || comments.length > 0">
 			<span class="icon is-grey">
 				<icon :icon="['far', 'comments']"/>
@@ -10,24 +10,24 @@
 			<progress class="progress is-small is-info" max="100" v-if="taskCommentService.loading">Loading
 				comments...
 			</progress>
-			<div class="media comment" v-for="c in comments" :key="c.id">
+			<div :key="c.id" class="media comment" v-for="c in comments">
 				<figure class="media-left">
-					<img class="image is-avatar" :src="c.author.getAvatarUrl(48)" alt="" width="48" height="48"/>
+					<img :src="c.author.getAvatarUrl(48)" alt="" class="image is-avatar" height="48" width="48"/>
 				</figure>
 				<div class="media-content">
-					<div class="comment-info" :class="{'is-pulled-up': canWrite}">
+					<div :class="{'is-pulled-up': canWrite}" class="comment-info">
 						<strong>{{ c.author.username }}</strong>&nbsp;
 						<small v-tooltip="formatDate(c.created)">{{ formatDateSince(c.created) }}</small>
 						<small v-if="+new Date(c.created) !== +new Date(c.updated)" v-tooltip="formatDate(c.updated)"> ·
 							edited {{ formatDateSince(c.updated) }}</small>
 					</div>
 					<editor
-							v-model="c.comment"
-							:has-preview="true"
-							@change="() => {toggleEdit(c);editComment()}"
-							:upload-enabled="true"
-							:upload-callback="attachmentUpload"
-							:is-edit-enabled="canWrite"
+						:has-preview="true"
+						:is-edit-enabled="canWrite"
+						:upload-callback="attachmentUpload"
+						:upload-enabled="true"
+						@change="() => {toggleEdit(c);editComment()}"
+						v-model="c.comment"
 					/>
 					<div class="comment-actions" v-if="canWrite">
 						<a @click="toggleDelete(c.id)">Remove</a>
@@ -36,25 +36,25 @@
 			</div>
 			<div class="media comment" v-if="canWrite">
 				<figure class="media-left">
-					<img class="image is-avatar" :src="userAvatar" alt="" width="48" height="48"/>
+					<img :src="userAvatar" alt="" class="image is-avatar" height="48" width="48"/>
 				</figure>
 				<div class="media-content">
 					<div class="form">
 						<div class="field">
 							<editor
-									placeholder="Add your comment..."
-									:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
-									v-model="newComment.comment"
-									:has-preview="false"
-									:upload-enabled="true"
-									:upload-callback="attachmentUpload"
-									v-if="editorActive"
+								:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
+								:has-preview="false"
+								:upload-callback="attachmentUpload"
+								:upload-enabled="true"
+								placeholder="Add your comment..."
+								v-if="editorActive"
+								v-model="newComment.comment"
 							/>
 						</div>
 						<div class="field">
-							<button class="button is-primary"
-									:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
-									@click="addComment()" :disabled="newComment.comment === ''">Comment
+							<button :class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
+									:disabled="newComment.comment === ''"
+									@click="addComment()" class="button is-primary">Comment
 							</button>
 						</div>
 					</div>
@@ -62,9 +62,9 @@
 			</div>
 		</div>
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="deleteComment()">
+			@close="showDeleteModal = false"
+			@submit="deleteComment()"
+			v-if="showDeleteModal">
 			<span slot="header">Delete this comment</span>
 			<p slot="text">Are you sure you want to delete this comment?
 				<br/>This <b>CANNOT BE UNDONE!</b></p>
@@ -73,145 +73,145 @@
 </template>
 
 <script>
-	import TaskCommentService from '../../../services/taskComment'
-	import TaskCommentModel from '../../../models/taskComment'
-	import attachmentUpload from '../mixins/attachmentUpload'
-	import LoadingComponent from '../../misc/loading'
-	import ErrorComponent from '../../misc/error'
+import TaskCommentService from '../../../services/taskComment'
+import TaskCommentModel from '../../../models/taskComment'
+import attachmentUpload from '../mixins/attachmentUpload'
+import LoadingComponent from '../../misc/loading'
+import ErrorComponent from '../../misc/error'
 
-	export default {
-		name: 'comments',
-		components: {
-			editor: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../input/editor'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
+export default {
+	name: 'comments',
+	components: {
+		editor: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../input/editor'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	mixins: [
+		attachmentUpload,
+	],
+	props: {
+		taskId: {
+			type: Number,
+			required: true,
 		},
-		mixins: [
-			attachmentUpload,
-		],
-		props: {
-			taskId: {
-				type: Number,
-				required: true,
-			},
-			canWrite: {
-				default: true,
-			},
+		canWrite: {
+			default: true,
 		},
-		data() {
-			return {
-				comments: [],
+	},
+	data() {
+		return {
+			comments: [],
 
-				showDeleteModal: false,
-				commentToDelete: TaskCommentModel,
+			showDeleteModal: false,
+			commentToDelete: TaskCommentModel,
 
-				isCommentEdit: false,
-				commentEdit: TaskCommentModel,
+			isCommentEdit: false,
+			commentEdit: TaskCommentModel,
 
-				taskCommentService: TaskCommentService,
-				newComment: TaskCommentModel,
-				editorActive: true,
-			}
-		},
-		created() {
-			this.taskCommentService = new TaskCommentService()
-			this.newComment = new TaskCommentModel({taskId: this.taskId})
-			this.commentEdit = new TaskCommentModel({taskId: this.taskId})
-			this.commentToDelete = new TaskCommentModel({taskId: this.taskId})
-			this.comments = []
-		},
-		mounted() {
+			taskCommentService: TaskCommentService,
+			newComment: TaskCommentModel,
+			editorActive: true,
+		}
+	},
+	created() {
+		this.taskCommentService = new TaskCommentService()
+		this.newComment = new TaskCommentModel({taskId: this.taskId})
+		this.commentEdit = new TaskCommentModel({taskId: this.taskId})
+		this.commentToDelete = new TaskCommentModel({taskId: this.taskId})
+		this.comments = []
+	},
+	mounted() {
+		this.loadComments()
+	},
+	watch: {
+		taskId() {
 			this.loadComments()
 		},
-		watch: {
-			taskId() {
-				this.loadComments()
-			},
+	},
+	computed: {
+		userAvatar() {
+			return this.$store.state.auth.info.getAvatarUrl(48)
 		},
-		computed: {
-			userAvatar() {
-				return this.$store.state.auth.info.getAvatarUrl(48)
-			},
+	},
+	methods: {
+		loadComments() {
+			this.taskCommentService.getAll({taskId: this.taskId})
+				.then(r => {
+					this.$set(this, 'comments', r)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-		methods: {
-			loadComments() {
-				this.taskCommentService.getAll({taskId: this.taskId})
-					.then(r => {
-						this.$set(this, 'comments', r)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			addComment() {
-				if (this.newComment.comment === '') {
-					return
-				}
+		addComment() {
+			if (this.newComment.comment === '') {
+				return
+			}
 
-				// This makes the editor trigger its mounted function again which makes it forget every input
-				// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
-				// which made it impossible to detect change from the outside. Therefore the component would
-				// not update if new content from the outside was made available.
-				// See https://github.com/NikulinIlya/vue-easymde/issues/3
-				this.editorActive = false
-				this.$nextTick(() => this.editorActive = true)
+			// This makes the editor trigger its mounted function again which makes it forget every input
+			// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
+			// which made it impossible to detect change from the outside. Therefore the component would
+			// not update if new content from the outside was made available.
+			// See https://github.com/NikulinIlya/vue-easymde/issues/3
+			this.editorActive = false
+			this.$nextTick(() => this.editorActive = true)
 
-				this.taskCommentService.create(this.newComment)
-					.then(r => {
-						this.comments.push(r)
-						this.newComment.comment = ''
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			toggleEdit(comment) {
-				this.isCommentEdit = !this.isCommentEdit
-				this.commentEdit = comment
-			},
-			toggleDelete(commentId) {
-				this.showDeleteModal = !this.showDeleteModal
-				this.commentToDelete.id = commentId
-			},
-			editComment() {
-				if (this.commentEdit.comment === '') {
-					return
-				}
-				this.commentEdit.taskId = this.taskId
-				this.taskCommentService.update(this.commentEdit)
-					.then(r => {
-						for (const c in this.comments) {
-							if (this.comments[c].id === this.commentEdit.id) {
-								this.$set(this.comments, c, r)
-							}
-						}
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.isCommentEdit = false
-					})
-			},
-			deleteComment() {
-				this.taskCommentService.delete(this.commentToDelete)
-					.then(() => {
-						for (const a in this.comments) {
-							if (this.comments[a].id === this.commentToDelete.id) {
-								this.comments.splice(a, 1)
-							}
-						}
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.showDeleteModal = false
-					})
-			},
+			this.taskCommentService.create(this.newComment)
+				.then(r => {
+					this.comments.push(r)
+					this.newComment.comment = ''
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		toggleEdit(comment) {
+			this.isCommentEdit = !this.isCommentEdit
+			this.commentEdit = comment
+		},
+		toggleDelete(commentId) {
+			this.showDeleteModal = !this.showDeleteModal
+			this.commentToDelete.id = commentId
+		},
+		editComment() {
+			if (this.commentEdit.comment === '') {
+				return
+			}
+			this.commentEdit.taskId = this.taskId
+			this.taskCommentService.update(this.commentEdit)
+				.then(r => {
+					for (const c in this.comments) {
+						if (this.comments[c].id === this.commentEdit.id) {
+							this.$set(this.comments, c, r)
+						}
+					}
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.isCommentEdit = false
+				})
+		},
+		deleteComment() {
+			this.taskCommentService.delete(this.commentToDelete)
+				.then(() => {
+					for (const a in this.comments) {
+						if (this.comments[a].id === this.commentToDelete.id) {
+							this.comments.splice(a, 1)
+						}
+					}
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.showDeleteModal = false
+				})
+		},
+	},
+}
 </script>
diff --git a/src/components/tasks/partials/date-table-cell.vue b/src/components/tasks/partials/date-table-cell.vue
index 08c3a300b..e405c0b30 100644
--- a/src/components/tasks/partials/date-table-cell.vue
+++ b/src/components/tasks/partials/date-table-cell.vue
@@ -5,13 +5,13 @@
 </template>
 
 <script>
-	export default {
-		name: 'date-table-cell',
-		props: {
-			date: {
-				type: Date,
-				default: 0,
-			}
+export default {
+	name: 'date-table-cell',
+	props: {
+		date: {
+			type: Date,
+			default: 0,
 		},
-	}
+	},
+}
 </script>
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index cfb299be8..0a7c91dae 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -1,112 +1,112 @@
 <template>
-	<div class="defer-task loading-container" :class="{'is-loading': taskService.loading}">
+	<div :class="{'is-loading': taskService.loading}" class="defer-task loading-container">
 		<label class="label">Defer due date</label>
 		<div class="defer-days">
-			<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(1)">1 day</button>
-			<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(3)">3 days</button>
-			<button class="button is-outlined is-primary has-no-shadow" @click="() => deferDays(7)">1 week</button>
+			<button @click="() => deferDays(1)" class="button is-outlined is-primary has-no-shadow">1 day</button>
+			<button @click="() => deferDays(3)" class="button is-outlined is-primary has-no-shadow">3 days</button>
+			<button @click="() => deferDays(7)" class="button is-outlined is-primary has-no-shadow">1 week</button>
 		</div>
 		<flat-pickr
-				:class="{ 'disabled': taskService.loading}"
-				class="input"
-				:disabled="taskService.loading"
-				v-model="dueDate"
-				:config="flatPickerConfig"
+			:class="{ 'disabled': taskService.loading}"
+			:config="flatPickerConfig"
+			:disabled="taskService.loading"
+			class="input"
+			v-model="dueDate"
 		/>
 	</div>
 </template>
 
 <script>
-	import TaskService from '../../../services/task'
-	import flatPickr from 'vue-flatpickr-component'
+import TaskService from '../../../services/task'
+import flatPickr from 'vue-flatpickr-component'
 
-	export default {
-		name: 'defer-task',
-		data() {
-			return {
-				taskService: TaskService,
-				task: null,
-				// We're saving the due date seperately to prevent null errors in very short periods where the task is null.
-				dueDate: null,
-				lastValue: null,
-				changeInterval: null,
+export default {
+	name: 'defer-task',
+	data() {
+		return {
+			taskService: TaskService,
+			task: null,
+			// We're saving the due date seperately to prevent null errors in very short periods where the task is null.
+			dueDate: null,
+			lastValue: null,
+			changeInterval: null,
 
-				flatPickerConfig: {
-					altFormat: 'j M Y H:i',
-					altInput: true,
-					dateFormat: 'Y-m-d H:i',
-					enableTime: true,
-					time_24hr: true,
-					inline: true,
-				},
-			}
+			flatPickerConfig: {
+				altFormat: 'j M Y H:i',
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				time_24hr: true,
+				inline: true,
+			},
+		}
+	},
+	components: {
+		flatPickr,
+	},
+	props: {
+		value: {
+			required: true,
 		},
-		components: {
-			flatPickr,
-		},
-		props: {
-			value: {
-				required: true,
-			}
-		},
-		created() {
-			this.taskService = new TaskService()
-		},
-		mounted() {
-			this.task = this.value
+	},
+	created() {
+		this.taskService = new TaskService()
+	},
+	mounted() {
+		this.task = this.value
+		this.dueDate = this.task.dueDate
+		this.lastValue = this.dueDate
+
+		// Because we don't really have other ways of handling change since if we let flatpickr
+		// change events trigger updates, it would trigger a flatpickr change event which would trigger
+		// an update which would trigger a change event and so on...
+		// This is either a bug in flatpickr or in the vue component of it.
+		// To work around that, we're only updating if something changed and check each second and when closing the popup.
+		if (this.changeInterval) {
+			clearInterval(this.changeInterval)
+		}
+
+		this.changeInterval = setInterval(this.updateDueDate, 1000)
+	},
+	beforeDestroy() {
+		if (this.changeInterval) {
+			clearInterval(this.changeInterval)
+		}
+		this.updateDueDate()
+	},
+	watch: {
+		value(newVal) {
+			this.task = newVal
 			this.dueDate = this.task.dueDate
 			this.lastValue = this.dueDate
-
-			// Because we don't really have other ways of handling change since if we let flatpickr
-			// change events trigger updates, it would trigger a flatpickr change event which would trigger
-			// an update which would trigger a change event and so on...
-			// This is either a bug in flatpickr or in the vue component of it.
-			// To work around that, we're only updating if something changed and check each second and when closing the popup.
-			if (this.changeInterval) {
-				clearInterval(this.changeInterval)
-			}
-
-			this.changeInterval = setInterval(this.updateDueDate, 1000)
 		},
-		beforeDestroy() {
-			if (this.changeInterval) {
-				clearInterval(this.changeInterval)
-			}
+	},
+	methods: {
+		deferDays(days) {
+			this.dueDate = new Date(this.dueDate)
+			this.dueDate = this.dueDate.setDate(this.dueDate.getDate() + days)
 			this.updateDueDate()
 		},
-		watch: {
-			value(newVal) {
-				this.task = newVal
-				this.dueDate = this.task.dueDate
-				this.lastValue = this.dueDate
-			},
-		},
-		methods: {
-			deferDays(days) {
-				this.dueDate = new Date(this.dueDate)
-				this.dueDate = this.dueDate.setDate(this.dueDate.getDate() + days)
-				this.updateDueDate()
-			},
-			updateDueDate() {
-				if (!this.dueDate) {
-					return
-				}
+		updateDueDate() {
+			if (!this.dueDate) {
+				return
+			}
 
-				if (+new Date(this.dueDate) === +this.lastValue) {
-					return
-				}
+			if (+new Date(this.dueDate) === +this.lastValue) {
+				return
+			}
 
-				this.task.dueDate = new Date(this.dueDate)
-				this.taskService.update(this.task)
-					.then(r => {
-						this.lastValue = r.dueDate
-						this.task = r
-						this.$emit('input', r)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
+			this.task.dueDate = new Date(this.dueDate)
+			this.taskService.update(this.task)
+				.then(r => {
+					this.lastValue = r.dueDate
+					this.task = r
+					this.$emit('input', r)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+	},
+}
 </script>
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index 7238f6bc5..d21825975 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -1,137 +1,139 @@
 <template>
 	<multiselect
-			:multiple="true"
-			:close-on-select="false"
-			:clear-on-select="true"
-			:options-limit="300"
-			:hide-selected="true"
-			v-model="assignees"
-			:options="foundUsers"
-			:searchable="true"
-			:loading="listUserService.loading"
-			:internal-search="true"
-			@search-change="findUser"
-			@select="addAssignee"
-			placeholder="Type to assign a user..."
-			label="username"
-			track-by="id"
-			select-label="Assign this user"
-			:showNoOptions="false"
-			:disabled="disabled"
-		>
+		:clear-on-select="true"
+		:close-on-select="false"
+		:disabled="disabled"
+		:hide-selected="true"
+		:internal-search="true"
+		:loading="listUserService.loading"
+		:multiple="true"
+		:options="foundUsers"
+		:options-limit="300"
+		:searchable="true"
+		:showNoOptions="false"
+		@search-change="findUser"
+		@select="addAssignee"
+		label="username"
+		placeholder="Type to assign a user..."
+		select-label="Assign this user"
+		track-by="id"
+		v-model="assignees"
+	>
 		<template slot="tag" slot-scope="{ option }">
-			<user :user="option" :show-username="false" :avatar-size="30"/>
+			<user :avatar-size="30" :show-username="false" :user="option"/>
 			<a @click="removeAssignee(option)" class="remove-assignee" v-if="!disabled">
 				<icon icon="times"/>
 			</a>
 		</template>
 		<template slot="clear" slot-scope="props">
-			<div class="multiselect__clear" v-if="newAssignee !== null && newAssignee.id !== 0"
-				@mousedown.prevent.stop="clearAllFoundUsers(props.search)"></div>
+			<div
+				@mousedown.prevent.stop="clearAllFoundUsers(props.search)"
+				class="multiselect__clear"
+				v-if="newAssignee !== null && newAssignee.id !== 0"></div>
 		</template>
 		<span slot="noResult">No user found. Consider changing the search query.</span>
 	</multiselect>
 </template>
 
 <script>
-	import {differenceWith} from 'lodash'
+import {differenceWith} from 'lodash'
 
-	import UserModel from '../../../models/user'
-	import ListUserService from '../../../services/listUsers'
-	import TaskAssigneeService from '../../../services/taskAssignee'
-	import User from '../../misc/user'
-	import LoadingComponent from '../../misc/loading'
-	import ErrorComponent from '../../misc/error'
+import UserModel from '../../../models/user'
+import ListUserService from '../../../services/listUsers'
+import TaskAssigneeService from '../../../services/taskAssignee'
+import User from '../../misc/user'
+import LoadingComponent from '../../misc/loading'
+import ErrorComponent from '../../misc/error'
 
-	export default {
-		name: 'editAssignees',
-		components: {
-			User,
-			multiselect: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
+export default {
+	name: 'editAssignees',
+	components: {
+		User,
+		multiselect: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	props: {
+		taskId: {
+			type: Number,
+			required: true,
 		},
-		props: {
-			taskId: {
-				type: Number,
-				required: true,
-			},
-			listId: {
-				type: Number,
-				required: true,
-			},
-			initialAssignees: {
-				type: Array,
-				default: () => [],
-			},
-			disabled: {
-				default: false,
-			},
+		listId: {
+			type: Number,
+			required: true,
 		},
-		data() {
-			return {
-				newAssignee: UserModel,
-				listUserService: ListUserService,
-				foundUsers: [],
-				assignees: [],
-				taskAssigneeService: TaskAssigneeService,
-			}
+		initialAssignees: {
+			type: Array,
+			default: () => [],
 		},
-		created() {
-			this.assignees = this.initialAssignees
-			this.listUserService = new ListUserService()
-			this.newAssignee = new UserModel()
-			this.taskAssigneeService = new TaskAssigneeService()
+		disabled: {
+			default: false,
 		},
-		watch: {
-			initialAssignees(newVal) {
-				this.assignees = newVal
-			}
+	},
+	data() {
+		return {
+			newAssignee: UserModel,
+			listUserService: ListUserService,
+			foundUsers: [],
+			assignees: [],
+			taskAssigneeService: TaskAssigneeService,
+		}
+	},
+	created() {
+		this.assignees = this.initialAssignees
+		this.listUserService = new ListUserService()
+		this.newAssignee = new UserModel()
+		this.taskAssigneeService = new TaskAssigneeService()
+	},
+	watch: {
+		initialAssignees(newVal) {
+			this.assignees = newVal
 		},
-		methods: {
-			addAssignee(user) {
-				this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			removeAssignee(user) {
-				this.$store.dispatch('tasks/removeAssignee', {user: user, taskId: this.taskId})
-					.then(() => {
-						// Remove the assignee from the list
-						for (const a in this.assignees) {
-							if (this.assignees[a].id === user.id) {
-								this.assignees.splice(a, 1)
-							}
+	},
+	methods: {
+		addAssignee(user) {
+			this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		removeAssignee(user) {
+			this.$store.dispatch('tasks/removeAssignee', {user: user, taskId: this.taskId})
+				.then(() => {
+					// Remove the assignee from the list
+					for (const a in this.assignees) {
+						if (this.assignees[a].id === user.id) {
+							this.assignees.splice(a, 1)
 						}
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			findUser(query) {
-				if (query === '') {
-					this.clearAllFoundUsers()
-					return
-				}
-
-				this.listUserService.getAll({listId: this.listId}, {s: query})
-					.then(response => {
-						// Filter the results to not include users who are already assigned
-						this.$set(this, 'foundUsers', differenceWith(response, this.assignees, (first, second) => {
-							return first.id === second.id
-						}))
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			clearAllFoundUsers() {
-				this.$set(this, 'foundUsers', [])
-			},
+					}
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		findUser(query) {
+			if (query === '') {
+				this.clearAllFoundUsers()
+				return
+			}
+
+			this.listUserService.getAll({listId: this.listId}, {s: query})
+				.then(response => {
+					// Filter the results to not include users who are already assigned
+					this.$set(this, 'foundUsers', differenceWith(response, this.assignees, (first, second) => {
+						return first.id === second.id
+					}))
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		clearAllFoundUsers() {
+			this.$set(this, 'foundUsers', [])
+		},
+	},
+}
 </script>
diff --git a/src/components/tasks/partials/editLabels.vue b/src/components/tasks/partials/editLabels.vue
index f59f1ded0..ae640e22d 100644
--- a/src/components/tasks/partials/editLabels.vue
+++ b/src/components/tasks/partials/editLabels.vue
@@ -1,159 +1,164 @@
 <template>
 	<multiselect
-			:multiple="true"
-			:close-on-select="false"
-			:clear-on-select="true"
-			:options-limit="300"
-			:hide-selected="true"
-			v-model="labels"
-			:options="foundLabels"
-			:searchable="true"
-			:loading="labelService.loading || labelTaskService.loading"
-			:internal-search="true"
-			@search-change="findLabel"
-			@select="addLabel"
-			placeholder="Type to add a new label..."
-			label="title"
-			track-by="id"
-			:taggable="true"
-			:showNoOptions="false"
-			@tag="createAndAddLabel"
-			tag-placeholder="Add this as new label"
-			:disabled="disabled"
+		:clear-on-select="true"
+		:close-on-select="false"
+		:disabled="disabled"
+		:hide-selected="true"
+		:internal-search="true"
+		:loading="labelService.loading || labelTaskService.loading"
+		:multiple="true"
+		:options="foundLabels"
+		:options-limit="300"
+		:searchable="true"
+		:showNoOptions="false"
+		:taggable="true"
+		@search-change="findLabel"
+		@select="addLabel"
+		@tag="createAndAddLabel"
+		label="title"
+		placeholder="Type to add a new label..."
+		tag-placeholder="Add this as new label"
+		track-by="id"
+		v-model="labels"
 	>
-		<template slot="tag" slot-scope="{ option }">
-						<span class="tag"
-							:style="{'background': option.hexColor, 'color': option.textColor}">
-							<span>{{ option.title }}</span>
-							<a class="delete is-small" @click="removeLabel(option)"></a>
-						</span>
+		<template
+			slot="tag"
+			slot-scope="{ option }">
+			<span
+				:style="{'background': option.hexColor, 'color': option.textColor}"
+				class="tag">
+				<span>{{ option.title }}</span>
+				<a @click="removeLabel(option)" class="delete is-small"></a>
+			</span>
 		</template>
 		<template slot="clear" slot-scope="props">
-			<div class="multiselect__clear" v-if="labels.length"
-				@mousedown.prevent.stop="clearAllLabels(props.search)"></div>
+			<div
+				@mousedown.prevent.stop="clearAllLabels(props.search)"
+				class="multiselect__clear"
+				v-if="labels.length"></div>
 		</template>
 	</multiselect>
 </template>
 
 <script>
-	import { differenceWith } from 'lodash'
+import {differenceWith} from 'lodash'
 
-	import LabelService from '../../../services/label'
-	import LabelModel from '../../../models/label'
-	import LabelTaskService from '../../../services/labelTask'
-	import LoadingComponent from '../../misc/loading'
-	import ErrorComponent from '../../misc/error'
+import LabelService from '../../../services/label'
+import LabelModel from '../../../models/label'
+import LabelTaskService from '../../../services/labelTask'
+import LoadingComponent from '../../misc/loading'
+import ErrorComponent from '../../misc/error'
 
-	export default {
-		name: 'edit-labels',
-		props: {
-			value: {
-				default: () => [],
-				type: Array,
-			},
-			taskId: {
-				type: Number,
-				required: true,
-			},
-			disabled: {
-				default: false,
-			},
+export default {
+	name: 'edit-labels',
+	props: {
+		value: {
+			default: () => [],
+			type: Array,
 		},
-		data() {
-			return {
-				labelService: LabelService,
-				labelTaskService: LabelTaskService,
-				foundLabels: [],
-				labelTimeout: null,
-				labels: [],
-				searchQuery: '',
+		taskId: {
+			type: Number,
+			required: true,
+		},
+		disabled: {
+			default: false,
+		},
+	},
+	data() {
+		return {
+			labelService: LabelService,
+			labelTaskService: LabelTaskService,
+			foundLabels: [],
+			labelTimeout: null,
+			labels: [],
+			searchQuery: '',
+		}
+	},
+	components: {
+		multiselect: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	watch: {
+		value(newLabels) {
+			this.labels = newLabels
+		},
+	},
+	created() {
+		this.labelService = new LabelService()
+		this.labelTaskService = new LabelTaskService()
+		this.labels = this.value
+	},
+	methods: {
+		findLabel(query) {
+			this.searchQuery = query
+			if (query === '') {
+				this.clearAllLabels()
+				return
 			}
-		},
-		components: {
-			multiselect: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
-		},
-		watch: {
-			value(newLabels) {
-				this.labels = newLabels
+
+			if (this.labelTimeout !== null) {
+				clearTimeout(this.labelTimeout)
 			}
-		},
-		created() {
-			this.labelService = new LabelService()
-			this.labelTaskService = new LabelTaskService()
-			this.labels = this.value
-		},
-		methods: {
-			findLabel(query) {
-				this.searchQuery = query
-				if (query === '') {
-					this.clearAllLabels()
-					return
-				}
 
-				if (this.labelTimeout !== null) {
-					clearTimeout(this.labelTimeout)
-				}
-
-				// Delay the search 300ms to not send a request on every keystroke
-				this.labelTimeout = setTimeout(() => {
-					this.labelService.getAll({}, {s: query})
-						.then(response => {
-							this.$set(this, 'foundLabels', differenceWith(response, this.labels, (first, second) => {
-								return first.id === second.id
-							}))
-							this.labelTimeout = null
-						})
-						.catch(e => {
-							this.error(e, this)
-						})
-				}, 300)
-			},
-			clearAllLabels() {
-				this.$set(this, 'foundLabels', [])
-			},
-			addLabel(label) {
-				this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
-					.then(() => {
-						this.$emit('input', this.labels)
+			// Delay the search 300ms to not send a request on every keystroke
+			this.labelTimeout = setTimeout(() => {
+				this.labelService.getAll({}, {s: query})
+					.then(response => {
+						this.$set(this, 'foundLabels', differenceWith(response, this.labels, (first, second) => {
+							return first.id === second.id
+						}))
+						this.labelTimeout = null
 					})
 					.catch(e => {
 						this.error(e, this)
 					})
-			},
-			removeLabel(label) {
-				this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
-					.then(() => {
-						// Remove the label from the list
-						for (const l in this.labels) {
-							if (this.labels[l].id === label.id) {
-								this.labels.splice(l, 1)
-							}
+			}, 300)
+		},
+		clearAllLabels() {
+			this.$set(this, 'foundLabels', [])
+		},
+		addLabel(label) {
+			this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
+				.then(() => {
+					this.$emit('input', this.labels)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		removeLabel(label) {
+			this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
+				.then(() => {
+					// Remove the label from the list
+					for (const l in this.labels) {
+						if (this.labels[l].id === label.id) {
+							this.labels.splice(l, 1)
 						}
-						this.$emit('input', this.labels)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			createAndAddLabel(title) {
-				let newLabel = new LabelModel({title: title})
-				this.labelService.create(newLabel)
-					.then(r => {
-						this.addLabel(r)
-						this.labels.push(r)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-
+					}
+					this.$emit('input', this.labels)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		createAndAddLabel(title) {
+			let newLabel = new LabelModel({title: title})
+			this.labelService.create(newLabel)
+				.then(r => {
+					this.addLabel(r)
+					this.labels.push(r)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+
+	},
+}
 </script>
 
 <style scoped>
diff --git a/src/components/tasks/partials/labels.vue b/src/components/tasks/partials/labels.vue
index 0a25a21f8..ba28e4630 100644
--- a/src/components/tasks/partials/labels.vue
+++ b/src/components/tasks/partials/labels.vue
@@ -1,24 +1,28 @@
 <template>
 	<div class="label-wrapper">
-		<span class="tag" v-for="label in labels" :style="{'background': label.hexColor, 'color': label.textColor}" :key="label.id">
+		<span
+			:key="label.id"
+			:style="{'background': label.hexColor, 'color': label.textColor}"
+			class="tag"
+			v-for="label in labels">
 			<span>{{ label.title }}</span>
 		</span>
 	</div>
 </template>
 
 <script>
-	export default {
-		name: 'labels',
-		props: {
-			labels: {
-				required: true,
-			}
-		}
-	}
+export default {
+	name: 'labels',
+	props: {
+		labels: {
+			required: true,
+		},
+	},
+}
 </script>
 
 <style scoped>
-	.label-wrapper {
-		display: inline;
-	}
+.label-wrapper {
+	display: inline;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue
index 7e7c49f89..aca5be282 100644
--- a/src/components/tasks/partials/listSearch.vue
+++ b/src/components/tasks/partials/listSearch.vue
@@ -1,22 +1,25 @@
 <template>
 	<multiselect
-			v-model="list"
-			:options="foundLists"
-			:multiple="false"
-			:searchable="true"
-			:loading="listSerivce.loading"
-			:internal-search="true"
-			@search-change="findLists"
-			@select="select"
-			placeholder="Type to search for a list..."
-			label="title"
-			track-by="id"
-			:showNoOptions="false"
-			class="control is-expanded"
-			v-focus
+		:internal-search="true"
+		:loading="listSerivce.loading"
+		:multiple="false"
+		:options="foundLists"
+		:searchable="true"
+		:showNoOptions="false"
+		@search-change="findLists"
+		@select="select"
+		class="control is-expanded"
+		label="title"
+		placeholder="Type to search for a list..."
+		track-by="id"
+		v-focus
+		v-model="list"
 	>
 		<template slot="clear" slot-scope="props">
-			<div class="multiselect__clear" v-if="list !== null && list.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
+			<div
+				@mousedown.prevent.stop="clearAll(props.search)"
+				class="multiselect__clear"
+				v-if="list !== null && list.id !== 0"></div>
 		</template>
 		<template slot="option" slot-scope="props">
 			<span class="list-namespace-title">{{ namespace(props.option.namespaceId) }} ></span>
@@ -27,60 +30,60 @@
 </template>
 
 <script>
-	import ListService from '../../../services/list'
-	import ListModel from '../../../models/list'
-	import LoadingComponent from '../../misc/loading'
-	import ErrorComponent from '../../misc/error'
+import ListService from '../../../services/list'
+import ListModel from '../../../models/list'
+import LoadingComponent from '../../misc/loading'
+import ErrorComponent from '../../misc/error'
 
-	export default {
-		name: 'listSearch',
-		data() {
-			return {
-				listSerivce: ListService,
-				list: ListModel,
-				foundLists: [],
+export default {
+	name: 'listSearch',
+	data() {
+		return {
+			listSerivce: ListService,
+			list: ListModel,
+			foundLists: [],
+		}
+	},
+	components: {
+		multiselect: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	beforeMount() {
+		this.listSerivce = new ListService()
+		this.list = new ListModel()
+	},
+	methods: {
+		findLists(query) {
+			if (query === '') {
+				this.clearAll()
+				return
 			}
-		},
-		components: {
-			multiselect: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
-		},
-		beforeMount() {
-			this.listSerivce = new ListService()
-			this.list = new ListModel()
-		},
-		methods: {
-			findLists(query) {
-				if (query === '') {
-					this.clearAll()
-					return
-				}
 
-				this.listSerivce.getAll({}, {s: query})
-					.then(response => {
-						this.$set(this, 'foundLists', response)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			clearAll() {
-				this.$set(this, 'foundLists', [])
-			},
-			select(list) {
-				this.$emit('selected', list)
-			},
-			namespace(namespaceId) {
-				const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId)
-				if (namespace !== null) {
-					return namespace.title
-				}
-				return 'Shared Lists'
-			},
+			this.listSerivce.getAll({}, {s: query})
+				.then(response => {
+					this.$set(this, 'foundLists', response)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		clearAll() {
+			this.$set(this, 'foundLists', [])
+		},
+		select(list) {
+			this.$emit('selected', list)
+		},
+		namespace(namespaceId) {
+			const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId)
+			if (namespace !== null) {
+				return namespace.title
+			}
+			return 'Shared Lists'
+		},
+	},
+}
 </script>
diff --git a/src/components/tasks/partials/percentDoneSelect.vue b/src/components/tasks/partials/percentDoneSelect.vue
index dfb591d2d..aade2bc25 100644
--- a/src/components/tasks/partials/percentDoneSelect.vue
+++ b/src/components/tasks/partials/percentDoneSelect.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="select">
-		<select v-model.number="percentDone" @change="updateData" :disabled="disabled">
+		<select :disabled="disabled" @change="updateData" v-model.number="percentDone">
 			<option value="0">0%</option>
 			<option value="0.1">10%</option>
 			<option value="0.2">20%</option>
@@ -17,36 +17,36 @@
 </template>
 
 <script>
-	export default {
-		name: 'percentDoneSelect',
-		data() {
-			return {
-				percentDone: 0,
-			}
+export default {
+	name: 'percentDoneSelect',
+	data() {
+		return {
+			percentDone: 0,
+		}
+	},
+	props: {
+		value: {
+			default: 0,
+			type: Number,
 		},
-		props: {
-			value: {
-				default: 0,
-				type: Number,
-			},
-			disabled: {
-				default: false,
-			},
+		disabled: {
+			default: false,
 		},
-		watch: {
-			// Set the priority to the :value every time it changes from the outside
-			value(newVal) {
-				this.percentDone = newVal
-			},
+	},
+	watch: {
+		// Set the priority to the :value every time it changes from the outside
+		value(newVal) {
+			this.percentDone = newVal
 		},
-		mounted() {
-			this.percentDone = this.value
+	},
+	mounted() {
+		this.percentDone = this.value
+	},
+	methods: {
+		updateData() {
+			this.$emit('input', this.percentDone)
+			this.$emit('change')
 		},
-		methods: {
-			updateData() {
-				this.$emit('input', this.percentDone)
-				this.$emit('change')
-			}
-		},
-	}
+	},
+}
 </script>
diff --git a/src/components/tasks/partials/priorityLabel.vue b/src/components/tasks/partials/priorityLabel.vue
index b0639b27b..e44363be3 100644
--- a/src/components/tasks/partials/priorityLabel.vue
+++ b/src/components/tasks/partials/priorityLabel.vue
@@ -1,5 +1,7 @@
 <template>
-	<span v-if="showAll || priority >= priorities.HIGH" :class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}">
+	<span
+		:class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}"
+		v-if="showAll || priority >= priorities.HIGH">
 		<span class="icon" v-if="priority >= priorities.HIGH">
 			<icon icon="exclamation"/>
 		</span>
@@ -16,43 +18,43 @@
 </template>
 
 <script>
-	import priorites from '../../../models/priorities'
+import priorites from '../../../models/priorities'
 
-	export default {
-		name: 'priorityLabel',
-		data() {
-			return {
-				priorities: priorites,
-			}
-		},
-		props: {
-			priority: {
-				default: 0,
-				type: Number,
-			},
-			showAll: {
-				type: Boolean,
-				default: false,
-			},
+export default {
+	name: 'priorityLabel',
+	data() {
+		return {
+			priorities: priorites,
 		}
-	}
+	},
+	props: {
+		priority: {
+			default: 0,
+			type: Number,
+		},
+		showAll: {
+			type: Boolean,
+			default: false,
+		},
+	},
+}
 </script>
 
 <style lang="scss">
-	@import '../../../styles/theme/variables';
+@import '../../../styles/theme/variables';
 
-	span.high-priority{
-		color: $red;
-		width: auto !important; // To override the width set in tasks
+span.high-priority {
+	color: $red;
+	width: auto !important; // To override the width set in tasks
 
-		.icon {
-			vertical-align: middle;
-			width: auto !important;
-			padding: 0 .5em;
-		}
-
-		&.not-so-high {
-			color: $orange;
-		}
+	.icon {
+		vertical-align: middle;
+		width: auto !important;
+		padding: 0 .5em;
 	}
+
+	&.not-so-high {
+		color: $orange;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/prioritySelect.vue b/src/components/tasks/partials/prioritySelect.vue
index 1cba1705e..a0e0f9877 100644
--- a/src/components/tasks/partials/prioritySelect.vue
+++ b/src/components/tasks/partials/prioritySelect.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="select">
-		<select v-model="priority" @change="updateData" :disabled="disabled">
+		<select :disabled="disabled" @change="updateData" v-model="priority">
 			<option :value="priorities.UNSET">Unset</option>
 			<option :value="priorities.LOW">Low</option>
 			<option :value="priorities.MEDIUM">Medium</option>
@@ -12,39 +12,39 @@
 </template>
 
 <script>
-	import priorites from '../../../models/priorities'
+import priorites from '../../../models/priorities'
 
-	export default {
-		name: 'prioritySelect',
-		data() {
-			return {
-				priorities: priorites,
-				priority: 0,
-			}
+export default {
+	name: 'prioritySelect',
+	data() {
+		return {
+			priorities: priorites,
+			priority: 0,
+		}
+	},
+	props: {
+		value: {
+			default: 0,
+			type: Number,
 		},
-		props: {
-			value: {
-				default: 0,
-				type: Number,
-			},
-			disabled: {
-				default: false,
-			},
+		disabled: {
+			default: false,
 		},
-		watch: {
-			// Set the priority to the :value every time it changes from the outside
-			value(newVal) {
-				this.priority = newVal
-			},
+	},
+	watch: {
+		// Set the priority to the :value every time it changes from the outside
+		value(newVal) {
+			this.priority = newVal
 		},
-		mounted() {
-			this.priority = this.value
+	},
+	mounted() {
+		this.priority = this.value
+	},
+	methods: {
+		updateData() {
+			this.$emit('input', this.priority)
+			this.$emit('change')
 		},
-		methods: {
-			updateData() {
-				this.$emit('input', this.priority)
-				this.$emit('change')
-			}
-		},
-	}
+	},
+}
 </script>
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 45fbb3568..80c9bb955 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -4,26 +4,26 @@
 			<label class="label">New Task Relation</label>
 			<div class="field">
 				<multiselect
-						v-model="newTaskRelationTask"
-						:options="foundTasks"
-						:multiple="false"
-						:searchable="true"
-						:loading="taskService.loading"
-						:internal-search="true"
-						@search-change="findTasks"
-						placeholder="Type search for a new task to add as related..."
-						label="title"
-						track-by="id"
-						:taggable="true"
-						:showNoOptions="false"
-						@tag="createAndRelateTask"
-						tag-placeholder="Add this as new related task"
+					:internal-search="true"
+					:loading="taskService.loading"
+					:multiple="false"
+					:options="foundTasks"
+					:searchable="true"
+					:showNoOptions="false"
+					:taggable="true"
+					@search-change="findTasks"
+					@tag="createAndRelateTask"
+					label="title"
+					placeholder="Type search for a new task to add as related..."
+					tag-placeholder="Add this as new related task"
+					track-by="id"
+					v-model="newTaskRelationTask"
 				>
 					<template slot="clear" slot-scope="props">
 						<div
-								class="multiselect__clear"
-								v-if="newTaskRelationTask !== null && newTaskRelationTask.id !== 0"
-								@mousedown.prevent.stop="clearAllFoundTasks(props.search)"></div>
+							@mousedown.prevent.stop="clearAllFoundTasks(props.search)"
+							class="multiselect__clear"
+							v-if="newTaskRelationTask !== null && newTaskRelationTask.id !== 0"></div>
 					</template>
 					<span slot="noResult">No task found. Consider changing the search query.</span>
 				</multiselect>
@@ -33,53 +33,55 @@
 					<div class="select is-fullwidth has-defaults">
 						<select v-model="newTaskRelationKind">
 							<option value="unset">Select a relation kind</option>
-							<option v-for="(label, rk) in relationKinds" :key="rk" :value="rk">
+							<option :key="rk" :value="rk" v-for="(label, rk) in relationKinds">
 								{{ label[0] }}
 							</option>
 						</select>
 					</div>
 				</div>
 				<div class="control">
-					<a class="button is-primary" @click="addTaskRelation()">Add task Relation</a>
+					<a @click="addTaskRelation()" class="button is-primary">Add task Relation</a>
 				</div>
 			</div>
 		</template>
 
-		<div class="related-tasks" v-for="(rts, kind ) in relatedTasks" :key="kind">
+		<div :key="kind" class="related-tasks" v-for="(rts, kind ) in relatedTasks">
 			<template v-if="rts.length > 0">
 				<span class="title">{{ relationKindTitle(kind, rts.length) }}</span>
 				<div class="tasks noborder">
-					<div class="task" v-for="t in rts" :key="t.id">
+					<div :key="t.id" class="task" v-for="t in rts">
 						<router-link :to="{ name: $route.name, params: { id: t.id } }">
-							<span class="tasktext" :class="{ 'done': t.done}">
+							<span :class="{ 'done': t.done}" class="tasktext">
 								<span
-										v-if="t.listId !== listId"
-										class="different-list"
-										v-tooltip="'This task belongs to a different list.'">
-									{{ $store.getters['lists/getListById'](t.listId) === null ? '' : $store.getters['lists/getListById'](t.listId).title }} >
+									class="different-list"
+									v-if="t.listId !== listId"
+									v-tooltip="'This task belongs to a different list.'">
+									{{
+										$store.getters['lists/getListById'](t.listId) === null ? '' : $store.getters['lists/getListById'](t.listId).title
+									}} >
 								</span>
-								{{t.title}}
+								{{ t.title }}
 							</span>
 						</router-link>
 						<a
-								v-if="editEnabled"
-								class="remove"
-								@click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}">
+							@click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}"
+							class="remove"
+							v-if="editEnabled">
 							<icon icon="trash-alt"/>
 						</a>
 					</div>
 				</div>
 			</template>
 		</div>
-		<p v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0" class="none">
+		<p class="none" v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0">
 			No task relations yet.
 		</p>
 
 		<!-- Delete modal -->
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="removeTaskRelation()">
+			@close="showDeleteModal = false"
+			@submit="removeTaskRelation()"
+			v-if="showDeleteModal">
 			<span slot="header">Delete Task Relation</span>
 			<p slot="text">Are you sure you want to delete this task relation?<br/>
 				<b>This CANNOT BE UNDONE!</b></p>
@@ -88,150 +90,150 @@
 </template>
 
 <script>
-	import TaskService from '../../../services/task'
-	import TaskModel from '../../../models/task'
-	import TaskRelationService from '../../../services/taskRelation'
-	import relationKinds from '../../../models/relationKinds'
-	import TaskRelationModel from '../../../models/taskRelation'
+import TaskService from '../../../services/task'
+import TaskModel from '../../../models/task'
+import TaskRelationService from '../../../services/taskRelation'
+import relationKinds from '../../../models/relationKinds'
+import TaskRelationModel from '../../../models/taskRelation'
 
-	import LoadingComponent from '../../misc/loading'
-	import ErrorComponent from '../../misc/error'
+import LoadingComponent from '../../misc/loading'
+import ErrorComponent from '../../misc/error'
 
-	export default {
-		name: 'relatedTasks',
-		data() {
-			return {
-				relatedTasks: {},
-				taskService: TaskService,
-				foundTasks: [],
-				relationKinds: relationKinds,
-				newTaskRelationTask: TaskModel,
-				newTaskRelationKind: 'related',
-				taskRelationService: TaskRelationService,
-				showDeleteModal: false,
-				relationToDelete: {},
+export default {
+	name: 'relatedTasks',
+	data() {
+		return {
+			relatedTasks: {},
+			taskService: TaskService,
+			foundTasks: [],
+			relationKinds: relationKinds,
+			newTaskRelationTask: TaskModel,
+			newTaskRelationKind: 'related',
+			taskRelationService: TaskRelationService,
+			showDeleteModal: false,
+			relationToDelete: {},
+		}
+	},
+	components: {
+		multiselect: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	props: {
+		taskId: {
+			type: Number,
+			required: true,
+		},
+		initialRelatedTasks: {
+			type: Object,
+			default: () => {
+			},
+		},
+		showNoRelationsNotice: {
+			type: Boolean,
+			default: false,
+		},
+		listId: {
+			type: Number,
+			default: 0,
+		},
+		editEnabled: {
+			default: true,
+		},
+	},
+	created() {
+		this.taskService = new TaskService()
+		this.taskRelationService = new TaskRelationService()
+		this.newTaskRelationTask = new TaskModel()
+	},
+	watch: {
+		initialRelatedTasks(newVal) {
+			this.relatedTasks = newVal
+		},
+	},
+	mounted() {
+		this.relatedTasks = this.initialRelatedTasks
+	},
+	methods: {
+		findTasks(query) {
+			if (query === '') {
+				this.clearAllFoundTasks()
+				return
 			}
-		},
-		components: {
-			multiselect: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
-		},
-		props: {
-			taskId: {
-				type: Number,
-				required: true,
-			},
-			initialRelatedTasks: {
-				type: Object,
-				default: () => {
-				},
-			},
-			showNoRelationsNotice: {
-				type: Boolean,
-				default: false,
-			},
-			listId: {
-				type: Number,
-				default: 0,
-			},
-			editEnabled: {
-				default: true,
-			},
-		},
-		created() {
-			this.taskService = new TaskService()
-			this.taskRelationService = new TaskRelationService()
-			this.newTaskRelationTask = new TaskModel()
-		},
-		watch: {
-			initialRelatedTasks(newVal) {
-				this.relatedTasks = newVal
-			},
-		},
-		mounted() {
-			this.relatedTasks = this.initialRelatedTasks
-		},
-		methods: {
-			findTasks(query) {
-				if (query === '') {
-					this.clearAllFoundTasks()
-					return
-				}
 
-				this.taskService.getAll({}, {s: query})
-					.then(response => {
-						this.$set(this, 'foundTasks', response)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			clearAllFoundTasks() {
-				this.$set(this, 'foundTasks', [])
-			},
-			addTaskRelation() {
-				let rel = new TaskRelationModel({
-					taskId: this.taskId,
-					otherTaskId: this.newTaskRelationTask.id,
-					relationKind: this.newTaskRelationKind,
+			this.taskService.getAll({}, {s: query})
+				.then(response => {
+					this.$set(this, 'foundTasks', response)
 				})
-				this.taskRelationService.create(rel)
-					.then(() => {
-						if (!this.relatedTasks[this.newTaskRelationKind]) {
-							this.$set(this.relatedTasks, this.newTaskRelationKind, [])
-						}
-						this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
-						this.newTaskRelationKind = 'unset'
-						this.newTaskRelationTask = new TaskModel()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			removeTaskRelation() {
-				let rel = new TaskRelationModel({
-					relationKind: this.relationToDelete.relationKind,
-					taskId: this.taskId,
-					otherTaskId: this.relationToDelete.otherTaskId,
+				.catch(e => {
+					this.error(e, this)
 				})
-				this.taskRelationService.delete(rel)
-					.then(() => {
-						Object.keys(this.relatedTasks).forEach(relationKind => {
-							for (const t in this.relatedTasks[relationKind]) {
-								if (this.relatedTasks[relationKind][t].id === this.relationToDelete.otherTaskId && relationKind === this.relationToDelete.relationKind) {
-									this.relatedTasks[relationKind].splice(t, 1)
-								}
-							}
-						})
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.showDeleteModal = false
-					})
-			},
-			createAndRelateTask(title) {
-				const newTask = new TaskModel({title: title, listId: this.listId})
-				this.taskService.create(newTask)
-					.then(r => {
-						this.newTaskRelationTask = r
-						this.addTaskRelation()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			relationKindTitle(kind, length) {
-				if (length > 1) {
-					return relationKinds[kind][1]
-				}
-				return relationKinds[kind][0]
-			},
 		},
-	}
+		clearAllFoundTasks() {
+			this.$set(this, 'foundTasks', [])
+		},
+		addTaskRelation() {
+			let rel = new TaskRelationModel({
+				taskId: this.taskId,
+				otherTaskId: this.newTaskRelationTask.id,
+				relationKind: this.newTaskRelationKind,
+			})
+			this.taskRelationService.create(rel)
+				.then(() => {
+					if (!this.relatedTasks[this.newTaskRelationKind]) {
+						this.$set(this.relatedTasks, this.newTaskRelationKind, [])
+					}
+					this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
+					this.newTaskRelationKind = 'unset'
+					this.newTaskRelationTask = new TaskModel()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		removeTaskRelation() {
+			let rel = new TaskRelationModel({
+				relationKind: this.relationToDelete.relationKind,
+				taskId: this.taskId,
+				otherTaskId: this.relationToDelete.otherTaskId,
+			})
+			this.taskRelationService.delete(rel)
+				.then(() => {
+					Object.keys(this.relatedTasks).forEach(relationKind => {
+						for (const t in this.relatedTasks[relationKind]) {
+							if (this.relatedTasks[relationKind][t].id === this.relationToDelete.otherTaskId && relationKind === this.relationToDelete.relationKind) {
+								this.relatedTasks[relationKind].splice(t, 1)
+							}
+						}
+					})
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.showDeleteModal = false
+				})
+		},
+		createAndRelateTask(title) {
+			const newTask = new TaskModel({title: title, listId: this.listId})
+			this.taskService.create(newTask)
+				.then(r => {
+					this.newTaskRelationTask = r
+					this.addTaskRelation()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		relationKindTitle(kind, length) {
+			if (length > 1) {
+				return relationKinds[kind][1]
+			}
+			return relationKinds[kind][0]
+		},
+	},
+}
 </script>
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index f70c1f24d..3c98b2f9f 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -1,19 +1,21 @@
 <template>
 	<div class="reminders">
-		<div class="reminder-input"
+		<div
 			:class="{ 'overdue': (r < nowUnix && index !== (reminders.length - 1))}"
-			v-for="(r, index) in reminders" :key="index">
+			:key="index"
+			class="reminder-input"
+			v-for="(r, index) in reminders">
 			<flat-pickr
-					:v-model="reminders"
-					:config="flatPickerConfig"
-					:id="'taskreminderdate' + index"
-					:value="r"
-					:data-index="index"
-					placeholder="Add a new reminder..."
-					:disabled="disabled"
+				:config="flatPickerConfig"
+				:data-index="index"
+				:disabled="disabled"
+				:id="'taskreminderdate' + index"
+				:v-model="reminders"
+				:value="r"
+				placeholder="Add a new reminder..."
 			>
 			</flat-pickr>
-			<a v-if="index !== (reminders.length - 1) && !disabled" @click="removeReminderByIndex(index)">
+			<a @click="removeReminderByIndex(index)" v-if="index !== (reminders.length - 1) && !disabled">
 				<icon icon="times"></icon>
 			</a>
 		</div>
@@ -21,80 +23,80 @@
 </template>
 
 <script>
-	import flatPickr from 'vue-flatpickr-component'
-	import 'flatpickr/dist/flatpickr.css'
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
 
-	export default {
-		name: 'reminders',
-		data() {
-			return {
-				reminders: [],
-				lastReminder: 0,
-				nowUnix: new Date(),
-				flatPickerConfig: {
-					altFormat: 'j M Y H:i',
-					altInput: true,
-					dateFormat: 'Y-m-d H:i',
-					enableTime: true,
-					onOpen: this.updateLastReminderDate,
-					onClose: this.addReminderDate,
-				},
+export default {
+	name: 'reminders',
+	data() {
+		return {
+			reminders: [],
+			lastReminder: 0,
+			nowUnix: new Date(),
+			flatPickerConfig: {
+				altFormat: 'j M Y H:i',
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				onOpen: this.updateLastReminderDate,
+				onClose: this.addReminderDate,
+			},
+		}
+	},
+	props: {
+		value: {
+			default: () => [],
+			type: Array,
+		},
+		disabled: {
+			default: false,
+		},
+	},
+	components: {
+		flatPickr,
+	},
+	mounted() {
+		this.reminders = this.value
+	},
+	watch: {
+		value(newVal) {
+			this.reminders = newVal
+		},
+	},
+	methods: {
+		updateData() {
+			this.$emit('input', this.reminders)
+			this.$emit('change')
+		},
+		updateLastReminderDate(selectedDates) {
+			this.lastReminder = +new Date(selectedDates[0])
+		},
+		addReminderDate(selectedDates, dateStr, instance) {
+			let newDate = +new Date(selectedDates[0])
+
+			// Don't update if nothing changed
+			if (newDate === this.lastReminder) {
+				return
 			}
-		},
-		props: {
-			value: {
-				default: () => [],
-				type: Array,
-			},
-			disabled: {
-				default: false,
-			},
-		},
-		components: {
-			flatPickr,
-		},
-		mounted() {
-			this.reminders = this.value
-		},
-		watch: {
-			value(newVal) {
-				this.reminders = newVal
-			},
-		},
-		methods: {
-			updateData() {
-				this.$emit('input', this.reminders)
-				this.$emit('change')
-			},
-			updateLastReminderDate(selectedDates) {
-				this.lastReminder = +new Date(selectedDates[0])
-			},
-			addReminderDate(selectedDates, dateStr, instance) {
-				let newDate = +new Date(selectedDates[0])
 
-				// Don't update if nothing changed
-				if (newDate === this.lastReminder) {
-					return
-				}
+			let index = parseInt(instance.input.dataset.index)
+			this.reminders[index] = newDate
 
-				let index = parseInt(instance.input.dataset.index)
-				this.reminders[index] = newDate
+			let lastIndex = this.reminders.length - 1
+			// put a new null at the end if we changed something
+			if (lastIndex === index && !isNaN(newDate)) {
+				this.reminders.push(null)
+			}
 
-				let lastIndex = this.reminders.length - 1
-				// put a new null at the end if we changed something
-				if (lastIndex === index && !isNaN(newDate)) {
-					this.reminders.push(null)
-				}
-
-				this.updateData()
-			},
-			removeReminderByIndex(index) {
-				this.reminders.splice(index, 1)
-				// Reset the last to 0 to have the "add reminder" button
-				this.reminders[this.reminders.length - 1] = null
-
-				this.updateData()
-			},
+			this.updateData()
 		},
-	}
+		removeReminderByIndex(index) {
+			this.reminders.splice(index, 1)
+			// Reset the last to 0 to have the "add reminder" button
+			this.reminders[this.reminders.length - 1] = null
+
+			this.updateData()
+		},
+	},
+}
 </script>
diff --git a/src/components/tasks/partials/repeatAfter.vue b/src/components/tasks/partials/repeatAfter.vue
index d1062cdc0..e77459ca3 100644
--- a/src/components/tasks/partials/repeatAfter.vue
+++ b/src/components/tasks/partials/repeatAfter.vue
@@ -6,15 +6,15 @@
 		<div class="column is-7 field has-addons">
 			<div class="control">
 				<input
-						:disabled="disabled"
-						class="input"
-						placeholder="Specify an amount..."
-						v-model="repeatAfter.amount"
-						@change="updateData"/>
+					:disabled="disabled"
+					@change="updateData"
+					class="input"
+					placeholder="Specify an amount..."
+					v-model="repeatAfter.amount"/>
 			</div>
 			<div class="control">
 				<div class="select">
-					<select v-model="repeatAfter.type" @change="updateData" :disabled="disabled">
+					<select :disabled="disabled" @change="updateData" v-model="repeatAfter.type">
 						<option value="hours">Hours</option>
 						<option value="days">Days</option>
 						<option value="weeks">Weeks</option>
@@ -25,11 +25,11 @@
 			</div>
 		</div>
 		<fancycheckbox
-				:disabled="disabled"
-				class="column"
-				@change="updateData"
-				v-model="task.repeatFromCurrentDate"
-				v-tooltip="'When marking the task as done, all dates will be set relative to the current date rather than the date they had before.'"
+			:disabled="disabled"
+			@change="updateData"
+			class="column"
+			v-model="task.repeatFromCurrentDate"
+			v-tooltip="'When marking the task as done, all dates will be set relative to the current date rather than the date they had before.'"
 		>
 			Repeat from current date
 		</fancycheckbox>
@@ -37,69 +37,69 @@
 </template>
 
 <script>
-	import Fancycheckbox from '../../input/fancycheckbox'
+import Fancycheckbox from '../../input/fancycheckbox'
 
-	export default {
-		name: 'repeatAfter',
-		components: {Fancycheckbox},
-		data() {
-			return {
-				task: {},
-				repeatAfter: {
-					amount: 0,
-					type: '',
-				},
+export default {
+	name: 'repeatAfter',
+	components: {Fancycheckbox},
+	data() {
+		return {
+			task: {},
+			repeatAfter: {
+				amount: 0,
+				type: '',
+			},
+		}
+	},
+	props: {
+		value: {
+			default: () => {
+			},
+			required: true,
+		},
+		disabled: {
+			default: false,
+		},
+	},
+	watch: {
+		value(newVal) {
+			this.task = newVal
+			if (typeof newVal.repeatAfter !== 'undefined') {
+				this.repeatAfter = newVal.repeatAfter
 			}
 		},
-		props: {
-			value: {
-				default: () => {
-				},
-				required: true,
-			},
-			disabled: {
-				default: false,
-			},
+	},
+	mounted() {
+		this.task = this.value
+		if (typeof this.value.repeatAfter !== 'undefined') {
+			this.repeatAfter = this.value.repeatAfter
+		}
+	},
+	methods: {
+		updateData() {
+			this.task.repeatAfter = this.repeatAfter
+			this.$emit('input', this.task)
+			this.$emit('change')
 		},
-		watch: {
-			value(newVal) {
-				this.task = newVal
-				if (typeof newVal.repeatAfter !== 'undefined') {
-					this.repeatAfter = newVal.repeatAfter
-				}
-			},
-		},
-		mounted() {
-			this.task = this.value
-			if (typeof this.value.repeatAfter !== 'undefined') {
-				this.repeatAfter = this.value.repeatAfter
-			}
-		},
-		methods: {
-			updateData() {
-				this.task.repeatAfter = this.repeatAfter
-				this.$emit('input', this.task)
-				this.$emit('change')
-			}
-		},
-	}
+	},
+}
 </script>
 
-<style scoped lang="scss">
-	p {
-		padding-top: 6px;
+<style lang="scss" scoped>
+p {
+	padding-top: 6px;
+}
+
+.field.has-addons {
+
+	margin-bottom: .5rem;
+
+	.control .select select {
+		height: 2.5em;
 	}
+}
 
-	.field.has-addons {
-
-		margin-bottom: .5rem;
-
-		.control .select select {
-			height: 2.5em;
-		}
-	}
-
-	.columns {
-		align-items: center;
-	}
+.columns {
+	align-items: center;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index df50dd200..625018794 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -1,13 +1,13 @@
 <template>
-	<div class="task loader-container" :class="{'is-loading': taskService.loading}">
-		<fancycheckbox v-model="task.done" @change="markAsDone" :disabled="isArchived || disabled"/>
-		<span class="tasktext" :class="{ 'done': task.done}">
+	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
+		<fancycheckbox :disabled="isArchived || disabled" @change="markAsDone" v-model="task.done"/>
+		<span :class="{ 'done': task.done}" class="tasktext">
 			<router-link :to="{ name: taskDetailRoute, params: { id: task.id } }">
 				<router-link
-						v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
-						v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`"
-						:to="{ name: 'list.list', params: { listId: task.listId } }"
-						class="task-list">
+					:to="{ name: 'list.list', params: { listId: task.listId } }"
+					class="task-list"
+					v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
+					v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`">
 					{{ $store.getters['lists/getListById'](task.listId).title }}
 				</router-link>
 
@@ -23,37 +23,37 @@
 
 			<labels :labels="task.labels"/>
 			<user
-					:user="a"
-					:avatar-size="27"
-					:show-username="false"
-					:is-inline="true"
-					v-for="(a, i) in task.assignees"
-					:key="task.id + 'assignee' + a.id + i"
+				:avatar-size="27"
+				:is-inline="true"
+				:key="task.id + 'assignee' + a.id + i"
+				:show-username="false"
+				:user="a"
+				v-for="(a, i) in task.assignees"
 			/>
 			<i
-					v-if="+new Date(task.dueDate) > 0"
-					:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-					v-tooltip="formatDate(task.dueDate)"
-					@click.stop="showDefer = !showDefer"
+				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+				@click.stop="showDefer = !showDefer"
+				v-if="+new Date(task.dueDate) > 0"
+				v-tooltip="formatDate(task.dueDate)"
 			>
-				- Due {{formatDateSince(task.dueDate)}}
+				- Due {{ formatDateSince(task.dueDate) }}
 			</i>
 			<transition name="fade">
-				<defer-task v-model="task" v-if="+new Date(task.dueDate) > 0 && showDefer"/>
+				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task"/>
 			</transition>
 			<priority-label :priority="task.priority"/>
 		</span>
 		<router-link
-			v-if="currentList.id !== task.listId && $store.getters['lists/getListById'](task.listId) !== null"
-			v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`"
 			:to="{ name: 'list.list', params: { listId: task.listId } }"
-			class="task-list">
+			class="task-list"
+			v-if="currentList.id !== task.listId && $store.getters['lists/getListById'](task.listId) !== null"
+			v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`">
 			{{ $store.getters['lists/getListById'](task.listId).title }}
 		</router-link>
 		<a
-			class="favorite"
 			:class="{'is-favorite': task.isFavorite}"
-			@click="toggleFavorite">
+			@click="toggleFavorite"
+			class="favorite">
 			<icon icon="star" v-if="task.isFavorite"/>
 			<icon :icon="['far', 'star']" v-else/>
 		</a>
@@ -62,112 +62,115 @@
 </template>
 
 <script>
-	import TaskModel from '../../../models/task'
-	import PriorityLabel from './priorityLabel'
-	import TaskService from '../../../services/task'
-	import Labels from './labels'
-	import User from '../../misc/user'
-	import Fancycheckbox from '../../input/fancycheckbox'
-	import DeferTask from './defer-task'
+import TaskModel from '../../../models/task'
+import PriorityLabel from './priorityLabel'
+import TaskService from '../../../services/task'
+import Labels from './labels'
+import User from '../../misc/user'
+import Fancycheckbox from '../../input/fancycheckbox'
+import DeferTask from './defer-task'
 
-	export default {
-		name: 'singleTaskInList',
-		data() {
-			return {
-				taskService: TaskService,
-				task: TaskModel,
-				showDefer: false,
-			}
+export default {
+	name: 'singleTaskInList',
+	data() {
+		return {
+			taskService: TaskService,
+			task: TaskModel,
+			showDefer: false,
+		}
+	},
+	components: {
+		DeferTask,
+		Fancycheckbox,
+		User,
+		Labels,
+		PriorityLabel,
+	},
+	props: {
+		theTask: {
+			type: TaskModel,
+			required: true,
 		},
-		components: {
-			DeferTask,
-			Fancycheckbox,
-			User,
-			Labels,
-			PriorityLabel,
+		isArchived: {
+			type: Boolean,
+			default: false,
 		},
-		props: {
-			theTask: {
-				type: TaskModel,
-				required: true,
-			},
-			isArchived: {
-				type: Boolean,
-				default: false,
-			},
-			taskDetailRoute: {
-				type: String,
-				default: 'task.list.detail'
-			},
-			showList: {
-				type: Boolean,
-				default: false,
-			},
-			disabled: {
-				type: Boolean,
-				default: false,
-			},
+		taskDetailRoute: {
+			type: String,
+			default: 'task.list.detail',
 		},
-		watch: {
-			theTask(newVal) {
-				this.task = newVal
-			},
+		showList: {
+			type: Boolean,
+			default: false,
 		},
-		mounted() {
-			this.task = this.theTask
+		disabled: {
+			type: Boolean,
+			default: false,
 		},
-		created() {
-			this.task = new TaskModel()
-			this.taskService = new TaskService()
+	},
+	watch: {
+		theTask(newVal) {
+			this.task = newVal
 		},
-		computed: {
-			currentList() {
-				return typeof this.$store.state.currentList === 'undefined' ? {id: 0, title: ''} : this.$store.state.currentList
-			},
+	},
+	mounted() {
+		this.task = this.theTask
+	},
+	created() {
+		this.task = new TaskModel()
+		this.taskService = new TaskService()
+	},
+	computed: {
+		currentList() {
+			return typeof this.$store.state.currentList === 'undefined' ? {
+				id: 0,
+				title: '',
+			} : this.$store.state.currentList
 		},
-		methods: {
-			markAsDone(checked) {
-				const updateFunc = () => {
-					this.taskService.update(this.task)
-						.then(t => {
-							this.task = t
-							this.$emit('taskUpdated', t)
-							this.success(
-								{message: 'The task was successfully ' + (this.task.done ? '' : 'un-') + 'marked as done.'},
-								this,
-								[{
-									title: 'Undo',
-									callback: () => this.markAsDone({
-										target: {
-											checked: !checked
-										}
-									}),
-								}]
-							)
-						})
-						.catch(e => {
-							this.error(e, this)
-						})
-				}
-
-				if (checked) {
-					setTimeout(updateFunc, 300); // Delay it to show the animation when marking a task as done
-				} else {
-					updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
-				}
-			},
-			toggleFavorite() {
-				this.task.isFavorite = !this.task.isFavorite
+	},
+	methods: {
+		markAsDone(checked) {
+			const updateFunc = () => {
 				this.taskService.update(this.task)
 					.then(t => {
 						this.task = t
 						this.$emit('taskUpdated', t)
-						this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
+						this.success(
+							{message: 'The task was successfully ' + (this.task.done ? '' : 'un-') + 'marked as done.'},
+							this,
+							[{
+								title: 'Undo',
+								callback: () => this.markAsDone({
+									target: {
+										checked: !checked,
+									},
+								}),
+							}],
+						)
 					})
 					.catch(e => {
 						this.error(e, this)
 					})
-			},
+			}
+
+			if (checked) {
+				setTimeout(updateFunc, 300) // Delay it to show the animation when marking a task as done
+			} else {
+				updateFunc() // Don't delay it when un-marking it as it doesn't have an animation the other way around
+			}
 		},
-	}
+		toggleFavorite() {
+			this.task.isFavorite = !this.task.isFavorite
+			this.taskService.update(this.task)
+				.then(t => {
+					this.task = t
+					this.$emit('taskUpdated', t)
+					this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
 </script>
diff --git a/src/components/tasks/partials/sort.vue b/src/components/tasks/partials/sort.vue
index 70b3c2438..8f65d7c97 100644
--- a/src/components/tasks/partials/sort.vue
+++ b/src/components/tasks/partials/sort.vue
@@ -1,24 +1,24 @@
 <template>
 	<a @click="click">
 		<icon icon="sort-up" v-if="order === 'asc'"/>
-		<icon icon="sort-up" v-else-if="order === 'desc'" rotation="180"/>
+		<icon icon="sort-up" rotation="180" v-else-if="order === 'desc'"/>
 		<icon icon="sort" v-else/>
 	</a>
 </template>
 
 <script>
-	export default {
-		name: 'sort',
-		props: {
-			order: {
-				type: String,
-				default: 'none',
-			},
+export default {
+	name: 'sort',
+	props: {
+		order: {
+			type: String,
+			default: 'none',
 		},
-		methods: {
-			click() {
-				this.$emit('click')
-			},
+	},
+	methods: {
+		click() {
+			this.$emit('click')
 		},
-	}
+	},
+}
 </script>
diff --git a/src/components/user/avatar-settings.vue b/src/components/user/avatar-settings.vue
index 45fca23f2..36dc1d635 100644
--- a/src/components/user/avatar-settings.vue
+++ b/src/components/user/avatar-settings.vue
@@ -8,57 +8,57 @@
 		<div class="card-content">
 			<div class="control mb-4">
 				<label class="radio">
-					<input type="radio" name="avatarProvider" v-model="avatarProvider" value="default"/>
+					<input name="avatarProvider" type="radio" v-model="avatarProvider" value="default"/>
 					Default
 				</label>
 				<label class="radio">
-					<input type="radio" name="avatarProvider" v-model="avatarProvider" value="initials"/>
+					<input name="avatarProvider" type="radio" v-model="avatarProvider" value="initials"/>
 					Initials
 				</label>
 				<label class="radio">
-					<input type="radio" name="avatarProvider" v-model="avatarProvider" value="gravatar"/>
+					<input name="avatarProvider" type="radio" v-model="avatarProvider" value="gravatar"/>
 					Gravatar
 				</label>
 				<label class="radio">
-					<input type="radio" name="avatarProvider" v-model="avatarProvider" value="upload"/>
+					<input name="avatarProvider" type="radio" v-model="avatarProvider" value="upload"/>
 					Upload
 				</label>
 			</div>
 
 			<template v-if="avatarProvider === 'upload'">
 				<input
-						type="file"
-						ref="avatarUploadInput"
-						@change="cropAvatar"
-						class="is-hidden"
-						accept="image/*"
+					@change="cropAvatar"
+					accept="image/*"
+					class="is-hidden"
+					ref="avatarUploadInput"
+					type="file"
 				/>
 				<a
-						v-if="!isCropAvatar"
-						class="button is-primary"
-						@click="$refs.avatarUploadInput.click()"
-						:class="{ 'is-loading': avatarService.loading || loading}">
+					:class="{ 'is-loading': avatarService.loading || loading}"
+					@click="$refs.avatarUploadInput.click()"
+					class="button is-primary"
+					v-if="!isCropAvatar">
 					Upload Avatar
 				</a>
 				<template v-else>
 					<cropper
-							:src="avatarToCrop"
-							class="mb-4"
-							@ready="() => loading = false"
-							:stencil-props="{aspectRatio: 1}"
-							ref="cropper"/>
+						:src="avatarToCrop"
+						:stencil-props="{aspectRatio: 1}"
+						@ready="() => loading = false"
+						class="mb-4"
+						ref="cropper"/>
 					<a
-							class="button is-primary"
-							@click="uploadAvatar"
-							:class="{ 'is-loading': avatarService.loading || loading}">
+						:class="{ 'is-loading': avatarService.loading || loading}"
+						@click="uploadAvatar"
+						class="button is-primary">
 						Upload Avatar
 					</a>
 				</template>
 			</template>
 
 			<div class="bigbuttons" v-if="avatarProvider !== 'upload'">
-				<button @click="updateAvatarStatus()" class="button is-primary is-fullwidth"
-						:class="{ 'is-loading': avatarService.loading || loading}">
+				<button :class="{ 'is-loading': avatarService.loading || loading}" @click="updateAvatarStatus()"
+						class="button is-primary is-fullwidth">
 					Save
 				</button>
 			</div>
@@ -67,83 +67,83 @@
 </template>
 
 <script>
-	import {Cropper} from 'vue-advanced-cropper'
+import {Cropper} from 'vue-advanced-cropper'
 
-	import AvatarService from '../../services/avatar'
-	import AvatarModel from '../../models/avatar'
+import AvatarService from '../../services/avatar'
+import AvatarModel from '../../models/avatar'
 
-	export default {
-		name: 'avatar-settings',
-		data() {
-			return {
-				avatarProvider: '',
-				avatarService: AvatarService,
-				isCropAvatar: false,
-				avatarToCrop: null,
-				loading: false, // Seperate variable because some things we're doing in browser take a bit
+export default {
+	name: 'avatar-settings',
+	data() {
+		return {
+			avatarProvider: '',
+			avatarService: AvatarService,
+			isCropAvatar: false,
+			avatarToCrop: null,
+			loading: false, // Seperate variable because some things we're doing in browser take a bit
+		}
+	},
+	created() {
+		this.avatarService = new AvatarService()
+		this.avatarStatus()
+	},
+	components: {
+		Cropper,
+	},
+	methods: {
+		avatarStatus() {
+			this.avatarService.get({})
+				.then(r => {
+					this.avatarProvider = r.avatarProvider
+				})
+				.catch(e => this.error(e, this))
+		},
+		updateAvatarStatus() {
+			const avatarStatus = new AvatarModel({avatarProvider: this.avatarProvider})
+			this.avatarService.update(avatarStatus)
+				.then(() => {
+					this.success({message: 'Avatar status was updated successfully!'}, this)
+					this.$store.commit('auth/reloadAvatar')
+				})
+				.catch(e => this.error(e, this))
+		},
+		uploadAvatar() {
+			this.loading = true
+			const {canvas} = this.$refs.cropper.getResult()
+
+			if (canvas) {
+				canvas.toBlob(blob => {
+					this.avatarService.create(blob)
+						.then(() => {
+							this.success({message: 'The avatar has been set successfully!'}, this)
+							this.$store.commit('auth/reloadAvatar')
+						})
+						.catch(e => this.error(e, this))
+						.finally(() => {
+							this.loading = false
+							this.isCropAvatar = false
+						})
+				})
+			} else {
+				this.loading = false
 			}
 		},
-		created() {
-			this.avatarService = new AvatarService()
-			this.avatarStatus()
-		},
-		components: {
-			Cropper,
-		},
-		methods: {
-			avatarStatus() {
-				this.avatarService.get({})
-					.then(r => {
-						this.avatarProvider = r.avatarProvider
-					})
-					.catch(e => this.error(e, this))
-			},
-			updateAvatarStatus() {
-				const avatarStatus = new AvatarModel({avatarProvider: this.avatarProvider})
-				this.avatarService.update(avatarStatus)
-					.then(() => {
-						this.success({message: 'Avatar status was updated successfully!'}, this)
-						this.$store.commit('auth/reloadAvatar')
-					})
-					.catch(e => this.error(e, this))
-			},
-			uploadAvatar() {
-				this.loading = true
-				const {canvas} = this.$refs.cropper.getResult()
+		cropAvatar() {
+			const avatar = this.$refs.avatarUploadInput.files
 
-				if (canvas) {
-					canvas.toBlob(blob => {
-						this.avatarService.create(blob)
-							.then(() => {
-								this.success({message: 'The avatar has been set successfully!'}, this)
-								this.$store.commit('auth/reloadAvatar')
-							})
-							.catch(e => this.error(e, this))
-							.finally(() => {
-								this.loading = false
-								this.isCropAvatar = false
-							})
-					})
-				} else {
-					this.loading = false
-				}
-			},
-			cropAvatar() {
-				const avatar = this.$refs.avatarUploadInput.files
+			if (avatar.length === 0) {
+				return
+			}
 
-				if (avatar.length === 0) {
-					return
-				}
-
-				this.loading = true
-				const reader = new FileReader()
-				reader.onload = e => {
-					this.avatarToCrop = e.target.result
-					this.isCropAvatar = true
-				}
-				reader.onloadend = () => this.loading = false
-				reader.readAsDataURL(avatar[0])
-			},
+			this.loading = true
+			const reader = new FileReader()
+			reader.onload = e => {
+				this.avatarToCrop = e.target.result
+				this.isCropAvatar = true
+			}
+			reader.onloadend = () => this.loading = false
+			reader.readAsDataURL(avatar[0])
 		},
-	}
+	},
+}
 </script>
diff --git a/src/helpers/applyDrag.js b/src/helpers/applyDrag.js
index 9637e898d..67ada44de 100644
--- a/src/helpers/applyDrag.js
+++ b/src/helpers/applyDrag.js
@@ -1,6 +1,5 @@
-
 export const applyDrag = (arr, dragResult) => {
-	const { removedIndex, addedIndex, payload } = dragResult
+	const {removedIndex, addedIndex, payload} = dragResult
 	if (removedIndex === null && addedIndex === null) return arr
 
 	const result = [...arr]
diff --git a/src/helpers/case.js b/src/helpers/case.js
index b0a9bc151..6246f7cf1 100644
--- a/src/helpers/case.js
+++ b/src/helpers/case.js
@@ -19,7 +19,7 @@ export function objectToCamelCase(object) {
 
 		// Recursive processing
 		// Prevent processing for some cases
-		if(object[m] === null) {
+		if (object[m] === null) {
 			continue
 		}
 
@@ -31,7 +31,7 @@ export function objectToCamelCase(object) {
 		}
 
 		// Call it again for nested objects
-		if(typeof object[m] === 'object') {
+		if (typeof object[m] === 'object') {
 			parsedObject[camelCase(m)] = objectToCamelCase(object[m])
 		}
 	}
@@ -56,7 +56,7 @@ export function objectToSnakeCase(object) {
 
 		// Recursive processing
 		// Prevent processing for some cases
-		if(
+		if (
 			object[m] === null ||
 			(object[m] instanceof Date)
 		) {
@@ -71,7 +71,7 @@ export function objectToSnakeCase(object) {
 		}
 
 		// Call it again for nested objects
-		if(typeof object[m] === 'object') {
+		if (typeof object[m] === 'object') {
 			parsedObject[snakeCase(m)] = objectToSnakeCase(object[m])
 		}
 	}
diff --git a/src/helpers/filterObject.js b/src/helpers/filterObject.js
index 7dfb8f62f..5aeadadc7 100644
--- a/src/helpers/filterObject.js
+++ b/src/helpers/filterObject.js
@@ -1,4 +1,3 @@
-
 export const filterObject = (obj, fn) => {
 	let key
 
diff --git a/src/helpers/saveListView.js b/src/helpers/saveListView.js
index 2162464f2..a37627511 100644
--- a/src/helpers/saveListView.js
+++ b/src/helpers/saveListView.js
@@ -1,4 +1,3 @@
-
 export const saveListView = (listId, routeName) => {
 	const savedListView = localStorage.getItem('listView')
 	let savedListViewJson = false
@@ -7,7 +6,7 @@ export const saveListView = (listId, routeName) => {
 	}
 
 	let listView = {}
-	if(savedListViewJson) {
+	if (savedListViewJson) {
 		listView = savedListViewJson
 	}
 
@@ -18,7 +17,7 @@ export const saveListView = (listId, routeName) => {
 export const getListView = listId => {
 	// Remove old stored settings
 	const savedListView = localStorage.getItem('listView')
-	if(savedListView !== null && savedListView.startsWith('list.')) {
+	if (savedListView !== null && savedListView.startsWith('list.')) {
 		localStorage.removeItem('listView')
 	}
 
@@ -28,7 +27,7 @@ export const getListView = listId => {
 
 	const savedListViewJson = JSON.parse(savedListView)
 
-	if(!savedListViewJson[listId]) {
+	if (!savedListViewJson[listId]) {
 		return 'list.list'
 	}
 
diff --git a/src/helpers/setTitle.js b/src/helpers/setTitle.js
index aec5a9feb..c8151fae9 100644
--- a/src/helpers/setTitle.js
+++ b/src/helpers/setTitle.js
@@ -1,4 +1,3 @@
-
 export const setTitle = title => {
 	if (typeof title === 'undefined' || title === '') {
 		document.title = 'Vikunja'
diff --git a/src/http-common/index.js b/src/http-common/index.js
index 3ef1acc44..f833ebf69 100644
--- a/src/http-common/index.js
+++ b/src/http-common/index.js
@@ -1,5 +1,5 @@
 import axios from 'axios'
 
 export const HTTP = axios.create({
-  baseURL: window.API_URL
+	baseURL: window.API_URL,
 })
diff --git a/src/main.js b/src/main.js
index 3acf6f579..d520b3057 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,77 +3,87 @@ import App from './App.vue'
 import router from './router'
 
 import {VERSION} from './version.json'
+// Register the modal
+import Modal from './components/modal/modal'
+// Add CSS
+import './styles/vikunja.scss'
+// Notifications
+import Notifications from 'vue-notification'
+// Icons
+import {library} from '@fortawesome/fontawesome-svg-core'
+import {
+	faAlignLeft,
+	faAngleRight,
+	faBars,
+	faCalendar,
+	faCalendarWeek,
+	faCheck,
+	faCheckDouble,
+	faChevronDown,
+	faCloudDownloadAlt,
+	faCloudUploadAlt,
+	faCog,
+	faEllipsisV,
+	faExclamation,
+	faFillDrip,
+	faFilter,
+	faHistory,
+	faKeyboard,
+	faLayerGroup,
+	faList,
+	faListOl,
+	faLock,
+	faPaperclip,
+	faPaste,
+	faPen,
+	faPencilAlt,
+	faPercent,
+	faPlus,
+	faPowerOff,
+	faSearch,
+	faSignOutAlt,
+	faSort,
+	faSortUp,
+	faStar as faStarSolid,
+	faTachometerAlt,
+	faTags,
+	faTasks,
+	faTh,
+	faTimes,
+	faTrashAlt,
+	faUser,
+	faUsers,
+} from '@fortawesome/free-solid-svg-icons'
+import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle} from '@fortawesome/free-regular-svg-icons'
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
+// Tooltip
+import VTooltip from 'v-tooltip'
+// PWA
+import './registerServiceWorker'
+
+// Shortcuts
+import vueShortkey from 'vue-shortkey'
+// Mixins
+import message from './message'
+import {format, formatDistance} from 'date-fns'
+import {colorIsDark} from './helpers/colorIsDark'
+import {setTitle} from './helpers/setTitle'
+// Vuex
+import {store} from './store'
+
 console.info(`Vikunja frontend version ${VERSION}`)
 
 // Make sure the api url does not contain a / at the end
-if(window.API_URL.substr(window.API_URL.length - 1, window.API_URL.length) === '/') {
+if (window.API_URL.substr(window.API_URL.length - 1, window.API_URL.length) === '/') {
 	window.API_URL = window.API_URL.substr(0, window.API_URL.length - 1)
 }
 
-// Register the modal
-import Modal from './components/modal/modal'
 Vue.component('modal', Modal)
 
-// Add CSS
-import './styles/vikunja.scss'
-
 Vue.config.productionTip = false
 
-// Notifications
-import Notifications from 'vue-notification'
 Vue.use(Notifications)
 
-// Icons
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
-import { faListOl } from '@fortawesome/free-solid-svg-icons'
-import { faTasks } from '@fortawesome/free-solid-svg-icons'
-import { faCog } from '@fortawesome/free-solid-svg-icons'
-import { faAngleRight } from '@fortawesome/free-solid-svg-icons'
-import { faLayerGroup } from '@fortawesome/free-solid-svg-icons'
-import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'
-import { faUsers } from '@fortawesome/free-solid-svg-icons'
-import { faUser } from '@fortawesome/free-solid-svg-icons'
-import { faLock } from '@fortawesome/free-solid-svg-icons'
-import { faPen } from '@fortawesome/free-solid-svg-icons'
-import { faTimes } from '@fortawesome/free-solid-svg-icons'
-import { faTachometerAlt } from '@fortawesome/free-solid-svg-icons'
-import { faCalendar } from '@fortawesome/free-solid-svg-icons'
-import { faBars } from '@fortawesome/free-solid-svg-icons'
-import { faPowerOff } from '@fortawesome/free-solid-svg-icons'
-import { faCalendarWeek } from '@fortawesome/free-solid-svg-icons'
-import { faExclamation } from '@fortawesome/free-solid-svg-icons'
-import { faTags } from '@fortawesome/free-solid-svg-icons'
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
-import { faCheck } from '@fortawesome/free-solid-svg-icons'
-import { faPaste } from '@fortawesome/free-solid-svg-icons'
-import { faPencilAlt } from '@fortawesome/free-solid-svg-icons'
-import { faTimesCircle } from '@fortawesome/free-regular-svg-icons'
-import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons'
-import { faCloudDownloadAlt } from '@fortawesome/free-solid-svg-icons'
-import { faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons'
-import { faPercent } from '@fortawesome/free-solid-svg-icons'
-import { faStar as faStarSolid } from '@fortawesome/free-solid-svg-icons'
-import { faStar } from '@fortawesome/free-regular-svg-icons'
-import { faAlignLeft } from '@fortawesome/free-solid-svg-icons'
-import { faPaperclip } from '@fortawesome/free-solid-svg-icons'
-import { faClock } from '@fortawesome/free-regular-svg-icons'
-import { faHistory } from '@fortawesome/free-solid-svg-icons'
-import { faSearch } from '@fortawesome/free-solid-svg-icons'
-import { faCheckDouble } from '@fortawesome/free-solid-svg-icons'
-import { faTh } from '@fortawesome/free-solid-svg-icons'
-import { faSort } from '@fortawesome/free-solid-svg-icons'
-import { faSortUp } from '@fortawesome/free-solid-svg-icons'
-import { faList } from '@fortawesome/free-solid-svg-icons'
-import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
-import { faFilter } from '@fortawesome/free-solid-svg-icons'
-import { faFillDrip } from '@fortawesome/free-solid-svg-icons'
-import { faKeyboard } from '@fortawesome/free-solid-svg-icons'
-import { faComments } from '@fortawesome/free-regular-svg-icons'
-import { faSave } from '@fortawesome/free-regular-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
 library.add(faSignOutAlt)
 library.add(faPlus)
 library.add(faListOl)
@@ -124,15 +134,8 @@ library.add(faStarSolid)
 
 Vue.component('icon', FontAwesomeIcon)
 
-// Tooltip
-import VTooltip from 'v-tooltip'
 Vue.use(VTooltip, {defaultHtml: false})
 
-// PWA
-import './registerServiceWorker'
-
-// Shortcuts
-import vueShortkey from 'vue-shortkey'
 Vue.use(vueShortkey)
 
 // Set focus
@@ -146,14 +149,9 @@ Vue.directive('focus', {
 		if (window.innerWidth > 769 || (typeof modifiers.always !== 'undefined' && modifiers.always)) {
 			el.focus()
 		}
-	}
+	},
 })
 
-// Mixins
-import message from './message'
-import {format, formatDistance} from 'date-fns'
-import {colorIsDark} from './helpers/colorIsDark'
-import {setTitle} from './helpers/setTitle'
 Vue.mixin({
 	methods: {
 		formatDateSince: date => {
@@ -161,35 +159,32 @@ Vue.mixin({
 				date = new Date(date)
 			}
 			const currentDate = new Date()
-			let formatted = '';
+			let formatted = ''
 			if (date > currentDate) {
 				formatted += 'in '
 			}
 			formatted += formatDistance(date, currentDate)
-			if(date < currentDate) {
+			if (date < currentDate) {
 				formatted += ' ago'
 			}
 
-			return formatted;
+			return formatted
 		},
 		formatDate: date => {
 			if (typeof date === 'string') {
 				date = new Date(date)
 			}
-			return date ? format(date, 'PPPPpppp'): ''
+			return date ? format(date, 'PPPPpppp') : ''
 		},
 		error: (e, context, actions = []) => message.error(e, context, actions),
 		success: (s, context, actions = []) => message.success(s, context, actions),
 		colorIsDark: colorIsDark,
 		setTitle: setTitle,
-	}
+	},
 })
 
-// Vuex
-import {store} from './store'
-
 new Vue({
 	router,
 	store,
-	render: h => h(App)
+	render: h => h(App),
 }).$mount('#app')
diff --git a/src/message/index.js b/src/message/index.js
index 308c31c50..2c8d8bc9d 100644
--- a/src/message/index.js
+++ b/src/message/index.js
@@ -2,11 +2,11 @@ export default {
 	setLoading(context) {
 		const timeout = setTimeout(function () {
 			context.loading = true
-		}, 100);
+		}, 100)
 		return () => {
 			clearTimeout(timeout)
 			context.loading = false
-		};
+		}
 	},
 	error(e, context, actions = []) {
 		// Build the notification text from error response
diff --git a/src/models/abstractModel.js b/src/models/abstractModel.js
index e4f52142e..232d9a4fb 100644
--- a/src/models/abstractModel.js
+++ b/src/models/abstractModel.js
@@ -1,5 +1,5 @@
-import {defaults, omitBy, isNil} from 'lodash'
-import {objectToCamelCase} from '../helpers/case'
+import {defaults, isNil, omitBy} from 'lodash'
+import {objectToCamelCase} from '@/helpers/case'
 
 export default class AbstractModel {
 
diff --git a/src/models/file.js b/src/models/file.js
index d3da0bad4..258de4247 100644
--- a/src/models/file.js
+++ b/src/models/file.js
@@ -32,6 +32,6 @@ export default class FileModel extends AbstractModel {
 			it++
 		}
 
-		return Number(Math.round(size+'e2')+'e-2') + ' ' + sizes[it]
+		return Number(Math.round(size + 'e2') + 'e-2') + ' ' + sizes[it]
 	}
 }
diff --git a/src/models/label.js b/src/models/label.js
index 79084324b..ab21e1284 100644
--- a/src/models/label.js
+++ b/src/models/label.js
@@ -1,6 +1,6 @@
 import AbstractModel from './abstractModel'
 import UserModel from './user'
-import {colorIsDark} from '../helpers/colorIsDark'
+import {colorIsDark} from '@/helpers/colorIsDark'
 
 export default class LabelModel extends AbstractModel {
 	constructor(data) {
diff --git a/src/models/labelTask.js b/src/models/labelTask.js
index 84971aeef..9363cc735 100644
--- a/src/models/labelTask.js
+++ b/src/models/labelTask.js
@@ -1,4 +1,4 @@
-import AbstractModel from "./abstractModel";
+import AbstractModel from './abstractModel'
 
 export default class LabelTask extends AbstractModel {
 	defaults() {
diff --git a/src/models/linkShare.js b/src/models/linkShare.js
index 1d5b0bec5..1d8ef259e 100644
--- a/src/models/linkShare.js
+++ b/src/models/linkShare.js
@@ -3,28 +3,28 @@ import UserModel from './user'
 
 export default class ListModel extends AbstractModel {
 
-    constructor(data) {
-        // The constructor of AbstractModel handles all the default parsing.
-        super(data)
+	constructor(data) {
+		// The constructor of AbstractModel handles all the default parsing.
+		super(data)
 
-        this.sharedBy = new UserModel(this.sharedBy)
+		this.sharedBy = new UserModel(this.sharedBy)
 
-        this.created = new Date(this.created)
-        this.updated = new Date(this.updated)
-    }
+		this.created = new Date(this.created)
+		this.updated = new Date(this.updated)
+	}
 
-    // Default attributes that define the "empty" state.
-    defaults() {
-        return {
-            id: 0,
-            hash: '',
-            right: 0,
-            sharedBy: UserModel,
-            sharingType: 0,
-            listId: 0,
+	// Default attributes that define the "empty" state.
+	defaults() {
+		return {
+			id: 0,
+			hash: '',
+			right: 0,
+			sharedBy: UserModel,
+			sharingType: 0,
+			listId: 0,
 
-            created: null,
-            updated: null,
-        }
-    }
+			created: null,
+			updated: null,
+		}
+	}
 }
\ No newline at end of file
diff --git a/src/models/list.js b/src/models/list.js
index 7fdfcd7a5..469e53ea5 100644
--- a/src/models/list.js
+++ b/src/models/list.js
@@ -3,7 +3,7 @@ import TaskModel from './task'
 import UserModel from './user'
 
 export default class ListModel extends AbstractModel {
-	
+
 	constructor(data) {
 		super(data)
 
@@ -15,7 +15,7 @@ export default class ListModel extends AbstractModel {
 		this.tasks = this.tasks.map(t => {
 			return new TaskModel(t)
 		})
-		
+
 		this.owner = new UserModel(this.owner)
 
 		this.created = new Date(this.created)
diff --git a/src/models/passwordReset.js b/src/models/passwordReset.js
index b45cbeaf5..b84df22d5 100644
--- a/src/models/passwordReset.js
+++ b/src/models/passwordReset.js
@@ -1,12 +1,12 @@
-import AbstractModel from "./abstractModel";
+import AbstractModel from './abstractModel'
 
 export default class PasswordResetModel extends AbstractModel {
 	constructor(data) {
 		super(data)
-		
+
 		this.token = localStorage.getItem('passwordResetToken')
 	}
-	
+
 	defaults() {
 		return {
 			token: '',
diff --git a/src/models/taskAssignee.js b/src/models/taskAssignee.js
index 287f860bb..ee697b9d7 100644
--- a/src/models/taskAssignee.js
+++ b/src/models/taskAssignee.js
@@ -1,16 +1,16 @@
 import AbstractModel from './abstractModel'
 
 export default class TaskAssigneeModel extends AbstractModel {
-    constructor(data) {
-        super(data)
-        this.created = new Date(this.created)
-    }
+	constructor(data) {
+		super(data)
+		this.created = new Date(this.created)
+	}
 
-    defaults() {
-        return {
-            created: null,
-            userId: 0,
-            taskId: 0,
-        }
-    }
+	defaults() {
+		return {
+			created: null,
+			userId: 0,
+			taskId: 0,
+		}
+	}
 }
diff --git a/src/models/taskRelation.js b/src/models/taskRelation.js
index fd69c8be8..63fcda0a7 100644
--- a/src/models/taskRelation.js
+++ b/src/models/taskRelation.js
@@ -7,7 +7,7 @@ export default class TaskRelationModel extends AbstractModel {
 		this.createdBy = new UserModel(this.createdBy)
 		this.created = new Date(this.created)
 	}
-	
+
 	defaults() {
 		return {
 			id: 0,
diff --git a/src/models/team.js b/src/models/team.js
index 645b40ade..d9217926f 100644
--- a/src/models/team.js
+++ b/src/models/team.js
@@ -5,7 +5,7 @@ import TeamMemberModel from './teamMember'
 export default class TeamModel extends AbstractModel {
 	constructor(data) {
 		super(data)
-		
+
 		// Make the members to usermodels
 		this.members = this.members.map(m => {
 			return new TeamMemberModel(m)
diff --git a/src/models/teamList.js b/src/models/teamList.js
index fd691b65d..0a191d335 100644
--- a/src/models/teamList.js
+++ b/src/models/teamList.js
@@ -7,7 +7,7 @@ export default class TeamListModel extends TeamShareBaseModel {
 			super.defaults(),
 			{
 				listId: 0,
-			}
+			},
 		)
 	}
 }
\ No newline at end of file
diff --git a/src/models/teamMember.js b/src/models/teamMember.js
index b6a08852f..ea1e6a753 100644
--- a/src/models/teamMember.js
+++ b/src/models/teamMember.js
@@ -8,7 +8,7 @@ export default class TeamMemberModel extends UserModel {
 			{
 				admin: false,
 				teamId: 0,
-			}
+			},
 		)
 	}
 }
\ No newline at end of file
diff --git a/src/models/teamNamespace.js b/src/models/teamNamespace.js
index d0cf8a4ab..69629af5b 100644
--- a/src/models/teamNamespace.js
+++ b/src/models/teamNamespace.js
@@ -7,7 +7,7 @@ export default class TeamNamespaceModel extends TeamShareBaseModel {
 			super.defaults(),
 			{
 				namespaceId: 0,
-			}
+			},
 		)
 	}
 }
\ No newline at end of file
diff --git a/src/models/teamShareBase.js b/src/models/teamShareBase.js
index 616fc2449..08b3dc80f 100644
--- a/src/models/teamShareBase.js
+++ b/src/models/teamShareBase.js
@@ -15,9 +15,9 @@ export default class TeamShareBaseModel extends AbstractModel {
 		return {
 			teamId: 0,
 			right: 0,
-			
+
 			created: null,
-			updated: null
+			updated: null,
 		}
 	}
 }
\ No newline at end of file
diff --git a/src/models/userList.js b/src/models/userList.js
index f5a44b0bb..9211cfcda 100644
--- a/src/models/userList.js
+++ b/src/models/userList.js
@@ -8,7 +8,7 @@ export default class UserListModel extends UserShareBaseModel {
 			super.defaults(),
 			{
 				listId: 0,
-			}
+			},
 		)
 	}
 }
\ No newline at end of file
diff --git a/src/models/userNamespace.js b/src/models/userNamespace.js
index 281e7bc25..0ef7f9df5 100644
--- a/src/models/userNamespace.js
+++ b/src/models/userNamespace.js
@@ -1,4 +1,4 @@
-import UserShareBaseModel from "./userShareBase";
+import UserShareBaseModel from './userShareBase'
 import {merge} from 'lodash'
 
 // This class extends the user share model with a 'rights' parameter which is used in sharing
@@ -8,7 +8,7 @@ export default class UserNamespaceModel extends UserShareBaseModel {
 			super.defaults(),
 			{
 				namespaceId: 0,
-			}
+			},
 		)
 	}
 }
\ No newline at end of file
diff --git a/src/models/userShareBase.js b/src/models/userShareBase.js
index 82740c163..171643a06 100644
--- a/src/models/userShareBase.js
+++ b/src/models/userShareBase.js
@@ -11,7 +11,7 @@ export default class UserShareBaseModel extends AbstractModel {
 		return {
 			userId: '',
 			right: 0,
-			
+
 			created: null,
 			updated: null,
 		}
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index 94626e09d..e198e95fd 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -1,57 +1,57 @@
 /* eslint-disable no-console */
 
-import { register } from 'register-service-worker'
+import {register} from 'register-service-worker'
 import swEvents from './ServiceWorker/events'
 
 if (process.env.NODE_ENV === 'production') {
-  register(`${process.env.BASE_URL}sw.js`, {
-    ready () {
-      console.log('App is being served from cache by a service worker.')
-    },
-    registered () {
-      console.log('Service worker has been registered.')
-    },
-    cached () {
-      console.log('Content has been cached for offline use.')
-    },
-    updatefound () {
-      console.log('New content is downloading.')
-    },
-    updated (registration) {
-      console.log('New content is available; please refresh.')
-      // Send an event with the updated info
-      document.dispatchEvent(
-          new CustomEvent(swEvents.SW_UPDATED, { detail:registration })
-      )
-    },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
-    },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
+	register(`${process.env.BASE_URL}sw.js`, {
+		ready() {
+			console.log('App is being served from cache by a service worker.')
+		},
+		registered() {
+			console.log('Service worker has been registered.')
+		},
+		cached() {
+			console.log('Content has been cached for offline use.')
+		},
+		updatefound() {
+			console.log('New content is downloading.')
+		},
+		updated(registration) {
+			console.log('New content is available; please refresh.')
+			// Send an event with the updated info
+			document.dispatchEvent(
+				new CustomEvent(swEvents.SW_UPDATED, {detail: registration}),
+			)
+		},
+		offline() {
+			console.log('No internet connection found. App is running in offline mode.')
+		},
+		error(error) {
+			console.error('Error during service worker registration:', error)
+		},
+	})
 }
 
-if(navigator && navigator.serviceWorker) {
-  navigator.serviceWorker.addEventListener('message', event => {
-    // for every message we expect an action field
-    // determining operation that we should perform
-    const { action } = event.data;
-    // we use 2nd port provided by the message channel
-    const port = event.ports[0];
+if (navigator && navigator.serviceWorker) {
+	navigator.serviceWorker.addEventListener('message', event => {
+		// for every message we expect an action field
+		// determining operation that we should perform
+		const {action} = event.data
+		// we use 2nd port provided by the message channel
+		const port = event.ports[0]
 
-    if(action === 'getBearerToken') {
-      console.debug('Token request from sw');
-      port.postMessage({
-        authToken: localStorage.getItem('token'),
-      })
-    } else {
-      console.error('Unknown event', event);
-      port.postMessage({
-        error: 'Unknown request',
-      })
-    }
-  });
+		if (action === 'getBearerToken') {
+			console.debug('Token request from sw')
+			port.postMessage({
+				authToken: localStorage.getItem('token'),
+			})
+		} else {
+			console.error('Unknown event', event)
+			port.postMessage({
+				error: 'Unknown request',
+			})
+		}
+	})
 }
 
diff --git a/src/router/index.js b/src/router/index.js
index 9cc769700..283f34b78 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,25 @@ import ErrorComponent from '../components/misc/error'
 // User Handling
 import LoginComponent from '../views/user/Login'
 import RegisterComponent from '../views/user/Register'
+// Tasks
+import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange'
+import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth'
+import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal'
+import TaskDetailView from '../views/tasks/TaskDetailView'
+import ListNamespaces from '../views/namespaces/ListNamespaces'
+// Team Handling
+import ListTeamsComponent from '../views/teams/ListTeams'
+// Label Handling
+import ListLabelsComponent from '../views/labels/ListLabels'
+// Migration
+import MigrationComponent from '../views/migrator/Migrate'
+import MigrateServiceComponent from '../views/migrator/MigrateService'
+// List Views
+import ShowListComponent from '../views/list/ShowList'
+import Kanban from '../views/list/views/Kanban'
+import List from '../views/list/views/List'
+import Gantt from '../views/list/views/Gantt'
+import Table from '../views/list/views/Table'
 
 const PasswordResetComponent = () => ({
 	component: import(/* webpackPrefetch: true *//* webpackChunkName: "user-settings" */'../views/user/PasswordReset'),
@@ -40,11 +59,6 @@ const EditListComponent = () => ({
 	error: ErrorComponent,
 	timeout: 60000,
 })
-// Tasks
-import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange'
-import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth'
-import TaskDetailViewModal from '../views/tasks/TaskDetailViewModal'
-import TaskDetailView from '../views/tasks/TaskDetailView'
 // Namespace Handling
 const NewNamespaceComponent = () => ({
 	component: import(/* webpackPrefetch: true *//* webpackChunkName: "settings" */'../views/namespaces/NewNamespace'),
@@ -58,9 +72,6 @@ const EditNamespaceComponent = () => ({
 	error: ErrorComponent,
 	timeout: 60000,
 })
-import ListNamespaces from '../views/namespaces/ListNamespaces'
-// Team Handling
-import ListTeamsComponent from '../views/teams/ListTeams'
 
 const EditTeamComponent = () => ({
 	component: import(/* webpackPrefetch: true *//* webpackChunkName: "settings" */'../views/teams/EditTeam'),
@@ -74,17 +85,6 @@ const NewTeamComponent = () => ({
 	error: ErrorComponent,
 	timeout: 60000,
 })
-// Label Handling
-import ListLabelsComponent from '../views/labels/ListLabels'
-// Migration
-import MigrationComponent from '../views/migrator/Migrate'
-import MigrateServiceComponent from '../views/migrator/MigrateService'
-// List Views
-import ShowListComponent from '../views/list/ShowList'
-import Kanban from '../views/list/views/Kanban'
-import List from '../views/list/views/List'
-import Gantt from '../views/list/views/Gantt'
-import Table from '../views/list/views/Table'
 
 Vue.use(Router)
 
@@ -99,7 +99,7 @@ export default new Router({
 		// Scroll to anchor should still work
 		if (to.hash) {
 			return {
-				selector: to.hash
+				selector: to.hash,
 			}
 		}
 
@@ -110,7 +110,7 @@ export default new Router({
 		{
 			path: '/',
 			name: 'home',
-			component: HomeComponent
+			component: HomeComponent,
 		},
 		{
 			path: '*',
@@ -120,22 +120,22 @@ export default new Router({
 		{
 			path: '/login',
 			name: 'user.login',
-			component: LoginComponent
+			component: LoginComponent,
 		},
 		{
 			path: '/get-password-reset',
 			name: 'user.password-reset.request',
-			component: GetPasswordResetComponent
+			component: GetPasswordResetComponent,
 		},
 		{
 			path: '/password-reset',
 			name: 'user.password-reset.reset',
-			component: PasswordResetComponent
+			component: PasswordResetComponent,
 		},
 		{
 			path: '/register',
 			name: 'user.register',
-			component: RegisterComponent
+			component: RegisterComponent,
 		},
 		{
 			path: '/user/settings',
@@ -145,7 +145,7 @@ export default new Router({
 		{
 			path: '/share/:share/auth',
 			name: 'link-share.auth',
-			component: LinkShareAuthComponent
+			component: LinkShareAuthComponent,
 		},
 		{
 			path: '/namespaces',
@@ -155,22 +155,22 @@ export default new Router({
 		{
 			path: '/namespaces/new',
 			name: 'namespace.create',
-			component: NewNamespaceComponent
+			component: NewNamespaceComponent,
 		},
 		{
 			path: '/namespaces/:id/edit',
 			name: 'namespace.edit',
-			component: EditNamespaceComponent
+			component: EditNamespaceComponent,
 		},
 		{
 			path: '/namespaces/:id/list',
 			name: 'list.create',
-			component: NewListComponent
+			component: NewListComponent,
 		},
 		{
 			path: '/lists/:id/edit',
 			name: 'list.edit',
-			component: EditListComponent
+			component: EditListComponent,
 		},
 		{
 			path: '/tasks/:id',
@@ -228,27 +228,27 @@ export default new Router({
 						},
 					],
 				},
-			]
+			],
 		},
 		{
 			path: '/teams',
 			name: 'teams.index',
-			component: ListTeamsComponent
+			component: ListTeamsComponent,
 		},
 		{
 			path: '/teams/new',
 			name: 'teams.create',
-			component: NewTeamComponent
+			component: NewTeamComponent,
 		},
 		{
 			path: '/teams/:id/edit',
 			name: 'teams.edit',
-			component: EditTeamComponent
+			component: EditTeamComponent,
 		},
 		{
 			path: '/labels',
 			name: 'labels.index',
-			component: ListLabelsComponent
+			component: ListLabelsComponent,
 		},
 		{
 			path: '/migrate',
@@ -260,5 +260,5 @@ export default new Router({
 			name: 'migrate.service',
 			component: MigrateServiceComponent,
 		},
-	]
+	],
 })
\ No newline at end of file
diff --git a/src/services/abstractService.js b/src/services/abstractService.js
index 0112695fc..159672e0a 100644
--- a/src/services/abstractService.js
+++ b/src/services/abstractService.js
@@ -1,6 +1,6 @@
 import axios from 'axios'
 import {reduce, replace} from 'lodash'
-import {objectToSnakeCase} from '../helpers/case'
+import {objectToSnakeCase} from '@/helpers/case'
 
 export default class AbstractService {
 
@@ -380,7 +380,7 @@ export default class AbstractService {
 			})
 			.then(response => {
 				const result = this.modelCreateFactory(response.data)
-				if(typeof model.maxRight !== 'undefined') {
+				if (typeof model.maxRight !== 'undefined') {
 					result.maxRight = model.maxRight
 				}
 				return Promise.resolve(result)
@@ -406,7 +406,7 @@ export default class AbstractService {
 			})
 			.then(response => {
 				const result = this.modelUpdateFactory(response.data)
-				if(typeof model.maxRight !== 'undefined') {
+				if (typeof model.maxRight !== 'undefined') {
 					result.maxRight = model.maxRight
 				}
 				return Promise.resolve(result)
diff --git a/src/services/attachment.js b/src/services/attachment.js
index 8c79f592c..b0fa38ba4 100644
--- a/src/services/attachment.js
+++ b/src/services/attachment.js
@@ -38,17 +38,17 @@ export default class AttachmentService extends AbstractService {
 			method: 'GET',
 			responseType: 'blob',
 		}).then(response => {
-			return window.URL.createObjectURL(new Blob([response.data]));
+			return window.URL.createObjectURL(new Blob([response.data]))
 		})
 	}
 
 	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);
+			const link = document.createElement('a')
+			link.href = url
+			link.setAttribute('download', model.file.name)
+			link.click()
+			window.URL.revokeObjectURL(url)
 		})
 	}
 
@@ -62,12 +62,12 @@ export default class AttachmentService extends AbstractService {
 		const data = new FormData()
 		for (let i = 0; i < files.length; i++) {
 			// TODO: Validation of file size
-			data.append('files', new Blob([files[i]]), files[i].name);
+			data.append('files', new Blob([files[i]]), files[i].name)
 		}
 
 		return this.uploadFormData(
 			this.getReplacedRoute(this.paths.create, model),
-			data
+			data,
 		)
 	}
 }
diff --git a/src/services/backgroundUpload.js b/src/services/backgroundUpload.js
index 5dbc99df2..8f9dcf622 100644
--- a/src/services/backgroundUpload.js
+++ b/src/services/backgroundUpload.js
@@ -26,7 +26,7 @@ export default class BackgroundUploadService extends AbstractService {
 		return this.uploadFile(
 			this.getReplacedRoute(this.paths.create, {listId: listId}),
 			file,
-			'background'
+			'background',
 		)
 	}
 }
diff --git a/src/services/label.js b/src/services/label.js
index 2a78c4d41..39c24c047 100644
--- a/src/services/label.js
+++ b/src/services/label.js
@@ -23,11 +23,11 @@ export default class LabelService extends AbstractService {
 	modelFactory(data) {
 		return new LabelModel(data)
 	}
-	
+
 	beforeUpdate(label) {
 		return this.processModel(label)
 	}
-	
+
 	beforeCreate(label) {
 		return this.processModel(label)
 	}
diff --git a/src/services/labelTask.js b/src/services/labelTask.js
index d6c84d762..14f4758ec 100644
--- a/src/services/labelTask.js
+++ b/src/services/labelTask.js
@@ -1,5 +1,5 @@
-import AbstractService from "./abstractService";
-import LabelTask from "../models/labelTask";
+import AbstractService from './abstractService'
+import LabelTask from '../models/labelTask'
 
 export default class LabelTaskService extends AbstractService {
 	constructor() {
@@ -9,7 +9,7 @@ export default class LabelTaskService extends AbstractService {
 			delete: '/tasks/{taskId}/labels/{labelId}',
 		})
 	}
-	
+
 	modelFactory(data) {
 		return new LabelTask(data)
 	}
diff --git a/src/services/linkShare.js b/src/services/linkShare.js
index b5d6a55a3..34179dc6a 100644
--- a/src/services/linkShare.js
+++ b/src/services/linkShare.js
@@ -3,22 +3,22 @@ import LinkShareModel from '../models/linkShare'
 import {formatISO} from 'date-fns'
 
 export default class ListService extends AbstractService {
-    constructor() {
-        super({
-            getAll: '/lists/{listId}/shares',
-            get: '/lists/{listId}/shares/{id}',
-            create: '/lists/{listId}/shares',
-            delete: '/lists/{listId}/shares/{id}',
-        })
-    }
+	constructor() {
+		super({
+			getAll: '/lists/{listId}/shares',
+			get: '/lists/{listId}/shares/{id}',
+			create: '/lists/{listId}/shares',
+			delete: '/lists/{listId}/shares/{id}',
+		})
+	}
 
-    processModel(model) {
-        model.created = formatISO(new Date(model.created))
-        model.updated = formatISO(new Date(model.updated))
-        return model
-    }
+	processModel(model) {
+		model.created = formatISO(new Date(model.created))
+		model.updated = formatISO(new Date(model.updated))
+		return model
+	}
 
-    modelFactory(data) {
-        return new LinkShareModel(data)
-    }
+	modelFactory(data) {
+		return new LinkShareModel(data)
+	}
 }
\ No newline at end of file
diff --git a/src/services/listUsers.js b/src/services/listUsers.js
index 3f262eecb..64a2827d7 100644
--- a/src/services/listUsers.js
+++ b/src/services/listUsers.js
@@ -5,7 +5,7 @@ import {formatISO} from 'date-fns'
 export default class ListUserService extends AbstractService {
 	constructor() {
 		super({
-			getAll: '/lists/{listId}/listusers'
+			getAll: '/lists/{listId}/listusers',
 		})
 	}
 
diff --git a/src/services/migrator/abstractMigrationService.js b/src/services/migrator/abstractMigrationService.js
index 3442d5465..f5a7ce728 100644
--- a/src/services/migrator/abstractMigrationService.js
+++ b/src/services/migrator/abstractMigrationService.js
@@ -7,17 +7,17 @@ export default class AbstractMigrationService extends AbstractService {
 
 	constructor(serviceUrlKey) {
 		super({
-			update: '/migration/'+serviceUrlKey+'/migrate',
+			update: '/migration/' + serviceUrlKey + '/migrate',
 		})
 		this.serviceUrlKey = serviceUrlKey
 	}
 
 	getAuthUrl() {
-		return this.getM('/migration/'+this.serviceUrlKey+'/auth')
+		return this.getM('/migration/' + this.serviceUrlKey + '/auth')
 	}
 
 	getStatus() {
-		return this.getM('/migration/'+this.serviceUrlKey+'/status')
+		return this.getM('/migration/' + this.serviceUrlKey + '/status')
 	}
 
 	migrate(data) {
diff --git a/src/services/namespace.js b/src/services/namespace.js
index 3c78f326c..62b9d9002 100644
--- a/src/services/namespace.js
+++ b/src/services/namespace.js
@@ -10,7 +10,7 @@ export default class NamespaceService extends AbstractService {
 			getAll: '/namespaces',
 			update: '/namespaces/{id}',
 			delete: '/namespaces/{id}',
-		});
+		})
 	}
 
 	processModel(model) {
diff --git a/src/services/passwordUpdateService.js b/src/services/passwordUpdateService.js
index 5f1f98890..0c328dee2 100644
--- a/src/services/passwordUpdateService.js
+++ b/src/services/passwordUpdateService.js
@@ -3,7 +3,7 @@ import AbstractService from './abstractService'
 export default class PasswordUpdateService extends AbstractService {
 	constructor() {
 		super({
-			update: '/user/password'
+			update: '/user/password',
 		})
 	}
 }
\ No newline at end of file
diff --git a/src/services/task.js b/src/services/task.js
index 5c1878578..99feb4d50 100644
--- a/src/services/task.js
+++ b/src/services/task.js
@@ -13,7 +13,7 @@ export default class TaskService extends AbstractService {
 			get: '/tasks/{id}',
 			update: '/tasks/{id}',
 			delete: '/tasks/{id}',
-		});
+		})
 	}
 
 	modelFactory(data) {
diff --git a/src/services/team.js b/src/services/team.js
index d1e379c1a..e14fd9314 100644
--- a/src/services/team.js
+++ b/src/services/team.js
@@ -10,7 +10,7 @@ export default class TeamService extends AbstractService {
 			getAll: '/teams',
 			update: '/teams/{id}',
 			delete: '/teams/{id}',
-		});
+		})
 	}
 
 	processModel(model) {
diff --git a/src/services/totp.js b/src/services/totp.js
index 148d51a3e..021d68e07 100644
--- a/src/services/totp.js
+++ b/src/services/totp.js
@@ -1,5 +1,5 @@
 import AbstractService from './abstractService'
-import TotpModel from "../models/totp";
+import TotpModel from '../models/totp'
 
 export default class TotpService extends AbstractService {
 	urlPrefix = '/user/settings/totp'
diff --git a/src/services/user.js b/src/services/user.js
index 74d67692d..d1b5cfb31 100644
--- a/src/services/user.js
+++ b/src/services/user.js
@@ -5,7 +5,7 @@ import {formatISO} from 'date-fns'
 export default class UserService extends AbstractService {
 	constructor() {
 		super({
-			getAll: '/users'
+			getAll: '/users',
 		})
 	}
 
diff --git a/src/store/index.js b/src/store/index.js
index a9822b42b..be742df68 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,8 +1,5 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
 import {CURRENT_LIST, ERROR_MESSAGE, HAS_TASKS, IS_FULLPAGE, LOADING, ONLINE} from './mutation-types'
 import config from './modules/config'
 import auth from './modules/auth'
@@ -13,7 +10,9 @@ import lists from './modules/lists'
 import attachments from './modules/attachments'
 
 import ListService from '../services/list'
-import {setTitle} from '../helpers/setTitle'
+import {setTitle} from '@/helpers/setTitle'
+
+Vue.use(Vuex)
 
 export const store = new Vuex.Store({
 	modules: {
@@ -97,6 +96,6 @@ export const store = new Vuex.Store({
 		},
 		[HAS_TASKS](state, hasTasks) {
 			state.hasTasks = hasTasks
-		}
+		},
 	},
 })
\ No newline at end of file
diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
index b8486e880..d833b5bbb 100644
--- a/src/store/modules/auth.js
+++ b/src/store/modules/auth.js
@@ -1,6 +1,6 @@
-import {HTTP} from '../../http-common'
-import {ERROR_MESSAGE, LOADING} from "../mutation-types";
-import UserModel from "../../models/user";
+import {HTTP} from '@/http-common'
+import {ERROR_MESSAGE, LOADING} from '../mutation-types'
+import UserModel from '../../models/user'
 
 export default {
 	namespaced: true,
@@ -37,12 +37,12 @@ export default {
 			// Delete an eventually preexisting old token
 			localStorage.removeItem('token')
 
-			const data =  {
+			const data = {
 				username: credentials.username,
-				password: credentials.password
+				password: credentials.password,
 			}
 
-			if(credentials.totpPasscode) {
+			if (credentials.totpPasscode) {
 				data.totp_passcode = credentials.totpPasscode
 			}
 
@@ -81,7 +81,7 @@ export default {
 			return HTTP.post('register', {
 				username: credentials.username,
 				email: credentials.email,
-				password: credentials.password
+				password: credentials.password,
 			})
 				.then(() => {
 					return ctx.dispatch('login', credentials)
@@ -135,7 +135,7 @@ export default {
 			HTTP.post('user/token', null, {
 				headers: {
 					Authorization: 'Bearer ' + localStorage.getItem('token'),
-				}
+				},
 			})
 				.then(r => {
 					localStorage.setItem('token', r.data.token)
@@ -149,6 +149,6 @@ export default {
 		logout(ctx) {
 			localStorage.removeItem('token')
 			ctx.dispatch('checkAuth')
-		}
+		},
 	},
 }
\ No newline at end of file
diff --git a/src/store/modules/config.js b/src/store/modules/config.js
index f26a65791..d88026d72 100644
--- a/src/store/modules/config.js
+++ b/src/store/modules/config.js
@@ -1,5 +1,5 @@
 import {CONFIG} from '../mutation-types'
-import {HTTP} from '../../http-common'
+import {HTTP} from '@/http-common'
 
 export default {
 	namespaced: true,
@@ -18,7 +18,7 @@ export default {
 		legal: {
 			imprintUrl: '',
 			privacyPolicyUrl: '',
-		}
+		},
 	}),
 	mutations: {
 		[CONFIG](state, config) {
diff --git a/src/store/modules/kanban.js b/src/store/modules/kanban.js
index d9e255fc6..168b506c1 100644
--- a/src/store/modules/kanban.js
+++ b/src/store/modules/kanban.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 
 import BucketService from '../../services/bucket'
-import {filterObject} from '../../helpers/filterObject'
+import {filterObject} from '@/helpers/filterObject'
 import {setLoading} from '../helper'
 
 /**
@@ -90,7 +90,7 @@ export default {
 					return
 				}
 			}
-		}
+		},
 	},
 	getters: {
 		getTaskById: state => id => {
diff --git a/src/store/modules/lists.js b/src/store/modules/lists.js
index 4d31f934a..1f72f5d6d 100644
--- a/src/store/modules/lists.js
+++ b/src/store/modules/lists.js
@@ -16,7 +16,7 @@ export default {
 	},
 	getters: {
 		getListById: state => id => {
-			if(typeof state[id] !== 'undefined') {
+			if (typeof state[id] !== 'undefined') {
 				return state[id]
 			}
 			return null
diff --git a/src/store/modules/namespaces.js b/src/store/modules/namespaces.js
index b9d7c696f..2248c8d3f 100644
--- a/src/store/modules/namespaces.js
+++ b/src/store/modules/namespaces.js
@@ -95,7 +95,7 @@ export default {
 		},
 		loadNamespacesIfFavoritesDontExist(ctx) {
 			// The first namespace should be the one holding all favorites
-			if(ctx.state.namespaces[0].id !== -2) {
+			if (ctx.state.namespaces[0].id !== -2) {
 				return ctx.dispatch('loadNamespaces')
 			}
 		},
diff --git a/src/styles/components/attachments.scss b/src/styles/components/attachments.scss
index f359f4453..ed422ee95 100644
--- a/src/styles/components/attachments.scss
+++ b/src/styles/components/attachments.scss
@@ -5,7 +5,7 @@
 
   .dropzone {
     position: fixed;
-    background: rgba(250,250,250,0.8);
+    background: rgba(250, 250, 250, 0.8);
     top: 0;
     left: 0;
     bottom: 0;
@@ -14,7 +14,7 @@
     text-align: center;
 
     &.hidden {
-      display:none;
+      display: none;
     }
 
     .drop-hint {
diff --git a/src/styles/components/base/card.scss b/src/styles/components/base/card.scss
index 33b41bc1e..61c947988 100644
--- a/src/styles/components/base/card.scss
+++ b/src/styles/components/base/card.scss
@@ -16,7 +16,7 @@
   }
 }
 
-.box,.card{
+.box, .card {
   border: $thickness solid $border;
   box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
 }
diff --git a/src/styles/components/base/multiselect.scss b/src/styles/components/base/multiselect.scss
index f081df0b3..2d36308ee 100644
--- a/src/styles/components/base/multiselect.scss
+++ b/src/styles/components/base/multiselect.scss
@@ -25,10 +25,12 @@ fieldset[disabled] .multiselect {
     border-width: 2px;
     box-shadow: 0 0 0 1px transparent;
   }
+
   &:before {
     animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
     animation-iteration-count: infinite;
   }
+
   &:after {
     animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
     animation-iteration-count: infinite;
@@ -58,9 +60,11 @@ fieldset[disabled] .multiselect {
   min-height: 40px;
   text-align: left;
   color: $text;
+
   * {
     box-sizing: border-box;
   }
+
   &:focus {
     outline: none;
   }
@@ -73,12 +77,14 @@ fieldset[disabled] .multiselect {
 
 .multiselect--active {
   z-index: 50;
+
   &:not(.multiselect--above) {
     .multiselect__current, .multiselect__input, .multiselect__tags {
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
   }
+
   .multiselect__select {
     transform: rotateZ(180deg);
   }
@@ -131,6 +137,7 @@ fieldset[disabled] .multiselect {
     border-color: $primary;
     outline: none;
   }
+
   padding-left: 5px;
   margin-bottom: 8px;
 }
@@ -184,14 +191,17 @@ fieldset[disabled] .multiselect {
   line-height: 22px;
   transition: all 0.2s ease;
   border-radius: 5px;
+
   &:after {
     content: "×";
     color: darken($multiselect-highlight, 20);
     font-size: 14px;
   }
+
   &:focus, &:hover {
     background: lighten($multiselect-highlight, 10);
   }
+
   &:focus:after, &:hover:after {
     color: $white;
   }
@@ -227,6 +237,7 @@ fieldset[disabled] .multiselect {
   text-align: center;
   cursor: pointer;
   transition: transform 0.2s ease;
+
   &:before {
     position: relative;
     right: 0;
@@ -305,6 +316,7 @@ fieldset[disabled] .multiselect {
   position: relative;
   cursor: pointer;
   white-space: nowrap;
+
   &:after {
     top: 0;
     right: 0;
@@ -320,6 +332,7 @@ fieldset[disabled] .multiselect {
   background: $multiselect-highlight;
   outline: none;
   color: $white;
+
   &:after {
     content: attr(data-select);
     background: $multiselect-highlight;
@@ -331,13 +344,16 @@ fieldset[disabled] .multiselect {
   background: darken($white, 10);
   color: $multiselect-dark;
   font-weight: bold;
+
   &:after {
     content: attr(data-selected);
     color: silver;
   }
+
   &.multiselect__option--highlight {
     background: $multiselect-highlight-negative;
     color: $white;
+
     &:after {
       background: $multiselect-highlight-negative;
       content: attr(data-deselect);
@@ -348,6 +364,7 @@ fieldset[disabled] .multiselect {
 
 .multiselect--disabled {
   pointer-events: none;
+
   .multiselect__current, .multiselect__select {
     background: $multiselect-disabled;
     color: darken($multiselect-disabled, 40);
@@ -364,9 +381,11 @@ fieldset[disabled] .multiselect {
 .multiselect__option--group {
   background: $multiselect-disabled;
   color: $multiselect-dark;
+
   &.multiselect__option--highlight {
     background: $multiselect-dark;
     color: $white;
+
     &:after {
       background: $multiselect-dark;
     }
@@ -380,6 +399,7 @@ fieldset[disabled] .multiselect {
 .multiselect__option--group-selected.multiselect__option--highlight {
   background: $multiselect-highlight-negative;
   color: $white;
+
   &:after {
     background: $multiselect-highlight-negative;
     content: attr(data-deselect);
@@ -406,24 +426,30 @@ fieldset[disabled] .multiselect {
   .multiselect {
     text-align: right;
   }
+
   .multiselect__select {
     right: auto;
     left: 1px;
   }
+
   .multiselect__tags {
     padding: 8px 8px 0px 40px;
   }
+
   .multiselect__content {
     text-align: right;
   }
+
   .multiselect__option:after {
     right: auto;
     left: 0;
   }
+
   .multiselect__clear {
     right: auto;
     left: 12px;
   }
+
   .multiselect__spinner {
     right: auto;
     left: 1px;
diff --git a/src/styles/components/base/scrollbars.scss b/src/styles/components/base/scrollbars.scss
index f81178ed3..671f36238 100644
--- a/src/styles/components/base/scrollbars.scss
+++ b/src/styles/components/base/scrollbars.scss
@@ -1,4 +1,3 @@
-
 // Chrome
 ::-webkit-scrollbar {
   width: $scrollbar-height;
@@ -25,7 +24,7 @@
 }
 
 // Firefox
-*{
+* {
   scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
   scrollbar-width: thin;
 }
diff --git a/src/styles/components/fullpage.scss b/src/styles/components/fullpage.scss
index 878d9a518..7cb10596e 100644
--- a/src/styles/components/fullpage.scss
+++ b/src/styles/components/fullpage.scss
@@ -1,4 +1,4 @@
-.fullpage{
+.fullpage {
   position: fixed;
   text-align: center;
   top: 0;
@@ -16,7 +16,7 @@
     padding: 20vw 10vw;
   }
 
-  input{
+  input {
     background: transparent;
     border: none;
     border-bottom: 3px solid darken($vikunja-blue, 10);
@@ -25,7 +25,7 @@
     font-size: 1.5em;
     border-radius: 0;
 
-    &::placeholder{
+    &::placeholder {
       color: $vikunja-light-text;
     }
   }
@@ -35,7 +35,7 @@
     margin-top: 4px;
   }
 
-  h3{
+  h3 {
     font-size: 1.5em;
   }
 
@@ -46,12 +46,12 @@
     color: $vikunja-light-text;
   }
 
-  .small{
+  .small {
     margin-top: 1em;
     font-size: 0.5em;
   }
 }
 
-.fullpage-overlay{
+.fullpage-overlay {
   z-index: 6 !important;
 }
\ No newline at end of file
diff --git a/src/styles/components/gantt.scss b/src/styles/components/gantt.scss
index 0532a5378..815ccb2d3 100644
--- a/src/styles/components/gantt.scss
+++ b/src/styles/components/gantt.scss
@@ -146,7 +146,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
           }
         }
 
-        .high-priority{
+        .high-priority {
           margin: 0 0 0 .5em;
           vertical-align: bottom;
         }
diff --git a/src/styles/components/labels.scss b/src/styles/components/labels.scss
index e43f1e2a2..9677084b4 100644
--- a/src/styles/components/labels.scss
+++ b/src/styles/components/labels.scss
@@ -1,13 +1,13 @@
 .labels-list {
-  a, a:hover{
+  a, a:hover {
     text-decoration: none;
   }
 
-  .tag{
+  .tag {
     margin: 0.5em;
     background: darken($background, 5);
 
-    &.disabled{
+    &.disabled {
       opacity: 0.7;
 
       &, a {
diff --git a/src/styles/components/migrator.scss b/src/styles/components/migrator.scss
index 3b21390d1..fbfbe8090 100644
--- a/src/styles/components/migrator.scss
+++ b/src/styles/components/migrator.scss
@@ -47,18 +47,41 @@
       animation: wave 2s ease infinite;
       margin-right: 5px;
 
-      &:nth-child(1){  animation-delay: 0; }
-      &:nth-child(2){  animation-delay: 100ms; }
-      &:nth-child(3){  animation-delay: 200ms; }
-      &:nth-child(4){  animation-delay: 300ms; }
-      &:nth-child(5){  animation-delay: 400ms; }
-      &:nth-child(6){  animation-delay: 500ms; }
-      &:nth-child(7){  animation-delay: 600ms; }
-      &:nth-child(8){  animation-delay: 700ms; }
+      &:nth-child(1) {
+        animation-delay: 0;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 100ms;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 200ms;
+      }
+
+      &:nth-child(4) {
+        animation-delay: 300ms;
+      }
+
+      &:nth-child(5) {
+        animation-delay: 400ms;
+      }
+
+      &:nth-child(6) {
+        animation-delay: 500ms;
+      }
+
+      &:nth-child(7) {
+        animation-delay: 600ms;
+      }
+
+      &:nth-child(8) {
+        animation-delay: 700ms;
+      }
     }
   }
 
-  @keyframes wave{
+  @keyframes wave {
     0%, 40%, 100% {
       transform: translate(0, 0);
       background-color: $primary;
diff --git a/src/styles/components/teams.scss b/src/styles/components/teams.scss
index c5dfc8aac..2cdafc118 100644
--- a/src/styles/components/teams.scss
+++ b/src/styles/components/teams.scss
@@ -1,25 +1,25 @@
-ul.teams{
+ul.teams {
   padding: 0;
   margin-left: 0;
   overflow: hidden;
 
-  li{
+  li {
     list-style: none;
     margin: 0;
     border-bottom: 1px solid $border;
 
-    a{
+    a {
       color: #363636;
       display: block;
       padding: 0.5rem 1rem;
 
-      &:hover{
+      &:hover {
         background: darken(#fff, 2%);
       }
     }
   }
 
-  li:last-child{
+  li:last-child {
     border-bottom: none;
   }
 }
\ No newline at end of file
diff --git a/src/styles/theme/fonts.scss b/src/styles/theme/fonts.scss
index 1be109ade..51bced9b9 100644
--- a/src/styles/theme/fonts.scss
+++ b/src/styles/theme/fonts.scss
@@ -2,120 +2,120 @@ $font-files-path: '../../public/fonts/';
 
 /* quicksand-300 - latin */
 @font-face {
-	font-family: 'Quicksand';
-	font-style: normal;
-	font-weight: 300;
-	font-display: swap;
-	src: url($font-files-path + 'quicksand-v7-latin-300.eot'); /* IE9 Compat Modes */
-	src: local('Quicksand Light'), local('Quicksand-Light'),
-	url($font-files-path + 'quicksand-v7-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url($font-files-path + 'quicksand-v7-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-	url($font-files-path + 'quicksand-v7-latin-300.woff') format('woff'), /* Modern Browsers */
-	url($font-files-path + 'quicksand-v7-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-	url($font-files-path + 'quicksand-v7-latin-300.svg#Quicksand') format('svg'); /* Legacy iOS */
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url($font-files-path + 'quicksand-v7-latin-300.eot'); /* IE9 Compat Modes */
+  src: local('Quicksand Light'), local('Quicksand-Light'),
+  url($font-files-path + 'quicksand-v7-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url($font-files-path + 'quicksand-v7-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
+  url($font-files-path + 'quicksand-v7-latin-300.woff') format('woff'), /* Modern Browsers */
+  url($font-files-path + 'quicksand-v7-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
+  url($font-files-path + 'quicksand-v7-latin-300.svg#Quicksand') format('svg'); /* Legacy iOS */
 }
 
 /* quicksand-regular - latin */
 @font-face {
-	font-family: 'Quicksand';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: url($font-files-path + 'quicksand-v7-latin-regular.eot'); /* IE9 Compat Modes */
-	src: local('Quicksand Regular'), local('Quicksand-Regular'),
-	url($font-files-path + 'quicksand-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url($font-files-path + 'quicksand-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-	url($font-files-path + 'quicksand-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
-	url($font-files-path + 'quicksand-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-	url($font-files-path + 'quicksand-v7-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url($font-files-path + 'quicksand-v7-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local('Quicksand Regular'), local('Quicksand-Regular'),
+  url($font-files-path + 'quicksand-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url($font-files-path + 'quicksand-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+  url($font-files-path + 'quicksand-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
+  url($font-files-path + 'quicksand-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+  url($font-files-path + 'quicksand-v7-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
 }
 
 /* quicksand-500 - latin */
 @font-face {
-	font-family: 'Quicksand';
-	font-style: normal;
-	font-weight: 500;
-	font-display: swap;
-	src: url($font-files-path + 'quicksand-v7-latin-500.eot'); /* IE9 Compat Modes */
-	src: local('Quicksand Medium'), local('Quicksand-Medium'),
-	url($font-files-path + 'quicksand-v7-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url($font-files-path + 'quicksand-v7-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
-	url($font-files-path + 'quicksand-v7-latin-500.woff') format('woff'), /* Modern Browsers */
-	url($font-files-path + 'quicksand-v7-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
-	url($font-files-path + 'quicksand-v7-latin-500.svg#Quicksand') format('svg'); /* Legacy iOS */
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url($font-files-path + 'quicksand-v7-latin-500.eot'); /* IE9 Compat Modes */
+  src: local('Quicksand Medium'), local('Quicksand-Medium'),
+  url($font-files-path + 'quicksand-v7-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url($font-files-path + 'quicksand-v7-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
+  url($font-files-path + 'quicksand-v7-latin-500.woff') format('woff'), /* Modern Browsers */
+  url($font-files-path + 'quicksand-v7-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
+  url($font-files-path + 'quicksand-v7-latin-500.svg#Quicksand') format('svg'); /* Legacy iOS */
 }
 
 /* quicksand-700 - latin */
 @font-face {
-	font-family: 'Quicksand';
-	font-style: normal;
-	font-weight: 700;
-	font-display: swap;
-	src: url($font-files-path + 'quicksand-v7-latin-700.eot'); /* IE9 Compat Modes */
-	src: local('Quicksand Bold'), local('Quicksand-Bold'),
-	url($font-files-path + 'quicksand-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url($font-files-path + 'quicksand-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-	url($font-files-path + 'quicksand-v7-latin-700.woff') format('woff'), /* Modern Browsers */
-	url($font-files-path + 'quicksand-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-	url($font-files-path + 'quicksand-v7-latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */
+  font-family: 'Quicksand';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url($font-files-path + 'quicksand-v7-latin-700.eot'); /* IE9 Compat Modes */
+  src: local('Quicksand Bold'), local('Quicksand-Bold'),
+  url($font-files-path + 'quicksand-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url($font-files-path + 'quicksand-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+  url($font-files-path + 'quicksand-v7-latin-700.woff') format('woff'), /* Modern Browsers */
+  url($font-files-path + 'quicksand-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+  url($font-files-path + 'quicksand-v7-latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */
 }
 
 /* open-sans-regular - latin */
 @font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: url($font-files-path + 'open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
-	src: local('Open Sans Regular'), local('OpenSans-Regular'),
-	url($font-files-path + 'open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url($font-files-path + 'open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-	url($font-files-path + 'open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
-	url($font-files-path + 'open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-	url($font-files-path + 'open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url($font-files-path + 'open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+  url($font-files-path + 'open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url($font-files-path + 'open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+  url($font-files-path + 'open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
+  url($font-files-path + 'open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+  url($font-files-path + 'open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
 }
 
 /* open-sans-italic - latin */
 @font-face {
-	font-family: 'Open Sans';
-	font-style: italic;
-	font-weight: 400;
-	font-display: swap;
-	src: url($font-files-path + 'open-sans-v15-latin-italic.eot'); /* IE9 Compat Modes */
-	src: local('Open Sans Italic'), local('OpenSans-Italic'),
-	url($font-files-path + 'open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url($font-files-path + 'open-sans-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-	url($font-files-path + 'open-sans-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
-	url($font-files-path + 'open-sans-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-	url($font-files-path + 'open-sans-v15-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url($font-files-path + 'open-sans-v15-latin-italic.eot'); /* IE9 Compat Modes */
+  src: local('Open Sans Italic'), local('OpenSans-Italic'),
+  url($font-files-path + 'open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url($font-files-path + 'open-sans-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
+  url($font-files-path + 'open-sans-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
+  url($font-files-path + 'open-sans-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
+  url($font-files-path + 'open-sans-v15-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
 }
 
 /* open-sans-700 - latin */
 @font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 700;
-	font-display: swap;
-	src: url($font-files-path + 'open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
-	src: local('Open Sans Bold'), local('OpenSans-Bold'),
-	url($font-files-path + 'open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url($font-files-path + 'open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-	url($font-files-path + 'open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
-	url($font-files-path + 'open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-	url($font-files-path + 'open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url($font-files-path + 'open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
+  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+  url($font-files-path + 'open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url($font-files-path + 'open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
+  url($font-files-path + 'open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
+  url($font-files-path + 'open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
+  url($font-files-path + 'open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
 }
 
 /* open-sans-700italic - latin */
 @font-face {
-	font-family: 'Open Sans';
-	font-style: italic;
-	font-weight: 700;
-	font-display: swap;
-	src: url($font-files-path + 'open-sans-v15-latin-700italic.eot'); /* IE9 Compat Modes */
-	src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
-	url($font-files-path + 'open-sans-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-	url($font-files-path + 'open-sans-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
-	url($font-files-path + 'open-sans-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */
-	url($font-files-path + 'open-sans-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
-	url($font-files-path + 'open-sans-v15-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url($font-files-path + 'open-sans-v15-latin-700italic.eot'); /* IE9 Compat Modes */
+  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
+  url($font-files-path + 'open-sans-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url($font-files-path + 'open-sans-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
+  url($font-files-path + 'open-sans-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */
+  url($font-files-path + 'open-sans-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
+  url($font-files-path + 'open-sans-v15-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
 }
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index bba5af911..6718ed19c 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -12,7 +12,7 @@
     box-shadow: 0.6em 0.6em 1em lighten($dark, 75);
   }
 
-  &.fullheight{
+  &.fullheight {
     padding-right: 7px;
     height: 100%;
   }
@@ -25,7 +25,7 @@
     box-shadow: 0.1em 0.1em 0.7em lighten($dark, 75) !important;
   }
 
-  &.icon-only{
+  &.icon-only {
     padding-left: 16px;
   }
 
@@ -58,7 +58,7 @@
     color: $white;
   }
 
-  &.noshadow{
+  &.noshadow {
     &,
     &.is-hovered,
     &:hover,
@@ -130,7 +130,7 @@
   }
 }
 
-.bigbuttons{
+.bigbuttons {
   margin-top: 0.5rem;
 }
 
@@ -152,7 +152,7 @@
   margin-bottom: 1rem;
 }
 
-.button-right{
+.button-right {
   float: right;
 }
 
@@ -161,7 +161,7 @@
 }
 
 // Contenteditable form
-.input.title{
+.input.title {
   font-size: 1.8rem;
   font-family: $vikunja-font;
   font-weight: 400 !important;
@@ -177,7 +177,7 @@
   }
 }
 
-h1, h2, h3{
+h1, h2, h3 {
   .input.title {
     height: auto;
   }
diff --git a/src/styles/theme/link-share.scss b/src/styles/theme/link-share.scss
index 936165883..3a01234cd 100644
--- a/src/styles/theme/link-share.scss
+++ b/src/styles/theme/link-share.scss
@@ -25,7 +25,7 @@
 
 .link-share-list {
   .field.has-addons {
-    .control:first-child{
+    .control:first-child {
       width: 100%;
     }
 
@@ -49,7 +49,7 @@
   overflow-y: auto
 }
 
-.link-share-container.has-background .container{
+.link-share-container.has-background .container {
   max-width: 100vw;
 
   .column {
diff --git a/src/styles/theme/loading.scss b/src/styles/theme/loading.scss
index d9d81dece..a3f4ec154 100644
--- a/src/styles/theme/loading.scss
+++ b/src/styles/theme/loading.scss
@@ -3,6 +3,7 @@
     position: relative;
     pointer-events: none;
     opacity: 0.5;
+
     &:after {
       @include loader;
       position: absolute;
@@ -15,9 +16,10 @@
   }
 }
 
-.spinner{
+.spinner {
   &.is-loading {
     pointer-events: none;
+
     &:after {
       @include loader;
       width: 2em;
diff --git a/src/styles/theme/notification.scss b/src/styles/theme/notification.scss
index 33b7a8430..ce0ea83ba 100644
--- a/src/styles/theme/notification.scss
+++ b/src/styles/theme/notification.scss
@@ -10,11 +10,11 @@
   }
 }
 
-.notifications{
+.notifications {
   left: 0.5em !important;
   bottom: 1em !important;
 
-  .notification-wrapper .notification{
+  .notification-wrapper .notification {
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
diff --git a/src/styles/theme/update-notification.scss b/src/styles/theme/update-notification.scss
index 873c8ac83..299e4e70f 100644
--- a/src/styles/theme/update-notification.scss
+++ b/src/styles/theme/update-notification.scss
@@ -19,7 +19,7 @@
     }
   }
 
-  @media screen and (max-width: $tablet){
+  @media screen and (max-width: $tablet) {
     & {
       position: fixed;
       left: 1em;
diff --git a/src/styles/utilities/animations.scss b/src/styles/utilities/animations.scss
index 82cb1ae40..26549d542 100644
--- a/src/styles/utilities/animations.scss
+++ b/src/styles/utilities/animations.scss
@@ -1,4 +1,3 @@
-
 @-webkit-keyframes bounce {
   from,
   20%,
diff --git a/src/styles/utilities/transitions.scss b/src/styles/utilities/transitions.scss
index 6e53d81be..5cd273e3c 100644
--- a/src/styles/utilities/transitions.scss
+++ b/src/styles/utilities/transitions.scss
@@ -1,6 +1,7 @@
 .fade-enter-active, .fade-leave-active {
   transition: opacity $transition-duration;
 }
+
 .fade-enter, .fade-leave-to {
   opacity: 0;
 }
@@ -8,6 +9,7 @@
 .width-enter-active, .width-leave-active {
   transition: width $transition-duration;
 }
+
 .width-enter, .width-leave-to {
   width: 0;
 }
\ No newline at end of file
diff --git a/src/version.json b/src/version.json
index 4ae76ef11..7159d1932 100644
--- a/src/version.json
+++ b/src/version.json
@@ -1,3 +1,3 @@
 {
-  "VERSION": "0.12"
+  "VERSION": "dev"
 }
\ No newline at end of file
diff --git a/src/views/404.vue b/src/views/404.vue
index 6ae0dc319..449f0edb5 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -6,10 +6,10 @@
 </template>
 
 <script>
-	export default {
-		name: '404',
-		mounted() {
-			this.setTitle('404')
-		},
-	}
+export default {
+	name: '404',
+	mounted() {
+		this.setTitle('404')
+	},
+}
 </script>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index e97c26227..dc24f637a 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="content has-text-centered">
-		<h2>Hi {{userInfo.username}}!</h2>
+		<h2>Hi {{ userInfo.username }}!</h2>
 		<template v-if="!hasTasks">
 			<p>Click on a list or namespace on the left to get started.</p>
 			<router-link
-					class="button is-primary is-right noshadow is-outlined"
-					:to="{name: 'migrate.start'}"
-					v-if="migratorsEnabled"
+				:to="{name: 'migrate.start'}"
+				class="button is-primary is-right noshadow is-outlined"
+				v-if="migratorsEnabled"
 			>
 				Import your data into Vikunja
 			</router-link>
@@ -16,26 +16,26 @@
 </template>
 
 <script>
-	import {mapState} from 'vuex'
-	import ShowTasks from './tasks/ShowTasks'
+import {mapState} from 'vuex'
+import ShowTasks from './tasks/ShowTasks'
 
-	export default {
-		name: 'Home',
-		components: {
-			ShowTasks,
-		},
-		data() {
-			return {
-				loading: false,
-				currentDate: new Date(),
-				tasks: []
-			}
-		},
-		computed: mapState({
-			migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
-			authenticated: state => state.auth.authenticated,
-			userInfo: state => state.auth.info,
-			hasTasks: state => state.hasTasks,
-		}),
-	}
+export default {
+	name: 'Home',
+	components: {
+		ShowTasks,
+	},
+	data() {
+		return {
+			loading: false,
+			currentDate: new Date(),
+			tasks: [],
+		}
+	},
+	computed: mapState({
+		migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
+		authenticated: state => state.auth.authenticated,
+		userInfo: state => state.auth.info,
+		hasTasks: state => state.hasTasks,
+	}),
+}
 </script>
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index 44f2529f9..eb79464df 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container content" :class="{ 'is-loading': labelService.loading}">
+	<div :class="{ 'is-loading': labelService.loading}" class="loader-container content">
 		<h1>Manage labels</h1>
 		<p>
 			Click on a label to edit it.
@@ -9,23 +9,23 @@
 		<div class="columns">
 			<div class="labels-list column">
 				<span
-						v-for="l in labels" :key="l.id"
-						class="tag"
-						:class="{'disabled': userInfo.id !== l.createdBy.id}"
-						:style="{'background': l.hexColor, 'color': l.textColor}"
+					:class="{'disabled': userInfo.id !== l.createdBy.id}" :key="l.id"
+					:style="{'background': l.hexColor, 'color': l.textColor}"
+					class="tag"
+					v-for="l in labels"
 				>
 					<span
-							v-if="userInfo.id !== l.createdBy.id"
-							v-tooltip.bottom="'You are not allowed to edit this label because you dont own it.'">
+						v-if="userInfo.id !== l.createdBy.id"
+						v-tooltip.bottom="'You are not allowed to edit this label because you dont own it.'">
 						{{ l.title }}
 					</span>
 					<a
-							@click="editLabel(l)"
-							:style="{'color': l.textColor}"
-							v-else>
+						:style="{'color': l.textColor}"
+						@click="editLabel(l)"
+						v-else>
 						{{ l.title }}
 					</a>
-					<a class="delete is-small" @click="deleteLabel(l)" v-if="userInfo.id === l.createdBy.id"></a>
+					<a @click="deleteLabel(l)" class="delete is-small" v-if="userInfo.id === l.createdBy.id"></a>
 				</span>
 			</div>
 			<div class="column is-4" v-if="isLabelEdit">
@@ -34,7 +34,7 @@
 						<span class="card-header-title">
 							Edit Label
 						</span>
-						<a class="card-header-icon" @click="isLabelEdit = false">
+						<a @click="isLabelEdit = false" class="card-header-icon">
 							<span class="icon">
 								<icon icon="times"/>
 							</span>
@@ -46,20 +46,20 @@
 								<label class="label">Title</label>
 								<div class="control">
 									<input
-											class="input"
-											type="text"
-											placeholder="Label title"
-											v-model="labelEditLabel.title"/>
+										class="input"
+										placeholder="Label title"
+										type="text"
+										v-model="labelEditLabel.title"/>
 								</div>
 							</div>
 							<div class="field">
 								<label class="label">Description</label>
 								<div class="control">
 									<editor
-											placeholder="Label description"
-											v-model="labelEditLabel.description"
-											:preview-is-default="false"
-											v-if="editorActive"
+										:preview-is-default="false"
+										placeholder="Label description"
+										v-if="editorActive"
+										v-model="labelEditLabel.description"
 									/>
 								</div>
 							</div>
@@ -71,15 +71,15 @@
 							</div>
 							<div class="field has-addons">
 								<div class="control is-expanded">
-									<button type="submit" class="button is-fullwidth is-primary"
-											:class="{ 'is-loading': labelService.loading}">
+									<button :class="{ 'is-loading': labelService.loading}" class="button is-fullwidth is-primary"
+											type="submit">
 										Save
 									</button>
 								</div>
 								<div class="control">
 									<a
-											class="button has-icon is-danger"
-											@click="() => {deleteLabel(labelEditLabel);isLabelEdit = false}">
+										@click="() => {deleteLabel(labelEditLabel);isLabelEdit = false}"
+										class="button has-icon is-danger">
 										<span class="icon">
 											<icon icon="trash-alt"/>
 										</span>
@@ -95,116 +95,116 @@
 </template>
 
 <script>
-	import {mapState} from 'vuex'
+import {mapState} from 'vuex'
 
-	import LabelService from '../../services/label'
-	import LabelModel from '../../models/label'
-	import ColorPicker from '../../components/input/colorPicker'
-	import LoadingComponent from '../../components/misc/loading'
-	import ErrorComponent from '../../components/misc/error'
+import LabelService from '../../services/label'
+import LabelModel from '../../models/label'
+import ColorPicker from '../../components/input/colorPicker'
+import LoadingComponent from '../../components/misc/loading'
+import ErrorComponent from '../../components/misc/error'
 
-	export default {
-		name: 'ListLabels',
-		components: {
-			ColorPicker,
-			editor: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
-		},
-		data() {
-			return {
-				labelService: LabelService,
-				labels: [],
-				labelEditLabel: LabelModel,
-				isLabelEdit: false,
-				editorActive: false,
-			}
-		},
-		created() {
-			this.labelService = new LabelService()
-			this.labelEditLabel = new LabelModel()
-			this.loadLabels()
-		},
-		mounted() {
-			this.setTitle('Labels')
-		},
-		computed: mapState({
-			userInfo: state => state.auth.info
+export default {
+	name: 'ListLabels',
+	components: {
+		ColorPicker,
+		editor: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
 		}),
-		methods: {
-			loadLabels() {
-				const getAllLabels = (page = 1) => {
-					return this.labelService.getAll({}, {}, page)
-						.then(labels => {
-							if (page < this.labelService.totalPages) {
-								return getAllLabels(page + 1)
-									.then(nextLabels => {
-										return labels.concat(nextLabels)
-									})
-							} else {
-								return labels
-							}
-						})
-						.catch(e => {
-							return Promise.reject(e)
-						})
-				}
-
-				getAllLabels()
-					.then(r => {
-						this.$set(this, 'labels', r)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			deleteLabel(label) {
-				this.labelService.delete(label)
-					.then(() => {
-						// Remove the label from the list
-						for (const l in this.labels) {
-							if (this.labels[l].id === label.id) {
-								this.labels.splice(l, 1)
-							}
-						}
-						this.success({message: 'The label was successfully deleted.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			editLabelSubmit() {
-				this.labelService.update(this.labelEditLabel)
-					.then(r => {
-						for (const l in this.labels) {
-							if (this.labels[l].id === r.id) {
-								this.$set(this.labels, l, r)
-							}
-						}
-						this.success({message: 'The label was successfully updated.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			editLabel(label) {
-				if (label.createdBy.id !== this.userInfo.id) {
-					return
-				}
-				this.labelEditLabel = label
-				this.isLabelEdit = true
-
-				// This makes the editor trigger its mounted function again which makes it forget every input
-				// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
-				// which made it impossible to detect change from the outside. Therefore the component would
-				// not update if new content from the outside was made available.
-				// See https://github.com/NikulinIlya/vue-easymde/issues/3
-				this.editorActive = false
-				this.$nextTick(() => this.editorActive = true)
-			}
+	},
+	data() {
+		return {
+			labelService: LabelService,
+			labels: [],
+			labelEditLabel: LabelModel,
+			isLabelEdit: false,
+			editorActive: false,
 		}
-	}
+	},
+	created() {
+		this.labelService = new LabelService()
+		this.labelEditLabel = new LabelModel()
+		this.loadLabels()
+	},
+	mounted() {
+		this.setTitle('Labels')
+	},
+	computed: mapState({
+		userInfo: state => state.auth.info,
+	}),
+	methods: {
+		loadLabels() {
+			const getAllLabels = (page = 1) => {
+				return this.labelService.getAll({}, {}, page)
+					.then(labels => {
+						if (page < this.labelService.totalPages) {
+							return getAllLabels(page + 1)
+								.then(nextLabels => {
+									return labels.concat(nextLabels)
+								})
+						} else {
+							return labels
+						}
+					})
+					.catch(e => {
+						return Promise.reject(e)
+					})
+			}
+
+			getAllLabels()
+				.then(r => {
+					this.$set(this, 'labels', r)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		deleteLabel(label) {
+			this.labelService.delete(label)
+				.then(() => {
+					// Remove the label from the list
+					for (const l in this.labels) {
+						if (this.labels[l].id === label.id) {
+							this.labels.splice(l, 1)
+						}
+					}
+					this.success({message: 'The label was successfully deleted.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		editLabelSubmit() {
+			this.labelService.update(this.labelEditLabel)
+				.then(r => {
+					for (const l in this.labels) {
+						if (this.labels[l].id === r.id) {
+							this.$set(this.labels, l, r)
+						}
+					}
+					this.success({message: 'The label was successfully updated.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		editLabel(label) {
+			if (label.createdBy.id !== this.userInfo.id) {
+				return
+			}
+			this.labelEditLabel = label
+			this.isLabelEdit = true
+
+			// This makes the editor trigger its mounted function again which makes it forget every input
+			// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
+			// which made it impossible to detect change from the outside. Therefore the component would
+			// not update if new content from the outside was made available.
+			// See https://github.com/NikulinIlya/vue-easymde/issues/3
+			this.editorActive = false
+			this.$nextTick(() => this.editorActive = true)
+		},
+	},
+}
 </script>
diff --git a/src/views/list/EditList.vue b/src/views/list/EditList.vue
index 15efe4f53..fff00d0f7 100644
--- a/src/views/list/EditList.vue
+++ b/src/views/list/EditList.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container edit-list is-max-width-desktop" :class="{ 'is-loading': listService.loading}">
+	<div :class="{ 'is-loading': listService.loading}" class="loader-container edit-list is-max-width-desktop">
 		<div class="notification is-warning" v-if="list.isArchived">
 			This list is archived.
 			It is not possible to create new or edit tasks or it.
@@ -17,47 +17,47 @@
 							<label class="label" for="listtext">List Name</label>
 							<div class="control">
 								<input
-										v-focus
-										:class="{ 'disabled': listService.loading}"
-										:disabled="listService.loading"
-										class="input"
-										type="text"
-										id="listtext"
-										placeholder="The list title goes here..."
-										@keyup.enter="submit"
-										v-model="list.title"/>
+									:class="{ 'disabled': listService.loading}"
+									:disabled="listService.loading"
+									@keyup.enter="submit"
+									class="input"
+									id="listtext"
+									placeholder="The list title goes here..."
+									type="text"
+									v-focus
+									v-model="list.title"/>
 							</div>
 						</div>
 						<div class="field">
 							<label
-									class="label"
-									for="listtext"
-									v-tooltip="'The list identifier can be used to uniquely identify a task across lists. You can set it to empty to disable it.'">
+								class="label"
+								for="listtext"
+								v-tooltip="'The list identifier can be used to uniquely identify a task across lists. You can set it to empty to disable it.'">
 								List Identifier
 							</label>
 							<div class="control">
 								<input
-										v-focus
-										:class="{ 'disabled': listService.loading}"
-										:disabled="listService.loading"
-										class="input"
-										type="text"
-										id="listtext"
-										placeholder="The list identifier goes here..."
-										@keyup.enter="submit"
-										v-model="list.identifier"/>
+									:class="{ 'disabled': listService.loading}"
+									:disabled="listService.loading"
+									@keyup.enter="submit"
+									class="input"
+									id="listtext"
+									placeholder="The list identifier goes here..."
+									type="text"
+									v-focus
+									v-model="list.identifier"/>
 							</div>
 						</div>
 						<div class="field">
 							<label class="label" for="listdescription">Description</label>
 							<div class="control">
 								<editor
-										:class="{ 'disabled': listService.loading}"
-										:disabled="listService.loading"
-										placeholder="The lists description goes here..."
-										id="listdescription"
-										v-model="list.description"
-										:preview-is-default="false"
+									:class="{ 'disabled': listService.loading}"
+									:disabled="listService.loading"
+									:preview-is-default="false"
+									id="listdescription"
+									placeholder="The lists description goes here..."
+									v-model="list.description"
 								/>
 							</div>
 						</div>
@@ -65,8 +65,8 @@
 							<label class="label" for="isArchivedCheck">Is Archived</label>
 							<div class="control">
 								<fancycheckbox
-										v-model="list.isArchived"
-										v-tooltip="'If a list is archived, you cannot create new tasks or edit the list or existing tasks.'">
+									v-model="list.isArchived"
+									v-tooltip="'If a list is archived, you cannot create new tasks or edit the list or existing tasks.'">
 									This list is archived
 								</fancycheckbox>
 							</div>
@@ -81,14 +81,14 @@
 
 					<div class="columns bigbuttons">
 						<div class="column">
-							<button @click="submit()" class="button is-primary is-fullwidth"
-									:class="{ 'is-loading': listService.loading}">
+							<button :class="{ 'is-loading': listService.loading}" @click="submit()"
+									class="button is-primary is-fullwidth">
 								Save
 							</button>
 						</div>
 						<div class="column is-1">
-							<button @click="showDeleteModal = true" class="button is-danger is-fullwidth"
-									:class="{ 'is-loading': listService.loading}">
+							<button :class="{ 'is-loading': listService.loading}" @click="showDeleteModal = true"
+									class="button is-danger is-fullwidth">
 								<span class="icon is-small">
 									<icon icon="trash-alt"/>
 								</span>
@@ -114,10 +114,10 @@
 						</p>
 						<p class="control">
 							<button
-									type="submit"
-									class="button is-success"
-									@click="duplicateList"
-									:class="{'is-loading': listDuplicateService.loading}">
+								:class="{'is-loading': listDuplicateService.loading}"
+								@click="duplicateList"
+								class="button is-success"
+								type="submit">
 								<span class="icon is-small">
 									<icon icon="plus"/>
 								</span>
@@ -132,24 +132,24 @@
 		<background :list-id="$route.params.id"/>
 
 		<component
-				:is="manageUsersComponent"
-				:id="list.id"
-				type="list"
-				shareType="user"
-				:userIsAdmin="userIsAdmin"/>
+			:id="list.id"
+			:is="manageUsersComponent"
+			:userIsAdmin="userIsAdmin"
+			shareType="user"
+			type="list"/>
 		<component
-				:is="manageTeamsComponent"
-				:id="list.id"
-				type="list"
-				shareType="team"
-				:userIsAdmin="userIsAdmin"/>
+			:id="list.id"
+			:is="manageTeamsComponent"
+			:userIsAdmin="userIsAdmin"
+			shareType="team"
+			type="list"/>
 
 		<link-sharing :list-id="$route.params.id" v-if="linkSharingEnabled"/>
 
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="deleteList()">
+			@close="showDeleteModal = false"
+			@submit="deleteList()"
+			v-if="showDeleteModal">
 			<span slot="header">Delete the list</span>
 			<p slot="text">Are you sure you want to delete this list and all of its contents?
 				<br/>This includes all tasks and <b>CANNOT BE UNDONE!</b></p>
@@ -158,123 +158,123 @@
 </template>
 
 <script>
-	import router from '../../router'
-	import manageSharing from '../../components/sharing/userTeam'
-	import LinkSharing from '../../components/sharing/linkSharing'
+import router from '../../router'
+import manageSharing from '../../components/sharing/userTeam'
+import LinkSharing from '../../components/sharing/linkSharing'
 
-	import ListModel from '../../models/list'
-	import ListService from '../../services/list'
-	import Fancycheckbox from '../../components/input/fancycheckbox'
-	import Background from '../../components/list/partials/background-settings'
-	import {CURRENT_LIST} from '../../store/mutation-types'
-	import ColorPicker from '../../components/input/colorPicker'
-	import NamespaceSearch from '../../components/namespace/namespace-search'
-	import ListDuplicateService from '../../services/listDuplicateService'
-	import ListDuplicateModel from '../../models/listDuplicateModel'
-	import LoadingComponent from '../../components/misc/loading'
-	import ErrorComponent from '../../components/misc/error'
+import ListModel from '../../models/list'
+import ListService from '../../services/list'
+import Fancycheckbox from '../../components/input/fancycheckbox'
+import Background from '../../components/list/partials/background-settings'
+import {CURRENT_LIST} from '@/store/mutation-types'
+import ColorPicker from '../../components/input/colorPicker'
+import NamespaceSearch from '../../components/namespace/namespace-search'
+import ListDuplicateService from '../../services/listDuplicateService'
+import ListDuplicateModel from '../../models/listDuplicateModel'
+import LoadingComponent from '../../components/misc/loading'
+import ErrorComponent from '../../components/misc/error'
 
-	export default {
-		name: 'EditList',
-		data() {
-			return {
-				list: ListModel,
-				listService: ListService,
+export default {
+	name: 'EditList',
+	data() {
+		return {
+			list: ListModel,
+			listService: ListService,
 
-				showDeleteModal: false,
+			showDeleteModal: false,
 
-				manageUsersComponent: '',
-				manageTeamsComponent: '',
+			manageUsersComponent: '',
+			manageTeamsComponent: '',
 
-				listDuplicateService: ListDuplicateService,
-				selectedNamespace: null,
-			}
-		},
-		components: {
-			NamespaceSearch,
-			ColorPicker,
-			Background,
-			Fancycheckbox,
-			LinkSharing,
-			manageSharing,
-			editor: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
-		},
-		created() {
-			this.listService = new ListService()
-			this.listDuplicateService = new ListDuplicateService()
-			this.loadList()
-		},
-		watch: {
-			// call again the method if the route changes
-			'$route': 'loadList'
-		},
-		computed: {
-			linkSharingEnabled() {
-				return this.$store.state.config.linkSharingEnabled
-			},
-			userIsAdmin() {
-				return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
-			},
-		},
-		methods: {
-			loadList() {
-				let list = new ListModel({id: this.$route.params.id})
-				this.listService.get(list)
-					.then(r => {
-						this.$set(this, 'list', r)
-						this.$store.commit(CURRENT_LIST, r)
-						// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-						this.manageTeamsComponent = 'manageSharing'
-						this.manageUsersComponent = 'manageSharing'
-						this.setTitle(`Edit ${this.list.title}`)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			submit() {
-				this.listService.update(this.list)
-					.then(r => {
-						this.$store.commit('namespaces/setListInNamespaceById', r)
-						this.success({message: 'The list was successfully updated.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			deleteList() {
-				this.listService.delete(this.list)
-					.then(() => {
-						this.success({message: 'The list was successfully deleted.'}, this)
-						router.push({name: 'home'})
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			selectNamespace(namespace) {
-				this.selectedNamespace = namespace
-			},
-			duplicateList() {
-				const listDuplicate = new ListDuplicateModel({
-					listId: this.list.id,
-					namespaceId: this.selectedNamespace.id,
-				})
-				this.listDuplicateService.create(listDuplicate)
-					.then(r => {
-						this.$store.commit('namespaces/addListToNamespace', r.list)
-						this.success({message: 'The list was successfully duplicated.'}, this)
-						router.push({name: 'list.index', params: {listId: r.list.id}})
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
+			listDuplicateService: ListDuplicateService,
+			selectedNamespace: null,
 		}
-	}
+	},
+	components: {
+		NamespaceSearch,
+		ColorPicker,
+		Background,
+		Fancycheckbox,
+		LinkSharing,
+		manageSharing,
+		editor: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	created() {
+		this.listService = new ListService()
+		this.listDuplicateService = new ListDuplicateService()
+		this.loadList()
+	},
+	watch: {
+		// call again the method if the route changes
+		'$route': 'loadList',
+	},
+	computed: {
+		linkSharingEnabled() {
+			return this.$store.state.config.linkSharingEnabled
+		},
+		userIsAdmin() {
+			return this.list.owner && this.list.owner.id === this.$store.state.auth.info.id
+		},
+	},
+	methods: {
+		loadList() {
+			let list = new ListModel({id: this.$route.params.id})
+			this.listService.get(list)
+				.then(r => {
+					this.$set(this, 'list', r)
+					this.$store.commit(CURRENT_LIST, r)
+					// This will trigger the dynamic loading of components once we actually have all the data to pass to them
+					this.manageTeamsComponent = 'manageSharing'
+					this.manageUsersComponent = 'manageSharing'
+					this.setTitle(`Edit ${this.list.title}`)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		submit() {
+			this.listService.update(this.list)
+				.then(r => {
+					this.$store.commit('namespaces/setListInNamespaceById', r)
+					this.success({message: 'The list was successfully updated.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		deleteList() {
+			this.listService.delete(this.list)
+				.then(() => {
+					this.success({message: 'The list was successfully deleted.'}, this)
+					router.push({name: 'home'})
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		selectNamespace(namespace) {
+			this.selectedNamespace = namespace
+		},
+		duplicateList() {
+			const listDuplicate = new ListDuplicateModel({
+				listId: this.list.id,
+				namespaceId: this.selectedNamespace.id,
+			})
+			this.listDuplicateService.create(listDuplicate)
+				.then(r => {
+					this.$store.commit('namespaces/addListToNamespace', r.list)
+					this.success({message: 'The list was successfully duplicated.'}, this)
+					router.push({name: 'list.index', params: {listId: r.list.id}})
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
 </script>
diff --git a/src/views/list/NewList.vue b/src/views/list/NewList.vue
index c7430bd14..3a132f4ab 100644
--- a/src/views/list/NewList.vue
+++ b/src/views/list/NewList.vue
@@ -1,23 +1,24 @@
 <template>
 	<div class="fullpage">
-		<a class="close" @click="back()">
+		<a @click="back()" class="close">
 			<icon :icon="['far', 'times-circle']">
 			</icon>
 		</a>
 		<h3>Create a new list</h3>
 		<div class="field is-grouped">
-			<p class="control is-expanded" :class="{ 'is-loading': listService.loading}">
-				<input v-focus
-					class="input"
+			<p :class="{ 'is-loading': listService.loading}" class="control is-expanded">
+				<input
 					:class="{ 'disabled': listService.loading}"
-					v-model="list.title"
-					type="text"
-					placeholder="The list's name goes here..."
+					@keyup.enter="newList()"
 					@keyup.esc="back()"
-					@keyup.enter="newList()"/>
+					class="input"
+					placeholder="The list's name goes here..."
+					type="text"
+					v-focus
+					v-model="list.title"/>
 			</p>
 			<p class="control">
-				<button class="button is-success noshadow" @click="newList()" :disabled="list.title === ''">
+				<button :disabled="list.title === ''" @click="newList()" class="button is-success noshadow">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
@@ -32,51 +33,51 @@
 </template>
 
 <script>
-	import router from '../../router'
-	import ListService from '../../services/list'
-	import ListModel from '../../models/list'
-	import {IS_FULLPAGE} from '../../store/mutation-types'
+import router from '../../router'
+import ListService from '../../services/list'
+import ListModel from '../../models/list'
+import {IS_FULLPAGE} from '@/store/mutation-types'
 
-	export default {
-		name: "NewList",
-		data() {
-			return {
-				showError: false,
-				list: ListModel,
-				listService: ListService,
-			}
-		},
-		created() {
-			this.list = new ListModel()
-			this.listService = new ListService()
-			this.$store.commit(IS_FULLPAGE, true)
-		},
-		mounted() {
-			this.setTitle('Create a new list')
-		},
-		methods: {
-			newList() {
-				if (this.list.title === '') {
-					this.showError = true
-					return
-				}
-				this.showError = false
-
-				this.list.namespaceId = this.$route.params.id
-				this.listService.create(this.list)
-					.then(response => {
-						response.namespaceId = this.list.namespaceId
-						this.$store.commit('namespaces/addListToNamespace', response)
-						this.success({message: 'The list was successfully created.'}, this)
-						router.push({name: 'list.index', params: {listId: response.id}})
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			back() {
-				router.go(-1)
-			},
+export default {
+	name: 'NewList',
+	data() {
+		return {
+			showError: false,
+			list: ListModel,
+			listService: ListService,
 		}
-	}
+	},
+	created() {
+		this.list = new ListModel()
+		this.listService = new ListService()
+		this.$store.commit(IS_FULLPAGE, true)
+	},
+	mounted() {
+		this.setTitle('Create a new list')
+	},
+	methods: {
+		newList() {
+			if (this.list.title === '') {
+				this.showError = true
+				return
+			}
+			this.showError = false
+
+			this.list.namespaceId = this.$route.params.id
+			this.listService.create(this.list)
+				.then(response => {
+					response.namespaceId = this.list.namespaceId
+					this.$store.commit('namespaces/addListToNamespace', response)
+					this.success({message: 'The list was successfully created.'}, this)
+					router.push({name: 'list.index', params: {listId: response.id}})
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		back() {
+			router.go(-1)
+		},
+	},
+}
 </script>
\ No newline at end of file
diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue
index 8f74730e0..8179ea206 100644
--- a/src/views/list/ShowList.vue
+++ b/src/views/list/ShowList.vue
@@ -1,27 +1,27 @@
 <template>
 	<div
-			class="loader-container"
-			:class="{ 'is-loading': listService.loading}"
+		:class="{ 'is-loading': listService.loading}"
+		class="loader-container"
 	>
 		<div class="switch-view">
 			<router-link
-					:to="{ name: 'list.list',   params: { listId: listId } }"
-					:class="{'is-active': $route.name === 'list.list'}">
+				:class="{'is-active': $route.name === 'list.list'}"
+				:to="{ name: 'list.list',   params: { listId: listId } }">
 				List
 			</router-link>
 			<router-link
-					:to="{ name: 'list.gantt',  params: { listId: listId } }"
-					:class="{'is-active': $route.name === 'list.gantt'}">
+				:class="{'is-active': $route.name === 'list.gantt'}"
+				:to="{ name: 'list.gantt',  params: { listId: listId } }">
 				Gantt
 			</router-link>
 			<router-link
-					:to="{ name: 'list.table',  params: { listId: listId } }"
-					:class="{'is-active': $route.name === 'list.table'}">
+				:class="{'is-active': $route.name === 'list.table'}"
+				:to="{ name: 'list.table',  params: { listId: listId } }">
 				Table
 			</router-link>
 			<router-link
-					:to="{ name: 'list.kanban', params: { listId: listId } }"
-					:class="{'is-active': $route.name === 'list.kanban'}">
+				:class="{'is-active': $route.name === 'list.kanban'}"
+				:to="{ name: 'list.kanban', params: { listId: listId } }">
 				Kanban
 			</router-link>
 		</div>
@@ -35,107 +35,110 @@
 </template>
 
 <script>
-	import router from '../../router'
+import router from '../../router'
 
-	import ListModel from '../../models/list'
-	import ListService from '../../services/list'
-	import {CURRENT_LIST} from '../../store/mutation-types'
-	import {getListView} from '../../helpers/saveListView'
+import ListModel from '../../models/list'
+import ListService from '../../services/list'
+import {CURRENT_LIST} from '@/store/mutation-types'
+import {getListView} from '@/helpers/saveListView'
 
-	export default {
-		data() {
-			return {
-				listService: ListService,
-				list: ListModel,
-				listLoaded: 0,
-			}
-		},
-		created() {
-			this.listService = new ListService()
-			this.list = new ListModel()
-		},
-		mounted() {
-			this.loadList()
-		},
-		watch: {
-			// call again the method if the route changes
-			'$route.path': 'loadList',
-		},
-		computed: {
-			// Computed property to let "listId" always have a value
-			listId() {
-				return typeof this.$route.params.listId === 'undefined' ? 0 : this.$route.params.listId
-			},
-			background() {
-				return this.$store.state.background
-			},
-			currentList() {
-				return typeof this.$store.state.currentList === 'undefined' ? {id: 0, title: ''} : this.$store.state.currentList
-			},
-		},
-		methods: {
-			replaceListView() {
-				const savedListView = getListView(this.$route.params.listId)
-				router.replace({name: savedListView, params: {id: this.$route.params.listId}})
-				console.debug('Replaced list view with ', savedListView)
-				return
-			},
-			loadList() {
-				this.setTitle(this.currentList.title)
-
-				// This invalidates the loaded list at the kanban board which lets it reload its content when
-				// switched to it. This ensures updates done to tasks in the gantt or list views are consistently
-				// shown in all views while preventing reloads when closing a task popup.
-				// We don't do this for the table view because that does not change tasks.
-				if (
-					this.$route.name === 'list.list' ||
-					this.$route.name === 'list.gantt'
-				) {
-					this.$store.commit('kanban/setListId', 0)
-				}
-
-				// When clicking again on a list in the menu, there would be no list view selected which means no list
-				// at all. Users will then have to click on the list view menu again which is quite confusing.
-				if (this.$route.name === 'list.index') {
-					return this.replaceListView()
-				}
-
-				// Don't load the list if we either already loaded it or aren't dealing with a list at all currently
-				if (
-					this.$route.params.listId === this.listLoaded ||
-					typeof this.$route.params.listId === 'undefined' ||
-					this.$route.params.listId === this.currentList.id ||
-					parseInt(this.$route.params.listId) === this.currentList.id
-				) {
-					return
-				}
-
-				// Redirect the user to list view by default
-				if (
-					this.$route.name !== 'list.list' &&
-					this.$route.name !== 'list.gantt' &&
-					this.$route.name !== 'list.table' &&
-					this.$route.name !== 'list.kanban'
-				) {
-					return this.replaceListView()
-				}
-
-				console.debug(`Loading list, $route.name = ${this.$route.name}, $route.params =`, this.$route.params, `, listLoaded = ${this.listLoaded}, currentList = `, this.currentList)
-
-				// We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux.
-				let list = new ListModel({id: this.$route.params.listId})
-				this.listService.get(list)
-					.then(r => {
-						this.$set(this, 'list', r)
-						this.$store.commit(CURRENT_LIST, r)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.listLoaded = this.$route.params.listId
-					})
-			},
+export default {
+	data() {
+		return {
+			listService: ListService,
+			list: ListModel,
+			listLoaded: 0,
 		}
-	}
+	},
+	created() {
+		this.listService = new ListService()
+		this.list = new ListModel()
+	},
+	mounted() {
+		this.loadList()
+	},
+	watch: {
+		// call again the method if the route changes
+		'$route.path': 'loadList',
+	},
+	computed: {
+		// Computed property to let "listId" always have a value
+		listId() {
+			return typeof this.$route.params.listId === 'undefined' ? 0 : this.$route.params.listId
+		},
+		background() {
+			return this.$store.state.background
+		},
+		currentList() {
+			return typeof this.$store.state.currentList === 'undefined' ? {
+				id: 0,
+				title: '',
+			} : this.$store.state.currentList
+		},
+	},
+	methods: {
+		replaceListView() {
+			const savedListView = getListView(this.$route.params.listId)
+			router.replace({name: savedListView, params: {id: this.$route.params.listId}})
+			console.debug('Replaced list view with ', savedListView)
+			return
+		},
+		loadList() {
+			this.setTitle(this.currentList.title)
+
+			// This invalidates the loaded list at the kanban board which lets it reload its content when
+			// switched to it. This ensures updates done to tasks in the gantt or list views are consistently
+			// shown in all views while preventing reloads when closing a task popup.
+			// We don't do this for the table view because that does not change tasks.
+			if (
+				this.$route.name === 'list.list' ||
+				this.$route.name === 'list.gantt'
+			) {
+				this.$store.commit('kanban/setListId', 0)
+			}
+
+			// When clicking again on a list in the menu, there would be no list view selected which means no list
+			// at all. Users will then have to click on the list view menu again which is quite confusing.
+			if (this.$route.name === 'list.index') {
+				return this.replaceListView()
+			}
+
+			// Don't load the list if we either already loaded it or aren't dealing with a list at all currently
+			if (
+				this.$route.params.listId === this.listLoaded ||
+				typeof this.$route.params.listId === 'undefined' ||
+				this.$route.params.listId === this.currentList.id ||
+				parseInt(this.$route.params.listId) === this.currentList.id
+			) {
+				return
+			}
+
+			// Redirect the user to list view by default
+			if (
+				this.$route.name !== 'list.list' &&
+				this.$route.name !== 'list.gantt' &&
+				this.$route.name !== 'list.table' &&
+				this.$route.name !== 'list.kanban'
+			) {
+				return this.replaceListView()
+			}
+
+			console.debug(`Loading list, $route.name = ${this.$route.name}, $route.params =`, this.$route.params, `, listLoaded = ${this.listLoaded}, currentList = `, this.currentList)
+
+			// We create an extra list object instead of creating it in this.list because that would trigger a ui update which would result in bad ux.
+			let list = new ListModel({id: this.$route.params.listId})
+			this.listService.get(list)
+				.then(r => {
+					this.$set(this, 'list', r)
+					this.$store.commit(CURRENT_LIST, r)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.listLoaded = this.$route.params.listId
+				})
+		},
+	},
+}
 </script>
\ No newline at end of file
diff --git a/src/views/list/views/Gantt.vue b/src/views/list/views/Gantt.vue
index 0b12c1c42..38e8c9380 100644
--- a/src/views/list/views/Gantt.vue
+++ b/src/views/list/views/Gantt.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="gantt-chart-container">
 		<div class="gantt-options">
-			<fancycheckbox v-model="showTaskswithoutDates" class="is-block">
+			<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
 				Show tasks which don't have dates set
 			</fancycheckbox>
 			<div class="range-picker">
@@ -21,11 +21,11 @@
 					<label class="label" for="fromDate">From</label>
 					<div class="control">
 						<flat-pickr
-							class="input"
-							v-model="dateFrom"
 							:config="flatPickerConfig"
+							class="input"
 							id="fromDate"
 							placeholder="From"
+							v-model="dateFrom"
 						/>
 					</div>
 				</div>
@@ -33,22 +33,22 @@
 					<label class="label" for="toDate">To</label>
 					<div class="control">
 						<flat-pickr
-							class="input"
-							v-model="dateTo"
 							:config="flatPickerConfig"
+							class="input"
 							id="toDate"
 							placeholder="To"
+							v-model="dateTo"
 						/>
 					</div>
 				</div>
 			</div>
 		</div>
 		<gantt-chart
-			:list-id="Number($route.params.listId)"
-			:show-taskswithout-dates="showTaskswithoutDates"
 			:date-from="dateFrom"
 			:date-to="dateTo"
 			:day-width="dayWidth"
+			:list-id="Number($route.params.listId)"
+			:show-taskswithout-dates="showTaskswithoutDates"
 		/>
 
 		<!-- This router view is used to show the task popup while keeping the gantt chart itself -->
@@ -60,40 +60,40 @@
 </template>
 
 <script>
-	import GanttChart from '../../../components/tasks/gantt-component'
-	import flatPickr from 'vue-flatpickr-component'
-	import Fancycheckbox from '../../../components/input/fancycheckbox'
-	import {saveListView} from '../../../helpers/saveListView'
+import GanttChart from '../../../components/tasks/gantt-component'
+import flatPickr from 'vue-flatpickr-component'
+import Fancycheckbox from '../../../components/input/fancycheckbox'
+import {saveListView} from '@/helpers/saveListView'
 
-	export default {
-		name: 'Gantt',
-		components: {
-			Fancycheckbox,
-			flatPickr,
-			GanttChart
-		},
-		created() {
-			// Save the current list view to local storage
-			// We use local storage and not vuex here to make it persistent across reloads.
-			saveListView(this.$route.params.listId, this.$route.name)
-		},
-		data() {
-			return {
-				showTaskswithoutDates: false,
-				dayWidth: 35,
-				dateFrom: null,
-				dateTo: null,
-				flatPickerConfig:{
-					altFormat: 'j M Y',
-					altInput: true,
-					dateFormat: 'Y-m-d',
-					enableTime: false,
-				},
-			}
-		},
-		beforeMount() {
-			this.dateFrom = new Date((new Date()).setDate((new Date()).getDate() - 15))
-			this.dateTo = new Date((new Date()).setDate((new Date()).getDate() + 30))
-		},
-	}
+export default {
+	name: 'Gantt',
+	components: {
+		Fancycheckbox,
+		flatPickr,
+		GanttChart,
+	},
+	created() {
+		// Save the current list view to local storage
+		// We use local storage and not vuex here to make it persistent across reloads.
+		saveListView(this.$route.params.listId, this.$route.name)
+	},
+	data() {
+		return {
+			showTaskswithoutDates: false,
+			dayWidth: 35,
+			dateFrom: null,
+			dateTo: null,
+			flatPickerConfig: {
+				altFormat: 'j M Y',
+				altInput: true,
+				dateFormat: 'Y-m-d',
+				enableTime: false,
+			},
+		}
+	},
+	beforeMount() {
+		this.dateFrom = new Date((new Date()).setDate((new Date()).getDate() - 15))
+		this.dateTo = new Date((new Date()).setDate((new Date()).getDate() + 30))
+	},
+}
 </script>
\ No newline at end of file
diff --git a/src/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 8e85e022d..831c0febc 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -1,26 +1,26 @@
 <template>
-	<div class="kanban loader-container" :class="{ 'is-loading': loading}">
-		<div v-for="bucket in buckets" :key="`bucket${bucket.id}`" class="bucket">
+	<div :class="{ 'is-loading': loading}" class="kanban loader-container">
+		<div :key="`bucket${bucket.id}`" class="bucket" v-for="bucket in buckets">
 			<div class="bucket-header">
 				<h2
-						class="title input"
-						contenteditable="true"
-						spellcheck="false"
-						@focusout="() => saveBucketTitle(bucket.id)"
-						:ref="`bucket${bucket.id}title`"
-						@keyup.ctrl.enter="() => saveBucketTitle(bucket.id)">{{ bucket.title }}</h2>
-				<span 
-					class="limit"
+					:ref="`bucket${bucket.id}title`"
+					@focusout="() => saveBucketTitle(bucket.id)"
+					@keyup.ctrl.enter="() => saveBucketTitle(bucket.id)"
+					class="title input"
+					contenteditable="true"
+					spellcheck="false">{{ bucket.title }}</h2>
+				<span
 					:class="{'is-max': bucket.tasks.length >= bucket.limit}"
+					class="limit"
 					v-if="bucket.limit > 0">
 					{{ bucket.tasks.length }}/{{ bucket.limit }}
 				</span>
 				<div
-						class="dropdown is-right options"
-						:class="{ 'is-active': bucketOptionsDropDownActive[bucket.id] }"
-						v-if="canWrite"
+					:class="{ 'is-active': bucketOptionsDropDownActive[bucket.id] }"
+					class="dropdown is-right options"
+					v-if="canWrite"
 				>
-					<div class="dropdown-trigger" @click.stop="toggleBucketDropdown(bucket.id)">
+					<div @click.stop="toggleBucketDropdown(bucket.id)" class="dropdown-trigger">
 						<span class="icon">
 							<icon icon="ellipsis-v"/>
 						</span>
@@ -28,18 +28,18 @@
 					<div class="dropdown-menu" role="menu">
 						<div class="dropdown-content">
 							<a
-								class="dropdown-item"
 								@click.stop="showSetLimitInput = true"
+								class="dropdown-item"
 							>
 								<div class="field has-addons" v-if="showSetLimitInput">
 									<div class="control">
 										<input
-											type="number"
+											@change="() => updateBucket(bucket)"
+											@keyup.enter="() => updateBucket(bucket)"
 											class="input"
+											type="number"
 											v-focus.always
 											v-model="bucket.limit"
-											@keyup.enter="() => updateBucket(bucket)"
-											@change="() => updateBucket(bucket)"
 										/>
 									</div>
 									<div class="control">
@@ -55,10 +55,10 @@
 								</template>
 							</a>
 							<a
-									class="dropdown-item has-text-danger"
-									@click="() => deleteBucketModal(bucket.id)"
-									:class="{'is-disabled': buckets.length <= 1}"
-									v-tooltip="buckets.length <= 1 ? 'You cannot remove the last bucket.' : ''"
+								:class="{'is-disabled': buckets.length <= 1}"
+								@click="() => deleteBucketModal(bucket.id)"
+								class="dropdown-item has-text-danger"
+								v-tooltip="buckets.length <= 1 ? 'You cannot remove the last bucket.' : ''"
 							>
 								<span class="icon is-small"><icon icon="trash-alt"/></span>
 								Delete
@@ -67,37 +67,37 @@
 					</div>
 				</div>
 			</div>
-			<div class="tasks" :ref="`tasks-container${bucket.id}`">
+			<div :ref="`tasks-container${bucket.id}`" class="tasks">
 				<!-- Make the component either a div or a draggable component based on the user rights -->
 				<component
-						:is="canWrite ? 'Container' : 'div'"
-						@drop="e => onDrop(bucket.id, e)"
-						group-name="buckets"
-						:get-child-payload="getTaskPayload(bucket.id)"
-						:drop-placeholder="dropPlaceholderOptions"
-						:animation-duration="150"
-						:should-accept-drop="() => shouldAcceptDrop(bucket)"
-						drag-class="ghost-task"
-						drag-class-drop="ghost-task-drop"
-						drag-handle-selector=".task.draggable"
+					:animation-duration="150"
+					:drop-placeholder="dropPlaceholderOptions"
+					:get-child-payload="getTaskPayload(bucket.id)"
+					:is="canWrite ? 'Container' : 'div'"
+					:should-accept-drop="() => shouldAcceptDrop(bucket)"
+					@drop="e => onDrop(bucket.id, e)"
+					drag-class="ghost-task"
+					drag-class-drop="ghost-task-drop"
+					drag-handle-selector=".task.draggable"
+					group-name="buckets"
 				>
 					<!-- Make the component either a div or a draggable component based on the user rights -->
 					<component
-							v-for="task in bucket.tasks"
-							:key="`bucket${bucket.id}-task${task.id}`"
-							:is="canWrite ? 'Draggable' : 'div'"
+						:is="canWrite ? 'Draggable' : 'div'"
+						:key="`bucket${bucket.id}-task${task.id}`"
+						v-for="task in bucket.tasks"
 					>
 						<div
-								class="task loader-container draggable"
-								:class="{
+							:class="{
 							'is-loading': taskService.loading && taskUpdating[task.id],
 							'draggable': !taskService.loading || !taskUpdating[task.id],
 							'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
 						}"
-								:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
-								@click.ctrl="() => markTaskAsDone(task)"
-								@click.meta="() => markTaskAsDone(task)"
-								@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
+							:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
+							@click.ctrl="() => markTaskAsDone(task)"
+							@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
+							@click.meta="() => markTaskAsDone(task)"
+							class="task loader-container draggable"
 						>
 							<span class="task-id">
 								<span class="is-done" v-if="task.done">Done</span>
@@ -109,10 +109,10 @@
 								</template>
 							</span>
 							<span
-									v-if="task.dueDate > 0"
-									class="due-date"
-									:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-									v-tooltip="formatDate(task.dueDate)">
+								:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+								class="due-date"
+								v-if="task.dueDate > 0"
+								v-tooltip="formatDate(task.dueDate)">
 								<span class="icon">
 									<icon :icon="['far', 'calendar-alt']"/>
 								</span>
@@ -127,22 +127,22 @@
 									<priority-label :priority="task.priority" class="priority-label"/>
 									<div class="assignees" v-if="task.assignees.length > 0">
 										<user
-												v-for="u in task.assignees"
-												:key="task.id + 'assignee' + u.id"
-												:user="u"
-												:show-username="false"
-												:avatar-size="24"
+											:avatar-size="24"
+											:key="task.id + 'assignee' + u.id"
+											:show-username="false"
+											:user="u"
+											v-for="u in task.assignees"
 										/>
 									</div>
 								</div>
 								<div>
 									<span class="icon" v-if="task.attachments.length > 0">
-										<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+										<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 											<rect fill="none" rx="0" ry="0"></rect>
 											<path
-													fill-rule="evenodd"
-													clip-rule="evenodd"
-													d="M19.86 8.29994C19.8823 8.27664 19.9026 8.25201 19.9207 8.22634C20.5666 7.53541 20.93 6.63567 20.93 5.68001C20.93 4.69001 20.55 3.76001 19.85 3.06001C18.45 1.66001 16.02 1.66001 14.62 3.06001L9.88002 7.80001C9.86705 7.81355 9.85481 7.82753 9.8433 7.8419L4.58 13.1C3.6 14.09 3.06 15.39 3.06 16.78C3.06 18.17 3.6 19.48 4.58 20.46C5.6 21.47 6.93 21.98 8.26 21.98C9.59 21.98 10.92 21.47 11.94 20.46L17.74 14.66C17.97 14.42 17.98 14.04 17.74 13.81C17.5 13.58 17.12 13.58 16.89 13.81L11.09 19.61C10.33 20.36 9.33 20.78 8.26 20.78C7.19 20.78 6.19 20.37 5.43 19.61C4.68 18.85 4.26 17.85 4.26 16.78C4.26 15.72 4.68 14.71 5.43 13.96L15.47 3.91996C15.4962 3.89262 15.5195 3.86346 15.54 3.83292C16.4992 2.95103 18.0927 2.98269 19.01 3.90001C19.48 4.37001 19.74 5.00001 19.74 5.67001C19.74 6.34001 19.48 6.97001 19.01 7.44001L14.27 12.18C14.2571 12.1935 14.2448 12.2075 14.2334 12.2218L8.96 17.4899C8.59 17.8699 7.93 17.8699 7.55 17.4899C7.36 17.2999 7.26 17.0399 7.26 16.7799C7.26 16.5199 7.36 16.2699 7.55 16.0699L15.47 8.14994C15.7 7.90994 15.71 7.52994 15.47 7.29994C15.23 7.06994 14.85 7.06994 14.62 7.29994L6.7 15.2199C6.29 15.6399 6.06 16.1899 6.06 16.7799C6.06 17.3699 6.29 17.9199 6.7 18.3399C7.12 18.7499 7.67 18.9799 8.26 18.9799C8.85 18.9799 9.4 18.7599 9.82 18.3399L19.86 8.29994Z"></path>
+												clip-rule="evenodd"
+												d="M19.86 8.29994C19.8823 8.27664 19.9026 8.25201 19.9207 8.22634C20.5666 7.53541 20.93 6.63567 20.93 5.68001C20.93 4.69001 20.55 3.76001 19.85 3.06001C18.45 1.66001 16.02 1.66001 14.62 3.06001L9.88002 7.80001C9.86705 7.81355 9.85481 7.82753 9.8433 7.8419L4.58 13.1C3.6 14.09 3.06 15.39 3.06 16.78C3.06 18.17 3.6 19.48 4.58 20.46C5.6 21.47 6.93 21.98 8.26 21.98C9.59 21.98 10.92 21.47 11.94 20.46L17.74 14.66C17.97 14.42 17.98 14.04 17.74 13.81C17.5 13.58 17.12 13.58 16.89 13.81L11.09 19.61C10.33 20.36 9.33 20.78 8.26 20.78C7.19 20.78 6.19 20.37 5.43 19.61C4.68 18.85 4.26 17.85 4.26 16.78C4.26 15.72 4.68 14.71 5.43 13.96L15.47 3.91996C15.4962 3.89262 15.5195 3.86346 15.54 3.83292C16.4992 2.95103 18.0927 2.98269 19.01 3.90001C19.48 4.37001 19.74 5.00001 19.74 5.67001C19.74 6.34001 19.48 6.97001 19.01 7.44001L14.27 12.18C14.2571 12.1935 14.2448 12.2075 14.2334 12.2218L8.96 17.4899C8.59 17.8699 7.93 17.8699 7.55 17.4899C7.36 17.2999 7.26 17.0399 7.26 16.7799C7.26 16.5199 7.36 16.2699 7.55 16.0699L15.47 8.14994C15.7 7.90994 15.71 7.52994 15.47 7.29994C15.23 7.06994 14.85 7.06994 14.62 7.29994L6.7 15.2199C6.29 15.6399 6.06 16.1899 6.06 16.7799C6.06 17.3699 6.29 17.9199 6.7 18.3399C7.12 18.7499 7.67 18.9799 8.26 18.9799C8.85 18.9799 9.4 18.7599 9.82 18.3399L19.86 8.29994Z"
+												fill-rule="evenodd"></path>
 										</svg>
 									</span>
 								</div>
@@ -156,16 +156,16 @@
 					<div class="control">
 						<input
 
-								class="input"
-								type="text"
-								placeholder="Enter the new task text..."
-								v-focus.always
-								@focusout="toggleShowNewTaskInput(bucket.id)"
-								@keyup.esc="toggleShowNewTaskInput(bucket.id)"
-								@keyup.enter="addTaskToBucket(bucket.id)"
-								v-model="newTaskText"
-								:disabled="taskService.loading"
-								:class="{'is-loading': taskService.loading}"
+							:class="{'is-loading': taskService.loading}"
+							:disabled="taskService.loading"
+							@focusout="toggleShowNewTaskInput(bucket.id)"
+							@keyup.enter="addTaskToBucket(bucket.id)"
+							@keyup.esc="toggleShowNewTaskInput(bucket.id)"
+							class="input"
+							placeholder="Enter the new task text..."
+							type="text"
+							v-focus.always
+							v-model="newTaskText"
 						/>
 					</div>
 					<p class="help is-danger" v-if="newTaskError[bucket.id] && newTaskText === ''">
@@ -173,9 +173,9 @@
 					</p>
 				</div>
 				<a
-						class="button noshadow is-transparent is-fullwidth has-text-centered"
-						@click="toggleShowNewTaskInput(bucket.id)"
-						v-if="!showNewTaskInput[bucket.id]">
+					@click="toggleShowNewTaskInput(bucket.id)"
+					class="button noshadow is-transparent is-fullwidth has-text-centered"
+					v-if="!showNewTaskInput[bucket.id]">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
@@ -191,21 +191,21 @@
 
 		<div class="bucket new-bucket" v-if="!loading && canWrite">
 			<input
-					v-if="showNewBucketInput"
-					class="input"
-					type="text"
-					placeholder="Enter the new bucket title..."
-					v-focus.always
-					@focusout="() => showNewBucketInput = false"
-					@keyup.esc="() => showNewBucketInput = false"
-					@keyup.enter="createNewBucket"
-					v-model="newBucketTitle"
-					:disabled="loading"
-					:class="{'is-loading': loading}"
+				:class="{'is-loading': loading}"
+				:disabled="loading"
+				@focusout="() => showNewBucketInput = false"
+				@keyup.enter="createNewBucket"
+				@keyup.esc="() => showNewBucketInput = false"
+				class="input"
+				placeholder="Enter the new bucket title..."
+				type="text"
+				v-focus.always
+				v-if="showNewBucketInput"
+				v-model="newBucketTitle"
 			/>
 			<a
-					class="button noshadow is-transparent is-fullwidth has-text-centered"
-					@click="() => showNewBucketInput = true" v-if="!showNewBucketInput">
+				@click="() => showNewBucketInput = true"
+				class="button noshadow is-transparent is-fullwidth has-text-centered" v-if="!showNewBucketInput">
 				<span class="icon is-small">
 					<icon icon="plus"/>
 				</span>
@@ -221,9 +221,9 @@
 		</transition>
 
 		<modal
-				v-if="showBucketDeleteModal"
-				@close="showBucketDeleteModal = false"
-				@submit="deleteBucket()">
+			@close="showBucketDeleteModal = false"
+			@submit="deleteBucket()"
+			v-if="showBucketDeleteModal">
 			<span slot="header">Delete the bucket</span>
 			<p slot="text">
 				Are you sure you want to delete this bucket?<br/>
@@ -235,158 +235,147 @@
 </template>
 
 <script>
-	import TaskService from '../../../services/task'
-	import TaskModel from '../../../models/task'
-	import BucketModel from '../../../models/bucket'
+import TaskService from '../../../services/task'
+import TaskModel from '../../../models/task'
+import BucketModel from '../../../models/bucket'
 
-	import {Container, Draggable} from 'vue-smooth-dnd'
-	import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
-	import User from '../../../components/misc/user'
-	import Labels from '../../../components/tasks/partials/labels'
+import {Container, Draggable} from 'vue-smooth-dnd'
+import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
+import User from '../../../components/misc/user'
+import Labels from '../../../components/tasks/partials/labels'
 
-	import {filterObject} from '../../../helpers/filterObject'
-	import {applyDrag} from '../../../helpers/applyDrag'
-	import {mapState} from 'vuex'
-	import {LOADING} from '../../../store/mutation-types'
-	import {saveListView} from '../../../helpers/saveListView'
-	import Rights from '../../../models/rights.json'
+import {filterObject} from '@/helpers/filterObject'
+import {applyDrag} from '@/helpers/applyDrag'
+import {mapState} from 'vuex'
+import {LOADING} from '@/store/mutation-types'
+import {saveListView} from '@/helpers/saveListView'
+import Rights from '../../../models/rights.json'
 
-	export default {
-		name: 'Kanban',
-		components: {
-			Container,
-			Draggable,
-			Labels,
-			User,
-			PriorityLabel,
-		},
-		data() {
-			return {
-				taskService: TaskService,
+export default {
+	name: 'Kanban',
+	components: {
+		Container,
+		Draggable,
+		Labels,
+		User,
+		PriorityLabel,
+	},
+	data() {
+		return {
+			taskService: TaskService,
 
-				dropPlaceholderOptions: {
-					className: 'drop-preview',
-					animationDuration: 150,
-					showOnTop: true,
-				},
-				sourceBucket: 0,
-				bucketOptionsDropDownActive: {},
+			dropPlaceholderOptions: {
+				className: 'drop-preview',
+				animationDuration: 150,
+				showOnTop: true,
+			},
+			sourceBucket: 0,
+			bucketOptionsDropDownActive: {},
 
-				showBucketDeleteModal: false,
-				bucketToDelete: 0,
+			showBucketDeleteModal: false,
+			bucketToDelete: 0,
 
-				newTaskText: '',
-				showNewTaskInput: {},
-				newBucketTitle: '',
-				showNewBucketInput: false,
-				newTaskError: {},
-				showSetLimitInput: false,
+			newTaskText: '',
+			showNewTaskInput: {},
+			newBucketTitle: '',
+			showNewBucketInput: false,
+			newTaskError: {},
+			showSetLimitInput: false,
 
-				// We're using this to show the loading animation only at the task when updating it
-				taskUpdating: {},
+			// We're using this to show the loading animation only at the task when updating it
+			taskUpdating: {},
+		}
+	},
+	created() {
+		this.taskService = new TaskService()
+		this.loadBuckets()
+		this.$nextTick(() => document.addEventListener('click', this.closeBucketDropdowns))
+
+		// Save the current list view to local storage
+		// We use local storage and not vuex here to make it persistent across reloads.
+		saveListView(this.$route.params.listId, this.$route.name)
+	},
+	watch: {
+		'$route.params.listId': 'loadBuckets',
+	},
+	computed: mapState({
+		buckets: state => state.kanban.buckets,
+		loadedListId: state => state.kanban.listId,
+		loading: LOADING,
+		canWrite: state => state.currentList.maxRight > Rights.READ,
+	}),
+	methods: {
+		loadBuckets() {
+
+			// Prevent trying to load buckets if the task popup view is active
+			if (this.$route.name !== 'list.kanban') {
+				return
 			}
+
+			// Only load buckets if we don't already loaded them
+			if (
+				this.loadedListId === this.$route.params.listId ||
+				this.loadedListId === parseInt(this.$route.params.listId)
+			) {
+				return
+			}
+
+			console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $route.params =`, this.$route.params)
+
+			this.$store.dispatch('kanban/loadBucketsForList', this.$route.params.listId)
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-		created() {
-			this.taskService = new TaskService()
-			this.loadBuckets()
-			this.$nextTick(() => document.addEventListener('click', this.closeBucketDropdowns))
+		onDrop(bucketId, dropResult) {
 
-			// Save the current list view to local storage
-			// We use local storage and not vuex here to make it persistent across reloads.
-			saveListView(this.$route.params.listId, this.$route.name)
-		},
-		watch: {
-			'$route.params.listId': 'loadBuckets',
-		},
-		computed: mapState({
-			buckets: state => state.kanban.buckets,
-			loadedListId: state => state.kanban.listId,
-			loading: LOADING,
-			canWrite: state => state.currentList.maxRight > Rights.READ,
-		}),
-		methods: {
-			loadBuckets() {
+			// Note: A lot of this example comes from the excellent kanban example on https://github.com/kutlugsahin/vue-smooth-dnd/blob/master/demo/src/pages/cards.vue
 
-				// Prevent trying to load buckets if the task popup view is active
-				if (this.$route.name !== 'list.kanban') {
-					return
+			const bucketIndex = filterObject(this.buckets, b => b.id === bucketId)
+
+			if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
+
+				// FIXME: This is probably not the best solution and more of a naive brute-force approach
+
+				// Duplicate the buckets to avoid stuff moving around without noticing
+				const buckets = Object.assign({}, this.buckets)
+				// Get the index of the bucket and the bucket itself
+				const bucket = buckets[bucketIndex]
+
+				// Rebuild the tasks from the bucket, removing/adding the moved task
+				bucket.tasks = applyDrag(bucket.tasks, dropResult)
+				// Update the bucket in the list of all buckets
+				delete buckets[bucketIndex]
+				buckets[bucketIndex] = bucket
+				// Set the buckets, triggering a state update in vue
+				// FIXME: This seems to set some task attributes (like due date) wrong. Commented out, but seems to still work?
+				//   Not sure what to do about this.
+				// this.$store.commit('kanban/setBuckets', buckets)
+			}
+
+			if (dropResult.addedIndex !== null) {
+
+				const taskIndex = dropResult.addedIndex
+				const taskBefore = typeof this.buckets[bucketIndex].tasks[taskIndex - 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex - 1]
+				const taskAfter = typeof this.buckets[bucketIndex].tasks[taskIndex + 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex + 1]
+				const task = this.buckets[bucketIndex].tasks[taskIndex]
+				this.$set(this.taskUpdating, task.id, true)
+
+				// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
+				if (taskBefore === null && taskAfter !== null) {
+					task.position = taskAfter.position / 2
+				}
+				// If there is no task after it, we just add 2^16 to the last position
+				if (taskBefore !== null && taskAfter === null) {
+					task.position = taskBefore.position + Math.pow(2, 16)
+				}
+				// If we have both a task before and after it, we acually calculate the position
+				if (taskAfter !== null && taskBefore !== null) {
+					task.position = taskBefore.position + (taskAfter.position - taskBefore.position) / 2
 				}
 
-				// Only load buckets if we don't already loaded them
-				if (
-					this.loadedListId === this.$route.params.listId ||
-					this.loadedListId === parseInt(this.$route.params.listId)
-				) {
-					return
-				}
+				task.bucketId = bucketId
 
-				console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $route.params =`, this.$route.params)
-
-				this.$store.dispatch('kanban/loadBucketsForList', this.$route.params.listId)
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			onDrop(bucketId, dropResult) {
-
-				// Note: A lot of this example comes from the excellent kanban example on https://github.com/kutlugsahin/vue-smooth-dnd/blob/master/demo/src/pages/cards.vue
-
-				const bucketIndex = filterObject(this.buckets, b => b.id === bucketId)
-
-				if (dropResult.removedIndex !== null || dropResult.addedIndex !== null) {
-
-					// FIXME: This is probably not the best solution and more of a naive brute-force approach
-
-					// Duplicate the buckets to avoid stuff moving around without noticing
-					const buckets = Object.assign({}, this.buckets)
-					// Get the index of the bucket and the bucket itself
-					const bucket = buckets[bucketIndex]
-
-					// Rebuild the tasks from the bucket, removing/adding the moved task
-					bucket.tasks = applyDrag(bucket.tasks, dropResult)
-					// Update the bucket in the list of all buckets
-					delete buckets[bucketIndex]
-					buckets[bucketIndex] = bucket
-					// Set the buckets, triggering a state update in vue
-					// FIXME: This seems to set some task attributes (like due date) wrong. Commented out, but seems to still work?
-					//   Not sure what to do about this.
-					// this.$store.commit('kanban/setBuckets', buckets)
-				}
-
-				if (dropResult.addedIndex !== null) {
-
-					const taskIndex = dropResult.addedIndex
-					const taskBefore = typeof this.buckets[bucketIndex].tasks[taskIndex - 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex - 1]
-					const taskAfter = typeof this.buckets[bucketIndex].tasks[taskIndex + 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex + 1]
-					const task = this.buckets[bucketIndex].tasks[taskIndex]
-					this.$set(this.taskUpdating, task.id, true)
-
-					// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
-					if (taskBefore === null && taskAfter !== null) {
-						task.position = taskAfter.position / 2
-					}
-					// If there is no task after it, we just add 2^16 to the last position
-					if (taskBefore !== null && taskAfter === null) {
-						task.position = taskBefore.position + Math.pow(2, 16)
-					}
-					// If we have both a task before and after it, we acually calculate the position
-					if (taskAfter !== null && taskBefore !== null) {
-						task.position = taskBefore.position + (taskAfter.position - taskBefore.position) / 2
-					}
-
-					task.bucketId = bucketId
-
-					this.$store.dispatch('tasks/update', task)
-						.catch(e => {
-							this.error(e, this)
-						})
-						.finally(() => {
-							this.$set(this.taskUpdating, task.id, false)
-						})
-				}
-			},
-			markTaskAsDone(task) {
-				task.done = !task.done
 				this.$store.dispatch('tasks/update', task)
 					.catch(e => {
 						this.error(e, this)
@@ -394,144 +383,155 @@
 					.finally(() => {
 						this.$set(this.taskUpdating, task.id, false)
 					})
-			},
-			getTaskPayload(bucketId) {
-				return index => {
-					const bucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
-					this.sourceBucket = bucket.id
-					return bucket.tasks[index]
-				}
-			},
-			toggleShowNewTaskInput(bucket) {
-				this.$set(this.showNewTaskInput, bucket, !this.showNewTaskInput[bucket])
-			},
-			toggleBucketDropdown(bucketId) {
-				this.closeBucketDropdowns() // Close all eventually open dropdowns
-				this.$set(this.bucketOptionsDropDownActive, bucketId, !this.bucketOptionsDropDownActive[bucketId])
-			},
-			closeBucketDropdowns() {
-				this.showSetLimitInput = false
-				for (const bucketId in this.bucketOptionsDropDownActive) {
-					this.bucketOptionsDropDownActive[bucketId] = false
-				}
-			},
-			addTaskToBucket(bucketId) {
+			}
+		},
+		markTaskAsDone(task) {
+			task.done = !task.done
+			this.$store.dispatch('tasks/update', task)
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.$set(this.taskUpdating, task.id, false)
+				})
+		},
+		getTaskPayload(bucketId) {
+			return index => {
+				const bucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
+				this.sourceBucket = bucket.id
+				return bucket.tasks[index]
+			}
+		},
+		toggleShowNewTaskInput(bucket) {
+			this.$set(this.showNewTaskInput, bucket, !this.showNewTaskInput[bucket])
+		},
+		toggleBucketDropdown(bucketId) {
+			this.closeBucketDropdowns() // Close all eventually open dropdowns
+			this.$set(this.bucketOptionsDropDownActive, bucketId, !this.bucketOptionsDropDownActive[bucketId])
+		},
+		closeBucketDropdowns() {
+			this.showSetLimitInput = false
+			for (const bucketId in this.bucketOptionsDropDownActive) {
+				this.bucketOptionsDropDownActive[bucketId] = false
+			}
+		},
+		addTaskToBucket(bucketId) {
 
-				if (this.newTaskText === '') {
-					this.$set(this.newTaskError, bucketId, true)
-					return
-				}
-				this.$set(this.newTaskError, bucketId, false)
+			if (this.newTaskText === '') {
+				this.$set(this.newTaskError, bucketId, true)
+				return
+			}
+			this.$set(this.newTaskError, bucketId, false)
 
-				// We need the actual bucket index so we put that in a seperate function
-				const bucketIndex = () => {
-					for (const t in this.buckets) {
-						if (this.buckets[t].id === bucketId) {
-							return t
-						}
+			// We need the actual bucket index so we put that in a seperate function
+			const bucketIndex = () => {
+				for (const t in this.buckets) {
+					if (this.buckets[t].id === bucketId) {
+						return t
 					}
 				}
+			}
 
-				const bi = bucketIndex()
+			const bi = bucketIndex()
 
-				const task = new TaskModel({
-					title: this.newTaskText,
-					bucketId: this.buckets[bi].id,
-					listId: this.$route.params.listId,
+			const task = new TaskModel({
+				title: this.newTaskText,
+				bucketId: this.buckets[bi].id,
+				listId: this.$route.params.listId,
+			})
+
+			this.taskService.create(task)
+				.then(r => {
+					this.newTaskText = ''
+					this.$store.commit('kanban/addTaskToBucket', r)
 				})
-
-				this.taskService.create(task)
-					.then(r => {
-						this.newTaskText = ''
-						this.$store.commit('kanban/addTaskToBucket', r)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						if (!this.$refs[`tasks-container${task.bucketId}`][0]) {
-							return
-						}
-						this.$refs[`tasks-container${task.bucketId}`][0].scrollTop = this.$refs[`tasks-container${task.bucketId}`][0].scrollHeight
-					})
-			},
-			createNewBucket() {
-				if (this.newBucketTitle === '') {
-					return
-				}
-
-				const newBucket = new BucketModel({
-					title: this.newBucketTitle,
-					listId: parseInt(this.$route.params.listId),
+				.catch(e => {
+					this.error(e, this)
 				})
-
-				this.$store.dispatch('kanban/createBucket', newBucket)
-					.then(() => {
-						this.newBucketTitle = ''
-						this.showNewBucketInput = false
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			deleteBucketModal(bucketId) {
-				if (this.buckets.length <= 1) {
-					return
-				}
-
-				this.bucketToDelete = bucketId
-				this.showBucketDeleteModal = true
-			},
-			deleteBucket() {
-				const bucket = new BucketModel({
-					id: this.bucketToDelete,
-					listId: this.$route.params.listId,
+				.finally(() => {
+					if (!this.$refs[`tasks-container${task.bucketId}`][0]) {
+						return
+					}
+					this.$refs[`tasks-container${task.bucketId}`][0].scrollTop = this.$refs[`tasks-container${task.bucketId}`][0].scrollHeight
 				})
-
-				this.$store.dispatch('kanban/deleteBucket', bucket)
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.showBucketDeleteModal = false
-					})
-			},
-			saveBucketTitle(bucketId) {
-				const bucketTitle = this.$refs[`bucket${bucketId}title`][0].textContent
-				const bucket = new BucketModel({
-					id: bucketId,
-					title: bucketTitle,
-					listId: Number(this.$route.params.listId),
-				})
-
-				// Because the contenteditable does not have a change event,
-				// we're building it ourselves here and only updating the bucket
-				// if the title changed.
-				const realBucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
-				if (realBucket.title === bucketTitle) {
-					return
-				}
-
-				this.$store.dispatch('kanban/updateBucket', bucket)
-					.then(r => {
-						realBucket.title = r.title
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			updateBucket(bucket) {
-				bucket.limit = parseInt(bucket.limit)
-				this.$store.dispatch('kanban/updateBucket', bucket)
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			shouldAcceptDrop(bucket) {
-				return bucket.id === this.sourceBucket || // When dragging from a bucket who has its limit reached, dragging should still be possible
-					bucket.limit === 0 || // If there is no limit set, dragging & dropping should always work
-					bucket.tasks.length < bucket.limit // Disallow dropping to buckets which have their limit reached
-			},
 		},
-	}
+		createNewBucket() {
+			if (this.newBucketTitle === '') {
+				return
+			}
+
+			const newBucket = new BucketModel({
+				title: this.newBucketTitle,
+				listId: parseInt(this.$route.params.listId),
+			})
+
+			this.$store.dispatch('kanban/createBucket', newBucket)
+				.then(() => {
+					this.newBucketTitle = ''
+					this.showNewBucketInput = false
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		deleteBucketModal(bucketId) {
+			if (this.buckets.length <= 1) {
+				return
+			}
+
+			this.bucketToDelete = bucketId
+			this.showBucketDeleteModal = true
+		},
+		deleteBucket() {
+			const bucket = new BucketModel({
+				id: this.bucketToDelete,
+				listId: this.$route.params.listId,
+			})
+
+			this.$store.dispatch('kanban/deleteBucket', bucket)
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.showBucketDeleteModal = false
+				})
+		},
+		saveBucketTitle(bucketId) {
+			const bucketTitle = this.$refs[`bucket${bucketId}title`][0].textContent
+			const bucket = new BucketModel({
+				id: bucketId,
+				title: bucketTitle,
+				listId: Number(this.$route.params.listId),
+			})
+
+			// Because the contenteditable does not have a change event,
+			// we're building it ourselves here and only updating the bucket
+			// if the title changed.
+			const realBucket = this.buckets[filterObject(this.buckets, b => b.id === bucketId)]
+			if (realBucket.title === bucketTitle) {
+				return
+			}
+
+			this.$store.dispatch('kanban/updateBucket', bucket)
+				.then(r => {
+					realBucket.title = r.title
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		updateBucket(bucket) {
+			bucket.limit = parseInt(bucket.limit)
+			this.$store.dispatch('kanban/updateBucket', bucket)
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		shouldAcceptDrop(bucket) {
+			return bucket.id === this.sourceBucket || // When dragging from a bucket who has its limit reached, dragging should still be possible
+				bucket.limit === 0 || // If there is no limit set, dragging & dropping should always work
+				bucket.tasks.length < bucket.limit // Disallow dropping to buckets which have their limit reached
+		},
+	},
+}
 </script>
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 2b03a3f25..fe7076cd1 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -1,38 +1,38 @@
 <template>
-	<div class="loader-container is-max-width-desktop" :class="{ 'is-loading': taskCollectionService.loading}">
+	<div :class="{ 'is-loading': taskCollectionService.loading}" class="loader-container is-max-width-desktop">
 		<div class="filter-container">
 			<div class="items">
 				<div class="search">
-					<div class="field has-addons" :class="{ 'hidden': !showTaskSearch }">
+					<div :class="{ 'hidden': !showTaskSearch }" class="field has-addons">
 						<div class="control has-icons-left has-icons-right">
 							<input
-									class="input"
-									type="text"
-									placeholder="Search"
-									v-focus
-									v-model="searchTerm"
-									@keyup.enter="searchTasks"
-									@blur="hideSearchBar()"/>
+								@blur="hideSearchBar()"
+								@keyup.enter="searchTasks"
+								class="input"
+								placeholder="Search"
+								type="text"
+								v-focus
+								v-model="searchTerm"/>
 							<span class="icon is-left">
 								<icon icon="search"/>
 							</span>
 						</div>
 						<div class="control">
 							<button
-									class="button noshadow is-primary"
-									@click="searchTasks"
-									:class="{'is-loading': taskCollectionService.loading}">
+								:class="{'is-loading': taskCollectionService.loading}"
+								@click="searchTasks"
+								class="button noshadow is-primary">
 								Search
 							</button>
 						</div>
 					</div>
-					<button class="button" @click="showTaskSearch = !showTaskSearch" v-if="!showTaskSearch">
+					<button @click="showTaskSearch = !showTaskSearch" class="button" v-if="!showTaskSearch">
 						<span class="icon">
 							<icon icon="search"/>
 						</span>
 					</button>
 				</div>
-				<button class="button" @click="showTaskFilter = !showTaskFilter">
+				<button @click="showTaskFilter = !showTaskFilter" class="button">
 					<span class="icon is-small">
 						<icon icon="filter"/>
 					</span>
@@ -41,30 +41,30 @@
 			</div>
 			<transition name="fade">
 				<filters
-						v-if="showTaskFilter"
-						v-model="params"
-						@change="loadTasks(1)"
+					@change="loadTasks(1)"
+					v-if="showTaskFilter"
+					v-model="params"
 				/>
 			</transition>
 		</div>
 
 		<div class="field task-add" v-if="!list.isArchived && canWrite">
 			<div class="field is-grouped">
-				<p class="control has-icons-left is-expanded" :class="{ 'is-loading': taskService.loading}">
+				<p :class="{ 'is-loading': taskService.loading}" class="control has-icons-left is-expanded">
 					<input
-							v-focus
-							class="input"
-							:class="{ 'disabled': taskService.loading}"
-							v-model="newTaskText"
-							type="text"
-							placeholder="Add a new task..."
-							@keyup.enter="addTask()"/>
+						:class="{ 'disabled': taskService.loading}"
+						@keyup.enter="addTask()"
+						class="input"
+						placeholder="Add a new task..."
+						type="text"
+						v-focus
+						v-model="newTaskText"/>
 					<span class="icon is-small is-left">
 						<icon icon="tasks"/>
 					</span>
 				</p>
 				<p class="control">
-					<button class="button is-success" :disabled="newTaskText.length === 0" @click="addTask()">
+					<button :disabled="newTaskText.length === 0" @click="addTask()" class="button is-success">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
@@ -77,24 +77,24 @@
 			</p>
 		</div>
 
-		<p v-if="tasks.length === 0" class="list-is-empty-notice">
+		<p class="list-is-empty-notice" v-if="tasks.length === 0">
 			This list is currently empty.
 		</p>
 
 		<div class="columns">
 			<div class="column">
-				<div class="tasks" v-if="tasks && tasks.length > 0" :class="{'short': isTaskEdit}">
+				<div :class="{'short': isTaskEdit}" class="tasks" v-if="tasks && tasks.length > 0">
 					<single-task-in-list
-						v-for="t in tasks"
+						:disabled="!canWrite"
 						:key="t.id"
 						:the-task="t"
 						@taskUpdated="updateTasks"
 						task-detail-route="task.detail"
-						:disabled="!canWrite"
+						v-for="t in tasks"
 					>
-					<div @click="editTask(t.id)" class="icon settings" v-if="!list.isArchived && canWrite">
-						<icon icon="pencil-alt"/>
-					</div>
+						<div @click="editTask(t.id)" class="icon settings" v-if="!list.isArchived && canWrite">
+							<icon icon="pencil-alt"/>
+						</div>
 					</single-task-in-list>
 				</div>
 			</div>
@@ -104,7 +104,7 @@
 						<p class="card-header-title">
 							Edit Task
 						</p>
-						<a class="card-header-icon" @click="isTaskEdit = false">
+						<a @click="isTaskEdit = false" class="card-header-icon">
 							<span class="icon">
 								<icon icon="angle-right"/>
 							</span>
@@ -120,22 +120,22 @@
 		</div>
 
 		<nav
-				class="pagination is-centered"
-				role="navigation"
-				aria-label="pagination"
-				v-if="taskCollectionService.totalPages > 1">
+			aria-label="pagination"
+			class="pagination is-centered"
+			role="navigation"
+			v-if="taskCollectionService.totalPages > 1">
 			<router-link
-					class="pagination-previous"
-					:to="getRouteForPagination(currentPage - 1)"
-					tag="button"
-					:disabled="currentPage === 1">
+				:disabled="currentPage === 1"
+				:to="getRouteForPagination(currentPage - 1)"
+				class="pagination-previous"
+				tag="button">
 				Previous
 			</router-link>
 			<router-link
-					class="pagination-next"
-					:to="getRouteForPagination(currentPage + 1)"
-					tag="button"
-					:disabled="currentPage === taskCollectionService.totalPages">
+				:disabled="currentPage === taskCollectionService.totalPages"
+				:to="getRouteForPagination(currentPage + 1)"
+				class="pagination-next"
+				tag="button">
 				Next page
 			</router-link>
 			<ul class="pagination-list">
@@ -143,10 +143,10 @@
 					<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
 					<li :key="'page'+i" v-else>
 						<router-link
-								:to="getRouteForPagination(p.number)"
-								:class="{'is-current': p.number === currentPage}"
-								class="pagination-link"
-								:aria-label="'Goto page ' + p.number">
+							:aria-label="'Goto page ' + p.number"
+							:class="{'is-current': p.number === currentPage}"
+							:to="getRouteForPagination(p.number)"
+							class="pagination-link">
 							{{ p.number }}
 						</router-link>
 					</li>
@@ -163,201 +163,201 @@
 </template>
 
 <script>
-	import TaskService from '../../../services/task'
-	import TaskModel from '../../../models/task'
-	import LabelTaskService from '../../../services/labelTask'
-	import LabelService from '../../../services/label'
-	import LabelTask from '../../../models/labelTask'
-	import LabelModel from '../../../models/label'
+import TaskService from '../../../services/task'
+import TaskModel from '../../../models/task'
+import LabelTaskService from '../../../services/labelTask'
+import LabelService from '../../../services/label'
+import LabelTask from '../../../models/labelTask'
+import LabelModel from '../../../models/label'
 
-	import EditTask from '../../../components/tasks/edit-task'
-	import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
-	import taskList from '../../../components/tasks/mixins/taskList'
-	import {saveListView} from '../../../helpers/saveListView'
-	import Filters from '../../../components/list/partials/filters'
-	import Rights from '../../../models/rights.json'
-	import {mapState} from 'vuex'
+import EditTask from '../../../components/tasks/edit-task'
+import SingleTaskInList from '../../../components/tasks/partials/singleTaskInList'
+import taskList from '../../../components/tasks/mixins/taskList'
+import {saveListView} from '@/helpers/saveListView'
+import Filters from '../../../components/list/partials/filters'
+import Rights from '../../../models/rights.json'
+import {mapState} from 'vuex'
 
-	export default {
-		name: 'List',
-		data() {
-			return {
-				taskService: TaskService,
-				list: {},
-				isTaskEdit: false,
-				taskEditTask: TaskModel,
-				newTaskText: '',
+export default {
+	name: 'List',
+	data() {
+		return {
+			taskService: TaskService,
+			list: {},
+			isTaskEdit: false,
+			taskEditTask: TaskModel,
+			newTaskText: '',
 
-				showError: false,
-				labelTaskService: LabelTaskService,
-				labelService: LabelService,
+			showError: false,
+			labelTaskService: LabelTaskService,
+			labelService: LabelService,
+		}
+	},
+	mixins: [
+		taskList,
+	],
+	components: {
+		Filters,
+		SingleTaskInList,
+		EditTask,
+	},
+	created() {
+		this.taskService = new TaskService()
+		this.labelService = new LabelService()
+		this.labelTaskService = new LabelTaskService()
+
+		// Save the current list view to local storage
+		// We use local storage and not vuex here to make it persistent across reloads.
+		saveListView(this.$route.params.listId, this.$route.name)
+	},
+	computed: mapState({
+		canWrite: state => state.currentList.maxRight > Rights.READ,
+	}),
+	methods: {
+		// This function initializes the tasks page and loads the first page of tasks
+		initTasks(page, search = '') {
+			this.taskEditTask = null
+			this.isTaskEdit = false
+			this.loadTasks(page, search)
+		},
+		addTask() {
+			if (this.newTaskText === '') {
+				this.showError = true
+				return
 			}
-		},
-		mixins: [
-			taskList,
-		],
-		components: {
-			Filters,
-			SingleTaskInList,
-			EditTask,
-		},
-		created() {
-			this.taskService = new TaskService()
-			this.labelService = new LabelService()
-			this.labelTaskService = new LabelTaskService()
+			this.showError = false
 
-			// Save the current list view to local storage
-			// We use local storage and not vuex here to make it persistent across reloads.
-			saveListView(this.$route.params.listId, this.$route.name)
-		},
-		computed: mapState({
-			canWrite: state => state.currentList.maxRight > Rights.READ,
-		}),
-		methods: {
-			// This function initializes the tasks page and loads the first page of tasks
-			initTasks(page, search = '') {
-				this.taskEditTask = null
-				this.isTaskEdit = false
-				this.loadTasks(page, search)
-			},
-			addTask() {
-				if (this.newTaskText === '') {
-					this.showError = true
-					return
-				}
-				this.showError = false
+			let task = new TaskModel({title: this.newTaskText, listId: this.$route.params.listId})
+			this.taskService.create(task)
+				.then(task => {
+					this.tasks.push(task)
+					this.sortTasks()
+					this.newTaskText = ''
 
-				let task = new TaskModel({title: this.newTaskText, listId: this.$route.params.listId})
-				this.taskService.create(task)
-					.then(task => {
-						this.tasks.push(task)
-						this.sortTasks()
-						this.newTaskText = ''
+					// Check if the task has words starting with ~ in the title and make them to labels
+					const parts = task.title.split(' ~')
+					// The first element will always contain the title, even if there is no occurrence of ~
+					if (parts.length > 1) {
 
-						// Check if the task has words starting with ~ in the title and make them to labels
-						const parts = task.title.split(' ~')
-						// The first element will always contain the title, even if there is no occurrence of ~
-						if (parts.length > 1) {
+						// First, create an unresolved promise for each entry in the array to wait
+						// until all labels are added to update the task title once again
+						let labelAddings = []
+						let labelAddsToWaitFor = []
+						parts.forEach((p, index) => {
+							if (index < 1) {
+								return
+							}
 
-							// First, create an unresolved promise for each entry in the array to wait
-							// until all labels are added to update the task title once again
-							let labelAddings = []
-							let labelAddsToWaitFor = []
-							parts.forEach((p, index) => {
-								if (index < 1) {
-									return
-								}
+							labelAddsToWaitFor.push(new Promise((resolve, reject) => {
+								labelAddings.push({resolve: resolve, reject: reject})
+							}))
+						})
 
-								labelAddsToWaitFor.push(new Promise((resolve, reject) => {
-									labelAddings.push({resolve: resolve, reject: reject})
-								}))
-							})
+						// Then do everything that is involved in finding, creating and adding the label to the task
+						parts.forEach((p, index) => {
+							if (index < 1) {
+								return
+							}
 
-							// Then do everything that is involved in finding, creating and adding the label to the task
-							parts.forEach((p, index) => {
-								if (index < 1) {
-									return
-								}
+							// The part up until the next space
+							const labelTitle = p.split(' ')[0]
 
-								// The part up until the next space
-								const labelTitle = p.split(' ')[0]
+							// Check if the label exists
+							this.labelService.getAll({}, {s: labelTitle})
+								.then(res => {
+									// Label found, use it
+									if (res.length > 0 && res[0].title === labelTitle) {
+										const labelTask = new LabelTask({
+											taskId: task.id,
+											labelId: res[0].id,
+										})
+										this.labelTaskService.create(labelTask)
+											.then(result => {
+												task.labels.push(res[0])
 
-								// Check if the label exists
-								this.labelService.getAll({}, {s: labelTitle})
-									.then(res => {
-										// Label found, use it
-										if (res.length > 0 && res[0].title === labelTitle) {
-											const labelTask = new LabelTask({
-												taskId: task.id,
-												labelId: res[0].id,
+												// Remove the label text from the task title
+												task.title = task.title.replace(` ~${labelTitle}`, '')
+
+												// Make the promise done (the one with the index 0 does not exist)
+												labelAddings[index - 1].resolve(result)
 											})
-											this.labelTaskService.create(labelTask)
-												.then(result => {
-													task.labels.push(res[0])
-
-													// Remove the label text from the task title
-													task.title = task.title.replace(` ~${labelTitle}`, '')
-
-													// Make the promise done (the one with the index 0 does not exist)
-													labelAddings[index-1].resolve(result)
+											.catch(e => {
+												this.error(e, this)
+											})
+									} else {
+										// label not found, create it
+										const label = new LabelModel({title: labelTitle})
+										this.labelService.create(label)
+											.then(res => {
+												const labelTask = new LabelTask({
+													taskId: task.id,
+													labelId: res.id,
 												})
-												.catch(e => {
-													this.error(e, this)
-												})
-										} else {
-											// label not found, create it
-											const label = new LabelModel({title: labelTitle})
-											this.labelService.create(label)
-												.then(res => {
-													const labelTask = new LabelTask({
-														taskId: task.id,
-														labelId: res.id,
+												this.labelTaskService.create(labelTask)
+													.then(result => {
+														task.labels.push(res)
+
+														// Remove the label text from the task title
+														task.title = task.title.replace(` ~${labelTitle}`, '')
+
+														// Make the promise done (the one with the index 0 does not exist)
+														labelAddings[index - 1].resolve(result)
 													})
-													this.labelTaskService.create(labelTask)
-														.then(result => {
-															task.labels.push(res)
+													.catch(e => {
+														this.error(e, this)
+													})
+											})
+											.catch(e => {
+												this.error(e, this)
+											})
+									}
+								})
+								.catch(e => {
+									this.error(e, this)
+								})
+						})
 
-															// Remove the label text from the task title
-															task.title = task.title.replace(` ~${labelTitle}`, '')
-
-															// Make the promise done (the one with the index 0 does not exist)
-															labelAddings[index-1].resolve(result)
-														})
-														.catch(e => {
-															this.error(e, this)
-														})
-												})
-												.catch(e => {
-													this.error(e, this)
-												})
-										}
+						// This waits to update the task until all labels have been added and the title has
+						// been modified to remove each label text
+						Promise.all(labelAddsToWaitFor)
+							.then(() => {
+								this.taskService.update(task)
+									.then(updatedTask => {
+										this.updateTasks(updatedTask)
 									})
 									.catch(e => {
 										this.error(e, this)
 									})
 							})
-
-							// This waits to update the task until all labels have been added and the title has
-							// been modified to remove each label text
-							Promise.all(labelAddsToWaitFor)
-								.then(() => {
-									this.taskService.update(task)
-										.then(updatedTask => {
-											this.updateTasks(updatedTask)
-										})
-										.catch(e => {
-											this.error(e, this)
-										})
-								})
-						}
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			editTask(id) {
-				// Find the selected task and set it to the current object
-				let theTask = this.getTaskById(id) // Somehow this does not work if we directly assign this to this.taskEditTask
-				this.taskEditTask = theTask
-				this.isTaskEdit = true
-			},
-			getTaskById(id) {
-				for (const t in this.tasks) {
-					if (this.tasks[t].id === parseInt(id)) {
-						return this.tasks[t]
 					}
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		editTask(id) {
+			// Find the selected task and set it to the current object
+			let theTask = this.getTaskById(id) // Somehow this does not work if we directly assign this to this.taskEditTask
+			this.taskEditTask = theTask
+			this.isTaskEdit = true
+		},
+		getTaskById(id) {
+			for (const t in this.tasks) {
+				if (this.tasks[t].id === parseInt(id)) {
+					return this.tasks[t]
 				}
-				return {} // FIXME: This should probably throw something to make it clear to the user noting was found
-			},
-			updateTasks(updatedTask) {
-				for (const t in this.tasks) {
-					if (this.tasks[t].id === updatedTask.id) {
-						this.$set(this.tasks, t, updatedTask)
-						break
-					}
+			}
+			return {} // FIXME: This should probably throw something to make it clear to the user noting was found
+		},
+		updateTasks(updatedTask) {
+			for (const t in this.tasks) {
+				if (this.tasks[t].id === updatedTask.id) {
+					this.$set(this.tasks, t, updatedTask)
+					break
 				}
-				this.sortTasks()
-			},
-		}
-	}
+			}
+			this.sortTasks()
+		},
+	},
+}
 </script>
\ No newline at end of file
diff --git a/src/views/list/views/Table.vue b/src/views/list/views/Table.vue
index ee40d136c..5e2ba82da 100644
--- a/src/views/list/views/Table.vue
+++ b/src/views/list/views/Table.vue
@@ -1,14 +1,16 @@
 <template>
-	<div class="table-view loader-container" :class="{'is-loading': taskCollectionService.loading}">
+	<div :class="{'is-loading': taskCollectionService.loading}" class="table-view loader-container">
 		<div class="filter-container">
 			<div class="items">
-				<button class="button" @click="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}">
+				<button @click="() => {showActiveColumnsFilter = !showActiveColumnsFilter; showTaskFilter = false}"
+						class="button">
 					<span class="icon is-small">
 						<icon icon="th"/>
 					</span>
 					Columns
 				</button>
-				<button class="button" @click="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}">
+				<button @click="() => {showTaskFilter = !showTaskFilter; showActiveColumnsFilter = false}"
+						class="button">
 					<span class="icon is-small">
 						<icon icon="filter"/>
 					</span>
@@ -21,22 +23,29 @@
 						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
 						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">Done</fancycheckbox>
 						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.title">Title</fancycheckbox>
-						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">Priority</fancycheckbox>
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.priority">Priority
+						</fancycheckbox>
 						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.labels">Labels</fancycheckbox>
-						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">Assignees</fancycheckbox>
-						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">Due Date</fancycheckbox>
-						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">Start Date</fancycheckbox>
-						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">End Date</fancycheckbox>
-						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">% Done</fancycheckbox>
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.assignees">Assignees
+						</fancycheckbox>
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.dueDate">Due Date
+						</fancycheckbox>
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.startDate">Start Date
+						</fancycheckbox>
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.endDate">End Date
+						</fancycheckbox>
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.percentDone">% Done
+						</fancycheckbox>
 						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.created">Created</fancycheckbox>
 						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">Updated</fancycheckbox>
-						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">Created By</fancycheckbox>
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">Created By
+						</fancycheckbox>
 					</div>
 				</div>
 				<filters
-						v-if="showTaskFilter"
-						v-model="params"
-						@change="loadTasks(1)"
+					@change="loadTasks(1)"
+					v-if="showTaskFilter"
+					v-model="params"
 				/>
 			</transition>
 		</div>
@@ -96,7 +105,7 @@
 			</tr>
 			</thead>
 			<tbody>
-			<tr v-for="t in tasks" :key="t.id">
+			<tr :key="t.id" v-for="t in tasks">
 				<td v-if="activeColumns.id">
 					<router-link :to="{name: 'task.detail', params: { id: t.id }}">
 						<template v-if="t.identifier === ''">
@@ -121,12 +130,12 @@
 				</td>
 				<td v-if="activeColumns.assignees">
 					<user
-							:user="a"
-							:avatar-size="27"
-							:show-username="false"
-							:is-inline="true"
-							v-for="(a, i) in t.assignees"
-							:key="t.id + 'assignee' + a.id + i"
+						:avatar-size="27"
+						:is-inline="true"
+						:key="t.id + 'assignee' + a.id + i"
+						:show-username="false"
+						:user="a"
+						v-for="(a, i) in t.assignees"
 					/>
 				</td>
 				<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
@@ -137,22 +146,43 @@
 				<date-table-cell :date="t.updated" v-if="activeColumns.updated"/>
 				<td v-if="activeColumns.createdBy">
 					<user
-							:user="t.createdBy"
-							:show-username="false"
-							:avatar-size="27"/>
+						:avatar-size="27"
+						:show-username="false"
+						:user="t.createdBy"/>
 				</td>
 			</tr>
 			</tbody>
 		</table>
 
-		<nav class="pagination is-centered" role="navigation" aria-label="pagination" v-if="taskCollectionService.totalPages > 1">
-			<router-link class="pagination-previous" :to="getRouteForPagination(currentPage - 1, 'table')" tag="button" :disabled="currentPage === 1">Previous</router-link>
-			<router-link class="pagination-next" :to="getRouteForPagination(currentPage + 1, 'table')" tag="button" :disabled="currentPage === taskCollectionService.totalPages">Next page</router-link>
+		<nav
+			aria-label="pagination"
+			class="pagination is-centered"
+			role="navigation"
+			v-if="taskCollectionService.totalPages > 1">
+			<router-link
+				:disabled="currentPage === 1"
+				:to="getRouteForPagination(currentPage - 1, 'table')"
+				class="pagination-previous"
+				tag="button">
+				Previous
+			</router-link>
+			<router-link
+				:disabled="currentPage === taskCollectionService.totalPages"
+				:to="getRouteForPagination(currentPage + 1, 'table')"
+				class="pagination-next"
+				tag="button">
+				Next page
+			</router-link>
 			<ul class="pagination-list">
 				<template v-for="(p, i) in pages">
 					<li :key="'page'+i" v-if="p.isEllipsis"><span class="pagination-ellipsis">&hellip;</span></li>
 					<li :key="'page'+i" v-else>
-						<router-link :to="getRouteForPagination(p.number, 'table')" :class="{'is-current': p.number === currentPage}" class="pagination-link" :aria-label="'Goto page ' + p.number">{{ p.number }}</router-link>
+						<router-link
+							:aria-label="'Goto page ' + p.number"
+							:class="{'is-current': p.number === currentPage}"
+							:to="getRouteForPagination(p.number, 'table')"
+							class="pagination-link">{{ p.number }}
+						</router-link>
 					</li>
 				</template>
 			</ul>
@@ -167,100 +197,100 @@
 </template>
 
 <script>
-	import taskList from '../../../components/tasks/mixins/taskList'
-	import User from '../../../components/misc/user'
-	import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
-	import Labels from '../../../components/tasks/partials/labels'
-	import DateTableCell from '../../../components/tasks/partials/date-table-cell'
-	import Fancycheckbox from '../../../components/input/fancycheckbox'
-	import Sort from '../../../components/tasks/partials/sort'
-	import {saveListView} from '../../../helpers/saveListView'
-	import Filters from '../../../components/list/partials/filters'
+import taskList from '../../../components/tasks/mixins/taskList'
+import User from '../../../components/misc/user'
+import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
+import Labels from '../../../components/tasks/partials/labels'
+import DateTableCell from '../../../components/tasks/partials/date-table-cell'
+import Fancycheckbox from '../../../components/input/fancycheckbox'
+import Sort from '../../../components/tasks/partials/sort'
+import {saveListView} from '@/helpers/saveListView'
+import Filters from '../../../components/list/partials/filters'
 
-	export default {
-		name: 'Table',
-		components: {
-			Filters,
-			Sort,
-			Fancycheckbox,
-			DateTableCell,
-			Labels,
-			PriorityLabel,
-			User,
-		},
-		mixins: [
-			taskList,
-		],
-		data() {
-			return {
-				showActiveColumnsFilter: false,
-				activeColumns: {
-					id: true,
-					done: true,
-					title: true,
-					priority: false,
-					labels: true,
-					assignees: true,
-					dueDate: true,
-					startDate: false,
-					endDate: false,
-					percentDone: false,
-					created: false,
-					updated: false,
-					createdBy: false,
-				},
-				sortBy: {
-					id: 'desc',
-				},
-			}
-		},
-		created() {
-			const savedShowColumns = localStorage.getItem('tableViewColumns')
-			if (savedShowColumns !== null) {
-				this.$set(this, 'activeColumns', JSON.parse(savedShowColumns))
-			}
-			const savedSortBy = localStorage.getItem('tableViewSortBy')
-			if (savedSortBy !== null) {
-				this.$set(this, 'sortBy', JSON.parse(savedSortBy))
-			}
-
-			this.$set(this.params, 'filter_by', [])
-			this.$set(this.params, 'filter_value', [])
-			this.$set(this.params, 'filter_comparator', [])
-
-			this.initTasks(1)
-
-			// Save the current list view to local storage
-			// We use local storage and not vuex here to make it persistent across reloads.
-			saveListView(this.$route.params.listId, this.$route.name)
-		},
-		methods: {
-			initTasks(page, search = '') {
-				const params = this.params
-				params.sort_by = []
-				params.order_by = []
-				Object.keys(this.sortBy).map(s => {
-					params.sort_by.push(s)
-					params.order_by.push(this.sortBy[s])
-				})
-				this.loadTasks(page, search, params)
+export default {
+	name: 'Table',
+	components: {
+		Filters,
+		Sort,
+		Fancycheckbox,
+		DateTableCell,
+		Labels,
+		PriorityLabel,
+		User,
+	},
+	mixins: [
+		taskList,
+	],
+	data() {
+		return {
+			showActiveColumnsFilter: false,
+			activeColumns: {
+				id: true,
+				done: true,
+				title: true,
+				priority: false,
+				labels: true,
+				assignees: true,
+				dueDate: true,
+				startDate: false,
+				endDate: false,
+				percentDone: false,
+				created: false,
+				updated: false,
+				createdBy: false,
 			},
-			sort(property) {
-				const order = this.sortBy[property]
-				if (typeof order === 'undefined' || order === 'none') {
-					this.$set(this.sortBy, property, 'desc')
-				} else if (order === 'desc') {
-					this.$set(this.sortBy, property, 'asc')
-				} else {
-					this.$delete(this.sortBy, property)
-				}
-				this.initTasks(this.currentPage, this.searchTerm)
-				// Save the order to be able to retrieve them later
-				localStorage.setItem('tableViewSortBy', JSON.stringify(this.sortBy))
-			},
-			saveTaskColumns() {
-				localStorage.setItem('tableViewColumns', JSON.stringify(this.activeColumns))
+			sortBy: {
+				id: 'desc',
 			},
+		}
+	},
+	created() {
+		const savedShowColumns = localStorage.getItem('tableViewColumns')
+		if (savedShowColumns !== null) {
+			this.$set(this, 'activeColumns', JSON.parse(savedShowColumns))
+		}
+		const savedSortBy = localStorage.getItem('tableViewSortBy')
+		if (savedSortBy !== null) {
+			this.$set(this, 'sortBy', JSON.parse(savedSortBy))
+		}
+
+		this.$set(this.params, 'filter_by', [])
+		this.$set(this.params, 'filter_value', [])
+		this.$set(this.params, 'filter_comparator', [])
+
+		this.initTasks(1)
+
+		// Save the current list view to local storage
+		// We use local storage and not vuex here to make it persistent across reloads.
+		saveListView(this.$route.params.listId, this.$route.name)
+	},
+	methods: {
+		initTasks(page, search = '') {
+			const params = this.params
+			params.sort_by = []
+			params.order_by = []
+			Object.keys(this.sortBy).map(s => {
+				params.sort_by.push(s)
+				params.order_by.push(this.sortBy[s])
+			})
+			this.loadTasks(page, search, params)
 		},
-	}
+		sort(property) {
+			const order = this.sortBy[property]
+			if (typeof order === 'undefined' || order === 'none') {
+				this.$set(this.sortBy, property, 'desc')
+			} else if (order === 'desc') {
+				this.$set(this.sortBy, property, 'asc')
+			} else {
+				this.$delete(this.sortBy, property)
+			}
+			this.initTasks(this.currentPage, this.searchTerm)
+			// Save the order to be able to retrieve them later
+			localStorage.setItem('tableViewSortBy', JSON.stringify(this.sortBy))
+		},
+		saveTaskColumns() {
+			localStorage.setItem('tableViewColumns', JSON.stringify(this.activeColumns))
+		},
+	},
+}
 </script>
diff --git a/src/views/migrator/Migrate.vue b/src/views/migrator/Migrate.vue
index 1868b8f8c..fd21f6003 100644
--- a/src/views/migrator/Migrate.vue
+++ b/src/views/migrator/Migrate.vue
@@ -3,8 +3,8 @@
 		<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.service', params: {service: m}}" v-for="m in availableMigrators" :key="m">
-				<img :src="`/images/migration/${m}.png`" :alt="m"/>
+			<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>
 		</div>
@@ -12,15 +12,15 @@
 </template>
 
 <script>
-	export default {
-		name: 'migrate.service',
-		mounted() {
-			this.setTitle('Import your data to Vikunja')
+export default {
+	name: 'migrate.service',
+	mounted() {
+		this.setTitle('Import your data to Vikunja')
+	},
+	computed: {
+		availableMigrators() {
+			return this.$store.state.config.availableMigrators
 		},
-		computed: {
-			availableMigrators() {
-				return this.$store.state.config.availableMigrators
-			},
-		},
-	}
+	},
+}
 </script>
diff --git a/src/views/migrator/MigrateService.vue b/src/views/migrator/MigrateService.vue
index 7a280f7c3..f09d8a214 100644
--- a/src/views/migrator/MigrateService.vue
+++ b/src/views/migrator/MigrateService.vue
@@ -1,42 +1,42 @@
 <template>
 	<migration
-			:identifier="identifier"
-			:name="name"
+		:identifier="identifier"
+		:name="name"
 	/>
 </template>
 
 <script>
-	import Migration from '../../components/migrator/migration'
-	import router from '../../router'
+import Migration from '../../components/migrator/migration'
+import router from '../../router'
 
-	export default {
-		name: 'migrateService',
-		components: {
-			Migration,
-		},
-		data() {
-			return {
-				name: '',
-				identifier: '',
-			}
-		},
-		mounted() {
-			this.setTitle(`Import your data from ${this.name} into Vikunja`)
-		},
-		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'})
-			}
-		},
-	}
+export default {
+	name: 'migrateService',
+	components: {
+		Migration,
+	},
+	data() {
+		return {
+			name: '',
+			identifier: '',
+		}
+	},
+	mounted() {
+		this.setTitle(`Import your data from ${this.name} into Vikunja`)
+	},
+	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>
 
diff --git a/src/views/namespaces/EditNamespace.vue b/src/views/namespaces/EditNamespace.vue
index 2bcc150f5..912dc82b3 100644
--- a/src/views/namespaces/EditNamespace.vue
+++ b/src/views/namespaces/EditNamespace.vue
@@ -17,27 +17,27 @@
 							<label class="label" for="namespacetext">Namespace Name</label>
 							<div class="control">
 								<input
-										v-focus
-										:class="{ 'disabled': namespaceService.loading}"
-										:disabled="namespaceService.loading"
-										class="input"
-										type="text"
-										id="namespacetext"
-										placeholder="The namespace text is here..."
-										v-model="namespace.title"/>
+									:class="{ 'disabled': namespaceService.loading}"
+									:disabled="namespaceService.loading"
+									class="input"
+									id="namespacetext"
+									placeholder="The namespace text is here..."
+									type="text"
+									v-focus
+									v-model="namespace.title"/>
 							</div>
 						</div>
 						<div class="field">
 							<label class="label" for="namespacedescription">Description</label>
 							<div class="control">
 								<editor
-										:class="{ 'disabled': namespaceService.loading}"
-										:disabled="namespaceService.loading"
-										placeholder="The namespaces description goes here..."
-										id="namespacedescription"
-										v-model="namespace.description"
-										:preview-is-default="false"
-										v-if="editorActive"
+									:class="{ 'disabled': namespaceService.loading}"
+									:disabled="namespaceService.loading"
+									:preview-is-default="false"
+									id="namespacedescription"
+									placeholder="The namespaces description goes here..."
+									v-if="editorActive"
+									v-model="namespace.description"
 								/>
 							</div>
 						</div>
@@ -45,8 +45,8 @@
 							<label class="label" for="isArchivedCheck">Is Archived</label>
 							<div class="control">
 								<fancycheckbox
-										v-model="namespace.isArchived"
-										v-tooltip="'If a namespace is archived, you cannot create new lists or edit it.'">
+									v-model="namespace.isArchived"
+									v-tooltip="'If a namespace is archived, you cannot create new lists or edit it.'">
 									This namespace is archived
 								</fancycheckbox>
 							</div>
@@ -61,14 +61,14 @@
 
 					<div class="columns bigbuttons">
 						<div class="column">
-							<button @click="submit()" class="button is-primary is-fullwidth"
-									:class="{ 'is-loading': namespaceService.loading}">
+							<button :class="{ 'is-loading': namespaceService.loading}" @click="submit()"
+									class="button is-primary is-fullwidth">
 								Save
 							</button>
 						</div>
 						<div class="column is-1">
-							<button @click="showDeleteModal = true" class="button is-danger is-fullwidth"
-									:class="{ 'is-loading': namespaceService.loading}">
+							<button :class="{ 'is-loading': namespaceService.loading}" @click="showDeleteModal = true"
+									class="button is-danger is-fullwidth">
 								<span class="icon is-small">
 									<icon icon="trash-alt"/>
 								</span>
@@ -80,22 +80,22 @@
 		</div>
 
 		<component
-				:is="manageUsersComponent"
-				:id="namespace.id"
-				type="namespace"
-				shareType="user"
-				:userIsAdmin="userIsAdmin"/>
+			:id="namespace.id"
+			:is="manageUsersComponent"
+			:userIsAdmin="userIsAdmin"
+			shareType="user"
+			type="namespace"/>
 		<component
-				:is="manageTeamsComponent"
-				:id="namespace.id"
-				type="namespace"
-				shareType="team"
-				:userIsAdmin="userIsAdmin"/>
+			:id="namespace.id"
+			:is="manageTeamsComponent"
+			:userIsAdmin="userIsAdmin"
+			shareType="team"
+			type="namespace"/>
 
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				v-on:submit="deleteNamespace()">
+			@close="showDeleteModal = false"
+			v-if="showDeleteModal"
+			v-on:submit="deleteNamespace()">
 			<span slot="header">Delete the namespace</span>
 			<p slot="text">Are you sure you want to delete this namespace and all of its contents?
 				<br/>This includes lists & tasks and <b>CANNOT BE UNDONE!</b></p>
@@ -104,101 +104,101 @@
 </template>
 
 <script>
-	import router from '../../router'
-	import manageSharing from '../../components/sharing/userTeam'
+import router from '../../router'
+import manageSharing from '../../components/sharing/userTeam'
 
-	import NamespaceService from '../../services/namespace'
-	import NamespaceModel from '../../models/namespace'
-	import Fancycheckbox from '../../components/input/fancycheckbox'
-	import ColorPicker from '../../components/input/colorPicker'
-	import LoadingComponent from '../../components/misc/loading'
-	import ErrorComponent from '../../components/misc/error'
+import NamespaceService from '../../services/namespace'
+import NamespaceModel from '../../models/namespace'
+import Fancycheckbox from '../../components/input/fancycheckbox'
+import ColorPicker from '../../components/input/colorPicker'
+import LoadingComponent from '../../components/misc/loading'
+import ErrorComponent from '../../components/misc/error'
 
-	export default {
-		name: "EditNamespace",
-		data() {
-			return {
-				namespaceService: NamespaceService,
-				manageUsersComponent: '',
-				manageTeamsComponent: '',
+export default {
+	name: 'EditNamespace',
+	data() {
+		return {
+			namespaceService: NamespaceService,
+			manageUsersComponent: '',
+			manageTeamsComponent: '',
 
-				namespace: NamespaceModel,
-				showDeleteModal: false,
-				editorActive: false,
-			}
-		},
-		components: {
-			ColorPicker,
-			Fancycheckbox,
-			manageSharing,
-			editor: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
-		},
-		beforeMount() {
-			this.namespace.id = this.$route.params.id
-		},
-		created() {
-			this.namespaceService = new NamespaceService()
-			this.namespace = new NamespaceModel()
-			this.loadNamespace()
-		},
-		watch: {
-			// call again the method if the route changes
-			'$route': 'loadNamespace'
-		},
-		computed: {
-			userIsAdmin() {
-				return this.namespace.owner && this.namespace.owner.id === this.$store.state.auth.info.id
-			},
-		},
-		methods: {
-			loadNamespace() {
-				// This makes the editor trigger its mounted function again which makes it forget every input
-				// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
-				// which made it impossible to detect change from the outside. Therefore the component would
-				// not update if new content from the outside was made available.
-				// See https://github.com/NikulinIlya/vue-easymde/issues/3
-				this.editorActive = false
-				this.$nextTick(() => this.editorActive = true)
-
-				let namespace = new NamespaceModel({id: this.$route.params.id})
-				this.namespaceService.get(namespace)
-					.then(r => {
-						this.$set(this, 'namespace', r)
-						// This will trigger the dynamic loading of components once we actually have all the data to pass to them
-						this.manageTeamsComponent = 'manageSharing'
-						this.manageUsersComponent = 'manageSharing'
-						this.setTitle(`Edit ${this.namespace.title}`)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			submit() {
-				this.namespaceService.update(this.namespace)
-					.then(r => {
-						// Update the namespace in the parent
-						this.$store.commit('namespaces/setNamespaceById', r)
-						this.success({message: 'The namespace was successfully updated.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			deleteNamespace() {
-				this.namespaceService.delete(this.namespace)
-					.then(() => {
-						this.success({message: 'The namespace was successfully deleted.'}, this)
-						router.push({name: 'home'})
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			}
+			namespace: NamespaceModel,
+			showDeleteModal: false,
+			editorActive: false,
 		}
-	}
+	},
+	components: {
+		ColorPicker,
+		Fancycheckbox,
+		manageSharing,
+		editor: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	beforeMount() {
+		this.namespace.id = this.$route.params.id
+	},
+	created() {
+		this.namespaceService = new NamespaceService()
+		this.namespace = new NamespaceModel()
+		this.loadNamespace()
+	},
+	watch: {
+		// call again the method if the route changes
+		'$route': 'loadNamespace',
+	},
+	computed: {
+		userIsAdmin() {
+			return this.namespace.owner && this.namespace.owner.id === this.$store.state.auth.info.id
+		},
+	},
+	methods: {
+		loadNamespace() {
+			// This makes the editor trigger its mounted function again which makes it forget every input
+			// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
+			// which made it impossible to detect change from the outside. Therefore the component would
+			// not update if new content from the outside was made available.
+			// See https://github.com/NikulinIlya/vue-easymde/issues/3
+			this.editorActive = false
+			this.$nextTick(() => this.editorActive = true)
+
+			let namespace = new NamespaceModel({id: this.$route.params.id})
+			this.namespaceService.get(namespace)
+				.then(r => {
+					this.$set(this, 'namespace', r)
+					// This will trigger the dynamic loading of components once we actually have all the data to pass to them
+					this.manageTeamsComponent = 'manageSharing'
+					this.manageUsersComponent = 'manageSharing'
+					this.setTitle(`Edit ${this.namespace.title}`)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		submit() {
+			this.namespaceService.update(this.namespace)
+				.then(r => {
+					// Update the namespace in the parent
+					this.$store.commit('namespaces/setNamespaceById', r)
+					this.success({message: 'The namespace was successfully updated.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		deleteNamespace() {
+			this.namespaceService.delete(this.namespace)
+				.then(() => {
+					this.success({message: 'The namespace was successfully deleted.'}, this)
+					router.push({name: 'home'})
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
 </script>
\ No newline at end of file
diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue
index fbbf4830d..8b275bac8 100644
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@@ -7,11 +7,11 @@
 			Create new namespace
 		</router-link>
 
-		<fancycheckbox v-model="showArchived" class="show-archived-check">
+		<fancycheckbox class="show-archived-check" v-model="showArchived">
 			Show Archived
 		</fancycheckbox>
 
-		<div class="namespace" v-for="n in namespaces" :key="`n${n.id}`">
+		<div :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
 			<h1>
 				<span>{{ n.title }}</span>
 				<span class="is-archived" v-if="n.isArchived">
@@ -22,18 +22,18 @@
 			<div class="lists">
 				<template v-for="l in n.lists">
 					<router-link
-							:to="{ name: 'list.index', params: { listId: l.id} }"
-							class="list"
-							:key="`l${l.id}`"
-							v-if="showArchived ? true : !l.isArchived"
-							:style="{
-							'background-color': l.hexColor,
-							'background-image': typeof backgrounds[l.id] !== 'undefined' ? `url(${backgrounds[l.id]})` : false,
-						}"
-							:class="{
+						:class="{
 							'has-light-text': !colorIsDark(l.hexColor),
 							'has-background': typeof backgrounds[l.id] !== 'undefined',
 						}"
+						:key="`l${l.id}`"
+						:style="{
+							'background-color': l.hexColor,
+							'background-image': typeof backgrounds[l.id] !== 'undefined' ? `url(${backgrounds[l.id]})` : false,
+						}"
+						:to="{ name: 'list.index', params: { listId: l.id} }"
+						class="list"
+						v-if="showArchived ? true : !l.isArchived"
 					>
 						<div class="is-archived-container">
 						<span class="is-archived" v-if="l.isArchived">
@@ -49,50 +49,50 @@
 </template>
 
 <script>
-	import {mapState} from 'vuex'
-	import ListService from '../../services/list'
-	import Fancycheckbox from '../../components/input/fancycheckbox'
+import {mapState} from 'vuex'
+import ListService from '../../services/list'
+import Fancycheckbox from '../../components/input/fancycheckbox'
 
-	export default {
-		name: 'ListNamespaces',
-		components: {
-			Fancycheckbox,
+export default {
+	name: 'ListNamespaces',
+	components: {
+		Fancycheckbox,
+	},
+	data() {
+		return {
+			showArchived: false,
+			// listId is the key, the object is the background blob
+			backgrounds: {},
+		}
+	},
+	created() {
+		this.loadBackgroundsForLists()
+	},
+	mounted() {
+		this.setTitle('Namespaces & Lists')
+	},
+	computed: mapState({
+		namespaces(state) {
+			return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
 		},
-		data() {
-			return {
-				showArchived: false,
-				// listId is the key, the object is the background blob
-				backgrounds: {},
-			}
-		},
-		created() {
-			this.loadBackgroundsForLists()
-		},
-		mounted() {
-			this.setTitle('Namespaces & Lists')
-		},
-		computed: mapState({
-			namespaces(state) {
-				return state.namespaces.namespaces.filter(n => this.showArchived ? true : !n.isArchived)
-			},
-		}),
-		methods: {
-			loadBackgroundsForLists() {
-				const listService = new ListService()
-				this.namespaces.forEach(n => {
-					n.lists.forEach(l => {
-						if (l.backgroundInformation) {
-							listService.background(l)
-								.then(b => {
-									this.$set(this.backgrounds, l.id, b)
-								})
-								.catch(e => {
-									this.error(e, this)
-								})
-						}
-					})
+	}),
+	methods: {
+		loadBackgroundsForLists() {
+			const listService = new ListService()
+			this.namespaces.forEach(n => {
+				n.lists.forEach(l => {
+					if (l.backgroundInformation) {
+						listService.background(l)
+							.then(b => {
+								this.$set(this.backgrounds, l.id, b)
+							})
+							.catch(e => {
+								this.error(e, this)
+							})
+					}
 				})
-			},
+			})
 		},
-	}
+	},
+}
 </script>
diff --git a/src/views/namespaces/NewNamespace.vue b/src/views/namespaces/NewNamespace.vue
index f2e9983e9..d6fb26bf8 100644
--- a/src/views/namespaces/NewNamespace.vue
+++ b/src/views/namespaces/NewNamespace.vue
@@ -1,23 +1,24 @@
 <template>
 	<div class="fullpage">
-		<a class="close" @click="back()">
+		<a @click="back()" class="close">
 			<icon :icon="['far', 'times-circle']">
 			</icon>
 		</a>
 		<h3>Create a new namespace</h3>
 		<div class="field is-grouped">
 			<p class="control is-expanded" v-bind:class="{ 'is-loading': namespaceService.loading}">
-				<input v-focus
-					class="input"
-					v-bind:class="{ 'disabled': namespaceService.loading}"
-					v-model="namespace.title"
-					type="text"
+				<input
 					@keyup.enter="newNamespace()"
 					@keyup.esc="back()"
-					placeholder="The namespace's name goes here..."/>
+					class="input"
+					placeholder="The namespace's name goes here..."
+					type="text"
+					:class="{ 'disabled': namespaceService.loading}"
+					v-focus
+					v-model="namespace.title"/>
 			</p>
 			<p class="control">
-				<button class="button is-success noshadow" @click="newNamespace()" :disabled="namespace.title === ''">
+				<button :disabled="namespace.title === ''" @click="newNamespace()" class="button is-success noshadow">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
@@ -28,55 +29,57 @@
 		<p class="help is-danger" v-if="showError && namespace.title === ''">
 			Please specify a title.
 		</p>
-		<p class="small" v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.'">
+		<p
+			class="small"
+			v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with. In fact, every list belongs to a namepace.'">
 			What's a namespace?</p>
 	</div>
 </template>
 
 <script>
-	import router from '../../router'
-	import NamespaceModel from "../../models/namespace";
-	import NamespaceService from "../../services/namespace";
-	import {IS_FULLPAGE} from '../../store/mutation-types'
+import router from '../../router'
+import NamespaceModel from '../../models/namespace'
+import NamespaceService from '../../services/namespace'
+import {IS_FULLPAGE} from '@/store/mutation-types'
 
-	export default {
-		name: "NewNamespace",
-		data() {
-			return {
-				showError: false,
-				namespace: NamespaceModel,
-				namespaceService: NamespaceService,
-			}
-		},
-		created() {
-			this.namespace = new NamespaceModel()
-			this.namespaceService = new NamespaceService()
-			this.$store.commit(IS_FULLPAGE, true)
-		},
-		mounted() {
-			this.setTitle('Create a new namespace')
-		},
-		methods: {
-			newNamespace() {
-				if (this.namespace.title === '') {
-					this.showError = true
-					return
-				}
-				this.showError = false
-
-				this.namespaceService.create(this.namespace)
-					.then(r => {
-						this.$store.commit('namespaces/addNamespace', r)
-						this.success({message: 'The namespace was successfully created.'}, this)
-						router.back()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			back() {
-				router.go(-1)
-			}
+export default {
+	name: 'NewNamespace',
+	data() {
+		return {
+			showError: false,
+			namespace: NamespaceModel,
+			namespaceService: NamespaceService,
 		}
-	}
+	},
+	created() {
+		this.namespace = new NamespaceModel()
+		this.namespaceService = new NamespaceService()
+		this.$store.commit(IS_FULLPAGE, true)
+	},
+	mounted() {
+		this.setTitle('Create a new namespace')
+	},
+	methods: {
+		newNamespace() {
+			if (this.namespace.title === '') {
+				this.showError = true
+				return
+			}
+			this.showError = false
+
+			this.namespaceService.create(this.namespace)
+				.then(r => {
+					this.$store.commit('namespaces/addNamespace', r)
+					this.success({message: 'The namespace was successfully created.'}, this)
+					router.back()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		back() {
+			router.go(-1)
+		},
+	},
+}
 </script>
diff --git a/src/views/sharing/LinkSharingAuth.vue b/src/views/sharing/LinkSharingAuth.vue
index 3fd8b0ad5..d6555c6d5 100644
--- a/src/views/sharing/LinkSharingAuth.vue
+++ b/src/views/sharing/LinkSharingAuth.vue
@@ -9,33 +9,33 @@
 </template>
 
 <script>
-	import router from '../../router'
+import router from '../../router'
 
-	export default {
-		name: 'LinkSharingAuth',
-		data() {
-			return {
-				hash: '',
-				loading: true,
-			}
+export default {
+	name: 'LinkSharingAuth',
+	data() {
+		return {
+			hash: '',
+			loading: true,
+		}
+	},
+	created() {
+		this.auth()
+	},
+	mounted() {
+		this.setTitle('Authenticating...')
+	},
+	methods: {
+		auth() {
+			this.$store.dispatch('auth/linkShareAuth', this.$route.params.share)
+				.then((r) => {
+					this.loading = false
+					router.push({name: 'list.list', params: {listId: r.list_id}})
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-		created() {
-			this.auth()
-		},
-		mounted() {
-			this.setTitle('Authenticating...')
-		},
-		methods: {
-			auth() {
-				this.$store.dispatch('auth/linkShareAuth', this.$route.params.share)
-					.then((r) => {
-						this.loading = false
-						router.push({name: 'list.list', params: {listId: r.list_id}})
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			}
-		},
-	}
+	},
+}
 </script>
diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue
index 3f23d0dc9..e09f7e529 100644
--- a/src/views/tasks/ShowTasks.vue
+++ b/src/views/tasks/ShowTasks.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="is-max-width-desktop show-tasks">
 		<fancycheckbox
-				class="is-pulled-right"
-				v-if="!showAll"
-				v-model="showNulls"
-				@change="loadPendingTasks"
+			@change="loadPendingTasks"
+			class="is-pulled-right"
+			v-if="!showAll"
+			v-model="showNulls"
 		>
 			Show tasks without dates
 		</fancycheckbox>
@@ -12,184 +12,184 @@
 		<h3 v-else>
 			Tasks from
 			<flat-pickr
-					:class="{ 'disabled': taskService.loading}"
-					class="input"
-					:disabled="taskService.loading"
-					v-model="cStartDate"
-					:config="flatPickerConfig"
-					@on-close="loadPendingTasks"
+				:class="{ 'disabled': taskService.loading}"
+				:config="flatPickerConfig"
+				:disabled="taskService.loading"
+				@on-close="loadPendingTasks"
+				class="input"
+				v-model="cStartDate"
 			/>
 			until
 			<flat-pickr
-					:class="{ 'disabled': taskService.loading}"
-					class="input"
-					:disabled="taskService.loading"
-					v-model="cEndDate"
-					:config="flatPickerConfig"
-					@on-close="loadPendingTasks"
+				:class="{ 'disabled': taskService.loading}"
+				:config="flatPickerConfig"
+				:disabled="taskService.loading"
+				@on-close="loadPendingTasks"
+				class="input"
+				v-model="cEndDate"
 			/>
 		</h3>
 		<template v-if="!taskService.loading && (!hasUndoneTasks || !tasks || tasks.length === 0)">
 			<h3 class="nothing">Nothing to do - Have a nice day!</h3>
-			<img src="/images/cool.svg" alt=""/>
+			<img alt="" src="/images/cool.svg"/>
 		</template>
-		<div class="spinner" :class="{ 'is-loading': taskService.loading}"></div>
+		<div :class="{ 'is-loading': taskService.loading}" class="spinner"></div>
 		<div class="tasks" v-if="tasks && tasks.length > 0">
-			<div class="task" v-for="t in tasks" :key="t.id">
-				<single-task-in-list :the-task="t" @taskUpdated="updateTasks" :show-list="true"/>
+			<div :key="t.id" class="task" v-for="t in tasks">
+				<single-task-in-list :show-list="true" :the-task="t" @taskUpdated="updateTasks"/>
 			</div>
 		</div>
 	</div>
 </template>
 <script>
-	import TaskService from '../../services/task'
-	import SingleTaskInList from '../../components/tasks/partials/singleTaskInList'
-	import {HAS_TASKS} from '../../store/mutation-types'
-	import {mapState} from 'vuex'
+import TaskService from '../../services/task'
+import SingleTaskInList from '../../components/tasks/partials/singleTaskInList'
+import {HAS_TASKS} from '@/store/mutation-types'
+import {mapState} from 'vuex'
 
-	import flatPickr from 'vue-flatpickr-component'
-	import 'flatpickr/dist/flatpickr.css'
-	import Fancycheckbox from '../../components/input/fancycheckbox'
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
+import Fancycheckbox from '../../components/input/fancycheckbox'
 
-	export default {
-		name: 'ShowTasks',
-		components: {
-			Fancycheckbox,
-			SingleTaskInList,
-			flatPickr,
+export default {
+	name: 'ShowTasks',
+	components: {
+		Fancycheckbox,
+		SingleTaskInList,
+		flatPickr,
+	},
+	data() {
+		return {
+			tasks: [],
+			hasUndoneTasks: false,
+			taskService: TaskService,
+			showNulls: true,
+
+			cStartDate: null,
+			cEndDate: null,
+
+			flatPickerConfig: {
+				altFormat: 'j M Y H:i',
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				time_24hr: true,
+			},
+		}
+	},
+	props: {
+		startDate: Date,
+		endDate: Date,
+		showAll: Boolean,
+	},
+	created() {
+		this.taskService = new TaskService()
+		this.cStartDate = this.startDate
+		this.cEndDate = this.endDate
+		this.loadPendingTasks()
+	},
+	watch: {
+		'$route': 'loadPendingTasks',
+		startDate(newVal) {
+			this.cStartDate = newVal
 		},
-		data() {
-			return {
-				tasks: [],
-				hasUndoneTasks: false,
-				taskService: TaskService,
-				showNulls: true,
-
-				cStartDate: null,
-				cEndDate: null,
-
-				flatPickerConfig: {
-					altFormat: 'j M Y H:i',
-					altInput: true,
-					dateFormat: 'Y-m-d H:i',
-					enableTime: true,
-					time_24hr: true,
-				},
+		endDate(newVal) {
+			this.cEndDate = newVal
+		},
+	},
+	computed: mapState({
+		userAuthenticated: state => state.auth.authenticated,
+	}),
+	methods: {
+		loadPendingTasks() {
+			// Since this route is authentication only, users would get an error message if they access the page unauthenticated.
+			// Since this component is mounted as the home page before unauthenticated users get redirected
+			// to the login page, they will almost always see the error message.
+			if (!this.userAuthenticated) {
+				return
 			}
-		},
-		props: {
-			startDate: Date,
-			endDate: Date,
-			showAll: Boolean,
-		},
-		created() {
-			this.taskService = new TaskService()
-			this.cStartDate = this.startDate
-			this.cEndDate = this.endDate
-			this.loadPendingTasks()
-		},
-		watch: {
-			'$route': 'loadPendingTasks',
-			startDate(newVal) {
-				this.cStartDate = newVal
-			},
-			endDate(newVal) {
-				this.cEndDate = newVal
-			},
-		},
-		computed: mapState({
-			userAuthenticated: state => state.auth.authenticated,
-		}),
-		methods: {
-			loadPendingTasks() {
-				// Since this route is authentication only, users would get an error message if they access the page unauthenticated.
-				// Since this component is mounted as the home page before unauthenticated users get redirected
-				// to the login page, they will almost always see the error message.
-				if (!this.userAuthenticated) {
-					return
-				}
 
-				// Make sure all dates are date objects
-				this.cStartDate = new Date(this.cStartDate)
-				this.cEndDate = new Date(this.cEndDate)
+			// Make sure all dates are date objects
+			this.cStartDate = new Date(this.cStartDate)
+			this.cEndDate = new Date(this.cEndDate)
 
-				if (this.showAll) {
-					this.setTitle('Current Tasks')
-				} else {
-					this.setTitle(`Tasks from ${this.cStartDate.toLocaleDateString()} until ${this.cEndDate.toLocaleDateString()}`)
-				}
+			if (this.showAll) {
+				this.setTitle('Current Tasks')
+			} else {
+				this.setTitle(`Tasks from ${this.cStartDate.toLocaleDateString()} until ${this.cEndDate.toLocaleDateString()}`)
+			}
 
-				const params = {
-					sort_by: ['due_date', 'id'],
-					order_by: ['desc', 'desc'],
-					filter_by: ['done'],
-					filter_value: [false],
-					filter_comparator: ['equals'],
-					filter_concat: 'and',
-					filter_include_nulls: this.showNulls,
-				}
-				if (!this.showAll) {
-					if(this.showNulls) {
-						params.filter_by.push('start_date')
-						params.filter_value.push(this.cStartDate)
-						params.filter_comparator.push('greater')
-
-						params.filter_by.push('end_date')
-						params.filter_value.push(this.cEndDate)
-						params.filter_comparator.push('less')
-					}
-
-					params.filter_by.push('due_date')
-					params.filter_value.push(this.cEndDate)
-					params.filter_comparator.push('less')
-
-					params.filter_by.push('due_date')
+			const params = {
+				sort_by: ['due_date', 'id'],
+				order_by: ['desc', 'desc'],
+				filter_by: ['done'],
+				filter_value: [false],
+				filter_comparator: ['equals'],
+				filter_concat: 'and',
+				filter_include_nulls: this.showNulls,
+			}
+			if (!this.showAll) {
+				if (this.showNulls) {
+					params.filter_by.push('start_date')
 					params.filter_value.push(this.cStartDate)
 					params.filter_comparator.push('greater')
+
+					params.filter_by.push('end_date')
+					params.filter_value.push(this.cEndDate)
+					params.filter_comparator.push('less')
 				}
 
-				this.taskService.getAll({}, params)
-					.then(r => {
-						if (r.length > 0) {
-							for (const index in r) {
-								if (r[index].done !== true) {
-									this.hasUndoneTasks = true
-								}
+				params.filter_by.push('due_date')
+				params.filter_value.push(this.cEndDate)
+				params.filter_comparator.push('less')
+
+				params.filter_by.push('due_date')
+				params.filter_value.push(this.cStartDate)
+				params.filter_comparator.push('greater')
+			}
+
+			this.taskService.getAll({}, params)
+				.then(r => {
+					if (r.length > 0) {
+						for (const index in r) {
+							if (r[index].done !== true) {
+								this.hasUndoneTasks = true
 							}
 						}
-						this.$set(this, 'tasks', r.filter(t => !t.done))
-						this.$store.commit(HAS_TASKS, r.length > 0)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			sortTasks() {
-				if (this.tasks === null || this.tasks === []) {
-					return
-				}
-				return this.tasks.sort(function (a, b) {
-					if (a.done < b.done)
-						return -1
-					if (a.done > b.done)
-						return 1
-
-					if (a.id > b.id)
-						return -1
-					if (a.id < b.id)
-						return 1
-					return 0
-				})
-			},
-			updateTasks(updatedTask) {
-				for (const t in this.tasks) {
-					if (this.tasks[t].id === updatedTask.id) {
-						this.$set(this.tasks, t, updatedTask)
-						break
 					}
-				}
-				this.sortTasks()
-			},
+					this.$set(this, 'tasks', r.filter(t => !t.done))
+					this.$store.commit(HAS_TASKS, r.length > 0)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		sortTasks() {
+			if (this.tasks === null || this.tasks === []) {
+				return
+			}
+			return this.tasks.sort(function (a, b) {
+				if (a.done < b.done)
+					return -1
+				if (a.done > b.done)
+					return 1
+
+				if (a.id > b.id)
+					return -1
+				if (a.id < b.id)
+					return 1
+				return 0
+			})
+		},
+		updateTasks(updatedTask) {
+			for (const t in this.tasks) {
+				if (this.tasks[t].id === updatedTask.id) {
+					this.$set(this.tasks, t, updatedTask)
+					break
+				}
+			}
+			this.sortTasks()
+		},
+	},
+}
 </script>
diff --git a/src/views/tasks/ShowTasksInRange.vue b/src/views/tasks/ShowTasksInRange.vue
index 003e4e37a..1ed278717 100644
--- a/src/views/tasks/ShowTasksInRange.vue
+++ b/src/views/tasks/ShowTasksInRange.vue
@@ -1,46 +1,46 @@
 <template>
 	<div class="content has-text-centered">
 		<ShowTasks
-			:start-date="startDate"
 			:end-date="endDate"
+			:start-date="startDate"
 		/>
 	</div>
 </template>
 
 <script>
-	import ShowTasks from './ShowTasks'
+import ShowTasks from './ShowTasks'
 
-	export default {
-		name: 'ShowTasksInRange',
-		components: {
-			ShowTasks,
-		},
-		data() {
-			return {
-				startDate: new Date(this.$route.params.startDateUnix),
-				endDate: new Date(this.$route.params.endDateUnix),
-			}
-		},
-		watch: {
-			// call again the method if the route changes
-			'$route': 'setDates'
-		},
-		created() {
-			this.setDates();
-		},
-		methods: {
-			setDates() {
-				switch (this.$route.params.type) {
-					case 'week':
-						this.startDate = new Date();
-						this.endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000);
-						break;
-					case 'month':
-						this.startDate = new Date();
-						this.endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1));
-						break;
-				}
-			}
+export default {
+	name: 'ShowTasksInRange',
+	components: {
+		ShowTasks,
+	},
+	data() {
+		return {
+			startDate: new Date(this.$route.params.startDateUnix),
+			endDate: new Date(this.$route.params.endDateUnix),
 		}
-	}
+	},
+	watch: {
+		// call again the method if the route changes
+		'$route': 'setDates',
+	},
+	created() {
+		this.setDates()
+	},
+	methods: {
+		setDates() {
+			switch (this.$route.params.type) {
+				case 'week':
+					this.startDate = new Date()
+					this.endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
+					break
+				case 'month':
+					this.startDate = new Date()
+					this.endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
+					break
+			}
+		},
+	},
+}
 </script>
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index b9c3a3116..765f9f465 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="loader-container task-view-container" :class="{ 'is-loading': taskService.loading}">
+	<div :class="{ 'is-loading': taskService.loading}" class="loader-container task-view-container">
 		<div class="task-view">
 			<div class="heading">
 				<h1 class="title task-id" v-if="task.identifier === ''">
@@ -9,8 +9,8 @@
 					{{ task.identifier }}
 				</h1>
 				<div class="is-done" v-if="task.done">Done</div>
-				<h1 class="title input" contenteditable="true" @focusout="saveTaskOnChange()" ref="taskTitle"
-					@keyup.ctrl.enter="saveTaskOnChange()">{{ task.title }}</h1>
+				<h1 @focusout="saveTaskOnChange()" @keyup.ctrl.enter="saveTaskOnChange()" class="title input" contenteditable="true"
+					ref="taskTitle">{{ task.title }}</h1>
 			</div>
 			<h6 class="subtitle" v-if="parent && parent.namespace && parent.list">
 				{{ parent.namespace.title }} >
@@ -22,7 +22,7 @@
 			<!-- Content and buttons -->
 			<div class="columns">
 				<!-- Content -->
-				<div class="column" :class="{'is-two-thirds': canWrite}">
+				<div :class="{'is-two-thirds': canWrite}" class="column">
 					<div class="columns details">
 						<div class="column assignees" v-if="activeFields.assignees">
 							<!-- Assignees -->
@@ -31,11 +31,11 @@
 								Assignees
 							</div>
 							<edit-assignees
-									:task-id="task.id"
-									:list-id="task.listId"
-									:initial-assignees="task.assignees"
-									ref="assignees"
-									:disabled="!canWrite"
+								:disabled="!canWrite"
+								:initial-assignees="task.assignees"
+								:list-id="task.listId"
+								:task-id="task.id"
+								ref="assignees"
 							/>
 						</div>
 						<div class="column" v-if="activeFields.priority">
@@ -45,10 +45,10 @@
 								Priority
 							</div>
 							<priority-select
-									v-model="task.priority"
-									@change="saveTask"
-									ref="priority"
-									:disabled="!canWrite"/>
+								:disabled="!canWrite"
+								@change="saveTask"
+								ref="priority"
+								v-model="task.priority"/>
 						</div>
 						<div class="column" v-if="activeFields.dueDate">
 							<!-- Due Date -->
@@ -58,17 +58,17 @@
 							</div>
 							<div class="date-input">
 								<flat-pickr
-										:class="{ 'disabled': taskService.loading}"
-										class="input"
-										:disabled="taskService.loading || !canWrite"
-										v-model="dueDate"
-										:config="flatPickerConfig"
-										@on-close="saveTask"
-										placeholder="Click here to set a due date"
-										ref="dueDate"
+									:class="{ 'disabled': taskService.loading}"
+									:config="flatPickerConfig"
+									:disabled="taskService.loading || !canWrite"
+									@on-close="saveTask"
+									class="input"
+									placeholder="Click here to set a due date"
+									ref="dueDate"
+									v-model="dueDate"
 								>
 								</flat-pickr>
-								<a v-if="dueDate && canWrite" @click="() => {dueDate = task.dueDate = null;saveTask()}">
+								<a @click="() => {dueDate = task.dueDate = null;saveTask()}" v-if="dueDate && canWrite">
 									<span class="icon is-small">
 										<icon icon="times"></icon>
 									</span>
@@ -82,10 +82,10 @@
 								Percent Done
 							</div>
 							<percent-done-select
-									v-model="task.percentDone"
-									@change="saveTask"
-									ref="percentDone"
-									:disabled="!canWrite"/>
+								:disabled="!canWrite"
+								@change="saveTask"
+								ref="percentDone"
+								v-model="task.percentDone"/>
 						</div>
 						<div class="column" v-if="activeFields.startDate">
 							<!-- Start Date -->
@@ -95,17 +95,17 @@
 							</div>
 							<div class="date-input">
 								<flat-pickr
-										:class="{ 'disabled': taskService.loading}"
-										class="input"
-										:disabled="taskService.loading || !canWrite"
-										v-model="task.startDate"
-										:config="flatPickerConfig"
-										@on-close="saveTask"
-										placeholder="Click here to set a start date"
-										ref="startDate"
+									:class="{ 'disabled': taskService.loading}"
+									:config="flatPickerConfig"
+									:disabled="taskService.loading || !canWrite"
+									@on-close="saveTask"
+									class="input"
+									placeholder="Click here to set a start date"
+									ref="startDate"
+									v-model="task.startDate"
 								>
 								</flat-pickr>
-								<a v-if="task.startDate && canWrite" @click="() => {task.startDate = null;saveTask()}">
+								<a @click="() => {task.startDate = null;saveTask()}" v-if="task.startDate && canWrite">
 									<span class="icon is-small">
 										<icon icon="times"></icon>
 									</span>
@@ -120,17 +120,17 @@
 							</div>
 							<div class="date-input">
 								<flat-pickr
-										:class="{ 'disabled': taskService.loading}"
-										class="input"
-										:disabled="taskService.loading || !canWrite"
-										v-model="task.endDate"
-										:config="flatPickerConfig"
-										@on-close="saveTask"
-										placeholder="Click here to set an end date"
-										ref="endDate"
+									:class="{ 'disabled': taskService.loading}"
+									:config="flatPickerConfig"
+									:disabled="taskService.loading || !canWrite"
+									@on-close="saveTask"
+									class="input"
+									placeholder="Click here to set an end date"
+									ref="endDate"
+									v-model="task.endDate"
 								>
 								</flat-pickr>
-								<a v-if="task.endDate && canWrite" @click="() => {task.endDate = null;saveTask()}">
+								<a @click="() => {task.endDate = null;saveTask()}" v-if="task.endDate && canWrite">
 									<span class="icon is-small">
 										<icon icon="times"></icon>
 									</span>
@@ -144,10 +144,10 @@
 								Reminders
 							</div>
 							<reminders
-									v-model="task.reminderDates"
-									@change="saveTask"
-									ref="reminders"
-									:disabled="!canWrite"/>
+								:disabled="!canWrite"
+								@change="saveTask"
+								ref="reminders"
+								v-model="task.reminderDates"/>
 						</div>
 						<div class="column" v-if="activeFields.repeatAfter">
 							<!-- Repeat after -->
@@ -156,10 +156,10 @@
 								Repeat
 							</div>
 							<repeat-after
-									v-model="task"
-									@change="saveTask"
-									:disabled="!canWrite"
-									ref="repeatAfter"/>
+								:disabled="!canWrite"
+								@change="saveTask"
+								ref="repeatAfter"
+								v-model="task"/>
 						</div>
 						<div class="column" v-if="activeFields.color">
 							<!-- Color -->
@@ -168,10 +168,10 @@
 								Color
 							</div>
 							<color-picker
-									v-model="taskColor"
-									menu-position="bottom"
-									@change="saveTask"
-									ref="color"/>
+								@change="saveTask"
+								menu-position="bottom"
+								ref="color"
+								v-model="taskColor"/>
 						</div>
 					</div>
 
@@ -183,11 +183,11 @@
 							</span>
 							Labels
 						</div>
-						<edit-labels :task-id="taskId" v-model="task.labels" ref="labels" :disabled="!canWrite"/>
+						<edit-labels :disabled="!canWrite" :task-id="taskId" ref="labels" v-model="task.labels"/>
 					</div>
 
 					<!-- Description -->
-					<div class="details content description" :class="{ 'has-top-border': activeFields.labels }">
+					<div :class="{ 'has-top-border': activeFields.labels }" class="details content description">
 						<h3>
 							<span class="icon is-grey">
 								<icon icon="align-left"/>
@@ -195,20 +195,20 @@
 							Description
 						</h3>
 						<editor
-								v-model="task.description"
-								@change="saveTask"
-								:upload-enabled="true"
-								:upload-callback="attachmentUpload"
-								:is-edit-enabled="canWrite"
-								placeholder="Click here to enter a description..."/>
+							:is-edit-enabled="canWrite"
+							:upload-callback="attachmentUpload"
+							:upload-enabled="true"
+							@change="saveTask"
+							placeholder="Click here to enter a description..."
+							v-model="task.description"/>
 					</div>
 
 					<!-- Attachments -->
 					<div class="content attachments has-top-border" v-if="activeFields.attachments">
 						<attachments
-								:task-id="taskId"
-								ref="attachments"
-								:edit-enabled="canWrite"
+							:edit-enabled="canWrite"
+							:task-id="taskId"
+							ref="attachments"
 						/>
 					</div>
 
@@ -221,12 +221,12 @@
 							Related Tasks
 						</h3>
 						<related-tasks
-								:task-id="taskId"
-								:list-id="task.listId"
-								:initial-related-tasks="task.relatedTasks"
-								:show-no-relations-notice="true"
-								ref="relatedTasks"
-								:edit-enabled="canWrite"
+							:edit-enabled="canWrite"
+							:initial-related-tasks="task.relatedTasks"
+							:list-id="task.listId"
+							:show-no-relations-notice="true"
+							:task-id="taskId"
+							ref="relatedTasks"
 						/>
 					</div>
 
@@ -246,13 +246,13 @@
 					</div>
 
 					<!-- Comments -->
-					<comments :task-id="taskId" :can-write="canWrite"/>
+					<comments :can-write="canWrite" :task-id="taskId"/>
 				</div>
 				<div class="column is-one-third action-buttons" v-if="canWrite">
 					<a
-							class="button is-outlined noshadow has-no-border"
-							:class="{'is-success': !task.done}"
-							@click="toggleTaskDone()">
+						:class="{'is-success': !task.done}"
+						@click="toggleTaskDone()"
+						class="button is-outlined noshadow has-no-border">
 						<span class="icon is-small"><icon icon="check-double"/></span>
 						<template v-if="task.done">
 							Mark as undone
@@ -262,78 +262,78 @@
 						</template>
 					</a>
 					<a
-							class="button"
-							@click="setFieldActive('assignees')"
-							v-shortkey="['ctrl', 'shift', 'a']"
-							@shortkey="setFieldActive('assignees')">
+						@click="setFieldActive('assignees')"
+						@shortkey="setFieldActive('assignees')"
+						class="button"
+						v-shortkey="['ctrl', 'shift', 'a']">
 						<span class="icon is-small"><icon icon="users"/></span>
 						Assign this task to a user
 					</a>
 					<a
-							class="button"
-							@click="setFieldActive('labels')"
-							v-shortkey="['ctrl', 'shift', 'l']"
-							@shortkey="setFieldActive('labels')">
+						@click="setFieldActive('labels')"
+						@shortkey="setFieldActive('labels')"
+						class="button"
+						v-shortkey="['ctrl', 'shift', 'l']">
 						<span class="icon is-small"><icon icon="tags"/></span>
 						Add labels
 					</a>
-					<a class="button" @click="setFieldActive('reminders')">
+					<a @click="setFieldActive('reminders')" class="button">
 						<span class="icon is-small"><icon icon="history"/></span>
 						Set Reminders
 					</a>
 					<a
-							class="button"
-							@click="setFieldActive('dueDate')"
-							v-shortkey="['ctrl', 'shift', 'd']"
-							@shortkey="setFieldActive('dueDate')">
+						@click="setFieldActive('dueDate')"
+						@shortkey="setFieldActive('dueDate')"
+						class="button"
+						v-shortkey="['ctrl', 'shift', 'd']">
 						<span class="icon is-small"><icon icon="calendar"/></span>
 						Set Due Date
 					</a>
-					<a class="button" @click="setFieldActive('startDate')">
+					<a @click="setFieldActive('startDate')" class="button">
 						<span class="icon is-small"><icon icon="calendar-week"/></span>
 						Set a Start Date
 					</a>
-					<a class="button" @click="setFieldActive('endDate')">
+					<a @click="setFieldActive('endDate')" class="button">
 						<span class="icon is-small"><icon icon="calendar-week"/></span>
 						Set an End Date
 					</a>
-					<a class="button" @click="setFieldActive('repeatAfter')">
+					<a @click="setFieldActive('repeatAfter')" class="button">
 						<span class="icon is-small"><icon :icon="['far', 'clock']"/></span>
 						Set a repeating interval
 					</a>
-					<a class="button" @click="setFieldActive('priority')">
+					<a @click="setFieldActive('priority')" class="button">
 						<span class="icon is-small"><icon :icon="['far', 'star']"/></span>
 						Set Priority
 					</a>
-					<a class="button" @click="setFieldActive('percentDone')">
+					<a @click="setFieldActive('percentDone')" class="button">
 						<span class="icon is-small"><icon icon="percent"/></span>
 						Set Percent Done
 					</a>
 					<a
-							class="button"
-							@click="setFieldActive('attachments')"
-							v-shortkey="['ctrl', 'shift', 'f']"
-							@shortkey="setFieldActive('attachments')">
+						@click="setFieldActive('attachments')"
+						@shortkey="setFieldActive('attachments')"
+						class="button"
+						v-shortkey="['ctrl', 'shift', 'f']">
 						<span class="icon is-small"><icon icon="paperclip"/></span>
 						Add attachments
 					</a>
 					<a
-							class="button"
-							@click="setFieldActive('relatedTasks')"
-							v-shortkey="['ctrl', 'shift', 'r']"
-							@shortkey="setFieldActive('relatedTasks')">
+						@click="setFieldActive('relatedTasks')"
+						@shortkey="setFieldActive('relatedTasks')"
+						class="button"
+						v-shortkey="['ctrl', 'shift', 'r']">
 						<span class="icon is-small"><icon icon="tasks"/></span>
 						Add task relations
 					</a>
-					<a class="button" @click="setFieldActive('moveList')">
+					<a @click="setFieldActive('moveList')" class="button">
 						<span class="icon is-small"><icon icon="list"/></span>
 						Move task
 					</a>
-					<a class="button" @click="setFieldActive('color')">
+					<a @click="setFieldActive('color')" class="button">
 						<span class="icon is-small"><icon icon="fill-drip"/></span>
 						Set task color
 					</a>
-					<a class="button is-danger is-outlined noshadow has-no-border" @click="showDeleteModal = true">
+					<a @click="showDeleteModal = true" class="button is-danger is-outlined noshadow has-no-border">
 						<span class="icon is-small"><icon icon="trash-alt"/></span>
 						Delete task
 					</a>
@@ -344,9 +344,9 @@
 		</div>
 
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="deleteTask()">
+			@close="showDeleteModal = false"
+			@submit="deleteTask()"
+			v-if="showDeleteModal">
 			<span slot="header">Delete this task</span>
 			<p slot="text">
 				Are you sure you want to remove this task? <br/>
@@ -358,269 +358,269 @@
 </template>
 
 <script>
-	import TaskService from '../../services/task'
-	import TaskModel from '../../models/task'
-	import relationKinds from '../../models/relationKinds.json'
+import TaskService from '../../services/task'
+import TaskModel from '../../models/task'
+import relationKinds from '../../models/relationKinds.json'
 
-	import priorites from '../../models/priorities.json'
-	import rights from '../../models/rights.json'
+import priorites from '../../models/priorities.json'
+import rights from '../../models/rights.json'
 
-	import flatPickr from 'vue-flatpickr-component'
-	import 'flatpickr/dist/flatpickr.css'
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
 
-	import PrioritySelect from '../../components/tasks/partials/prioritySelect'
-	import PercentDoneSelect from '../../components/tasks/partials/percentDoneSelect'
-	import EditLabels from '../../components/tasks/partials/editLabels'
-	import EditAssignees from '../../components/tasks/partials/editAssignees'
-	import Attachments from '../../components/tasks/partials/attachments'
-	import RelatedTasks from '../../components/tasks/partials/relatedTasks'
-	import RepeatAfter from '../../components/tasks/partials/repeatAfter'
-	import Reminders from '../../components/tasks/partials/reminders'
-	import Comments from '../../components/tasks/partials/comments'
-	import router from '../../router'
-	import ListSearch from '../../components/tasks/partials/listSearch'
-	import ColorPicker from '../../components/input/colorPicker'
-	import attachmentUpload from '../../components/tasks/mixins/attachmentUpload'
-	import LoadingComponent from '../../components/misc/loading'
-	import ErrorComponent from '../../components/misc/error'
+import PrioritySelect from '../../components/tasks/partials/prioritySelect'
+import PercentDoneSelect from '../../components/tasks/partials/percentDoneSelect'
+import EditLabels from '../../components/tasks/partials/editLabels'
+import EditAssignees from '../../components/tasks/partials/editAssignees'
+import Attachments from '../../components/tasks/partials/attachments'
+import RelatedTasks from '../../components/tasks/partials/relatedTasks'
+import RepeatAfter from '../../components/tasks/partials/repeatAfter'
+import Reminders from '../../components/tasks/partials/reminders'
+import Comments from '../../components/tasks/partials/comments'
+import router from '../../router'
+import ListSearch from '../../components/tasks/partials/listSearch'
+import ColorPicker from '../../components/input/colorPicker'
+import attachmentUpload from '../../components/tasks/mixins/attachmentUpload'
+import LoadingComponent from '../../components/misc/loading'
+import ErrorComponent from '../../components/misc/error'
 
-	export default {
-		name: 'TaskDetailView',
-		components: {
-			ColorPicker,
-			ListSearch,
-			Reminders,
-			RepeatAfter,
-			RelatedTasks,
-			Attachments,
-			EditAssignees,
-			EditLabels,
-			PercentDoneSelect,
-			PrioritySelect,
-			Comments,
-			flatPickr,
-			editor: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
-		},
-		mixins: [
-			attachmentUpload,
-		],
-		data() {
-			return {
-				taskId: Number(this.$route.params.id),
-				taskService: TaskService,
-				task: TaskModel,
-				relationKinds: relationKinds,
-				// The due date is a seperate property in the task to prevent flatpickr from modifying the task model
-				// in store right after updating it from the api resulting in the wrong due date format being saved in the task.
-				dueDate: null,
-				// We doubled the task color property here because verte does not have a real change property, leading
-				// to the color property change being triggered when the # is removed from it, leading to an update,
-				// which leads in turn to a change... This creates an infinite loop in which the task is updated, changed,
-				// updated, changed, updated and so on.
-				// To prevent this, we put the task color property in a seperate value which is set to the task color
-				// when it is saved and loaded.
-				taskColor: '',
+export default {
+	name: 'TaskDetailView',
+	components: {
+		ColorPicker,
+		ListSearch,
+		Reminders,
+		RepeatAfter,
+		RelatedTasks,
+		Attachments,
+		EditAssignees,
+		EditLabels,
+		PercentDoneSelect,
+		PrioritySelect,
+		Comments,
+		flatPickr,
+		editor: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	mixins: [
+		attachmentUpload,
+	],
+	data() {
+		return {
+			taskId: Number(this.$route.params.id),
+			taskService: TaskService,
+			task: TaskModel,
+			relationKinds: relationKinds,
+			// The due date is a seperate property in the task to prevent flatpickr from modifying the task model
+			// in store right after updating it from the api resulting in the wrong due date format being saved in the task.
+			dueDate: null,
+			// We doubled the task color property here because verte does not have a real change property, leading
+			// to the color property change being triggered when the # is removed from it, leading to an update,
+			// which leads in turn to a change... This creates an infinite loop in which the task is updated, changed,
+			// updated, changed, updated and so on.
+			// To prevent this, we put the task color property in a seperate value which is set to the task color
+			// when it is saved and loaded.
+			taskColor: '',
 
-				showDeleteModal: false,
-				taskTitle: '',
-				descriptionChanged: false,
-				listViewName: 'list.list',
+			showDeleteModal: false,
+			taskTitle: '',
+			descriptionChanged: false,
+			listViewName: 'list.list',
 
-				priorities: priorites,
-				flatPickerConfig: {
-					altFormat: 'j M Y H:i',
-					altInput: true,
-					dateFormat: 'Y-m-d H:i',
-					enableTime: true,
-					time_24hr: true,
-				},
-				activeFields: {
-					assignees: false,
-					priority: false,
-					dueDate: false,
-					percentDone: false,
-					startDate: false,
-					endDate: false,
-					reminders: false,
-					repeatAfter: false,
-					labels: false,
-					attachments: false,
-					relatedTasks: false,
-					moveList: false,
-					color: false,
-				},
-			}
-		},
-		watch: {
-			'$route': 'loadTask',
-		},
-		created() {
-			this.taskService = new TaskService()
-			this.task = new TaskModel()
-		},
-		mounted() {
+			priorities: priorites,
+			flatPickerConfig: {
+				altFormat: 'j M Y H:i',
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				time_24hr: true,
+			},
+			activeFields: {
+				assignees: false,
+				priority: false,
+				dueDate: false,
+				percentDone: false,
+				startDate: false,
+				endDate: false,
+				reminders: false,
+				repeatAfter: false,
+				labels: false,
+				attachments: false,
+				relatedTasks: false,
+				moveList: false,
+				color: false,
+			},
+		}
+	},
+	watch: {
+		'$route': 'loadTask',
+	},
+	created() {
+		this.taskService = new TaskService()
+		this.task = new TaskModel()
+	},
+	mounted() {
 
-			// Build the list path from the task detail name to send the user to the view they came from.
-			const parts = this.$route.name.split('.')
-			if (parts.length > 2 && parts[2] === 'detail') {
-				this.listViewName = `list.${parts[1]}`
+		// Build the list path from the task detail name to send the user to the view they came from.
+		const parts = this.$route.name.split('.')
+		if (parts.length > 2 && parts[2] === 'detail') {
+			this.listViewName = `list.${parts[1]}`
+		}
+
+		this.loadTask()
+	},
+	computed: {
+		parent() {
+			if (!this.task.listId) {
+				return {
+					namespace: null,
+					list: null,
+				}
 			}
 
-			this.loadTask()
+			if (!this.$store.getters['namespaces/getListAndNamespaceById']) {
+				return null
+			}
+
+			return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
 		},
-		computed: {
-			parent() {
-				if (!this.task.listId) {
-					return {
-						namespace: null,
-						list: null,
-					}
-				}
-
-				if (!this.$store.getters['namespaces/getListAndNamespaceById']) {
-					return null
-				}
-
-				return this.$store.getters['namespaces/getListAndNamespaceById'](this.task.listId)
-			},
-			canWrite() {
-				return this.task && this.task.maxRight && this.task.maxRight > rights.READ
-			},
+		canWrite() {
+			return this.task && this.task.maxRight && this.task.maxRight > rights.READ
 		},
-		methods: {
-			loadTask() {
-				this.taskId = Number(this.$route.params.id)
-				this.taskService.get({id: this.taskId})
-					.then(r => {
-						this.$set(this, 'task', r)
-						this.$store.commit('attachments/set', r.attachments)
-						this.taskTitle = this.task.title
-						this.taskColor = this.task.hexColor
-						this.setActiveFields()
-						this.setTitle(this.task.title)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			setActiveFields() {
-
-				this.dueDate = this.task.dueDate ? this.task.dueDate : null
-				this.task.startDate = this.task.startDate ? this.task.startDate : null
-				this.task.endDate = this.task.endDate ? this.task.endDate : null
-
-				// Set all active fields based on values in the model
-				this.activeFields.assignees = this.task.assignees.length > 0
-				this.activeFields.priority = this.task.priority !== priorites.UNSET
-				this.activeFields.dueDate = this.task.dueDate !== null
-				this.activeFields.percentDone = this.task.percentDone > 0
-				this.activeFields.startDate = this.task.startDate !== null
-				this.activeFields.endDate = this.task.endDate !== null
-				// On chrome, reminderDates.length holds the actual number of reminders that are not null.
-				// Unlike on desktop where it holds all reminders, including the ones which are null.
-				// This causes the reminders to dissapear entierly when only one is set and the user is on mobile.
-				this.activeFields.reminders = this.task.reminderDates.length > 1 || (window.innerWidth < 769 && this.task.reminderDates.length > 0)
-				this.activeFields.repeatAfter = this.task.repeatAfter.amount > 0
-				this.activeFields.labels = this.task.labels.length > 0
-				this.activeFields.attachments = this.task.attachments.length > 0
-				this.activeFields.relatedTasks = Object.keys(this.task.relatedTasks).length > 0
-			},
-			saveTaskOnChange() {
-				this.$refs.taskTitle.spellcheck = false
-
-				// Pull the task title from the contenteditable
-				let taskTitle = this.$refs.taskTitle.textContent
-				this.task.title = taskTitle
-
-				// We only want to save if the title was actually change.
-				// Because the contenteditable does not have a change event,
-				// we're building it ourselves and only calling saveTask()
-				// if the task title changed.
-				if (this.task.title !== this.taskTitle) {
-					this.saveTask()
-					this.taskTitle = taskTitle
-				}
-			},
-			saveTask(undoCallback = null) {
-
-				if (!this.canWrite) {
-					return
-				}
-
-				this.task.dueDate = this.dueDate
-				this.task.hexColor = this.taskColor
-
-				// If no end date is being set, but a start date and due date,
-				// use the due date as the end date
-				if (this.task.endDate === null && this.task.startDate !== null && this.task.dueDate !== null) {
-					this.task.endDate = this.task.dueDate
-				}
-
-				this.$store.dispatch('tasks/update', this.task)
-					.then(r => {
-						this.$set(this, 'task', r)
-						let actions = []
-						if (undoCallback !== null) {
-							actions = [{
-								title: 'Undo',
-								callback: undoCallback,
-							}]
-							this.success({message: 'The task was saved successfully.'}, this, actions)
-						}
-						this.dueDate = this.task.dueDate
-						this.setActiveFields()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			setFieldActive(fieldName) {
-				this.activeFields[fieldName] = true
-				this.$nextTick(() => {
-					if (this.$refs[fieldName]) {
-						this.$refs[fieldName].$el.focus()
-					}
+	},
+	methods: {
+		loadTask() {
+			this.taskId = Number(this.$route.params.id)
+			this.taskService.get({id: this.taskId})
+				.then(r => {
+					this.$set(this, 'task', r)
+					this.$store.commit('attachments/set', r.attachments)
+					this.taskTitle = this.task.title
+					this.taskColor = this.task.hexColor
+					this.setActiveFields()
+					this.setTitle(this.task.title)
+				})
+				.catch(e => {
+					this.error(e, this)
 				})
-			},
-			deleteTask() {
-				this.$store.dispatch('tasks/delete', this.task)
-					.then(() => {
-						this.success({message: 'The task been deleted successfully.'}, this)
-						router.back()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			toggleTaskDone() {
-				this.task.done = !this.task.done
-				this.saveTask(() => this.toggleTaskDone())
-			},
-			setDescriptionChanged(e) {
-				if (e.key === 'Enter' || e.key === 'Control') {
-					return
-				}
-				this.descriptionChanged = true
-			},
-			saveTaskIfDescriptionChanged() {
-				// We want to only save the description if it was changed.
-				// Since we can either trigger this with ctrl+enter or @change, it would be possible to save a task first
-				// with ctrl+enter and then with @change although nothing changed since the last save when @change gets fired.
-				// To only save one time we added this method.
-				if (this.descriptionChanged) {
-					this.descriptionChanged = false
-					this.saveTask()
-				}
-			},
-			changeList(list) {
-				this.task.listId = list.id
-				this.saveTask()
-			},
 		},
-	}
+		setActiveFields() {
+
+			this.dueDate = this.task.dueDate ? this.task.dueDate : null
+			this.task.startDate = this.task.startDate ? this.task.startDate : null
+			this.task.endDate = this.task.endDate ? this.task.endDate : null
+
+			// Set all active fields based on values in the model
+			this.activeFields.assignees = this.task.assignees.length > 0
+			this.activeFields.priority = this.task.priority !== priorites.UNSET
+			this.activeFields.dueDate = this.task.dueDate !== null
+			this.activeFields.percentDone = this.task.percentDone > 0
+			this.activeFields.startDate = this.task.startDate !== null
+			this.activeFields.endDate = this.task.endDate !== null
+			// On chrome, reminderDates.length holds the actual number of reminders that are not null.
+			// Unlike on desktop where it holds all reminders, including the ones which are null.
+			// This causes the reminders to dissapear entierly when only one is set and the user is on mobile.
+			this.activeFields.reminders = this.task.reminderDates.length > 1 || (window.innerWidth < 769 && this.task.reminderDates.length > 0)
+			this.activeFields.repeatAfter = this.task.repeatAfter.amount > 0
+			this.activeFields.labels = this.task.labels.length > 0
+			this.activeFields.attachments = this.task.attachments.length > 0
+			this.activeFields.relatedTasks = Object.keys(this.task.relatedTasks).length > 0
+		},
+		saveTaskOnChange() {
+			this.$refs.taskTitle.spellcheck = false
+
+			// Pull the task title from the contenteditable
+			let taskTitle = this.$refs.taskTitle.textContent
+			this.task.title = taskTitle
+
+			// We only want to save if the title was actually change.
+			// Because the contenteditable does not have a change event,
+			// we're building it ourselves and only calling saveTask()
+			// if the task title changed.
+			if (this.task.title !== this.taskTitle) {
+				this.saveTask()
+				this.taskTitle = taskTitle
+			}
+		},
+		saveTask(undoCallback = null) {
+
+			if (!this.canWrite) {
+				return
+			}
+
+			this.task.dueDate = this.dueDate
+			this.task.hexColor = this.taskColor
+
+			// If no end date is being set, but a start date and due date,
+			// use the due date as the end date
+			if (this.task.endDate === null && this.task.startDate !== null && this.task.dueDate !== null) {
+				this.task.endDate = this.task.dueDate
+			}
+
+			this.$store.dispatch('tasks/update', this.task)
+				.then(r => {
+					this.$set(this, 'task', r)
+					let actions = []
+					if (undoCallback !== null) {
+						actions = [{
+							title: 'Undo',
+							callback: undoCallback,
+						}]
+						this.success({message: 'The task was saved successfully.'}, this, actions)
+					}
+					this.dueDate = this.task.dueDate
+					this.setActiveFields()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		setFieldActive(fieldName) {
+			this.activeFields[fieldName] = true
+			this.$nextTick(() => {
+				if (this.$refs[fieldName]) {
+					this.$refs[fieldName].$el.focus()
+				}
+			})
+		},
+		deleteTask() {
+			this.$store.dispatch('tasks/delete', this.task)
+				.then(() => {
+					this.success({message: 'The task been deleted successfully.'}, this)
+					router.back()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		toggleTaskDone() {
+			this.task.done = !this.task.done
+			this.saveTask(() => this.toggleTaskDone())
+		},
+		setDescriptionChanged(e) {
+			if (e.key === 'Enter' || e.key === 'Control') {
+				return
+			}
+			this.descriptionChanged = true
+		},
+		saveTaskIfDescriptionChanged() {
+			// We want to only save the description if it was changed.
+			// Since we can either trigger this with ctrl+enter or @change, it would be possible to save a task first
+			// with ctrl+enter and then with @change although nothing changed since the last save when @change gets fired.
+			// To only save one time we added this method.
+			if (this.descriptionChanged) {
+				this.descriptionChanged = false
+				this.saveTask()
+			}
+		},
+		changeList(list) {
+			this.task.listId = list.id
+			this.saveTask()
+		},
+	},
+}
 </script>
diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index bb714e54a..ac23b140c 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="modal-mask">
-		<div class="modal-container" @click.self="close()">
+		<div @click.self="close()" class="modal-container">
 			<div class="scrolling-content">
 				<a @click="close()" class="close">
 					<icon icon="times"/>
@@ -12,18 +12,18 @@
 </template>
 
 <script>
-	import TaskDetailView from './TaskDetailView'
-	import router from '../../router'
+import TaskDetailView from './TaskDetailView'
+import router from '../../router'
 
-	export default {
-		name: 'TaskDetailViewModal',
-		components: {
-			TaskDetailView,
+export default {
+	name: 'TaskDetailViewModal',
+	components: {
+		TaskDetailView,
+	},
+	methods: {
+		close() {
+			router.back()
 		},
-		methods: {
-			close() {
-				router.back()
-			},
-		},
-	}
+	},
+}
 </script>
diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue
index 4bcc87827..870370a0f 100644
--- a/src/views/teams/EditTeam.vue
+++ b/src/views/teams/EditTeam.vue
@@ -13,14 +13,14 @@
 							<label class="label" for="teamtext">Team Name</label>
 							<div class="control">
 								<input
-										v-focus
-										:class="{ 'disabled': teamMemberService.loading}"
-										:disabled="teamMemberService.loading"
-										class="input"
-										type="text"
-										id="teamtext"
-										placeholder="The team text is here..."
-										v-model="team.name"/>
+									:class="{ 'disabled': teamMemberService.loading}"
+									:disabled="teamMemberService.loading"
+									class="input"
+									id="teamtext"
+									placeholder="The team text is here..."
+									type="text"
+									v-focus
+									v-model="team.name"/>
 							</div>
 						</div>
 						<p class="help is-danger" v-if="showError && team.name === ''">
@@ -30,12 +30,12 @@
 							<label class="label" for="teamdescription">Description</label>
 							<div class="control">
 								<editor
-										:class="{ 'disabled': teamService.loading}"
-										:disabled="teamService.loading"
-										placeholder="The teams description goes here..."
-										id="teamdescription"
-										v-model="team.description"
-										:preview-is-default="false"
+									:class="{ 'disabled': teamService.loading}"
+									:disabled="teamService.loading"
+									:preview-is-default="false"
+									id="teamdescription"
+									placeholder="The teams description goes here..."
+									v-model="team.description"
 								/>
 							</div>
 						</div>
@@ -43,14 +43,14 @@
 
 					<div class="columns bigbuttons">
 						<div class="column">
-							<button @click="submit()" class="button is-primary is-fullwidth"
-									:class="{ 'is-loading': teamService.loading}">
+							<button :class="{ 'is-loading': teamService.loading}" @click="submit()"
+									class="button is-primary is-fullwidth">
 								Save
 							</button>
 						</div>
 						<div class="column is-1">
-							<button @click="showDeleteModal = true" class="button is-danger is-fullwidth"
-									:class="{ 'is-loading': teamService.loading}">
+							<button :class="{ 'is-loading': teamService.loading}" @click="showDeleteModal = true"
+									class="button is-danger is-fullwidth">
 								<span class="icon is-small">
 									<icon icon="trash-alt"/>
 								</span>
@@ -70,31 +70,31 @@
 				<form @submit.prevent="addUser()" class="add-member-form" v-if="userIsAdmin">
 					<div class="field is-grouped">
 						<p
-								class="control has-icons-left is-expanded"
-								:class="{ 'is-loading': teamMemberService.loading}">
+							:class="{ 'is-loading': teamMemberService.loading}"
+							class="control has-icons-left is-expanded">
 							<multiselect
-									v-model="newMember"
-									:options="foundUsers"
-									:multiple="false"
-									:searchable="true"
-									:loading="userService.loading"
-									:internal-search="true"
-									@search-change="findUser"
-									placeholder="Type to search..."
-									:showNoOptions="false"
-									label="username"
-									track-by="id">
+								:internal-search="true"
+								:loading="userService.loading"
+								:multiple="false"
+								:options="foundUsers"
+								:searchable="true"
+								:showNoOptions="false"
+								@search-change="findUser"
+								label="username"
+								placeholder="Type to search..."
+								track-by="id"
+								v-model="newMember">
 								<template slot="clear" slot-scope="props">
 									<div
-											class="multiselect__clear" v-if="newMember !== null && newMember.id !== 0"
-											@mousedown.prevent.stop="clearAll(props.search)">
+										@mousedown.prevent.stop="clearAll(props.search)" class="multiselect__clear"
+										v-if="newMember !== null && newMember.id !== 0">
 									</div>
 								</template>
 								<span slot="noResult">Oops! No user found. Consider changing the search query.</span>
 							</multiselect>
 						</p>
 						<p class="control">
-							<button type="submit" class="button is-success">
+							<button class="button is-success" type="submit">
 								<span class="icon is-small">
 									<icon icon="plus"/>
 								</span>
@@ -105,8 +105,8 @@
 				</form>
 				<table class="table is-striped is-hoverable is-fullwidth">
 					<tbody>
-					<tr v-for="m in team.members" :key="m.id">
-						<td>{{m.username}}</td>
+					<tr :key="m.id" v-for="m in team.members">
+						<td>{{ m.username }}</td>
 						<td>
 							<template v-if="m.id === userInfo.id">
 								<b class="is-success">You</b>
@@ -127,8 +127,8 @@
 							</template>
 						</td>
 						<td class="actions" v-if="userIsAdmin">
-							<button @click="toggleUserType(m)" class="button buttonright is-primary"
-									:class="{'is-loading': teamMemberService.loading}"
+							<button :class="{'is-loading': teamMemberService.loading}" @click="toggleUserType(m)"
+									class="button buttonright is-primary"
 									v-if="m.id !== userInfo.id">
 								Make
 								<template v-if="!m.admin">
@@ -138,8 +138,8 @@
 									Member
 								</template>
 							</button>
-							<button @click="() => {member = m; showUserDeleteModal = true}" class="button is-danger"
-									:class="{'is-loading': teamMemberService.loading}"
+							<button :class="{'is-loading': teamMemberService.loading}" @click="() => {member = m; showUserDeleteModal = true}"
+									class="button is-danger"
 									v-if="m.id !== userInfo.id">
 									<span class="icon is-small">
 										<icon icon="trash-alt"/>
@@ -154,9 +154,9 @@
 
 		<!-- Team delete modal -->
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="deleteTeam()">
+			@close="showDeleteModal = false"
+			@submit="deleteTeam()"
+			v-if="showDeleteModal">
 			<span slot="header">Delete the team</span>
 			<p slot="text">Are you sure you want to delete this team and all of its members?<br/>
 				All team members will loose access to lists and namespaces shared with this team.<br/>
@@ -164,9 +164,9 @@
 		</modal>
 		<!-- User delete modal -->
 		<modal
-				v-if="showUserDeleteModal"
-				@close="showUserDeleteModal = false"
-				@submit="deleteUser()">
+			@close="showUserDeleteModal = false"
+			@submit="deleteUser()"
+			v-if="showUserDeleteModal">
 			<span slot="header">Remove a user from the team</span>
 			<p slot="text">Are you sure you want to remove this user from the team?<br/>
 				They will loose access to all lists and namespaces this team has access to.<br/>
@@ -176,187 +176,187 @@
 </template>
 
 <script>
-	import router from '../../router'
-	import {mapState} from 'vuex'
+import router from '../../router'
+import {mapState} from 'vuex'
 
-	import TeamService from '../../services/team'
-	import TeamModel from '../../models/team'
-	import TeamMemberService from '../../services/teamMember'
-	import TeamMemberModel from '../../models/teamMember'
-	import UserModel from '../../models/user'
-	import UserService from '../../services/user'
-	import LoadingComponent from '../../components/misc/loading'
-	import ErrorComponent from '../../components/misc/error'
-	import Rights from '../../models/rights.json'
+import TeamService from '../../services/team'
+import TeamModel from '../../models/team'
+import TeamMemberService from '../../services/teamMember'
+import TeamMemberModel from '../../models/teamMember'
+import UserModel from '../../models/user'
+import UserService from '../../services/user'
+import LoadingComponent from '../../components/misc/loading'
+import ErrorComponent from '../../components/misc/error'
+import Rights from '../../models/rights.json'
 
-	export default {
-		name: 'EditTeam',
-		data() {
-			return {
-				teamService: TeamService,
-				teamMemberService: TeamMemberService,
-				team: TeamModel,
-				teamId: this.$route.params.id,
-				member: TeamMemberModel,
+export default {
+	name: 'EditTeam',
+	data() {
+		return {
+			teamService: TeamService,
+			teamMemberService: TeamMemberService,
+			team: TeamModel,
+			teamId: this.$route.params.id,
+			member: TeamMemberModel,
 
-				showDeleteModal: false,
-				showUserDeleteModal: false,
+			showDeleteModal: false,
+			showUserDeleteModal: false,
 
-				newMember: UserModel,
-				foundUsers: [],
-				userService: UserService,
+			newMember: UserModel,
+			foundUsers: [],
+			userService: UserService,
 
-				showError: false,
-			}
+			showError: false,
+		}
+	},
+	components: {
+		multiselect: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+		editor: () => ({
+			component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	created() {
+		this.teamService = new TeamService()
+		this.teamMemberService = new TeamMemberService()
+		this.userService = new UserService()
+		this.loadTeam()
+	},
+	watch: {
+		// call again the method if the route changes
+		'$route': 'loadTeam',
+	},
+	computed: {
+		userIsAdmin() {
+			return this.team && this.team.maxRight && this.team.maxRight > Rights.READ
 		},
-		components: {
-			multiselect: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "multiselect" */ 'vue-multiselect'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
-			editor: () => ({
-				component: import(/* webpackPrefetch: true *//* webpackChunkName: "editor" */ '../../components/input/editor'),
-				loading: LoadingComponent,
-				error: ErrorComponent,
-				timeout: 60000,
-			}),
-		},
-		created() {
-			this.teamService = new TeamService()
-			this.teamMemberService = new TeamMemberService()
-			this.userService = new UserService()
-			this.loadTeam()
-		},
-		watch: {
-			// call again the method if the route changes
-			'$route': 'loadTeam',
-		},
-		computed: {
-			userIsAdmin() {
-				return this.team && this.team.maxRight && this.team.maxRight > Rights.READ
-			},
-			...mapState({
-				userInfo: state => state.auth.info,
-			}),
-		},
-		methods: {
-			loadTeam() {
-				this.team = new TeamModel({id: this.teamId})
-				this.teamService.get(this.team)
-					.then(response => {
-						this.$set(this, 'team', response)
-						this.setTitle(`Edit Team ${this.team.name}`)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			submit() {
-				if (this.team.name === '') {
-					this.showError = true
-					return
-				}
-				this.showError = false
-
-				this.teamService.update(this.team)
-					.then(response => {
-						this.team = response
-						this.success({message: 'The team was successfully updated.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			deleteTeam() {
-				this.teamService.delete(this.team)
-					.then(() => {
-						this.success({message: 'The team was successfully deleted.'}, this)
-						router.push({name: 'teams.index'})
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			deleteUser() {
-				this.teamMemberService.delete(this.member)
-					.then(() => {
-						this.success({message: 'The user was successfully deleted from the team.'}, this)
-						this.loadTeam()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.showUserDeleteModal = false
-					})
-			},
-			addUser() {
-				const newMember = new TeamMemberModel({
-					teamId: this.teamId,
-					username: this.newMember.username,
+		...mapState({
+			userInfo: state => state.auth.info,
+		}),
+	},
+	methods: {
+		loadTeam() {
+			this.team = new TeamModel({id: this.teamId})
+			this.teamService.get(this.team)
+				.then(response => {
+					this.$set(this, 'team', response)
+					this.setTitle(`Edit Team ${this.team.name}`)
+				})
+				.catch(e => {
+					this.error(e, this)
 				})
-				this.teamMemberService.create(newMember)
-					.then(() => {
-						this.loadTeam()
-						this.success({message: 'The team member was successfully added.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			toggleUserType(member) {
-				member.admin = !member.admin
-				this.teamMemberService.update(member)
-					.then(r => {
-						for (const tm in this.team.members) {
-							if (this.team.members[tm].id === member.id) {
-								this.$set(this.team.members[tm], 'admin', r.admin)
-								break
-							}
-						}
-						this.success({message: 'The team member was successfully made ' + (member.admin ? 'admin' : 'member') + '.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			findUser(query) {
-				if (query === '') {
-					this.$set(this, 'foundUsers', [])
-					return
-				}
-
-				this.userService.getAll({}, {s: query})
-					.then(response => {
-						this.$set(this, 'foundUsers', response)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			clearAll() {
-				this.$set(this, 'foundUsers', [])
-			},
 		},
-	}
+		submit() {
+			if (this.team.name === '') {
+				this.showError = true
+				return
+			}
+			this.showError = false
+
+			this.teamService.update(this.team)
+				.then(response => {
+					this.team = response
+					this.success({message: 'The team was successfully updated.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		deleteTeam() {
+			this.teamService.delete(this.team)
+				.then(() => {
+					this.success({message: 'The team was successfully deleted.'}, this)
+					router.push({name: 'teams.index'})
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		deleteUser() {
+			this.teamMemberService.delete(this.member)
+				.then(() => {
+					this.success({message: 'The user was successfully deleted from the team.'}, this)
+					this.loadTeam()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.showUserDeleteModal = false
+				})
+		},
+		addUser() {
+			const newMember = new TeamMemberModel({
+				teamId: this.teamId,
+				username: this.newMember.username,
+			})
+			this.teamMemberService.create(newMember)
+				.then(() => {
+					this.loadTeam()
+					this.success({message: 'The team member was successfully added.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		toggleUserType(member) {
+			member.admin = !member.admin
+			this.teamMemberService.update(member)
+				.then(r => {
+					for (const tm in this.team.members) {
+						if (this.team.members[tm].id === member.id) {
+							this.$set(this.team.members[tm], 'admin', r.admin)
+							break
+						}
+					}
+					this.success({message: 'The team member was successfully made ' + (member.admin ? 'admin' : 'member') + '.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		findUser(query) {
+			if (query === '') {
+				this.$set(this, 'foundUsers', [])
+				return
+			}
+
+			this.userService.getAll({}, {s: query})
+				.then(response => {
+					this.$set(this, 'foundUsers', response)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		clearAll() {
+			this.$set(this, 'foundUsers', [])
+		},
+	},
+}
 </script>
 
 <style lang="scss" scoped>
-	.card {
-		margin-bottom: 1rem;
+.card {
+	margin-bottom: 1rem;
 
-		.add-member-form {
-			margin: 1rem;
-		}
+	.add-member-form {
+		margin: 1rem;
 	}
+}
 
-	.team-members {
-		padding: 0;
+.team-members {
+	padding: 0;
 
-		.table {
-			border-top: 0;
-		}
+	.table {
+		border-top: 0;
 	}
+}
 </style>
\ No newline at end of file
diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index 0bfe3489c..dc179769f 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="content loader-container is-max-width-desktop" v-bind:class="{ 'is-loading': teamService.loading}">
-		<router-link :to="{name:'teams.create'}" class="button is-success button-right" >
+		<router-link :to="{name:'teams.create'}" class="button is-success button-right">
 			<span class="icon is-small">
 				<icon icon="plus"/>
 			</span>
@@ -8,9 +8,9 @@
 		</router-link>
 		<h1>Teams</h1>
 		<ul class="teams box">
-			<li v-for="t in teams" :key="t.id">
+			<li :key="t.id" v-for="t in teams">
 				<router-link :to="{name: 'teams.edit', params: {id: t.id}}">
-					{{t.name}}
+					{{ t.name }}
 				</router-link>
 			</li>
 		</ul>
@@ -18,33 +18,33 @@
 </template>
 
 <script>
-	import TeamService from '../../services/team'
-	
-	export default {
-		name: 'ListTeams',
-		data() {
-			return {
-				teamService: TeamService,
-				teams: [],
-			}
-		},
-		created() {
-			this.teamService = new TeamService()
-			this.loadTeams()
-		},
-		mounted() {
-			this.setTitle('Teams')
-		},
-		methods: {
-			loadTeams() {
-				this.teamService.getAll()
-					.then(response => {
-						this.$set(this, 'teams', response)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
+import TeamService from '../../services/team'
+
+export default {
+	name: 'ListTeams',
+	data() {
+		return {
+			teamService: TeamService,
+			teams: [],
 		}
-	}
+	},
+	created() {
+		this.teamService = new TeamService()
+		this.loadTeams()
+	},
+	mounted() {
+		this.setTitle('Teams')
+	},
+	methods: {
+		loadTeams() {
+			this.teamService.getAll()
+				.then(response => {
+					this.$set(this, 'teams', response)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
 </script>
diff --git a/src/views/teams/NewTeam.vue b/src/views/teams/NewTeam.vue
index 2200e0597..41816123a 100644
--- a/src/views/teams/NewTeam.vue
+++ b/src/views/teams/NewTeam.vue
@@ -1,22 +1,22 @@
 <template>
 	<div class="fullpage">
-		<a class="close" @click="back()">
+		<a @click="back()" class="close">
 			<icon :icon="['far', 'times-circle']">
 			</icon>
 		</a>
 		<h3>Create a new team</h3>
-		<form @submit.prevent="newTeam" @keyup.esc="back()">
+		<form @keyup.esc="back()" @submit.prevent="newTeam">
 			<div class="field is-grouped">
 				<p class="control is-expanded" v-bind:class="{ 'is-loading': teamService.loading}">
 					<input
-							v-focus
-							class="input"
-							:class="{ 'disabled': teamService.loading}" v-model="team.name"
-							type="text"
-							placeholder="The team's name goes here..."/>
+						:class="{ 'disabled': teamService.loading}"
+						class="input"
+						placeholder="The team's name goes here..." type="text"
+						v-focus
+						v-model="team.name"/>
 				</p>
 				<p class="control">
-					<button type="submit" class="button is-success noshadow">
+					<button class="button is-success noshadow" type="submit">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
@@ -32,49 +32,49 @@
 </template>
 
 <script>
-	import router from '../../router'
-	import TeamModel from '../../models/team'
-	import TeamService from '../../services/team'
-	import {IS_FULLPAGE} from '../../store/mutation-types'
+import router from '../../router'
+import TeamModel from '../../models/team'
+import TeamService from '../../services/team'
+import {IS_FULLPAGE} from '@/store/mutation-types'
 
-	export default {
-		name: 'NewTeam',
-		data() {
-			return {
-				teamService: TeamService,
-				team: TeamModel,
-				showError: false,
-			}
-		},
-		created() {
-			this.teamService = new TeamService()
-			this.team = new TeamModel()
-			this.$store.commit(IS_FULLPAGE, true)
-		},
-		mounted() {
-			this.setTitle('Create a new Team')
-		},
-		methods: {
-			newTeam() {
-
-				if (this.team.name === '') {
-					this.showError = true
-					return
-				}
-				this.showError = false
-
-				this.teamService.create(this.team)
-					.then(response => {
-						router.push({name: 'teams.edit', params: {id: response.id}})
-						this.success({message: 'The team was successfully created.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			back() {
-				router.go(-1)
-			},
+export default {
+	name: 'NewTeam',
+	data() {
+		return {
+			teamService: TeamService,
+			team: TeamModel,
+			showError: false,
 		}
-	}
+	},
+	created() {
+		this.teamService = new TeamService()
+		this.team = new TeamModel()
+		this.$store.commit(IS_FULLPAGE, true)
+	},
+	mounted() {
+		this.setTitle('Create a new Team')
+	},
+	methods: {
+		newTeam() {
+
+			if (this.team.name === '') {
+				this.showError = true
+				return
+			}
+			this.showError = false
+
+			this.teamService.create(this.team)
+				.then(response => {
+					router.push({name: 'teams.edit', params: {id: response.id}})
+					this.success({message: 'The team was successfully created.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		back() {
+			router.go(-1)
+		},
+	},
+}
 </script>
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 959c757f5..4a9b52b54 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -2,21 +2,21 @@
 	<div>
 		<h2 class="title has-text-centered">Login</h2>
 		<div class="box">
-			<div v-if="confirmedEmailSuccess" class="notification is-success has-text-centered">
+			<div class="notification is-success has-text-centered" v-if="confirmedEmailSuccess">
 				You successfully confirmed your email! You can log in now.
 			</div>
-			<form id="loginform" @submit.prevent="submit">
+			<form @submit.prevent="submit" id="loginform">
 				<div class="field">
 					<label class="label" for="username">Username</label>
 					<div class="control">
 						<input
-								v-focus type="text"
-								id="username"
-								class="input"
-								name="username"
-								placeholder="e.g. frederick"
-								ref="username"
-								required
+							class="input" id="username"
+							name="username"
+							placeholder="e.g. frederick"
+							ref="username"
+							required
+							type="text"
+							v-focus
 						/>
 					</div>
 				</div>
@@ -24,13 +24,13 @@
 					<label class="label" for="password">Password</label>
 					<div class="control">
 						<input
-								type="password"
-								class="input"
-								id="password"
-								name="password"
-								placeholder="e.g. ••••••••••••"
-								ref="password"
-								required
+							class="input"
+							id="password"
+							name="password"
+							placeholder="e.g. ••••••••••••"
+							ref="password"
+							required
+							type="password"
 						/>
 					</div>
 				</div>
@@ -38,26 +38,27 @@
 					<label class="label" for="totpPasscode">Two Factor Authentication Code</label>
 					<div class="control">
 						<input
-								type="text"
-								class="input"
-								id="totpPasscode"
-								placeholder="e.g. 123456"
-								ref="totpPasscode"
-								required
-								v-focus
+							class="input"
+							id="totpPasscode"
+							placeholder="e.g. 123456"
+							ref="totpPasscode"
+							required
+							type="text"
+							v-focus
 						/>
 					</div>
 				</div>
 
 				<div class="field is-grouped login-buttons">
 					<div class="control is-expanded">
-						<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Login
+						<button class="button is-primary" type="submit" v-bind:class="{ 'is-loading': loading}">Login
 						</button>
 						<router-link :to="{ name: 'user.register' }" class="button" v-if="registrationEnabled">Register
 						</router-link>
 					</div>
 					<div class="control">
-						<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">Reset your
+						<router-link :to="{ name: 'user.password-reset.request' }" class="reset-password-link">Reset
+							your
 							password
 						</router-link>
 					</div>
@@ -72,88 +73,89 @@
 </template>
 
 <script>
-	import {mapState} from 'vuex'
+import {mapState} from 'vuex'
 
-	import router from '../../router'
-	import {HTTP} from '../../http-common'
-	import message from '../../message'
-	import {ERROR_MESSAGE, LOADING} from '../../store/mutation-types'
-	import legal from '../../components/misc/legal'
+import router from '../../router'
+import {HTTP} from '@/http-common'
+import message from '../../message'
+import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
+import legal from '../../components/misc/legal'
 
-	export default {
-		components: {
-			legal,
-		},
-		data() {
-			return {
-				confirmedEmailSuccess: false,
-			}
-		},
-		beforeMount() {
-			// Try to verify the email
-			// FIXME: Why is this here? Can we find a better place for this?
-			let emailVerifyToken = localStorage.getItem('emailConfirmToken')
-			if (emailVerifyToken) {
-				const cancel = message.setLoading(this)
-				HTTP.post(`user/confirm`, {token: emailVerifyToken})
-					.then(() => {
-						localStorage.removeItem('emailConfirmToken')
-						this.confirmedEmailSuccess = true
-						cancel()
-					})
-					.catch(e => {
-						cancel()
-						this.$store.commit(ERROR_MESSAGE, e.response.data.message)
-					})
-			}
-
-			// Check if the user is already logged in, if so, redirect him to the homepage
-			if (this.authenticated) {
-				router.push({name: 'home'})
-			}
-		},
-		created() {
-			this.setTitle('Login')
-		},
-		computed: mapState({
-			registrationEnabled: state => state.config.registrationEnabled,
-			loading: LOADING,
-			errorMessage: ERROR_MESSAGE,
-			needsTotpPasscode: state => state.auth.needsTotpPasscode,
-			authenticated: state => state.auth.authenticated,
-		}),
-		methods: {
-			submit() {
-				this.$store.commit(ERROR_MESSAGE, '')
-				// Some browsers prevent Vue bindings from working with autofilled values.
-				// To work around this, we're manually getting the values here instead of relying on vue bindings.
-				// For more info, see https://kolaente.dev/vikunja/frontend/issues/78
-				const credentials = {
-					username: this.$refs.username.value,
-					password: this.$refs.password.value,
-				}
-
-				if (this.needsTotpPasscode) {
-					credentials.totpPasscode = this.$refs.totpPasscode.value
-				}
-
-				this.$store.dispatch('auth/login', credentials)
-					.then(() => {
-						router.push({name: 'home'})
-					})
-					.catch(() => {})
-			}
+export default {
+	components: {
+		legal,
+	},
+	data() {
+		return {
+			confirmedEmailSuccess: false,
 		}
-	}
+	},
+	beforeMount() {
+		// Try to verify the email
+		// FIXME: Why is this here? Can we find a better place for this?
+		let emailVerifyToken = localStorage.getItem('emailConfirmToken')
+		if (emailVerifyToken) {
+			const cancel = message.setLoading(this)
+			HTTP.post(`user/confirm`, {token: emailVerifyToken})
+				.then(() => {
+					localStorage.removeItem('emailConfirmToken')
+					this.confirmedEmailSuccess = true
+					cancel()
+				})
+				.catch(e => {
+					cancel()
+					this.$store.commit(ERROR_MESSAGE, e.response.data.message)
+				})
+		}
+
+		// Check if the user is already logged in, if so, redirect him to the homepage
+		if (this.authenticated) {
+			router.push({name: 'home'})
+		}
+	},
+	created() {
+		this.setTitle('Login')
+	},
+	computed: mapState({
+		registrationEnabled: state => state.config.registrationEnabled,
+		loading: LOADING,
+		errorMessage: ERROR_MESSAGE,
+		needsTotpPasscode: state => state.auth.needsTotpPasscode,
+		authenticated: state => state.auth.authenticated,
+	}),
+	methods: {
+		submit() {
+			this.$store.commit(ERROR_MESSAGE, '')
+			// Some browsers prevent Vue bindings from working with autofilled values.
+			// To work around this, we're manually getting the values here instead of relying on vue bindings.
+			// For more info, see https://kolaente.dev/vikunja/frontend/issues/78
+			const credentials = {
+				username: this.$refs.username.value,
+				password: this.$refs.password.value,
+			}
+
+			if (this.needsTotpPasscode) {
+				credentials.totpPasscode = this.$refs.totpPasscode.value
+			}
+
+			this.$store.dispatch('auth/login', credentials)
+				.then(() => {
+					router.push({name: 'home'})
+				})
+				.catch(() => {
+				})
+		},
+	},
+}
 </script>
 
 <style scoped>
-	.button {
-		margin: 0 0.4em 0 0;
-	}
+.button {
+	margin: 0 0.4em 0 0;
+}
 
-	.reset-password-link {
-		display: inline-block;
-		padding-top: 5px;
-	}
+.reset-password-link {
+	display: inline-block;
+	padding-top: 5px;
+}
 </style>
diff --git a/src/views/user/PasswordReset.vue b/src/views/user/PasswordReset.vue
index ae17dbc6e..941166367 100644
--- a/src/views/user/PasswordReset.vue
+++ b/src/views/user/PasswordReset.vue
@@ -2,23 +2,40 @@
 	<div>
 		<h2 class="title has-text-centered">Reset your password</h2>
 		<div class="box">
-			<form id="form" @submit.prevent="submit" v-if="!successMessage">
+			<form @submit.prevent="submit" id="form" v-if="!successMessage">
 				<div class="field">
 					<label class="label" for="password1">Password</label>
 					<div class="control">
-						<input v-focus type="password" class="input" id="password1" name="password1" placeholder="e.g. ••••••••••••" v-model="credentials.password" required/>
+						<input
+							class="input"
+							id="password1"
+							name="password1"
+							placeholder="e.g. ••••••••••••"
+							required
+							type="password"
+							v-focus
+							v-model="credentials.password"/>
 					</div>
 				</div>
 				<div class="field">
 					<label class="label" for="password2">Retype your password</label>
 					<div class="control">
-						<input type="password" class="input" id="password2" name="password2" placeholder="e.g. ••••••••••••" v-model="credentials.password2" required/>
+						<input
+							class="input"
+							id="password2"
+							name="password2"
+							placeholder="e.g. ••••••••••••"
+							required
+							type="password"
+							v-model="credentials.password2"/>
 					</div>
 				</div>
 
 				<div class="field is-grouped">
 					<div class="control">
-						<button type="submit" class="button is-primary" :class="{ 'is-loading': this.passwordResetService.loading}">Reset your password</button>
+						<button :class="{ 'is-loading': this.passwordResetService.loading}" class="button is-primary"
+								type="submit">Reset your password
+						</button>
 					</div>
 				</div>
 				<div class="notification is-info" v-if="this.passwordResetService.loading">
@@ -28,7 +45,7 @@
 					{{ errorMsg }}
 				</div>
 			</form>
-			<div v-if="successMessage" class="has-text-centered">
+			<div class="has-text-centered" v-if="successMessage">
 				<div class="notification is-success">
 					{{ successMessage }}
 				</div>
@@ -40,56 +57,56 @@
 </template>
 
 <script>
-	import PasswordResetModel from '../../models/passwordReset'
-	import PasswordResetService from '../../services/passwordReset'
-	import Legal from '../../components/misc/legal'
+import PasswordResetModel from '../../models/passwordReset'
+import PasswordResetService from '../../services/passwordReset'
+import Legal from '../../components/misc/legal'
 
-	export default {
-		components: {
-			Legal,
-		},
-		data() {
-			return {
-				passwordResetService: PasswordResetService,
-				credentials: {
-					password: '',
-					password2: '',
-				},
-				errorMsg: '',
-				successMessage: ''
-			}
-		},
-		created() {
-			this.passwordResetService = new PasswordResetService()
-		},
-		mounted() {
-			this.setTitle('Reset your password')
-		},
-		methods: {
-			submit() {
-				this.errorMsg = ''
-
-				if (this.credentials.password2 !== this.credentials.password) {
-					this.errorMsg = 'Passwords don\'t match'
-					return
-				}
-
-				let passwordReset = new PasswordResetModel({newPassword: this.credentials.password})
-				this.passwordResetService.resetPassword(passwordReset)
-					.then(response => {
-						this.successMessage = response.data.message
-						localStorage.removeItem('passwordResetToken')
-					})
-					.catch(e => {
-						this.errorMsg = e.response.data.message
-					})
-			}
+export default {
+	components: {
+		Legal,
+	},
+	data() {
+		return {
+			passwordResetService: PasswordResetService,
+			credentials: {
+				password: '',
+				password2: '',
+			},
+			errorMsg: '',
+			successMessage: '',
 		}
-	}
+	},
+	created() {
+		this.passwordResetService = new PasswordResetService()
+	},
+	mounted() {
+		this.setTitle('Reset your password')
+	},
+	methods: {
+		submit() {
+			this.errorMsg = ''
+
+			if (this.credentials.password2 !== this.credentials.password) {
+				this.errorMsg = 'Passwords don\'t match'
+				return
+			}
+
+			let passwordReset = new PasswordResetModel({newPassword: this.credentials.password})
+			this.passwordResetService.resetPassword(passwordReset)
+				.then(response => {
+					this.successMessage = response.data.message
+					localStorage.removeItem('passwordResetToken')
+				})
+				.catch(e => {
+					this.errorMsg = e.response.data.message
+				})
+		},
+	},
+}
 </script>
 
 <style scoped>
-	.button {
-		margin: 0 0.4em 0 0;
-	}
+.button {
+	margin: 0 0.4em 0 0;
+}
 </style>
diff --git a/src/views/user/Register.vue b/src/views/user/Register.vue
index 9b384d9a1..f5411d156 100644
--- a/src/views/user/Register.vue
+++ b/src/views/user/Register.vue
@@ -2,35 +2,66 @@
 	<div>
 		<h2 class="title has-text-centered">Register</h2>
 		<div class="box">
-			<form id="registerform" @submit.prevent="submit">
+			<form @submit.prevent="submit" id="registerform">
 				<div class="field">
 					<label class="label" for="username">Username</label>
 					<div class="control">
-						<input v-focus type="text" id="username" class="input" name="username" placeholder="e.g. frederick" v-model="credentials.username" required/>
+						<input
+							class="input"
+							id="username"
+							name="username"
+							placeholder="e.g. frederick"
+							required
+							type="text"
+							v-focus
+							v-model="credentials.username"/>
 					</div>
 				</div>
 				<div class="field">
 					<label class="label" for="email">E-mail address</label>
 					<div class="control">
-						<input type="email" class="input" id="email" name="email" placeholder="e.g. frederic@vikunja.io" v-model="credentials.email" required/>
+						<input
+							class="input"
+							id="email"
+							name="email"
+							placeholder="e.g. frederic@vikunja.io"
+							required
+							type="email"
+							v-model="credentials.email"/>
 					</div>
 				</div>
 				<div class="field">
 					<label class="label" for="password1">Password</label>
 					<div class="control">
-						<input type="password" class="input" id="password1" name="password1" placeholder="e.g. ••••••••••••" v-model="credentials.password" required/>
+						<input
+							class="input"
+							id="password1"
+							name="password1"
+							placeholder="e.g. ••••••••••••"
+							required
+							type="password"
+							v-model="credentials.password"/>
 					</div>
 				</div>
 				<div class="field">
 					<label class="label" for="password2">Retype your password</label>
 					<div class="control">
-						<input type="password" class="input" id="password2" name="password2" placeholder="e.g. ••••••••••••" v-model="credentials.password2" required/>
+						<input
+							class="input"
+							id="password2"
+							name="password2"
+							placeholder="e.g. ••••••••••••"
+							required
+							type="password"
+							v-model="credentials.password2"/>
 					</div>
 				</div>
 
 				<div class="field is-grouped">
 					<div class="control">
-						<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': loading}">Register</button>
+						<button class="button is-primary" type="submit" v-bind:class="{ 'is-loading': loading}">
+							Register
+						</button>
 						<router-link :to="{ name: 'user.login' }" class="button">Login</router-link>
 					</div>
 				</div>
@@ -47,64 +78,64 @@
 </template>
 
 <script>
-	import router from '../../router'
-	import {mapState} from 'vuex'
-	import {ERROR_MESSAGE, LOADING} from '../../store/mutation-types'
-	import Legal from '../../components/misc/legal'
+import router from '../../router'
+import {mapState} from 'vuex'
+import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
+import Legal from '../../components/misc/legal'
 
-	export default {
-		components: {
-			Legal,
-		},
-		data() {
-			return {
-				credentials: {
-					username: '',
-					email: '',
-					password: '',
-					password2: '',
-				},
-			}
-		},
-		beforeMount() {
-			// Check if the user is already logged in, if so, redirect him to the homepage
-			if (this.authenticated) {
-				router.push({name: 'home'})
-			}
-		},
-		mounted() {
-			this.setTitle('Register')
-		},
-		computed: mapState({
-			authenticated: state => state.auth.authenticated,
-			loading: LOADING,
-			errorMessage: ERROR_MESSAGE,
-		}),
-		methods: {
-			submit() {
-				this.$store.commit(LOADING, true)
-				this.$store.commit(ERROR_MESSAGE, '')
-
-				if (this.credentials.password2 !== this.credentials.password) {
-					this.$store.commit(ERROR_MESSAGE, 'Passwords don\'t match.')
-					this.$store.commit(LOADING, false)
-					return
-				}
-
-				const credentials = {
-					username: this.credentials.username,
-					email: this.credentials.email,
-					password: this.credentials.password
-				}
-
-				this.$store.dispatch('auth/register', credentials)
-			}
+export default {
+	components: {
+		Legal,
+	},
+	data() {
+		return {
+			credentials: {
+				username: '',
+				email: '',
+				password: '',
+				password2: '',
+			},
 		}
-	}
+	},
+	beforeMount() {
+		// Check if the user is already logged in, if so, redirect him to the homepage
+		if (this.authenticated) {
+			router.push({name: 'home'})
+		}
+	},
+	mounted() {
+		this.setTitle('Register')
+	},
+	computed: mapState({
+		authenticated: state => state.auth.authenticated,
+		loading: LOADING,
+		errorMessage: ERROR_MESSAGE,
+	}),
+	methods: {
+		submit() {
+			this.$store.commit(LOADING, true)
+			this.$store.commit(ERROR_MESSAGE, '')
+
+			if (this.credentials.password2 !== this.credentials.password) {
+				this.$store.commit(ERROR_MESSAGE, 'Passwords don\'t match.')
+				this.$store.commit(LOADING, false)
+				return
+			}
+
+			const credentials = {
+				username: this.credentials.username,
+				email: this.credentials.email,
+				password: this.credentials.password,
+			}
+
+			this.$store.dispatch('auth/register', credentials)
+		},
+	},
+}
 </script>
 
 <style scoped>
-	.button {
-		margin: 0 0.4em 0 0;
-	}
+.button {
+	margin: 0 0.4em 0 0;
+}
 </style>
diff --git a/src/views/user/RequestPasswordReset.vue b/src/views/user/RequestPasswordReset.vue
index bb72a60f0..57b7180de 100644
--- a/src/views/user/RequestPasswordReset.vue
+++ b/src/views/user/RequestPasswordReset.vue
@@ -6,13 +6,24 @@
 				<div class="field">
 					<label class="label" for="email">E-mail address</label>
 					<div class="control">
-						<input v-focus type="email" class="input" id="email" name="email" placeholder="e.g. frederic@vikunja.io" v-model="passwordReset.email" required/>
+						<input
+							class="input"
+							id="email"
+							name="email"
+							placeholder="e.g. frederic@vikunja.io"
+							required
+							type="email"
+							v-focus
+							v-model="passwordReset.email"/>
 					</div>
 				</div>
 
 				<div class="field is-grouped">
 					<div class="control">
-						<button type="submit" class="button is-primary" v-bind:class="{ 'is-loading': passwordResetService.loading}">Send me a password reset link</button>
+						<button class="button is-primary" type="submit"
+								v-bind:class="{ 'is-loading': passwordResetService.loading}">Send me a password reset
+							link
+						</button>
 						<router-link :to="{ name: 'user.login' }" class="button">Login</router-link>
 					</div>
 				</div>
@@ -20,7 +31,7 @@
 					{{ errorMsg }}
 				</div>
 			</form>
-			<div v-if="isSuccess" class="has-text-centered">
+			<div class="has-text-centered" v-if="isSuccess">
 				<div class="notification is-success">
 					Check your inbox! You should have a mail with instructions on how to reset your password.
 				</div>
@@ -32,46 +43,46 @@
 </template>
 
 <script>
-	import PasswordResetModel from '../../models/passwordReset'
-	import PasswordResetService from '../../services/passwordReset'
-	import Legal from '../../components/misc/legal'
+import PasswordResetModel from '../../models/passwordReset'
+import PasswordResetService from '../../services/passwordReset'
+import Legal from '../../components/misc/legal'
 
-	export default {
-		components: {
-			Legal,
-		},
-		data() {
-			return {
-				passwordResetService: PasswordResetService,
-				passwordReset: PasswordResetModel,
-				errorMsg: '',
-				isSuccess: false
-			}
-		},
-		created() {
-			this.passwordResetService = new PasswordResetService()
-			this.passwordReset = new PasswordResetModel()
-		},
-		mounted() {
-			this.setTitle('Reset your password')
-		},
-		methods: {
-			submit() {
-				this.errorMsg = ''
-				this.passwordResetService.requestResetPassword(this.passwordReset)
-					.then(() => {
-						this.isSuccess = true
-					})
-					.catch(e => {
-						this.errorMsg = e.response.data.message
-					})
-			},
+export default {
+	components: {
+		Legal,
+	},
+	data() {
+		return {
+			passwordResetService: PasswordResetService,
+			passwordReset: PasswordResetModel,
+			errorMsg: '',
+			isSuccess: false,
 		}
-	}
+	},
+	created() {
+		this.passwordResetService = new PasswordResetService()
+		this.passwordReset = new PasswordResetModel()
+	},
+	mounted() {
+		this.setTitle('Reset your password')
+	},
+	methods: {
+		submit() {
+			this.errorMsg = ''
+			this.passwordResetService.requestResetPassword(this.passwordReset)
+				.then(() => {
+					this.isSuccess = true
+				})
+				.catch(e => {
+					this.errorMsg = e.response.data.message
+				})
+		},
+	},
+}
 </script>
 
 <style scoped>
-	.button {
-		margin: 0 0.4em 0 0;
-	}
+.button {
+	margin: 0 0.4em 0 0;
+}
 </style>
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index 5d81a7b17..2558d6a32 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
-			class="loader-container is-max-width-desktop"
-			:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }">
+		:class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }"
+		class="loader-container is-max-width-desktop">
 		<!-- Password update -->
 		<div class="card">
 			<header class="card-header">
@@ -16,43 +16,43 @@
 							<label class="label" for="newPassword">New Password</label>
 							<div class="control">
 								<input
-										class="input"
-										type="password"
-										id="newPassword"
-										placeholder="The new password..."
-										v-model="passwordUpdate.newPassword"
-										@keyup.enter="updatePassword"/>
+									@keyup.enter="updatePassword"
+									class="input"
+									id="newPassword"
+									placeholder="The new password..."
+									type="password"
+									v-model="passwordUpdate.newPassword"/>
 							</div>
 						</div>
 						<div class="field">
 							<label class="label" for="newPasswordConfirm">New Password Confirmation</label>
 							<div class="control">
 								<input
-										class="input"
-										type="password"
-										id="newPasswordConfirm"
-										placeholder="Confirm your new password..."
-										v-model="passwordConfirm"
-										@keyup.enter="updatePassword"/>
+									@keyup.enter="updatePassword"
+									class="input"
+									id="newPasswordConfirm"
+									placeholder="Confirm your new password..."
+									type="password"
+									v-model="passwordConfirm"/>
 							</div>
 						</div>
 						<div class="field">
 							<label class="label" for="currentPassword">Current Password</label>
 							<div class="control">
 								<input
-										class="input"
-										type="password"
-										id="currentPassword"
-										placeholder="Your current password"
-										v-model="passwordUpdate.oldPassword"
-										@keyup.enter="updatePassword"/>
+									@keyup.enter="updatePassword"
+									class="input"
+									id="currentPassword"
+									placeholder="Your current password"
+									type="password"
+									v-model="passwordUpdate.oldPassword"/>
 							</div>
 						</div>
 					</form>
 
 					<div class="bigbuttons">
-						<button @click="updatePassword()" class="button is-primary is-fullwidth"
-								:class="{ 'is-loading': passwordUpdateService.loading}">
+						<button :class="{ 'is-loading': passwordUpdateService.loading}" @click="updatePassword()"
+								class="button is-primary is-fullwidth">
 							Save
 						</button>
 					</div>
@@ -74,31 +74,31 @@
 							<label class="label" for="newEmail">New Email Address</label>
 							<div class="control">
 								<input
-										class="input"
-										type="email"
-										id="newEmail"
-										placeholder="The new email address..."
-										v-model="emailUpdate.newEmail"
-										@keyup.enter="updateEmail"/>
+									@keyup.enter="updateEmail"
+									class="input"
+									id="newEmail"
+									placeholder="The new email address..."
+									type="email"
+									v-model="emailUpdate.newEmail"/>
 							</div>
 						</div>
 						<div class="field">
 							<label class="label" for="currentPassword">Current Password</label>
 							<div class="control">
 								<input
-										class="input"
-										type="password"
-										id="currentPassword"
-										placeholder="Your current password"
-										v-model="emailUpdate.password"
-										@keyup.enter="updateEmail"/>
+									@keyup.enter="updateEmail"
+									class="input"
+									id="currentPassword"
+									placeholder="Your current password"
+									type="password"
+									v-model="emailUpdate.password"/>
 							</div>
 						</div>
 					</form>
 
 					<div class="bigbuttons">
-						<button @click="updateEmail()" class="button is-primary is-fullwidth"
-								:class="{ 'is-loading': emailUpdateService.loading}">
+						<button :class="{ 'is-loading': emailUpdateService.loading}" @click="updateEmail()"
+								class="button is-primary is-fullwidth">
 							Save
 						</button>
 					</div>
@@ -118,10 +118,10 @@
 			</header>
 			<div class="card-content">
 				<a
-						class="button is-primary"
-						v-if="!totpEnrolled && totp.secret === ''"
-						@click="totpEnroll()"
-						:class="{ 'is-loading': totpService.loading }">
+					:class="{ 'is-loading': totpService.loading }"
+					@click="totpEnroll()"
+					class="button is-primary"
+					v-if="!totpEnrolled && totp.secret === ''">
 					Enroll
 				</a>
 				<div class="content" v-else-if="totp.secret !== '' && !totp.enabled">
@@ -138,38 +138,38 @@
 						<label class="label" for="totpConfirmPasscode">Passcode</label>
 						<div class="control">
 							<input
-									class="input"
-									type="text"
-									id="totpConfirmPasscode"
-									placeholder="A code generated by your totp application"
-									v-model="totpConfirmPasscode"
-									@keyup.enter="totpConfirm()"/>
+								@keyup.enter="totpConfirm()"
+								class="input"
+								id="totpConfirmPasscode"
+								placeholder="A code generated by your totp application"
+								type="text"
+								v-model="totpConfirmPasscode"/>
 						</div>
 					</div>
-					<a class="button is-primary" @click="totpConfirm()">Confirm</a>
+					<a @click="totpConfirm()" class="button is-primary">Confirm</a>
 				</div>
 				<div class="content" v-else-if="totp.secret !== '' && totp.enabled">
 					<p>
 						You've sucessfully set up two factor authentication!
 					</p>
 					<p v-if="!totpDisableForm">
-						<a class="button is-danger" @click="totpDisableForm = true">Disable</a>
+						<a @click="totpDisableForm = true" class="button is-danger">Disable</a>
 					</p>
 					<div v-if="totpDisableForm">
 						<div class="field">
 							<label class="label" for="currentPassword">Please Enter Your Password</label>
 							<div class="control">
 								<input
-										class="input"
-										type="password"
-										id="currentPassword"
-										placeholder="Your current password"
-										v-model="totpDisablePassword"
-										@keyup.enter="totpDisable"
-										v-focus/>
+									@keyup.enter="totpDisable"
+									class="input"
+									id="currentPassword"
+									placeholder="Your current password"
+									type="password"
+									v-focus
+									v-model="totpDisablePassword"/>
 							</div>
 						</div>
-						<a class="button is-danger" @click="totpDisable()">Disable two factor authentication</a>
+						<a @click="totpDisable()" class="button is-danger">Disable two factor authentication</a>
 					</div>
 				</div>
 			</div>
@@ -182,9 +182,9 @@
 			</header>
 			<div class="card-content">
 				<router-link
-						class="button is-primary is-right noshadow is-outlined"
-						:to="{name: 'migrate.start'}"
-						v-if="migratorsEnabled"
+					:to="{name: 'migrate.start'}"
+					class="button is-primary is-right noshadow is-outlined"
+					v-if="migratorsEnabled"
 				>
 					Import your data into Vikunja
 				</router-link>
@@ -194,131 +194,131 @@
 </template>
 
 <script>
-	import PasswordUpdateModel from '../../models/passwordUpdate'
-	import PasswordUpdateService from '../../services/passwordUpdateService'
-	import EmailUpdateService from '../../services/emailUpdate'
-	import EmailUpdateModel from '../../models/emailUpdate'
-	import TotpModel from '../../models/totp'
-	import TotpService from '../../services/totp'
+import PasswordUpdateModel from '../../models/passwordUpdate'
+import PasswordUpdateService from '../../services/passwordUpdateService'
+import EmailUpdateService from '../../services/emailUpdate'
+import EmailUpdateModel from '../../models/emailUpdate'
+import TotpModel from '../../models/totp'
+import TotpService from '../../services/totp'
 
-	import {mapState} from 'vuex'
+import {mapState} from 'vuex'
 
-	import AvatarSettings from '../../components/user/avatar-settings'
+import AvatarSettings from '../../components/user/avatar-settings'
 
-	export default {
-		name: 'Settings',
-		data() {
-			return {
-				passwordUpdateService: PasswordUpdateService,
-				passwordUpdate: PasswordUpdateModel,
-				passwordConfirm: '',
+export default {
+	name: 'Settings',
+	data() {
+		return {
+			passwordUpdateService: PasswordUpdateService,
+			passwordUpdate: PasswordUpdateModel,
+			passwordConfirm: '',
 
-				emailUpdateService: EmailUpdateService,
-				emailUpdate: EmailUpdateModel,
+			emailUpdateService: EmailUpdateService,
+			emailUpdate: EmailUpdateModel,
 
-				totpService: TotpService,
-				totp: TotpModel,
-				totpQR: '',
-				totpEnrolled: false,
-				totpConfirmPasscode: '',
-				totpDisableForm: false,
-				totpDisablePassword: '',
+			totpService: TotpService,
+			totp: TotpModel,
+			totpQR: '',
+			totpEnrolled: false,
+			totpConfirmPasscode: '',
+			totpDisableForm: false,
+			totpDisablePassword: '',
+		}
+	},
+	components: {
+		AvatarSettings,
+	},
+	created() {
+		this.passwordUpdateService = new PasswordUpdateService()
+		this.passwordUpdate = new PasswordUpdateModel()
+
+		this.emailUpdateService = new EmailUpdateService()
+		this.emailUpdate = new EmailUpdateModel()
+
+		this.totpService = new TotpService()
+		this.totp = new TotpModel()
+
+		this.totpStatus()
+	},
+	mounted() {
+		this.setTitle('Settings')
+	},
+	computed: mapState({
+		totpEnabled: state => state.config.totpEnabled,
+		migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
+	}),
+	methods: {
+		updatePassword() {
+			if (this.passwordConfirm !== this.passwordUpdate.newPassword) {
+				this.error({message: 'The new password and its confirmation don\'t match.'}, this)
+				return
 			}
+
+			this.passwordUpdateService.update(this.passwordUpdate)
+				.then(() => {
+					this.success({message: 'The password was successfully updated.'}, this)
+				})
+				.catch(e => this.error(e, this))
 		},
-		components: {
-			AvatarSettings,
+		updateEmail() {
+			this.emailUpdateService.update(this.emailUpdate)
+				.then(() => {
+					this.success({message: 'Your email address was successfully updated. We\'ve sent you a link to confirm it.'}, this)
+				})
+				.catch(e => this.error(e, this))
 		},
-		created() {
-			this.passwordUpdateService = new PasswordUpdateService()
-			this.passwordUpdate = new PasswordUpdateModel()
-
-			this.emailUpdateService = new EmailUpdateService()
-			this.emailUpdate = new EmailUpdateModel()
-
-			this.totpService = new TotpService()
-			this.totp = new TotpModel()
-
-			this.totpStatus()
-		},
-		mounted() {
-			this.setTitle('Settings')
-		},
-		computed: mapState({
-			totpEnabled: state => state.config.totpEnabled,
-			migratorsEnabled: state => state.config.availableMigrators !== null && state.config.availableMigrators.length > 0,
-		}),
-		methods: {
-			updatePassword() {
-				if (this.passwordConfirm !== this.passwordUpdate.newPassword) {
-					this.error({message: 'The new password and its confirmation don\'t match.'}, this)
-					return
-				}
-
-				this.passwordUpdateService.update(this.passwordUpdate)
-					.then(() => {
-						this.success({message: 'The password was successfully updated.'}, this)
-					})
-					.catch(e => this.error(e, this))
-			},
-			updateEmail() {
-				this.emailUpdateService.update(this.emailUpdate)
-					.then(() => {
-						this.success({message: 'Your email address was successfully updated. We\'ve sent you a link to confirm it.'}, this)
-					})
-					.catch(e => this.error(e, this))
-			},
-			totpStatus() {
-				if (!this.totpEnabled) {
-					return
-				}
-				this.totpService.get()
-					.then(r => {
-						this.$set(this, 'totp', r)
-						this.totpSetQrCode()
-					})
-					.catch(e => {
-						// Error code 1016 means totp is not enabled, we don't need an error in that case.
-						if (e.response && e.response.data && e.response.data.code && e.response.data.code === 1016) {
-							this.totpEnrolled = false
-							return
-						}
-
-						this.error(e, this)
-					})
-			},
-			totpSetQrCode() {
-				this.totpService.qrcode()
-					.then(qr => {
-						const urlCreator = window.URL || window.webkitURL
-						this.totpQR = urlCreator.createObjectURL(qr)
-					})
-			},
-			totpEnroll() {
-				this.totpService.enroll()
-					.then(r => {
-						this.totpEnrolled = true
-						this.$set(this, 'totp', r)
-						this.totpSetQrCode()
-					})
-					.catch(e => this.error(e, this))
-			},
-			totpConfirm() {
-				this.totpService.enable({passcode: this.totpConfirmPasscode})
-					.then(() => {
-						this.$set(this.totp, 'enabled', true)
-						this.success({message: 'You\'ve successfully confirmed your totp setup and can use it from now on!'}, this)
-					})
-					.catch(e => this.error(e, this))
-			},
-			totpDisable() {
-				this.totpService.disable({password: this.totpDisablePassword})
-					.then(() => {
+		totpStatus() {
+			if (!this.totpEnabled) {
+				return
+			}
+			this.totpService.get()
+				.then(r => {
+					this.$set(this, 'totp', r)
+					this.totpSetQrCode()
+				})
+				.catch(e => {
+					// Error code 1016 means totp is not enabled, we don't need an error in that case.
+					if (e.response && e.response.data && e.response.data.code && e.response.data.code === 1016) {
 						this.totpEnrolled = false
-						this.$set(this, 'totp', new TotpModel())
-						this.success({message: 'Two factor authentication was sucessfully disabled.'}, this)
-					})
-					.catch(e => this.error(e, this))
-			},
+						return
+					}
+
+					this.error(e, this)
+				})
 		},
-	}
+		totpSetQrCode() {
+			this.totpService.qrcode()
+				.then(qr => {
+					const urlCreator = window.URL || window.webkitURL
+					this.totpQR = urlCreator.createObjectURL(qr)
+				})
+		},
+		totpEnroll() {
+			this.totpService.enroll()
+				.then(r => {
+					this.totpEnrolled = true
+					this.$set(this, 'totp', r)
+					this.totpSetQrCode()
+				})
+				.catch(e => this.error(e, this))
+		},
+		totpConfirm() {
+			this.totpService.enable({passcode: this.totpConfirmPasscode})
+				.then(() => {
+					this.$set(this.totp, 'enabled', true)
+					this.success({message: 'You\'ve successfully confirmed your totp setup and can use it from now on!'}, this)
+				})
+				.catch(e => this.error(e, this))
+		},
+		totpDisable() {
+			this.totpService.disable({password: this.totpDisablePassword})
+				.then(() => {
+					this.totpEnrolled = false
+					this.$set(this, 'totp', new TotpModel())
+					this.success({message: 'Two factor authentication was sucessfully disabled.'}, this)
+				})
+				.catch(e => this.error(e, this))
+		},
+	},
+}
 </script>