Add moving tasks between lists

TOTP (#109 )
Fix not telling the user about invalid totp passcodes when logging in Add disabling totp authentication Add totp passcode when logging in Add totp settings Add general post method function Co-authored-by: kolaente <k@knt.li> Reviewed-on: vikunja/frontend#109
2020-04-18 14:39:56 +02:00 · 2020-04-17 23:46:07 +00:00 · 2020-04-17 20:46:50 +00:00 · 2020-04-17 21:30:56 +02:00 · 2020-04-17 12:19:53 +02:00 · 2020-04-14 23:37:08 +02:00
176 changed files with 14987 additions and 5509 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -3,19 +3,20 @@ name: testing

 trigger:
  branch:
-    exclude:
+    include:
      - master
  event:
-    - push
+    include:
+      - push
+      - pull_request

 steps:
  - name: build
-    image: node:11-alpine
+    image: kolaente/yarn
    pull: true
    group: build-static
    commands:
-      - apk add yarn
-      - yarn
+      - yarn --frozen-lockfile
      - yarn run lint
      - yarn run build

@ -31,12 +32,11 @@ trigger:

 steps:
  - name: build
-    image: node:11-alpine
+    image: kolaente/yarn
    pull: true
    group: build-static
    commands:
-      - apk add yarn
-      - yarn
+      - yarn --frozen-lockfile
      - yarn run lint
      - "echo '{\"VIKUNJA_API_BASE_URL\": \"/api/v1/\"}' > /drone/src/public/config.json" # Override config
      - yarn run build
@ -54,7 +54,7 @@ steps:
    image: plugins/s3:1
    pull: true
    settings:
-      bucket: vikunja-frontend
+      bucket: vikunja
      access_key:
        from_secret: aws_access_key_id
      secret_key:
@ -62,6 +62,7 @@ steps:
      endpoint: https://storage.kolaente.de
      path_style: true
      source: vikunja-frontend-master.zip
+      target: /frontend/
    depends_on: [ static ]

  # Build the docker image and push it to docker hub
@ -77,6 +78,25 @@ steps:
      auto_tag: true
    depends_on: [ static ]

+  - name: telegram
+    image: appleboy/drone-telegram
+    depends_on:
+      - release
+      - docker
+    settings:
+      token:
+        from_secret: TELEGRAM_TOKEN
+      to:
+        from_secret: TELEGRAM_TO
+      message: >
+        {{repo.owner}}/{{repo.name}}: \[{{build.status}}] Build {{build.number}}
+        {{commit.author}} pushed to {{commit.branch}} {{commit.sha}}: `{{commit.message}}`
+        Build started at {{datetime build.started "2006-Jan-02T15:04:05Z" "GMT+2"}} finished at {{datetime build.finished "2006-Jan-02T15:04:05Z" "GMT+2"}}.
+    when:
+      status:
+        - success
+        - failure
+
 ---
 kind: pipeline
 name: release-version
@ -87,12 +107,11 @@ trigger:

 steps:
  - name: build
-    image: node:11-alpine
+    image: kolaente/yarn
    pull: true
    group: build-static
    commands:
-      - apk add yarn
-      - yarn
+      - yarn --frozen-lockfile
      - yarn run lint
      - "echo '{\"VIKUNJA_API_BASE_URL\": \"/api/v1/\"}' > /drone/src/public/config.json" # Override config
      - yarn run build
@ -110,7 +129,7 @@ steps:
    image: plugins/s3:1
    pull: true
    settings:
-      bucket: vikunja-frontend
+      bucket: vikunja
      access_key:
        from_secret: aws_access_key_id
      secret_key:
@ -118,6 +137,7 @@ steps:
      endpoint: https://storage.kolaente.de
      path_style: true
      source: vikunja-frontend-${DRONE_TAG##v}.zip
+      target: /frontend/
    depends_on: [ static ]

  # Build the docker image and push it to docker hub
@ -132,3 +152,23 @@ steps:
      repo: vikunja/frontend
      auto_tag: true
    depends_on: [ static ]
+
+  - name: telegram
+    image: appleboy/drone-telegram
+    depends_on:
+      - release
+      - docker
+    settings:
+      token:
+        from_secret: TELEGRAM_TOKEN
+      to:
+        from_secret: TELEGRAM_TO
+      message: >
+        {{repo.owner}}/{{repo.name}}: \[{{build.status}}] Build {{build.number}}
+        {{commit.author}} pushed to {{commit.branch}} {{commit.sha}}: `{{commit.message}}`
+        Build started at {{datetime build.started "2006-Jan-02T15:04:05Z" "GMT+2"}} finished at {{datetime build.finished "2006-Jan-02T15:04:05Z" "GMT+2"}}.
+    when:
+      status:
+        - success
+        - failure
+
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,240 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+All releases can be found on https://code.vikunja.io/frontend/releases.
+
+The releases aim at the api versions which is why there are missing versions.
+
+## [0.12] - 2020-04-04
+
+#### Added
+
+* Table View for tasks (#76)
+* 404 page
+* Add creating new related tasks
+* Add getting the user avatar from the api (#68)
+* Add support for archiving lists and namespaces (#73)
+* Add task search term to query param to enable navigation
+* Add undo button to notification when marking a task as done
+* Add user to attachments list
+* Colors for lists and namespaces (#74)
+* Enable marking tasks as done from the task overview
+* Ensure labels of a task get updated when updating them
+* Input length validation for new tasks, lists and namespaces (#70)
+* Pre/Suffix formatted dates with relative pronouns like "in [one day]" or "[two days] ago"
+
+#### Fixed
+
+* Fix avatar sizes
+* Fix changing task dates (due/start/end/reminders)
+* Fix comments not being loaded again when switching between tasks
+* Fix error notification still being shown on password reset pages despite no error
+* Fix gantt chart (#79)
+* Fix icon overflowing in navigation
+* Fix namespace model name showing wrong placeholder until the namespace was loaded
+* Fix new related task not being visible in the search field
+* Fix not highlighting the current list in menu when paginating
+* Fix updating a task with repeat after interval from list view (Fixes #75)
+* Use deep imports for importing lodash to make tree shaking easier
+* Revert "Use deep imports for importing lodash to make tree shaking easier"
+* Work around browsers preventing Vue bindings from working with autofill (Fixes #78)
+
+#### Changed
+
+* Schedule token renew every minute
+* Swap moment.js with date-fns
+* Change release bucket
+
+## [0.11] - 2020-03-01
+
+### Added
+
+* Add a button to the task detail page to mark a task as done
+* Add a link to vikunja.io (#56)
+* Add automatic user token renew (#43)
+* Add auto save for task edit sidebar
+* Add moment.js for date related things (#50)
+* Add removing of tasks (#48)
+* Add saving task title with ctrl+enter
+* Add saving the description with ctrl+enter
+* Add slight background change when hovering over a task in the list
+* Add Wunderlist migration (#46)
+* Task Comments (#66)
+* Task Pagination (#38)
+* Task Search (#52)
+* Task sorting (#39)
+* Notifications for task reminders (#57)
+* PWA update available notification (#42)
+* Set the end date to the same as the due date if a start date was set but no end date
+* Show parent tasks in task overview list (#41)
+
+### Fixed
+
+* Fix textarea in task detail view not having a background when focused (#937 in Vikunja)
+* Fix "Add a reminder" being shown
+* Fix adding a task to an empty list
+* Fix a typo (#64)
+* Fix changelog version
+* Fix changing the right of a list shared with a user
+* Fix date handling on task detail page
+* Fix drone testing pipeline triggering only when pushing to master and not on prs
+* Fix email field type (#58)
+* Fix error container at registration page always being displayed
+* Fix gravatar url
+* Fix height of task add button
+* Fix initial dates on task edit sidebar
+* Fix label input field breaking in a new line on task detail page
+* Fix loading tasks for the first page after navigating to a new list
+* Fix not using router links for previous and back buttons
+* Fix priority label styling
+* Fix reminders not being shown on task detail view on mobile
+* Fix task text breaking on list home on mobile
+* Fix task title on mobile (#54)
+* Fix update notification layout on mobile (#44)
+* Fix using the error data prop in components (#53)
+* Don't schedule a reminder if the reminder date is in the past
+* Don't try to cancel notifications if the browser does not support it
+* Only focus inputs if the viewport is large enough (#55)
+* Set user menu inactive when logging out
+* Show if a related task is done (#49)
+
+### Changed
+
+* Always schedule notification
+* Hide the llama from the top on the task detail page
+* Improve link share layout
+* Load Fonts directly
+* Make sure to use date objects everywhere where dealing with dates
+* Migration Improvements (#47)
+* Move "Next Week" section in menu below "Next Month"
+* Move the Vikunja logo to the hamburger menu on mobile
+* Preload fonts css
+* Rearrange button order on task detail view
+* Reorganize Styles (#45)
+* Show motd everywhere
+* Sort tasks on start page by due date desc and id desc
+* Update dependencies (#40)
+* Use message mixin for handling success and error messages (#51)
+* Use the same method everywhere to calculate the avatar url
+* Better default profile image
+* Better wording for shared settings
+* Bump npm to 6.13
+* Put the add reminders button on the task detail page higher up
+* Directly link to the task for tasks on the start page
+* Disable production source maps
+
+## [0.9] - 2019-11-24
+
+### Added
+
+* Add minimal PWA (#34)
+* Added caching to the docker image
+* Added changing %Done on a task
+* Added global api config (#31)
+* Added handling if the user is offline (#35)
+* Added labels for login and register inputs
+* Added link sharing (#30)
+* Added meta description tag
+* Added support for HTTP/2 to the docker image
+* Added the function to collapse all lists in a namespace in the sidebar menu
+
+### Changed
+
+* Correctly preload fonts
+* Different edit icon
+* Improved font handling
+* Load the offline image quietly in the background
+* Moved non-theme stuff in general.scss
+* Removed rancher configuration
+* Removed unused preload fonts tags
+* Replace all spaces with tabs
+* Show avatars of assigned users
+* Sort tasks by done/undone first and then newest
+* Task Detail View (#37)
+* Update vue/cli-service
+* Updated axios
+* Updated dependencies
+* Updated packages
+* Updated packages to their latest versiosn
+* Use the new listuser endpoint to search for users
+
+### Fixed
+
+* Fix edit label pane not closing when clicking on it
+* Fixed gzip compression in docker
+* Fixed label edit still opening when deleting a label
+* Fixed menu not being visible on mobile
+* Fixed namespace loading (#32)
+* Fixed new task field not being reset after adding a new task
+* Fixed redirect to login page (#33)
+* Fixed scroll behaviour
+* Fixed shared lists overflowing
+* Fixed sharing with a user not working
+* Fixed task update not working
+* Fixed task update not working (again)
+* Fixed team creating not working
+* Handle task relations the right way (#36)
+
+### Misc
+
+* Moved markdown-based todo list to Vikunja [skip ci]
+* Use yarn image instead of installing it every time
+
+## [0.7] - 2019-04-30
+
+### Added
+
+* Design overhaul (#28)
+* Gantt charts (#29)
+* Pretty Scrollbars
+* Task colors
+
+### Fixed
+
+* Fixed getting tasks (#27)
+
+## [0.6] - 2019-03-08
+
+### Added
+
+* Labels (#25)
+* Task priorites (#19)
+* Task assingees (#21)
+
+### Changed
+
+* All requests are now using models and services, improving the development experience
+* Team managing (#18)
+
+## [0.5] - 2018-12-29
+
+### Added
+
+* User email verification when registering
+* password reset
+* Task overview
+* Multiple reminders
+* Repeating tasks
+* Subtasks
+* Task duration
+* All new design
+* Week and month view for tasks
+
+### Changed
+
+* Go to overview when clicking on the logo
+* CSS improvements
+* Don't show options to edit pseudonamespace
+* Delay loading animation to not show it when the request finishes in < 100ms
+* Use email instead of username when resetting a password
+
+### Fixed
+* Fixed trying to verify an email when there was none
+* Fixed loading tasks when the user was not authenticated
+
+## [0.1] - 2018-09-20
+
--- a/README.md
+++ b/README.md
@ -4,10 +4,12 @@

 [![Build Status](https://drone.kolaente.de/api/badges/vikunja/frontend/status.svg)](https://drone.kolaente.de/vikunja/frontend)
 [![License: LGPL v3](https://img.shields.io/badge/License-LGPL%20v3-blue.svg)](LICENSE)
-[![Download](https://img.shields.io/badge/download-v0.8-brightgreen.svg)](https://storage.kolaente.de/minio/vikunja/)
+[![Download](https://img.shields.io/badge/download-v0.12-brightgreen.svg)](https://dl.vikunja.io)

 This is the web frontend for Vikunja, written in Vue.js.

+Take a look at [our roadmap](https://my.vikunja.cloud/share/UrdhKPqumxDXUbYpEGJLSIyNTwAnbBzVlwdDpRbv/auth) (hosted on Vikunja!) for a list of things we're currently working on!
+
 ## Docker

 There is a [docker image available](https://hub.docker.com/r/vikunja/api) with support for http/2 and aggressive caching enabled.
--- a/nginx.conf
+++ b/nginx.conf
@ -34,7 +34,7 @@ http {
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
-    gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml font/woff2 text/html image/x-icon;
+    gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml font/woff2 image/x-icon;

    # Expires map
    map $sent_http_content_type $expires {
@ -43,6 +43,7 @@ http {
        text/css                   max;
        application/javascript     max;
        ~image/                    max;
+        ~font/                     max;
    }

    server {
--- a/package.json
+++ b/package.json
@ -1,7 +1,6 @@
 {
  "name": "vikunja-frontend",
-  "version": "0.8.0",
-  "license": "LGPL-3.0-or-later",
+  "version": "0.10.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
@ -9,33 +8,41 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
-    "bulma": "^0.7.1",
-    "copy-to-clipboard": "^3.2.0",
-    "lodash": "^4.17.11",
-    "v-tooltip": "^2.0.0-rc.33",
-    "verte": "^0.0.12",
-    "vue": "^2.5.17",
-    "vue-drag-resize": "^1.3.2"
+    "bulma": "0.8.2",
+    "camel-case": "4.1.1",
+    "copy-to-clipboard": "3.3.1",
+    "date-fns": "2.12.0",
+    "lodash": "4.17.15",
+    "register-service-worker": "1.7.1",
+    "snake-case": "3.0.3",
+    "v-tooltip": "2.0.3",
+    "verte": "0.0.12",
+    "vue": "2.6.11",
+    "vue-drag-resize": "1.3.2",
+    "vue-easymde": "1.0.1"
  },
  "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1",
-    "@fortawesome/free-regular-svg-icons": "^5",
-    "@fortawesome/free-solid-svg-icons": "^5",
-    "@fortawesome/vue-fontawesome": "^0.1.1",
-    "@vue/cli-plugin-babel": "^3.0.1",
-    "@vue/cli-plugin-eslint": "^3.0.1",
-    "@vue/cli-service": "^3.9.2",
-    "axios": "^0.19.0",
-    "bulmaswatch": "^0.7.1",
-    "i": "^0.3.6",
-    "node-sass": "^4.9.3",
-    "npm": "^6.4.1",
-    "sass-loader": "^7.1.0",
-    "vue-flatpickr-component": "^8.1.2",
-    "vue-multiselect": "^2.1.0",
-    "vue-notification": "^1.3.13",
-    "vue-router": "^3.0.1",
-    "vue-template-compiler": "^2.5.17"
+    "@fortawesome/fontawesome-svg-core": "1.2.28",
+    "@fortawesome/free-regular-svg-icons": "5.13.0",
+    "@fortawesome/free-solid-svg-icons": "5.13.0",
+    "@fortawesome/vue-fontawesome": "0.1.9",
+    "@vue/cli": "4.3.1",
+    "@vue/cli-plugin-babel": "4.3.1",
+    "@vue/cli-plugin-eslint": "4.3.1",
+    "@vue/cli-plugin-pwa": "4.3.1",
+    "@vue/cli-service": "4.3.1",
+    "axios": "0.19.2",
+    "babel-eslint": "10.1.0",
+    "core-js": "3.6.5",
+    "eslint": "6.8.0",
+    "eslint-plugin-vue": "6.2.2",
+    "node-sass": "4.13.1",
+    "sass-loader": "8.0.2",
+    "vue-flatpickr-component": "8.1.5",
+    "vue-multiselect": "2.1.6",
+    "vue-notification": "1.3.20",
+    "vue-router": "3.1.6",
+    "vue-template-compiler": "2.6.11"
  },
  "eslintConfig": {
    "root": true,
@ -60,5 +67,6 @@
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
-  ]
+  ],
+  "license": "LGPL-3.0-or-later"
 }
--- a/public/fonts/fonts.css
+++ b/public/fonts/fonts.css
@ -3,6 +3,7 @@
 	font-family: 'Quicksand';
 	font-style: normal;
 	font-weight: 300;
+	font-display: swap;
 	src: url('quicksand-v7-latin-300.eot'); /* IE9 Compat Modes */
 	src: local('Quicksand Light'), local('Quicksand-Light'),
 	url('quicksand-v7-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
@ -17,6 +18,7 @@
 	font-family: 'Quicksand';
 	font-style: normal;
 	font-weight: 400;
+	font-display: swap;
 	src: url('quicksand-v7-latin-regular.eot'); /* IE9 Compat Modes */
 	src: local('Quicksand Regular'), local('Quicksand-Regular'),
 	url('quicksand-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
@ -31,6 +33,7 @@
 	font-family: 'Quicksand';
 	font-style: normal;
 	font-weight: 500;
+	font-display: swap;
 	src: url('quicksand-v7-latin-500.eot'); /* IE9 Compat Modes */
 	src: local('Quicksand Medium'), local('Quicksand-Medium'),
 	url('quicksand-v7-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
@ -45,6 +48,7 @@
 	font-family: 'Quicksand';
 	font-style: normal;
 	font-weight: 700;
+	font-display: swap;
 	src: url('quicksand-v7-latin-700.eot'); /* IE9 Compat Modes */
 	src: local('Quicksand Bold'), local('Quicksand-Bold'),
 	url('quicksand-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
@ -59,6 +63,7 @@
 	font-family: 'Open Sans';
 	font-style: normal;
 	font-weight: 400;
+	font-display: swap;
 	src: url('open-sans-v15-latin-regular.eot'); /* IE9 Compat Modes */
 	src: local('Open Sans Regular'), local('OpenSans-Regular'),
 	url('open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
@ -73,6 +78,7 @@
 	font-family: 'Open Sans';
 	font-style: italic;
 	font-weight: 400;
+	font-display: swap;
 	src: url('open-sans-v15-latin-italic.eot'); /* IE9 Compat Modes */
 	src: local('Open Sans Italic'), local('OpenSans-Italic'),
 	url('open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
@ -87,6 +93,7 @@
 	font-family: 'Open Sans';
 	font-style: normal;
 	font-weight: 700;
+	font-display: swap;
 	src: url('open-sans-v15-latin-700.eot'); /* IE9 Compat Modes */
 	src: local('Open Sans Bold'), local('OpenSans-Bold'),
 	url('open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
@ -101,6 +108,7 @@
 	font-family: 'Open Sans';
 	font-style: italic;
 	font-weight: 700;
+	font-display: swap;
 	src: url('open-sans-v15-latin-700italic.eot'); /* IE9 Compat Modes */
 	src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
 	url('open-sans-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
--- a/public/images/icons/android-chrome-192x192.png
+++ b/public/images/icons/android-chrome-192x192.png
--- a/public/images/icons/android-chrome-512x512.png
+++ b/public/images/icons/android-chrome-512x512.png
--- a/public/images/icons/apple-touch-icon-120x120.png
+++ b/public/images/icons/apple-touch-icon-120x120.png
--- a/public/images/icons/apple-touch-icon-152x152.png
+++ b/public/images/icons/apple-touch-icon-152x152.png
--- a/public/images/icons/apple-touch-icon-180x180.png
+++ b/public/images/icons/apple-touch-icon-180x180.png
--- a/public/images/icons/apple-touch-icon-60x60.png
+++ b/public/images/icons/apple-touch-icon-60x60.png
--- a/public/images/icons/apple-touch-icon-76x76.png
+++ b/public/images/icons/apple-touch-icon-76x76.png
--- a/public/images/icons/apple-touch-icon.png
+++ b/public/images/icons/apple-touch-icon.png
--- a/public/images/icons/badge-monochrome.png
+++ b/public/images/icons/badge-monochrome.png
--- a/public/images/icons/favicon-16x16.png
+++ b/public/images/icons/favicon-16x16.png
--- a/public/images/icons/favicon-32x32.png
+++ b/public/images/icons/favicon-32x32.png
--- a/public/images/icons/msapplication-icon-144x144.png
+++ b/public/images/icons/msapplication-icon-144x144.png
--- a/public/images/icons/mstile-150x150.png
+++ b/public/images/icons/mstile-150x150.png
--- a/public/images/icons/safari-pinned-tab.svg
+++ b/public/images/icons/safari-pinned-tab.svg
@ -0,0 +1,149 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
+fill="#000000" stroke="none">
+<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
+-96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
+173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
+13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
+20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
+-215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
+11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
+-455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
+-105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
+11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
+-113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
+36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
+-206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
+-15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
+-153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
+10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
+-30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
+221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
+-265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
+-22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
+-102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
+-50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
+-414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
+30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
+-455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
+-19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
+96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
+-313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
+-145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
+-156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
+-203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
+-341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
+30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
+342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
+22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
+-235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
+-62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
+-22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
+-311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
+-140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
+17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
+-10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
+-485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
+-193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
+72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
+35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
+-5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
+-661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
+0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
+-520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
+-120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
+-229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
+11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
+-9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
+12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
+145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
+-118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
+-108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
+-659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
+248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
+29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
+-142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
+-16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
+-245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
+109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
+-90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
+-67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
+-298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
+38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
+34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
+136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
+67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
+150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
+116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
+113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
+175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
+89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
+11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
+6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
+430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
+220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
+24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
+478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
+394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
+55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
+175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
+88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
+155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
+11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
+14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
+51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
+37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
+55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
+55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
+295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
+16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
+157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
+200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
+241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
+61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
+28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
+62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
+56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
+350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
+90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
+121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
+60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
+167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
+171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
+97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
+111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
+11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
+13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
+101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
+19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
+54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
+0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
+90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
+108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
+20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
+-419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
+-31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
+-71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
+-477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
+-320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
+-245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
+-160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
+-109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
+396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
+110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
+-188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
+-205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
+583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
+408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
+561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
+-9615 0 20 -32z"/>
+</g>
+</svg>
--- a/public/images/llama-nightscape.png
+++ b/public/images/llama-nightscape.png
--- a/public/images/llama-nightscape.svg
+++ b/public/images/llama-nightscape.svg
--- a/public/images/migration/wunderlist.png
+++ b/public/images/migration/wunderlist.png
--- a/public/index.html
+++ b/public/index.html
@ -1,11 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+	<title>Vikunja</title>
 	<meta charset="utf-8">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width,initial-scale=1.0">
+	<meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life.">
+
 	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
-	<title>Vikunja</title>
+	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/fonts.css" as="style">
+	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/open-sans-v15-latin-700italic.woff2" as="font">
+	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/open-sans-v15-latin-italic.woff2" as="font">
+	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/quicksand-v7-latin-300.woff2" as="font">
+	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/quicksand-v7-latin-500.woff2" as="font">
+	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/quicksand-v7-latin-700.woff2" as="font">
+	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/open-sans-v15-latin-regular.woff2" as="font">
+	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/open-sans-v15-latin-700.woff2" as="font">
+	<link rel="preload" crossorigin="anonymous" href="<%= BASE_URL %>fonts/quicksand-v7-latin-regular.woff2" as="font">
+	<link href="<%= BASE_URL %>fonts/fonts.css" rel="stylesheet">
 </head>
 <body>
 <noscript>
--- a/public/robots.txt
+++ b/public/robots.txt
@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
--- a/renovate.json
+++ b/renovate.json
@ -0,0 +1,16 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "labels": ["dependencies"],
+  "hostRules": [
+    {
+      "domainName": "github.com",
+      "encrypted": {
+        "token": "jaazUwAHa7jio3jq+UFvUeVR5/fOwt3BNAzEBlhixggSYqooJ7Paq7aJ77mNHYBEYwCWFuUG3+SlQ/uLeMU0AtGNdxk9VQ2mbcZIpSbIPR2YU4NoQ0HrhL0XyrN6eShqLBQYKz47o3gaHd3ltWhVeMCxGjfoAlPw+z0DhUQCfuFWUJu3lYYNIhY+CVeir6r0s0AablpxMJ1kpak6fCQ6BdaOW11rC/bQfW82fAp4Pkv877AolB+fVU7klMXfU6d2Ihk343jOEvltI5g1l5ss0vjiJnGZh4Sxump0ivoc73/P1TnywKTrvEdWs9df42IUAZozJwfqAIOUCtWbZifEXg=="
+      }
+    }
+  ],
+
+  "extends": [
+    "config:base"
+  ]
+}
--- a/src/App.vue
+++ b/src/App.vue
@ -1,169 +1,236 @@
 <template>
-	<div id="app">
-		<nav class="navbar main-theme is-fixed-top" role="navigation" aria-label="main navigation" v-if="user.authenticated && user.infos.type === authTypes.USER">
-			<div class="navbar-brand">
-				<router-link :to="{name: 'home'}" class="navbar-item logo">
-					<img src="/images/logo-full.svg" alt="Vikunja"/>
-				</router-link>
-			</div>
-			<div class="navbar-end">
-				<div class="user">
-					<img :src="gravatar()" class="avatar" alt=""/>
-					<div class="dropdown is-right is-active">
-						<div class="dropdown-trigger">
-							<button class="button noshadow" @click="userMenuActive = !userMenuActive">
-								<span class="username">{{user.infos.username}}</span>
-								<span class="icon is-small">
+	<div>
+		<div v-if="isOnline">
+			<!-- 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" role="navigation" aria-label="main navigation"
+				v-if="user.authenticated && (userInfo && userInfo.type === authTypes.USER)">
+				<div class="navbar-brand">
+					<router-link :to="{name: 'home'}" class="navbar-item logo">
+						<img src="/images/logo-full.svg" alt="Vikunja"/>
+					</router-link>
+				</div>
+				<div class="navbar-end">
+					<div v-if="updateAvailable" class="update-notification">
+						<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="user.infos.getAvatarUrl()" class="avatar" alt=""/>
+						<div class="dropdown is-right is-active">
+							<div class="dropdown-trigger">
+								<button class="button noshadow" @click="userMenuActive = !userMenuActive">
+									<span class="username">{{user.infos.username}}</span>
+									<span class="icon is-small">
 									<icon icon="chevron-down"/>
 								</span>
-							</button>
-						</div>
-						<transition name="fade">
-							<div class="dropdown-menu" v-if="userMenuActive">
-								<div class="dropdown-content">
-									<a @click="logout()" class="dropdown-item">
-										Logout
-									</a>
-								</div>
+								</button>
 							</div>
+							<transition name="fade">
+								<div class="dropdown-menu" v-if="userMenuActive">
+									<div class="dropdown-content">
+										<router-link :to="{name: 'userSettings'}" class="dropdown-item">
+											Settings
+										</router-link>
+										<a @click="logout()" class="dropdown-item">
+											Logout
+										</a>
+									</div>
+								</div>
+							</transition>
+						</div>
+					</div>
+				</div>
+			</nav>
+			<div v-if="user.authenticated && (userInfo && userInfo.type === authTypes.USER)">
+				<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive">
+					<icon icon="bars"></icon>
+				</a>
+				<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive">
+					<icon icon="times"></icon>
+				</a>
+				<div class="app-container">
+					<div class="namespace-container" :class="{'is-active': mobileMenuActive}">
+						<div class="menu top-menu">
+							<router-link :to="{name: 'home'}" class="logo">
+								<img src="/images/logo-full.svg" alt="Vikunja"/>
+							</router-link>
+							<ul class="menu-list">
+								<li>
+									<router-link :to="{ name: 'home'}">
+									<span class="icon">
+										<icon icon="calendar"/>
+									</span>
+										Overview
+									</router-link>
+								</li>
+								<li>
+									<router-link :to="{ name: 'showTasksInRange', params: {type: 'week'}}">
+									<span class="icon">
+										<icon icon="calendar-week"/>
+									</span>
+										Next Week
+									</router-link>
+								</li>
+								<li>
+									<router-link :to="{ name: 'showTasksInRange', params: {type: 'month'}}">
+									<span class="icon">
+										<icon :icon="['far', 'calendar-alt']"/>
+									</span>
+										Next Month
+									</router-link>
+								</li>
+								<li>
+									<router-link :to="{ name: 'listTeams'}">
+									<span class="icon">
+										<icon icon="users"/>
+									</span>
+										Teams
+									</router-link>
+								</li>
+								<li>
+									<router-link :to="{ name: 'newNamespace'}">
+									<span class="icon">
+										<icon icon="layer-group"/>
+									</span>
+										New Namespace
+									</router-link>
+								</li>
+								<li>
+									<router-link :to="{ name: 'listLabels'}">
+									<span class="icon">
+										<icon icon="tags"/>
+									</span>
+										Labels
+									</router-link>
+								</li>
+							</ul>
+						</div>
+						<aside class="menu namespaces-lists">
+							<fancycheckbox v-model="showArchived" @change="loadNamespaces()" class="show-archived-check">
+								Show Archived
+							</fancycheckbox>
+							<div class="spinner" :class="{ 'is-loading': namespaceService.loading}"></div>
+							<template v-for="n in namespaces">
+								<div :key="n.id">
+									<router-link v-tooltip.right="'Settings'"
+											:to="{name: 'editNamespace', params: {id: n.id} }" class="nsettings"
+											v-if="n.id > 0">
+										<span class="icon">
+											<icon icon="cog"/>
+										</span>
+									</router-link>
+									<router-link v-tooltip="'Add a new list in the ' + n.name + ' namespace'"
+											:to="{ name: 'newList', params: { id: n.id} }" class="nsettings"
+											:key="n.id + 'newList'" v-if="n.id > 0">
+										<span class="icon">
+											<icon icon="plus"/>
+										</span>
+									</router-link>
+									<label class="menu-label" v-tooltip="n.name + ' (' + n.lists.length + ')'" :for="n.id + 'checker'">
+										<span class="name">
+											<span class="color-bubble" v-if="n.hexColor !== ''" :style="{ backgroundColor: n.hexColor }"></span>
+											{{n.name}} ({{n.lists.length}})
+										</span>
+										<span class="is-archived" v-if="n.isArchived">
+											Archived
+										</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'">
+									<ul class="menu-list can-be-hidden" >
+										<li v-for="l in n.lists" :key="l.id">
+											<router-link :to="{ name: 'showList', params: { id: l.id} }">
+												<span class="name">
+													<span class="color-bubble" v-if="l.hexColor !== ''" :style="{ backgroundColor: l.hexColor }"></span>
+													{{l.title}}
+												</span>
+												<span class="is-archived" v-if="l.isArchived">
+													Archived
+												</span>
+											</router-link>
+										</li>
+									</ul>
+									<label class="hidden-hint" :for="n.id + 'checker'">
+										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>
+					</div>
+					<div class="app-content" :class="{'fullpage-overlay': fullpage}">
+						<a class="mobile-overlay" v-if="mobileMenuActive" @click="mobileMenuActive = false"></a>
+						<transition name="fade">
+							<router-view/>
 						</transition>
 					</div>
 				</div>
 			</div>
-		</nav>
-		<div v-if="user.authenticated && user.infos.type === authTypes.USER">
-			<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive"><icon icon="bars"></icon></a>
-			<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive"><icon icon="times"></icon></a>
-			<div class="app-container">
-				<div class="namespace-container" :class="{'is-active': mobileMenuActive}">
-					<div class="menu top-menu">
-						<ul class="menu-list">
-							<li>
-								<router-link :to="{ name: 'home'}">
-									<span class="icon">
-										<icon icon="calendar"/>
-									</span>
-									Overview
-								</router-link>
-							</li>
-							<li>
-								<router-link :to="{ name: 'showTasksInRange', params: {type: 'month'}}">
-									<span class="icon">
-										<icon :icon="['far', 'calendar-alt']"/>
-									</span>
-									Next Month
-								</router-link>
-							</li>
-							<li>
-								<router-link :to="{ name: 'showTasksInRange', params: {type: 'week'}}">
-									<span class="icon">
-										<icon icon="calendar-week"/>
-									</span>
-									Next Week
-								</router-link>
-							</li>
-							<li>
-								<router-link :to="{ name: 'listTeams'}">
-									<span class="icon">
-										<icon icon="users"/>
-									</span>
-									Teams
-								</router-link>
-							</li>
-							<li>
-								<router-link :to="{ name: 'newNamespace'}">
-									<span class="icon">
-										<icon icon="layer-group"/>
-									</span>
-									New Namespace
-								</router-link>
-							</li>
-							<li>
-								<router-link :to="{ name: 'listLabels'}">
-									<span class="icon">
-										<icon icon="tags"/>
-									</span>
-									Labels
-								</router-link>
-							</li>
-						</ul>
-					</div>
-					<aside class="menu namespaces-lists">
-						<div class="spinner" :class="{ 'is-loading': namespaceService.loading}"></div>
-						<template v-for="n in namespaces">
-							<div :key="n.id">
-								<router-link v-tooltip.right="'Settings'" :to="{name: 'editNamespace', params: {id: n.id} }" class="nsettings" v-if="n.id > 0">
-										<span class="icon">
-											<icon icon="cog"/>
-										</span>
-								</router-link>
-								<router-link v-tooltip="'Add a new list in the ' + n.name + ' namespace'" :to="{ name: 'newList', params: { id: n.id} }" class="nsettings" :key="n.id + 'newList'" v-if="n.id > 0">
-										<span class="icon">
-											<icon icon="plus"/>
-										</span>
-								</router-link>
-								<div class="menu-label">
-									{{n.name}}
-								</div>
-							</div>
-							<ul class="menu-list" :key="n.id + 'child'">
-								<li v-for="l in n.lists" :key="l.id">
-									<router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}</router-link>
-								</li>
-							</ul>
-						</template>
-					</aside>
-				</div>
-				<div class="app-content" :class="{'fullpage-overlay': fullpage}">
-					<a class="mobile-overlay" v-if="mobileMenuActive" @click="mobileMenuActive = false"></a>
-					<transition name="fade">
-						<router-view/>
-					</transition>
-				</div>
-			</div>
-		</div>
-		<!-- FIXME: This will only be triggered when the root component is already loaded before doing link share auth. Will "fix" itself once we use vuex. -->
-		<div v-else-if="user.authenticated && user.infos.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"/>
-					<div class="box has-text-left">
-						<div class="logout">
-							<a @click="logout()" class="button logout">
-								<span>Logout</span>
+			<!-- FIXME: This will only be triggered when the root component is already loaded before doing link share auth. Will "fix" itself once we use vuex. -->
+			<div v-else-if="user.authenticated && (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"/>
+						<div class="box has-text-left">
+							<div class="logout">
+								<a @click="logout()" class="button logout">
+									<span>Logout</span>
 									<span class="icon is-small">
 									<icon icon="sign-out-alt"/>
 								</span>
-							</a>
+								</a>
+							</div>
+							<router-view/>
 						</div>
-                        <router-view/>
 					</div>
 				</div>
 			</div>
-		</div>
-		<div v-else>
-			<div class="container has-text-centered">
-				<div class="column is-4 is-offset-4">
-					<img src="/images/logo-full.svg" alt="Vikunja"/>
+			<div v-else>
+				<div class="container">
+					<div class="column is-4 is-offset-4">
+						<img src="/images/logo-full.svg" alt="Vikunja"/>
+						<div class="message is-info" v-if="motd !== ''">
+							<div class="message-header">
+								<p>Info</p>
+							</div>
+							<div class="message-body">
+								{{ motd }}
+							</div>
+						</div>
 						<router-view/>
+					</div>
 				</div>
 			</div>
+			<notification/>
+		</div>
+		<div class="app offline" v-else>
+			<div class="offline-message">
+				<h1>You are offline.</h1>
+				<p>Please check your network connection and try again.</p>
+			</div>
 		</div>
-	<notifications position="bottom left" />
 	</div>
 </template>

 <script>
 	import auth from './auth'
-	import message from './message'
 	import router from './router'

 	import NamespaceService from './services/namespace'
 	import authTypes from './models/authTypes'

+	import swEvents from './ServiceWorker/events'
+	import Notification from './components/global/notification'
+	import Fancycheckbox from './components/global/fancycheckbox'
+
 	export default {
 		name: 'app',
-
+		components: {
+			Fancycheckbox,
+			Notification,
+		},
 		data() {
 			return {
 				user: auth.user,
@ -174,17 +241,30 @@
 				currentDate: new Date(),
 				userMenuActive: false,
 				authTypes: authTypes,
+				isOnline: true,
+				motd: '',
+				showArchived: false,
+
+				// Service Worker stuff
+				updateAvailable: false,
+				registration: null,
+				refreshing: false,
 			}
 		},
 		beforeMount() {
+			// Check if the user is offline, show a message then
+			this.isOnline = navigator.onLine
+			window.addEventListener('online',  () => this.isOnline = navigator.onLine);
+			window.addEventListener('offline', () => this.isOnline = navigator.onLine);
+
 			// Password reset
-			if(this.$route.query.userPasswordReset !== undefined) {
+			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: 'passwordReset'})
 			}
 			// Email verification
-			if(this.$route.query.userEmailConfirm !== undefined) {
+			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: 'login'})
@ -194,30 +274,51 @@
 			if (auth.user.authenticated && auth.user.infos.type === authTypes.USER && (this.$route.params.name === 'home' || this.namespaces.length === 0)) {
 				this.loadNamespaces()
 			}
+
+			// Service worker communication
+			document.addEventListener(swEvents.SW_UPDATED, this.showRefreshUI, { once: true })
+
+			navigator.serviceWorker.addEventListener(
+				'controllerchange', () => {
+					if (this.refreshing) return;
+					this.refreshing = true;
+					window.location.reload();
+				}
+			);
+
+			// Schedule a token renew every minute
+			setTimeout(() => {
+				auth.renewToken()
+			}, 1000 * 60)
+
+			// Set the motd
+			this.setMotd()
 		},
 		watch: {
 			// call the method again if the route changes
 			'$route': 'doStuffAfterRoute'
 		},
+		computed: {
+			userInfo() {
+				return auth.getUserInfos()
+			}
+		},
 		methods: {
 			logout() {
 				auth.logout()
 			},
-			gravatar() {
-				return 'https://www.gravatar.com/avatar/' + this.user.infos.avatar + '?s=50'
-			},
 			loadNamespaces() {
 				this.namespaceService = new NamespaceService()
-				this.namespaceService.getAll()
+				this.namespaceService.getAll({}, {isArchived: this.showArchived})
 					.then(r => {
 						this.$set(this, 'namespaces', r)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
-			loadNamespacesIfNeeded(e){
-				if (auth.user.authenticated && auth.user.infos.type === authTypes.USER && (e.name === 'home' || this.namespaces.length === 0)) {
+			loadNamespacesIfNeeded(e) {
+				if (auth.user.authenticated && (this.userInfo && this.userInfo.type === authTypes.USER) && (e.name === 'home' || this.namespaces.length === 0)) {
 					this.loadNamespaces()
 				}
 			},
@ -225,10 +326,34 @@
 				this.fullpage = false;
 				this.loadNamespacesIfNeeded(e)
 				this.mobileMenuActive = false
+				this.userMenuActive = false
 			},
 			setFullPage() {
 				this.fullpage = true;
 			},
+			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');
+			},
+			setMotd() {
+				let cancel = () => {};
+				// Since the config may not be initialized when we're calling this, we need to retry until it is ready.
+				if (typeof this.$config === 'undefined') {
+					cancel = setTimeout(() => {
+						this.setMotd()
+					}, 150)
+				} else {
+					cancel()
+					this.motd = this.$config.motd
+				}
+			},
 		},
 	}
 </script>
--- a/src/ServiceWorker/events.json
+++ b/src/ServiceWorker/events.json
@ -0,0 +1,3 @@
+{
+  "SW_UPDATED": "swUpdated"
+}
--- a/src/ServiceWorker/sw.js
+++ b/src/ServiceWorker/sw.js
@ -0,0 +1,118 @@
+/* eslint-disable no-console */
+/* eslint-disable no-undef */
+
+// 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()
+);
+
+// Always send api reqeusts through the network
+workbox.routing.registerRoute(
+	new RegExp('(\\/)?api\\/v1\\/.*$'),
+	new workbox.strategies.NetworkOnly()
+);
+
+// Cache everything else
+workbox.routing.registerRoute(
+	new RegExp('.*'),
+    new workbox.strategies.StaleWhileRevalidate()
+);
+
+// This code listens for the user's confirmation to update the app.
+self.addEventListener('message', (e) => {
+	if (!e.data) {
+		return;
+	}
+
+	switch (e.data) {
+		case 'skipWaiting':
+			self.skipWaiting();
+			break;
+		default:
+			// NOOP
+			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];
+
+	// if there is no page in scope, we can't get any token
+	// and we indicate it with null value
+	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();
+
+	client.postMessage({
+		'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);
+			}
+
+			resolve(event.data.authToken);
+		}
+	});
+}
+
+// Notification action
+self.addEventListener('notificationclick', function(event) {
+	const taskId = event.notification.data.taskId
+	event.notification.close()
+
+	switch (event.action) {
+		case 'mark-as-done':
+			// FIXME: Ugly as hell, but no other way of doing this, since we can't use modules
+			// in service workersfor now.
+			fetch('/config.json')
+				.then(r => r.json())
+				.then(config => {
+
+					getBearerToken()
+						.then(token => {
+							fetch(`${config.VIKUNJA_API_BASE_URL}tasks/${taskId}`, {
+								method: 'post',
+								headers: {
+									'Accept': 'application/json',
+									'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)
+							})
+						})
+				})
+			break
+		case 'show-task':
+			clients.openWindow(`/tasks/${taskId}`)
+			break
+	}
+})
+
+workbox.core.clientsClaim();
+// The precaching code provided by Workbox.
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
--- a/src/auth/index.js
+++ b/src/auth/index.js
@ -1,5 +1,6 @@
 import {HTTP} from '../http-common'
 import router from '../router'
+import UserModel from '../models/user'
 // const API_URL = 'http://localhost:8082/api/v1/'
 // const LOGIN_URL = 'http://localhost:8082/login'

@ -10,13 +11,19 @@ export default {
 		infos: {},
 	},

-	login(context, creds, redirect) {
+	login(context, credentials, redirect = '') {
 		localStorage.removeItem('token') // Delete an eventually preexisting old token

-		HTTP.post('login', {
-			username: creds.username,
-			password: creds.password
-		})
+		const data =  {
+			username: credentials.username,
+			password: credentials.password
+		}
+
+		if(credentials.totpPasscode) {
+			data.totp_passcode = credentials.totpPasscode
+		}
+
+		HTTP.post('login', data)
 			.then(response => {
 				// Save the token to local storage for later use
 				localStorage.setItem('token', response.data.token)
@ -24,28 +31,28 @@ export default {
 				// Tell others the user is autheticated
 				this.user.authenticated = true
 				this.user.isLinkShareAuth = false
-				const inf = this.getUserInfos()
-				// eslint-disable-next-line
-				console.log(inf)
-
-				// Hide the loader
-				context.loading = false

 				// Redirect if nessecary
-				if (redirect) {
+				if (redirect !== '') {
 					router.push({name: redirect})
 				}
 			})
 			.catch(e => {
-				// Hide the loader
-				context.loading = false
 				if (e.response) {
-					context.error = e.response.data.message
+					if (e.response.data.code === 1017 && !credentials.totpPasscode) {
+						context.needsTotpPasscode = true
+						return
+					}
+
+					context.errorMsg = e.response.data.message
 					if (e.response.status === 401) {
-						context.error = 'Wrong username or password.'
+						context.errorMsg = 'Wrong username or password.'
 					}
 				}
 			})
+			.finally(() => {
+				context.loading = false
+			})
 	},

 	register(context, creds, redirect) {
@ -61,9 +68,9 @@ export default {
 				// Hide the loader
 				context.loading = false
 				if (e.response) {
-					context.error = e.response.data.message
+					context.errorMsg = e.response.data.message
 					if (e.response.status === 401) {
-						context.error = 'Wrong username or password.'
+						context.errorMsg = 'Wrong username or password.'
 					}
 				}
 			})
@ -76,24 +83,38 @@ export default {
 	},

 	linkShareAuth(hash) {
-		return HTTP.post('/shares/'+hash+'/auth')
+		return HTTP.post('/shares/' + hash + '/auth')
 			.then(r => {
 				localStorage.setItem('token', r.data.token)
 				this.getUserInfos()
 				return Promise.resolve(r.data)
-			}).catch(e =>  {
+			}).catch(e => {
 				return Promise.reject(e)
 			})
 	},

+	renewToken() {
+		HTTP.post('user/token', null, {
+			headers: {
+				Authorization: 'Bearer ' + localStorage.getItem('token'),
+			}
+		})
+			.then(r => {
+				localStorage.setItem('token', r.data.token)
+			})
+			.catch(e => {
+				// eslint-disable-next-line
+				console.log('Error renewing token: ', e)
+			})
+	},
+
 	checkAuth() {
 		let jwt = localStorage.getItem('token')
 		this.getUserInfos()
 		this.user.authenticated = false
 		if (jwt) {
-			let infos = this.user.infos
 			let ts = Math.round((new Date()).getTime() / 1000)
-			if (infos.exp >= ts) {
+			if (this.user.infos.exp >= ts) {
 				this.user.authenticated = true
 			}
 		}
@ -102,8 +123,8 @@ export default {
 	getUserInfos() {
 		let jwt = localStorage.getItem('token')
 		if (jwt) {
-			this.user.infos = this.parseJwt(localStorage.getItem('token'))
-			return this.parseJwt(localStorage.getItem('token'))
+			this.user.infos = new UserModel(this.parseJwt(localStorage.getItem('token')))
+			return this.user.infos
 		} else {
 			return {}
 		}
--- a/src/components/404.vue
+++ b/src/components/404.vue
@ -0,0 +1,12 @@
+<template>
+	<div class="content has-text-centered">
+		<h1>Not found</h1>
+		<p>The page you requested does not exist.</p>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: '404'
+	}
+</script>
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@ -2,6 +2,7 @@
 	<div class="content has-text-centered">
 		<h2>Hi {{user.infos.username}}!</h2>
 		<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: 'migrateStart'}">Import your data into Vikunja</router-link>
 		<TaskOverview :show-all="true"/>
 	</div>
 </template>
--- a/src/components/global/easymde.vue
+++ b/src/components/global/easymde.vue
@ -0,0 +1,96 @@
+<template>
+    <!-- TODO: Fix the icons -->
+    <vue-easymde v-model="text" :configs="config" @change="bubble"/>
+</template>
+
+<script>
+    import VueEasymde from 'vue-easymde'
+
+    export default {
+        name: 'easymde',
+        components: {
+            VueEasymde
+        },
+        props: {
+            value: {
+                type: String,
+                default: '',
+            },
+        },
+        data() {
+            return {
+                text: '',
+                config: {
+                    autoDownloadFontAwesome: false,
+                    spellChecker: false,
+                    placeholder: 'Click here to enter a description...',
+                    toolbar: [
+                        'heading-1',
+                        'heading-2',
+                        'heading-3',
+                        'heading-smaller',
+                        'heading-bigger',
+                        '|',
+                        'bold',
+                        'italic',
+                        'strikethrough',
+                        'code',
+                        'quote',
+                        'unordered-list',
+                        'ordered-list',
+                        '|',
+                        'clean-block',
+                        'link',
+                        'image',
+                        'table',
+                        'horizontal-rule',
+                        '|',
+                        'preview',
+                        'side-by-side',
+                        'fullscreen',
+                        'guide',
+//                        {
+//                            name: 'bold',
+//                            title: 'Bold',
+//                            iconElement: '<span>test</span>' // This relies on an extra thing added in node_modules/easymde/src/js/easymde.js:145
+//                        },
+                    ]
+                },
+            }
+        },
+        watch: {
+            value(newVal) {
+                this.text = newVal
+            },
+            text() {
+                this.bubble()
+            }
+        },
+        methods: {
+            bubble() {
+                this.$emit('input', this.text)
+                this.$emit('change')
+            }
+        },
+    }
+</script>
+
+<style lang="scss">
+    @import '~easymde/dist/easymde.min.css';
+
+    .CodeMirror {
+        padding: 0;
+    }
+
+    .CodeMirror-scroll {
+        padding: .5em;
+    }
+
+    .editor-toolbar {
+        background: #ffffff;
+    }
+
+    pre.CodeMirror-line{
+        margin-bottom: 0 !important;
+    }
+</style>
--- a/src/components/global/fancycheckbox.vue
+++ b/src/components/global/fancycheckbox.vue
@ -0,0 +1,58 @@
+<template>
+	<div class="fancycheckbox" :class="{'is-disabled': disabled}">
+		<input @change="updateData" type="checkbox" :id="checkBoxId" :checked="checked" style="display: none;" :disabled="disabled">
+		<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>
+				<polyline points="1 9 7 14 15 4"></polyline>
+			</svg>
+			<span>
+				<slot></slot>
+			</span>
+		</label>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'fancycheckbox',
+		data() {
+			return {
+				checked: false,
+				checkBoxId: '',
+			}
+		},
+		props: {
+			value: {
+				required: true,
+			},
+			disabled: {
+				type: Boolean,
+				required: false,
+				default: false,
+			},
+		},
+		watch: {
+			value(newVal) {
+				this.checked = newVal
+			},
+		},
+		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)
+			},
+		},
+	}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/components/global/notification.vue
+++ b/src/components/global/notification.vue
@ -0,0 +1,44 @@
+<template>
+	<notifications position="bottom left">
+		<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"
+				>
+				</div>
+				<div
+						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">
+					<button
+							class="button noshadow is-small"
+							@click="action.callback"
+							v-for="(action, i) in props.item.data.actions" :key="'action_'+i">
+						{{ action.title }}
+					</button>
+				</div>
+			</div>
+		</template>
+	</notifications>
+</template>
+
+<script>
+	export default {
+		name: 'notification',
+		methods: {
+			close(props) {
+				props.close()
+			},
+		},
+	}
+</script>
+
+<style scoped>
+	.buttons {
+		margin-top: .5em;
+	}
+</style>
--- a/src/components/global/user.vue
+++ b/src/components/global/user.vue
@ -0,0 +1,51 @@
+<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>
+</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: {
+				type: Boolean,
+				default: false,
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.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;
+		}
+	}
+</style>
--- a/src/components/labels/ListLabels.vue
+++ b/src/components/labels/ListLabels.vue
@ -3,26 +3,29 @@
 		<h1>Manage labels</h1>
 		<p>
 			Click on a label to edit it.
-			You can edit all labels you created, you can use all lables which are associated with a task to whose list you have access.
+			You can edit all labels you created, you can use all labels which are associated with a task to whose list you have access.
 		</p>
 		<div class="columns">
 			<div class="labels-list column">
-				<a
+				<span
 					v-for="l in labels" :key="l.id"
 					class="tag"
-					:class="{'disabled': user.infos.id !== l.created_by.id}"
-					@click="editLabel(l)"
-					:style="{'background': l.hex_color, 'color': l.textColor}"
+					:class="{'disabled': user.infos.id !== l.createdBy.id}"
+					:style="{'background': l.hexColor, 'color': l.textColor}"
 				>
 					<span
-						v-if="user.infos.id !== l.created_by.id"
+						v-if="user.infos.id !== l.createdBy.id"
 						v-tooltip.bottom="'You are not allowed to edit this label because you dont own it.'">
 						{{ l.title }}
 					</span>
-					<span v-else>{{ l.title }}</span>
-					<a class="delete is-small" @click="deleteLabel(l)" v-if="user.infos.id === l.created_by.id"></a>
-
-				</a>
+					<a
+						@click="editLabel(l)"
+						:style="{'color': l.textColor}"
+						v-else>
+						{{ l.title }}
+					</a>
+					<a class="delete is-small" @click="deleteLabel(l)" v-if="user.infos.id === l.createdBy.id"></a>
+				</span>
 			</div>
 			<div class="column is-4" v-if="isLabelEdit">
 				<div class="card">
@ -30,9 +33,9 @@
 						<span class="card-header-title">
 							Edit Label
 						</span>
-						<a class="card-header-icon" @click="isTaskEdit = false">
+						<a class="card-header-icon" @click="isLabelEdit = false">
 							<span class="icon">
-								<icon icon="angle-right"/>
+								<icon icon="times"/>
 							</span>
 						</a>
 					</header>
@ -54,7 +57,7 @@
 								<label class="label">Color</label>
 								<div class="control">
 									<verte
-											v-model="labelEditLabel.hex_color"
+											v-model="labelEditLabel.hexColor"
 											menuPosition="top"
 											picker="square"
 											model="hex"
@ -91,7 +94,6 @@

 	import LabelService from '../../services/label'
 	import LabelModel from '../../models/label'
-	import message from '../../message'
 	import auth from '../../auth'

 	export default {
@ -120,7 +122,7 @@
 						this.$set(this, 'labels', r)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteLabel(label) {
@ -132,10 +134,10 @@
 								this.labels.splice(l, 1)
 							}
 						}
-						message.success({message: 'The label was successfully deleted.'}, this)
+						this.success({message: 'The label was successfully deleted.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			editLabelSubmit() {
@ -146,14 +148,14 @@
 								this.$set(this.labels, l, r)
 							}
 						}
-						message.success({message: 'The label was successfully updated.'}, this)
+						this.success({message: 'The label was successfully updated.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			editLabel(label) {
-				if(label.created_by.id !== this.user.infos.id) {
+				if(label.createdBy.id !== this.user.infos.id) {
 					return
 				}
 				this.labelEditLabel = label
@ -161,4 +163,4 @@
 			}
 		}
 	}
-</script>
+</script>
--- a/src/components/lists/EditList.vue
+++ b/src/components/lists/EditList.vue
@ -1,5 +1,9 @@
 <template>
 	<div class="loader-container" :class="{ 'is-loading': listService.loading}">
+		<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.
+		</div>
 		<div class="card">
 			<header class="card-header">
 				<p class="card-header-title">
@ -21,6 +25,26 @@
 								<textarea :class="{ 'disabled': listService.loading}" :disabled="listService.loading" class="textarea" placeholder="The lists description goes here..." id="listdescription" v-model="list.description"></textarea>
 							</div>
 						</div>
+						<div class="field">
+							<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.'">
+									This list is archived
+								</fancycheckbox>
+							</div>
+						</div>
+						<div class="field">
+							<label class="label">Color</label>
+							<div class="control">
+								<verte
+										v-model="list.hexColor"
+										menuPosition="top"
+										picker="square"
+										model="hex"
+										:enableAlpha="false"
+										:rgbSliders="true"/>
+							</div>
+						</div>
 					</form>

 					<div class="columns bigbuttons">
@ -44,7 +68,7 @@
 		<component :is="manageUsersComponent" :id="list.id" type="list" shareType="user" :userIsAdmin="userIsAdmin"></component>
 		<component :is="manageTeamsComponent" :id="list.id" type="list" shareType="team" :userIsAdmin="userIsAdmin"></component>

-		<link-sharing :list-i-d="$route.params.id"/>
+		<link-sharing :list-id="$route.params.id"/>

 		<modal
 				v-if="showDeleteModal"
@ -58,14 +82,17 @@
 </template>

 <script>
+	import verte from 'verte'
+	import 'verte/dist/verte.css'
+
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import manageSharing from '../sharing/userTeam'
-	import LinkSharing from '../sharing/linkSharing';
+	import LinkSharing from '../sharing/linkSharing'

 	import ListModel from '../../models/list'
 	import ListService from '../../services/list'
+	import Fancycheckbox from '../global/fancycheckbox'

 	export default {
 		name: "EditList",
@ -83,8 +110,10 @@
 			}
 		},
 		components: {
+			Fancycheckbox,
 			LinkSharing,
 			manageSharing,
+			verte,
 		},
 		beforeMount() {
 			// Check if the user is already logged in, if so, redirect him to the homepage
@ -114,7 +143,7 @@
 						this.manageUsersComponent = 'manageSharing'
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			submit() {
@ -129,20 +158,20 @@
 								}
 							}
 						}
-						message.success({message: 'The list was successfully updated.'}, this)
+						this.success({message: 'The list was successfully updated.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteList() {
 				this.listService.delete(this.list)
 					.then(() => {
-						message.success({message: 'The list was successfully deleted.'}, this)
+						this.success({message: 'The list was successfully deleted.'}, this)
 						router.push({name: 'home'})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 		}
--- a/src/components/lists/NewList.vue
+++ b/src/components/lists/NewList.vue
@ -5,28 +5,35 @@
 			</icon>
 		</a>
 		<h3>Create a new list</h3>
-		<form @submit.prevent="newList" @keyup.esc="back()">
-			<div class="field is-grouped">
-				<p class="control is-expanded" :class="{ 'is-loading': listService.loading}">
-					<input v-focus class="input" :class="{ 'disabled': listService.loading}" v-model="list.title" type="text" placeholder="The list's name goes here...">
-				</p>
-				<p class="control">
-					<button type="submit" class="button is-success noshadow">
+		<div class="field is-grouped">
+			<p class="control is-expanded" :class="{ 'is-loading': listService.loading}">
+				<input v-focus
+					class="input"
+					:class="{ 'disabled': listService.loading}"
+					v-model="list.title"
+					type="text"
+					placeholder="The list's name goes here..."
+					@keyup.esc="back()"
+					@keyup.enter="newList()"/>
+			</p>
+			<p class="control">
+				<button class="button is-success noshadow" @click="newList()" :disabled="list.title.length < 3">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
-						Add
-					</button>
-				</p>
-			</div>
-		</form>
+					Add
+				</button>
+			</p>
+		</div>
+		<p class="help is-danger" v-if="showError && list.title.length < 3">
+			Please specify at least three characters.
+		</p>
 	</div>
 </template>

 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import ListService from '../../services/list'
 	import ListModel from '../../models/list'

@ -34,6 +41,7 @@
 		name: "NewList",
 		data() {
 			return {
+				showError: false,
 				list: ListModel,
 				listService: ListService,
 			}
@ -51,15 +59,21 @@
 		},
 		methods: {
 			newList() {
-				this.list.namespaceID = this.$route.params.id
+				if (this.list.title.length < 3) {
+					this.showError = true
+					return
+				}
+				this.showError = false
+
+				this.list.namespaceId = this.$route.params.id
 				this.listService.create(this.list)
 					.then(response => {
 						this.$parent.loadNamespaces()
-						message.success({message: 'The list was successfully created.'}, this)
+						this.success({message: 'The list was successfully created.'}, this)
 						router.push({name: 'showList', params: {id: response.id}})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			back() {
--- a/src/components/lists/ShowList.vue
+++ b/src/components/lists/ShowList.vue
@ -4,14 +4,20 @@
 			<router-link :to="{ name: 'editList', params: { id: list.id } }" class="icon settings is-medium">
 				<icon icon="cog" size="2x"/>
 			</router-link>
-			<h1>{{ list.title }}</h1>
+			<h1 :style="{ 'opacity': list.title === '' ? '0': '1' }">{{ list.title === '' ? 'Loading...': list.title}}</h1>
+			<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.
+			</div>
 			<div class="switch-view">
-				<router-link :to="{ name: 'showList', params: { id: list.id } }" :class="{'is-active': $route.params.type !== 'gantt'}">List</router-link>
+				<router-link :to="{ name: 'showList', params: { id: list.id } }" :class="{'is-active': $route.params.type !== 'gantt' && $route.params.type !== 'table'}">List</router-link>
 				<router-link :to="{ name: 'showListWithType', params: { id: list.id, type: 'gantt' } }" :class="{'is-active': $route.params.type === 'gantt'}">Gantt</router-link>
+				<router-link :to="{ name: 'showListWithType', params: { id: list.id, type: 'table' } }" :class="{'is-active': $route.params.type === 'table'}">Table</router-link>
 			</div>
 		</div>

 		<gantt :list="list" v-if="$route.params.type === 'gantt'"/>
+		<table-view :list="list" v-else-if="$route.params.type === 'table'"/>
 		<show-list-task :the-list="list" v-else/>
 	</div>
 </template>
@ -19,7 +25,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'

 	import ShowListTask from '../tasks/ShowListTasks'
 	import Gantt from '../tasks/Gantt'
@ -27,16 +32,18 @@
 	import ListModel from '../../models/list'
 	import ListService from '../../services/list'
 	import authType from '../../models/authTypes'
+	import TableView from '../tasks/TableView'

 	export default {
 		data() {
 			return {
-				listID: this.$route.params.id,
+				listId: this.$route.params.id,
 				listService: ListService,
 				list: ListModel,
 			}
 		},
 		components: {
+			TableView,
 			Gantt,
 			ShowListTask,
 		},
@ -47,7 +54,14 @@
 			}

 			// If the type is invalid, redirect the user
-			if (auth.user.authenticated && auth.user.infos.type !== authType.LINK_SHARE && this.$route.params.type !== 'gantt' && this.$route.params.type !== '') {
+			if (
+				auth.user.authenticated &&
+				auth.user.infos.type !== authType.LINK_SHARE &&
+				this.$route.params.type !== 'gantt' &&
+				this.$route.params.type !== 'table' &&
+				this.$route.params.type !== 'list' &&
+				this.$route.params.type !== ''
+			) {
 				router.push({name: 'showList', params: { id:  this.$route.params.id }})
 			}
 		},
@ -58,7 +72,7 @@
 		},
 		watch: {
 			// call again the method if the route changes
-			'$route': 'loadList'
+			'$route.path': 'loadList'
 		},
 		methods: {
 			loadList() {
@ -69,7 +83,7 @@
 						this.$set(this, 'list', r)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 		}
--- a/src/components/migrator/migrate.vue
+++ b/src/components/migrator/migrate.vue
@ -0,0 +1,18 @@
+<template>
+	<div class="content">
+		<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: 'migrateWunderlist'}">
+				<img src="/images/migration/wunderlist.png" alt="Wunderlist"/>
+				Wunderlist
+			</router-link>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'migrate'
+	}
+</script>
--- a/src/components/migrator/wunderlist.vue
+++ b/src/components/migrator/wunderlist.vue
@ -0,0 +1,109 @@
+<template>
+	<div class="content">
+		<h1>Import your data from Wunderlist to Vikunja</h1>
+		<p>Vikunja will import all folders, lists, tasks, notes, reminders and files you have access to.</p>
+		<template v-if="isMigrating === false && message === '' && lastMigrationDate === 0">
+			<p>To authorize Vikunja to access your Wunderlist Account, click the button below.</p>
+			<a :href="authUrl" class="button is-primary" :class="{'is-loading': migrationService.loading}" :disabled="migrationService.loading">Get Started</a>
+		</template>
+		<div class="migration-in-progress-container" v-else-if="isMigrating === true && message === '' && lastMigrationDate === 0">
+			<div class="migration-in-progress">
+				<img src="/images/migration/wunderlist.png" alt="Wunderlist Logo"/>
+				<div class="progress-dots">
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+					<span></span>
+				</div>
+				<img src="/images/logo.svg" alt="Vikunja Logo">
+			</div>
+			<p>Importing in progress, hang tight...</p>
+		</div>
+		<div v-else-if="lastMigrationDate > 0">
+			<p>
+				It looks like you've already imported your stuff from wunderlist at {{ new Date(lastMigrationDate * 1000) }}.<br/>
+				Importing again is possible, but might create duplicates.
+				Are you sure?
+			</p>
+			<div class="buttons">
+				<button class="button is-primary" @click="migrate">I am sure, please start migrating now!</button>
+				<router-link :to="{name: 'home'}" class="button is-danger is-outlined">Cancel</router-link>
+			</div>
+		</div>
+		<div v-else>
+			<div class="message is-primary">
+				<div class="message-body">
+					{{ message }}
+				</div>
+			</div>
+			<router-link :to="{name: 'home'}" class="button is-primary">Refresh</router-link>
+		</div>
+	</div>
+</template>
+
+<script>
+	import WunderlistMigrationService from '../../services/migrator/wunderlist'
+
+	export default {
+		name: 'wunderlist',
+		data() {
+			return {
+				migrationService: WunderlistMigrationService,
+				authUrl: '',
+				isMigrating: false,
+				lastMigrationDate: 0,
+				message: '',
+				wunderlistCode: '',
+			}
+		},
+		created() {
+			this.migrationService = new WunderlistMigrationService()
+			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_unix > 0) {
+							this.lastMigrationDate = r.time_unix
+							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)
+					})
+			},
+			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>
--- a/src/components/namespaces/EditNamespace.vue
+++ b/src/components/namespaces/EditNamespace.vue
@ -1,5 +1,9 @@
 <template>
 	<div class="loader-container" v-bind:class="{ 'is-loading': namespaceService.loading}">
+		<div class="notification is-warning" v-if="namespace.isArchived">
+			This namespace is archived.
+			It is not possible to create new lists or edit it.
+		</div>
 		<div class="card">
 			<header class="card-header">
 				<p class="card-header-title">
@ -21,6 +25,26 @@
 								<textarea :class="{ 'disabled': namespaceService.loading}" :disabled="namespaceService.loading" class="textarea" placeholder="The namespaces description goes here..." id="namespacedescription" v-model="namespace.description"></textarea>
 							</div>
 						</div>
+						<div class="field">
+							<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.'">
+									This namespace is archived
+								</fancycheckbox>
+							</div>
+						</div>
+						<div class="field">
+							<label class="label">Color</label>
+							<div class="control">
+								<verte
+										v-model="namespace.hexColor"
+										menuPosition="top"
+										picker="square"
+										model="hex"
+										:enableAlpha="false"
+										:rgbSliders="true"/>
+							</div>
+						</div>
 					</form>

 					<div class="columns bigbuttons">
@ -56,14 +80,17 @@
 </template>

 <script>
+	import verte from 'verte'
+	import 'verte/dist/verte.css'
+
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import manageSharing from '../sharing/userTeam'

 	import NamespaceService from '../../services/namespace'
 	import NamespaceModel from '../../models/namespace'
-	
+	import Fancycheckbox from '../global/fancycheckbox'
+
 	export default {
 		name: "EditNamespace",
 		data() {
@ -79,7 +106,9 @@
 			}
 		},
 		components: {
+			Fancycheckbox,
 			manageSharing,
+			verte,
 		},
 		beforeMount() {
 			// Check if the user is already logged in, if so, redirect him to the homepage
@ -91,6 +120,7 @@
 		},
 		created() {
 			this.namespaceService = new NamespaceService()
+			this.namespace = new NamespaceModel()
 			this.loadNamespace()
 		},
 		watch: {
@ -111,7 +141,7 @@
 						this.manageUsersComponent = 'manageSharing'
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			submit() {
@ -124,20 +154,20 @@
 								this.$set(this.$parent.namespaces, n, r)
 							}
 						}
-						message.success({message: 'The namespace was successfully updated.'}, this)
+						this.success({message: 'The namespace was successfully updated.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteNamespace() {
 				this.namespaceService.delete(this.namespace)
 					.then(() => {
-						message.success({message: 'The namespace was successfully deleted.'}, this)
+						this.success({message: 'The namespace was successfully deleted.'}, this)
 						router.push({name: 'home'})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			}
 		}
--- a/src/components/namespaces/NewNamespace.vue
+++ b/src/components/namespaces/NewNamespace.vue
@ -5,29 +5,37 @@
 			</icon>
 		</a>
 		<h3>Create a new namespace</h3>
-		<form @submit.prevent="newNamespace" @keyup.esc="back()">
-			<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.name" type="text" placeholder="The namespace's name goes here...">
-				</p>
-				<p class="control">
-					<button type="submit" class="button is-success noshadow">
+		<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.name"
+					type="text"
+					@keyup.enter="newNamespace()"
+					@keyup.esc="back()"
+					placeholder="The namespace's name goes here..."/>
+			</p>
+			<p class="control">
+				<button class="button is-success noshadow" @click="newNamespace()" :disabled="namespace.name.length <= 5">
 						<span class="icon is-small">
 							<icon icon="plus"/>
 						</span>
-						Add
-					</button>
-				</p>
-			</div>
-		</form>
-		<p class="small" v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with.<br/>In fact, every list belongs to a namepace.'">What's a namespace?</p>
+					Add
+				</button>
+			</p>
+		</div>
+		<p class="help is-danger" v-if="showError && namespace.name.length <= 5">
+			Please specify at least five characters.
+		</p>
+		<p class="small" v-tooltip.bottom="'A namespace is a collection of lists you can share and use to organize your lists with.<br/>In fact, every list belongs to a namepace.'">
+			What's a namespace?</p>
 	</div>
 </template>

 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import NamespaceModel from "../../models/namespace";
 	import NamespaceService from "../../services/namespace";

@ -35,6 +43,7 @@
 		name: "NewNamespace",
 		data() {
 			return {
+				showError: false,
 				namespace: NamespaceModel,
 				namespaceService: NamespaceService,
 			}
@ -52,14 +61,20 @@
 		},
 		methods: {
 			newNamespace() {
+				if (this.namespace.name.length <= 4) {
+					this.showError = true
+					return
+				}
+				this.showError = false
+
 				this.namespaceService.create(this.namespace)
 					.then(() => {
 						this.$parent.loadNamespaces()
-						message.success({message: 'The namespace was successfully created.'}, this)
+						this.success({message: 'The namespace was successfully created.'}, this)
 						router.push({name: 'home'})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			back() {
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@ -1,195 +1,190 @@
 <template>
-    <div class="card is-fullwidth">
-        <header class="card-header">
-            <p class="card-header-title">
-                Share links
-            </p>
-        </header>
-        <div class="card-content content sharables-list">
-            <form @submit.prevent="add()" class="add-form">
-                <div class="field is-grouped">
-                    <div class="control">
-                        <!-- TODO: maybe move this into a modal? -->
-                        Add a new link share:
-                    </div>
-                    <div class="control">
-                        <div class="select">
-                            <select v-model="selectedRight" class="button buttonright">
-                                <option :value="rights.READ">Read only</option>
-                                <option :value="rights.READ_WRITE">Read & write</option>
-                                <option :value="rights.ADMIN">Admin</option>
-                            </select>
-                        </div>
-                    </div>
-                    <div class="control">
-                        <button type="submit" class="button is-success">
-                            <span class="icon is-small">
-                                <icon icon="plus"/>
-                            </span>
-                            Add
-                        </button>
-                    </div>
-                </div>
-            </form>
-            <table class="table is-striped is-hoverable is-fullwidth">
-                <tbody>
-                <tr>
-                    <th>Link</th>
-                    <th>Shared by</th>
-                    <th>Right</th>
-                    <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))">
-                                    <span class="icon is-small">
-                                      <icon icon="paste"/>
-                                    </span>
-                                </a>
-                            </div>
-                        </div>
-                    </td>
-                    <td>
-                        {{ s.shared_by.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">
-                        <span class="icon is-small">
-                            <icon icon="pen"/>
-                        </span>
-                            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">
-                            <span class="icon is-small">
-                                <icon icon="trash-alt"/>
-                            </span>
-                        </button>
-                    </td>
-                </tr>
-                </template>
-                </tbody>
-            </table>
-        </div>
+	<div class="card is-fullwidth">
+		<header class="card-header">
+			<p class="card-header-title">
+				Share links
+			</p>
+		</header>
+		<div class="card-content content sharables-list">
+			<form @submit.prevent="add()" class="add-form">
+				<p>
+					Share with a link:
+				</p>
+				<div class="field has-addons">
+					<div class="control">
+						<div class="select">
+							<select v-model="selectedRight">
+								<option :value="rights.READ">Read only</option>
+								<option :value="rights.READ_WRITE">Read & write</option>
+								<option :value="rights.ADMIN">Admin</option>
+							</select>
+						</div>
+					</div>
+					<div class="control">
+						<button type="submit" class="button is-success">
+							Share
+						</button>
+					</div>
+				</div>
+			</form>
+			<table class="table is-striped is-hoverable is-fullwidth link-share-list">
+				<tbody>
+				<tr>
+					<th>Link</th>
+					<th>Shared by</th>
+					<th>Right</th>
+					<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))">
+									<span class="icon">
+										<icon icon="paste"/>
+									</span>
+								</a>
+							</div>
+						</div>
+					</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">
+						<span class="icon is-small">
+							<icon icon="pen"/>
+						</span>
+							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">
+							<span class="icon">
+								<icon icon="trash-alt"/>
+							</span>
+						</button>
+					</td>
+				</tr>
+				</template>
+				</tbody>
+			</table>
+		</div>

-        <modal
-                v-if="showDeleteModal"
-                @close="showDeleteModal = false"
-                @submit="remove()">
-            <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/>
-                <b>This CANNOT BE UNDONE!</b></p>
-        </modal>
-    </div>
+		<modal
+				v-if="showDeleteModal"
+				@close="showDeleteModal = false"
+				@submit="remove()">
+			<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/>
+				<b>This CANNOT BE UNDONE!</b></p>
+		</modal>
+	</div>
 </template>

 <script>
-    import message from '../../message'
-    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 copy from 'copy-to-clipboard'

-    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()
-            this.load()
-        },
-        watch: {
-            listID: () => { // watch it
-                this.load()
-            }
-        },
-        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
-                }
+	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()
+			this.load()
+		},
+		watch: {
+			listId: () => { // watch it
+				this.load()
+			}
+		},
+		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 => {
-                        message.error(e, this)
-                    })
-            },
-            add() {
-                let newLinkShare = new LinkShareModel({right: this.selectedRight, listID: this.listID})
-                this.linkShareService.create(newLinkShare)
-                    .then(() => {
-                        this.selectedRight = rights.READ
-                        message.success({message: 'The link share was successfully created'}, this)
-                        this.load()
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            },
-            remove() {
-                let linkshare = new LinkShareModel({id: this.linkIDToDelete, listID: this.listID})
-                this.linkShareService.delete(linkshare)
-                    .then(() => {
-                        message.success({message: 'The link share was successfully deleted'}, this)
-                        this.load()
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-                    .finally(() => {
-                        this.showDeleteModal = false
-                    })
-            },
-            copy(text) {
-                copy(text)
-            },
-            getShareLink(hash) {
-                return this.$config.frontend_url + '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.$config.frontend_url + 'share/'  + hash + '/auth'
+			},
+		},
+	}
 </script>
--- a/src/components/sharing/linkSharingAuth.vue
+++ b/src/components/sharing/linkSharingAuth.vue
@ -1,40 +1,39 @@
 <template>
-    <div class="message is-centered is-info" v-if="loading">
-        <div class="message-header">
-            <p class="has-text-centered">
-                Authenticating...
-            </p>
-        </div>
-    </div>
+	<div class="message is-centered is-info" v-if="loading">
+		<div class="message-header">
+			<p class="has-text-centered">
+				Authenticating...
+			</p>
+		</div>
+	</div>
 </template>

 <script>
-    import auth from '../../auth'
-    import router from '../../router'
-    import message from '../../message'
+	import auth from '../../auth'
+	import router from '../../router'

-    export default {
-        name: 'linkSharingAuth',
-        data() {
-            return {
-                hash: '',
-                loading: true,
-            }
-        },
-        created() {
-            this.auth()
-        },
-        methods: {
-            auth() {
-                auth.linkShareAuth(this.$route.params.share)
-                    .then((r) => {
-                        this.loading = false
-                        router.push({name: 'showList', params: {id: r.list_id}})
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            }
-        },
-    }
+	export default {
+		name: 'linkSharingAuth',
+		data() {
+			return {
+				hash: '',
+				loading: true,
+			}
+		},
+		created() {
+			this.auth()
+		},
+		methods: {
+			auth() {
+				auth.linkShareAuth(this.$route.params.share)
+					.then((r) => {
+						this.loading = false
+						router.push({name: 'showList', params: {id: r.listId}})
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+			}
+		},
+	}
 </script>
--- 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">
-				{{shareType}}s with access to this {{typeString}}
+				Shared with these {{shareType}}s
 			</p>
 		</header>
 		<div class="card-content content sharables-list">
@ -76,13 +76,13 @@
 					</td>
 					<td class="actions" v-if="userIsAdmin">
 						<div class="select">
-							<select @change="sharableID = s.id;toggleType()" v-model="selectedRight" class="button buttonright">
+							<select @change="toggleType(s)" v-model="selectedRight" 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>
 						</div>
-						<button @click="sharableID = s.id; 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>
@ -106,7 +106,6 @@

 <script>
 	import auth from '../../auth'
-	import message from '../../message'
 	import multiselect from 'vue-multiselect'

 	import UserNamespaceService from '../../services/userNamespace'
@ -128,10 +127,22 @@
 	export default {
 		name: 'userTeamShare',
 		props: {
-			type: '',
-			shareType: '',
-			id: 0,
-			userIsAdmin: false,
+			type: {
+				type: String,
+				default: '',
+			},
+			shareType: {
+				type: String,
+				default: '',
+			},
+			id: {
+				type: Number,
+				default: 0,
+			},
+			userIsAdmin: {
+				type: Boolean,
+				default: false,
+			},
 		},
 		data() {
 			return {
@ -139,8 +150,7 @@
 				stuffModel: Object,
 				searchService: Object,
 				sharable: Object,
-				sharableID: 0, // This holds either user or team id for stuff like rights update or deleting
-				
+
 				found: [],
 				searchLabel: '',
 				rights: rights,
@ -165,11 +175,11 @@
 				if (this.type === 'list') {
 					this.typeString = `list`
 					this.stuffService = new UserListService()
-					this.stuffModel = new UserListModel({listID: this.id})
+					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})
+					this.stuffModel = new UserNamespaceModel({namespaceId: this.id})
 				} else {
 					throw new Error('Unknown type: ' + this.type)
 				}
@ -182,11 +192,11 @@
 				if (this.type === 'list') {
 					this.typeString = `list`
 					this.stuffService = new TeamListService()
-					this.stuffModel = new TeamListModel({listID: this.id})
+					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})
+					this.stuffModel = new TeamNamespaceModel({namespaceId: this.id})
 				} else {
 					throw new Error('Unknown type: ' + this.type)
 				}
@ -203,31 +213,31 @@
 						this.$set(this, 'sharables', r)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteSharable() {

 				if (this.shareType === 'user') {
-					this.stuffModel.userID = this.sharable.id
+					this.stuffModel.userId = this.sharable.username
 				} else if (this.shareType === 'team') {
-					this.stuffModel.teamID = this.sharable.id
+					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[i].id === this.stuffModel.userId && this.shareType === 'user') ||
+								(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
 							) {
 								this.sharables.splice(i, 1)
 							}
 						}
-						message.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
+						this.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			add(admin) {
@ -240,21 +250,21 @@
 				}

 				if (this.shareType === 'user') {
-					this.stuffModel.userID = this.sharable.username
+					this.stuffModel.userId = this.sharable.username
 				} else if (this.shareType === 'team') {
-					this.stuffModel.teamID = this.sharable.id
+					this.stuffModel.teamId = this.sharable.id
 				}

 				this.stuffService.create(this.stuffModel)
 					.then(() => {
-						message.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
+						this.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
 						this.load()
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
-			toggleType() {
+			toggleType(sharable) {
 				if (this.selectedRight !== rights.ADMIN &&
 					this.selectedRight !== rights.READ &&
 					this.selectedRight !== rights.READ_WRITE
@ -265,25 +275,25 @@


 				if (this.shareType === 'user') {
-					this.stuffModel.userID = this.sharableID
+					this.stuffModel.userId = sharable.username
 				} else if (this.shareType === 'team') {
-					this.stuffModel.teamID = this.sharableID
+					this.stuffModel.teamId = sharable.id
 				}

 				this.stuffService.update(this.stuffModel)
 					.then(r => {
 						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[i].id === this.stuffModel.userId && this.shareType === 'user') ||
+								(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
 							) {
 								this.$set(this.sharables[i], 'right', r.right)
 							}
 						}
-						message.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
+						this.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			find(query) {
@ -297,7 +307,7 @@
 						this.$set(this, 'found', response)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			clearAll () {
--- a/src/components/tasks/Gantt.vue
+++ b/src/components/tasks/Gantt.vue
@ -1,18 +1,9 @@
 <template>
 	<div>
 		<div class="gantt-options">
-			<div class="fancycheckbox is-block">
-				<input id="showTaskswithoutDates" type="checkbox" style="display: none;" v-model="showTaskswithoutDates">
-				<label for="showTaskswithoutDates" 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>
-						<polyline points="1 9 7 14 15 4"></polyline>
-					</svg>
-					<span>
-						Show tasks which don't have dates set
-					</span>
-				</label>
-			</div>
+			<fancycheckbox v-model="showTaskswithoutDates" class="is-block">
+				Show tasks which don't have dates set
+			</fancycheckbox>
 			<div class="range-picker">
 				<div class="field">
 					<label class="label" for="dayWidth">Size</label>
@ -66,10 +57,12 @@
 	import GanttChart from './gantt-component'
 	import flatPickr from 'vue-flatpickr-component'
 	import ListModel from '../../models/list'
+	import Fancycheckbox from '../global/fancycheckbox'

 	export default {
 		name: 'Gantt',
 		components: {
+			Fancycheckbox,
 			flatPickr,
 			GanttChart
 		},
--- a/src/components/tasks/ShowListTasks.vue
+++ b/src/components/tasks/ShowListTasks.vue
@ -1,113 +1,135 @@
 <template>
-	<div class="loader-container" :class="{ 'is-loading': listService.loading}">
-		<form @submit.prevent="addTask()">
+	<div class="loader-container" :class="{ 'is-loading': taskCollectionService.loading}">
+		<div class="search">
+			<div class="field has-addons" :class="{ 'hidden': !showTaskSearch }">
+				<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()"/>
+					<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}"
+							:disabled="searchTerm === ''">
+						Search
+					</button>
+				</div>
+			</div>
+			<button class="button" @click="showTaskSearch = !showTaskSearch" v-if="!showTaskSearch">
+				<span class="icon">
+					<icon icon="search"/>
+				</span>
+			</button>
+		</div>
+
+		<div class="field task-add" v-if="!list.isArchived">
 			<div class="field is-grouped">
 				<p class="control has-icons-left is-expanded" :class="{ 'is-loading': taskService.loading}">
-					<input v-focus class="input" :class="{ 'disabled': taskService.loading}" v-model="newTaskText" type="text" placeholder="Add a new task...">
+					<input v-focus class="input" :class="{ 'disabled': taskService.loading}" v-model="newTaskText" type="text" placeholder="Add a new task..." @keyup.enter="addTask()"/>
 					<span class="icon is-small is-left">
 						<icon icon="tasks"/>
 					</span>
 				</p>
 				<p class="control">
-					<button type="submit" class="button is-success">
-					<span class="icon is-small">
-						<icon icon="plus"/>
-					</span>
+					<button class="button is-success" :disabled="newTaskText.length < 3" @click="addTask()">
+						<span class="icon is-small">
+							<icon icon="plus"/>
+						</span>
 						Add
 					</button>
 				</p>
 			</div>
-		</form>
+			<p class="help is-danger" v-if="showError && newTaskText.length < 3">
+				Please specify at least three characters.
+			</p>
+		</div>

 		<div class="columns">
 			<div class="column">
-				<div class="tasks" v-if="this.list.tasks && this.list.tasks.length > 0" :class="{'short': isTaskEdit}">
-					<div class="task" v-for="l in list.tasks" :key="l.id">
-						<label :for="l.id">
-							<div class="fancycheckbox">
-								<input @change="markAsDone" type="checkbox" :id="l.id" :checked="l.done" style="display: none;">
-								<label :for="l.id" 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>
-										<polyline points="1 9 7 14 15 4"></polyline>
-									</svg>
-								</label>
-							</div>
-							<span class="tasktext" :class="{ 'done': l.done}">
-								{{l.text}}
-								<span class="tag" v-for="label in l.labels" :style="{'background': label.hex_color, 'color': label.textColor}" :key="label.id">
-									<span>{{ label.title }}</span>
-								</span>
-                                <img :src="gravatar(a)" :alt="a.username" v-for="a in l.assignees" class="avatar" :key="l.id + 'assignee' + a.id"/>
-								<i v-if="l.dueDate > 0" :class="{'overdue': (l.dueDate <= new Date())}"> - Due on {{new Date(l.dueDate).toLocaleString()}}</i>
-								<span v-if="l.priority >= priorities.HIGH" class="high-priority" :class="{'not-so-high': l.priority === priorities.HIGH}">
-									<span class="icon">
-										<icon icon="exclamation"/>
-									</span>
-									<template v-if="l.priority === priorities.HIGH">High</template>
-									<template v-if="l.priority === priorities.URGENT">Urgent</template>
-									<template v-if="l.priority === priorities.DO_NOW">DO NOW</template>
-									<span class="icon" v-if="l.priority === priorities.DO_NOW">
-										<icon icon="exclamation"/>
-									</span>
-								</span>
-							</span>
-						</label>
-						<div @click="editTask(l.id)" class="icon settings">
-							<icon icon="cog"/>
+				<div class="tasks" v-if="tasks && tasks.length > 0" :class="{'short': isTaskEdit}">
+					<div class="task" v-for="t in tasks" :key="t.id">
+						<single-task-in-list :the-task="t" @taskUpdated="updateTasks"/>
+						<div @click="editTask(t.id)" class="icon settings" v-if="!list.isArchived">
+							<icon icon="pencil-alt"/>
 						</div>
 					</div>
 				</div>
 			</div>
 			<div class="column is-4" v-if="isTaskEdit">
 				<div class="card taskedit">
-                    <header class="card-header">
-                        <p class="card-header-title">
-                            Edit Task
-                        </p>
-                        <a class="card-header-icon" @click="isTaskEdit = false">
-                            <span class="icon">
-                                <icon icon="angle-right"/>
-                            </span>
-                        </a>
-                    </header>
-                    <div class="card-content">
-                        <div class="content">
-                            <edit-task :task="taskEditTask"/>
-                        </div>
-                    </div>
+					<header class="card-header">
+						<p class="card-header-title">
+							Edit Task
+						</p>
+						<a class="card-header-icon" @click="isTaskEdit = false">
+							<span class="icon">
+								<icon icon="angle-right"/>
+							</span>
+						</a>
+					</header>
+					<div class="card-content">
+						<div class="content">
+							<edit-task :task="taskEditTask"/>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>
+
+		<nav class="pagination is-centered" role="navigation" aria-label="pagination" v-if="taskCollectionService.totalPages > 1">
+			<router-link class="pagination-previous" :to="getRouteForPagination(currentPage - 1)" tag="button" :disabled="currentPage === 1">Previous</router-link>
+			<router-link class="pagination-next" :to="getRouteForPagination(currentPage + 1)" tag="button" :disabled="currentPage === taskCollectionService.totalPages">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)" :class="{'is-current': p.number === currentPage}" class="pagination-link" :aria-label="'Goto page ' + p.number">{{ p.number }}</router-link>
+					</li>
+				</template>
+			</ul>
+		</nav>
 	</div>
 </template>

 <script>
-	import message from '../../message'
-
-	import ListService from '../../services/list'
 	import TaskService from '../../services/task'
 	import ListModel from '../../models/list'
-    import EditTask from './edit-task'
-    import TaskModel from '../../models/task'
-    import priorities from '../../models/priorities'
+	import EditTask from './edit-task'
+	import TaskModel from '../../models/task'
+	import SingleTaskInList from './reusable/singleTaskInList'
+	import taskList from './helpers/taskList'

 	export default {
+		name: 'ListView',
 		data() {
 			return {
-				listID: this.$route.params.id,
-				listService: ListService,
+				listId: this.$route.params.id,
 				taskService: TaskService,
-                list: {},
-                isTaskEdit: false,
+				list: {},
+				isTaskEdit: false,
 				taskEditTask: TaskModel,
 				newTaskText: '',
-                priorities: {},
+
+				showError: false,
 			}
 		},
-        components: {
+		mixins: [
+			taskList,
+		],
+		components: {
+			SingleTaskInList,
 			EditTask,
-        },
+		},
 		props: {
 			theList: {
 				type: ListModel,
@ -117,57 +139,59 @@
 		watch: {
 			theList() {
 				this.list = this.theList
-			}
+			},
 		},
 		created() {
-			this.listService = new ListService()
 			this.taskService = new TaskService()
-            this.priorities = priorities
-            this.taskEditTask = null
-			this.isTaskEdit = false
 		},
 		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() {
-				let task = new TaskModel({text: this.newTaskText, listID: this.$route.params.id})
+				if (this.newTaskText.length < 3) {
+					this.showError = true
+					return
+				}
+				this.showError = false
+
+				let task = new TaskModel({text: this.newTaskText, listId: this.$route.params.id})
 				this.taskService.create(task)
 					.then(r => {
-						this.list.addTaskToList(r)
+						this.tasks.push(r)
+						this.sortTasks()
 						this.newTaskText = ''
-						message.success({message: 'The task was successfully created.'}, this)
+						this.success({message: 'The task was successfully created.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
-			markAsDone(e) {
-				let updateFunc = () => {
-					// We get the task, update the 'done' property and then push it to the api.
-					let task = this.list.getTaskByID(e.target.id)
-					task.done = e.target.checked
-					this.taskService.update(task)
-						.then(() => {
-                            this.list.sortTasks()
-							message.success({message: 'The task was successfully ' + (task.done ? '' : 'un-') + 'marked as done.'}, this)
-						})
-						.catch(e => {
-							message.error(e, this)
-						})
-				}
-
-				if (e.target.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
-				}
-			},
 			editTask(id) {
 				// Find the selected task and set it to the current object
-				let theTask = this.list.getTaskByID(id) // Somehow this does not work if we directly assign this to this.taskEditTask
-                this.taskEditTask = theTask
+				let theTask = this.getTaskById(id) // Somehow this does not work if we directly assign this to this.taskEditTask
+				this.taskEditTask = theTask
 				this.isTaskEdit = true
 			},
-			gravatar(user) {
-				return 'https://www.gravatar.com/avatar/' + user.avatarUrl + '?s=27'
+			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
+					}
+				}
+				this.sortTasks()
 			},
 		}
 	}
--- a/src/components/tasks/ShowTasks.vue
+++ b/src/components/tasks/ShowTasks.vue
@ -8,51 +8,26 @@
 		</template>
 		<div class="spinner" :class="{ 'is-loading': taskService.loading}"></div>
 		<div class="tasks" v-if="tasks && tasks.length > 0">
-			<div @click="gotoList(l.listID)" class="task" v-for="l in tasks" :key="l.id" v-if="!l.done">
-				<label :for="l.id">
-					<div class="fancycheckbox">
-						<input type="checkbox" :id="l.id" :checked="l.done" style="display: none;" disabled>
-						<label  :for="l.id" 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>
-								<polyline points="1 9 7 14 15 4"></polyline>
-							</svg>
-						</label>
-					</div>
-					<span class="tasktext">
-						{{l.text}}
-						<i v-if="l.dueDate > 0" :class="{'overdue': (new Date(l.dueDate * 1000) <= new Date())}"> - Due on {{formatUnixDate(l.dueDate)}}</i>
-						<span v-if="l.priority >= priorities.HIGH" class="high-priority" :class="{'not-so-high': l.priority === priorities.HIGH}">
-							<span class="icon">
-								<icon icon="exclamation"/>
-							</span>
-							<template v-if="l.priority === priorities.HIGH">High</template>
-							<template v-if="l.priority === priorities.URGENT">Urgent</template>
-							<template v-if="l.priority === priorities.DO_NOW">DO NOW</template>
-							<span class="icon" v-if="l.priority === priorities.DO_NOW">
-								<icon icon="exclamation"/>
-							</span>
-						</span>
-					</span>
-				</label>
+			<div class="task" v-for="t in tasks" :key="t.id">
+				<single-task-in-list :the-task="t" @taskUpdated="updateTasks"/>
 			</div>
 		</div>
 	</div>
 </template>
 <script>
-	import router from '../../router'
-	import message from '../../message'
 	import TaskService from '../../services/task'
-	import priorities from '../../models/priorities'
+	import SingleTaskInList from "./reusable/singleTaskInList";

 	export default {
-		name: "ShowTasks",
+		name: 'ShowTasks',
+		components: {
+			SingleTaskInList,
+		},
 		data() {
 			return {
 				tasks: [],
 				hasUndoneTasks: false,
 				taskService: TaskService,
-				priorities: priorities,
 			}
 		},
 		props: {
@ -64,9 +39,14 @@
 			this.taskService = new TaskService()
 			this.loadPendingTasks()
 		},
+		computed: {
+			undoneTasks: function () {
+				return this.tasks.filter(t => !t.done)
+			}
+		},
 		methods: {
 			loadPendingTasks() {
-				let params = {'sort': 'duedate'}
+				let params = {sort_by: ['due_date_unix', 'id'], order_by: ['desc', 'desc']}
 				if (!this.showAll) {
 					params.startdate = Math.round(+ this.startDate / 1000)
 					params.enddate = Math.round(+ this.endDate / 1000)
@ -80,22 +60,39 @@
 									this.hasUndoneTasks = true
 								}
 							}
-							r.sort(this.sortyByDeadline)
 						}
 						this.$set(this, 'tasks', r)
+						this.sortTasks()
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
-			formatUnixDate(dateUnix) {
-				return (new Date(dateUnix * 1000)).toLocaleString()
+			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
+				})
 			},
-			sortyByDeadline(a, b) {
-				return ((a.dueDate > b.dueDate) ? -1 : ((a.dueDate < b.dueDate) ? 1 : 0));
-			},
-			gotoList(lid) {
-				router.push({name: 'showList', params: {id: lid}})
+			updateTasks(updatedTask) {
+				for (const t in this.tasks) {
+					if (this.tasks[t].id === updatedTask.id) {
+						this.$set(this.tasks, t, updatedTask)
+						break
+					}
+				}
+				this.sortTasks()
 			},
 		},
 	}
--- a/src/components/tasks/TableView.vue
+++ b/src/components/tasks/TableView.vue
@ -0,0 +1,234 @@
+<template>
+	<div class="table-view loader-container" :class="{'is-loading': taskCollectionService.loading}">
+		<div class="column-filter">
+			<button class="button" @click="showActiveColumnsFilter = !showActiveColumnsFilter">
+				<span class="icon is-small">
+					<icon icon="th"/>
+				</span>
+				Columns
+			</button>
+			<transition name="fade">
+				<div class="card" v-if="showActiveColumnsFilter">
+					<div class="card-content">
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.id">#</fancycheckbox>
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.done">Done</fancycheckbox>
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.text">Name</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.created">Created</fancycheckbox>
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.updated">Updated</fancycheckbox>
+						<fancycheckbox @change="saveTaskColumns" v-model="activeColumns.createdBy">Created By</fancycheckbox>
+					</div>
+				</div>
+			</transition>
+		</div>
+
+		<table class="table is-hoverable is-fullwidth">
+			<thead>
+			<tr>
+				<th v-if="activeColumns.id">
+					#
+					<sort :order="sortBy.id" @click="sort('id')"/>
+				</th>
+				<th v-if="activeColumns.done">
+					Done
+					<sort :order="sortBy.done" @click="sort('done')"/>
+				</th>
+				<th v-if="activeColumns.text">
+					Name
+					<sort :order="sortBy.text" @click="sort('text')"/>
+				</th>
+				<th v-if="activeColumns.priority">
+					Priority
+					<sort :order="sortBy.priority" @click="sort('priority')"/>
+				</th>
+				<th v-if="activeColumns.labels">
+					Labels
+				</th>
+				<th v-if="activeColumns.assignees">
+					Assignees
+				</th>
+				<th v-if="activeColumns.dueDate">
+					Due&nbsp;Date
+					<sort :order="sortBy.due_date_unix" @click="sort('due_date_unix')"/>
+				</th>
+				<th v-if="activeColumns.startDate">
+					Start&nbsp;Date
+					<sort :order="sortBy.start_date_unix" @click="sort('start_date_unix')"/>
+				</th>
+				<th v-if="activeColumns.endDate">
+					End&nbsp;Date
+					<sort :order="sortBy.end_date_unix" @click="sort('end_date_unix')"/>
+				</th>
+				<th v-if="activeColumns.percentDone">
+					%&nbsp;Done
+					<sort :order="sortBy.percent_done" @click="sort('percent_done')"/>
+				</th>
+				<th v-if="activeColumns.created">
+					Created
+					<sort :order="sortBy.created" @click="sort('created')"/>
+				</th>
+				<th v-if="activeColumns.updated">
+					Updated
+					<sort :order="sortBy.updated" @click="sort('updated')"/>
+				</th>
+				<th v-if="activeColumns.createdBy">
+					Created&nbsp;By
+				</th>
+			</tr>
+			</thead>
+			<tbody>
+			<tr v-for="t in tasks" :key="t.id">
+				<td v-if="activeColumns.id">
+					<router-link :to="{name: 'taskDetailView', params: { id: t.id }}">{{ t.id }}</router-link>
+				</td>
+				<td v-if="activeColumns.done">
+					<div class="is-done" v-if="t.done">Done</div>
+				</td>
+				<td v-if="activeColumns.text">
+					<router-link :to="{name: 'taskDetailView', params: { id: t.id }}">{{ t.text }}</router-link>
+				</td>
+				<td v-if="activeColumns.priority">
+					<priority-label :priority="t.priority" :show-all="true"/>
+				</td>
+				<td v-if="activeColumns.labels">
+					<labels :labels="t.labels"/>
+				</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"
+					/>
+				</td>
+				<date-table-cell :date="t.dueDate" v-if="activeColumns.dueDate"/>
+				<date-table-cell :date="t.startDate" v-if="activeColumns.startDate"/>
+				<date-table-cell :date="t.endDate" v-if="activeColumns.endDate"/>
+				<td v-if="activeColumns.percentDone">{{ t.percentDone }}%</td>
+				<date-table-cell :date="t.created" v-if="activeColumns.created"/>
+				<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"/>
+				</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>
+			<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>
+					</li>
+				</template>
+			</ul>
+		</nav>
+	</div>
+</template>
+
+<script>
+	import ListModel from '../../models/list'
+	import taskList from './helpers/taskList'
+	import User from '../global/user'
+	import PriorityLabel from './reusable/priorityLabel'
+	import Labels from './reusable/labels'
+	import DateTableCell from './reusable/date-table-cell'
+	import Fancycheckbox from '../global/fancycheckbox'
+	import Sort from './reusable/sort'
+
+	export default {
+		name: 'TableView',
+		components: {
+			Sort,
+			Fancycheckbox,
+			DateTableCell,
+			Labels,
+			PriorityLabel,
+			User,
+		},
+		mixins: [
+			taskList,
+		],
+		data() {
+			return {
+				showActiveColumnsFilter: false,
+				activeColumns: {
+					id: true,
+					done: true,
+					text: true,
+					priority: false,
+					labels: true,
+					assignees: true,
+					dueDate: true,
+					startDate: false,
+					endDate: false,
+					percentDone: false,
+					created: false,
+					updated: false,
+					createdBy: false,
+				},
+				sortBy: {
+					id: 'desc',
+				},
+			}
+		},
+		props: {
+			list: {
+				type: ListModel,
+				required: true,
+			}
+		},
+		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.initTasks(1)
+		},
+		methods: {
+			initTasks(page, search = '') {
+				let params = {sort_by: [], 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>
--- a/src/components/tasks/TaskDetailView.vue
+++ b/src/components/tasks/TaskDetailView.vue
@ -0,0 +1,517 @@
+<template>
+	<div class="loader-container" :class="{ 'is-loading': taskService.loading}">
+		<div class="task-view">
+			<div class="heading">
+				<h1 class="title task-id">
+					#{{ task.id }}
+				</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.text }}</h1>
+			</div>
+			<h6 class="subtitle">
+				{{ namespace.name }} >
+				<router-link :to="{ name: 'showList', params: { id: list.id } }">
+					{{ list.title }}
+				</router-link>
+			</h6>
+
+			<!-- Content and buttons -->
+			<div class="columns">
+				<!-- Content -->
+				<div class="column">
+					<div class="columns details">
+						<div class="column assignees" v-if="activeFields.assignees">
+							<!-- Assignees -->
+							<div class="detail-title">
+								<icon icon="users"/>
+								Assignees
+							</div>
+							<edit-assignees
+									:task-id="task.id"
+									:list-id="task.listId"
+									:initial-assignees="task.assignees"
+									ref="assignees"
+							/>
+						</div>
+						<div class="column" v-if="activeFields.priority">
+							<!-- Priority -->
+							<div class="detail-title">
+								<icon :icon="['far', 'star']"/>
+								Priority
+							</div>
+							<priority-select v-model="task.priority" @change="saveTask" ref="priority"/>
+						</div>
+						<div class="column" v-if="activeFields.dueDate">
+							<!-- Due Date -->
+							<div class="detail-title">
+								<icon icon="calendar"/>
+								Due Date
+							</div>
+							<div class="date-input">
+								<flat-pickr
+									:class="{ 'disabled': taskService.loading}"
+									class="input"
+									:disabled="taskService.loading"
+									v-model="task.dueDate"
+									:config="flatPickerConfig"
+									@on-close="saveTask"
+									placeholder="Click here to set a due date"
+									ref="dueDate"
+								>
+								</flat-pickr>
+								<a v-if="task.dueDate" @click="() => {task.dueDate = null;saveTask()}">
+									<span class="icon is-small">
+										<icon icon="times"></icon>
+									</span>
+								</a>
+							</div>
+						</div>
+						<div class="column" v-if="activeFields.percentDone">
+							<!-- Percent Done -->
+							<div class="detail-title">
+								<icon icon="percent"/>
+								Percent Done
+							</div>
+							<percent-done-select v-model="task.percentDone" @change="saveTask" ref="percentDone"/>
+						</div>
+						<div class="column" v-if="activeFields.startDate">
+							<!-- Start Date -->
+							<div class="detail-title">
+								<icon icon="calendar-week"/>
+								Start Date
+							</div>
+							<div class="date-input">
+								<flat-pickr
+									:class="{ 'disabled': taskService.loading}"
+									class="input"
+									:disabled="taskService.loading"
+									v-model="task.startDate"
+									:config="flatPickerConfig"
+									@on-close="saveTask"
+									placeholder="Click here to set a start date"
+									ref="startDate"
+								>
+								</flat-pickr>
+								<a v-if="task.startDate" @click="() => {task.startDate = null;saveTask()}">
+									<span class="icon is-small">
+										<icon icon="times"></icon>
+									</span>
+								</a>
+							</div>
+						</div>
+						<div class="column" v-if="activeFields.endDate">
+							<!-- End Date -->
+							<div class="detail-title">
+								<icon icon="calendar-week"/>
+								End Date
+							</div>
+							<div class="date-input">
+								<flat-pickr
+									:class="{ 'disabled': taskService.loading}"
+									class="input"
+									:disabled="taskService.loading"
+									v-model="task.endDate"
+									:config="flatPickerConfig"
+									@on-close="saveTask"
+									placeholder="Click here to set an end date"
+									ref="endDate"
+								>
+								</flat-pickr>
+								<a v-if="task.endDate" @click="() => {task.endDate = null;saveTask()}">
+									<span class="icon is-small">
+										<icon icon="times"></icon>
+									</span>
+								</a>
+							</div>
+						</div>
+						<div class="column" v-if="activeFields.reminders">
+							<!-- Reminders -->
+							<div class="detail-title">
+								<icon icon="history"/>
+								Reminders
+							</div>
+							<reminders v-model="task.reminderDates" @change="saveTask" ref="reminders"/>
+						</div>
+						<div class="column" v-if="activeFields.repeatAfter">
+							<!-- Repeat after -->
+							<div class="detail-title">
+								<icon :icon="['far', 'clock']"/>
+								Repeat
+							</div>
+							<repeat-after v-model="task.repeatAfter" @change="saveTask" ref="repeatAfter"/>
+						</div>
+					</div>
+
+					<!-- Labels -->
+					<div class="labels-list details" v-if="activeFields.labels">
+						<div class="detail-title">
+							<span class="icon is-grey">
+								<icon icon="tags"/>
+							</span>
+							Labels
+						</div>
+						<edit-labels :task-id="taskId" v-model="task.labels" ref="labels"/>
+					</div>
+
+					<!-- Description -->
+					<div class="details content" :class="{ 'has-top-border': activeFields.labels }">
+						<h3>
+							<span class="icon is-grey">
+								<icon icon="align-left"/>
+							</span>
+							Description
+						</h3>
+						<!-- We're using a normal textarea until the problem with the icons is resolved in easymde -->
+						<!-- <easymde v-model="task.description" @change="saveTask"/>-->
+						<textarea
+								class="textarea"
+								v-model="task.description"
+								rows="6"
+								placeholder="Click here to enter a description..."
+								@keyup.ctrl.enter="saveTaskIfDescriptionChanged"
+								@keydown="setDescriptionChanged"
+								@change="saveTaskIfDescriptionChanged"
+						></textarea>
+					</div>
+
+					<!-- Attachments -->
+					<div class="content attachments has-top-border" v-if="activeFields.attachments">
+						<attachments
+								:task-id="taskId"
+								:initial-attachments="task.attachments"
+								ref="attachments"
+						/>
+					</div>
+
+					<!-- Related Tasks -->
+					<div class="content details has-top-border" v-if="activeFields.relatedTasks">
+						<h3>
+							<span class="icon is-grey">
+								<icon icon="tasks"/>
+							</span>
+							Related Tasks
+						</h3>
+						<related-tasks
+								:task-id="taskId"
+								:list-id="task.listId"
+								:initial-related-tasks="task.relatedTasks"
+								:show-no-relations-notice="true"
+								ref="relatedTasks"
+						/>
+					</div>
+
+					<!-- Move Task -->
+					<div class="content details has-top-border" v-if="activeFields.moveList">
+						<h3>
+							<span class="icon is-grey">
+								<icon icon="list"/>
+							</span>
+							Move task to different list
+						</h3>
+						<div class="field has-addons">
+							<div class="control is-expanded">
+								<list-search @selected="changeList"/>
+							</div>
+						</div>
+					</div>
+
+					<!-- Comments -->
+					<comments :task-id="taskId"/>
+				</div>
+				<div class="column is-one-fifth action-buttons">
+					<a class="button is-outlined noshadow has-no-border" :class="{'is-success': !task.done}" @click="toggleTaskDone()">
+						<span class="icon is-small"><icon icon="check-double"/></span>
+						<template v-if="task.done">
+							Mark as undone
+						</template>
+						<template v-else>
+							Done!
+						</template>
+					</a>
+					<a class="button" @click="setFieldActive('assignees')">
+						<span class="icon is-small"><icon icon="users"/></span>
+						Assign this task to a user
+					</a>
+					<a class="button" @click="setFieldActive('labels')">
+						<span class="icon is-small"><icon icon="tags"/></span>
+						Add labels
+					</a>
+					<a class="button" @click="setFieldActive('reminders')">
+						<span class="icon is-small"><icon icon="history"/></span>
+						Set Reminders
+					</a>
+					<a class="button" @click="setFieldActive('dueDate')">
+						<span class="icon is-small"><icon icon="calendar"/></span>
+						Set Due Date
+					</a>
+					<a class="button" @click="setFieldActive('startDate')">
+						<span class="icon is-small"><icon icon="calendar-week"/></span>
+						Set a Start Date
+					</a>
+					<a class="button" @click="setFieldActive('endDate')">
+						<span class="icon is-small"><icon icon="calendar-week"/></span>
+						Set an End Date
+					</a>
+					<a class="button" @click="setFieldActive('repeatAfter')">
+						<span class="icon is-small"><icon :icon="['far', 'clock']"/></span>
+						Set a repeating interval
+					</a>
+					<a class="button" @click="setFieldActive('priority')">
+						<span class="icon is-small"><icon :icon="['far', 'star']"/></span>
+						Set Priority
+					</a>
+					<a class="button" @click="setFieldActive('percentDone')">
+						<span class="icon is-small"><icon icon="percent"/></span>
+						Set Percent Done
+					</a>
+					<a class="button" @click="setFieldActive('attachments')">
+						<span class="icon is-small"><icon icon="paperclip"/></span>
+						Add attachments
+					</a>
+					<a class="button" @click="setFieldActive('relatedTasks')">
+						<span class="icon is-small"><icon icon="tasks"/></span>
+						Add task relations
+					</a>
+					<a class="button" @click="setFieldActive('moveList')">
+						<span class="icon is-small"><icon icon="list"/></span>
+						Move task to different list
+					</a>
+					<a class="button is-danger is-outlined noshadow has-no-border" @click="showDeleteModal = true">
+						<span class="icon is-small"><icon icon="trash-alt"/></span>
+						Delete task
+					</a>
+				</div>
+			</div>
+
+			<!-- Created / Updated [by] -->
+		</div>
+
+		<modal
+				v-if="showDeleteModal"
+				@close="showDeleteModal = false"
+				@submit="deleteTask()">
+			<span slot="header">Delete this task</span>
+			<p slot="text">
+				Are you sure you want to remove this task? <br/>
+				This will also remove all attachments, reminders and relations associated with this task and
+				<b>cannot be undone!</b>
+			</p>
+		</modal>
+	</div>
+</template>
+
+<script>
+	import TaskService from '../../services/task'
+	import TaskModel from '../../models/task'
+	import relationKinds from '../../models/relationKinds'
+	import ListModel from '../../models/list'
+	import NamespaceModel from '../../models/namespace'
+
+	import priorites from '../../models/priorities'
+
+	import flatPickr from 'vue-flatpickr-component'
+	import 'flatpickr/dist/flatpickr.css'
+	import PrioritySelect from './reusable/prioritySelect'
+	import PercentDoneSelect from './reusable/percentDoneSelect'
+	import EditLabels from './reusable/editLabels'
+	import EditAssignees from './reusable/editAssignees'
+	import Attachments from './reusable/attachments'
+	import RelatedTasks from './reusable/relatedTasks'
+	import RepeatAfter from './reusable/repeatAfter'
+	import Reminders from './reusable/reminders'
+	import Comments from './reusable/comments'
+	import router from '../../router'
+	import ListSearch from "./reusable/listSearch";
+
+	export default {
+		name: 'TaskDetailView',
+		components: {
+			ListSearch,
+			Reminders,
+			RepeatAfter,
+			RelatedTasks,
+			Attachments,
+			EditAssignees,
+			EditLabels,
+			PercentDoneSelect,
+			PrioritySelect,
+			Comments,
+			flatPickr,
+		},
+		data() {
+			return {
+				taskId: Number(this.$route.params.id),
+				taskService: TaskService,
+				task: TaskModel,
+				relationKinds: relationKinds,
+
+				list: ListModel,
+				namespace: NamespaceModel,
+				showDeleteModal: false,
+				taskTitle: '',
+				descriptionChanged: false,
+
+				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,
+				},
+			}
+		},
+		watch: {
+			'$route': 'loadTask'
+		},
+		created() {
+			this.taskService = new TaskService()
+			this.task = new TaskModel()
+		},
+		mounted() {
+			this.loadTask()
+		},
+		methods: {
+			loadTask() {
+				this.taskId = Number(this.$route.params.id)
+				this.taskService.get({id: this.taskId})
+					.then(r => {
+						this.$set(this, 'task', r)
+						this.setListAndNamespaceTitleFromParent()
+						this.taskTitle = this.task.text
+						this.setActiveFields()
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+			},
+			setActiveFields() {
+
+				this.task.dueDate = +new Date(this.task.dueDate) === 0 ? null : this.task.dueDate
+				this.task.startDate = +new Date(this.task.startDate) === 0 ? null : this.task.startDate
+				this.task.endDate = +new Date(this.task.endDate) === 0 ? null : this.task.endDate
+
+				// 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.text = 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.text !== this.taskTitle) {
+					this.saveTask()
+					this.taskTitle = taskTitle
+				}
+			},
+			saveTask(undoCallback = null) {
+
+				// 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.taskService.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.setActiveFields()
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+			},
+			setListAndNamespaceTitleFromParent() {
+				// FIXME: Throw this away once we have vuex
+				this.$parent.namespaces.forEach(n => {
+					n.lists.forEach(l => {
+						if (l.id === this.task.listId) {
+							this.list = l
+							this.namespace = n
+							return
+						}
+					})
+				})
+			},
+			setFieldActive(fieldName) {
+				this.activeFields[fieldName] = true
+				this.$nextTick(() => this.$refs[fieldName].$el.focus())
+			},
+			deleteTask() {
+				this.taskService.delete(this.task)
+					.then(() => {
+						this.success({message: 'The task been deleted successfully.'}, this)
+						router.push({name: 'showList', params: {id: this.list.id}})
+					})
+					.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>
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@ -1,459 +1,234 @@
 <template>
-    <form @submit.prevent="editTaskSubmit()">
-        <div class="field">
-            <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.text">
-            </div>
-        </div>
-        <div class="field">
-            <label class="label" for="taskdescription">Description</label>
-            <div class="control">
-                <textarea :class="{ 'disabled': taskService.loading}" :disabled="taskService.loading" class="textarea" placeholder="The tasks description goes here..." id="taskdescription" v-model="taskEditTask.description"></textarea>
-            </div>
-        </div>
+	<form @submit.prevent="editTaskSubmit()">
+		<div class="field">
+			<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.text" @change="editTaskSubmit()">
+			</div>
+		</div>
+		<div class="field">
+			<label class="label" for="taskdescription">Description</label>
+			<div class="control">
+				<textarea :class="{ 'disabled': taskService.loading}" :disabled="taskService.loading" class="textarea"
+					placeholder="The tasks description goes here..." id="taskdescription"
+					v-model="taskEditTask.description" @change="editTaskSubmit()">
+				</textarea>
+			</div>
+		</div>

-        <b>Reminder Dates</b>
-        <div class="reminder-input" :class="{ 'overdue': (r < nowUnix && index !== (taskEditTask.reminderDates.length - 1))}" v-for="(r, index) in taskEditTask.reminderDates" :key="index">
-            <flat-pickr
-                    :class="{ 'disabled': taskService.loading}"
-                    :disabled="taskService.loading"
-                    :v-model="taskEditTask.reminderDates"
-                    :config="flatPickerConfig"
-                    :id="'taskreminderdate' + index"
-                    :value="r"
-                    :data-index="index"
-                    placeholder="Add a new reminder...">
-            </flat-pickr>
-            <a v-if="index !== (taskEditTask.reminderDates.length - 1)" @click="removeReminderByIndex(index)"><icon icon="times"></icon></a>
-        </div>
+		<b>Reminder Dates</b>
+		<reminders v-model="taskEditTask.reminderDates" @change="editTaskSubmit()"/>

-        <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"
-                        id="taskduedate"
-                        placeholder="The tasks due date is here...">
-                </flat-pickr>
-            </div>
-        </div>
+		<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...">
+				</flat-pickr>
+			</div>
+		</div>

-        <div class="field">
-            <label class="label" for="">Duration</label>
-            <div class="control columns">
-                <div class="column">
-                    <flat-pickr
-                            :class="{ 'disabled': taskService.loading}"
-                            class="input"
-                            :disabled="taskService.loading"
-                            v-model="taskEditTask.startDate"
-                            :config="flatPickerConfig"
-                            id="taskduedate"
-                            placeholder="Start date">
-                    </flat-pickr>
-                </div>
-                <div class="column">
-                    <flat-pickr
-                            :class="{ 'disabled': taskService.loading}"
-                            class="input"
-                            :disabled="taskService.loading"
-                            v-model="taskEditTask.endDate"
-                            :config="flatPickerConfig"
-                            id="taskduedate"
-                            placeholder="End date">
-                    </flat-pickr>
-                </div>
-            </div>
-        </div>
+		<div class="field">
+			<label class="label" for="">Duration</label>
+			<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">
+					</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">
+					</flat-pickr>
+				</div>
+			</div>
+		</div>

-        <div class="field">
-            <label class="label" for="">Repeat after</label>
-            <div class="control repeat-after-input columns">
-                <div class="column">
-                    <input class="input" placeholder="Specify an amount..." v-model="taskEditTask.repeatAfter.amount"/>
-                </div>
-                <div class="column is-3">
-                    <div class="select">
-                        <select v-model="taskEditTask.repeatAfter.type">
-                            <option value="hours">Hours</option>
-                            <option value="days">Days</option>
-                            <option value="weeks">Weeks</option>
-                            <option value="months">Months</option>
-                            <option value="years">Years</option>
-                        </select>
-                    </div>
-                </div>
-            </div>
-        </div>
+		<div class="field">
+			<label class="label" for="">Repeat after</label>
+			<repeat-after v-model="taskEditTask.repeatAfter" @change="editTaskSubmit()"/>
+		</div>

-        <div class="field">
-            <label class="label" for="">Priority</label>
-            <div class="control priority-select">
-                <div class="select">
-                    <select v-model="taskEditTask.priority">
-                        <option :value="priorities.UNSET">Unset</option>
-                        <option :value="priorities.LOW">Low</option>
-                        <option :value="priorities.MEDIUM">Medium</option>
-                        <option :value="priorities.HIGH">High</option>
-                        <option :value="priorities.URGENT">Urgent</option>
-                        <option :value="priorities.DO_NOW">DO NOW</option>
-                    </select>
-                </div>
-            </div>
-        </div>
+		<div class="field">
+			<label class="label" for="">Priority</label>
+			<div class="control priority-select">
+				<priority-select v-model="taskEditTask.priority" @change="editTaskSubmit()"/>
+			</div>
+		</div>

-        <div class="field">
-            <label class="label">Color</label>
-            <div class="control">
-                <verte
-                        v-model="taskEditTask.hexColor"
-                        menuPosition="top"
-                        picker="square"
-                        model="hex"
-                        :enableAlpha="false"
-                        :rgbSliders="true">
-                </verte>
-            </div>
-        </div>
+		<div class="field">
+			<label class="label">Percent Done</label>
+			<div class="control">
+				<percent-done-select v-model="taskEditTask.percentDone" @change="editTaskSubmit()"/>
+			</div>
+		</div>

-        <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}}
-                    <a @click="deleteAssigneeByIndex(index)"><icon icon="times"/></a>
-                </li>
-            </ul>
-        </div>
+		<div class="field">
+			<label class="label">Color</label>
+			<div class="control">
+				<verte
+						v-model="taskEditTask.hexColor"
+						menuPosition="top"
+						picker="square"
+						model="hex"
+						:enableAlpha="false"
+						:rgbSliders="true"
+						@change="editTaskSubmit()"
+				/>
+			</div>
+		</div>

-        <div class="field has-addons">
-            <div class="control is-expanded">
-                <multiselect
-                        v-model="newAssignee"
-                        :options="foundUsers"
-                        :multiple="false"
-                        :searchable="true"
-                        :loading="listUserService.loading"
-                        :internal-search="true"
-                        @search-change="findUser"
-                        placeholder="Type to search"
-                        label="username"
-                        track-by="id">
-                    <template slot="clear" slot-scope="props">
-                        <div class="multiselect__clear" v-if="newAssignee !== null && newAssignee.id !== 0" @mousedown.prevent.stop="clearAllFoundUsers(props.search)"></div>
-                    </template>
-                    <span slot="noResult">Oops! No user found. Consider changing the search query.</span>
-                </multiselect>
-            </div>
-            <div class="control">
-                <a @click="addAssignee" class="button is-primary fullheight">
-                                    <span class="icon is-small">
-                                        <icon icon="plus"/>
-                                    </span>
-                </a>
-            </div>
-        </div>
+		<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}}
+					<a @click="deleteAssigneeByIndex(index)">
+						<icon icon="times"/>
+					</a>
+				</li>
+			</ul>
+		</div>

-        <div class="field">
-            <label class="label">Labels</label>
-            <div class="control">
-                <multiselect
-                        :multiple="true"
-                        :close-on-select="false"
-                        :clear-on-select="true"
-                        :options-limit="300"
-                        :hide-selected="true"
-                        v-model="taskEditTask.labels"
-                        :options="foundLabels"
-                        :searchable="true"
-                        :loading="labelService.loading || labelTaskService.loading"
-                        :internal-search="true"
-                        @search-change="findLabel"
-                        @select="addLabel"
-                        placeholder="Type to search"
-                        label="title"
-                        track-by="id"
-                        :taggable="true"
-                        @tag="createAndAddLabel"
-                        tag-placeholder="Add this as new label"
-                >
-                    <template slot="tag" slot-scope="{ option, remove }">
-                                        <span class="tag" :style="{'background': option.hex_color, 'color': option.textColor}">
-                                            <span>{{ option.title }}</span>
-                                            <a class="delete is-small" @click="removeLabel(option)"></a>
-                                        </span>
-                    </template>
-                    <template slot="clear" slot-scope="props">
-                        <div class="multiselect__clear" v-if="taskEditTask.labels.length" @mousedown.prevent.stop="clearAllLabels(props.search)"></div>
-                    </template>
-                </multiselect>
-            </div>
-        </div>
+		<div class="field has-addons">
+			<div class="control is-expanded">
+				<edit-assignees :task-id="taskEditTask.id" :list-id="taskEditTask.listId" :initial-assignees="taskEditTask.assignees"/>
+			</div>
+		</div>

-        <div class="field">
-            <label class="label" for="subtasks">Subtasks</label>
-            <div class="tasks noborder" v-if="taskEditTask.subtasks && taskEditTask.subtasks.length > 0">
-                <div class="task" v-for="s in taskEditTask.subtasks" :key="s.id">
-                    <label :for="s.id">
-                        <div class="fancycheckbox">
-                            <input @change="markAsDone" type="checkbox" :id="s.id" :checked="s.done" style="display: none;">
-                            <label  :for="s.id" 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>
-                                    <polyline points="1 9 7 14 15 4"></polyline>
-                                </svg>
-                            </label>
-                        </div>
-                        <span class="tasktext" :class="{ 'done': s.done}">
-                                            {{s.text}}
-                                        </span>
-                    </label>
-                </div>
-            </div>
-        </div>
-        <div class="field has-addons">
-            <div class="control is-expanded">
-                <input @keyup.enter="addSubtask()" :class="{ 'disabled': taskService.loading}" :disabled="taskService.loading" class="input" type="text" id="tasktext" placeholder="New subtask" v-model="newTask.text"/>
-            </div>
-            <div class="control">
-                <a class="button is-primary" @click="addSubtask()"><icon icon="plus"></icon></a>
-            </div>
-        </div>
+		<div class="field">
+			<label class="label">Labels</label>
+			<div class="control">
+				<edit-labels :task-id="taskEditTask.id" v-model="taskEditTask.labels"/>
+			</div>
+		</div>

-        <button type="submit" class="button is-success is-fullwidth" :class="{ 'is-loading': taskService.loading}">
-            Save
-        </button>
+		<related-tasks
+			class="is-narrow"
+			:task-id="task.id"
+			:list-id="task.listId"
+			:initial-related-tasks="task.relatedTasks"
+		/>

-    </form>
+		<button type="submit" class="button is-success is-fullwidth" :class="{ 'is-loading': taskService.loading}">
+			Save
+		</button>
+
+	</form>
 </template>

 <script>
-    import message from '../../message'
-    import flatPickr from 'vue-flatpickr-component'
-    import 'flatpickr/dist/flatpickr.css'
-    import multiselect from 'vue-multiselect'
-    import {differenceWith} from 'lodash'
+	import flatPickr from 'vue-flatpickr-component'
+	import 'flatpickr/dist/flatpickr.css'
 	import verte from 'verte'
 	import 'verte/dist/verte.css'

-    import ListService from '../../services/list'
-    import TaskService from '../../services/task'
-    import TaskModel from '../../models/task'
-    import UserModel from '../../models/user'
-    import ListUserService from '../../services/listUsers'
-    import priorities from '../../models/priorities'
-    import LabelTaskService from '../../services/labelTask'
-    import LabelService from '../../services/label'
-    import LabelTaskModel from '../../models/labelTask'
-    import LabelModel from '../../models/label'
+	import ListService from '../../services/list'
+	import TaskService from '../../services/task'
+	import TaskModel from '../../models/task'
+	import priorities from '../../models/priorities'
+	import PrioritySelect from './reusable/prioritySelect'
+	import PercentDoneSelect from './reusable/percentDoneSelect'
+	import EditLabels from './reusable/editLabels'
+	import EditAssignees from './reusable/editAssignees'
+	import RelatedTasks from './reusable/relatedTasks'
+	import RepeatAfter from './reusable/repeatAfter'
+	import Reminders from './reusable/reminders'

-    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: {},
-                newTask: TaskModel,
-                isTaskEdit: false,
-                taskEditTask: TaskModel,
-                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,
-                },
-
-                newAssignee: UserModel,
-                listUserService: ListUserService,
-                foundUsers: [],
-
-                labelService: LabelService,
-                labelTaskService: LabelTaskService,
-                foundLabels: [],
-                labelTimeout: null,
-            }
-        },
-        components: {
-            flatPickr,
-            multiselect,
-            verte,
-        },
-        props: {
-            task: {
-                type: TaskModel,
-                required: true,
-            }
-        },
-        watch: {
-            task() {
-                this.taskEditTask = this.task
-            }
-        },
-        created() {
-            this.listService = new ListService()
-            this.taskService = new TaskService()
-            this.newTask = new TaskModel()
-            this.listUserService = new ListUserService()
-            this.newAssignee = new UserModel()
-            this.labelService = new LabelService()
-            this.labelTaskService = new LabelTaskService()
-            this.taskEditTask = this.task
-        },
-        methods: {
-            editTaskSubmit() {
-                this.taskService.update(this.taskEditTask)
-                    .then(r => {
-                        this.$set(this, 'taskEditTask', r)
-                        message.success({message: 'The task was successfully updated.'}, this)
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            },
-            addSubtask() {
-                this.newTask.parentTaskID = this.taskEditTask.id
-                this.newTask.listID = this.$route.params.id
-                this.taskService.create(this.newTask)
-                    .then(r => {
-                        this.list.addTaskToList(r)
-                        message.success({message: 'The task was successfully created.'}, this)
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-
-                this.newTask = {}
-            },
-            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.taskEditTask.reminderDates[index] = newDate
-
-                let lastIndex = this.taskEditTask.reminderDates.length - 1
-                // put a new null at the end if we changed something
-                if (lastIndex === index && !isNaN(newDate)) {
-                    this.taskEditTask.reminderDates.push(null)
-                }
-            },
-            removeReminderByIndex(index) {
-                this.taskEditTask.reminderDates.splice(index, 1)
-                // Reset the last to 0 to have the "add reminder" button
-                this.taskEditTask.reminderDates[this.taskEditTask.reminderDates.length - 1] = null
-            },
-            addAssignee() {
-                this.taskEditTask.assignees.push(this.newAssignee)
-            },
-            deleteAssigneeByIndex(index) {
-                this.taskEditTask.assignees.splice(index, 1)
-            },
-            findUser(query) {
-                if(query === '') {
-                    this.clearAllFoundUsers()
-                    return
-                }
-
-                this.listUserService.getAll({listID: this.$route.params.id}, {s: query})
-                    .then(response => {
-                        // Filter the results to not include users who are already assigned
-                        this.$set(this, 'foundUsers', differenceWith(response, this.taskEditTask.assignees, (first, second) => {
-                            return first.id === second.id
-                        }))
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            },
-            clearAllFoundUsers () {
-                this.$set(this, 'foundUsers', [])
-            },
-            findLabel(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.taskEditTask.labels, (first, second) => {
-                                return first.id === second.id
-                            }))
-                            this.labelTimeout = null
-                        })
-                        .catch(e => {
-                            message.error(e, this)
-                        })
-                }, 300)
-            },
-            clearAllLabels () {
-                this.$set(this, 'foundLabels', [])
-            },
-            addLabel(label) {
-                let labelTask = new LabelTaskModel({taskID: this.taskEditTask.id, label_id: label.id})
-                this.labelTaskService.create(labelTask)
-                    .then(() => {
-                        message.success({message: 'The label was successfully added.'}, this)
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            },
-            removeLabel(label) {
-                let labelTask = new LabelTaskModel({taskID: this.taskEditTask.id, label_id: label.id})
-                this.labelTaskService.delete(labelTask)
-                    .then(() => {
-                        // Remove the label from the list
-                        for (const l in this.taskEditTask.labels) {
-                            if (this.taskEditTask.labels[l].id === label.id) {
-                                this.taskEditTask.labels.splice(l, 1)
-                            }
-                        }
-                        message.success({message: 'The label was successfully removed.'}, this)
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            },
-            createAndAddLabel(title) {
-                let newLabel = new LabelModel({title: title})
-                this.labelService.create(newLabel)
-                    .then(r => {
-                        this.addLabel(r)
-                        this.taskEditTask.labels.push(r)
-                    })
-                    .catch(e => {
-                        message.error(e, this)
-                    })
-            }
-        },
-    }
+				priorities: priorities,
+				list: {},
+				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: {
+			Reminders,
+			RepeatAfter,
+			RelatedTasks,
+			EditAssignees,
+			EditLabels,
+			PercentDoneSelect,
+			PrioritySelect,
+			flatPickr,
+			verte,
+		},
+		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()
+			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
+			},
+			editTaskSubmit() {
+				this.taskService.update(this.taskEditTask)
+					.then(r => {
+						this.$set(this, 'taskEditTask', r)
+						this.success({message: 'The task was successfully updated.'}, this)
+						this.initTaskFields()
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+			},
+		},
+	}
 </script>

 <style scoped>
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@ -29,8 +29,8 @@
 				<VueDragResize
 						class="task"
 						:class="{'done': t.done, 'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id, 'has-light-text': !t.hasDarkColor(), 'has-dark-text': t.hasDarkColor()}"
-                        :style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
-                        :isActive="true"
+						:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
+						:isActive="true"
 						:x="t.offsetDays * dayWidth - 6"
 						:y="0"
 						:w="t.durationDays * dayWidth"
@ -44,29 +44,19 @@
 						:parentW="fullWidth"
 						@resizestop="resizeTask"
 						@dragstop="resizeTask"
-						@clicked="taskDragged = t"
+						@clicked="setTaskDragged(t)"
 				>
-                    <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.text}}</span>
-					<span v-if="t.priority >= priorities.HIGH" class="high-priority" :class="{'not-so-high': t.priority === priorities.HIGH}">
-						<span class="icon">
-							<icon icon="exclamation"/>
-						</span>
-						<template v-if="t.priority === priorities.HIGH">High</template>
-						<template v-if="t.priority === priorities.URGENT">Urgent</template>
-						<template v-if="t.priority === priorities.DO_NOW">DO NOW</template>
-						<span class="icon" v-if="t.priority === priorities.DO_NOW">
-							<icon icon="exclamation"/>
-						</span>
-					</span>
+					<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.text}}</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">
-                        <icon icon="pen"/>
-                    </a>
-                 </VueDragResize>
+					<a @click="editTask(theTasks[k])" class="edit-toggle">
+						<icon icon="pen"/>
+					</a>
+				</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)'}">
@ -85,7 +75,7 @@
 							:parentW="fullWidth"
 							@resizestop="resizeTask"
 							@dragstop="resizeTask"
-							@clicked="taskDragged = t"
+							@clicked="setTaskDragged(t)"
 							v-tooltip="'This task has no dates set.'"
 					>
 						<span>{{t.text}}</span>
@ -136,17 +126,19 @@

 <script>
 	import VueDragResize from 'vue-drag-resize'
-	import message from '../../message'
 	import EditTask from './edit-task'

 	import TaskService from '../../services/task'
 	import TaskModel from '../../models/task'
 	import ListModel from '../../models/list'
 	import priorities from '../../models/priorities'
+	import PriorityLabel from './reusable/priorityLabel'
+	import TaskCollectionService from '../../services/taskCollection'

 	export default {
 		name: 'GanttChart',
 		components: {
+			PriorityLabel,
 			EditTask,
 			VueDragResize,
 		},
@ -183,17 +175,15 @@
 				fullWidth: 0,
 				now: null,
 				dayOffsetUntilToday: 0,
-                isTaskEdit: false,
+				isTaskEdit: false,
 				taskToEdit: null,
 				newTaskTitle: '',
 				newTaskFieldActive: false,
 				priorities: {},
+				taskCollectionService: TaskCollectionService,
 			}
 		},
 		watch: {
-			list() {
-				this.parseTasks()
-			},
 			dateFrom() {
 				this.buildTheGanttChart()
 			},
@ -201,10 +191,13 @@
 				this.buildTheGanttChart()
 			},
 		},
-		beforeMount() {
+		created() {
 			this.now = new Date()
+			this.taskCollectionService = new TaskCollectionService()
 			this.taskService = new TaskService()
 			this.priorities = priorities
+		},
+		mounted() {
 			this.buildTheGanttChart()
 		},
 		methods: {
@ -240,22 +233,46 @@
 				this.prepareTasks()
 			},
 			prepareTasks() {
-				this.theTasks = this.list.tasks
-					.filter(t => {
-						if(t.startDate === null && !t.done) {
-							this.tasksWithoutDates.push(t)
-						}
-						return t.startDate >= this.startDate && t.endDate <= this.endDate
+
+				const getAllTasks = (page = 1) => {
+					return this.taskCollectionService.getAll({listId: this.$route.params.id}, {}, 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)
+						})
+				}
+
+				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
+							})
+							.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
+							})
 					})
-					.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
+					.catch(e => {
+						this.error(e, this)
 					})
 			},
 			addGantAttributes(t) {
@ -264,6 +281,9 @@
 				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
@ -287,6 +307,17 @@
 					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
@ -294,28 +325,30 @@
 								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.theTasks[tt] = this.addGantAttributes(r)
+										this.$set(this.theTasks, tt, this.addGantAttributes(r))
+										break
 									}
 								}
 							}

-							message.success({message: 'The task was successfully updated.'}, this)
+							this.success({message: 'The task was successfully updated.'}, this)
 						})
 						.catch(e => {
-							message.error(e, this)
+							this.error(e, this)
 						})
 				}, 100)
 			},
-            editTask(task) {
+			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
@ -334,16 +367,16 @@
 				if (!this.newTaskFieldActive) {
 					return
 				}
-				let task = new TaskModel({text: this.newTaskTitle, listID: this.list.id})
+				let task = new TaskModel({text: this.newTaskTitle, listId: this.list.id})
 				this.taskService.create(task)
 					.then(r => {
 						this.tasksWithoutDates.push(this.addGantAttributes(r))
 						this.newTaskTitle = ''
 						this.hideCrateNewTask()
-						message.success({message: 'The task was successfully created.'}, this)
+						this.success({message: 'The task was successfully created.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 		},
--- a/src/components/tasks/helpers/taskList.js
+++ b/src/components/tasks/helpers/taskList.js
@ -0,0 +1,133 @@
+import TaskCollectionService from '../../../services/taskCollection'
+
+/**
+ * This mixin provides a base set of methods and properties to get tasks on a list.
+ */
+export default {
+	data() {
+		return {
+			taskCollectionService: TaskCollectionService,
+			tasks: [],
+
+			pages: [],
+			currentPage: 0,
+
+			showTaskSearch: false,
+			searchTerm: '',
+		}
+	},
+	watch: {
+		'$route.query': 'loadTasksForPage', // Only listen for query path changes
+	},
+	beforeMount() {
+		// Triggering loading the tasks in beforeMount lets the component maintain the current page, therefore the page
+		// is not lost after navigating back from a task detail page for example.
+		this.loadTasksForPage(this.$route.query)
+	},
+	created() {
+		this.taskCollectionService = new TaskCollectionService()
+	},
+	methods: {
+		loadTasks(page, search = '', params = {sort_by: ['done', 'id'], order_by: ['asc', 'desc']}) {
+			if (search !== '') {
+				params.s = search
+			}
+			this.taskCollectionService.getAll({listId: this.$route.params.id}, params, page)
+				.then(r => {
+					this.$set(this, 'tasks', r)
+					this.$set(this, 'pages', [])
+					this.currentPage = page
+
+					for (let i = 0; i < this.taskCollectionService.totalPages; i++)  {
+
+						// Show ellipsis instead of all pages
+						if(
+							i > 0 && // Always at least the first page
+							(i + 1) < this.taskCollectionService.totalPages && // And the last page
+							(
+								// And the current with current + 1 and current - 1
+								(i + 1) > this.currentPage + 1 ||
+								(i + 1) < this.currentPage - 1
+							)
+						) {
+							// Only add an ellipsis if the last page isn't already one
+							if(this.pages[i - 1] && !this.pages[i - 1].isEllipsis) {
+								this.pages.push({
+									number: 0,
+									isEllipsis: true,
+								})
+							}
+							continue
+						}
+
+						this.pages.push({
+							number: i + 1,
+							isEllipsis: false,
+						})
+					}
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		loadTasksForPage(e) {
+			// The page parameter can be undefined, in the case where the user loads a new list from the side bar menu
+			let page = Number(e.page)
+			if (typeof e.page === 'undefined') {
+				page = 1
+			}
+			let search = e.search
+			if (typeof e.search === 'undefined') {
+				search = ''
+			}
+			this.initTasks(page, search)
+		},
+		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
+			})
+		},
+		searchTasks() {
+			if (this.searchTerm === '') {
+				return
+			}
+			this.$router.push({
+				name: 'showList',
+				query: {search: this.searchTerm}
+			})
+		},
+		hideSearchBar() {
+			// This is a workaround.
+			// When clicking on the search button, @blur from the input is fired. If we
+			// would then directly hide the whole search bar directly, no click event
+			// from the button gets fired. To prevent this, we wait 200ms until we hide
+			// everything so the button has a chance of firering the search event.
+			setTimeout(() => {
+				this.showTaskSearch = false
+			}, 200)
+		},
+		getRouteForPagination(page = 1, type = 'list') {
+			return {
+				name: 'showListWithType',
+				params: {
+					type: type
+				},
+				query: {
+					page: page,
+				},
+			}
+		}
+	}
+}
--- a/src/components/tasks/reusable/attachments.vue
+++ b/src/components/tasks/reusable/attachments.vue
@ -0,0 +1,196 @@
+<template>
+	<div class="attachments">
+		<h3>
+			<span class="icon is-grey">
+				<icon icon="paperclip"/>
+			</span>
+			Attachments
+			<a
+					class="button is-primary is-outlined is-small noshadow"
+					@click="$refs.files.click()"
+					:disabled="attachmentService.loading">
+				<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"/>
+		<progress v-if="attachmentService.uploadProgress > 0" class="progress is-primary" :value="attachmentService.uploadProgress" max="100">{{ attachmentService.uploadProgress }}%</progress>
+
+		<table>
+			<tr>
+				<th>Name</th>
+				<th>Size</th>
+				<th>Type</th>
+				<th>Date</th>
+				<th>Created By</th>
+				<th>Action</th>
+			</tr>
+			<tr class="attachment" v-for="a in attachments" :key="a.id">
+				<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>
+					<div class="buttons has-addons">
+						<a class="button is-primary noshadow" @click="downloadAttachment(a)" v-tooltip="'Download this attachment'">
+							<span class="icon">
+								<icon icon="cloud-download-alt"/>
+							</span>
+						</a>
+						<a class="button is-danger noshadow" v-tooltip="'Delete this attachment'" @click="() => {attachmentToDelete = a; showDeleteModal = true}">
+							<span class="icon">
+								<icon icon="trash-alt"/>
+							</span>
+						</a>
+					</div>
+				</td>
+			</tr>
+		</table>
+
+		<!-- Dropzone -->
+		<div class="dropzone" :class="{ 'hidden': !showDropzone }">
+			<div class="drop-hint">
+				<div class="icon">
+					<icon icon="cloud-upload-alt"/>
+				</div>
+				<div class="hint">
+					Drop files here to upload
+				</div>
+			</div>
+		</div>
+
+		<!-- Delete modal -->
+		<modal
+				v-if="showDeleteModal"
+				@close="showDeleteModal = false"
+				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>
+		</modal>
+	</div>
+</template>
+
+<script>
+	import AttachmentService from '../../../services/attachment'
+	import AttachmentModel from '../../../models/attachment'
+	import User from '../../global/user'
+
+	export default {
+		name: 'attachments',
+		components: {
+			User,
+		},
+		data() {
+			return {
+				attachments: [],
+				attachmentService: AttachmentService,
+				showDropzone: false,
+
+				showDeleteModal: false,
+				attachmentToDelete: AttachmentModel,
+			}
+		},
+		props: {
+			taskId: {
+				required: true,
+				type: Number,
+			},
+			initialAttachments: {
+				type: Array,
+			}
+		},
+		created() {
+			this.attachmentService = new AttachmentService()
+			this.attachments = this.initialAttachments
+		},
+		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
+			})
+		},
+		watch: {
+			initialAttachments(newVal) {
+				this.attachments = newVal
+			},
+		},
+		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.success({message: 'Successfully uploaded ' + a.file.name}, this)
+								this.attachments.push(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 => {
+						// Remove the file from the list
+						for (const a in this.attachments) {
+							if (this.attachments[a].id === this.attachmentToDelete.id) {
+								this.attachments.splice(a, 1)
+							}
+						}
+						this.success(r, this)
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+					.finally(() => {
+						this.showDeleteModal = false
+					})
+			},
+		},
+	}
+</script>
--- a/src/components/tasks/reusable/comments.vue
+++ b/src/components/tasks/reusable/comments.vue
@ -0,0 +1,182 @@
+<template>
+	<div class="content details has-top-border">
+		<h1>
+			<span class="icon is-grey">
+				<icon :icon="['far', 'comments']"/>
+			</span>
+			Comments
+		</h1>
+		<div class="comments">
+			<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">
+				<figure class="media-left">
+					<img class="image is-avatar" :src="c.author.getAvatarUrl(48)" alt="" width="48" height="48"/>
+				</figure>
+				<div class="media-content">
+					<div class="form" v-if="isCommentEdit && commentEdit.id === c.id">
+						<div class="field">
+							<textarea class="textarea" :class="{'is-loading': taskCommentService.loading}" placeholder="Add your comment..." v-model="commentEdit.comment" @keyup.ctrl.enter="editComment()"></textarea>
+						</div>
+						<div class="field">
+							<button class="button is-primary" :class="{'is-loading': taskCommentService.loading}" @click="editComment()" :disabled="commentEdit.comment === ''">Comment</button>
+							<a @click="() => isCommentEdit = false">Cancel</a>
+						</div>
+					</div>
+					<div class="content" v-else>
+						<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>
+						<br/>
+						<p>
+							{{c.comment}}
+						</p>
+						<div class="comment-actions">
+							<a @click="toggleEdit(c)">Edit</a>&nbsp;·&nbsp;
+							<a @click="toggleDelete(c.id)">Remove</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div class="media comment">
+				<figure class="media-left">
+					<img class="image is-avatar" :src="user.infos.getAvatarUrl(48)" alt="" width="48" height="48"/>
+				</figure>
+				<div class="media-content">
+					<div class="form">
+						<div class="field">
+							<textarea class="textarea" :class="{'is-loading': taskCommentService.loading && !isCommentEdit}" placeholder="Add your comment..." v-model="newComment.comment" @keyup.ctrl.enter="addComment()"></textarea>
+						</div>
+						<div class="field">
+							<button class="button is-primary" :class="{'is-loading': taskCommentService.loading && !isCommentEdit}" @click="addComment()" :disabled="newComment.comment === ''">Comment</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<modal
+				v-if="showDeleteModal"
+				@close="showDeleteModal = false"
+				@submit="deleteComment()">
+			<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>
+		</modal>
+	</div>
+</template>
+
+<script>
+	import TaskCommentService from '../../../services/taskComment'
+	import TaskCommentModel from '../../../models/taskComment'
+	import auth from '../../../auth'
+
+	export default {
+		name: 'comments',
+		props: {
+			taskId: {
+				type: Number,
+				required: true,
+			}
+		},
+		data() {
+			return {
+				comments: [],
+				user: auth.user,
+
+				showDeleteModal: false,
+				commentToDelete: TaskCommentModel,
+
+				isCommentEdit: false,
+				commentEdit: TaskCommentModel,
+
+				taskCommentService: TaskCommentService,
+				newComment: TaskCommentModel,
+			}
+		},
+		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()
+			}
+		},
+		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
+				}
+				this.taskCommentService.create(this.newComment)
+					.then(r => {
+						this.comments.push(r)
+						this.success({message: 'The comment was sucessfully added.'}, this)
+						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)
+							}
+						}
+						this.success({message: 'The comment was successfully updated.'}, this)
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+					.finally(() => {
+						this.isCommentEdit = false
+					})
+			},
+			deleteComment() {
+				this.taskCommentService.delete(this.commentToDelete)
+					.then(r => {
+						for (const a in this.comments) {
+							if (this.comments[a].id === this.commentToDelete.id) {
+								this.comments.splice(a, 1)
+							}
+						}
+						this.success(r, this)
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+					.finally(() => {
+						this.showDeleteModal = false
+					})
+			},
+		},
+	}
+</script>
--- a/src/components/tasks/reusable/date-table-cell.vue
+++ b/src/components/tasks/reusable/date-table-cell.vue
@ -0,0 +1,17 @@
+<template>
+	<td v-tooltip="+date === 0 ? '' : formatDate(date)">
+		{{ +date === 0 ? '-' : formatDateSince(date) }}
+	</td>
+</template>
+
+<script>
+	export default {
+		name: 'date-table-cell',
+		props: {
+			date: {
+				type: Date,
+				required: true,
+			}
+		},
+	}
+</script>
--- a/src/components/tasks/reusable/editAssignees.vue
+++ b/src/components/tasks/reusable/editAssignees.vue
@ -0,0 +1,134 @@
+<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"
+		>
+		<template slot="tag" slot-scope="{ option }">
+			<user :user="option" :show-username="false" :avatar-size="30"/>
+			<a @click="removeAssignee(option)" class="remove-assignee">
+				<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>
+		</template>
+		<span slot="noResult">No user found. Consider changing the search query.</span>
+	</multiselect>
+</template>
+
+<script>
+	import {differenceWith} from 'lodash'
+	import multiselect from 'vue-multiselect'
+
+	import UserModel from '../../../models/user'
+	import ListUserService from '../../../services/listUsers'
+	import TaskAssigneeService from '../../../services/taskAssignee'
+	import TaskAssigneeModel from '../../../models/taskAssignee'
+	import User from '../../global/user'
+
+	export default {
+		name: 'editAssignees',
+		components: {
+			User,
+			multiselect,
+		},
+		props: {
+			taskId: {
+				type: Number,
+				required: true,
+			},
+			listId: {
+				type: Number,
+				required: true,
+			},
+			initialAssignees: {
+				type: Array,
+				default: () => [],
+			}
+		},
+		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) {
+				const taskAssignee = new TaskAssigneeModel({userId: user.id, taskId: this.taskId})
+				this.taskAssigneeService.create(taskAssignee)
+					.then(() => {
+						this.success({message: 'The user was successfully assigned.'}, this)
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+			},
+			removeAssignee(user) {
+				const taskAssignee = new TaskAssigneeModel({userId: user.id, taskId: this.taskId})
+				this.taskAssigneeService.delete(taskAssignee)
+					.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)
+							}
+						}
+						this.success({message: 'The user was successfully unassigned.'}, this)
+					})
+					.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>
--- a/src/components/tasks/reusable/editLabels.vue
+++ b/src/components/tasks/reusable/editLabels.vue
@ -0,0 +1,156 @@
+<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"
+	>
+		<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>
+		<template slot="clear" slot-scope="props">
+			<div class="multiselect__clear" v-if="labels.length"
+				@mousedown.prevent.stop="clearAllLabels(props.search)"></div>
+		</template>
+	</multiselect>
+</template>
+
+<script>
+	import { differenceWith } from 'lodash'
+	import multiselect from 'vue-multiselect'
+
+	import LabelService from '../../../services/label'
+	import LabelModel from '../../../models/label'
+	import LabelTaskService from '../../../services/labelTask'
+	import LabelTaskModel from '../../../models/labelTask'
+
+	export default {
+		name: 'edit-labels',
+		props: {
+			value: {
+				default: () => [],
+				type: Array,
+			},
+			taskId: {
+				type: Number,
+				required: true,
+			},
+		},
+		data() {
+			return {
+				labelService: LabelService,
+				labelTaskService: LabelTaskService,
+				foundLabels: [],
+				labelTimeout: null,
+				labels: [],
+				searchQuery: '',
+			}
+		},
+		components: {
+			multiselect,
+		},
+		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
+				}
+
+				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) {
+				let labelTask = new LabelTaskModel({taskId: this.taskId, labelId: label.id})
+				this.labelTaskService.create(labelTask)
+					.then(() => {
+						this.success({message: 'The label was successfully added.'}, this)
+						this.$emit('input', this.labels)
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+			},
+			removeLabel(label) {
+				let labelTask = new LabelTaskModel({taskId: this.taskId, labelId: label.id})
+				this.labelTaskService.delete(labelTask)
+					.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 removed.'}, 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>
+
+</style>
--- a/src/components/tasks/reusable/labels.vue
+++ b/src/components/tasks/reusable/labels.vue
@ -0,0 +1,25 @@
+<template>
+	<div class="label-wrapper">
+		<span class="tag" v-for="label in labels" :style="{'background': label.hexColor, 'color': label.textColor}" :key="label.id">
+			<span>{{ label.title }}</span>
+		</span>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'labels',
+		props: {
+			labels: {
+				type: Array,
+				required: true,
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.label-wrapper {
+		display: inline;
+	}
+</style>
--- a/src/components/tasks/reusable/listSearch.vue
+++ b/src/components/tasks/reusable/listSearch.vue
@ -0,0 +1,69 @@
+<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
+	>
+		<template slot="clear" slot-scope="props">
+			<div class="multiselect__clear" v-if="list !== null && list.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
+		</template>
+		<span slot="noResult">No list found. Consider changing the search query.</span>
+	</multiselect>
+</template>
+
+<script>
+	import ListService from '../../../services/list'
+	import ListModel from '../../../models/list'
+	import multiselect from 'vue-multiselect'
+
+	export default {
+		name: 'listSearch',
+		data() {
+			return {
+				listSerivce: ListService,
+				list: ListModel,
+				foundLists: [],
+			}
+		},
+		components: {
+			multiselect,
+		},
+		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)
+			},
+		},
+	}
+</script>
--- a/src/components/tasks/reusable/percentDoneSelect.vue
+++ b/src/components/tasks/reusable/percentDoneSelect.vue
@ -0,0 +1,49 @@
+<template>
+	<div class="select">
+		<select v-model.number="percentDone" @change="updateData">
+			<option value="0">0%</option>
+			<option value="0.1">10%</option>
+			<option value="0.2">20%</option>
+			<option value="0.3">30%</option>
+			<option value="0.4">40%</option>
+			<option value="0.5">50%</option>
+			<option value="0.6">60%</option>
+			<option value="0.7">70%</option>
+			<option value="0.8">80%</option>
+			<option value="0.9">90%</option>
+			<option value="1">100%</option>
+		</select>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'percentDoneSelect',
+		data() {
+			return {
+				percentDone: 0,
+			}
+		},
+		props: {
+			value: {
+				default: 0,
+				type: Number,
+			}
+		},
+		watch: {
+			// Set the priority to the :value every time it changes from the outside
+			value(newVal) {
+				this.percentDone = newVal
+			},
+		},
+		mounted() {
+			this.percentDone = this.value
+		},
+		methods: {
+			updateData() {
+				this.$emit('input', this.percentDone)
+				this.$emit('change')
+			}
+		},
+	}
+</script>
--- a/src/components/tasks/reusable/priorityLabel.vue
+++ b/src/components/tasks/reusable/priorityLabel.vue
@ -0,0 +1,58 @@
+<template>
+	<span v-if="showAll || priority >= priorities.HIGH" :class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}">
+		<span class="icon" v-if="priority >= priorities.HIGH">
+			<icon icon="exclamation"/>
+		</span>
+		<template v-if="priority === priorities.UNSET">Unset</template>
+		<template v-if="priority === priorities.LOW">Low</template>
+		<template v-if="priority === priorities.MEDIUM">Medium</template>
+		<template v-if="priority === priorities.HIGH">High</template>
+		<template v-if="priority === priorities.URGENT">Urgent</template>
+		<template v-if="priority === priorities.DO_NOW">DO NOW</template>
+		<span class="icon" v-if="priority === priorities.DO_NOW">
+			<icon icon="exclamation"/>
+		</span>
+	</span>
+</template>
+
+<script>
+	import priorites from '../../../models/priorities'
+
+	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';
+
+	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;
+		}
+	}
+</style>
--- a/src/components/tasks/reusable/prioritySelect.vue
+++ b/src/components/tasks/reusable/prioritySelect.vue
@ -0,0 +1,47 @@
+<template>
+	<div class="select">
+		<select v-model="priority" @change="updateData">
+			<option :value="priorities.UNSET">Unset</option>
+			<option :value="priorities.LOW">Low</option>
+			<option :value="priorities.MEDIUM">Medium</option>
+			<option :value="priorities.HIGH">High</option>
+			<option :value="priorities.URGENT">Urgent</option>
+			<option :value="priorities.DO_NOW">DO NOW</option>
+		</select>
+	</div>
+</template>
+
+<script>
+	import priorites from '../../../models/priorities'
+
+	export default {
+		name: 'prioritySelect',
+		data() {
+			return {
+				priorities: priorites,
+				priority: 0,
+			}
+		},
+		props: {
+			value: {
+				default: 0,
+				type: Number,
+			}
+		},
+		watch: {
+			// Set the priority to the :value every time it changes from the outside
+			value(newVal) {
+				this.priority = newVal
+			},
+		},
+		mounted() {
+			this.priority = this.value
+		},
+		methods: {
+			updateData() {
+				this.$emit('input', this.priority)
+				this.$emit('change')
+			}
+		},
+	}
+</script>
--- a/src/components/tasks/reusable/relatedTasks.vue
+++ b/src/components/tasks/reusable/relatedTasks.vue
@ -0,0 +1,220 @@
+<template>
+	<div class="task-relations">
+		<label class="label">New Task Relation</label>
+		<div class="columns">
+			<div class="column is-three-quarters">
+				<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="text"
+						track-by="id"
+						:taggable="true"
+						:showNoOptions="false"
+						@tag="createAndRelateTask"
+						tag-placeholder="Add this as new related task"
+				>
+					<template slot="clear" slot-scope="props">
+						<div class="multiselect__clear"
+							v-if="newTaskRelationTask !== null && newTaskRelationTask.id !== 0"
+							@mousedown.prevent.stop="clearAllFoundTasks(props.search)"></div>
+					</template>
+					<span slot="noResult">No task found. Consider changing the search query.</span>
+				</multiselect>
+			</div>
+			<div class="column field has-addons">
+				<div class="control is-expanded">
+					<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">
+								{{ label[0] }}
+							</option>
+						</select>
+					</div>
+				</div>
+				<div class="control">
+					<a class="button is-primary" @click="addTaskRelation()">Add task Relation</a>
+				</div>
+			</div>
+		</div>
+
+		<div class="related-tasks" v-for="(rts, kind ) in relatedTasks" :key="kind">
+			<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">
+						<router-link :to="{ name: 'taskDetailView', params: { id: t.id } }">
+							<span class="tasktext" :class="{ 'done': t.done}">
+								{{t.text}}
+							</span>
+						</router-link>
+						<a class="remove" @click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}">
+							<icon icon="trash-alt"/>
+						</a>
+					</div>
+				</div>
+			</template>
+		</div>
+		<p v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0" class="none">
+			No task relations yet.
+		</p>
+
+		<!-- Delete modal -->
+		<modal
+				v-if="showDeleteModal"
+				@close="showDeleteModal = false"
+				@submit="removeTaskRelation()">
+			<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>
+		</modal>
+	</div>
+</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 multiselect from 'vue-multiselect'
+
+	export default {
+		name: 'relatedTasks',
+		data() {
+			return {
+				relatedTasks: {},
+				taskService: TaskService,
+				foundTasks: [],
+				relationKinds: relationKinds,
+				newTaskRelationTask: TaskModel,
+				newTaskRelationKind: 'related',
+				taskRelationService: TaskRelationService,
+				showDeleteModal: false,
+				relationToDelete: {},
+			}
+		},
+		components: {
+			multiselect,
+		},
+		props: {
+			taskId: {
+				type: Number,
+				required: true,
+			},
+			initialRelatedTasks: {
+				type: Object,
+				default: () => {
+				},
+			},
+			showNoRelationsNotice: {
+				type: Boolean,
+				default: false,
+			},
+			listId: {
+				type: Number,
+				default: 0,
+			}
+		},
+		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.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()
+						this.success({message: 'The task relation was created successfully'}, this)
+					})
+					.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(r => {
+						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)
+								}
+							}
+						})
+						this.success(r, this)
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+					.finally(() => {
+						this.showDeleteModal = false
+					})
+			},
+			createAndRelateTask(text) {
+				const newTask = new TaskModel({text: text, 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>
--- a/src/components/tasks/reusable/reminders.vue
+++ b/src/components/tasks/reusable/reminders.vue
@ -0,0 +1,96 @@
+<template>
+	<div class="reminders">
+		<div class="reminder-input"
+			:class="{ 'overdue': (r < nowUnix && index !== (reminders.length - 1))}"
+			v-for="(r, index) in reminders" :key="index">
+			<flat-pickr
+					:v-model="reminders"
+					:config="flatPickerConfig"
+					:id="'taskreminderdate' + index"
+					:value="r"
+					:data-index="index"
+					placeholder="Add a new reminder..."
+			>
+			</flat-pickr>
+			<a v-if="index !== (reminders.length - 1)" @click="removeReminderByIndex(index)">
+				<icon icon="times"></icon>
+			</a>
+		</div>
+	</div>
+</template>
+
+<script>
+	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,
+				},
+			}
+		},
+		props: {
+			value: {
+				default: () => [],
+				type: Array,
+			}
+		},
+		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 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()
+			},
+		},
+	}
+</script>
--- a/src/components/tasks/reusable/repeatAfter.vue
+++ b/src/components/tasks/reusable/repeatAfter.vue
@ -0,0 +1,61 @@
+<template>
+	<div class="control repeat-after-input columns">
+		<div class="column">
+			<p>
+				Each
+			</p>
+		</div>
+		<div class="column is-two-fifths">
+			<input class="input" placeholder="Specify an amount..." v-model="repeatAfter.amount" @change="updateData"/>
+		</div>
+		<div class="column is-two-fifths">
+			<div class="select">
+				<select v-model="repeatAfter.type" @change="updateData">
+					<option value="hours">Hours</option>
+					<option value="days">Days</option>
+					<option value="weeks">Weeks</option>
+					<option value="months">Months</option>
+					<option value="years">Years</option>
+				</select>
+			</div>
+		</div>
+	</div>
+
+</template>
+
+<script>
+	export default {
+		name: 'repeatAfter',
+		data() {
+			return {
+				repeatAfter: {},
+			}
+		},
+		props: {
+			value: {
+				default: () => {},
+				required: true,
+			}
+		},
+		watch: {
+			value(newVal) {
+				this.repeatAfter = newVal
+			},
+		},
+		mounted() {
+			this.repeatAfter = this.value
+		},
+		methods: {
+			updateData() {
+				this.$emit('input', this.repeatAfter)
+				this.$emit('change')
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	p {
+		padding-top: 6px;
+	}
+</style>
--- a/src/components/tasks/reusable/singleTaskInList.vue
+++ b/src/components/tasks/reusable/singleTaskInList.vue
@ -0,0 +1,107 @@
+<template>
+	<span>
+		<fancycheckbox v-model="task.done" @change="markAsDone" :disabled="isArchived"/>
+		<router-link :to="{ name: 'taskDetailView', params: { id: task.id } }" class="tasktext"  :class="{ 'done': task.done}">
+			<!-- Show any parent tasks to make it clear this task is a sub task of something -->
+			<span class="parent-tasks" v-if="typeof task.relatedTasks.parenttask !== 'undefined'">
+				<template v-for="(pt, i) in task.relatedTasks.parenttask">
+					{{ pt.text }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
+				</template>
+				>
+			</span>
+			{{ task.text }}
+			<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"
+			/>
+			<i v-if="task.dueDate > 0"
+				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
+				v-tooltip="formatDate(task.dueDate)"> - Due {{formatDateSince(task.dueDate)}}</i>
+			<priority-label :priority="task.priority"/>
+		</router-link>
+	</span>
+</template>
+
+<script>
+	import TaskModel from '../../../models/task'
+	import PriorityLabel from './priorityLabel'
+	import TaskService from '../../../services/task'
+	import Labels from './labels'
+	import User from '../../global/user'
+	import Fancycheckbox from '../../global/fancycheckbox'
+
+	export default {
+		name: 'singleTaskInList',
+		data() {
+			return {
+				taskService: TaskService,
+				task: TaskModel,
+			}
+		},
+		components: {
+			Fancycheckbox,
+			User,
+			Labels,
+			PriorityLabel,
+		},
+		props: {
+			theTask: {
+				type: TaskModel,
+				required: true,
+			},
+			isArchived: {
+				type: Boolean,
+				default: false,
+			},
+		},
+		watch: {
+			theTask(newVal) {
+				this.task = newVal
+			},
+		},
+		mounted() {
+			this.task = this.theTask
+		},
+		created() {
+			this.task = new TaskModel()
+			this.taskService = new TaskService()
+		},
+		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
+				}
+			},
+		},
+	}
+</script>
--- a/src/components/tasks/reusable/sort.vue
+++ b/src/components/tasks/reusable/sort.vue
@ -0,0 +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" v-else/>
+	</a>
+</template>
+
+<script>
+	export default {
+		name: 'sort',
+		props: {
+			order: {
+				type: String,
+				default: 'none',
+			},
+		},
+		methods: {
+			click() {
+				this.$emit('click')
+			},
+		},
+	}
+</script>
--- a/src/components/teams/EditTeam.vue
+++ b/src/components/teams/EditTeam.vue
@ -128,7 +128,7 @@
 				v-on:submit="deleteUser()">
 			<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/>
-				He will loose access to all lists and namespaces this team has access to.<br/>
+				They will loose access to all lists and namespaces this team has access to.<br/>
 				<b>This CANNOT BE UNDONE!</b></p>
 		</modal>
 	</div>
@ -137,7 +137,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'

 	import TeamService from '../../services/team'
 	import TeamModel from '../../models/team'
@ -176,51 +175,51 @@
 		},
 		methods: {
 			loadTeam() {
-				this.member = new TeamMemberModel({teamID: this.$route.params.id})
+				this.member = new TeamMemberModel({teamId: this.$route.params.id})
 				this.team = new TeamModel({id: this.$route.params.id})
 				this.teamService.get(this.team)
 					.then(response => {
 						this.$set(this, 'team', response)
 						let members = response.members
 						for (const m in members) {
-							members[m].teamID = this.$route.params.id
+							members[m].teamId = this.$route.params.id
 							if (members[m].id === this.user.infos.id && members[m].admin) {
 								this.userIsAdmin = true
 							}
 						}
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			submit() {
 				this.teamService.update(this.team)
 					.then(response => {
 						this.team = response
-						message.success({message: 'The team was successfully updated.'}, this)
+						this.success({message: 'The team was successfully updated.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteTeam() {
 				this.teamService.delete(this.team)
 					.then(() => {
-						message.success({message: 'The team was successfully deleted.'}, this)
+						this.success({message: 'The team was successfully deleted.'}, this)
 						router.push({name: 'listTeams'})
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			deleteUser() {
 				this.teamMemberService.delete(this.member)
 					.then(() => {
-						message.success({message: 'The user was successfully deleted from the team.'}, this)
+						this.success({message: 'The user was successfully deleted from the team.'}, this)
 						this.loadTeam()
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 					.finally(() => {
 						this.showUserDeleteModal = false
@ -230,10 +229,10 @@
 				this.teamMemberService.create(this.member)
 					.then(() => {
 						this.loadTeam()
-						message.success({message: 'The team member was successfully added.'}, this)
+						this.success({message: 'The team member was successfully added.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			toggleUserType(member) {
--- a/src/components/teams/ListTeams.vue
+++ b/src/components/teams/ListTeams.vue
@ -20,7 +20,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import TeamService from '../../services/team'
 	
 	export default {
@ -48,7 +47,7 @@
 						this.$set(this, 'teams', response)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 		}
--- a/src/components/teams/NewTeam.vue
+++ b/src/components/teams/NewTeam.vue
@ -26,7 +26,6 @@
 <script>
 	import auth from '../../auth'
 	import router from '../../router'
-	import message from '../../message'
 	import TeamModel from '../../models/team'
 	import TeamService from '../../services/team'

@ -46,6 +45,7 @@
 		},
 		created() {
 			this.teamService = new TeamService()
+			this.team = new TeamModel()
 			this.$parent.setFullPage();
 		},
 		methods: {
@ -53,10 +53,10 @@
 				this.teamService.create(this.team)
 					.then(response => {
 						router.push({name:'editTeam', params:{id: response.id}})
-						message.success({message: 'The team was successfully created.'}, this)
+						this.success({message: 'The team was successfully created.'}, this)
 					})
 					.catch(e => {
-						message.error(e, this)
+						this.error(e, this)
 					})
 			},
 			back() {
--- a/src/components/user/Login.vue
+++ b/src/components/user/Login.vue
@ -1,19 +1,27 @@
 <template>
 	<div>
-		<h2 class="title">Login</h2>
+		<h2 class="title has-text-centered">Login</h2>
 		<div class="box">
 			<div v-if="confirmedEmailSuccess" class="notification is-success has-text-centered">
 				You successfully confirmed your email! You can log in now.
 			</div>
 			<form id="loginform" @submit.prevent="submit">
 				<div class="field">
+					<label class="label" for="username">Username</label>
 					<div class="control">
-						<input v-focus type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
+						<input v-focus type="text" id="username" class="input" name="username" placeholder="e.g. frederick" ref="username" required/>
 					</div>
 				</div>
 				<div class="field">
+					<label class="label" for="password">Password</label>
 					<div class="control">
-						<input type="password" class="input" name="password" placeholder="Password" v-model="credentials.password" required>
+						<input type="password" class="input" id="password" name="password" placeholder="e.g. ••••••••••••" ref="password" required/>
+					</div>
+				</div>
+				<div class="field" v-if="needsTotpPasscode">
+					<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/>
 					</div>
 				</div>

@ -24,8 +32,8 @@
 						<router-link :to="{ name: 'getPasswordReset' }" class="reset-password-link">Reset your password</router-link>
 					</div>
 				</div>
-				<div class="notification is-danger" v-if="error">
-					{{ error }}
+				<div class="notification is-danger" v-if="errorMsg">
+					{{ errorMsg }}
 				</div>
 			</form>
 		</div>
@ -41,13 +49,10 @@
 	export default {
 		data() {
 			return {
-				credentials: {
-					username: '',
-					password: ''
-				},
-				error: '',
+				errorMsg: '',
 				confirmedEmailSuccess: false,
-				loading: false
+				loading: false,
+				needsTotpPasscode: false,
 			}
 		},
 		beforeMount() {
@ -64,7 +69,7 @@
 					})
 					.catch(e => {
 						cancel()
-						this.error = e.response.data.message
+						this.errorMsg = e.response.data.message
 					})
 			}

@ -76,10 +81,17 @@
 		methods: {
 			submit() {
 				this.loading = true
-				this.error = ''
-				let credentials = {
-					username: this.credentials.username,
-					password: this.credentials.password
+				this.errorMsg = ''
+				// 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
 				}

 				auth.login(this, credentials, 'home')
--- a/src/components/user/PasswordReset.vue
+++ b/src/components/user/PasswordReset.vue
@ -1,16 +1,18 @@
 <template>
 	<div>
-		<h2 class="title">Reset your password</h2>
+		<h2 class="title has-text-centered">Reset your password</h2>
 		<div class="box">
 			<form id="form" @submit.prevent="submit" v-if="!successMessage">
 				<div class="field">
+					<label class="label" for="password1">Password</label>
 					<div class="control">
-						<input v-focus type="password" class="input" name="password1" placeholder="Password" v-model="credentials.password" required>
+						<input v-focus type="password" class="input" id="password1" name="password1" placeholder="e.g. ••••••••••••" v-model="credentials.password" required/>
 					</div>
 				</div>
 				<div class="field">
+					<label class="label" for="password2">Retype your password</label>
 					<div class="control">
-						<input type="password" class="input" name="password2" placeholder="Retype password" v-model="credentials.password2" required>
+						<input type="password" class="input" id="password2" name="password2" placeholder="e.g. ••••••••••••" v-model="credentials.password2" required/>
 					</div>
 				</div>

@ -22,8 +24,8 @@
 				<div class="notification is-info" v-if="this.passwordResetService.loading">
 					Loading...
 				</div>
-				<div class="notification is-danger" v-if="error">
-					{{ error }}
+				<div class="notification is-danger" v-if="errorMsg">
+					{{ errorMsg }}
 				</div>
 			</form>
 			<div v-if="successMessage" class="has-text-centered">
@ -48,7 +50,7 @@
 					password: '',
 					password2: '',
 				},
-				error: '',
+				errorMsg: '',
 				successMessage: ''
 			}
 		},
@ -57,21 +59,21 @@
 		},
 		methods: {
 			submit() {
-				this.error = ''
+				this.errorMsg = ''

 				if (this.credentials.password2 !== this.credentials.password) {
-					this.error = 'Passwords don\'t match'
+					this.errorMsg = 'Passwords don\'t match'
 					return
 				}

-				let passwordReset = new PasswordResetModel({new_password: this.credentials.password})
+				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.error = e.response.data.message
+						this.errorMsg = e.response.data.message
 					})
 			}
 		}
--- a/src/components/user/Register.vue
+++ b/src/components/user/Register.vue
@ -1,26 +1,30 @@
 <template>
 	<div>
-		<h2 class="title">Register</h2>
+		<h2 class="title has-text-centered">Register</h2>
 		<div class="box">
 			<form id="registerform" @submit.prevent="submit">
 				<div class="field">
+					<label class="label" for="username">Username</label>
 					<div class="control">
-						<input v-focus type="text" class="input" name="username" placeholder="Username" v-model="credentials.username" required>
+						<input v-focus type="text" id="username" class="input" name="username" placeholder="e.g. frederick" v-model="credentials.username" required/>
 					</div>
 				</div>
 				<div class="field">
+					<label class="label" for="email">E-mail address</label>
 					<div class="control">
-						<input type="text" class="input" name="email" placeholder="E-mail address" v-model="credentials.email" required>
+						<input type="email" class="input" id="email" name="email" placeholder="e.g. frederic@vikunja.io" v-model="credentials.email" required/>
 					</div>
 				</div>
 				<div class="field">
+					<label class="label" for="password1">Password</label>
 					<div class="control">
-						<input type="password" class="input" name="password1" placeholder="Password" v-model="credentials.password" required>
+						<input type="password" class="input" id="password1" name="password1" placeholder="e.g. ••••••••••••" v-model="credentials.password" required/>
 					</div>
 				</div>
 				<div class="field">
+					<label class="label" for="password2">Retype your password</label>
 					<div class="control">
-						<input type="password" class="input" name="password2" placeholder="Retype password" v-model="credentials.password2" required>
+						<input type="password" class="input" id="password2" name="password2" placeholder="e.g. ••••••••••••" v-model="credentials.password2" required/>
 					</div>
 				</div>

@ -33,8 +37,8 @@
 				<div class="notification is-info" v-if="loading">
 					Loading...
 				</div>
-				<div class="notification is-danger" v-if="error">
-					{{ error }}
+				<div class="notification is-danger" v-if="errorMsg !== ''">
+					{{ errorMsg }}
 				</div>
 			</form>
 		</div>
@ -54,7 +58,7 @@
 					password: '',
 					password2: '',
 				},
-				error: '',
+				errorMsg: '',
 				loading: false
 			}
 		},
@ -68,11 +72,11 @@
 			submit() {
 				this.loading = true

-				this.error = ''
+				this.errorMsg = ''

 				if (this.credentials.password2 !== this.credentials.password) {
 					this.loading = false
-					this.error = 'Passwords don\'t match'
+					this.errorMsg = 'Passwords don\'t match.'
 					return
 				}

--- a/src/components/user/RequestPasswordReset.vue
+++ b/src/components/user/RequestPasswordReset.vue
@ -1,11 +1,12 @@
 <template>
 	<div>
-		<h2 class="title">Reset your password</h2>
+		<h2 class="title has-text-centered">Reset your password</h2>
 		<div class="box">
-			<form id="loginform" @submit.prevent="submit" v-if="!isSuccess">
+			<form @submit.prevent="submit" v-if="!isSuccess">
 				<div class="field">
+					<label class="label" for="email">E-mail address</label>
 					<div class="control">
-						<input v-focus type="text" class="input" name="email" placeholder="Email-Adress" v-model="passwordReset.email" required>
+						<input v-focus type="email" class="input" id="email" name="email" placeholder="e.g. frederic@vikunja.io" v-model="passwordReset.email" required/>
 					</div>
 				</div>

@ -15,8 +16,8 @@
 						<router-link :to="{ name: 'login' }" class="button">Login</router-link>
 					</div>
 				</div>
-				<div class="notification is-danger" v-if="error">
-					{{ error }}
+				<div class="notification is-danger" v-if="errorMsg">
+					{{ errorMsg }}
 				</div>
 			</form>
 			<div v-if="isSuccess" class="has-text-centered">
@ -38,7 +39,7 @@
 			return {
 				passwordResetService: PasswordResetService,
 				passwordReset: PasswordResetModel,
-				error: '',
+				errorMsg: '',
 				isSuccess: false
 			}
 		},
@ -48,13 +49,13 @@
 		},
 		methods: {
 			submit() {
-				this.error = ''
+				this.errorMsg = ''
 				this.passwordResetService.requestResetPassword(this.passwordReset)
 					.then(() => {
 						this.isSuccess = true
 					})
 					.catch(e => {
-						this.error = e.response.data.message
+						this.errorMsg = e.response.data.message
 					})
 			},
 		}
--- a/src/components/user/Settings.vue
+++ b/src/components/user/Settings.vue
@ -0,0 +1,235 @@
+<template>
+	<div class="loader-container" :class="{ 'is-loading': passwordUpdateService.loading || emailUpdateService.loading || totpService.loading }">
+		<div class="card">
+			<header class="card-header">
+				<p class="card-header-title">
+					Update Your Password
+				</p>
+			</header>
+			<div class="card-content">
+				<div class="content">
+					<form @submit.prevent="updatePassword()">
+						<div class="field">
+							<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"/>
+							</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"/>
+							</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"/>
+							</div>
+						</div>
+					</form>
+
+					<div class="bigbuttons">
+						<button @click="updatePassword()" class="button is-primary is-fullwidth"
+								:class="{ 'is-loading': passwordUpdateService.loading}">
+							Save
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="card">
+			<header class="card-header">
+				<p class="card-header-title">
+					Update Your E-Mail Address
+				</p>
+			</header>
+			<div class="card-content">
+				<div class="content">
+					<form @submit.prevent="updateEmail()">
+						<div class="field">
+							<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"/>
+							</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"/>
+							</div>
+						</div>
+					</form>
+
+					<div class="bigbuttons">
+						<button @click="updateEmail()" class="button is-primary is-fullwidth"
+								:class="{ 'is-loading': emailUpdateService.loading}">
+							Save
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="card">
+			<header class="card-header">
+				<p class="card-header-title">
+					Two Factor Authentication
+				</p>
+			</header>
+			<div class="card-content">
+				<a class="button is-primary" v-if="!totpEnrolled && totp.secret === ''" @click="totpEnroll()" :class="{ 'is-loading': totpService.loading }">Enroll</a>
+				<div class="content" v-else-if="totp.secret !== '' && !totp.enabled">
+					<p>
+						To finish your setup, use this secret in your totp app (Google Authenticator or similar): <strong>{{ totp.secret }}</strong><br/>
+						After that, enter a code from your app below.
+					</p>
+					<p>
+						Alternatively you can scan this QR code:<br/>
+						<img :src="totpQR" alt=""/>
+					</p>
+					<div class="field">
+						<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()"/>
+						</div>
+					</div>
+					<a class="button is-primary" @click="totpConfirm()">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>
+					</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/>
+							</div>
+						</div>
+						<a class="button is-danger" @click="totpDisable()">Disable two factor authentication</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</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'
+
+	export default {
+		name: 'Settings',
+		data() {
+			return {
+				passwordUpdateService: PasswordUpdateService,
+				passwordUpdate: PasswordUpdateModel,
+				passwordConfirm: '',
+
+				emailUpdateService: EmailUpdateService,
+				emailUpdate: EmailUpdateModel,
+
+				totpService: TotpService,
+				totp: TotpModel,
+				totpQR: '',
+				totpEnrolled: false,
+				totpConfirmPasscode: '',
+				totpDisableForm: false,
+				totpDisablePassword: '',
+			}
+		},
+		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.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)
+				})
+		},
+		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))
+			},
+			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>
--- a/src/helpers/case.js
+++ b/src/helpers/case.js
@ -0,0 +1,28 @@
+import {camelCase} from 'camel-case'
+import {snakeCase} from 'snake-case'
+
+/**
+ * Transforms field names to camel case.
+ * @param object
+ * @returns {*}
+ */
+export function objectToCamelCase(object) {
+	let parsedObject = {}
+	for (const m in object) {
+		parsedObject[camelCase(m)] = object[m]
+	}
+	return parsedObject
+}
+
+/**
+ * Transforms field names to snake case - used before making an api request.
+ * @param object
+ * @returns {*}
+ */
+export function objectToSnakeCase(object) {
+	let parsedObject = {}
+	for (const m in object) {
+		parsedObject[snakeCase(m)] = object[m]
+	}
+	return parsedObject
+}
--- a/src/main.js
+++ b/src/main.js
@ -12,7 +12,7 @@ import TaskOverview from './components/tasks/ShowTasks'
 Vue.component('TaskOverview', TaskOverview)

 // Add CSS
-import './vikunja.scss'
+import './styles/vikunja.scss'

 Vue.config.productionTip = false

@ -51,8 +51,24 @@ 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 } 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 { faComments } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

 library.add(faSignOutAlt)
@ -80,6 +96,22 @@ library.add(faTags)
 library.add(faChevronDown)
 library.add(faCheck)
 library.add(faPaste)
+library.add(faPencilAlt)
+library.add(faCloudDownloadAlt)
+library.add(faCloudUploadAlt)
+library.add(faPercent)
+library.add(faStar)
+library.add(faAlignLeft)
+library.add(faPaperclip)
+library.add(faClock)
+library.add(faHistory)
+library.add(faSearch)
+library.add(faCheckDouble)
+library.add(faComments)
+library.add(faTh)
+library.add(faSort)
+library.add(faSortUp)
+library.add(faList)

 Vue.component('icon', FontAwesomeIcon)

@ -87,19 +119,51 @@ Vue.component('icon', FontAwesomeIcon)
 import VTooltip from 'v-tooltip'
 Vue.use(VTooltip)

+// PWA
+import './registerServiceWorker'
+
 // Set focus
 Vue.directive('focus', {
 	// When the bound element is inserted into the DOM...
-	inserted: function (el) {
-		// Focus the element
-		el.focus()
+	inserted: el => {
+		// Focus the element only if the viewport is big enough
+		// auto focusing elements on mobile can be annoying since in these cases the
+		// keyboard always pops up and takes half of the available space on the screen.
+		// The threshhold is the same as the breakpoints in css.
+		if (window.innerWidth > 769) {
+			el.focus()
+		}
 	}
 })

 // Check the user's auth status when the app starts
 auth.checkAuth()

+// Mixins
+import message from './message'
+import {format, formatDistance} from 'date-fns'
+Vue.mixin({
+	methods: {
+		formatDateSince: date => {
+			const currentDate = new Date()
+			let formatted = '';
+			if (date > currentDate) {
+				formatted += 'in '
+			}
+			formatted += formatDistance(date, currentDate)
+			if(date < currentDate) {
+				formatted += ' ago'
+			}
+
+			return formatted;
+		},
+		formatDate: date => format(date, 'PPPPpppp'),
+		error: (e, context, actions = []) => message.error(e, context, actions),
+		success: (s, context, actions = []) => message.success(s, context, actions),
+	}
+})
+
 new Vue({
-    router,
-    render: h => h(App)
+	router,
+	render: h => h(App)
 }).$mount('#app')
--- a/src/message/index.js
+++ b/src/message/index.js
@ -8,37 +8,40 @@ export default {
 			context.loading = false
 		};
 	},
-    error(e, context) {
-        // Build the notification text from error response
-        let err = e.message
-        if (e.response && e.response.data && e.response.data.message) {
-            err += '<br/>' + e.response.data.message
-        }
+	error(e, context, actions = []) {
+		// Build the notification text from error response
+		let err = e.message
+		if (e.response && e.response.data && e.response.data.message) {
+			err += '<br/>' + e.response.data.message
+		}

-        // Fire a notification
-        context.$notify({
-            type: 'error',
-            title: 'Error',
-            text: err
-        })
+		// Fire a notification
+		context.$notify({
+			type: 'error',
+			title: 'Error',
+			text: err,
+			actions: actions,
+		})

 		context.loading = false
-    },
-    success(e, context) {
-        // Build the notification text from error response
-        let err = e.message
-        if (e.response && e.response.data && e.response.data.message) {
-            err += '<br/>' + e.response.data.message
-        }
+	},
+	success(e, context, actions = []) {
+		// Build the notification text from error response
+		let err = e.message
+		if (e.response && e.response.data && e.response.data.message) {
+			err += '<br/>' + e.response.data.message
+		}

-        // Fire a notification
-        context.$notify({
-            type: 'success',
-            title: 'Success',
-            text: err
-        })
+		// Fire a notification
+		context.$notify({
+			type: 'success',
+			title: 'Success',
+			text: err,
+			data: {
+				actions: actions,
+			},
+		})

 		context.loading = false
-    },
-
+	},
 }
--- a/src/models/abstractModel.js
+++ b/src/models/abstractModel.js
@ -1,4 +1,5 @@
 import {defaults, omitBy, isNil} from 'lodash'
+import {objectToCamelCase} from '../helpers/case'

 export default class AbstractModel {

@ -7,6 +8,9 @@ export default class AbstractModel {
 	 * @param data
 	 */
 	constructor(data) {
+
+		data = objectToCamelCase(data)
+
 		// Put all data in our model while overriding those with a value of null or undefined with their defaults
 		defaults(this, omitBy(data, isNil), this.defaults())
 	}
--- a/src/models/attachment.js
+++ b/src/models/attachment.js
@ -0,0 +1,22 @@
+import AbstractModel from './abstractModel'
+import UserModel from './user'
+import FileModel from './file'
+
+export default class AttachmentModel extends AbstractModel {
+	constructor(data) {
+		super(data)
+		this.createdBy = new UserModel(this.createdBy)
+		this.file = new FileModel(this.file)
+		this.created = new Date(this.created)
+	}
+
+	defaults() {
+		return {
+			id: 0,
+			taskId: 0,
+			file: FileModel,
+			createdBy: UserModel,
+			created: null,
+		}
+	}
+}
--- a/src/models/emailUpdate.js
+++ b/src/models/emailUpdate.js
@ -0,0 +1,10 @@
+import AbstractModel from './abstractModel'
+
+export default class EmailUpdateModel extends AbstractModel {
+	defaults() {
+		return {
+			newEmail: '',
+			passwort: '',
+		}
+	}
+}
--- a/src/models/file.js
+++ b/src/models/file.js
@ -0,0 +1,37 @@
+import AbstractModel from './abstractModel'
+
+export default class FileModel extends AbstractModel {
+	constructor(data) {
+		super(data)
+		this.created = new Date(this.created)
+	}
+
+	defaults() {
+		return {
+			id: 0,
+			mime: '',
+			name: '',
+			size: '',
+			created: null,
+		}
+	}
+
+	getHumanSize() {
+		const sizes = {
+			0: 'B',
+			1: 'KB',
+			2: 'MB',
+			3: 'GB',
+			4: 'TB',
+		}
+
+		let it = 0
+		let size = this.size
+		while (size > 1024) {
+			size /= 1024
+			it++
+		}
+
+		return Number(Math.round(size+'e2')+'e-2') + ' ' + sizes[it]
+	}
+}
--- a/src/models/label.js
+++ b/src/models/label.js
@ -5,37 +5,40 @@ export default class LabelModel extends AbstractModel {
 	constructor(data) {
 		super(data)
 		// Set the default color
-		if (this.hex_color === '') {
-			this.hex_color = 'e8e8e8'
+		if (this.hexColor === '') {
+			this.hexColor = 'e8e8e8'
 		}
-		if (this.hex_color.substring(0, 1) !== '#') {
-			this.hex_color = '#' + this.hex_color
+		if (this.hexColor.substring(0, 1) !== '#') {
+			this.hexColor = '#' + this.hexColor
 		}
 		this.textColor = this.hasDarkColor() ? '#4a4a4a' : '#e5e5e5'
-		this.created_by = new UserModel(this.created_by)
+		this.createdBy = new UserModel(this.createdBy)
+
+		this.created = new Date(this.created)
+		this.updated = new Date(this.updated)
 	}
 	
 	defaults() {
 		return {
 			id: 0,
 			title: '',
-			hex_color: '',
+			hexColor: '',
 			description: '',
-			created_by: UserModel,
-			listID: 0,
+			createdBy: UserModel,
+			listId: 0,
 			textColor: '',
 			
-			created: 0,
-			updated: 0
+			created: null,
+			updated: null,
 		}
 	}
 	
 	hasDarkColor() {
-		if (this.hex_color === '#') {
+		if (this.hexColor === '#') {
 			return true // Defaults to dark
 		}
 		
-		let rgb = parseInt(this.hex_color.substring(1, 7), 16);   // convert rrggbb to decimal
+		let rgb = parseInt(this.hexColor.substring(1, 7), 16);   // convert rrggbb to decimal
 		let r = (rgb >> 16) & 0xff;  // extract red
 		let g = (rgb >>  8) & 0xff;  // extract green
 		let b = (rgb >>  0) & 0xff;  // extract blue
--- a/src/models/labelTask.js
+++ b/src/models/labelTask.js
@ -4,8 +4,8 @@ export default class LabelTask extends AbstractModel {
 	defaults() {
 		return {
 			id: 0,
-			taskID: 0,
-			label_id: 0,
+			taskId: 0,
+			labelId: 0,
 		}
 	}
 }
--- a/src/models/linkShare.js
+++ b/src/models/linkShare.js
@ -7,7 +7,10 @@ export default class ListModel extends AbstractModel {
        // The constructor of AbstractModel handles all the default parsing.
        super(data)

-        this.shared_by = new UserModel(this.shared_by)
+        this.sharedBy = new UserModel(this.sharedBy)
+
+        this.created = new Date(this.created)
+        this.updated = new Date(this.updated)
    }

    // Default attributes that define the "empty" state.
@ -16,12 +19,12 @@ export default class ListModel extends AbstractModel {
            id: 0,
            hash: '',
            right: 0,
-            shared_by: UserModel,
-            sharing_type: 0,
-            listID: 0,
+            sharedBy: UserModel,
+            sharingType: 0,
+            listId: 0,

-            created: 0,
-            updated: 0,
+            created: null,
+            updated: null,
        }
    }
 }
--- a/src/models/list.js
+++ b/src/models/list.js
@ -6,16 +6,22 @@ export default class ListModel extends AbstractModel {
 	
 	constructor(data) {
 		super(data)
-		
+
+		if (this.hexColor !== '' && this.hexColor.substring(0, 1) !== '#') {
+			this.hexColor = '#' + this.hexColor
+		}
+
 		// Make all tasks to task models
 		this.tasks = this.tasks.map(t => {
 			return new TaskModel(t)
 		})
 		
 		this.owner = new UserModel(this.owner)
-		this.sortTasks()
+
+		this.created = new Date(this.created)
+		this.updated = new Date(this.updated)
 	}
-	
+
 	// Default attributes that define the "empty" state.
 	defaults() {
 		return {
@ -24,88 +30,12 @@ export default class ListModel extends AbstractModel {
 			description: '',
 			owner: UserModel,
 			tasks: [],
-			namespaceID: 0,
-			
-			created: 0,
-			updated: 0,
-		}
-	}
+			namespaceId: 0,
+			isArchived: false,
+			hexColor: '',

-	////////
-	// Helpers
-	//////
-	
-	/**
-	 * Sorts all tasks according to their due date
-	 * @returns {this}
-	 */
-	sortTasks() {
-		if (this.tasks === null || this.tasks === []) {
-			return
+			created: null,
+			updated: null,
 		}
-		return this.tasks.sort(function(a,b) {
-			if (a.done < b.done)
-				return -1
-			if (a.done > b.done)
-				return 1
-			return 0
-		})
-	}
-	
-	/**
-	 * Adds a task to the task array of this list. Usually only used when creating a new task
-	 * @param task
-	 */
-	addTaskToList(task) {
-		// If it's a subtask, add it to its parent, otherwise append it to the list of tasks
-		if (task.parentTaskID === 0) {
-			this.tasks.push(task)
-		} else {
-			for (const t in this.tasks) {
-				if (this.tasks[t].id === task.parentTaskID) {
-					this.tasks[t].subtasks.push(task)
-					break
-				}
-			}
-		}
-		this.sortTasks()
-	}
-	
-	/**
-	 * Gets a task by its ID by looping through all tasks.
-	 * @param id
-	 * @returns {TaskModel}
-	 */
-	getTaskByID(id) {
-		// TODO: Binary search?
-		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
-	}
-
-	/**
-	 * Loops through all tasks and updates the one  with the id it has
-	 * @param task
-	 */
-	updateTaskByID(task) {
-		for (const t in this.tasks) {
-			if (this.tasks[t].id === task.id) {
-				this.tasks[t] = task
-				break
-			}
-
-			if (this.tasks[t].id === task.parentTaskID) {
-				for (const s in this.tasks[t].subtasks) {
-					if (this.tasks[t].subtasks[s].id === task.id) {
-						this.tasks[t].subtasks[s] = task
-						break
-					}
-				}
-			}
-		}
-		this.sortTasks()
 	}
 }
--- a/src/models/namespace.js
+++ b/src/models/namespace.js
@ -6,10 +6,17 @@ export default class NamespaceModel extends AbstractModel {
 	constructor(data) {
 		super(data)

+		if (this.hexColor !== '' && this.hexColor.substring(0, 1) !== '#') {
+			this.hexColor = '#' + this.hexColor
+		}
+
 		this.lists = this.lists.map(l => {
 			return new ListModel(l)
 		})
 		this.owner = new UserModel(this.owner)
+
+		this.created = new Date(this.created)
+		this.updated = new Date(this.updated)
 	}

 	// Default attributes that define the 'empty' state.
@ -20,9 +27,11 @@ export default class NamespaceModel extends AbstractModel {
 			description: '',
 			owner: UserModel,
 			lists: [],
+			isArchived: false,
+			hexColor: '',

-			created: 0,
-			updated: 0,
+			created: null,
+			updated: null,
 		}
 	}
 }
--- a/src/models/passwordReset.js
+++ b/src/models/passwordReset.js
@ -10,7 +10,7 @@ export default class PasswordResetModel extends AbstractModel {
 	defaults() {
 		return {
 			token: '',
-			new_password: '',
+			newPassword: '',
 			email: '',
 		}
 	}
--- a/src/models/passwordUpdate.js
+++ b/src/models/passwordUpdate.js
@ -0,0 +1,10 @@
+import AbstractModel from './abstractModel'
+
+export default class PasswordUpdateModel extends AbstractModel {
+	defaults() {
+		return {
+			newPassword: '',
+			oldPassword: '',
+		}
+	}
+}
--- a/src/models/relationKinds.json
+++ b/src/models/relationKinds.json
@ -0,0 +1,46 @@
+{
+  "subtask": [
+    "Subtask",
+    "Subtasks"
+  ],
+  "parenttask": [
+    "Parent Task",
+    "Parent Tasks"
+  ],
+  "related": [
+    "Related Task",
+    "Related Tasks"
+  ],
+  "duplicateof": [
+    "Duplicate Of",
+    "Duplicates Of"
+  ],
+  "duplicates": [
+    "Duplicates",
+    "Duplicates"
+  ],
+  "blocking": [
+    "Blocking",
+    "Blocking"
+  ],
+  "blocked": [
+    "Blocked By",
+    "Blocked By"
+  ],
+  "precedes": [
+    "Preceds",
+    "Preceds"
+  ],
+  "follows": [
+    "Follows",
+    "Follows"
+  ],
+  "copiedfrom": [
+    "Copied From",
+    "Copied From"
+  ],
+  "copiedto": [
+    "Copied To",
+    "Copied To"
+  ]
+}
--- a/src/models/task.js
+++ b/src/models/task.js
@ -1,21 +1,32 @@
 import AbstractModel from './abstractModel';
 import UserModel from './user'
-import LabelModel from "./label";
+import LabelModel from './label'
+import AttachmentModel from './attachment'

 export default class TaskModel extends AbstractModel {
 	
 	constructor(data) {
 		super(data)
-		
-		// Make date objects from timestamps
-		this.dueDate = this.parseDateIfNessecary(this.dueDate)
-		this.startDate = this.parseDateIfNessecary(this.startDate)
-		this.endDate = this.parseDateIfNessecary(this.endDate)

-		this.reminderDates = this.reminderDates.map(d => {
-			return this.parseDateIfNessecary(d)
-		})
-		this.reminderDates.push(null) // To trigger the datepicker
+		this.id = Number(this.id)
+		this.listId = Number(this.listId)
+
+		// Make date objects from timestamps
+		this.dueDate = this.dueDate ? new Date(this.dueDate) : null
+		this.startDate = this.startDate ? new Date(this.startDate) : null
+		this.endDate = this.endDate ? new Date(this.endDate) : null
+
+		// Cancel all scheduled notifications for this task to be sure to only have available notifications
+		this.cancelScheduledNotifications()
+			.then(() => {
+				this.reminderDates = this.reminderDates.map(d => {
+					d = new Date(d)
+					// Every time we see a reminder, we schedule a notification for it
+					this.scheduleNotification(d)
+					return d
+				})
+				this.reminderDates.push(null) // To trigger the datepicker
+			})

 		// Parse the repeat after into something usable
 		this.parseRepeatAfter()
@ -37,6 +48,21 @@ export default class TaskModel extends AbstractModel {
 		if (this.hexColor.substring(0, 1) !== '#') {
 			this.hexColor = '#' + this.hexColor
 		}
+
+		// Make all subtasks to task models
+		Object.keys(this.relatedTasks).forEach(relationKind  => {
+			this.relatedTasks[relationKind] = this.relatedTasks[relationKind].map(t => {
+				return new TaskModel(t)
+			})
+		})
+
+		// Make all attachments to attachment models
+		this.attachments = this.attachments.map(a => {
+			return new AttachmentModel(a)
+		})
+
+		this.created = new Date(this.created)
+		this.updated = new Date(this.updated)
 	}
 	
 	defaults() {
@ -54,16 +80,17 @@ export default class TaskModel extends AbstractModel {
 			endDate: 0,
 			repeatAfter: 0,
 			reminderDates: [],
-			subtasks: [],
-			parentTaskID: 0,
+			parentTaskId: 0,
 			hexColor: '',
+			percentDone: 0,
+			relatedTasks: {},
+			attachments: [],

 			createdBy: UserModel,
-			created: 0,
-			updated: 0,
+			created: null,
+			updated: null,
 			
-			listID: 0, // Meta, only used when creating a new task
-			sortBy: 'duedate', // Meta, only used when listing all tasks
+			listId: 0, // Meta, only used when creating a new task
 		}
 	}
 	
@ -71,19 +98,6 @@ export default class TaskModel extends AbstractModel {
 	// Helper functions
 	///////////////
 	
-	/**
-	 * Makes a js date object from a unix timestamp (in seconds).
-	 * @param unixTimestamp
-	 * @returns {*}
-	 */
-	parseDateIfNessecary(unixTimestamp) {
-		let dateobj = new Date(unixTimestamp * 1000)
-		if (unixTimestamp === 0) {
-			return null
-		}
-		return dateobj
-	}
-
 	/**
 	 * Parses the "repeat after x seconds" from the task into a usable js object inside the task.
 	 * This function should only be called from the constructor.
@ -129,4 +143,77 @@ export default class TaskModel extends AbstractModel {
 		let luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709
 		return luma > 128
 	}
-}
+
+	async cancelScheduledNotifications() {
+		if (!('showTrigger' in Notification.prototype)) {
+			console.debug('This browser does not support triggered notifications')
+			return
+		}
+
+		const registration = await navigator.serviceWorker.getRegistration()
+		if (typeof registration === 'undefined') {
+			return
+		}
+
+		// Get all scheduled notifications for this task and cancel them
+		const scheduledNotifications = await registration.getNotifications({
+			tag: `vikunja-task-${this.id}`,
+			includeTriggered: true,
+		})
+		console.debug('Already scheduled notifications:', scheduledNotifications)
+		scheduledNotifications.forEach(n => n.close())
+	}
+
+	async scheduleNotification(date) {
+
+		if(date < new Date()) {
+			console.debug('Date is in the past, not scheduling a notification. Date is ', date)
+			return
+		}
+
+		if (!('showTrigger' in Notification.prototype)) {
+			console.debug('This browser does not support triggered notifications')
+			return
+		}
+
+		const {state} = await navigator.permissions.request({name: 'notifications'});
+		if (state !== 'granted') {
+			console.debug('Notification permission not granted, not showing notifications')
+			return
+		}
+
+		const registration = await navigator.serviceWorker.getRegistration()
+		if (typeof registration === 'undefined') {
+			console.error('No service worker registration available')
+			return
+		}
+
+		// Register the actual notification
+		registration.showNotification('Vikunja Reminder', {
+			tag: `vikunja-task-${this.id}`, // Group notifications by task id so we're only showing one notification per task
+			body: this.text,
+			// eslint-disable-next-line no-undef
+			showTrigger: new TimestampTrigger(date),
+			badge: '/images/icons/badge-monochrome.png',
+			icon: '/images/icons/android-chrome-512x512.png',
+			data: {taskId: this.id},
+			actions: [
+				{
+					action: 'mark-as-done',
+					title: 'Done'
+				},
+				{
+					action: 'show-task',
+					title: 'Show task'
+				},
+			],
+		})
+		.then(() => {
+			console.debug('Notification scheduled for ' + date)
+		})
+		.catch(e => {
+			console.debug('Error scheduling notification', e)
+		})
+	}
+}
+
--- a/src/models/taskAssignee.js
+++ b/src/models/taskAssignee.js
@ -0,0 +1,16 @@
+import AbstractModel from './abstractModel'
+
+export default class TaskAssigneeModel extends AbstractModel {
+    constructor(data) {
+        super(data)
+        this.created = new Date(this.created)
+    }
+
+    defaults() {
+        return {
+            created: null,
+            userId: 0,
+            taskId: 0,
+        }
+    }
+}
--- a/src/models/taskComment.js
+++ b/src/models/taskComment.js
@ -0,0 +1,22 @@
+import AbstractModel from './abstractModel'
+import UserModel from './user'
+
+export default class TaskCommentModel extends AbstractModel {
+	constructor(data) {
+		super(data)
+		this.author = new UserModel(this.author)
+		this.created = new Date(this.created)
+		this.updated = new Date(this.updated)
+	}
+
+	defaults() {
+		return {
+			id: 0,
+			taskId: 0,
+			comment: '',
+			author: UserModel,
+			created: null,
+			update: null,
+		}
+	}
+}
--- a/src/models/taskRelation.js
+++ b/src/models/taskRelation.js
@ -0,0 +1,22 @@
+import AbstractModel from './abstractModel'
+import UserModel from './user'
+
+export default class TaskRelationModel extends AbstractModel {
+	constructor(data) {
+		super(data)
+		this.createdBy = new UserModel(this.createdBy)
+		this.created = new Date(this.created)
+	}
+	
+	defaults() {
+		return {
+			id: 0,
+			otherTaskId: 0,
+			taskId: 0,
+			relationKind: '',
+
+			createdBy: UserModel,
+			created: null,
+		}
+	}
+}
--- a/src/models/team.js
+++ b/src/models/team.js
@ -11,6 +11,9 @@ export default class TeamModel extends AbstractModel {
 			return new TeamMemberModel(m)
 		})
 		this.createdBy = new UserModel(this.createdBy)
+
+		this.created = new Date(this.created)
+		this.updated = new Date(this.updated)
 	}

 	defaults() {
@ -22,8 +25,8 @@ export default class TeamModel extends AbstractModel {
 			right: 0,

 			createdBy: {},
-			created: 0,
-			updated: 0
+			created: null,
+			updated: null,
 		}
 	}
 }
--- a/src/models/teamList.js
+++ b/src/models/teamList.js
@ -1,12 +1,12 @@
 import TeamShareBaseModel from './teamShareBase'
-import {merge} from "lodash";
+import {merge} from 'lodash'

 export default class TeamListModel extends TeamShareBaseModel {
 	defaults() {
 		return merge(
 			super.defaults(),
 			{
-				listID: 0,
+				listId: 0,
 			}
 		)
 	}
--- a/src/models/teamMember.js
+++ b/src/models/teamMember.js
@ -7,7 +7,7 @@ export default class TeamMemberModel extends UserModel {
 			super.defaults(),
 			{
 				admin: false,
-				teamID: 0,
+				teamId: 0,
 			}
 		)
 	}
--- a/Show More
+++ b/Show More