Fix logging the user out when renewing the token while the api is not reachable

Update dependency axios to v0.21.1

Reviewed-on: vikunja/frontend#353
Co-Authored-By: renovate <renovatebot@kolaente.de>
Co-Committed-By: renovate <renovatebot@kolaente.de>

.drone.yml

@@ -1,5 +1,5 @@
 kind: pipeline
-name: testing
+name: build
 
 trigger:
   branch:
@@ -10,15 +10,119 @@ trigger:
       - push
       - pull_request
 
+services:
+  - name: api
+    image: vikunja/api
+    environment:
+      VIKUNJA_SERVICE_TESTINGTOKEN: averyLongSecretToSe33dtheDB
+      VIKUNJA_LOG_LEVEL: DEBUG
+
 steps:
-  - name: build
-    image: node:13
+  - name: restore-cache
+    image: meltwater/drone-cache:dev
     pull: true
-    group: build-static
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: cache_aws_access_key_id
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: cache_aws_secret_access_key
+    settings:
+      restore: true
+      bucket: kolaente.dev-drone-dependency-cache
+      endpoint: https://s3.fr-par.scw.cloud
+      region: fr-par
+      path_style: true
+      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+      mount:
+        - '.cache'
+
+  - name: dependencies
+    image: node:12
+    pull: true
+    environment:
+      YARN_CACHE_FOLDER: .cache/yarn/
+      CYPRESS_CACHE_FOLDER: .cache/cypress/
     commands:
       - yarn --frozen-lockfile --network-timeout 100000
+    depends_on:
+      - restore-cache
+
+  - name: rebuild-cache
+    image: meltwater/drone-cache:dev
+    pull: true
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: cache_aws_access_key_id
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: cache_aws_secret_access_key
+    settings:
+      rebuild: true
+      bucket: kolaente.dev-drone-dependency-cache
+      endpoint: https://s3.fr-par.scw.cloud
+      region: fr-par
+      path_style: true
+      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+      mount:
+        - '.cache'
+    depends_on:
+      - dependencies
+
+  - name: build
+    image: node:12
+    pull: true
+    environment:
+      YARN_CACHE_FOLDER: .cache/yarn/
+      CYPRESS_CACHE_FOLDER: .cache/cypress/
+    commands:
       - yarn run lint
       - yarn run build
+    depends_on:
+      - dependencies
+
+  - name: test-unit
+    image: node:12
+    pull: true
+    commands:
+      - yarn test:unit
+    depends_on:
+      - dependencies
+
+  - name: test-frontend
+    image: cypress/browsers:node12.18.3-chrome87-ff82
+    pull: true
+    environment:
+      CYPRESS_API_URL: http://api:3456/api/v1
+      CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
+      YARN_CACHE_FOLDER: .cache/yarn/
+      CYPRESS_CACHE_FOLDER: .cache/cypress/
+    commands:
+      - sed -i 's/localhost/api/g' public/index.html
+      - yarn serve & npx wait-on http://localhost:8080
+      - yarn test:frontend --browser chrome
+    depends_on:
+      - dependencies
+
+  - name: upload-test-results
+    image: plugins/s3:1
+    pull: true
+    settings:
+      bucket: drone-test-results
+      access_key:
+        from_secret: test_results_aws_access_key_id
+      secret_key:
+        from_secret: test_results_aws_secret_access_key
+      endpoint: https://s3.fr-par.scw.cloud
+      region: fr-par
+      path_style: true
+      source: cypress/screenshots/**/**/*
+      strip_prefix: cypress/screenshots/
+      target: /${DRONE_REPO}/${DRONE_PULL_REQUEST}_${DRONE_BRANCH}/${DRONE_BUILD_NUMBER}/
+    depends_on: 
+      - test-frontend
+    when:
+      status:
+        - failure
+        - success
 
 ---
 kind: pipeline
@@ -36,10 +140,30 @@ steps:
     commands:
       - git fetch --tags
 
+  - name: restore-cache
+    image: meltwater/drone-cache:dev
+    pull: true
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: cache_aws_access_key_id
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: cache_aws_secret_access_key
+    settings:
+      restore: true
+      bucket: kolaente.dev-drone-dependency-cache
+      endpoint: https://s3.fr-par.scw.cloud
+      region: fr-par
+      path_style: true
+      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+      mount:
+        - '.cache'
+
   - name: build
-    image: node:13
+    image: node:12
     pull: true
     group: build-static
+    environment:
+      YARN_CACHE_FOLDER: .cache/yarn/
     commands:
       - yarn --frozen-lockfile --network-timeout 100000
       - yarn run lint
@@ -60,12 +184,13 @@ steps:
     image: plugins/s3:1
     pull: true
     settings:
-      bucket: vikunja
+      bucket: vikunja-releases
       access_key:
         from_secret: aws_access_key_id
       secret_key:
         from_secret: aws_secret_access_key
-      endpoint: https://storage.kolaente.de
+      endpoint: https://s3.fr-par.scw.cloud
+      region: fr-par
       path_style: true
       source: vikunja-frontend-master.zip
       target: /frontend/
@@ -85,10 +210,30 @@ steps:
     commands:
       - git fetch --tags
 
+  - name: restore-cache
+    image: meltwater/drone-cache:dev
+    pull: true
+    environment:
+      AWS_ACCESS_KEY_ID:
+        from_secret: cache_aws_access_key_id
+      AWS_SECRET_ACCESS_KEY:
+        from_secret: cache_aws_secret_access_key
+    settings:
+      restore: true
+      bucket: kolaente.dev-drone-dependency-cache
+      endpoint: https://s3.fr-par.scw.cloud
+      region: fr-par
+      path_style: true
+      cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
+      mount:
+        - '.cache'
+
   - name: build
-    image: node:13
+    image: node:12
     pull: true
     group: build-static
+    environment:
+      YARN_CACHE_FOLDER: .cache/yarn/
     commands:
       - yarn --frozen-lockfile --network-timeout 100000
       - yarn run lint
@@ -109,22 +254,50 @@ steps:
     image: plugins/s3:1
     pull: true
     settings:
-      bucket: vikunja
+      bucket: vikunja-releases
       access_key:
         from_secret: aws_access_key_id
       secret_key:
         from_secret: aws_secret_access_key
-      endpoint: https://storage.kolaente.de
+      endpoint: https://s3.fr-par.scw.cloud
+      region: fr-par
       path_style: true
       source: vikunja-frontend-${DRONE_TAG##v}.zip
       target: /frontend/
     depends_on: [ static ]
 
+---
+kind: pipeline
+name: trigger-desktop-update
+
+trigger:
+  branch:
+    - master
+  event:
+    - push
+
+depends_on:
+  - release-latest
+
+steps:
+  - name: trigger
+    image: plugins/downstream
+    settings:
+      server: https://drone.kolaente.de
+      token:
+        from_secret: drone_token
+      repositories:
+        - vikunja/desktop@master
+
 ---
 kind: pipeline
 type: docker
 name: docker-arm-release
 
+depends_on:
+  - release-latest
+  - release-version
+
 platform:
   os: linux
   arch: arm
@@ -135,11 +308,7 @@ trigger:
     - "refs/tags/**"
 
 steps:
-  - name: fetch-tags
-    image: docker:git
-    commands:
-      - git fetch --tags
-  - name: docker
+  - name: docker-latest
     image: plugins/docker:linux-arm
     pull: true
     settings:
@@ -150,7 +319,30 @@ steps:
       repo: vikunja/frontend
       auto_tag: true
       auto_tag_suffix: linux-arm
-    depends_on: [ fetch-tags ]
+      build_args:
+        - USE_RELEASE=true
+        - RELEASE_VERSION=master
+    when:
+      ref:
+        - refs/heads/master
+
+  - name: docker-version
+    image: plugins/docker:linux-arm
+    pull: true
+    settings:
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
+      repo: vikunja/frontend
+      auto_tag: true
+      auto_tag_suffix: linux-arm
+      build_args:
+        - USE_RELEASE=true
+        - RELEASE_VERSION=${DRONE_TAG##v}
+    when:
+      ref:
+        - "refs/tags/**"
 
 ---
 kind: pipeline
@@ -161,17 +353,17 @@ platform:
   os: linux
   arch: amd64
 
+depends_on:
+  - release-latest
+  - release-version
+
 trigger:
   ref:
     - refs/heads/master
     - "refs/tags/**"
 
 steps:
-  - name: fetch-tags
-    image: docker:git
-    commands:
-      - git fetch --tags
-  - name: docker
+  - name: docker-latest
     image: plugins/docker:linux-amd64
     pull: true
     settings:
@@ -182,7 +374,30 @@ steps:
       repo: vikunja/frontend
       auto_tag: true
       auto_tag_suffix: linux-amd64
-    depends_on: [ fetch-tags ]
+      build_args:
+        - USE_RELEASE=true
+        - RELEASE_VERSION=master
+    when:
+      ref:
+        - refs/heads/master
+
+  - name: docker-version
+    image: plugins/docker:linux-amd64
+    pull: true
+    settings:
+      username:
+        from_secret: docker_username
+      password:
+        from_secret: docker_password
+      repo: vikunja/frontend
+      auto_tag: true
+      auto_tag_suffix: linux-amd64
+      build_args:
+        - USE_RELEASE=true
+        - RELEASE_VERSION=${DRONE_TAG##v}
+    when:
+      ref:
+        - "refs/tags/**"
 
 ---
 kind: pipeline
@@ -228,7 +443,7 @@ depends_on:
 
 steps:
   - name: telegram
-    image: appleboy/drone-telegram
+    image: appleboy/drone-telegram:1-linux-amd64
     settings:
       token:
         from_secret: TELEGRAM_TOKEN

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: https://www.buymeacoffee.com/kolaente

.gitignore

@@ -20,3 +20,7 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+# Test files
+cypress/screenshots
+cypress/videos

CHANGELOG.md

@@ -9,6 +9,166 @@ 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.15.0 - 2020-10-19]
+
+### Added
+
+* Add app shortcuts when using vikunja as pwa
+* Add build hash as meta tag to index.html to ensure always loading the new index file
+* Add checkbox to show only tasks which have a due date
+* Add creating labels when creating a task (#192)
+* Add debug logs for loading list + kanban buckets
+* Add deferring task's due dates directly from the overview (#199)
+* Add easymde & markdown preview for editing descriptions and comments (#183)
+* Add github sponsor link
+* Add limits for kanban boards (#234)
+* Add loading spinner when duplicating a list
+* Add more debugging when loading lists or buckets
+* Add more prefetching of components
+* Add notice to a list if it has no tasks
+* Add options to show tasks in range on the overview pages
+* Add Page Titles Everywhere (#177)
+* Allow setting api url from the login screen (#264)
+* Favorite lists (#237)
+* Favorite tasks (#236)
+* Keyboard Shortcuts (#193)
+* Saved filters (#239)
+* Show caldav url in settings if it's enabled server side
+* Show legal links from api if configured
+
+### Fixed
+
+* Fix archived lists still showing up in the side menu
+* Fix Assignees being deleted when adding a due date (#254)
+* Fix bottom padding on kanban
+* Fix bottom white margin
+* Fix checking for existing migration from other services
+* Fix comparing the currently loaded list with the current list to make sure to only load the list if needed
+* Fix create new bucket button having no margin to the right
+* Fix due date changes not saved on mobile
+* Fix editor spacing
+* Fix long text overflowing in task comments
+* Fix pagination button hover color
+* Fix pwa icon for iOS
+* Fix related tasks list spacing
+* Fix sort order when marking a task as done from the overview
+* Fix task in list style for tasks with assignees
+* Fix task layout in kanban
+* Fix task list if it has tasks with a long unbreakable title
+* Fix task title input taking up almost no space if empty
+* Fix update available breaking the navbar position
+* Make sure to always load the home route when starting the app
+* Make sure to make the list id from the route an int to not fail the comparison
+* More avatar providers (#200)
+* Only show the list at the end of the task if it was not specially required to show the list
+* Only trigger desktop rebuilds on pushes to master
+* Pin dependencies (#184)
+* Pin dependency vue-advanced-cropper to 0.16.10 (#201)
+* Pin dependency vue-shortkey to 3.1.7 (#194)
+* Pin telegram notify in drone
+* Prevent loading the list + kanban board again when closing the task popup
+* Prevent rendering html in tooltips
+* Release preparations
+* Remove html from tooltip
+* Replace renovate tokens with env
+
+### Changed
+
+* Always focus inputs on kanban when adding a new task or bucket
+* Automatically scroll to the bottom of a bucket after adding a new task to it
+* Bump http-proxy from 1.18.0 to 1.18.1
+* Cleanup code & make sure it has a common code style
+* Disabele spellcheck on bucket titles
+* Don't cache everything in the service worker, only explicitly assets
+* Don't create a label through quick add if the title is empty
+* Don't show a confusing message if no options are available
+* Hide the user menu if clicked outside of it
+* Hide UI elements if the user does not have the right to use them (#211)
+* Include fonts css in the main css bundle
+* Make task list, teams and settings pages max width of $desktop and centered
+* Make the task view full width for shares if the list has a background
+* Mark tasks as done from the kanban board with ctrl+click
+* Open unsplash author links in a new window
+* Put the editor container higher up for task description
+* Redirect to current list view on click on list in menu again
+* Switch release bucket to scaleway s3
+* Trigger a rebuild of the desktop app on builds to master for the frontend
+* Trigger @change when pasting content into editor
+* Update dependency axios to v0.20.0 (#216)
+* Update dependency bulma to v0.9.1 (#252)
+* Update dependency date-fns to v2.15.0 (#190)
+* Update dependency date-fns to v2.16.0 (#220)
+* Update dependency date-fns to v2.16.1 (#223)
+* Update dependency dompurify to v2.0.14 (#221)
+* Update dependency dompurify to v2.0.15 (#229)
+* Update dependency dompurify to v2.0.17 (#241)
+* Update dependency dompurify to v2.1.0 (#245)
+* Update dependency dompurify to v2.1.1 (#248)
+* Update dependency eslint-plugin-vue to v7.0.1 (#257)
+* Update dependency eslint-plugin-vue to v7.1.0 (#271)
+* Update dependency eslint-plugin-vue to v7 (#255)
+* Update dependency eslint to v7.10.0 (#250)
+* Update dependency eslint to v7.11.0 (#263)
+* Update dependency eslint to v7.4.0 (#175)
+* Update dependency eslint to v7.5.0 (#191)
+* Update dependency eslint to v7.6.0 (#198)
+* Update dependency eslint to v7.7.0 (#213)
+* Update dependency eslint to v7.8.0 (#225)
+* Update dependency eslint to v7.8.1 (#228)
+* Update dependency eslint to v7.9.0 (#242)
+* Update dependency @fortawesome/vue-fontawesome to v2 (#226)
+* Update dependency http-proxy from 1.18.0 to 1.18.1
+* Update dependency lodash to v4.17.16 (#178)
+* Update dependency lodash to v4.17.17 (#179)
+* Update dependency lodash to v4.17.18 (#180)
+* Update dependency lodash to v4.17.19 (#181)
+* Update dependency lodash to v4.17.20 (#212)
+* Update dependency marked to v1.1.1 (#185)
+* Update dependency marked to v1.2.0 (#251)
+* Update dependency sass-loader to v10.0.1 (#219)
+* Update dependency sass-loader to v10.0.2 (#230)
+* Update dependency sass-loader to v10.0.3 (#262)
+* Update dependency sass-loader to v10 (#217)
+* Update dependency sass-loader to v9.0.1 (#174)
+* Update dependency sass-loader to v9.0.2 (#176)
+* Update dependency sass-loader to v9.0.3 (#203)
+* Update dependency sass-loader to v9 (#173)
+* Update dependency vue-advanced-cropper to v0.17.0 (#231)
+* Update dependency vue-advanced-cropper to v0.17.1 (#232)
+* Update dependency vue-advanced-cropper to v0.17.2 (#238)
+* Update dependency vue-advanced-cropper to v0.17.3 (#243)
+* Update dependency vue-drag-resize to v1.4.1 (#182)
+* Update dependency vue-drag-resize to v1.4.2 (#197)
+* Update dependency vue-easymde to v1.2.2 (#187)
+* Update dependency vue-easymde to v1.3.0 (#256)
+* Update dependency vue-flatpickr-component to v8.1.6 (#222)
+* Update dependency vue-router to v3.4.0 (#202)
+* Update dependency vue-router to v3.4.1 (#204)
+* Update dependency vue-router to v3.4.2 (#205)
+* Update dependency vue-router to v3.4.3 (#210)
+* Update dependency vue-router to v3.4.4 (#247)
+* Update dependency vue-router to v3.4.5 (#249)
+* Update dependency vue-router to v3.4.6 (#260)
+* Update dependency vue-router to v3.4.7 (#269)
+* Update Font Awesome (#188)
+* Update Font Awesome (#253)
+* Update Font Awesome (#258)
+* Update renovate token
+* Update vue monorepo to v2.6.12 (#215)
+* Update vue monorepo to v4.5.2 (#208)
+* Update vue monorepo to v4.5.3 (#209)
+* Update vue monorepo to v4.5.4 (#214)
+* Update vue monorepo to v4.5.6 (#244)
+* Update vue monorepo to v4.5.7 (#259)
+* Update vue monorepo to v4.5.8 (#272)
+* Use team update route to update a team member's admin status
+
+## [0.14.1 - 2020-08-06]
+
+### Fixed
+
+* Prevent html being rendered in tooltips
+
 ## [0.14.0 - 2020-07-01]
 
 ### Added

Dockerfile

@@ -3,9 +3,19 @@ FROM node:13.14.0 AS compile-image
 
 WORKDIR /build
 
+ARG USE_RELEASE=false
+ARG RELEASE_VERSION=master
+
+ENV YARN_CACHE_FOLDER .cache/yarn/
 COPY .  ./
 
 RUN \
+  if [ $USE_RELEASE ]; then \
+    rm -rf dist/ && \
+    wget https://dl.vikunja.io/frontend/vikunja-frontend-$RELEASE_VERSION.zip -O frontend-release.zip && \
+    unzip frontend-release.zip -d dist/ && \
+    exit 0; \
+  fi && \
   # Build the frontend
   yarn install --frozen-lockfile --network-timeout 100000 && \
   echo '{"VERSION": "'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'"}' > src/version.json && \

LICENSE

@@ -1,165 +1,661 @@
-                   GNU LESSER GENERAL PUBLIC LICENSE
-                       Version 3, 29 June 2007
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
 
- Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
  Everyone is permitted to copy and distribute verbatim copies
  of this license document, but changing it is not allowed.
 
+                            Preamble
 
-  This version of the GNU Lesser General Public License incorporates
-the terms and conditions of version 3 of the GNU General Public
-License, supplemented by the additional permissions listed below.
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
 
-  0. Additional Definitions.
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
 
-  As used herein, "this License" refers to version 3 of the GNU Lesser
-General Public License, and the "GNU GPL" refers to version 3 of the GNU
-General Public License.
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
 
-  "The Library" refers to a covered work governed by this License,
-other than an Application or a Combined Work as defined below.
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
 
-  An "Application" is any work that makes use of an interface provided
-by the Library, but which is not otherwise based on the Library.
-Defining a subclass of a class defined by the Library is deemed a mode
-of using an interface provided by the Library.
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
 
-  A "Combined Work" is a work produced by combining or linking an
-Application with the Library.  The particular version of the Library
-with which the Combined Work was made is also called the "Linked
-Version".
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
 
-  The "Minimal Corresponding Source" for a Combined Work means the
-Corresponding Source for the Combined Work, excluding any source code
-for portions of the Combined Work that, considered in isolation, are
-based on the Application, and not on the Linked Version.
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
 
-  The "Corresponding Application Code" for a Combined Work means the
-object code and/or source code for the Application, including any data
-and utility programs needed for reproducing the Combined Work from the
-Application, but excluding the System Libraries of the Combined Work.
+  The precise terms and conditions for copying, distribution and
+modification follow.
 
-  1. Exception to Section 3 of the GNU GPL.
+                       TERMS AND CONDITIONS
 
-  You may convey a covered work under sections 3 and 4 of this License
-without being bound by section 3 of the GNU GPL.
+  0. Definitions.
 
-  2. Conveying Modified Versions.
+  "This License" refers to version 3 of the GNU Affero General Public License.
 
-  If you modify a copy of the Library, and, in your modifications, a
-facility refers to a function or data to be supplied by an Application
-that uses the facility (other than as an argument passed when the
-facility is invoked), then you may convey a copy of the modified
-version:
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
 
-   a) under this License, provided that you make a good faith effort to
-   ensure that, in the event an Application does not supply the
-   function or data, the facility still operates, and performs
-   whatever part of its purpose remains meaningful, or
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
 
-   b) under the GNU GPL, with none of the additional permissions of
-   this License applicable to that copy.
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
 
-  3. Object Code Incorporating Material from Library Header Files.
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
 
-  The object code form of an Application may incorporate material from
-a header file that is part of the Library.  You may convey such object
-code under terms of your choice, provided that, if the incorporated
-material is not limited to numerical parameters, data structure
-layouts and accessors, or small macros, inline functions and templates
-(ten or fewer lines in length), you do both of the following:
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
 
-   a) Give prominent notice with each copy of the object code that the
-   Library is used in it and that the Library and its use are
-   covered by this License.
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
 
-   b) Accompany the object code with a copy of the GNU GPL and this license
-   document.
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
 
-  4. Combined Works.
+  1. Source Code.
 
-  You may convey a Combined Work under terms of your choice that,
-taken together, effectively do not restrict modification of the
-portions of the Library contained in the Combined Work and reverse
-engineering for debugging such modifications, if you also do each of
-the following:
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
 
-   a) Give prominent notice with each copy of the Combined Work that
-   the Library is used in it and that the Library and its use are
-   covered by this License.
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
 
-   b) Accompany the Combined Work with a copy of the GNU GPL and this license
-   document.
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
 
-   c) For a Combined Work that displays copyright notices during
-   execution, include the copyright notice for the Library among
-   these notices, as well as a reference directing the user to the
-   copies of the GNU GPL and this license document.
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
 
-   d) Do one of the following:
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
 
-       0) Convey the Minimal Corresponding Source under the terms of this
-       License, and the Corresponding Application Code in a form
-       suitable for, and under terms that permit, the user to
-       recombine or relink the Application with a modified version of
-       the Linked Version to produce a modified Combined Work, in the
-       manner specified by section 6 of the GNU GPL for conveying
-       Corresponding Source.
+  The Corresponding Source for a work in source code form is that
+same work.
 
-       1) Use a suitable shared library mechanism for linking with the
-       Library.  A suitable mechanism is one that (a) uses at run time
-       a copy of the Library already present on the user's computer
-       system, and (b) will operate properly with a modified version
-       of the Library that is interface-compatible with the Linked
-       Version.
+  2. Basic Permissions.
 
-   e) Provide Installation Information, but only if you would otherwise
-   be required to provide such information under section 6 of the
-   GNU GPL, and only to the extent that such information is
-   necessary to install and execute a modified version of the
-   Combined Work produced by recombining or relinking the
-   Application with a modified version of the Linked Version. (If
-   you use option 4d0, the Installation Information must accompany
-   the Minimal Corresponding Source and Corresponding Application
-   Code. If you use option 4d1, you must provide the Installation
-   Information in the manner specified by section 6 of the GNU GPL
-   for conveying Corresponding Source.)
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
 
-  5. Combined Libraries.
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
 
-  You may place library facilities that are a work based on the
-Library side by side in a single library together with other library
-facilities that are not Applications and are not covered by this
-License, and convey such a combined library under terms of your
-choice, if you do both of the following:
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
 
-   a) Accompany the combined library with a copy of the same work based
-   on the Library, uncombined with any other library facilities,
-   conveyed under the terms of this License.
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
 
-   b) Give prominent notice with the combined library that part of it
-   is a work based on the Library, and explaining where to find the
-   accompanying uncombined form of the same work.
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
 
-  6. Revised Versions of the GNU Lesser General Public License.
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
 
-  The Free Software Foundation may publish revised and/or new versions
-of the GNU Lesser General Public License from time to time. Such new
-versions will be similar in spirit to the present version, but may
-differ in detail to address new problems or concerns.
+  4. Conveying Verbatim Copies.
 
-  Each version is given a distinguishing version number. If the
-Library as you received it specifies that a certain numbered version
-of the GNU Lesser General Public License "or any later version"
-applies to it, you have the option of following the terms and
-conditions either of that published version or of any later version
-published by the Free Software Foundation. If the Library as you
-received it does not specify a version number of the GNU Lesser
-General Public License, you may choose any version of the GNU Lesser
-General Public License ever published by the Free Software Foundation.
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
 
-  If the Library as you received it specifies that a proxy can decide
-whether future versions of the GNU Lesser General Public License shall
-apply, that proxy's public statement of acceptance of any version is
-permanent authorization for you to choose that version for the
-Library.
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

README.md

@@ -3,8 +3,8 @@
 > The todo app to organize your life.
 
 [![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.14.0-brightgreen.svg)](https://dl.vikunja.io)
+[![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
+[![Download](https://img.shields.io/badge/download-v0.15.0-brightgreen.svg)](https://dl.vikunja.io)
 
 This is the web frontend for Vikunja, written in Vue.js.
 

cypress.json

@@ -0,0 +1,8 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "env": {
+    "API_URL": "http://localhost:3456/api/v1",
+    "TEST_SECRET": "testingS3cr3et"
+  },
+  "video": false
+}

cypress/README.md

@@ -0,0 +1,48 @@
+# Frontend Testing With Cypress
+
+## Setup
+
+* Enable the [seeder api endpoint](https://vikunja.io/docs/config-options/#testingtoken). You'll then need to add the testingtoken in `cypress.json` or set the `CYPRESS_TEST_SECRET` environment variable.
+* Basic configuration happens in the `cypress.json` file
+* Overridable with [env](https://docs.cypress.io/guides/guides/environment-variables.html#Option-3-CYPRESS)
+* Override base url with `CYPRESS_BASE_URL`
+
+## Fixtures
+
+We're using the [test endpoint](https://vikunja.io/docs/config-options/#testingtoken) of the vikunja api to 
+seed the database with test data before running the tests. 
+This ensures better reproducability of tests.
+
+## Running The Tests Locally
+
+### Using Docker
+
+The easiest way to run all frontend tests locally is by using the `docker-compose` file in this repository.
+It uses the same configuration as the CI.
+
+To use it, run
+
+```
+docker-compose up -d
+```
+
+Then, once all containers are started, run
+
+```
+docker-composer run cypress bash
+```
+
+to get a shell inside the cypress container.
+In that shell you can then execute the tests with
+
+```
+yarn test:frontend
+```
+
+### Using The Cypress Dashboard
+
+To open the Cypress Dashboard and run tests from there, run
+
+```
+yarn cypress:open
+```

cypress/docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3'
+
+services:
+  api:
+    image: vikunja/api
+    environment:
+      VIKUNJA_LOG_LEVEL: DEBUG
+      VIKUNJA_SERVICE_TESTINGTOKEN: averyLongSecretToSe33dtheDB
+  cypress:
+    image: cypress/browsers:node12.18.3-chrome87-ff82
+    volumes:
+    - ..:/project
+    - $HOME/.cache:/home/node/.cache/
+    user: node
+    working_dir: /project
+    environment:
+      CYPRESS_API_URL: http://api:3456/api/v1
+      CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB

cypress/factories/bucket.js

@@ -0,0 +1,20 @@
+import faker from 'faker'
+import {Factory} from '../support/factory'
+import {formatISO} from 'date-fns'
+
+export class BucketFactory extends Factory {
+	static table = 'buckets'
+
+	static factory() {
+		const now = new Date()
+
+		return {
+			id: '{increment}',
+			title: faker.lorem.words(3),
+			list_id: 1,
+			created_by_id: 1,
+			created: formatISO(now),
+			updated: formatISO(now)
+		}
+	}
+}

cypress/factories/link_sharing.js

@@ -0,0 +1,22 @@
+import {Factory} from '../support/factory'
+import {formatISO} from "date-fns"
+import faker from 'faker'
+
+export class LinkShareFactory extends Factory {
+	static table = 'link_sharing'
+
+	static factory() {
+		const now = new Date()
+
+		return {
+			id: '{increment}',
+			hash: faker.random.word(32),
+			list_id: 1,
+			right: 0,
+			sharing_type: 0,
+			shared_by_id: 1,
+			created: formatISO(now),
+			updated: formatISO(now)
+		}
+	}
+}

cypress/factories/list.js

@@ -0,0 +1,20 @@
+import {Factory} from '../support/factory'
+import {formatISO} from "date-fns"
+import faker from 'faker'
+
+export class ListFactory extends Factory {
+	static table = 'list'
+
+	static factory() {
+		const now = new Date()
+
+		return {
+			id: '{increment}',
+			title: faker.lorem.words(3),
+			owner_id: 1,
+			namespace_id: 1,
+			created: formatISO(now),
+			updated: formatISO(now)
+		}
+	}
+}

cypress/factories/namespace.js

@@ -0,0 +1,19 @@
+import faker from 'faker'
+import {Factory} from '../support/factory'
+import {formatISO} from 'date-fns'
+
+export class NamespaceFactory extends Factory {
+	static table = 'namespaces'
+
+	static factory() {
+		const now = new Date()
+
+		return {
+			id: '{increment}',
+			title: faker.lorem.words(3),
+			owner_id: 1,
+			created: formatISO(now),
+			updated: formatISO(now)
+		}
+	}
+}

cypress/factories/task.js

@@ -0,0 +1,23 @@
+import faker from 'faker'
+import {Factory} from '../support/factory'
+import {formatISO} from 'date-fns'
+
+export class TaskFactory extends Factory {
+	static table = 'tasks'
+
+	static factory() {
+		const now = new Date()
+
+		return {
+			id: '{increment}',
+			title: faker.lorem.words(3),
+			done: false,
+			list_id: 1,
+			created_by_id: 1,
+			is_favorite: false,
+			index: '{increment}',
+			created: formatISO(now),
+			updated: formatISO(now)
+		}
+	}
+}

cypress/factories/task_comment.js

@@ -0,0 +1,19 @@
+import faker from 'faker'
+
+import {Factory} from '../support/factory'
+import {formatISO} from "date-fns"
+
+export class TaskCommentFactory extends Factory {
+	static table = 'task_comments'
+
+	static factory() {
+		return {
+			id: '{increment}',
+			comment: faker.lorem.text(3),
+			author_id: 1,
+			task_id: 1,
+			created: formatISO(now),
+			updated: formatISO(now)
+		}
+	}
+}

cypress/factories/team.js

@@ -0,0 +1,18 @@
+import faker from 'faker'
+import {Factory} from '../support/factory'
+import {formatISO} from 'date-fns'
+
+export class TeamFactory extends Factory {
+    static table = 'teams'
+
+    static factory() {
+        const now = new Date()
+
+        return {
+            name: faker.lorem.words(3),
+            created_by_id: 1,
+			created: formatISO(now),
+			updated: formatISO(now)
+        }
+    }
+}

cypress/factories/team_member.js

@@ -0,0 +1,15 @@
+import {Factory} from '../support/factory'
+import {formatISO} from 'date-fns'
+
+export class TeamMemberFactory extends Factory {
+    static table = 'team_members'
+
+    static factory() {
+        return {
+            team_id: 1,
+            user_id: 1,
+            admin: false,
+            created: formatISO(new Date()),
+        }
+    }
+}

cypress/factories/user.js

@@ -0,0 +1,21 @@
+import faker from 'faker'
+
+import {Factory} from '../support/factory'
+import {formatISO} from "date-fns"
+
+export class UserFactory extends Factory {
+	static table = 'users'
+
+	static factory() {
+		const now = new Date()
+
+		return {
+            id: '{increment}',
+            username: faker.lorem.word(10) + faker.random.uuid(),
+            password: '$2a$14$dcadBoMBL9jQoOcZK8Fju.cy0Ptx2oZECkKLnaa8ekRoTFe1w7To.', // 1234
+            is_active: true,
+			created: formatISO(now),
+			updated: formatISO(now)
+		}
+	}
+}

cypress/factories/users_list.js

@@ -0,0 +1,19 @@
+import {Factory} from '../support/factory'
+import {formatISO} from "date-fns"
+
+export class UserListFactory extends Factory {
+	static table = 'users_list'
+
+	static factory() {
+		const now = new Date()
+
+		return {
+			id: '{increment}',
+			list_id: 1,
+			user_id: 1,
+			right: 0,
+			created: formatISO(now),
+			updated: formatISO(now)
+		}
+	}
+}

cypress/integration/list/list.spec.js

@@ -0,0 +1,370 @@
+import {formatISO, format} from 'date-fns'
+
+import {TaskFactory} from '../../factories/task'
+import {ListFactory} from '../../factories/list'
+import {UserListFactory} from '../../factories/users_list'
+import {UserFactory} from '../../factories/user'
+import {NamespaceFactory} from '../../factories/namespace'
+import {BucketFactory} from '../../factories/bucket'
+
+import '../../support/authenticateUser'
+
+describe('Lists', () => {
+	beforeEach(() => {
+		UserFactory.create(1)
+		NamespaceFactory.create(1)
+		const lists = ListFactory.create(1, {
+			title: 'First List'
+		})
+		TaskFactory.truncate()
+	})
+
+	it('Should create a new list', () => {
+		cy.visit('/')
+		cy.get('a.nsettings[href="/namespaces/1/list"]')
+			.click()
+		cy.url()
+			.should('contain', '/namespaces/1/list')
+		cy.get('h3')
+			.contains('Create a new list')
+		cy.get('input.input')
+			.type('New List')
+		cy.get('button.is-success')
+			.contains('Add')
+			.click()
+
+		cy.wait(1000) // Waiting until the request to create the new list is done
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+		cy.url()
+			.should('contain', '/lists/')
+		cy.get('.list-title h1')
+			.should('contain', 'New List')
+	})
+
+	it('Should redirect to a specific list view after visited', () => {
+		cy.visit('/lists/1/kanban')
+		cy.url()
+			.should('contain', '/lists/1/kanban')
+		cy.visit('/lists/1')
+		cy.url()
+			.should('contain', '/lists/1/kanban')
+	})
+
+	describe('List View', () => {
+		it('Should be an empty list', () => {
+			cy.visit('/lists/1')
+			cy.url()
+				.should('contain', '/lists/1/list')
+			cy.get('.list-title h1')
+				.should('contain', 'First List')
+			cy.get('.list-title a.icon')
+				.should('have.attr', 'href')
+				.and('include', '/lists/1/edit')
+			cy.get('.list-is-empty-notice')
+				.should('contain', 'This list is currently empty.')
+		})
+
+		it('Should navigate to the task when the title is clicked', () => {
+			const tasks = TaskFactory.create(5, {
+				id: '{increment}',
+				list_id: 1,
+			})
+			cy.visit('/lists/1/list')
+
+			cy.get('.tasks .task .tasktext')
+				.contains(tasks[0].title)
+				.first()
+				.click()
+
+			cy.url()
+				.should('contain', `/tasks/${tasks[0].id}`)
+		})
+
+		it('Should not see any elements for a list which is shared read only', () => {
+			UserFactory.create(2)
+			UserListFactory.create(1, {
+				list_id: 2,
+				user_id: 1,
+				right: 0,
+			})
+			const lists = ListFactory.create(2, {
+				owner_id: '{increment}',
+				namespace_id: '{increment}',
+			})
+			cy.visit(`/lists/${lists[1].id}/`)
+
+			cy.get('.list-title a.icon')
+				.should('not.exist')
+			cy.get('input.input[placeholder="Add a new task..."')
+				.should('not.exist')
+		})
+	})
+
+	describe('Table View', () => {
+		it('Should show a table with tasks', () => {
+			const tasks = TaskFactory.create(1)
+			cy.visit('/lists/1/table')
+
+			cy.get('.table-view table.table')
+				.should('exist')
+			cy.get('.table-view table.table')
+				.should('contain', tasks[0].title)
+		})
+
+		it('Should have working column switches', () => {
+			TaskFactory.create(1)
+			cy.visit('/lists/1/table')
+
+			cy.get('.table-view .filter-container .items .button')
+				.contains('Columns')
+				.click()
+			cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check')
+				.contains('Priority')
+				.click()
+			cy.get('.table-view .filter-container .card .card-content .fancycheckbox .check')
+				.contains('Done')
+				.click()
+
+			cy.get('.table-view table.table th')
+				.contains('Priority')
+				.should('exist')
+			cy.get('.table-view table.table th')
+				.contains('Done')
+				.should('not.exist')
+		})
+
+		it('Should navigate to the task when the title is clicked', () => {
+			const tasks = TaskFactory.create(5, {
+				id: '{increment}',
+				list_id: 1,
+			})
+			cy.visit('/lists/1/table')
+
+			cy.get('.table-view table.table a')
+				.contains(tasks[0].title)
+				.first()
+				.click()
+
+			cy.url()
+				.should('contain', `/tasks/${tasks[0].id}`)
+		})
+	})
+
+	describe('Gantt View', () => {
+		it('Hides tasks with no dates', () => {
+			TaskFactory.create(1)
+			cy.visit('/lists/1/gantt')
+
+			cy.get('.gantt-chart-container .gantt-chart.box .tasks')
+				.should('be.empty')
+		})
+
+		it('Shows tasks from the current and next month', () => {
+			const now = new Date()
+			cy.visit('/lists/1/gantt')
+
+			cy.get('.gantt-chart-container .gantt-chart.box .months')
+				.should('contain', format(now, 'MMMM'))
+				.should('contain', format(now.setMonth(now.getMonth() + 1), 'MMMM'))
+		})
+
+		it('Shows tasks with dates', () => {
+			const now = new Date()
+			const tasks = TaskFactory.create(1, {
+				start_date: formatISO(now),
+				end_date: formatISO(now.setDate(now.getDate() + 4))
+			})
+			cy.visit('/lists/1/gantt')
+
+			cy.get('.gantt-chart-container .gantt-chart.box .tasks')
+				.should('not.be.empty')
+			cy.get('.gantt-chart-container .gantt-chart.box .tasks')
+				.should('contain', tasks[0].title)
+		})
+
+		it('Shows tasks with no dates after enabling them', () => {
+			TaskFactory.create(1, {
+				start_date: null,
+				end_date: null,
+			})
+			cy.visit('/lists/1/gantt')
+
+			cy.get('.gantt-chart-container .gantt-options .fancycheckbox')
+				.contains('Show tasks which don\'t have dates set')
+				.click()
+
+			cy.get('.gantt-chart-container .gantt-chart.box .tasks')
+				.should('not.be.empty')
+			cy.get('.gantt-chart-container .gantt-chart.box .tasks .task.nodate')
+				.should('exist')
+		})
+
+		it('Drags a task around', () => {
+			const now = new Date()
+			TaskFactory.create(1, {
+				start_date: formatISO(now),
+				end_date: formatISO(now.setDate(now.getDate() + 4))
+			})
+			cy.visit('/lists/1/gantt')
+
+			cy.get('.gantt-chart-container .gantt-chart.box .tasks .task')
+				.first()
+				.trigger('mousedown', {which: 1})
+				.trigger('mousemove', {clientX: 500, clientY: 0})
+				.trigger('mouseup', {force: true})
+		})
+	})
+
+	describe('Kanban', () => {
+		let buckets
+
+		beforeEach(() => {
+			buckets = BucketFactory.create(2)
+		})
+
+		it('Shows all buckets with their tasks', () => {
+			const data = TaskFactory.create(10, {
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .title')
+				.contains(buckets[0].title)
+				.should('exist')
+			cy.get('.kanban .bucket .title')
+				.contains(buckets[1].title)
+				.should('exist')
+			cy.get('.kanban .bucket')
+				.first()
+				.should('contain', data[0].title)
+		})
+
+		it('Can add a new task to a bucket', () => {
+			const data = TaskFactory.create(2, {
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket')
+				.contains(buckets[0].title)
+				.get('.bucket-footer .button')
+				.contains('Add another task')
+				.click()
+			cy.get('.kanban .bucket')
+				.contains(buckets[0].title)
+				.get('.bucket-footer .field .control input.input')
+				.type('New Task{enter}')
+
+			cy.get('.kanban .bucket')
+				.first()
+				.should('contain', 'New Task')
+		})
+
+		it('Can create a new bucket', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket.new-bucket .button')
+				.click()
+			cy.get('.kanban .bucket.new-bucket input.input')
+				.type('New Bucket{enter}')
+
+			cy.wait(1000) // Wait for the request to finish
+			cy.get('.kanban .bucket .title')
+				.contains('New Bucket')
+				.should('exist')
+		})
+
+		it('Can set a bucket limit', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+				.first()
+				.click()
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
+				.contains('Limit: Not set')
+				.click()
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field input.input')
+				.first()
+				.type(3)
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item .field a.button.is-primary')
+				.first()
+				.click()
+
+			cy.get('.kanban .bucket .bucket-header span.limit')
+				.contains('0/3')
+				.should('exist')
+		})
+
+		it('Can rename a bucket', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .bucket-header .title')
+				.first()
+				.type('{selectall}New Bucket Title{enter}')
+			cy.get('.kanban .bucket .bucket-header .title')
+				.first()
+				.should('contain', 'New Bucket Title')
+		})
+
+		it('Can delete a bucket', () => {
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-trigger')
+				.first()
+				.click()
+			cy.get('.kanban .bucket .bucket-header .dropdown.options .dropdown-menu .dropdown-item')
+				.contains('Delete')
+				.click()
+			cy.get('.modal-mask .modal-container .modal-content .header')
+				.should('contain', 'Delete the bucket')
+			cy.get('.modal-mask .modal-container .modal-content .actions .button')
+				.contains('Do it!')
+				.click()
+
+			cy.get('.kanban .bucket .title')
+				.contains(buckets[0].title)
+				.should('not.exist')
+		})
+
+
+		// The following test does not work. It seems like vue-smooth-dnd does not use either mousemove or dragstart
+		// (not sure why this actually works at all?) and as I'm planning to swap that out for vuedraggable/sortable.js
+		// anyway, I figured it wouldn't be worth the hassle right now.
+
+//		it('Can drag tasks around', () => {
+//			const tasks = TaskFactory.create(2, {
+//				list_id: 1,
+//				bucket_id: 1,
+//			})
+//			cy.visit('/lists/1/kanban')
+//
+//			cy.get('.kanban .bucket .tasks .task')
+//				.contains(tasks[0].title)
+//				.first()
+//				.drag('.kanban .bucket:nth-child(2) .tasks .smooth-dnd-container.vertical')
+//				.trigger('mousedown', {which: 1})
+//				.trigger('mousemove', {clientX: 500, clientY: 0})
+//				.trigger('mouseup', {force: true})
+//		})
+
+		it('Should navigate to the task when the task card is clicked', () => {
+			const tasks = TaskFactory.create(5, {
+				id: '{increment}',
+				list_id: 1,
+				bucket_id: 1,
+			})
+			cy.visit('/lists/1/kanban')
+
+			cy.get('.kanban .bucket .tasks .task')
+				.contains(tasks[0].title)
+				.first()
+				.click()
+
+			cy.url()
+				.should('contain', `/tasks/${tasks[0].id}`)
+		})
+	})
+})

cypress/integration/list/namespaces.spec.js

@@ -0,0 +1,39 @@
+import {UserFactory} from '../../factories/user'
+
+import '../../support/authenticateUser'
+import {ListFactory} from '../../factories/list'
+import {NamespaceFactory} from '../../factories/namespace'
+
+describe('Namepaces', () => {
+	let namespaces
+
+	beforeEach(() => {
+		UserFactory.create(1)
+		namespaces = NamespaceFactory.create(1)
+		ListFactory.create(1)
+	})
+
+	it('Should be all there', () => {
+		cy.visit('/namespaces')
+		cy.get('.namespace h1 span')
+			.should('contain', namespaces[0].title)
+	})
+
+	it('Should create a new Namespace', () => {
+		cy.visit('/namespaces')
+		cy.get('a.button')
+			.contains('Create new namespace')
+			.click()
+		cy.url()
+			.should('contain', '/namespaces/new')
+		cy.get('h3')
+			.should('contain', 'Create a new namespace')
+		cy.get('input.input')
+			.type('New Namespace')
+		cy.get('button.is-success')
+			.contains('Add')
+			.click()
+		cy.url()
+			.should('contain', '/namespaces')
+	})
+})

cypress/integration/misc/editor.spec.js

@@ -0,0 +1,37 @@
+import {TaskFactory} from '../../factories/task'
+import {ListFactory} from '../../factories/list'
+import {NamespaceFactory} from '../../factories/namespace'
+import {UserListFactory} from '../../factories/users_list'
+
+import '../../support/authenticateUser'
+
+describe('Editor', () => {
+	beforeEach(() => {
+		NamespaceFactory.create(1)
+		const lists = ListFactory.create(1)
+		TaskFactory.truncate()
+		UserListFactory.truncate()
+	})
+
+	it('Has a preview with checkable checkboxes', () => {
+		const tasks = TaskFactory.create(1, {
+			description: `# Test Heading
+* Bullet 1
+* Bullet 2
+
+* [ ] Checklist
+* [x] Checklist checked
+`,
+		})
+
+		cy.visit(`/tasks/${tasks[0].id}`)
+		cy.get('input[type=checkbox][data-checkbox-num=0]')
+			.click()
+
+		cy.get('.task-view .details.content.description h3 span.is-small.has-text-success')
+			.contains('Saved!')
+			.should('exist')
+		cy.get('.preview.content')
+			.should('contain', 'Test Heading')
+	})
+})

cypress/integration/misc/menu.spec.js

@@ -0,0 +1,29 @@
+import '../../support/authenticateUser'
+
+describe('The Menu', () => {
+	it('Is visible by default on desktop', () => {
+		cy.get('.namespace-container')
+			.should('have.class', 'is-active')
+	})
+
+	it('Can be hidden on desktop', () => {
+		cy.get('a.menu-show-button:visible')
+			.click()
+		cy.get('.namespace-container')
+			.should('not.have.class', 'is-active')
+	})
+
+	it('Is hidden by default on mobile', () => {
+		cy.viewport('iphone-8')
+		cy.get('.namespace-container')
+			.should('not.have.class', 'is-active')
+	})
+
+	it('Is can be shown on mobile', () => {
+		cy.viewport('iphone-8')
+		cy.get('a.menu-show-button:visible')
+			.click()
+		cy.get('.namespace-container')
+			.should('have.class', 'is-active')
+	})
+})

cypress/integration/sharing/linkShare.spec.js

@@ -0,0 +1,25 @@
+import {LinkShareFactory} from '../../factories/link_sharing'
+import {ListFactory} from '../../factories/list'
+import {TaskFactory} from '../../factories/task'
+
+describe('Link shares', () => {
+	it('Can view a link share', () => {
+		const lists = ListFactory.create(1)
+		const tasks = TaskFactory.create(10, {
+			list_id: lists[0].id
+		})
+		const linkShares = LinkShareFactory.create(1, {
+			list_id: lists[0].id,
+			right: 0,
+		})
+
+		cy.visit(`/share/${linkShares[0].hash}/auth`)
+
+		cy.get('h1.title')
+			.should('contain', lists[0].title)
+		cy.get('input.input[placeholder="Add a new task..."')
+			.should('not.exist')
+		cy.get('.tasks')
+			.should('contain', tasks[0].title)
+	})
+})

cypress/integration/sharing/team.spec.js

@@ -0,0 +1,91 @@
+import {TeamFactory} from '../../factories/team'
+import {TeamMemberFactory} from '../../factories/team_member'
+import '../../support/authenticateUser'
+
+describe('Team', () => {
+    it('Creates a new team', () => {
+        TeamFactory.truncate()
+        cy.visit('/teams')
+
+        cy.get('a.button')
+            .contains('New Team')
+            .click()
+		cy.url()
+			.should('contain', '/teams/new')
+		cy.get('h3')
+			.contains('Create a new team')
+		cy.get('input.input')
+			.type('New Team')
+		cy.get('button.is-success')
+			.contains('Add')
+			.click()
+
+        cy.get('.fullpage')
+            .should('not.exist')
+		cy.url()
+            .should('contain', '/edit')
+        cy.get('.card-header .card-header-title')
+            .first()
+            .should('contain', 'Edit Team')
+    })
+
+    it('Shows all teams', () => {
+        TeamMemberFactory.create(10, {
+            team_id: '{increment}',
+        })
+        const teams = TeamFactory.create(10, {
+            id: '{increment}',
+        })
+
+        cy.visit('/teams')
+
+        cy.get('.teams.box')
+            .should('not.be.empty')
+        teams.forEach(t => {
+            cy.get('.teams.box')
+                .should('contain', t.name)
+        })
+    })
+
+    it('Allows an admin to edit the team', () => {
+        TeamMemberFactory.create(1, {
+            team_id: 1,
+            admin: true,
+        })
+        const teams = TeamFactory.create(1, {
+            id: 1,
+        })
+        
+        cy.visit('/teams/1/edit')
+        cy.get('.card input.input')
+            .first()
+            .type('{selectall}New Team Name')
+
+        cy.get('.card .button')
+            .contains('Save')
+            .click()
+        
+        cy.get('table.table td')
+            .contains('Admin')
+            .should('exist')
+        cy.get('.global-notification')
+			.should('contain', 'Success')
+    })
+
+    it('Does not allow a normal user to edit the team', () => {
+        TeamMemberFactory.create(1, {
+            team_id: 1,
+            admin: false,
+        })
+        const teams = TeamFactory.create(1, {
+            id: 1,
+        })
+        
+        cy.visit('/teams/1/edit')
+        cy.get('.card input.input')
+            .should('not.exist')
+        cy.get('table.table td')
+            .contains('Member')
+            .should('exist')
+    })
+})

cypress/integration/task/task.spec.js

@@ -0,0 +1,237 @@
+import {formatISO} from 'date-fns'
+
+import {TaskFactory} from '../../factories/task'
+import {ListFactory} from '../../factories/list'
+import {TaskCommentFactory} from '../../factories/task_comment'
+import {UserFactory} from '../../factories/user'
+import {NamespaceFactory} from '../../factories/namespace'
+import {UserListFactory} from '../../factories/users_list'
+
+import '../../support/authenticateUser'
+
+describe('Task', () => {
+	let namespaces
+	let lists
+
+	beforeEach(() => {
+		UserFactory.create(1)
+		namespaces = NamespaceFactory.create(1)
+		lists = ListFactory.create(1)
+		TaskFactory.truncate()
+		UserListFactory.truncate()
+	})
+
+	it('Should be created new', () => {
+		cy.visit('/lists/1/list')
+		cy.get('input.input[placeholder="Add a new task..."')
+			.type('New Task')
+		cy.get('button.button.is-success')
+			.contains('Add')
+			.click()
+		cy.get('.tasks .task .tasktext')
+			.first()
+			.should('contain', 'New Task')
+	})
+
+	it('Inserts new tasks at the top of the list', () => {
+		TaskFactory.create(1)
+
+		cy.visit('/lists/1/list')
+		cy.get('.list-is-empty-notice')
+			.should('not.exist')
+		cy.get('input.input[placeholder="Add a new task..."')
+			.type('New Task')
+		cy.get('button.button.is-success')
+			.contains('Add')
+			.click()
+
+		cy.wait(1000) // Wait for the request
+		cy.get('.tasks .task .tasktext')
+			.first()
+			.should('contain', 'New Task')
+	})
+
+	it('Marks a task as done', () => {
+		TaskFactory.create(1)
+
+		cy.visit('/lists/1/list')
+		cy.get('.tasks .task .fancycheckbox label.check')
+			.first()
+			.click()
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+	})
+
+	it('Can add a task to favorites', () => {
+		TaskFactory.create(1)
+
+		cy.visit('/lists/1/list')
+		cy.get('.tasks .task .favorite')
+			.first()
+			.click()
+		cy.get('.menu.namespaces-lists')
+			.should('contain', 'Favorites')
+	})
+
+	describe('Task Detail View', () => {
+		beforeEach(() => {
+			TaskCommentFactory.truncate()
+		})
+
+		it('Shows all task details', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				index: 1,
+				description: 'Lorem ipsum dolor sit amet.'
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view h1.title.input')
+				.should('contain', tasks[0].title)
+			cy.get('.task-view h1.title.task-id')
+				.should('contain', '#1')
+			cy.get('.task-view h6.subtitle')
+				.should('contain', namespaces[0].title)
+				.should('contain', lists[0].title)
+			cy.get('.task-view .details.content.description')
+				.should('contain', tasks[0].description)
+			cy.get('.task-view .action-buttons p.created')
+				.should('contain', 'Created')
+		})
+
+		it('Shows a done label for done tasks', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				index: 1,
+				done: true,
+				done_at: formatISO(new Date())
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .heading .is-done')
+				.should('exist')
+				.should('contain', 'Done')
+			cy.get('.task-view .action-buttons p.created')
+				.should('contain', 'Done')
+		})
+
+		it('Can mark a task as done', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				done: false,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Done!')
+				.click()
+
+			cy.get('.task-view .heading .is-done')
+				.should('exist')
+				.should('contain', 'Done')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+			cy.get('.task-view .action-buttons .button')
+				.should('contain', 'Mark as undone')
+		})
+
+		it('Shows a task identifier since the list has one', () => {
+			const lists = ListFactory.create(1, {
+				id: 1,
+				identifier: 'TEST',
+			})
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				list_id: lists[0].id,
+				index: 1,
+			})
+
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view h1.title.task-id')
+				.should('contain', `${lists[0].identifier}-${tasks[0].index}`)
+		})
+
+		it('Can edit the description', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				description: 'Lorem ipsum dolor sit amet.'
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .details.content.description .editor a')
+				.contains('Edit')
+				.click()
+			cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
+				.type('{selectall}New Description')
+			cy.get('.task-view .details.content.description .editor a')
+				.contains('Preview')
+				.click()
+
+			cy.get('.task-view .details.content.description h3 span.is-small.has-text-success')
+				.contains('Saved!')
+				.should('exist')
+		})
+
+		it('Can add a new comment', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .comments .media.comment .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
+				.type('{selectall}New Comment')
+			cy.get('.task-view .comments .media.comment .button.is-primary')
+				.contains('Comment')
+				.click()
+
+			cy.get('.task-view .comments .media.comment .editor')
+				.should('contain', 'New Comment')
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+		})
+
+		it('Can move a task to another list', () => {
+			const lists = ListFactory.create(2)
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				list_id: lists[0].id,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Move task')
+				.click()
+			cy.get('.task-view .content.details .field .multiselect.control .multiselect__tags .multiselect__input')
+				.type(`${lists[1].title}{enter}`)
+
+			cy.get('.task-view h6.subtitle')
+				.should('contain', namespaces[0].title)
+				.should('contain', lists[1].title)
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+		})
+
+		it('Can delete a task', () => {
+			const tasks = TaskFactory.create(1, {
+				id: 1,
+				list_id: 1,
+			})
+			cy.visit(`/tasks/${tasks[0].id}`)
+
+			cy.get('.task-view .action-buttons .button')
+				.contains('Delete task')
+				.click()
+			cy.get('.modal-mask .modal-container .modal-content .header')
+				.should('contain', 'Delete this task')
+			cy.get('.modal-mask .modal-container .modal-content .actions .button')
+				.contains('Do it!')
+				.click()
+
+			cy.get('.global-notification')
+				.should('contain', 'Success')
+			cy.url()
+				.should('contain', `/lists/${tasks[0].list_id}/`)
+		})
+	})
+})

cypress/integration/user/login.spec.js

@@ -0,0 +1,57 @@
+import {UserFactory} from '../../factories/user'
+
+const testAndAssertFailed = fixture => {
+	cy.visit('/login')
+	cy.get('input[id=username]').type(fixture.username)
+	cy.get('input[id=password]').type(fixture.password)
+	cy.get('button').contains('Login').click()
+
+	cy.wait(5000) // It can take waaaayy too long to log the user in
+	cy.url().should('include', '/')
+	cy.get('div.notification.is-danger').contains('Wrong username or password.')
+}
+
+context('Login', () => {
+	beforeEach(() => {
+		UserFactory.create(1, {
+			username: 'test',
+		})
+		cy.visit('/', {
+			onBeforeLoad(win) {
+				win.localStorage.removeItem('token')
+			},
+		})
+	})
+
+	it('Should log in with the right credentials', () => {
+		const fixture = {
+			username: 'test',
+			password: '1234',
+		}
+
+		cy.visit('/login')
+		cy.get('input[id=username]').type(fixture.username)
+		cy.get('input[id=password]').type(fixture.password)
+		cy.get('button').contains('Login').click()
+		cy.url().should('include', '/')
+		cy.get('h2').should('contain', `Hi ${fixture.username}!`)
+	})
+
+	it('Should fail with a bad password', () => {
+		const fixture = {
+			username: 'test',
+			password: '123456',
+		}
+
+		testAndAssertFailed(fixture)
+	})
+
+	it('Should fail with a bad username', () => {
+		const fixture = {
+			username: 'loremipsum',
+			password: '1234',
+		}
+
+		testAndAssertFailed(fixture)
+	})
+})

cypress/integration/user/logout.spec.js

@@ -0,0 +1,16 @@
+import '../../support/authenticateUser'
+
+describe('Log out', () => {
+	it('Logs the user out', () => {
+		cy.visit('/')
+
+		cy.get('.navbar .user .username')
+			.click()
+		cy.get('.navbar .user .dropdown-menu a.dropdown-item')
+			.contains('Logout')
+			.click()
+
+		cy.url()
+			.should('contain', '/login')
+	})
+})

cypress/integration/user/registration.spec.js

@@ -0,0 +1,49 @@
+// This test assumes no mailer is set up and all users are activated immediately.
+
+import {UserFactory} from '../../factories/user'
+
+context('Registration', () => {
+	beforeEach(() => {
+		UserFactory.create(1, {
+			username: 'test',
+		})
+		cy.visit('/', {
+			onBeforeLoad(win) {
+				win.localStorage.removeItem('token')
+			},
+		})
+	})
+
+	it('Should work without issues', () => {
+		const fixture = {
+			username: 'testuser',
+			password: '123456',
+			email: 'testuser@example.com',
+		}
+
+		cy.visit('/register')
+		cy.get('#username').type(fixture.username)
+		cy.get('#email').type(fixture.email)
+		cy.get('#password1').type(fixture.password)
+		cy.get('#password2').type(fixture.password)
+		cy.get('button#register-submit').click()
+		cy.url().should('include', '/')
+		cy.get('h2').should('contain', `Hi ${fixture.username}!`)
+	})
+
+	it('Should fail', () => {
+		const fixture = {
+			username: 'test',
+			password: '123456',
+			email: 'testuser@example.com',
+		}
+
+		cy.visit('/register')
+		cy.get('#username').type(fixture.username)
+		cy.get('#email').type(fixture.email)
+		cy.get('#password1').type(fixture.password)
+		cy.get('#password2').type(fixture.password)
+		cy.get('button#register-submit').click()
+		cy.get('div.notification.is-danger').contains('A user with this username already exists.')
+	})
+})

cypress/integration/user/settings.spec.js

@@ -0,0 +1,45 @@
+import {UserFactory} from '../../factories/user'
+
+import '../../support/authenticateUser'
+
+describe('User Settings', () => {
+	beforeEach(() => {
+		UserFactory.create(1)
+	})
+
+	it('Changes the user avatar', () => {
+		cy.visit('/user/settings')
+
+		cy.get('input[name=avatarProvider][value=upload]')
+			.click()
+		cy.get('input[type=file]')
+			.attachFile('image.jpg')
+		cy.get('.vue-handler-wrapper.vue-handler-wrapper--south .vue-simple-handler.vue-simple-handler--south')
+			.trigger('mousedown', {which: 1})
+			.trigger('mousemove', {clientY: 100})
+			.trigger('mouseup')
+		cy.get('a.button.is-primary')
+			.contains('Upload Avatar')
+			.click()
+
+		cy.wait(3000) // Wait for the request to finish
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+	})
+
+	it('Updates the name', () => {
+		cy.visit('/user/settings')
+
+		cy.get('input#newName')
+			.type('Lorem Ipsum')
+		cy.get('.card.update-name button.button.is-primary')
+			.contains('Save')
+			.click()
+
+		cy.wait(3000) // Wait for the request to finish
+		cy.get('.global-notification')
+			.should('contain', 'Success')
+		cy.get('.navbar .user .username')
+			.should('contain', 'Lorem Ipsum')
+	})
+})

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/authenticateUser.js

@@ -0,0 +1,29 @@
+
+// This authenticates a user and puts the token in local storage which allows us to perform authenticated requests.
+// Built after https://github.com/cypress-io/cypress-example-recipes/tree/bd2d6ffb33214884cab343d38e7f9e6ebffb323f/examples/logging-in__jwt
+
+import {UserFactory} from '../factories/user'
+
+let token
+
+before(() => {
+	const users = UserFactory.create(1)
+
+	cy.request('POST', `${Cypress.env('API_URL')}/login`, {
+		username: users[0].username,
+		password: '1234',
+	})
+		.its('body')
+		.then(r => {
+			token = r.token
+		})
+})
+
+beforeEach(() => {
+	cy.log(`Using token ${token} to make authenticated requests`)
+	cy.visit('/', {
+		onBeforeLoad(win) {
+			win.localStorage.setItem('token', token)
+		},
+	})
+})

cypress/support/factory.js

@@ -0,0 +1,46 @@
+import {seed} from './seed'
+import merge from 'lodash/merge'
+
+/**
+ * A factory makes it easy to seed the database with data.
+ */
+export class Factory {
+	static table = null
+
+	static factory() {
+		return {}
+	}
+
+	/**
+	 * Seeds a bunch of fake data into the database.
+	 *
+	 * Takes an override object as its single argument which will override the data from the factory.
+	 * If the value of one of the override fields is `{increment}` that value will be replaced with an incrementing
+	 * number through all created entities.
+	 *
+	 * @param override
+	 * @returns {[]}
+	 */
+	static create(count = 1, override = {}) {
+		const data = []
+
+		for (let i = 1; i <= count; i++) {
+			const entry = merge(this.factory(), override)
+			for (const e in entry) {
+				if (entry[e] === '{increment}') {
+					entry[e] = i
+				}
+			}
+			data.push(entry)
+		}
+
+		seed(this.table, data)
+
+		return data
+	}
+
+	static truncate() {
+		seed(this.table, null)
+	}
+}
+

cypress/support/index.js

@@ -0,0 +1,2 @@
+
+import 'cypress-file-upload'

cypress/support/seed.js

@@ -0,0 +1,24 @@
+/**
+ * Seeds a db table with data. If a data object is provided as the second argument, it will load the fixtures
+ * file for the table and merge the data from it with the passed data. This allows you to override specific
+ * fields of the fixtures without having to redeclare the whole fixture.
+ *
+ * Passing null as the second argument empties the table.
+ *
+ * @param table
+ * @param data
+ */
+export function seed(table, data = {}) {
+	if(data === null) {
+		data = []
+	}
+
+	cy.request({
+		method: 'PATCH',
+		url: `${Cypress.env('API_URL')}/test/${table}`,
+		headers: {
+			'Authorization': Cypress.env('TEST_SECRET'),
+		},
+		body: data,
+	})
+}

nginx.conf

@@ -39,7 +39,7 @@ http {
     # Expires map
     map $sent_http_content_type $expires {
         default                    off;
-        text/html                  epoch; # We don't cache the html for the browser to get the content
+        text/html                  max;
         text/css                   max;
         application/javascript     max;
         ~image/                    max;

package.json

@@ -4,47 +4,58 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "serve:dist": "node scripts/serve-dist.js",
+    "build": "vue-cli-service build --modern",
+    "lint": "vue-cli-service lint --ignore-pattern '*.test.*'",
+    "cypress:open": "cypress open",
+    "test:unit": "jest",
+    "test:frontend": "cypress run"
   },
   "dependencies": {
-    "bulma": "0.9.0",
-    "camel-case": "4.1.1",
+    "bulma": "0.9.1",
+    "camel-case": "4.1.2",
     "copy-to-clipboard": "3.3.1",
-    "date-fns": "2.14.0",
-    "lodash": "4.17.15",
-    "register-service-worker": "1.7.1",
-    "snake-case": "3.0.3",
-    "v-tooltip": "2.0.3",
+    "date-fns": "2.16.1",
+    "dompurify": "2.2.6",
+    "lodash": "4.17.20",
+    "marked": "1.2.7",
+    "register-service-worker": "1.7.2",
+    "snake-case": "3.0.4",
     "verte": "0.0.12",
-    "vue": "2.6.11",
-    "vue-drag-resize": "1.3.2",
-    "vue-easymde": "1.2.1",
+    "vue": "2.6.12",
+    "vue-advanced-cropper": "0.20.1",
+    "vue-drag-resize": "1.4.2",
+    "vue-easymde": "1.3.2",
+    "vue-shortkey": "3.1.7",
     "vue-smooth-dnd": "0.8.1",
-    "vuex": "3.5.1"
+    "vuex": "3.6.0"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-svg-core": "1.2.29",
-    "@fortawesome/free-regular-svg-icons": "5.13.1",
-    "@fortawesome/free-solid-svg-icons": "5.13.1",
-    "@fortawesome/vue-fontawesome": "0.1.10",
-    "@vue/cli": "4.4.6",
-    "@vue/cli-plugin-babel": "4.4.6",
-    "@vue/cli-plugin-eslint": "4.4.6",
-    "@vue/cli-plugin-pwa": "4.4.6",
-    "@vue/cli-service": "4.4.6",
-    "axios": "0.19.2",
+    "@fortawesome/fontawesome-svg-core": "1.2.32",
+    "@fortawesome/free-regular-svg-icons": "5.15.1",
+    "@fortawesome/free-solid-svg-icons": "5.15.1",
+    "@fortawesome/vue-fontawesome": "2.0.2",
+    "@vue/cli": "4.5.9",
+    "@vue/cli-plugin-babel": "4.5.9",
+    "@vue/cli-plugin-eslint": "4.5.9",
+    "@vue/cli-plugin-pwa": "4.5.9",
+    "@vue/cli-service": "4.5.9",
+    "axios": "0.21.1",
     "babel-eslint": "10.1.0",
-    "core-js": "3.6.5",
-    "eslint": "7.3.1",
-    "eslint-plugin-vue": "6.2.2",
-    "node-sass": "4.14.1",
-    "sass-loader": "8.0.2",
-    "vue-flatpickr-component": "8.1.5",
+    "cypress": "6.2.0",
+    "cypress-file-upload": "4.1.1",
+    "eslint": "7.16.0",
+    "eslint-plugin-vue": "7.3.0",
+    "faker": "5.1.0",
+    "jest": "26.6.3",
+    "node-sass": "5.0.0",
+    "sass-loader": "10.1.0",
+    "vue-flatpickr-component": "8.1.6",
     "vue-multiselect": "2.1.6",
     "vue-notification": "1.3.20",
-    "vue-router": "3.3.4",
-    "vue-template-compiler": "2.6.11"
+    "vue-router": "3.4.9",
+    "vue-template-compiler": "2.6.12",
+    "wait-on": "5.2.0"
   },
   "eslintConfig": {
     "root": true,
@@ -58,7 +69,11 @@
     "rules": {},
     "parserOptions": {
       "parser": "babel-eslint"
-    }
+    },
+    "ignorePatterns": [
+      "*.test.js",
+      "cypress/*"
+    ]
   },
   "postcss": {
     "plugins": {
@@ -70,5 +85,8 @@
     "last 2 versions",
     "not ie <= 8"
   ],
-  "license": "LGPL-3.0-or-later"
+  "license": "AGPL-3.0-or-later",
+  "jest": {
+    "testPathIgnorePatterns": ["cypress"]
+  }
 }

public/fonts/fonts.css

@@ -1,119 +0,0 @@
-/* quicksand-300 - latin */
-@font-face {
-	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 */
-	url('quicksand-v7-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-	url('quicksand-v7-latin-300.woff') format('woff'), /* Modern Browsers */
-	url('quicksand-v7-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('quicksand-v7-latin-300.svg#Quicksand') format('svg'); /* Legacy iOS */
-}
-
-/* quicksand-regular - latin */
-@font-face {
-	font-family: 'Quicksand';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: url('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 */
-	url('quicksand-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-	url('quicksand-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
-	url('quicksand-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('quicksand-v7-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
-}
-
-/* quicksand-500 - latin */
-@font-face {
-	font-family: 'Quicksand';
-	font-style: normal;
-	font-weight: 500;
-	font-display: swap;
-	src: url('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 */
-	url('quicksand-v7-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
-	url('quicksand-v7-latin-500.woff') format('woff'), /* Modern Browsers */
-	url('quicksand-v7-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('quicksand-v7-latin-500.svg#Quicksand') format('svg'); /* Legacy iOS */
-}
-
-/* quicksand-700 - latin */
-@font-face {
-	font-family: 'Quicksand';
-	font-style: normal;
-	font-weight: 700;
-	font-display: swap;
-	src: url('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 */
-	url('quicksand-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-	url('quicksand-v7-latin-700.woff') format('woff'), /* Modern Browsers */
-	url('quicksand-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('quicksand-v7-latin-700.svg#Quicksand') format('svg'); /* Legacy iOS */
-}
-
-/* open-sans-regular - latin */
-@font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 400;
-	font-display: swap;
-	src: url('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 */
-	url('open-sans-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-	url('open-sans-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
-	url('open-sans-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('open-sans-v15-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-
-/* open-sans-italic - latin */
-@font-face {
-	font-family: 'Open Sans';
-	font-style: italic;
-	font-weight: 400;
-	font-display: swap;
-	src: url('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 */
-	url('open-sans-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-	url('open-sans-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
-	url('open-sans-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('open-sans-v15-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-
-/* open-sans-700 - latin */
-@font-face {
-	font-family: 'Open Sans';
-	font-style: normal;
-	font-weight: 700;
-	font-display: swap;
-	src: url('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 */
-	url('open-sans-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-	url('open-sans-v15-latin-700.woff') format('woff'), /* Modern Browsers */
-	url('open-sans-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('open-sans-v15-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
-}
-
-/* open-sans-700italic - latin */
-@font-face {
-	font-family: 'Open Sans';
-	font-style: italic;
-	font-weight: 700;
-	font-display: swap;
-	src: url('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 */
-	url('open-sans-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
-	url('open-sans-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */
-	url('open-sans-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
-	url('open-sans-v15-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
-}

public/index.html

@@ -6,9 +6,9 @@
 	<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.">
+	<meta name="hash" content="<%= webpack.hash %>"/>
 
 	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
-	<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">
@@ -17,7 +17,6 @@
 	<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>

renovate.json

@@ -1,15 +1,6 @@
 {
   "$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"
   ]

scripts/serve-dist.js

@@ -0,0 +1,16 @@
+const path = require('path')
+const express = require('express')
+const app = express()
+
+const p = path.join(__dirname, '..', 'dist')
+const port = 8080
+
+app.use(express.static(p))
+// Handle urls set by the frontend
+app.get('*', (request, response, next) => {
+	response.sendFile(`${p}/index.html`)
+})
+app.listen(port, '127.0.0.1', () => {
+	console.log(`Serving files from ${p}`)
+	console.log(`Server started on port ${port}`)
+})

src/App.vue

@@ -1,465 +1,91 @@
 <template>
 	<div>
-		<div v-if="online">
+		<template v-if="online">
 			<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
 			<div class="offline" style="height: 0;width: 0;"></div>
-			<nav
-					class="navbar main-theme is-fixed-top"
-					:class="{'has-background': background}"
-					role="navigation"
-					aria-label="main navigation"
-					v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
-				<div class="navbar-brand">
-					<router-link :to="{name: 'home'}" class="navbar-item logo">
-						<img src="/images/logo-full-pride.svg" alt="Vikunja" v-if="(new Date()).getMonth() === 5"/>
-						<img src="/images/logo-full.svg" alt="Vikunja" v-else/>
-					</router-link>
-					<a
-							@click="menuActive = true"
-							class="menu-show-button"
-							:class="{'is-visible': !menuActive}"
-					>
-						<icon icon="bars"></icon>
-					</a>
-				</div>
-				<a
-						@click="menuActive = true"
-						class="menu-show-button"
-				>
-					<icon icon="bars"></icon>
-				</a>
-				<div class="list-title" v-if="currentList.id">
-					<h1
-							class="title"
-							:style="{ 'opacity': currentList.title === '' ? '0': '1' }">
-						{{ currentList.title === '' ? 'Loading...': currentList.title}}
-					</h1>
-					<router-link :to="{ name: 'list.edit', params: { id: currentList.id } }" class="icon">
-						<icon icon="cog" size="2x"/>
-					</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="userInfo.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">{{userInfo.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">
-										<router-link :to="{name: 'user.settings'}" class="dropdown-item">
-											Settings
-										</router-link>
-										<a @click="logout()" class="dropdown-item">
-											Logout
-										</a>
-									</div>
-								</div>
-							</transition>
-						</div>
-					</div>
-				</div>
-			</nav>
-			<div v-if="userAuthenticated && (userInfo && userInfo.type === authTypes.USER)">
-				<a @click="menuActive = false" class="menu-hide-button" v-if="menuActive">
-					<icon icon="times"></icon>
-				</a>
-				<div
-						class="app-container"
-						:class="{'has-background': background}"
-						:style="{'background-image': `url(${background})`}"
-				>
-					<div class="namespace-container" :class="{'is-active': menuActive}">
-						<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: 'tasks.range', params: {type: 'week'}}">
-									<span class="icon">
-										<icon icon="calendar-week"/>
-									</span>
-										Next Week
-									</router-link>
-								</li>
-								<li>
-									<router-link :to="{ name: 'tasks.range', params: {type: 'month'}}">
-									<span class="icon">
-										<icon :icon="['far', 'calendar-alt']"/>
-									</span>
-										Next Month
-									</router-link>
-								</li>
-								<li>
-									<router-link :to="{ name: 'teams.index'}">
-									<span class="icon">
-										<icon icon="users"/>
-									</span>
-										Teams
-									</router-link>
-								</li>
-								<li>
-									<router-link :to="{ name: 'namespaces.index'}">
-									<span class="icon">
-										<icon icon="layer-group"/>
-									</span>
-										Namespaces & Lists
-									</router-link>
-								</li>
-								<li>
-									<router-link :to="{ name: 'labels.index'}">
-									<span class="icon">
-										<icon icon="tags"/>
-									</span>
-										Labels
-									</router-link>
-								</li>
-							</ul>
-						</div>
-						<a @click="menuActive = false" class="collapse-menu-button">Collapse Menu</a>
-						<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: 'namespace.edit', 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.title + ' namespace'"
-											:to="{ name: 'list.create', params: { id: n.id} }"
-											class="nsettings"
-											:key="n.id + 'list.create'"
-											v-if="n.id > 0">
-										<span class="icon">
-											<icon icon="plus"/>
-										</span>
-									</router-link>
-									<label
-											class="menu-label"
-											v-tooltip="n.title + ' (' + n.lists.length + ')'"
-											:for="n.id + 'checker'">
-										<span class="name">
-											<span
-													class="color-bubble"
-													v-if="n.hexColor !== ''"
-													:style="{ backgroundColor: n.hexColor }">
-											</span>
-											{{n.title}} ({{n.lists.length}})
-										</span>
-									</label>
-								</div>
-								<input
-										:key="n.id + 'checker'"
-										type="checkbox"
-										checked="checked"
-										:id="n.id + 'checker'"
-										class="checkinput"/>
-								<div class="more-container" :key="n.id + 'child'">
-									<ul class="menu-list can-be-hidden">
-										<li v-for="l in n.lists" :key="l.id">
-											<router-link
-													:to="{ name: 'list.index', params: { listId: l.id} }"
-													:class="{'router-link-exact-active': currentList.id === l.id}">
-												<span class="name">
-													<span
-															class="color-bubble"
-															v-if="l.hexColor !== ''"
-															:style="{ backgroundColor: l.hexColor }">
-													</span>
-													{{l.title}}
-												</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,
-								'is-menu-enabled': menuActive,
-							}"
-					>
-						<a class="mobile-overlay" v-if="menuActive" @click="menuActive = false"></a>
-						<transition name="fade">
-							<router-view/>
-						</transition>
-					</div>
-				</div>
-			</div>
-			<div
-					v-else-if="userAuthenticated && (userInfo && userInfo.type === authTypes.LINK_SHARE)"
-					class="link-share-container"
-					:class="{'has-background': background}"
-					:style="{'background-image': `url(${background})`}"
-			>
-				<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"/>
-						<h1
-								class="title"
-								:style="{ 'opacity': currentList.title === '' ? '0': '1' }">
-							{{ currentList.title === '' ? 'Loading...': currentList.title}}
-						</h1>
-						<div class="box has-text-left view">
-							<div class="logout">
-								<a @click="logout()" class="button">
-									<span>Logout</span>
-									<span class="icon is-small">
-									<icon icon="sign-out-alt"/>
-								</span>
-								</a>
-							</div>
-							<router-view/>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div v-else>
-				<div class="noauth-container">
-					<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>
+			<top-navigation v-if="authUser"/>
+			<content-auth v-if="authUser"/>
+			<content-link-share v-else-if="authLinkShare"/>
+			<content-no-auth v-else/>
 			<notification/>
-		</div>
+		</template>
 		<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>
+
+		<transition name="fade">
+			<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
+		</transition>
 	</div>
 </template>
 
 <script>
-	import router from './router'
-	import {mapState} from 'vuex'
+import {mapState} from 'vuex'
 
-	import NamespaceService from './services/namespace'
-	import authTypes from './models/authTypes'
+import authTypes from './models/authTypes'
 
-	import swEvents from './ServiceWorker/events'
-	import Notification from './components/misc/notification'
-	import {CURRENT_LIST, IS_FULLPAGE, ONLINE} from './store/mutation-types'
+import Notification from './components/misc/notification'
+import {KEYBOARD_SHORTCUTS_ACTIVE, ONLINE} from './store/mutation-types'
+import KeyboardShortcuts from './components/misc/keyboard-shortcuts'
+import TopNavigation from '@/components/home/topNavigation'
+import ContentAuth from '@/components/home/contentAuth'
+import ContentLinkShare from '@/components/home/contentLinkShare'
+import ContentNoAuth from '@/components/home/contentNoAuth'
 
-	export default {
-		name: 'app',
-		components: {
-			Notification,
-		},
-		data() {
-			return {
-				namespaceService: NamespaceService,
-				menuActive: true,
-				currentDate: new Date(),
-				userMenuActive: false,
-				authTypes: authTypes,
-
-				// Service Worker stuff
-				updateAvailable: false,
-				registration: null,
-				refreshing: false,
-			}
-		},
-		beforeMount() {
-			// Check if the user is offline, show a message then
+export default {
+	name: 'app',
+	components: {
+		ContentNoAuth,
+		ContentLinkShare,
+		ContentAuth,
+		TopNavigation,
+		KeyboardShortcuts,
+		Notification,
+	},
+	beforeMount() {
+		this.setupOnlineStatus()
+		this.setupPasswortResetRedirect()
+		this.setupEmailVerificationRedirect()
+	},
+	beforeCreate() {
+		this.$store.dispatch('config/update')
+		this.$store.dispatch('auth/checkAuth')
+	},
+	created() {
+		// Make sure to always load the home route when running with electron
+		if (this.$route.fullPath.endsWith('frontend/index.html')) {
+			this.$router.push({name: 'home'})
+		}
+	},
+	computed: mapState({
+		authUser: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.USER),
+		authLinkShare: state => state.auth.authenticated && (state.auth.info && state.auth.info.type === authTypes.LINK_SHARE),
+		online: ONLINE,
+		keyboardShortcutsActive: KEYBOARD_SHORTCUTS_ACTIVE,
+	}),
+	methods: {
+		setupOnlineStatus() {
 			this.$store.commit(ONLINE, navigator.onLine)
-			window.addEventListener('online', () => this.$store.commit(ONLINE, navigator.onLine));
-			window.addEventListener('offline', () => this.$store.commit(ONLINE, navigator.onLine));
-
-			// Password reset
+			window.addEventListener('online', () => this.$store.commit(ONLINE, navigator.onLine))
+			window.addEventListener('offline', () => this.$store.commit(ONLINE, navigator.onLine))
+		},
+		setupPasswortResetRedirect() {
 			if (this.$route.query.userPasswordReset !== undefined) {
 				localStorage.removeItem('passwordResetToken') // Delete an eventually preexisting old token
 				localStorage.setItem('passwordResetToken', this.$route.query.userPasswordReset)
-				router.push({name: 'user.password-reset.reset'})
+				this.$router.push({name: 'user.password-reset.reset'})
 			}
-			// Email verification
+		},
+		setupEmailVerificationRedirect() {
 			if (this.$route.query.userEmailConfirm !== undefined) {
 				localStorage.removeItem('emailConfirmToken') // Delete an eventually preexisting old token
 				localStorage.setItem('emailConfirmToken', this.$route.query.userEmailConfirm)
-				router.push({name: 'user.login'})
+				this.$router.push({name: 'user.login'})
 			}
 		},
-		beforeCreate() {
-			this.$store.dispatch('config/update')
-			this.$store.dispatch('auth/checkAuth')
-				.then(() => {
-					// Check if the user is already logged in, if so, redirect them to the homepage
-					if (
-						!this.userAuthenticated &&
-						this.$route.name !== 'user.login' &&
-						this.$route.name !== 'user.password-reset.request' &&
-						this.$route.name !== 'user.password-reset.reset' &&
-						this.$route.name !== 'user.register' &&
-						this.$route.name !== 'link-share.auth'
-					) {
-						router.push({name: 'user.login'})
-					}
-
-					if (this.userAuthenticated && this.userInfo.type === authTypes.USER && (this.$route.params.name === 'home' || this.namespaces.length === 0)) {
-						this.loadNamespaces()
-					}
-				})
-		},
-		created() {
-
-			// Service worker communication
-			document.addEventListener(swEvents.SW_UPDATED, this.showRefreshUI, {once: true})
-
-			if (navigator && navigator.serviceWorker) {
-				navigator.serviceWorker.addEventListener(
-					'controllerchange', () => {
-						if (this.refreshing) return;
-						this.refreshing = true;
-						window.location.reload();
-					}
-				)
-			}
-
-			// Hide the menu by default on mobile
-			if (window.innerWidth < 770) {
-				this.menuActive = false
-			}
-
-			// Try renewing the token every time vikunja is loaded initially
-			// (When opening the browser the focus event is not fired)
-			this.$store.dispatch('auth/renewToken')
-
-			// Check if the token is still valid if the window gets focus again to maybe renew it
-			window.addEventListener('focus', () => {
-
-				if (!this.userAuthenticated) {
-					return
-				}
-
-				const expiresIn = this.userInfo.exp - +new Date() / 1000
-
-				// If the token expiry is negative, it is already expired and we have no choice but to redirect
-				// the user to the login page
-				if (expiresIn < 0) {
-					this.$store.dispatch('auth/checkAuth')
-					router.push({name: 'user.login'})
-					return
-				}
-
-				// Check if the token is valid for less than 60 hours and renew if thats the case
-				if (expiresIn < 60 * 3600) {
-					this.$store.dispatch('auth/renewToken')
-					console.log('renewed token')
-				}
-			})
-		},
-		watch: {
-			// call the method again if the route changes
-			'$route': 'doStuffAfterRoute',
-		},
-		computed: mapState({
-			userInfo: state => state.auth.info,
-			userAuthenticated: state => state.auth.authenticated,
-			motd: state => state.config.motd,
-			online: ONLINE,
-			fullpage: IS_FULLPAGE,
-			namespaces(state) {
-				return state.namespaces.namespaces.filter(n => !n.isArchived)
-			},
-			currentList: CURRENT_LIST,
-			background: 'background',
-		}),
-		methods: {
-			logout() {
-				this.$store.dispatch('auth/logout')
-				router.push({name: 'user.login'})
-			},
-			loadNamespaces() {
-				this.$store.dispatch('namespaces/loadNamespaces')
-			},
-			loadNamespacesIfNeeded(e) {
-				if (this.userAuthenticated && (this.userInfo && this.userInfo.type === authTypes.USER) && (e.name === 'home' || this.namespaces.length === 0)) {
-					this.loadNamespaces()
-				}
-			},
-			doStuffAfterRoute(e) {
-				if (this.$store.state[IS_FULLPAGE]) {
-					this.$store.commit(IS_FULLPAGE, false)
-				}
-
-				this.loadNamespacesIfNeeded(e)
-				this.userMenuActive = false
-
-				// If the menu is active on desktop, don't hide it because that would confuse the user
-				if (window.innerWidth < 770) {
-					this.menuActive = false
-				}
-
-				// Reset the current list highlight in menu if the current list is not list related.
-				if (
-					this.$route.name === 'home' ||
-					this.$route.name === 'namespace.edit' ||
-					this.$route.name === 'teams.index' ||
-					this.$route.name === 'teams.edit' ||
-					this.$route.name === 'tasks.range' ||
-					this.$route.name === 'labels.index' ||
-					this.$route.name === 'migrate.start' ||
-					this.$route.name === 'migrate.wunderlist' ||
-					this.$route.name === 'user.settings' ||
-					this.$route.name === 'namespaces.index'
-				) {
-					this.$store.commit(CURRENT_LIST, {})
-				}
-			},
-			showRefreshUI(e) {
-				console.log('recieved refresh event', e)
-				this.registration = e.detail;
-				this.updateAvailable = true;
-			},
-			refreshApp() {
-				this.updateExists = false;
-				if (!this.registration || !this.registration.waiting) {
-					return;
-				}
-				// Notify the service worker to actually do the update
-				this.registration.waiting.postMessage('skipWaiting');
-			},
-		},
-	}
+	},
+}
 </script>

src/ServiceWorker/sw.js

@@ -3,77 +3,71 @@
 
 // Cache assets
 workbox.routing.registerRoute(
-    // This regexp matches all files in precache-manifest
-    new RegExp('.+\\.(css|json|js|eot|svg|ttf|woff|woff2|png|html|txt)$'),
-    new workbox.strategies.StaleWhileRevalidate()
-);
+	// This regexp matches all files in precache-manifest
+	new RegExp('.+\\.(css|json|js|eot|svg|ttf|woff|woff2|png|html|txt)$'),
+	new workbox.strategies.StaleWhileRevalidate(),
+)
 
 // Always send api reqeusts through the network
 workbox.routing.registerRoute(
 	new RegExp('api\\/v1\\/.*$'),
-	new workbox.strategies.NetworkOnly()
-);
-
-// Cache everything else
-workbox.routing.registerRoute(
-	new RegExp('.*'),
-    new workbox.strategies.StaleWhileRevalidate()
-);
+	new workbox.strategies.NetworkOnly(),
+)
 
 // This code listens for the user's confirmation to update the app.
 self.addEventListener('message', (e) => {
 	if (!e.data) {
-		return;
+		return
 	}
 
 	switch (e.data) {
 		case 'skipWaiting':
-			self.skipWaiting();
-			break;
+			self.skipWaiting()
+			break
 		default:
 			// NOOP
-			break;
+			break
 	}
-});
+})
 
 const getBearerToken = async () => {
 	// we can't get a client that sent the current request, therefore we need
 	// to ask any controlled page for auth token
-	const allClients = await self.clients.matchAll();
-	const client = allClients.filter(client => client.type === 'window')[0];
+	const allClients = await self.clients.matchAll()
+	const client = allClients.filter(client => client.type === 'window')[0]
 
 	// if there is no page in scope, we can't get any token
 	// and we indicate it with null value
-	if(!client) {
-		return null;
+	if (!client) {
+		return null
 	}
 
 	// to communicate with a page we will use MessageChannels
 	// they expose pipe-like interface, where a receiver of
 	// a message uses one end of a port for messaging and
 	// we use the other end for listening
-	const channel = new MessageChannel();
+	const channel = new MessageChannel()
 
 	client.postMessage({
-		'action': 'getBearerToken'
-	}, [channel.port1]);
+		'action': 'getBearerToken',
+	}, [channel.port1])
 
 	// ports support only onmessage callback which
 	// is cumbersome to use, so we wrap it with Promise
 	return new Promise((resolve, reject) => {
 		channel.port2.onmessage = event => {
 			if (event.data.error) {
-				console.error('Port error', event.error);
-				reject(event.data.error);
+				console.error('Port error', event.error)
+				reject(event.data.error)
 			}
 
-			resolve(event.data.authToken);
+			resolve(event.data.authToken)
 		}
-	});
+	})
 }
 
 // Notification action
-self.addEventListener('notificationclick', function(event) {
+self.addEventListener('notificationclick', function (event) {
 	const taskId = event.notification.data.taskId
 	event.notification.close()
 
@@ -94,15 +88,15 @@ self.addEventListener('notificationclick', function(event) {
 									'Content-Type': 'application/json',
 									'Authorization': `Bearer ${token}`,
 								},
-								body: JSON.stringify({id: taskId, done: true})
-							})
-							.then(r => r.json())
-							.then(r => {
-								console.debug('Task marked as done from notification', r)
-							})
-							.catch(e => {
-								console.debug('Error marking task as done from notification', e)
+								body: JSON.stringify({id: taskId, done: true}),
 							})
+								.then(r => r.json())
+								.then(r => {
+									console.debug('Task marked as done from notification', r)
+								})
+								.catch(e => {
+									console.debug('Error marking task as done from notification', e)
+								})
 						})
 				})
 			break
@@ -112,7 +106,7 @@ self.addEventListener('notificationclick', function(event) {
 	}
 })
 
-workbox.core.clientsClaim();
+workbox.core.clientsClaim()
 // The precaching code provided by Workbox.
-self.__precacheManifest = [].concat(self.__precacheManifest || []);
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+self.__precacheManifest = [].concat(self.__precacheManifest || [])
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {})

src/components/home/contentAuth.vue

@@ -0,0 +1,114 @@
+<template>
+	<div>
+		<a @click="$store.commit('menuActive', false)" class="menu-hide-button" v-if="menuActive">
+			<icon icon="times"></icon>
+		</a>
+		<div
+			:class="{'has-background': background}"
+			:style="{'background-image': `url(${background})`}"
+			class="app-container"
+		>
+			<navigation/>
+			<div
+				:class="[
+					{
+						'fullpage-overlay': fullpage,
+						'is-menu-enabled': menuActive,
+					},
+					$route.name,
+				]"
+				class="app-content"
+			>
+				<a @click="$store.commit('menuActive', false)" class="mobile-overlay" v-if="menuActive"></a>
+				<transition name="fade">
+					<router-view/>
+				</transition>
+				<a @click="$store.commit('keyboardShortcutsActive', true)" class="keyboard-shortcuts-button">
+					<icon icon="keyboard"/>
+				</a>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE} from '@/store/mutation-types'
+import Navigation from '@/components/home/navigation'
+
+export default {
+	name: 'contentAuth',
+	components: {Navigation},
+	watch: {
+		'$route': 'doStuffAfterRoute',
+	},
+	created() {
+		this.renewTokenOnFocus()
+	},
+	computed: mapState({
+		fullpage: IS_FULLPAGE,
+		namespaces(state) {
+			return state.namespaces.namespaces.filter(n => !n.isArchived)
+		},
+		currentList: CURRENT_LIST,
+		background: 'background',
+		menuActive: MENU_ACTIVE,
+		userInfo: state => state.auth.info,
+	}),
+	methods: {
+		doStuffAfterRoute() {
+			// this.setTitle('') // Reset the title if the page component does not set one itself
+			this.$store.commit(IS_FULLPAGE, false)
+			this.hideMenuOnMobile()
+			this.resetCurrentList()
+		},
+		resetCurrentList() {
+			// Reset the current list highlight in menu if the current list is not list related.
+			if (
+				this.$route.name === 'home' ||
+				this.$route.name === 'namespace.edit' ||
+				this.$route.name === 'teams.index' ||
+				this.$route.name === 'teams.edit' ||
+				this.$route.name === 'tasks.range' ||
+				this.$route.name === 'labels.index' ||
+				this.$route.name === 'migrate.start' ||
+				this.$route.name === 'migrate.wunderlist' ||
+				this.$route.name === 'user.settings' ||
+				this.$route.name === 'namespaces.index'
+			) {
+				this.$store.commit(CURRENT_LIST, {})
+			}
+		},
+		renewTokenOnFocus() {
+			// Try renewing the token every time vikunja is loaded initially
+			// (When opening the browser the focus event is not fired)
+			this.$store.dispatch('auth/renewToken')
+
+			// Check if the token is still valid if the window gets focus again to maybe renew it
+			window.addEventListener('focus', () => {
+
+				const expiresIn = this.userInfo.exp - +new Date() / 1000
+
+				// If the token expiry is negative, it is already expired and we have no choice but to redirect
+				// the user to the login page
+				if (expiresIn < 0) {
+					this.$store.dispatch('auth/checkAuth')
+					this.$router.push({name: 'user.login'})
+					return
+				}
+
+				// Check if the token is valid for less than 60 hours and renew if thats the case
+				if (expiresIn < 60 * 3600) {
+					this.$store.dispatch('auth/renewToken')
+					console.debug('renewed token')
+				}
+			})
+		},
+		hideMenuOnMobile() {
+			if (window.innerWidth < 769) {
+				this.$store.commit(MENU_ACTIVE, false)
+			}
+		},
+	},
+}
+</script>

src/components/home/contentLinkShare.vue

@@ -0,0 +1,52 @@
+<template>
+	<div
+		:class="{'has-background': background}"
+		:style="{'background-image': `url(${background})`}"
+		class="link-share-container"
+	>
+		<div class="container has-text-centered link-share-view">
+			<div class="column is-10 is-offset-1">
+				<img alt="Vikunja" class="logo" src="/images/logo-full.svg"/>
+				<h1
+					:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
+					class="title">
+					{{ currentList.title === '' ? 'Loading...' : currentList.title }}
+				</h1>
+				<div class="box has-text-left view">
+					<div class="logout">
+						<a @click="logout()" class="button">
+							<span>Logout</span>
+							<span class="icon is-small">
+									<icon icon="sign-out-alt"/>
+								</span>
+						</a>
+					</div>
+					<router-view/>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import {CURRENT_LIST} from '@/store/mutation-types'
+
+export default {
+	name: 'contentLinkShare',
+	computed: mapState({
+		currentList: CURRENT_LIST,
+		background: 'background',
+	}),
+	methods: {
+		logout() {
+			this.$store.dispatch('auth/logout')
+			this.$router.push({name: 'user.login'})
+		},
+	},
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/home/contentNoAuth.vue

@@ -0,0 +1,43 @@
+<template>
+	<div class="noauth-container">
+		<img alt="Vikunja" src="/images/logo-full.svg"/>
+		<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>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+	name: 'contentNoAuth',
+	created() {
+		this.redirectToHome()
+	},
+	computed: mapState({
+		motd: state => state.config.motd,
+	}),
+	methods: {
+		redirectToHome() {
+			// Check if the user is already logged in and redirect them to the home page if not
+			if (
+				this.$route.name !== 'user.login' &&
+				this.$route.name !== 'user.password-reset.request' &&
+				this.$route.name !== 'user.password-reset.reset' &&
+				this.$route.name !== 'user.register' &&
+				this.$route.name !== 'link-share.auth' &&
+				this.$route.name !== 'openid.auth'
+			) {
+				this.$router.push({name: 'user.login'})
+			}
+		},
+	},
+}
+</script>

src/components/home/navigation.vue

@@ -0,0 +1,179 @@
+<template>
+	<div :class="{'is-active': menuActive}" class="namespace-container">
+		<div class="menu top-menu">
+			<router-link :to="{name: 'home'}" class="logo">
+				<img alt="Vikunja" src="/images/logo-full.svg"/>
+			</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: 'tasks.range'}">
+						<span class="icon">
+							<icon :icon="['far', 'calendar-alt']"/>
+						</span>
+						Upcoming
+					</router-link>
+				</li>
+				<li>
+					<router-link :to="{ name: 'namespaces.index'}">
+						<span class="icon">
+							<icon icon="layer-group"/>
+						</span>
+						Namespaces & Lists
+					</router-link>
+				</li>
+				<li>
+					<router-link :to="{ name: 'labels.index'}">
+						<span class="icon">
+							<icon icon="tags"/>
+						</span>
+						Labels
+					</router-link>
+				</li>
+				<li>
+					<router-link :to="{ name: 'teams.index'}">
+						<span class="icon">
+							<icon icon="users"/>
+						</span>
+						Teams
+					</router-link>
+				</li>
+			</ul>
+		</div>
+
+		<aside class="menu namespaces-lists loader-container" :class="{'is-loading': loading}">
+			<template v-for="n in namespaces">
+				<div :key="n.id">
+					<router-link
+						:to="{name: 'namespace.edit', params: {id: n.id} }"
+						class="nsettings"
+						v-if="n.id > 0"
+						v-tooltip="'Settings'">
+						<span class="icon">
+							<icon icon="cog"/>
+						</span>
+					</router-link>
+					<router-link
+						:key="n.id + 'list.create'"
+						:to="{ name: 'list.create', params: { id: n.id} }"
+						class="nsettings"
+						v-if="n.id > 0"
+						v-tooltip="'Add a new list in the ' + n.title + ' namespace'">
+						<span class="icon">
+							<icon icon="plus"/>
+						</span>
+					</router-link>
+					<label
+						:for="n.id + 'checker'"
+						class="menu-label"
+						v-tooltip="n.title + ' (' + n.lists.length + ')'">
+						<span class="name">
+							<span
+								:style="{ backgroundColor: n.hexColor }"
+								class="color-bubble"
+								v-if="n.hexColor !== ''">
+							</span>
+							{{ n.title }} ({{ n.lists.length }})
+						</span>
+					</label>
+				</div>
+				<input
+					:id="n.id + 'checker'"
+					:key="n.id + 'checker'"
+					checked="checked"
+					class="checkinput"
+					type="checkbox"/>
+				<div :key="n.id + 'child'" class="more-container">
+					<ul class="menu-list can-be-hidden">
+						<template v-for="l in n.lists">
+							<!-- This is a bit ugly but vue wouldn't want to let me filter this - probably because the lists
+									are nested inside of the namespaces makes it a lot harder.-->
+							<li :key="l.id" v-if="!l.isArchived">
+								<router-link
+									class="list-menu-link"
+									:class="{'router-link-exact-active': currentList.id === l.id}"
+									:to="{ name: 'list.index', params: { listId: l.id} }"
+									tag="span"
+								>
+									<span
+										:style="{ backgroundColor: l.hexColor }"
+										class="color-bubble"
+										v-if="l.hexColor !== ''">
+									</span>
+									<span class="list-menu-title">
+										{{ l.title }}
+									</span>
+									<span
+										:class="{'is-favorite': l.isFavorite}"
+										@click.stop="toggleFavoriteList(l)"
+										class="favorite">
+										<icon icon="star" v-if="l.isFavorite"/>
+										<icon :icon="['far', 'star']" v-else/>
+									</span>
+								</router-link>
+							</li>
+						</template>
+					</ul>
+					<label :for="n.id + 'checker'" class="hidden-hint">
+						Show hidden lists ({{ n.lists.length }})...
+					</label>
+				</div>
+			</template>
+		</aside>
+		<a class="menu-bottom-link" href="https://vikunja.io" target="_blank">Powered by Vikunja</a>
+	</div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE} from '@/store/mutation-types'
+
+export default {
+	name: 'navigation',
+	computed: mapState({
+		fullpage: IS_FULLPAGE,
+		namespaces(state) {
+			return state.namespaces.namespaces.filter(n => !n.isArchived)
+		},
+		currentList: CURRENT_LIST,
+		background: 'background',
+		menuActive: MENU_ACTIVE,
+		loading: state => state.namespaces.loading,
+	}),
+	beforeCreate() {
+		this.$store.dispatch('namespaces/loadNamespaces')
+	},
+	created() {
+		window.addEventListener('resize', this.resize)
+	},
+	mounted() {
+		this.resize()
+	},
+	methods: {
+		toggleFavoriteList(list) {
+			// The favorites pseudo list is always favorite
+			// Archived lists cannot be marked favorite
+			if (list.id === -1 || list.isArchived) {
+				return
+			}
+			this.$store.dispatch('lists/toggleListFavorite', list)
+				.catch(e => this.error(e, this))
+		},
+		resize() {
+			// Hide the menu by default on mobile
+			if (window.innerWidth < 770) {
+				this.$store.commit(MENU_ACTIVE, false)
+			} else {
+				this.$store.commit(MENU_ACTIVE, true)
+			}
+		},
+	},
+}
+</script>

src/components/home/topNavigation.vue

@@ -0,0 +1,125 @@
+<template>
+	<nav
+		:class="{'has-background': background}"
+		aria-label="main navigation"
+		class="navbar main-theme is-fixed-top"
+		role="navigation"
+	>
+		<div class="navbar-brand">
+			<router-link :to="{name: 'home'}" class="navbar-item logo">
+				<img alt="Vikunja" src="/images/logo-full-pride.svg" v-if="(new Date()).getMonth() === 5"/>
+				<img alt="Vikunja" src="/images/logo-full.svg" v-else/>
+			</router-link>
+			<a
+				@click="$store.commit('toggleMenu')"
+				class="menu-show-button"
+				@shortkey="() => $store.commit('toggleMenu')"
+				v-shortkey="['ctrl', 'e']"
+			>
+				<icon icon="bars"></icon>
+			</a>
+		</div>
+		<a
+			@click="$store.commit('toggleMenu')"
+			class="menu-show-button"
+		>
+			<icon icon="bars"></icon>
+		</a>
+		<div class="list-title" v-if="currentList.id">
+			<h1
+				:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
+				class="title">
+				{{ currentList.title === '' ? 'Loading...' : currentList.title }}
+			</h1>
+			<router-link
+				:to="{ name: 'list.edit', params: { id: currentList.id } }"
+				class="icon"
+				v-if="canWriteCurrentList">
+				<icon icon="cog" size="2x"/>
+			</router-link>
+		</div>
+		<div class="navbar-end">
+			<update/>
+			<div class="user">
+				<img :src="userAvatar" alt="" class="avatar"/>
+				<div class="dropdown is-right is-active">
+					<div class="dropdown-trigger">
+						<button @click.stop="userMenuActive = !userMenuActive" class="button noshadow">
+							<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.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">
+								<router-link :to="{name: 'user.settings'}" class="dropdown-item">
+									Settings
+								</router-link>
+								<a
+									:href="imprintUrl"
+									class="dropdown-item"
+									target="_blank"
+									v-if="imprintUrl">
+									Imprint
+								</a>
+								<a
+									:href="privacyPolicyUrl"
+									class="dropdown-item"
+									target="_blank"
+									v-if="privacyPolicyUrl">
+									Privacy policy
+								</a>
+								<a @click="$store.commit('keyboardShortcutsActive', true)" class="dropdown-item">Keyboard
+									Shortcuts</a>
+								<a @click="logout()" class="dropdown-item">
+									Logout
+								</a>
+							</div>
+						</div>
+					</transition>
+				</div>
+			</div>
+		</div>
+	</nav>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+import {CURRENT_LIST} from '@/store/mutation-types'
+import Rights from '@/models/rights.json'
+import Update from '@/components/home/update'
+
+export default {
+	name: 'topNavigation',
+	data() {
+		return {
+			userMenuActive: false,
+		}
+	},
+	components: {
+		Update,
+	},
+	created() {
+		// This will hide the menu once clicked outside of it
+		this.$nextTick(() => document.addEventListener('click', () => this.userMenuActive = false))
+	},
+	computed: mapState({
+		userInfo: state => state.auth.info,
+		userAvatar: state => state.auth.avatarUrl,
+		userAuthenticated: state => state.auth.authenticated,
+		currentList: CURRENT_LIST,
+		background: 'background',
+		imprintUrl: state => state.config.legal.imprintUrl,
+		privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
+		canWriteCurrentList: state => state.currentList.maxRight > Rights.READ,
+	}),
+	methods: {
+		logout() {
+			this.$store.dispatch('auth/logout')
+			this.$router.push({name: 'user.login'})
+		},
+	},
+}
+</script>

src/components/home/update.vue

@@ -0,0 +1,49 @@
+<template>
+	<div class="update-notification" v-if="updateAvailable">
+		<p>There is an update for Vikunja available!</p>
+		<a @click="refreshApp()" class="button is-primary noshadow">Update Now</a>
+	</div>
+</template>
+
+<script>
+import swEvents from '@/ServiceWorker/events.json'
+
+export default {
+	name: 'update',
+	data() {
+		return {
+			updateAvailable: false,
+			registration: null,
+			refreshing: false,
+		}
+	},
+	created() {
+		document.addEventListener(swEvents.SW_UPDATED, this.showRefreshUI, {once: true})
+
+		if (navigator && navigator.serviceWorker) {
+			navigator.serviceWorker.addEventListener(
+				'controllerchange', () => {
+					if (this.refreshing) return
+					this.refreshing = true
+					window.location.reload()
+				},
+			)
+		}
+	},
+	methods: {
+		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')
+		},
+	},
+}
+</script>

src/components/input/colorPicker.vue

@@ -1,12 +1,21 @@
 <template>
 	<div class="color-picker-container">
 		<verte
-				v-model="color"
-				:menuPosition="menuPosition"
-				picker="square"
-				model="hex"
-				:enableAlpha="false"
-				:rgbSliders="true"/>
+			:showHistory="true"
+			:colorHistory="[
+				'#1973ff',
+				'#7F23FF',
+				'#ff4136',
+				'#ff851b',
+				'#ffeb10',
+				'#00db60',
+			]"
+			:enableAlpha="false"
+			:menuPosition="menuPosition"
+			:rgbSliders="true"
+			model="hex"
+			picker="square"
+			v-model="color"/>
 		<a @click="reset" class="reset">
 			Reset Color
 		</a>
@@ -14,58 +23,58 @@
 </template>
 
 <script>
-	import verte from 'verte'
-	import 'verte/dist/verte.css'
+import verte from 'verte'
+import 'verte/dist/verte.css'
 
-	export default {
-		name: 'colorPicker',
-		data() {
-			return {
-				color: '',
-				lastChangeTimeout: null,
+export default {
+	name: 'colorPicker',
+	data() {
+		return {
+			color: '',
+			lastChangeTimeout: null,
+		}
+	},
+	components: {
+		verte,
+	},
+	props: {
+		value: {
+			required: true,
+		},
+		menuPosition: {
+			type: String,
+			default: 'top',
+		},
+	},
+	watch: {
+		value(newVal) {
+			this.color = newVal
+		},
+		color() {
+			this.update()
+		},
+	},
+	mounted() {
+		this.color = this.value
+	},
+	methods: {
+		update() {
+
+			if (this.lastChangeTimeout !== null) {
+				clearTimeout(this.lastChangeTimeout)
 			}
-		},
-		components: {
-			verte,
-		},
-		props: {
-			value: {
-				required: true,
-			},
-			menuPosition: {
-				type: String,
-				default: 'top',
-			},
-		},
-		watch: {
-			value(newVal) {
-				this.color = newVal
-			},
-			color() {
-				this.update()
-			},
-		},
-		mounted() {
-			this.color = this.value
-		},
-		methods: {
-			update() {
 
-				if(this.lastChangeTimeout !== null) {
-					clearTimeout(this.lastChangeTimeout)
-				}
-
-				this.lastChangeTimeout = setTimeout(() => {
-					this.$emit('input', this.color)
-					this.$emit('change')
-				}, 500)
-			},
-			reset() {
-				// FIXME: I havn't found a way to make it clear to the user the color war reset.
-				//  Not sure if verte is capable of this - it does not show the change when setting this.color = ''
-				this.color = ''
-				this.update()
-			},
+			this.lastChangeTimeout = setTimeout(() => {
+				this.$emit('input', this.color)
+				this.$emit('change')
+			}, 500)
 		},
-	}
+		reset() {
+			// FIXME: I havn't found a way to make it clear to the user the color war reset.
+			//  Not sure if verte is capable of this - it does not show the change when setting this.color = ''
+			this.color = ''
+			this.update()
+		},
+	},
+}
 </script>

src/components/input/datepicker.vue

@@ -0,0 +1,246 @@
+<template>
+	<div class="datepicker" :class="{'disabled': disabled}">
+		<a @click.stop="toggleDatePopup" class="show">
+			<template v-if="date === null">
+				{{ chooseDateLabel }}
+			</template>
+			<template v-else>
+				{{ formatDateShort(date) }}
+			</template>
+		</a>
+
+		<transition name="fade">
+			<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
+
+				<a @click.stop="() => setDate('today')" v-if="(new Date()).getHours() < 21">
+					<span class="icon">
+						<icon :icon="['far', 'calendar-alt']"/>
+					</span>
+					<span class="text">
+						<span>
+							Today
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('today') }}
+						</span>
+					</span>
+				</a>
+				<a @click.stop="() => setDate('tomorrow')">
+					<span class="icon">
+						<icon :icon="['far', 'sun']"/>
+					</span>
+					<span class="text">
+						<span>
+							Tomorrow
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('tomorrow') }}
+						</span>
+					</span>
+				</a>
+				<a @click.stop="() => setDate('nextMonday')">
+					<span class="icon">
+						<icon icon="coffee"/>
+					</span>
+					<span class="text">
+						<span>
+							Next Monday
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('nextMonday') }}
+						</span>
+					</span>
+				</a>
+				<a @click.stop="() => setDate('thisWeekend')">
+					<span class="icon">
+						<icon icon="cocktail"/>
+					</span>
+					<span class="text">
+						<span>
+							This Weekend
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('thisWeekend') }}
+						</span>
+					</span>
+				</a>
+				<a @click.stop="() => setDate('laterThisWeek')">
+					<span class="icon">
+						<icon icon="chess-knight"/>
+					</span>
+					<span class="text">
+						<span>
+							Later This Week
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('laterThisWeek') }}
+						</span>
+					</span>
+				</a>
+				<a @click.stop="() => setDate('nextWeek')">
+					<span class="icon">
+						<icon icon="forward"/>
+					</span>
+					<span class="text">
+						<span>
+							Next Week
+						</span>
+						<span class="weekday">
+							{{ getWeekdayFromStringInterval('nextWeek') }}
+						</span>
+					</span>
+				</a>
+
+				<flat-pickr
+					:config="flatPickerConfig"
+					class="input"
+					v-model="flatPickrDate"
+				/>
+
+				<a
+					class="button is-outlined is-primary has-no-shadow is-fullwidth"
+					@click="close"
+				>
+					Confirm
+				</a>
+			</div>
+		</transition>
+	</div>
+</template>
+
+<script>
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
+
+import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
+import {format} from 'date-fns'
+import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
+
+export default {
+	name: 'datepicker',
+	data() {
+		return {
+			date: null,
+			show: false,
+			changed: false,
+
+			flatPickerConfig: {
+				altFormat: 'j M Y H:i',
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				time_24hr: true,
+				inline: true,
+			},
+			// Since flatpickr dates are strings, we need to convert them to native date objects.
+			// To make that work, we need a separate variable since flatpickr does not have a change event.
+			flatPickrDate: null,
+		}
+	},
+	components: {
+		flatPickr,
+	},
+	props: {
+		value: {
+			validator: prop => prop instanceof Date || prop === null || typeof prop === 'string'
+		},
+		chooseDateLabel: {
+			type: String,
+			default: 'Choose a date'
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		}
+	},
+	mounted() {
+		this.date = this.value
+		document.addEventListener('click', this.hideDatePopup)
+	},
+	beforeDestroy() {
+		document.removeEventListener('click', this.hideDatePopup)
+	},
+	watch: {
+		value(newVal) {
+			if(newVal === null) {
+				this.date = null
+				return
+			}
+			this.date = new Date(newVal)
+		},
+		flatPickrDate(newVal) {
+			this.date = new Date(newVal)
+			this.updateData()
+		},
+	},
+	methods: {
+		updateData() {
+			this.changed = true
+			this.$emit('input', this.date)
+			this.$emit('change', this.date)
+		},
+		toggleDatePopup() {
+			if(this.disabled) {
+				return
+			}
+
+			this.show = !this.show
+		},
+		hideDatePopup(e) {
+			if (this.show) {
+
+				// We walk up the tree to see if any parent of the clicked element is the datepicker element.
+				// If it is not, we hide the popup. We're doing all this hassle to prevent the popup from closing when
+				// clicking an element of flatpickr.
+				let parent = e.target.parentElement
+				while (parent !== this.$refs.datepickerPopup) {
+					if (parent.parentElement === null) {
+						parent = null
+						break
+					}
+
+					parent = parent.parentElement
+				}
+
+				if (parent === this.$refs.datepickerPopup) {
+					return
+				}
+
+				this.close()
+			}
+		},
+		close() {
+			this.show = false
+			this.$emit('close', this.changed)
+			if(this.changed) {
+				this.changed = false
+				this.$emit('close-on-change', this.changed)
+			}
+		},
+		setDate(date) {
+			if (this.date === null) {
+				this.date = new Date()
+			}
+
+			const interval = calculateDayInterval(date)
+			const newDate = new Date()
+			newDate.setDate(newDate.getDate() + interval)
+			newDate.setHours(calculateNearestHours(newDate))
+			newDate.setMinutes(0)
+			newDate.setSeconds(0)
+			this.date = newDate
+			this.flatPickrDate = newDate
+			this.updateData()
+		},
+		getDayIntervalFromString(date) {
+			return calculateDayInterval(date)
+		},
+		getWeekdayFromStringInterval(date) {
+			const interval = calculateDayInterval(date)
+			const newDate = new Date()
+			newDate.setDate(newDate.getDate() + interval)
+			return format(newDate, 'E')
+		},
+	},
+}
+</script>

src/components/input/easymde.vue

@@ -1,96 +0,0 @@
-<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 '../../../node_modules/easymde/dist/easymde.min.css';
-
-    .CodeMirror {
-        padding: 0;
-    }
-
-    .CodeMirror-scroll {
-        padding: .5em;
-    }
-
-    .editor-toolbar {
-        background: #ffffff;
-    }
-
-    pre.CodeMirror-line{
-        margin-bottom: 0 !important;
-    }
-</style>

src/components/input/editor.vue

@@ -0,0 +1,499 @@
+<template>
+	<div :class="{'is-pulled-up': isEditEnabled}" class="editor">
+		<div class="tabs is-right" v-if="hasPreview && isEditEnabled && !hasEditBottom">
+			<ul>
+				<li :class="{'is-active': isPreviewActive}" v-if="isEditActive">
+					<a @click="showPreview">Preview</a>
+				</li>
+				<li :class="{'is-active': isEditActive}">
+					<a @click="() => {isPreviewActive = false; isEditActive = true}">Edit</a>
+				</li>
+			</ul>
+		</div>
+
+		<vue-easymde
+			:configs="config"
+			@change="bubble"
+			@input="handleInput"
+			class="content"
+			v-if="isEditActive"
+			v-model="text"/>
+
+		<div class="preview content" v-html="preview" v-if="isPreviewActive">
+		</div>
+
+		<ul class="actions">
+			<li v-for="(action, k) in bottomActions" :key="k">
+				<a @click="action.action">{{ action.title }}</a>
+			</li>
+			<template v-if="hasEditBottom">
+				<li :class="{'is-active': isPreviewActive}" v-if="isEditActive">
+					<a @click="showPreview">Preview</a>
+				</li>
+				<li :class="{'is-active': isEditActive}">
+					<a @click="() => {isPreviewActive = false; isEditActive = true}">Edit</a>
+				</li>
+			</template>
+		</ul>
+	</div>
+</template>
+
+<script>
+import VueEasymde from 'vue-easymde'
+import EasyMDE from 'easymde'
+import marked from 'marked'
+import DOMPurify from 'dompurify'
+
+import AttachmentModel from '../../models/attachment'
+import AttachmentService from '../../services/attachment'
+
+export default {
+	name: 'editor',
+	components: {
+		VueEasymde,
+	},
+	props: {
+		value: {
+			type: String,
+			default: '',
+		},
+		placeholder: {
+			type: String,
+			default: '',
+		},
+		uploadEnabled: {
+			type: Boolean,
+			default() {
+				return false
+			},
+		},
+		uploadCallback: {
+			type: Function,
+		},
+		hasPreview: {
+			type: Boolean,
+			default: true,
+		},
+		previewIsDefault: {
+			type: Boolean,
+			default: true,
+		},
+		isEditEnabled: {
+			default: true,
+		},
+		hasEditBottom: {
+			type: Boolean,
+			default: false,
+		},
+		bottomActions: {
+			default: () => [],
+		},
+	},
+	data() {
+		return {
+			text: '',
+			changeTimeout: null,
+			isEditActive: false,
+			isPreviewActive: true,
+
+			preview: '',
+			attachmentService: null,
+
+			config: {
+				autoDownloadFontAwesome: false,
+				spellChecker: false,
+				placeholder: this.placeholder,
+				uploadImage: this.uploadEnabled,
+				imageUploadFunction: this.uploadCallback,
+				minHeight: '150px',
+				toolbar: [
+					{
+						name: 'heading-1',
+						action: EasyMDE.toggleHeading1,
+						title: 'Heading 1',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+					},
+					{
+						name: 'heading-2',
+						action: EasyMDE.toggleHeading2,
+						title: 'Heading 2',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+					},
+					{
+						name: 'heading-3',
+						action: EasyMDE.toggleHeading3,
+						title: 'Heading 3',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+					},
+					{
+						name: 'heading-smaller',
+						action: EasyMDE.toggleHeadingSmaller,
+						title: 'Heading Smaller',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+					},
+					{
+						name: 'heading-bigger',
+						action: EasyMDE.toggleHeadingBigger,
+						title: 'Heading Bigger',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.2773 19.25L12.5773 4.34995C12.5773 4.34995 12.5773 4.24995 12.4773 4.24995C12.4773 4.24995 12.4773 4.14995 12.3773 4.14995C12.3773 4.14995 12.2773 4.14995 12.2773 4.04995L12.1773 3.94995H12.0773H11.9773C11.8773 3.94995 11.8773 3.94995 11.8773 3.94995H11.7773C11.6773 4.04995 11.6773 4.14995 11.5773 4.14995C11.5773 4.14995 11.5773 4.14995 11.4773 4.14995C11.4773 4.14995 11.4773 4.24995 11.3773 4.24995L11.2773 4.34995L5.67733 19.25C5.57733 19.55 5.67733 19.95 5.97733 20.05C6.07733 20.05 6.07733 20.05 6.17733 20.05C6.37733 20.05 6.67733 19.95 6.77733 19.65L7.87733 16.85H16.1773L17.2773 19.65C17.3773 19.85 17.5773 20.05 17.8773 20.05C17.9773 20.05 17.9773 20.05 18.0773 20.05C18.2773 19.85 18.4773 19.55 18.2773 19.25ZM8.27733 15.65L11.9773 6.24995L15.6773 15.65H8.27733Z"/></svg>',
+					},
+					'|',
+					{
+						name: 'bold',
+						action: EasyMDE.toggleBold,
+						title: 'Bold',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 3H6.5H15.25C18.15 3 20.5 5.36 20.5 8.25C20.5 9.8 19.81 11.19 18.73 12.15C20.37 13.04 21.5 14.76 21.5 16.75C21.5 19.64 19.15 22 16.25 22H6.5H3.5C2.95 22 2.5 21.55 2.5 21C2.5 20.45 2.95 20 3.5 20H5.5V5H3.5C2.95 5 2.5 4.55 2.5 4C2.5 3.45 2.95 3 3.5 3ZM7.5 20H16.25C18.04 20 19.5 18.54 19.5 16.75C19.5 14.96 18.04 13.5 16.25 13.5H7.5V20ZM7.5 11.5H15.25C17.04 11.5 18.5 10.04 18.5 8.25C18.5 6.46 17.04 5 15.25 5H7.5V11.5Z"/></svg>',
+					},
+					{
+						name: 'italic',
+						action: EasyMDE.toggleItalic,
+						title: 'Italic',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M14.0967 4.2H17.0001C17.3301 4.2 17.6001 3.93 17.6001 3.6C17.6001 3.27 17.3301 3 17.0001 3H10.2001C9.8701 3 9.6001 3.27 9.6001 3.6C9.6001 3.93 9.8701 4.2 10.2001 4.2H12.8748L9.90335 19.8H6.9999C6.6699 19.8 6.3999 20.07 6.3999 20.4C6.3999 20.73 6.6699 21 6.9999 21H13.7999C14.1299 21 14.3999 20.73 14.3999 20.4C14.3999 20.07 14.1299 19.8 13.7999 19.8H11.1253L14.0967 4.2Z"/></svg>',
+					},
+					{
+						name: 'strikethrough',
+						action: EasyMDE.toggleStrikethrough,
+						title: 'Strikethrough',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.25 7.17005C18.25 7.50005 17.98 7.77005 17.65 7.77005C17.32 7.77005 17.05 7.50005 17.05 7.17005V5.96005C15.97 5.12005 14.17 4.56005 12.79 4.31005C11.1 4.00005 9.51 4.30005 8.41 5.12005C7.2 6.03005 6.67 7.67005 7.19 8.88005C7.56 9.73005 8.37 10.31 8.98 10.64C9.57215 10.9644 10.1961 11.2013 10.8465 11.3999H20.4C20.73 11.3999 21 11.6699 21 11.9999C21 12.3299 20.73 12.5999 20.4 12.5999H15.3012C16.6583 13.0929 17.5255 13.7765 17.95 14.69C18.73 16.36 17.74 18.33 16.36 19.41C15.05 20.4401 13.35 21 11.54 21H11.16C9.78 20.9401 8.34 20.5301 6.95 19.85V20.3601C6.95 20.6901 6.68 20.96 6.35 20.96C6.02 20.96 5.75 20.6901 5.75 20.3601V17.36C5.75 17.03 6.02 16.76 6.35 16.76C6.68 16.76 6.95 17.03 6.95 17.36V18.5C8.35 19.2801 9.81 19.74 11.21 19.8C12.86 19.89 14.46 19.39 15.62 18.48C16.6 17.71 17.37 16.3 16.86 15.21C16.55 14.54 15.8 14.0201 14.58 13.63C13.9711 13.4331 13.3222 13.2762 12.6906 13.1235C12.6168 13.1056 12.5432 13.0878 12.47 13.07C12.4313 13.0607 12.3925 13.0514 12.3537 13.0421C11.7861 12.9055 11.2108 12.767 10.6413 12.5999H3.6C3.27 12.5999 3 12.3299 3 11.9999C3 11.6699 3.27 11.3999 3.6 11.3999H7.90288C7.04984 10.8343 6.42752 10.1363 6.09 9.36005C5.34 7.63005 6.03 5.40005 7.69 4.16005C9.05 3.15005 10.99 2.77005 13 3.13005C13.64 3.25005 15.53 3.66005 17.05 4.53005V4.17005C17.05 3.84005 17.32 3.57005 17.65 3.57005C17.98 3.57005 18.25 3.84005 18.25 4.17005V7.17005Z"/></svg>',
+					},
+					{
+						name: 'code',
+						action: EasyMDE.toggleCodeBlock,
+						title: 'Code',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.57 20.9601C8.64 20.9901 8.71 21.0001 8.78 21.0001C9.02 21.0001 9.24 20.8501 9.34 20.6101L15.79 3.81005C15.9 3.50005 15.75 3.15005 15.44 3.03005C15.14 2.92005 14.79 3.07005 14.67 3.38005L8.22 20.1801C8.11 20.4901 8.26 20.8401 8.57 20.9601ZM7.00007 18.0001C6.85007 18.0001 6.69007 17.9401 6.58007 17.8201L1.18007 12.4201C0.950068 12.1901 0.950068 11.8101 1.18007 11.5701L6.58007 6.17006C6.81007 5.94006 7.19007 5.94006 7.43007 6.17006C7.66007 6.40006 7.66007 6.78006 7.43007 7.02006L2.45007 12.0001L7.43007 16.9801C7.66007 17.2101 7.66007 17.5901 7.43007 17.8301C7.31007 17.9401 7.15007 18.0001 7.00007 18.0001ZM17 18.0001C16.85 18.0001 16.69 17.9401 16.58 17.8201C16.35 17.5901 16.35 17.2101 16.58 16.9701L21.55 12.0001L16.57 7.02006C16.34 6.79006 16.34 6.41006 16.57 6.17006C16.81 5.94006 17.19 5.94006 17.42 6.17006L22.82 11.5701C23.05 11.8001 23.05 12.1801 22.82 12.4201L17.42 17.8201C17.31 17.9401 17.15 18.0001 17 18.0001Z"/></svg>',
+					},
+					{
+						name: 'quote',
+						action: EasyMDE.toggleBlockquote,
+						title: 'Quote',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.373 5.16357H5.62695C4.79102 5.16357 4.11133 5.84326 4.11133 6.6792V16.2095C4.11133 17.0464 4.79102 17.7261 5.62695 17.7261H6.8877V21.1245C6.8877 21.3667 7.0332 21.5854 7.25684 21.6782C7.33203 21.7095 7.41016 21.7241 7.4873 21.7241C7.64258 21.7241 7.7959 21.6636 7.91113 21.5493L11.748 17.7261H19.373C20.209 17.7261 20.8887 17.0464 20.8887 16.2095V6.6792C20.8887 5.84326 20.209 5.16357 19.373 5.16357ZM19.6895 16.2095C19.6895 16.3843 19.5469 16.5269 19.373 16.5269H11.5C11.3408 16.5269 11.1895 16.5894 11.0762 16.7017L8.08691 19.6802V17.1265C8.08691 16.7954 7.81836 16.5269 7.4873 16.5269H5.62695C5.45312 16.5269 5.31055 16.3843 5.31055 16.2095V6.6792C5.31055 6.50537 5.45312 6.36279 5.62695 6.36279H19.373C19.5469 6.36279 19.6895 6.50537 19.6895 6.6792V16.2095ZM10.3431 8.45264C9.46326 8.45264 8.75 9.16589 8.75 10.0458C8.75 10.9257 9.46326 11.639 10.3431 11.639C10.4775 11.639 10.6058 11.6173 10.7305 11.5861V11.6195C10.7305 12.1322 10.3135 12.5492 9.75586 12.5492C9.4248 12.5492 9.17871 12.8177 9.17871 13.1488C9.17871 13.4799 9.46973 13.7484 9.80078 13.7484C10.9746 13.7484 11.9297 12.7933 11.9297 11.6195V10.1176L11.9294 10.1165L11.9292 10.1155C11.9297 10.1049 11.9312 10.0946 11.9326 10.0843L11.9326 10.0843C11.9345 10.0716 11.9363 10.059 11.9363 10.0458C11.9363 9.16589 11.223 8.45264 10.3431 8.45264ZM13.0637 10.0458C13.0637 9.16589 13.7771 8.45264 14.657 8.45264C15.5369 8.45264 16.2501 9.16589 16.2501 10.0458C16.2501 10.0584 16.2484 10.0706 16.2466 10.0828C16.2452 10.0929 16.2437 10.103 16.2433 10.1134C16.2433 10.1149 16.2441 10.1161 16.2441 10.1176V11.6195C16.2441 12.7933 15.2891 13.7484 14.1152 13.7484C13.7842 13.7484 13.4922 13.4799 13.4922 13.1488C13.4922 12.8177 13.7383 12.5492 14.0693 12.5492C14.6279 12.5492 15.0449 12.1322 15.0449 11.6195V11.5858C14.9202 11.6173 14.7915 11.639 14.657 11.639C13.7771 11.639 13.0637 10.9257 13.0637 10.0458Z"/></svg>',
+					},
+					{
+						name: 'unordered-list',
+						action: EasyMDE.toggleUnorderedList,
+						title: 'Unordered List',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.5281 3.7002H3.5281C3.1981 3.7002 2.9281 3.9702 2.9281 4.3002V7.3002C2.9281 7.6302 3.1981 7.9002 3.5281 7.9002H6.5281C6.8581 7.9002 7.1281 7.6302 7.1281 7.3002V4.3002C7.1281 3.9702 6.8581 3.7002 6.5281 3.7002ZM5.9281 6.7002H4.1281V4.9002H5.9281V6.7002ZM3.5281 9.90015H6.5281C6.8581 9.90015 7.1281 10.1701 7.1281 10.5001V13.5001C7.1281 13.8301 6.8581 14.1001 6.5281 14.1001H3.5281C3.1981 14.1001 2.9281 13.8301 2.9281 13.5001V10.5001C2.9281 10.1701 3.1981 9.90015 3.5281 9.90015ZM4.1281 12.9001H5.9281V11.1001H4.1281V12.9001ZM3.5281 16.1001H6.5281C6.8581 16.1001 7.1281 16.3701 7.1281 16.7001V19.7001C7.1281 20.0301 6.8581 20.3001 6.5281 20.3001H3.5281C3.1981 20.3001 2.9281 20.0301 2.9281 19.7001V16.7001C2.9281 16.3701 3.1981 16.1001 3.5281 16.1001ZM4.1281 19.1001H5.9281V17.3001H4.1281V19.1001ZM9.72817 6.4002H20.7282C21.0582 6.4002 21.3282 6.1302 21.3282 5.8002C21.3282 5.4702 21.0582 5.2002 20.7282 5.2002H9.72817C9.39817 5.2002 9.12817 5.4702 9.12817 5.8002C9.12817 6.1302 9.39817 6.4002 9.72817 6.4002ZM9.72817 11.4001H20.7282C21.0582 11.4001 21.3282 11.6701 21.3282 12.0001C21.3282 12.3301 21.0582 12.6001 20.7282 12.6001H9.72817C9.39817 12.6001 9.12817 12.3301 9.12817 12.0001C9.12817 11.6701 9.39817 11.4001 9.72817 11.4001ZM9.72817 17.6001H20.7282C21.0582 17.6001 21.3282 17.8701 21.3282 18.2001C21.3282 18.5301 21.0582 18.8001 20.7282 18.8001H9.72817C9.39817 18.8001 9.12817 18.5301 9.12817 18.2001C9.12817 17.8701 9.39817 17.6001 9.72817 17.6001Z"/></svg>',
+					},
+					{
+						name: 'ordered-list',
+						action: EasyMDE.toggleOrderedList,
+						title: 'Ordered List',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4.19494 8.29994H5.99494C6.26494 8.29994 6.49494 8.07995 6.49494 7.79994C6.49494 7.51995 6.27494 7.29994 5.99494 7.29994H5.59494V3.79994C5.59494 3.62994 5.50494 3.46994 5.36494 3.37994C5.22494 3.28994 5.04494 3.26994 4.89494 3.33994L3.89494 3.76994C3.64494 3.87994 3.52494 4.17994 3.63494 4.42994C3.74494 4.67994 4.03494 4.79994 4.29494 4.68994L4.59494 4.55994V7.29994H4.19494C3.91494 7.29994 3.69494 7.51995 3.69494 7.79994C3.69494 8.07995 3.91494 8.29994 4.19494 8.29994ZM20.195 6.39995H9.19497C8.86497 6.39995 8.59497 6.12995 8.59497 5.79995C8.59497 5.46995 8.86497 5.19995 9.19497 5.19995H20.195C20.525 5.19995 20.795 5.46995 20.795 5.79995C20.795 6.12995 20.525 6.39995 20.195 6.39995ZM3.78486 14.36H6.37486C6.65486 14.36 6.87486 14.14 6.87486 13.86C6.87486 13.58 6.65486 13.36 6.37486 13.36H4.88486C5.00486 13.23 5.12486 13.09 5.23486 12.95C5.26626 12.9151 5.29645 12.8802 5.32626 12.8458L5.32629 12.8457C5.38192 12.7814 5.43627 12.7186 5.49486 12.66C5.73486 12.4 5.98486 12.12 6.17486 11.79C6.47486 11.25 6.41486 10.63 6.01486 10.17C5.57486 9.66 4.86486 9.5 4.24486 9.74C3.74486 9.95 3.39486 10.35 3.22486 10.91C3.14486 11.18 3.29486 11.46 3.56486 11.54C3.82486 11.61 4.10486 11.46 4.18486 11.2C4.29486 10.85 4.48486 10.73 4.62486 10.67C4.88486 10.57 5.13486 10.68 5.26486 10.82C5.38486 10.96 5.40486 11.12 5.30486 11.29C5.17595 11.5202 4.99618 11.7165 4.80458 11.9257L4.75486 11.98C4.67298 12.0801 4.58283 12.1801 4.49946 12.2727L4.49945 12.2727L4.47486 12.3C4.12486 12.72 3.76486 13.13 3.40486 13.53C3.27486 13.68 3.23486 13.9 3.32486 14.07C3.41486 14.24 3.58486 14.36 3.78486 14.36ZM3.68486 20.3699C4.04486 20.5899 4.46486 20.6999 4.87486 20.6999C5.13486 20.6999 5.38486 20.6499 5.61486 20.5499C6.31486 20.2799 6.73486 19.5599 6.60486 18.8799C6.53486 18.5499 6.35486 18.2899 6.12486 18.0899C6.32486 17.8999 6.45486 17.6499 6.50486 17.3799C6.57486 17.0099 6.49486 16.6299 6.27486 16.3099C5.85486 15.6899 5.07486 15.5199 4.10486 15.8299C3.83486 15.9199 3.69486 16.1999 3.77486 16.4599C3.86486 16.7299 4.14486 16.8699 4.40486 16.7899C4.70486 16.6999 5.24486 16.5799 5.45486 16.8899C5.51486 16.9899 5.54486 17.0999 5.52486 17.1999C5.51486 17.2699 5.47486 17.3599 5.36486 17.4299C5.26486 17.4999 5.12486 17.5399 4.95486 17.5799L4.77486 17.6299C4.54486 17.6999 4.40486 17.9099 4.41486 18.1499C4.42486 18.3899 4.61486 18.5799 4.84486 18.6099C5.20486 18.6599 5.58486 18.8299 5.63486 19.0799C5.67486 19.2999 5.46486 19.5499 5.25486 19.6299C4.94486 19.7599 4.52486 19.7099 4.21486 19.5199C3.97486 19.3699 3.67486 19.4399 3.52486 19.6799C3.37486 19.9199 3.44486 20.2299 3.68486 20.3699ZM20.195 18.7999H9.19497C8.86497 18.7999 8.59497 18.5299 8.59497 18.1999C8.59497 17.8699 8.86497 17.5999 9.19497 17.5999H20.195C20.525 17.5999 20.795 17.8699 20.795 18.1999C20.795 18.5299 20.525 18.7999 20.195 18.7999ZM9.19497 12.5999H20.195C20.525 12.5999 20.795 12.3299 20.795 11.9999C20.795 11.6699 20.525 11.3999 20.195 11.3999H9.19497C8.86497 11.3999 8.59497 11.6699 8.59497 11.9999C8.59497 12.3299 8.86497 12.5999 9.19497 12.5999Z"/></svg>',
+					},
+					'|',
+					{
+						name: 'clean-block',
+						action: EasyMDE.cleanBlock,
+						title: 'Clean Block',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M9.25989 6.18384H20.4513C20.7823 6.18384 21.0509 6.45239 21.0509 6.78345V17.9749C21.0509 18.3059 20.7823 18.5745 20.4513 18.5745H9.25989C9.0929 18.5745 8.93469 18.5061 8.82043 18.384L3.6095 12.7883C3.39563 12.5579 3.39563 12.2004 3.6095 11.97L8.82043 6.37427C8.93469 6.2522 9.0929 6.18384 9.25989 6.18384ZM9.52063 17.3752H19.8517V7.38306H9.52063L4.86926 12.3792L9.52063 17.3752ZM12.7755 15.0686C12.6222 15.0686 12.4679 15.01 12.3517 14.8928C12.1173 14.6584 12.1173 14.2786 12.3517 14.0452L14.0503 12.3469L12.3517 10.6487C12.1173 10.4153 12.1173 10.0354 12.3517 9.80103C12.5841 9.56665 12.965 9.56665 13.1993 9.80103L14.8981 11.4994L16.5968 9.80103C16.8312 9.56665 17.212 9.56665 17.4445 9.80103C17.6788 10.0354 17.6788 10.4153 17.4445 10.6487L15.7458 12.3469L17.4445 14.0452C17.6788 14.2786 17.6788 14.6584 17.4445 14.8928C17.3282 15.01 17.174 15.0686 17.0206 15.0686C16.8673 15.0686 16.714 15.01 16.5968 14.8928L14.8981 13.1945L13.1993 14.8928C13.0822 15.01 12.9288 15.0686 12.7755 15.0686Z"/></svg>',
+					},
+					{
+						name: 'link',
+						action: EasyMDE.drawLink,
+						title: 'Link',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.4399 15.3452C11.4999 15.3652 11.5699 15.3752 11.6299 15.3752C11.8799 15.3752 12.1199 15.2152 12.1999 14.9652C12.2999 14.6452 12.1299 14.3052 11.8199 14.2052C11.3499 14.0452 10.9299 13.7852 10.5699 13.4152C10.1999 13.0552 9.9399 12.6452 9.7799 12.1552C9.6599 11.8252 9.5999 11.4652 9.5999 11.0952C9.5999 10.2152 9.9399 9.38518 10.5699 8.75518L15.1599 4.15518C16.4499 2.87518 18.5399 2.87518 19.8299 4.15518C20.4499 4.78518 20.7899 5.61518 20.7899 6.49518C20.7899 7.37518 20.4499 8.20518 19.8299 8.82518L16.7399 11.9052C16.5099 12.1452 16.5099 12.5252 16.7399 12.7552C16.9799 12.9852 17.3599 12.9852 17.5899 12.7552L20.6799 9.67518C21.5299 8.83518 21.9999 7.69518 21.9999 6.49518C21.9999 5.29518 21.5299 4.16518 20.6899 3.30518C18.9299 1.55518 16.0799 1.55518 14.3199 3.30518L9.7299 7.90518C8.8699 8.75518 8.3999 9.88518 8.3999 11.0952C8.3999 11.6152 8.4899 12.1152 8.6499 12.5552C8.8599 13.1952 9.2399 13.7952 9.7199 14.2652C10.1999 14.7552 10.7999 15.1352 11.4399 15.3452ZM3.32 20.6851C4.2 21.5551 5.35 21.9951 6.5 21.9951C7.65 21.9951 8.81 21.5551 9.69 20.7051L14.28 16.1051C15.14 15.2551 15.61 14.1251 15.61 12.9151C15.61 12.4551 15.54 11.9951 15.4 11.5551C15.17 10.8651 14.8 10.2551 14.28 9.73509C13.76 9.21509 13.15 8.84509 12.46 8.61509C12.14 8.51509 11.8 8.68509 11.7 8.99509C11.6 9.30509 11.77 9.64509 12.1 9.75509C12.61 9.91509 13.06 10.1951 13.44 10.5751C13.82 10.9551 14.09 11.4051 14.26 11.9151C14.36 12.2351 14.41 12.5651 14.41 12.9051C14.41 13.7951 14.06 14.6251 13.43 15.2451L8.84 19.8451C7.55 21.1251 5.46 21.1251 4.17 19.8451C3.55 19.2151 3.21 18.3951 3.21 17.5051C3.21 16.6151 3.55 15.7851 4.17 15.1651L7.35 11.9851C7.58 11.7451 7.59 11.3651 7.35 11.1351C7.11 10.9051 6.73 10.9051 6.5 11.1351L3.32 14.3151C2.47 15.1551 2 16.2851 2 17.4951C2 18.7051 2.47 19.8351 3.32 20.6851Z"/></svg>',
+					},
+					{
+						name: 'image',
+						action: EasyMDE.drawImage,
+						title: 'Image',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M4 4C2.89543 4 2 4.89543 2 6V16V17.5152V18C2 19.1046 2.89543 20 4 20H20C21.0528 20 21.9156 19.1866 21.9942 18.1539L22 18.1632V18V16V6C22 4.89543 21.1046 4 20 4H4ZM3.2 17.7V16.5642L6.78192 13.7254C6.8616 13.6622 6.97597 13.6689 7.04776 13.7409L10.3126 17.0146C10.7026 17.4056 11.3357 17.4065 11.7268 17.0165C11.7606 16.9827 11.792 16.9465 11.8207 16.9083L16.736 10.352C16.8023 10.2636 16.9277 10.2457 17.016 10.312C17.0355 10.3265 17.0521 10.3445 17.0651 10.365L20.8 16.2669V17.7C20.8 18.3075 20.3075 18.8 19.7 18.8H4.3C3.69249 18.8 3.2 18.3075 3.2 17.7ZM17.3865 8.61836L20.8 14.08V6.3C20.8 5.69249 20.3075 5.2 19.7 5.2H4.3C3.69249 5.2 3.2 5.69249 3.2 6.3V15.04L6.65054 12.2796C6.84949 12.1204 7.13629 12.1363 7.31645 12.3164L10.8369 15.8369C10.915 15.915 11.0417 15.915 11.1198 15.8369C11.1265 15.8302 16.5625 8.58336 16.5625 8.58336C16.7282 8.36245 17.0416 8.31768 17.2625 8.48336C17.3118 8.52034 17.3538 8.56611 17.3865 8.61836ZM8 8.5C8 9.32843 7.32843 10 6.5 10C5.67157 10 5 9.32843 5 8.5C5 7.67157 5.67157 7 6.5 7C7.32843 7 8 7.67157 8 8.5Z"/></svg>',
+					},
+					{
+						name: 'table',
+						action: EasyMDE.drawTable,
+						title: 'Table',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M6.18524 3.08496H19.4152C20.6752 3.08496 21.7152 4.11496 21.7152 5.38496V18.615C21.7152 19.885 20.6852 20.915 19.4152 20.915H6.18524C4.91524 20.915 3.88525 19.885 3.88525 18.615V5.38496C3.88525 4.11496 4.91524 3.08496 6.18524 3.08496ZM19.4052 19.705C20.0152 19.705 20.5052 19.215 20.5052 18.605H20.5153V5.38496C20.5153 4.77496 20.0252 4.28496 19.4152 4.28496H6.18524C5.57524 4.28496 5.08521 4.77496 5.08521 5.38496V18.605C5.08521 19.215 5.57524 19.705 6.18524 19.705H19.4052ZM17.4453 9.15503H8.15527C7.82527 9.15503 7.5553 9.42503 7.5553 9.75503C7.5553 10.085 7.82527 10.355 8.15527 10.355H17.4453C17.7753 10.355 18.0453 10.085 18.0453 9.75503C18.0453 9.42503 17.7753 9.15503 17.4453 9.15503ZM17.4453 13.635H8.15527C7.82527 13.635 7.5553 13.905 7.5553 14.235C7.5553 14.565 7.82527 14.835 8.15527 14.835H17.4453C17.7753 14.835 18.0453 14.565 18.0453 14.235C18.0453 13.905 17.7753 13.635 17.4453 13.635Z"/></svg>',
+					},
+					{
+						name: 'horizontal-rule',
+						action: EasyMDE.drawHorizontalRule,
+						title: 'Horizontal Rule',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 13H3C2.45 13 2 12.55 2 12C2 11.45 2.45 11 3 11H21C21.55 11 22 11.45 22 12C22 12.55 21.55 13 21 13Z"/></svg>',
+					},
+					'|',
+					{
+						name: 'side-by-side',
+						action: EasyMDE.toggleSideBySide,
+						title: 'Side By Side',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.4787 14.58C18.3587 14.69 18.2987 14.85 18.2987 15C18.2987 15.15 18.3587 15.31 18.4787 15.42C18.7187 15.65 19.0987 15.65 19.3287 15.42L22.3287 12.42C22.5587 12.18 22.5587 11.8 22.3287 11.57L19.3287 8.56996C19.0887 8.33996 18.7087 8.33996 18.4787 8.56996C18.2487 8.80996 18.2487 9.18996 18.4787 9.41996L20.451 11.3999L14.4487 11.3999L14.4487 4.6C14.4487 4.27 14.1787 4 13.8487 4C13.5187 4 13.2487 4.27 13.2487 4.6L13.2487 19.4C13.2487 19.73 13.5187 20 13.8487 20C14.1787 20 14.4487 19.73 14.4487 19.4L14.4487 12.5999L20.4511 12.5999L18.4787 14.58ZM9.54878 19.4L9.54878 12.5999L3.5486 12.5999L5.52867 14.58C5.75867 14.81 5.75867 15.19 5.52867 15.43C5.29867 15.66 4.91867 15.66 4.67867 15.43L1.67867 12.43C1.63274 12.384 1.5956 12.3323 1.56725 12.2774C1.53058 12.2077 1.50724 12.1299 1.50068 12.0477C1.49934 12.0317 1.49867 12.0158 1.49867 12C1.49867 11.9841 1.49933 11.9682 1.50067 11.9522C1.51454 11.778 1.60365 11.6242 1.73526 11.5234L4.67867 8.57997C4.90867 8.34997 5.28867 8.34997 5.52867 8.57997C5.75867 8.80997 5.75867 9.18997 5.52867 9.42997L3.55107 11.3999L9.54878 11.3999L9.54878 4.6C9.54878 4.27 9.81878 4 10.1488 4C10.4788 4 10.7488 4.27 10.7488 4.6L10.7488 11.9999L10.7488 19.4C10.7488 19.73 10.4788 20 10.1488 20C9.81878 20 9.54878 19.73 9.54878 19.4Z"/></svg>',
+					},
+					{
+						name: 'guide',
+						action: () => {
+							window.open('https://www.markdownguide.org/basic-syntax/', '_blank')
+						},
+						title: 'Guide',
+						icon: '<svg viewBox="0 0 24 24"><rect fill="none" rx="0" ry="0"/><path fill-rule="evenodd" clip-rule="evenodd" d="M19.4999 2.3999H6.4999C5.0699 2.3999 3.8999 3.5699 3.8999 4.9999V18.9999C3.8999 20.4299 5.0699 21.5999 6.4999 21.5999H19.4999C19.8299 21.5999 20.0999 21.3299 20.0999 20.9999V16.9999V2.9999C20.0999 2.6699 19.8299 2.3999 19.4999 2.3999ZM5.0999 4.9999V16.8118C5.50468 16.5513 5.98546 16.3999 6.4999 16.3999H18.8999V3.5999H6.4999C5.7299 3.5999 5.0999 4.2299 5.0999 4.9999ZM6.4999 17.5999H18.8999V20.3999H6.4999C5.7299 20.3999 5.0999 19.7699 5.0999 18.9999C5.0999 18.2299 5.7299 17.5999 6.4999 17.5999ZM8.4999 8.5999H15.4999C15.8299 8.5999 16.0999 8.3299 16.0999 7.9999C16.0999 7.6699 15.8299 7.3999 15.4999 7.3999H8.4999C8.1699 7.3999 7.8999 7.6699 7.8999 7.9999C7.8999 8.3299 8.1699 8.5999 8.4999 8.5999ZM15.4999 11.3999H8.4999C8.1699 11.3999 7.8999 11.6699 7.8999 11.9999C7.8999 12.3299 8.1699 12.5999 8.4999 12.5999H15.4999C15.8299 12.5999 16.0999 12.3299 16.0999 11.9999C16.0999 11.6699 15.8299 11.3999 15.4999 11.3999Z"/></svg>',
+					},
+				],
+			},
+		}
+	},
+	watch: {
+		value(newVal) {
+			this.text = newVal
+			this.$nextTick(this.renderPreview)
+		},
+		text(newVal, oldVal) {
+			if (oldVal === '') {
+				return
+			}
+			this.bubble()
+		},
+	},
+	beforeMount() {
+		this.text = this.value
+
+		if (this.previewIsDefault && this.hasPreview) {
+			this.$nextTick(this.renderPreview)
+			return
+		}
+
+		this.isPreviewActive = false
+		this.isEditActive = true
+	},
+	methods: {
+		// This gets triggered when only pasting content into the editor.
+		// A change event would not get generated by that, an input event does.
+		// Therefore, we're using this handler to catch paste events.
+		// But because this also gets triggered when typing into the editor, we give
+		// it a higher timeout to make the timouts cancel each other in that case so
+		// that in the end, only one change event is triggered to the outside per change.
+		handleInput(val) {
+			this.text = val
+			this.bubble(1000)
+		},
+		bubble(timeout = 500) {
+			if (this.changeTimeout !== null) {
+				clearTimeout(this.changeTimeout)
+			}
+
+			this.changeTimeout = setTimeout(() => {
+				this.$emit('input', this.text)
+				this.$emit('change')
+			}, timeout)
+		},
+		replaceAt(str, index, replacement) {
+			return str.substr(0, index) + replacement + str.substr(index + replacement.length)
+		},
+		findNthIndex(str, n) {
+
+			const searchChecked = '* [x] '
+			const searchUnchecked = '* [ ] '
+
+			let inChecked, inUnchecked, startIndex = 0
+			// We're building an array with all checkboxes, checked or unchecked.
+			// I've found this to be the best way to always get the results I need.
+			// The difficulty without an index is that we need to get all checkboxes, checked and unchecked
+			// and calculate our index based off that to compare it and find the checkbox we need.
+			let checkboxes = []
+
+			// Searching in two different loops for each search term since that is way easier and more predicatble
+			// More "intelligent" solutions sometimes don't have all values or duplicates.
+			// Because we're sorting and removing duplicates of them, we can safely put everything in one giant array.
+			while ((inChecked = str.indexOf(searchChecked, startIndex)) > -1) {
+				checkboxes.push(inChecked)
+				startIndex = startIndex + searchChecked.length
+			}
+
+			startIndex = 0
+			while ((inUnchecked = str.indexOf(searchUnchecked, startIndex)) > -1) {
+				checkboxes.push(inUnchecked)
+				startIndex = startIndex + searchUnchecked.length
+			}
+
+			checkboxes.sort((a, b) => a - b)
+			checkboxes = checkboxes.filter((v, i, s) => s.indexOf(v) === i && v > -1)
+
+			return checkboxes[n]
+		},
+		renderPreview() {
+			let checkboxNum = -1
+			marked.use({
+				renderer: {
+					image: (src, title, text) => {
+
+						title = title ? ` title="${title}` : ''
+
+						// If the url starts with the api url, the image is likely an attachment and
+						// we'll need to download and parse it properly.
+						if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) {
+							return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>`
+						}
+
+						return `<img src="${src}" alt="${text}" ${title}/>`
+					},
+					checkbox: (checked) => {
+						if (checked) {
+							checked = ' checked="checked"'
+						}
+
+						checkboxNum++
+						return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this._uid}"/>`
+					},
+				},
+			})
+
+			this.preview = DOMPurify.sanitize(marked(this.text))
+
+			// Since the render function is synchronous, we can't do async http requests in it.
+			// Therefore, we can't resolve the blob url at (markdown) compile time.
+			// To work around this, we modify the url after rendering it in the vue component.
+			// We're doing the whole thing in the next tick to ensure the image elements are available in the
+			// dom tree. If we're calling this right after setting this.preview it could be the images were
+			// not already made available.
+			// Some docs at https://stackoverflow.com/q/62865160/10924593
+			this.$nextTick(() => {
+				const attachmentImage = document.getElementsByClassName('attachment-image')
+				if(attachmentImage) {
+					attachmentImage.forEach(img => {
+						// The url is something like /tasks/<id>/attachments/<id>
+						const parts = img.dataset.src.substr(window.API_URL.length + 1).split('/')
+						const taskId = parseInt(parts[1])
+						const attachmentId = parseInt(parts[3])
+						const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
+
+						if (this.attachmentService === null) {
+							this.attachmentService = new AttachmentService()
+						}
+
+						this.attachmentService.getBlobUrl(attachment)
+							.then(url => {
+								img.src = url
+							})
+					})
+				}
+
+				const textCheckbox = document.getElementsByClassName(`text-checkbox-${this._uid}`)
+				if(textCheckbox) {
+					textCheckbox.forEach(check => {
+						check.removeEventListener('change', this.handleCheckboxClick)
+						check.addEventListener('change', this.handleCheckboxClick)
+					})
+				}
+			})
+		},
+		handleCheckboxClick(e) {
+			// Find the original markdown checkbox this is targeting
+			const checked = e.target.checked
+			const numMarkdownCheck = parseInt(e.target.dataset.checkboxNum)
+
+			const index = this.findNthIndex(this.text, numMarkdownCheck)
+			if (index < 0 || typeof index === 'undefined') {
+				console.log('no index found')
+				return
+			}
+			console.log(index, this.text.substr(index, 9))
+
+			if (checked) {
+				this.text = this.replaceAt(this.text, index, '* [x] ')
+			} else {
+				this.text = this.replaceAt(this.text, index, '* [ ] ')
+			}
+			this.bubble()
+			this.renderPreview()
+		},
+		showPreview() {
+			this.isPreviewActive = true
+			this.isEditActive = false
+			this.renderPreview()
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+@import '../../../node_modules/easymde/dist/easymde.min.css';
+@import '../../styles/theme/variables';
+
+.editor {
+	.tabs ul {
+		margin-left: 0;
+	}
+
+	.preview.content ul li input[type="checkbox"] {
+		margin-right: .5rem;
+	}
+}
+
+.CodeMirror {
+	padding: .5rem;
+	border: 1px solid $editor-border-color;
+
+	&-lines pre {
+		margin: 0 !important;
+	}
+}
+
+.editor-preview {
+	padding: 0;
+
+	&-side {
+		padding: .5rem;
+	}
+}
+
+.editor-toolbar {
+	background: #ffffff;
+	border-top: 1px solid $editor-border-color;
+	border-left: 1px solid $editor-border-color;
+	border-right: 1px solid $editor-border-color;
+
+	button {
+		svg {
+			vertical-align: middle;
+
+			&, rect {
+				width: 20px;
+				height: 20px;
+			}
+		}
+
+		&:after {
+			position: absolute;
+			top: 24px;
+			margin-left: -3px;
+		}
+	}
+}
+
+pre.CodeMirror-line {
+	margin-bottom: 0 !important;
+}
+
+.cm-header {
+	font-family: $vikunja-font;
+	font-weight: 400;
+}
+
+ul.actions {
+	font-size: .8em;
+	margin: 0;
+
+	li {
+		display: inline-block;
+
+		&:after {
+			content: '·';
+			padding: 0 .25rem;
+		}
+
+		&:last-child:after {
+			content: '';
+		}
+	}
+
+	&, a {
+		color: $grey;
+	}
+
+	a:hover {
+		text-decoration: underline;
+	}
+}
+
+.vue-easymde.content {
+	margin-bottom: 0 !important;
+}
+</style>

src/components/input/fancycheckbox.vue

@@ -1,9 +1,16 @@
 <template>
-	<div class="fancycheckbox" :class="{'is-disabled': disabled}">
-		<input @change="updateData" type="checkbox" :id="checkBoxId" :checked="checked" style="display: none;" :disabled="disabled">
+	<div :class="{'is-disabled': disabled}" class="fancycheckbox">
+		<input
+			:checked="checked"
+			:disabled="disabled"
+			:id="checkBoxId"
+			@change="updateData"
+			style="display: none;"
+			type="checkbox"/>
 		<label :for="checkBoxId" class="check">
-			<svg width="18px" height="18px" viewBox="0 0 18 18">
-				<path d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
+			<svg height="18px" viewBox="0 0 18 18" width="18px">
+				<path
+					d="M1,9 L1,3.5 C1,2 2,1 3.5,1 L14.5,1 C16,1 17,2 17,3.5 L17,14.5 C17,16 16,17 14.5,17 L3.5,17 C2,17 1,16 1,14.5 L1,9 Z"></path>
 				<polyline points="1 9 7 14 15 4"></polyline>
 			</svg>
 			<span>
@@ -14,41 +21,41 @@
 </template>
 
 <script>
-	export default {
-		name: 'fancycheckbox',
-		data() {
-			return {
-				checked: false,
-				checkBoxId: '',
-			}
+export default {
+	name: 'fancycheckbox',
+	data() {
+		return {
+			checked: false,
+			checkBoxId: '',
+		}
+	},
+	props: {
+		value: {
+			required: false,
 		},
-		props: {
-			value: {
-				required: false,
-			},
-			disabled: {
-				type: Boolean,
-				required: false,
-				default: false,
-			},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false,
 		},
-		watch: {
-			value(newVal) {
-				this.checked = newVal
-			},
+	},
+	watch: {
+		value(newVal) {
+			this.checked = newVal
 		},
-		mounted() {
-			this.checked = this.value
+	},
+	mounted() {
+		this.checked = this.value
+	},
+	created() {
+		this.checkBoxId = 'fancycheckbox' + Math.random()
+	},
+	methods: {
+		updateData(e) {
+			this.checked = e.target.checked
+			this.$emit('input', this.checked)
+			this.$emit('change', e.target.checked)
 		},
-		created() {
-			this.checkBoxId = 'fancycheckbox' + Math.random()
-		},
-		methods: {
-			updateData(e) {
-				this.checked = e.target.checked
-				this.$emit('input', this.checked)
-				this.$emit('change', e.target.checked)
-			},
-		},
-	}
+	},
+}
 </script>

src/components/list/partials/background-settings.vue

@@ -1,8 +1,8 @@
 <template>
 	<div
-			class="card list-background-setting loader-container"
-			v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled"
-			:class="{ 'is-loading': backgroundService.loading}">
+		:class="{ 'is-loading': backgroundService.loading}"
+		class="card list-background-setting loader-container"
+		v-if="uploadBackgroundEnabled || unsplashBackgroundEnabled">
 		<header class="card-header">
 			<p class="card-header-title">
 				Set list background
@@ -11,47 +11,47 @@
 		<div class="card-content">
 			<div class="content" v-if="uploadBackgroundEnabled">
 				<input
-						type="file"
-						ref="backgroundUploadInput"
-						@change="uploadBackground"
-						class="is-hidden"
-						accept="image/*"
+					@change="uploadBackground"
+					accept="image/*"
+					class="is-hidden"
+					ref="backgroundUploadInput"
+					type="file"
 				/>
 				<a
-						class="button is-primary"
-						:class="{'is-loading': backgroundUploadService.loading}"
-						@click="$refs.backgroundUploadInput.click()"
+					:class="{'is-loading': backgroundUploadService.loading}"
+					@click="$refs.backgroundUploadInput.click()"
+					class="button is-primary"
 				>
 					Choose a background from your pc
 				</a>
 			</div>
 			<div class="content" v-if="unsplashBackgroundEnabled">
 				<input
-						type="text"
-						placeholder="Search for a background..."
-						class="input is-expanded"
-						v-model="backgroundSearchTerm"
-						@keyup="() => newBackgroundSearch()"
-						:class="{'is-loading': backgroundService.loading}"
+					:class="{'is-loading': backgroundService.loading}"
+					@keyup="() => newBackgroundSearch()"
+					class="input is-expanded"
+					placeholder="Search for a background..."
+					type="text"
+					v-model="backgroundSearchTerm"
 				/>
 				<p class="unsplash-link"><a href="https://unsplash.com" target="_blank">Powered by Unsplash</a></p>
 				<div class="image-search-result">
 					<a
-							@click="() => setBackground(im.id)"
-							class="image"
-							v-for="im in backgroundSearchResult"
-							:style="{'background-image': `url(${backgroundThumbs[im.id]})`}"
-							:key="im.id">
-						<a class="info" :href="`https://unsplash.com/@${im.info.author}`">
+						:key="im.id"
+						:style="{'background-image': `url(${backgroundThumbs[im.id]})`}"
+						@click="() => setBackground(im.id)"
+						class="image"
+						v-for="im in backgroundSearchResult">
+						<a :href="`https://unsplash.com/@${im.info.author}`" target="_blank" class="info">
 							{{ im.info.authorName }}
 						</a>
 					</a>
 				</div>
 				<a
-						v-if="backgroundSearchResult.length > 0"
-						class="button is-primary is-centered is-load-more-button is-outlined noshadow"
-						@click="() => searchBackgrounds(currentPage + 1)"
-						:disabled="backgroundService.loading"
+					:disabled="backgroundService.loading"
+					@click="() => searchBackgrounds(currentPage + 1)"
+					class="button is-primary is-centered is-load-more-button is-outlined noshadow"
+					v-if="backgroundSearchResult.length > 0"
 				>
 					<template v-if="backgroundService.loading">
 						Loading...
@@ -66,110 +66,110 @@
 </template>
 
 <script>
-	import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
-	import BackgroundUploadService from '../../../services/backgroundUpload'
-	import {CURRENT_LIST} from '../../../store/mutation-types'
+import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
+import BackgroundUploadService from '../../../services/backgroundUpload'
+import {CURRENT_LIST} from '@/store/mutation-types'
 
-	export default {
-		name: 'background-settings',
-		data() {
-			return {
-				backgroundSearchTerm: '',
-				backgroundSearchResult: [],
-				backgroundService: null,
-				backgroundThumbs: {},
-				currentPage: 1,
-				backgroundSearchTimeout: null,
+export default {
+	name: 'background-settings',
+	data() {
+		return {
+			backgroundSearchTerm: '',
+			backgroundSearchResult: [],
+			backgroundService: null,
+			backgroundThumbs: {},
+			currentPage: 1,
+			backgroundSearchTimeout: null,
 
-				backgroundUploadService: null,
+			backgroundUploadService: null,
+		}
+	},
+	props: {
+		listId: {
+			default: 0,
+			required: true,
+		},
+	},
+	computed: {
+		unsplashBackgroundEnabled() {
+			return this.$store.state.config.enabledBackgroundProviders.includes('unsplash')
+		},
+		uploadBackgroundEnabled() {
+			return this.$store.state.config.enabledBackgroundProviders.includes('upload')
+		},
+	},
+	created() {
+		this.backgroundService = new BackgroundUnsplashService()
+		this.backgroundUploadService = new BackgroundUploadService()
+		// Show the default collection of backgrounds
+		this.newBackgroundSearch()
+	},
+	methods: {
+		newBackgroundSearch() {
+			if (!this.unsplashBackgroundEnabled) {
+				return
 			}
+			// This is an extra method to reset a few things when searching to not break loading more photos.
+			this.$set(this, 'backgroundSearchResult', [])
+			this.$set(this, 'backgroundThumbs', {})
+			this.searchBackgrounds()
 		},
-		props: {
-			listId: {
-				default: 0,
-				required: true,
+		searchBackgrounds(page = 1) {
+
+			if (this.backgroundSearchTimeout !== null) {
+				clearTimeout(this.backgroundSearchTimeout)
 			}
-		},
-		computed: {
-			unsplashBackgroundEnabled() {
-				return this.$store.state.config.enabledBackgroundProviders.includes('unsplash')
-			},
-			uploadBackgroundEnabled() {
-				return this.$store.state.config.enabledBackgroundProviders.includes('upload')
-			},
-		},
-		created() {
-			this.backgroundService = new BackgroundUnsplashService()
-			this.backgroundUploadService = new BackgroundUploadService()
-			// Show the default collection of backgrounds
-			this.newBackgroundSearch()
-		},
-		methods: {
-			newBackgroundSearch() {
-				if (!this.unsplashBackgroundEnabled) {
-					return
-				}
-				// This is an extra method to reset a few things when searching to not break loading more photos.
-				this.$set(this, 'backgroundSearchResult', [])
-				this.$set(this, 'backgroundThumbs', {})
-				this.searchBackgrounds()
-			},
-			searchBackgrounds(page = 1) {
 
-				if (this.backgroundSearchTimeout !== null) {
-					clearTimeout(this.backgroundSearchTimeout)
-				}
-
-				// We're using the timeout to not search on every keypress but with a 300ms delay.
-				// If another key is pressed within these 300ms, the last search request is dropped and a new one is scheduled.
-				this.backgroundSearchTimeout = setTimeout(() => {
-					this.currentPage = page
-					this.backgroundService.getAll({}, {s: this.backgroundSearchTerm, p: page})
-						.then(r => {
-							this.backgroundSearchResult = this.backgroundSearchResult.concat(r)
-							r.forEach(b => {
-								this.backgroundService.thumb(b)
-									.then(t => {
-										this.$set(this.backgroundThumbs, b.id, t)
-									})
-							})
+			// We're using the timeout to not search on every keypress but with a 300ms delay.
+			// If another key is pressed within these 300ms, the last search request is dropped and a new one is scheduled.
+			this.backgroundSearchTimeout = setTimeout(() => {
+				this.currentPage = page
+				this.backgroundService.getAll({}, {s: this.backgroundSearchTerm, p: page})
+					.then(r => {
+						this.backgroundSearchResult = this.backgroundSearchResult.concat(r)
+						r.forEach(b => {
+							this.backgroundService.thumb(b)
+								.then(t => {
+									this.$set(this.backgroundThumbs, b.id, t)
+								})
 						})
-						.catch(e => {
-							this.error(e, this)
-						})
-				}, 300)
-			},
-			setBackground(backgroundId) {
-				// Don't set a background if we're in the process of setting one
-				if (this.backgroundService.loading) {
-					return
-				}
-
-				this.backgroundService.update({id: backgroundId, listId: this.listId})
-					.then(l => {
-						this.$store.commit(CURRENT_LIST, l)
-						this.$store.commit('namespaces/setListInNamespaceById', l)
-						this.success({message: 'The background has been set successfully!'}, this)
 					})
 					.catch(e => {
 						this.error(e, this)
 					})
-			},
-			uploadBackground() {
-				if (this.$refs.backgroundUploadInput.files.length === 0) {
-					return
-				}
-
-				this.backgroundUploadService.create(this.listId, this.$refs.backgroundUploadInput.files[0])
-					.then(l => {
-						this.$store.commit(CURRENT_LIST, l)
-						this.$store.commit('namespaces/setListInNamespaceById', l)
-						this.success({message: 'The background has been set successfully!'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
+			}, 300)
 		},
-	}
+		setBackground(backgroundId) {
+			// Don't set a background if we're in the process of setting one
+			if (this.backgroundService.loading) {
+				return
+			}
+
+			this.backgroundService.update({id: backgroundId, listId: this.listId})
+				.then(l => {
+					this.$store.commit(CURRENT_LIST, l)
+					this.$store.commit('namespaces/setListInNamespaceById', l)
+					this.success({message: 'The background has been set successfully!'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		uploadBackground() {
+			if (this.$refs.backgroundUploadInput.files.length === 0) {
+				return
+			}
+
+			this.backgroundUploadService.create(this.listId, this.$refs.backgroundUploadInput.files[0])
+				.then(l => {
+					this.$store.commit(CURRENT_LIST, l)
+					this.$store.commit('namespaces/setListInNamespaceById', l)
+					this.success({message: 'The background has been set successfully!'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
 </script>

src/components/list/partials/filters.vue

@@ -1,6 +1,15 @@
 <template>
 	<div class="card filters">
 		<div class="card-content">
+			<fancycheckbox v-model="params.filter_include_nulls">
+				Include Tasks which don't have a value set
+			</fancycheckbox>
+			<fancycheckbox
+				v-model="filters.requireAllFilters"
+				@change="setFilterConcat()"
+			>
+				Require all filters to be true for a task to show up
+			</fancycheckbox>
 			<div class="field">
 				<label class="label">Show Done Tasks</label>
 				<div class="control">
@@ -9,144 +18,657 @@
 					</fancycheckbox>
 				</div>
 			</div>
+			<div class="field">
+				<label class="label">Priority</label>
+				<div class="control single-value-control">
+					<priority-select
+						:disabled="!filters.usePriority"
+						v-model.number="filters.priority"
+						@change="setPriority"
+					/>
+					<fancycheckbox
+						v-model="filters.usePriority"
+						@change="setPriority"
+					>
+						Enable Filter By Priority
+					</fancycheckbox>
+				</div>
+			</div>
+			<div class="field">
+				<label class="label">Percent Done</label>
+				<div class="control single-value-control">
+					<percent-done-select
+						v-model.number="filters.percentDone"
+						@change="setPercentDoneFilter"
+						:disabled="!filters.usePercentDone"
+					/>
+					<fancycheckbox
+						v-model="filters.usePercentDone"
+						@change="setPercentDoneFilter"
+					>
+						Enable Filter By Percent Done
+					</fancycheckbox>
+				</div>
+			</div>
 			<div class="field">
 				<label class="label">Due Date</label>
 				<div class="control">
 					<flat-pickr
-							class="input"
-							:config="flatPickerConfig"
-							placeholder="Due Date Range"
-							v-model="filters.dueDate"
-							@on-close="setDueDateFilter"
+						:config="flatPickerConfig"
+						@on-close="setDueDateFilter"
+						class="input"
+						placeholder="Due Date Range"
+						v-model="filters.dueDate"
 					/>
 				</div>
 			</div>
+			<div class="field">
+				<label class="label">Start Date</label>
+				<div class="control">
+					<flat-pickr
+						:config="flatPickerConfig"
+						@on-close="setStartDateFilter"
+						class="input"
+						placeholder="Start Date Range"
+						v-model="filters.startDate"
+					/>
+				</div>
+			</div>
+			<div class="field">
+				<label class="label">End Date</label>
+				<div class="control">
+					<flat-pickr
+						:config="flatPickerConfig"
+						@on-close="setEndDateFilter"
+						class="input"
+						placeholder="End Date Range"
+						v-model="filters.endDate"
+					/>
+				</div>
+			</div>
+			<div class="field">
+				<label class="label">Reminders</label>
+				<div class="control">
+					<flat-pickr
+						:config="flatPickerConfig"
+						@on-close="setReminderFilter"
+						class="input"
+						placeholder="Reminder Date Range"
+						v-model="filters.reminders"
+					/>
+				</div>
+			</div>
+
+			<div class="field">
+				<label class="label">Assignees</label>
+				<div class="control">
+					<multiselect
+						:clear-on-select="true"
+						:close-on-select="true"
+						:hide-selected="true"
+						:internal-search="true"
+						:loading="usersService.loading"
+						:multiple="true"
+						:options="foundusers"
+						:options-limit="300"
+						:searchable="true"
+						:showNoOptions="false"
+						:taggable="false"
+						@search-change="query => find('users', query)"
+						@select="() => add('users', 'assignees')"
+						@remove="() => remove('users', 'assignees')"
+						label="username"
+						placeholder="Type to search for a user..."
+						track-by="id"
+						v-model="users"
+					>
+						<template slot="clear" slot-scope="props">
+							<div
+								@mousedown.prevent.stop="clear('users', props.search)"
+								class="multiselect__clear"
+								v-if="users.length"></div>
+						</template>
+					</multiselect>
+				</div>
+			</div>
+
+			<div class="field">
+				<label class="label">Labels</label>
+				<div class="control">
+					<multiselect
+						:clear-on-select="true"
+						:close-on-select="false"
+						:hide-selected="true"
+						:internal-search="true"
+						:loading="labelService.loading"
+						:multiple="true"
+						:options="foundLabels"
+						:options-limit="300"
+						:searchable="true"
+						:showNoOptions="false"
+						@search-change="findLabels"
+						@select="label => addLabel(label)"
+						label="title"
+						placeholder="Type to search for a label..."
+						track-by="id"
+						v-model="labels"
+					>
+						<template
+							slot="tag"
+							slot-scope="{ option }">
+							<span
+								:style="{'background': option.hexColor, 'color': option.textColor}"
+								class="tag mr-2 mb-2">
+								<span>{{ option.title }}</span>
+								<a @click="removeLabel(option)" class="delete is-small"></a>
+							</span>
+						</template>
+						<template slot="clear" slot-scope="props">
+							<div
+								@mousedown.prevent.stop="clearLabels(props.search)"
+								class="multiselect__clear"
+								v-if="labels.length"></div>
+						</template>
+					</multiselect>
+				</div>
+			</div>
+
+			<template v-if="$route.name === 'filters.create' || $route.name === 'list.edit'">
+				<div class="field">
+					<label class="label">Lists</label>
+					<div class="control">
+						<multiselect
+							:clear-on-select="true"
+							:close-on-select="true"
+							:hide-selected="true"
+							:internal-search="true"
+							:loading="listsService.loading"
+							:multiple="true"
+							:options="foundlists"
+							:options-limit="300"
+							:searchable="true"
+							:showNoOptions="false"
+							:taggable="false"
+							@search-change="query => find('lists', query)"
+							@select="() => add('lists', 'list_id')"
+							@remove="() => remove('lists', 'list_id')"
+							label="title"
+							placeholder="Type to search for a list..."
+							track-by="id"
+							v-model="lists"
+						>
+							<template slot="clear" slot-scope="props">
+								<div
+									@mousedown.prevent.stop="clear('lists', props.search)"
+									class="multiselect__clear"
+									v-if="lists.length"></div>
+							</template>
+						</multiselect>
+					</div>
+				</div>
+				<div class="field">
+					<label class="label">Namespaces</label>
+					<div class="control">
+						<multiselect
+							:clear-on-select="true"
+							:close-on-select="true"
+							:hide-selected="true"
+							:internal-search="true"
+							:loading="namespaceService.loading"
+							:multiple="true"
+							:options="foundnamespace"
+							:options-limit="300"
+							:searchable="true"
+							:showNoOptions="false"
+							:taggable="false"
+							@search-change="query => find('namespace', query)"
+							@select="() => add('namespace', 'namespace')"
+							@remove="() => remove('namespace', 'namespace')"
+							label="title"
+							placeholder="Type to search for a namespace..."
+							track-by="id"
+							v-model="namespace"
+						>
+							<template slot="clear" slot-scope="props">
+								<div
+									@mousedown.prevent.stop="clear('namespace', props.search)"
+									class="multiselect__clear"
+									v-if="namespace.length"></div>
+							</template>
+						</multiselect>
+					</div>
+				</div>
+			</template>
 		</div>
 	</div>
 </template>
 
 <script>
-	import Fancycheckbox from '../../input/fancycheckbox'
-	import flatPickr from 'vue-flatpickr-component'
-	import 'flatpickr/dist/flatpickr.css'
+import Fancycheckbox from '../../input/fancycheckbox'
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
+import Multiselect from 'vue-multiselect'
 
-	export default {
-		name: 'filters',
-		components: {
-			Fancycheckbox,
-			flatPickr,
+import {formatISO} from 'date-fns'
+import differenceWith from 'lodash/differenceWith'
+
+import PrioritySelect from '@/components/tasks/partials/prioritySelect'
+import PercentDoneSelect from '@/components/tasks/partials/percentDoneSelect'
+
+import UserService from '@/services/user'
+import LabelService from '@/services/label'
+import ListService from '@/services/list'
+import NamespaceService from '@/services/namespace'
+
+export default {
+	name: 'filters',
+	components: {
+		PrioritySelect,
+		Fancycheckbox,
+		flatPickr,
+		PercentDoneSelect,
+		Multiselect,
+	},
+	data() {
+		return {
+			params: {
+				sort_by: [],
+				order_by: [],
+				filter_by: [],
+				filter_value: [],
+				filter_comparator: [],
+				filter_include_nulls: true,
+				filter_concat: 'or',
+			},
+			filters: {
+				done: false,
+				dueDate: '',
+				requireAllFilters: false,
+				priority: 0,
+				usePriority: false,
+				startDate: '',
+				endDate: '',
+				percentDone: 0,
+				usePercentDone: false,
+				reminders: '',
+				assignees: '',
+				labels: '',
+				list_id: '',
+				namespace: '',
+			},
+			flatPickerConfig: {
+				altFormat: 'j M Y H:i',
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				time_24hr: true,
+				mode: 'range',
+			},
+
+			usersService: UserService,
+			foundusers: [],
+			users: [],
+
+			labelService: LabelService,
+			foundLabels: [],
+			labels: [],
+
+			listsService: ListService,
+			foundlists: [],
+			lists: [],
+
+			namespaceService: NamespaceService,
+			foundnamespace: [],
+			namespace: [],
+		}
+	},
+	created() {
+		this.usersService = new UserService()
+		this.labelService = new LabelService()
+		this.listsService = new ListService()
+		this.namespaceService = new NamespaceService()
+	},
+	mounted() {
+		this.params = this.value
+		this.filters.requireAllFilters = this.params.filter_concat === 'and'
+		this.prepareFilters()
+	},
+	props: {
+		value: {
+			required: true,
 		},
-		data() {
-			return {
-				params: {
-					sort_by: [],
-					order_by: [],
-					filter_by: [],
-					filter_value: [],
-					filter_comparator: [],
-				},
-				filters: {
-					done: false,
-					dueDate: '',
-				},
-				flatPickerConfig: {
-					altFormat: 'j M Y H:i',
-					altInput: true,
-					dateFormat: 'Y-m-d H:i',
-					enableTime: true,
-					time_24hr: true,
-					mode: 'range',
-				},
-			}
+	},
+	watch: {
+		value(newVal) {
+			this.$set(this, 'params', newVal)
+			this.prepareFilters()
 		},
-		mounted() {
-			this.params = this.value
+	},
+	methods: {
+		change() {
+			this.$emit('input', this.params)
+			this.$emit('change', this.params)
+		},
+		prepareFilters() {
 			this.prepareDone()
+			this.prepareDate('due_date', 'dueDate')
+			this.prepareDate('start_date', 'startDate')
+			this.prepareDate('end_date', 'endDate')
+			this.prepareSingleValue('priority', 'priority', 'usePriority', true)
+			this.prepareSingleValue('percent_done', 'percentDone', 'usePercentDone', true)
+			this.prepareDate('reminders')
+			this.prepareRelatedObjectFilter('users', 'assignees')
+			this.prepareRelatedObjectFilter('labels', 'labels', 'label')
+			this.prepareRelatedObjectFilter('lists', 'list_id')
+			this.prepareRelatedObjectFilter('namespace')
 		},
-		props: {
-			value: {
-				required: true,
-			}
-		},
-		watch: {
-			value(newVal) {
-				this.$set(this, 'params', newVal)
-				this.prepareDone()
-			}
-		},
-		methods: {
-			change() {
-				this.$emit('input', this.params)
-				this.$emit('change', this.params)
-			},
-			prepareDone() {
-				// Set filters.done based on params
-				if(typeof this.params.filter_by !== 'undefined') {
-					let foundDone = false
-					this.params.filter_by.forEach((f, i) => {
-						if (f === 'done') {
-							foundDone = i
-						}
-					})
-					if (foundDone === false) {
-						this.filters.done = true
-					}
+		removePropertyFromFilter(propertyName) {
+			for (const i in this.params.filter_by) {
+				if (this.params.filter_by[i] === propertyName) {
+					this.params.filter_by.splice(i, 1)
+					this.params.filter_comparator.splice(i, 1)
+					this.params.filter_value.splice(i, 1)
+					break
 				}
-			},
-			setDoneFilter() {
-				if (this.filters.done) {
-					for (const i in this.params.filter_by) {
-						if (this.params.filter_by[i] === 'done') {
-							this.params.filter_by.splice(i, 1)
-							this.params.filter_comparator.splice(i, 1)
-							this.params.filter_value.splice(i, 1)
-							break
-						}
+			}
+		},
+		setDateFilter(filterName, variableName) {
+			// Only filter if we have a start and end due date
+			if (this.filters[variableName] !== '') {
+
+				const parts = this.filters[variableName].split(' to ')
+
+				if (parts.length < 2) {
+					return
+				}
+
+				// Check if we already have values in params and only update them if we do
+				let foundStart = false
+				let foundEnd = false
+				this.params.filter_by.forEach((f, i) => {
+					if (f === filterName && this.params.filter_comparator[i] === 'greater_equals') {
+						foundStart = true
+						this.$set(this.params.filter_value, i, formatISO(new Date(parts[0])))
 					}
-				} else {
-					this.params.filter_by.push('done')
-					this.params.filter_comparator.push('equals')
-					this.params.filter_value.push('false')
+					if (f === filterName && this.params.filter_comparator[i] === 'less_equals') {
+						foundEnd = true
+						this.$set(this.params.filter_value, i, formatISO(new Date(parts[1])))
+					}
+				})
+
+				if (!foundStart) {
+					this.params.filter_by.push(filterName)
+					this.params.filter_comparator.push('greater_equals')
+					this.params.filter_value.push(formatISO(new Date(parts[0])))
+				}
+				if (!foundEnd) {
+					this.params.filter_by.push(filterName)
+					this.params.filter_comparator.push('less_equals')
+					this.params.filter_value.push(formatISO(new Date(parts[1])))
 				}
 				this.change()
-			},
-			setDueDateFilter() {
-				// Only filter if we have a start and end due date
-				if (this.filters.dueDate !== '') {
-
-					const parts = this.filters.dueDate.split(' to ')
-
-					if(parts.length < 2) {
-						return
-					}
-
-					// Check if we already have values in params and only update them if we do
-					let foundStart = false
-					let foundEnd = false
-					this.params.filter_by.forEach((f, i) => {
-						if (f === 'due_date' && this.params.filter_comparator[i] === 'greater_equals') {
-							foundStart = true
-							this.params.filter_value[i] = +new Date(parts[0]) / 1000
-						}
-						if (f === 'due_date' && this.params.filter_comparator[i] === 'less_equals') {
-							foundEnd = true
-							this.params.filter_value[i] = +new Date(parts[1]) / 1000
-						}
-					})
-
-					if (!foundStart) {
-						this.params.filter_by.push('due_date')
-						this.params.filter_comparator.push('greater_equals')
-						this.params.filter_value.push(+new Date(parts[0]) / 1000)
-					}
-					if (!foundEnd) {
-						this.params.filter_by.push('due_date')
-						this.params.filter_comparator.push('less_equals')
-						this.params.filter_value.push(+new Date(parts[1]) / 1000)
-					}
-					this.change()
-				}
-			},
+			}
 		},
-	}
+		prepareDate(filterName, variableName) {
+			if (typeof this.params.filter_by === 'undefined') {
+				return
+			}
+
+			let foundDateStart = false
+			let foundDateEnd = false
+			for (const i in this.params.filter_by) {
+				if (this.params.filter_by[i] === filterName && this.params.filter_comparator[i] === 'greater_equals') {
+					foundDateStart = i
+				}
+				if (this.params.filter_by[i] === filterName && this.params.filter_comparator[i] === 'less_equals') {
+					foundDateEnd = i
+				}
+
+				if (foundDateStart !== false && foundDateEnd !== false) {
+					break
+				}
+			}
+
+			if (foundDateStart !== false && foundDateEnd !== false) {
+				const start = new Date(this.params.filter_value[foundDateStart])
+				const end = new Date(this.params.filter_value[foundDateEnd])
+				this.filters[variableName] = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()} to ${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`
+			}
+		},
+		setSingleValueFilter(filterName, variableName, useVariableName = '', comparator = 'equals') {
+			if (useVariableName !== '' && !this.filters[useVariableName]) {
+				this.removePropertyFromFilter(filterName)
+				return
+			}
+
+			let found = false
+			this.params.filter_by.forEach((f, i) => {
+				if (f === filterName) {
+					found = true
+					this.$set(this.params.filter_value, i, this.filters[variableName])
+				}
+			})
+
+			if (!found) {
+				this.params.filter_by.push(filterName)
+				this.params.filter_comparator.push(comparator)
+				this.params.filter_value.push(this.filters[variableName])
+			}
+
+			this.change()
+		},
+		/**
+		 *
+		 * @param filterName The filter name in the api.
+		 * @param variableName The name of the variable in this.filters.
+		 * @param useVariableName The name of the variable of the "Use this filter" variable. Will only be set if the parameter is not null.
+		 * @param isNumber Toggles if the value should be parsed as a number.
+		 */
+		prepareSingleValue(filterName, variableName = null, useVariableName = null, isNumber = false) {
+			if (variableName === null) {
+				variableName = filterName
+			}
+
+			let found = false
+			for (const i in this.params.filter_by) {
+				if (this.params.filter_by[i] === filterName) {
+					found = i
+					break
+				}
+			}
+
+			if (found === false && useVariableName !== null) {
+				this.filters[useVariableName] = false
+				return
+			}
+
+			if (isNumber) {
+				this.filters[variableName] = Number(this.params.filter_value[found])
+			} else {
+				this.filters[variableName] = this.params.filter_value[found]
+			}
+
+			if (useVariableName !== null) {
+				this.filters[useVariableName] = true
+			}
+		},
+		prepareDone() {
+			// Set filters.done based on params
+			if (typeof this.params.filter_by === 'undefined') {
+				return
+			}
+
+			let foundDone = false
+			this.params.filter_by.forEach((f, i) => {
+				if (f === 'done') {
+					foundDone = i
+				}
+			})
+			if (foundDone === false) {
+				this.$set(this.filters, 'done', true)
+			}
+		},
+		prepareRelatedObjectFilter(kind, filterName = null, servicePrefix = null) {
+			if (filterName === null) {
+				filterName = kind
+			}
+
+			if (servicePrefix === null) {
+				servicePrefix = kind
+			}
+
+			this.prepareSingleValue(filterName)
+			if (typeof this.filters[filterName] !== 'undefined' && this.filters[filterName] !== '') {
+				this[`${servicePrefix}Service`].getAll({}, {s: this.filters[filterName]})
+					.then(r => {
+						this.$set(this, kind, r)
+					})
+					.catch(e => this.error(e, this))
+			}
+		},
+		setDoneFilter() {
+			if (this.filters.done) {
+				this.removePropertyFromFilter('done')
+			} else {
+				this.params.filter_by.push('done')
+				this.params.filter_comparator.push('equals')
+				this.params.filter_value.push('false')
+			}
+			this.change()
+		},
+		setFilterConcat() {
+			if (this.filters.requireAllFilters) {
+				this.params.filter_concat = 'and'
+			} else {
+				this.params.filter_concat = 'or'
+			}
+		},
+		setDueDateFilter() {
+			this.setDateFilter('due_date', 'dueDate')
+		},
+		setPriority() {
+			this.setSingleValueFilter('priority', 'priority', 'usePriority')
+		},
+		setStartDateFilter() {
+			this.setDateFilter('start_date', 'startDate')
+		},
+		setEndDateFilter() {
+			this.setDateFilter('end_date', 'endDate')
+		},
+		setPercentDoneFilter() {
+			this.setSingleValueFilter('percent_done', 'percentDone', 'usePercentDone')
+		},
+		setReminderFilter() {
+			this.setDateFilter('reminders')
+		},
+		clear(kind) {
+			this.$set(this, `found${kind}`, [])
+		},
+		find(kind, query) {
+
+			if (query === '') {
+				this.clear(kind)
+			}
+
+			this[`${kind}Service`].getAll({}, {s: query})
+				.then(response => {
+					// Filter the results to not include users who are already assigneid
+					this.$set(this, `found${kind}`, differenceWith(response, this[kind], (first, second) => {
+						return first.id === second.id
+					}))
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		add(kind, filterName) {
+			this.$nextTick(() => {
+				this.changeMultiselectFilter(kind, filterName)
+			})
+		},
+		remove(kind, filterName) {
+			this.$nextTick(() => {
+				this.changeMultiselectFilter(kind, filterName)
+			})
+		},
+		changeMultiselectFilter(kind, filterName) {
+			if (this[kind].length === 0) {
+				this.removePropertyFromFilter(filterName)
+				this.change()
+				return
+			}
+
+			let ids = []
+			this[kind].forEach(u => {
+				ids.push(u.id)
+			})
+
+			this.$set(this.filters, filterName, ids.join(','))
+			this.setSingleValueFilter(filterName, filterName, '', 'in')
+		},
+		clearLabels() {
+			this.$set(this, 'foundLabels', [])
+		},
+		findLabels(query) {
+
+			if (query === '') {
+				this.clearLabels()
+			}
+
+			this.labelService.getAll({}, {s: query})
+				.then(response => {
+					// Filter the results to not include labels already selected
+					this.$set(this, 'foundLabels', differenceWith(response, this.labels, (first, second) => {
+						return first.id === second.id
+					}))
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		addLabel() {
+			this.$nextTick(() => {
+				this.changeLabelFilter()
+			})
+		},
+		removeLabel(label) {
+			this.$nextTick(() => {
+				for (const l in this.labels) {
+					if (this.labels[l].id === label.id) {
+						this.labels.splice(l, 1)
+					}
+					break
+				}
+
+				this.changeLabelFilter()
+			})
+		},
+		changeLabelFilter() {
+			if (this.labels.length === 0) {
+				this.removePropertyFromFilter('labels')
+				this.change()
+				return
+			}
+
+			let labelIDs = []
+			this.labels.forEach(u => {
+				labelIDs.push(u.id)
+			})
+
+			this.$set(this.filters, 'labels', labelIDs.join(','))
+			this.setSingleValueFilter('labels', 'labels', '', 'in')
+		},
+	},
+}
 </script>
+
+<style lang="scss">
+.single-value-control {
+	display: flex;
+	align-items: center;
+
+	.fancycheckbox {
+		margin-left: .5rem;
+	}
+}
+</style>

src/components/migrator/migration.vue

@@ -2,13 +2,21 @@
 	<div class="content">
 		<h1>Import your data from {{ name }} to Vikunja</h1>
 		<p>Vikunja will import all lists, tasks, notes, reminders and files you have access to.</p>
-		<template v-if="isMigrating === false && message === '' && lastMigrationDate === 0">
+		<template v-if="isMigrating === false && message === '' && lastMigrationDate === null">
 			<p>To authorize Vikunja to access your {{ name }} Account, click the button below.</p>
-			<a :href="authUrl" class="button is-primary" :class="{'is-loading': migrationService.loading}" :disabled="migrationService.loading">Get Started</a>
+			<a
+				:class="{'is-loading': migrationService.loading}"
+				:disabled="migrationService.loading"
+				:href="authUrl"
+				class="button is-primary">
+				Get Started
+			</a>
 		</template>
-		<div class="migration-in-progress-container" v-else-if="isMigrating === true && message === '' && lastMigrationDate === 0">
+		<div
+			class="migration-in-progress-container"
+			v-else-if="isMigrating === true && message === '' && lastMigrationDate === null">
 			<div class="migration-in-progress">
-				<img :src="`/images/migration/${identifier}.png`" :alt="name"/>
+				<img :alt="name" :src="`/images/migration/${identifier}.png`"/>
 				<div class="progress-dots">
 					<span></span>
 					<span></span>
@@ -19,7 +27,7 @@
 					<span></span>
 					<span></span>
 				</div>
-				<img src="/images/logo.svg" alt="Vikunja">
+				<img alt="Vikunja" src="/images/logo.svg">
 			</div>
 			<p>Importing in progress, hang tight...</p>
 		</div>
@@ -30,7 +38,7 @@
 				Are you sure?
 			</p>
 			<div class="buttons">
-				<button class="button is-primary" @click="migrate">I am sure, please start migrating now!</button>
+				<button @click="migrate" class="button is-primary">I am sure, please start migrating now!</button>
 				<router-link :to="{name: 'home'}" class="button is-danger is-outlined">Cancel</router-link>
 			</div>
 		</div>
@@ -46,73 +54,87 @@
 </template>
 
 <script>
-	import AbstractMigrationService from "../../services/migrator/abstractMigrationService";
+import AbstractMigrationService from '../../services/migrator/abstractMigrationService'
 
-	export default {
-		name: 'migration',
-		data() {
-			return {
-				authUrl: '',
-				isMigrating: false,
-				lastMigrationDate: null,
-				message: '',
-				wunderlistCode: '',
+export default {
+	name: 'migration',
+	data() {
+		return {
+			authUrl: '',
+			isMigrating: false,
+			lastMigrationDate: null,
+			message: '',
+			migratorAuthCode: '',
+		}
+	},
+	props: {
+		name: {
+			type: String,
+			required: true,
+		},
+		identifier: {
+			type: String,
+			required: true,
+		},
+	},
+	created() {
+		this.migrationService = new AbstractMigrationService(this.identifier)
+		this.getAuthUrl()
+		this.message = ''
+
+		if (typeof this.$route.query.code !== 'undefined' || location.hash.startsWith('#token=')) {
+			if (location.hash.startsWith('#token=')) {
+				this.migratorAuthCode = location.hash.substring(7)
+				console.log(location.hash.substring(7))
+			} else {
+				this.migratorAuthCode = this.$route.query.code
 			}
-		},
-		props: {
-			name: {
-				type: String,
-				required: true,
-			},
-			identifier: {
-				type: String,
-				required: true,
-			},
-		},
-		created() {
-			this.migrationService = new AbstractMigrationService(this.identifier)
-			this.getAuthUrl()
-			this.message = ''
-
-			if(typeof this.$route.query.code !== 'undefined') {
-				this.wunderlistCode = this.$route.query.code
-				this.migrationService.getStatus()
-					.then(r => {
-						if(r.time) {
+			this.migrationService.getStatus()
+				.then(r => {
+					if (r.time) {
+						if (typeof r.time === 'string' && r.time.startsWith('0001-')) {
+							this.lastMigrationDate = null
+						} else {
 							this.lastMigrationDate = new Date(r.time)
+						}
+
+						if (this.lastMigrationDate) {
 							return
 						}
-						this.migrate()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			}
+					}
+					this.migrate()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		}
+	},
+	methods: {
+		getAuthUrl() {
+			this.migrationService.getAuthUrl()
+				.then(r => {
+					this.authUrl = r.url
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-		methods: {
-			getAuthUrl() {
-				this.migrationService.getAuthUrl()
-					.then(r => {
-						this.authUrl = r.url
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			migrate() {
-				this.isMigrating = true
-				this.lastMigrationDate = 0
-				this.migrationService.migrate({code: this.wunderlistCode})
-					.then(r => {
-						this.message = r.message
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.isMigrating = false
-					})
-			},
+		migrate() {
+			this.isMigrating = true
+			this.lastMigrationDate = null
+			this.message = ''
+			this.migrationService.migrate({code: this.migratorAuthCode})
+				.then(r => {
+					this.message = r.message
+					this.$store.dispatch('namespaces/loadNamespaces')
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.isMigrating = false
+				})
 		},
-	}
+	},
+}
 </script>

src/components/misc/api-config.vue

@@ -0,0 +1,170 @@
+<template>
+	<div class="api-config">
+		<div v-if="configureApi">
+			<label class="label" for="api-url">Vikunja URL</label>
+			<div class="field has-addons">
+				<div class="control is-expanded">
+					<input
+						class="input" id="api-url"
+						placeholder="eg. https://localhost:3456"
+						required
+						type="url"
+						v-focus
+						v-model="apiUrl"
+						@keyup.enter="setApiUrl"
+					/>
+				</div>
+				<div class="control">
+					<a class="button is-primary" @click="setApiUrl" :disabled="apiUrl === ''">
+						Change
+					</a>
+				</div>
+			</div>
+		</div>
+		<div class="api-url-info" v-else>
+			Sign in to your Vikunja account on <span v-tooltip="apiUrl">{{ apiDomain() }}</span><br/>
+			<a @click="() => configureApi = true">change</a>
+		</div>
+
+		<div class="notification is-success mt-2" v-if="successMsg !== '' && errorMsg === ''">
+			{{ successMsg }}
+		</div>
+		<div class="notification is-danger mt-2" v-if="errorMsg !== '' && successMsg === ''">
+			{{ errorMsg }}
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'apiConfig',
+	data() {
+		return {
+			configureApi: false,
+			apiUrl: '',
+			errorMsg: '',
+			successMsg: '',
+		}
+	},
+	created() {
+		this.apiUrl = window.API_URL
+		if (this.apiUrl === '') {
+			this.configureApi = true
+		}
+	},
+	methods: {
+		apiDomain() {
+			if (window.API_URL.startsWith('/api/v1')) {
+				return window.location.host
+			}
+			const urlParts = window.API_URL.replace('http://', '').replace('https://', '').split(/[/?#]/)
+			return urlParts[0]
+		},
+		setApiUrl() {
+			if (this.apiUrl === '') {
+				return
+			}
+
+			let urlToCheck = this.apiUrl
+
+			// Check if the url has an http prefix
+			if (!urlToCheck.startsWith('http://') && !urlToCheck.startsWith('https://')) {
+				urlToCheck = `http://${urlToCheck}`
+			}
+
+			urlToCheck = new URL(urlToCheck)
+			const origUrlToCheck = urlToCheck
+
+			const oldUrl = window.API_URL
+			window.API_URL = urlToCheck.toString()
+
+			// Check if the api is reachable at the provided url
+			this.$store.dispatch('config/update')
+				.catch(e => {
+					// Check if it is reachable at /api/v1 and http
+					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it has a port and if not check if it is reachable at https
+					if (urlToCheck.protocol === 'http:') {
+						urlToCheck.protocol = 'https:'
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it is reachable at /api/v1 and https
+					urlToCheck.pathname = origUrlToCheck.pathname
+					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it is reachable at port 3456 and https
+					if (urlToCheck.port !== 3456) {
+						urlToCheck.protocol = 'https:'
+						urlToCheck.port = 3456
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it is reachable at :3456 and /api/v1 and https
+					urlToCheck.pathname = origUrlToCheck.pathname
+					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it is reachable at port 3456 and http
+					if (urlToCheck.port !== 3456) {
+						urlToCheck.protocol = 'http:'
+						urlToCheck.port = 3456
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(e => {
+					// Check if it is reachable at :3456 and /api/v1 and http
+					urlToCheck.pathname = origUrlToCheck.pathname
+					if (!urlToCheck.pathname.endsWith('/api/v1') && !urlToCheck.pathname.endsWith('/api/v1/')) {
+						urlToCheck.pathname = `${urlToCheck.pathname}api/v1`
+						window.API_URL = urlToCheck.toString()
+						return this.$store.dispatch('config/update')
+					}
+					return Promise.reject(e)
+				})
+				.catch(() => {
+					// Still not found, url is still invalid
+					this.successMsg = ''
+					this.errorMsg = `Could not find or use Vikunja installation at "${this.apiDomain()}".`
+					window.API_URL = oldUrl
+				})
+				.then(r => {
+					if (typeof r !== 'undefined') {
+						// Set it + save it to local storage to save us the hoops
+						this.errorMsg = ''
+						this.successMsg = `Using Vikunja installation at "${this.apiDomain()}".`
+						localStorage.setItem('API_URL', window.API_URL)
+						this.configureApi = false
+						this.apiUrl = window.API_URL
+					}
+				})
+		},
+	},
+}
+</script>

src/components/misc/error.vue

@@ -0,0 +1,12 @@
+<template>
+	<div class="notification is-danger">
+		Loading failed, please <a @click="() => location.reload()">try again</a>.
+		If the error persists, please <a href="https://vikunja.io/contact/">contact us</a>.
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'error',
+}
+</script>

src/components/misc/keyboard-shortcuts.vue

@@ -0,0 +1,86 @@
+<template>
+	<div class="modal-mask keyboard-shortcuts-modal">
+		<div @click.self="close()" class="modal-container">
+			<div class="modal-content">
+				<div class="card has-background-white has-no-shadow">
+					<header class="card-header">
+						<p class="card-header-title">Available Keyboard Shortcuts</p>
+					</header>
+					<div class="card-content content">
+						<p>
+							<strong>Toggle The Menu</strong>
+							<span class="shortcuts">
+								<span>ctrl</span>
+								<i>+</i>
+								<span>e</span>
+							</span>
+						</p>
+						<h3>Kanban</h3>
+						<div class="message is-primary" v-if="$route.name === 'list.kanban'">
+							<div class="message-body">
+								These shortcuts work on the current page.
+							</div>
+						</div>
+						<p>
+							<strong>Mark a task as done</strong>
+							<span class="shortcuts">
+								<span>ctrl</span>
+								<i>+</i>
+								<span>click</span>
+							</span>
+						</p>
+						<h3>Task Page</h3>
+						<div class="message is-primary" v-if="$route.name === 'task.detail' || $route.name === 'task.list.detail' || $route.name === 'task.gantt.detail' || $route.name === 'task.kanban.detail' || $route.name === 'task.detail'">
+							<div class="message-body">
+								These shortcuts work on the current page.
+							</div>
+						</div>
+						<p>
+							<strong>Assign this task to a user</strong>
+							<span class="shortcuts">
+								<span>a</span>
+							</span>
+						</p>
+						<p>
+							<strong>Add labels to this task</strong>
+							<span class="shortcuts">
+								<span>l</span>
+							</span>
+						</p>
+						<p>
+							<strong>Change the due date of this task</strong>
+							<span class="shortcuts">
+								<span>d</span>
+							</span>
+						</p>
+						<p>
+							<strong>Add an attachment to this task</strong>
+							<span class="shortcuts">
+								<span>f</span>
+							</span>
+						</p>
+						<p>
+							<strong>Modify related tasks of this task</strong>
+							<span class="shortcuts">
+								<span>r</span>
+							</span>
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
+
+export default {
+	name: 'keyboard-shortcuts',
+	methods: {
+		close() {
+			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
+		},
+	},
+}
+</script>

src/components/misc/legal.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="legal-links">
+		<a :href="imprintUrl" target="_blank" v-if="imprintUrl">Imprint</a>
+		<span v-if="imprintUrl && privacyPolicyUrl"> | </span>
+		<a :href="privacyPolicyUrl" target="_blank" v-if="privacyPolicyUrl">Privacy policy</a>
+	</div>
+</template>
+
+<script>
+import {mapState} from 'vuex'
+
+export default {
+	name: 'legal',
+	computed: mapState({
+		imprintUrl: state => state.config.legal.imprintUrl,
+		privacyPolicyUrl: state => state.config.legal.privacyPolicyUrl,
+	}),
+}
+</script>

src/components/misc/loading.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="loader-container is-loading"></div>
+</template>
+
+<script>
+export default {
+	name: 'loading',
+}
+</script>
+
+<style scoped>
+.loader-container {
+	height: 100%;
+	min-height: 200px;
+	width: 100%;
+	min-width: 600px;
+	max-width: 100vw;
+}
+</style>

src/components/misc/notification.vue

@@ -1,23 +1,25 @@
 <template>
-	<notifications position="bottom left">
+	<notifications position="bottom left" :max="2" class="global-notification">
 		<template slot="body" slot-scope="props">
 			<div :class="['vue-notification-template', 'vue-notification', props.item.type]" @click="close(props)">
 				<div
-						v-if="props.item.title"
-						class="notification-title"
-						v-html="props.item.title"
+					class="notification-title"
+					v-html="props.item.title"
+					v-if="props.item.title"
 				>
 				</div>
 				<div
-						class="notification-content"
-						v-html="props.item.text"
+					class="notification-content"
+					v-html="props.item.text"
 				>
 				</div>
-				<div class="buttons is-right" v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
+				<div
+					class="buttons is-right"
+					v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
 					<button
-							class="button noshadow is-small"
-							@click="action.callback"
-							v-for="(action, i) in props.item.data.actions" :key="'action_'+i">
+						:key="'action_'+i"
+						@click="action.callback"
+						class="button noshadow is-small" v-for="(action, i) in props.item.data.actions">
 						{{ action.title }}
 					</button>
 				</div>
@@ -27,23 +29,23 @@
 </template>
 
 <script>
-	export default {
-		name: 'notification',
-		methods: {
-			close(props) {
-				props.close()
-			},
+export default {
+	name: 'notification',
+	methods: {
+		close(props) {
+			props.close()
 		},
-	}
+	},
+}
 </script>
 
 <style scoped>
 
-	.vue-notification {
-		z-index: 9999;
-	}
+.vue-notification {
+	z-index: 9999;
+}
 
-	.buttons {
-		margin-top: .5em;
-	}
+.buttons {
+	margin-top: .5em;
+}
 </style>

src/components/misc/user.vue

@@ -1,52 +1,58 @@
 <template>
-	<div class="user" :class="{'is-inline': isInline}">
-		<img :src="user.getAvatarUrl(avatarSize)" class="avatar" alt="" v-tooltip="user.username" :width="avatarSize" :height="avatarSize"/>
-		<span v-if="showUsername" class="username">{{ user.username }}</span>
+	<div :class="{'is-inline': isInline}" class="user">
+		<img
+			:height="avatarSize"
+			:src="user.getAvatarUrl(avatarSize)"
+			:width="avatarSize"
+			alt=""
+			class="avatar"
+			v-tooltip="user.getDisplayName()"/>
+		<span class="username" v-if="showUsername">{{ user.getDisplayName() }}</span>
 	</div>
 </template>
 
 <script>
-	export default {
-		name: 'user',
-		props: {
-			user: {
-				required: true,
-				type: Object,
-			},
-			showUsername: {
-				required: false,
-				type: Boolean,
-				default: true,
-			},
-			avatarSize: {
-				required: false,
-				type: Number,
-				default: 50,
-			},
-			isInline: {
-				required: false,
-				type: Boolean,
-				default: false,
-			},
+export default {
+	name: 'user',
+	props: {
+		user: {
+			required: true,
+			type: Object,
 		},
-	}
+		showUsername: {
+			required: false,
+			type: Boolean,
+			default: true,
+		},
+		avatarSize: {
+			required: false,
+			type: Number,
+			default: 50,
+		},
+		isInline: {
+			required: false,
+			type: Boolean,
+			default: false,
+		},
+	},
+}
 </script>
 
 <style lang="scss" scoped>
-	.user {
-		margin: .5em;
+.user {
+	margin: .5em;
 
-		&.is-inline {
-			display: inline;
-		}
-
-		img {
-			-webkit-border-radius: 100%;
-			-moz-border-radius: 100%;
-			border-radius: 100%;
-
-			vertical-align: middle;
-			margin-right: .5em;
-		}
+	&.is-inline {
+		display: inline;
 	}
+
+	img {
+		-webkit-border-radius: 100%;
+		-moz-border-radius: 100%;
+		border-radius: 100%;
+
+		vertical-align: middle;
+		margin-right: .5em;
+	}
+}
 </style>

src/components/modal/modal.vue

@@ -10,8 +10,8 @@
 						<slot name="text"></slot>
 					</div>
 					<div class="actions">
-						<button class="button is-danger is-inverted noshadow" @click="$emit('close')">Cancel</button>
-						<button class="button is-success noshadow" @click="$emit('submit')">Do it!</button>
+						<button @click="$emit('close')" class="button is-danger is-inverted noshadow">Cancel</button>
+						<button @click="$emit('submit')" class="button is-success noshadow">Do it!</button>
 					</div>
 				</div>
 			</div>
@@ -20,15 +20,15 @@
 </template>
 
 <script>
-	export default {
-		name: 'modal',
-		mounted: function () {
-			document.addEventListener('keydown', (e) => {
-				// Close the model when escape is pressed
-				if (e.keyCode === 27) {
-					this.$emit('close')
-				}
-			})
-		}
-	}
+export default {
+	name: 'modal',
+	mounted: function () {
+		document.addEventListener('keydown', (e) => {
+			// Close the model when escape is pressed
+			if (e.keyCode === 27) {
+				this.$emit('close')
+			}
+		})
+	},
+}
 </script>

src/components/namespace/namespace-search.vue

@@ -1,67 +1,73 @@
 <template>
 	<multiselect
-			v-model="namespace"
-			:options="namespaces"
-			:multiple="false"
-			:searchable="true"
-			:loading="namespaceService.loading"
-			:internal-search="true"
-			@search-change="findNamespaces"
-			@select="select"
-			placeholder="Search for a namespace..."
-			label="title"
-			track-by="id">
+		:internal-search="true"
+		:loading="namespaceService.loading"
+		:multiple="false"
+		:options="namespaces"
+		:searchable="true"
+		:showNoOptions="false"
+		@search-change="findNamespaces"
+		@select="select"
+		label="title"
+		placeholder="Search for a namespace..."
+		track-by="id"
+		v-model="namespace">
 		<template slot="clear" slot-scope="props">
 			<div
-					class="multiselect__clear" v-if="namespace.id !== 0"
-					@mousedown.prevent.stop="clearAll(props.search)"></div>
+				@mousedown.prevent.stop="clearAll(props.search)" class="multiselect__clear"
+				v-if="namespace.id !== 0"></div>
 		</template>
 		<span slot="noResult">No namespace found. Consider changing the search query.</span>
 	</multiselect>
 </template>
 
 <script>
-	import multiselect from 'vue-multiselect'
+import NamespaceService from '../../services/namespace'
+import NamespaceModel from '../../models/namespace'
+import LoadingComponent from '../misc/loading'
+import ErrorComponent from '../misc/error'
 
-	import NamespaceService from '../../services/namespace'
-	import NamespaceModel from '../../models/namespace'
-
-	export default {
-		name: 'namespace-search',
-		data() {
-			return {
-				namespaceService: NamespaceService,
-				namespace: NamespaceModel,
-				namespaces: [],
+export default {
+	name: 'namespace-search',
+	data() {
+		return {
+			namespaceService: NamespaceService,
+			namespace: NamespaceModel,
+			namespaces: [],
+		}
+	},
+	components: {
+		multiselect: () => ({
+			component: import(/* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	created() {
+		this.namespaceService = new NamespaceService()
+	},
+	methods: {
+		findNamespaces(query) {
+			if (query === '') {
+				this.clearAll()
+				return
 			}
-		},
-		components: {
-			multiselect,
-		},
-		created() {
-			this.namespaceService = new NamespaceService()
-		},
-		methods: {
-			findNamespaces(query) {
-				if (query === '') {
-					this.clearAll()
-					return
-				}
 
-				this.namespaceService.getAll({}, {s: query})
-					.then(response => {
-						this.$set(this, 'namespaces', response)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			clearAll() {
-				this.$set(this, 'namespaces', [])
-			},
-			select(namespace) {
-				this.$emit('selected', namespace)
-			},
+			this.namespaceService.getAll({}, {s: query})
+				.then(response => {
+					this.$set(this, 'namespaces', response)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		clearAll() {
+			this.$set(this, 'namespaces', [])
+		},
+		select(namespace) {
+			this.$emit('selected', namespace)
+		},
+	},
+}
 </script>

src/components/sharing/linkSharing.vue

@@ -21,7 +21,7 @@
 						</div>
 					</div>
 					<div class="control">
-						<button type="submit" class="button is-success">
+						<button class="button is-success" type="submit">
 							Share
 						</button>
 					</div>
@@ -36,61 +36,62 @@
 					<th>Delete</th>
 				</tr>
 				<template v-if="linkShares.length > 0">
-				<tr v-for="s in linkShares" :key="s.id">
-					<td>
-						<div class="field has-addons">
-							<div class="control">
-								<input class="input" type="text" :value="getShareLink(s.hash)" readonly/>
-							</div>
-							<div class="control">
-								<a class="button is-success noshadow" @click="copy(getShareLink(s.hash))">
+					<tr :key="s.id" v-for="s in linkShares">
+						<td>
+							<div class="field has-addons no-input-mobile">
+								<div class="control">
+									<input :value="getShareLink(s.hash)" class="input" readonly type="text"/>
+								</div>
+								<div class="control">
+									<a @click="copy(getShareLink(s.hash))" class="button is-success noshadow" v-tooltip="'Copy to clipboard'">
 									<span class="icon">
 										<icon icon="paste"/>
 									</span>
-								</a>
+									</a>
+								</div>
 							</div>
-						</div>
-					</td>
-					<td>
-						{{ s.sharedBy.username }}
-					</td>
-					<td class="type">
-						<template v-if="s.right === rights.ADMIN">
+						</td>
+						<td>
+							{{ s.sharedBy.getDisplayName() }}
+						</td>
+						<td class="type">
+							<template v-if="s.right === rights.ADMIN">
 						<span class="icon is-small">
 							<icon icon="lock"/>
 						</span>
-							Admin
-						</template>
-						<template v-else-if="s.right === rights.READ_WRITE">
+								Admin
+							</template>
+							<template v-else-if="s.right === rights.READ_WRITE">
 						<span class="icon is-small">
 							<icon icon="pen"/>
 						</span>
-							Write
-						</template>
-						<template v-else>
+								Write
+							</template>
+							<template v-else>
 						<span class="icon is-small">
 							<icon icon="users"/>
 						</span>
-							Read-only
-						</template>
-					</td>
-					<td class="actions">
-						<button @click="() => {linkIdToDelete = s.id; showDeleteModal = true}" class="button is-danger icon-only">
+								Read-only
+							</template>
+						</td>
+						<td class="actions">
+							<button @click="() => {linkIdToDelete = s.id; showDeleteModal = true}"
+									class="button is-danger icon-only">
 							<span class="icon">
 								<icon icon="trash-alt"/>
 							</span>
-						</button>
-					</td>
-				</tr>
+							</button>
+						</td>
+					</tr>
 				</template>
 				</tbody>
 			</table>
 		</div>
 
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="remove()">
+			@close="showDeleteModal = false"
+			@submit="remove()"
+			v-if="showDeleteModal">
 			<span slot="header">Remove a link share</span>
 			<p slot="text">Are you sure you want to remove this link share?<br/>
 				It will no longer be possible to access this list with this link share.<br/>
@@ -100,95 +101,95 @@
 </template>
 
 <script>
-	import rights from '../../models/rights'
+import rights from '../../models/rights'
 
-	import LinkShareService from '../../services/linkShare'
-	import LinkShareModel from '../../models/linkShare'
+import LinkShareService from '../../services/linkShare'
+import LinkShareModel from '../../models/linkShare'
 
-	import copy from 'copy-to-clipboard'
-	import {mapState} from 'vuex'
+import copy from 'copy-to-clipboard'
+import {mapState} from 'vuex'
 
-	export default {
-		name: 'linkSharing',
-		props: {
-			listId: {
-				default: 0,
-				required: true,
-			},
+export default {
+	name: 'linkSharing',
+	props: {
+		listId: {
+			default: 0,
+			required: true,
 		},
-		data() {
-			return {
-				linkShares: [],
-				linkShareService: LinkShareService,
-				newLinkShare: LinkShareModel,
-				rights: rights,
-				selectedRight: rights.READ,
-				showDeleteModal: false,
-				linkIdToDelete: 0,
-			}
-		},
-		beforeMount() {
-			this.linkShareService = new LinkShareService()
-		},
-		created() {
-			this.linkShareService = new LinkShareService()
+	},
+	data() {
+		return {
+			linkShares: [],
+			linkShareService: LinkShareService,
+			newLinkShare: LinkShareModel,
+			rights: rights,
+			selectedRight: rights.READ,
+			showDeleteModal: false,
+			linkIdToDelete: 0,
+		}
+	},
+	beforeMount() {
+		this.linkShareService = new LinkShareService()
+	},
+	created() {
+		this.linkShareService = new LinkShareService()
+		this.load()
+	},
+	watch: {
+		listId() { // watch it
 			this.load()
 		},
-		watch: {
-			listId: () => { // watch it
-				this.load()
+	},
+	computed: mapState({
+		frontendUrl: state => state.config.frontendUrl,
+	}),
+	methods: {
+		load() {
+			// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
+			if (this.listId === 0) {
+				return
 			}
-		},
-		computed: mapState({
-			frontendUrl: state => state.config.frontendUrl,
-		}),
-		methods: {
-			load() {
-				// If listId == 0 the list on the calling component wasn't already loaded, so we just bail out here
-				if (this.listId === 0) {
-					return
-				}
 
-				this.linkShareService.getAll({listId: this.listId})
-					.then(r => {
-						this.linkShares = r
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			add() {
-				let newLinkShare = new LinkShareModel({right: this.selectedRight, listId: this.listId})
-				this.linkShareService.create(newLinkShare)
-					.then(() => {
-						this.selectedRight = rights.READ
-						this.success({message: 'The link share was successfully created'}, this)
-						this.load()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			remove() {
-				let linkshare = new LinkShareModel({id: this.linkIdToDelete, listId: this.listId})
-				this.linkShareService.delete(linkshare)
-					.then(() => {
-						this.success({message: 'The link share was successfully deleted'}, this)
-						this.load()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.showDeleteModal = false
-					})
-			},
-			copy(text) {
-				copy(text)
-			},
-			getShareLink(hash) {
-				return this.frontendUrl + 'share/'  + hash + '/auth'
-			},
+			this.linkShareService.getAll({listId: this.listId})
+				.then(r => {
+					this.linkShares = r
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		add() {
+			let newLinkShare = new LinkShareModel({right: this.selectedRight, listId: this.listId})
+			this.linkShareService.create(newLinkShare)
+				.then(() => {
+					this.selectedRight = rights.READ
+					this.success({message: 'The link share was successfully created'}, this)
+					this.load()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		remove() {
+			let linkshare = new LinkShareModel({id: this.linkIdToDelete, listId: this.listId})
+			this.linkShareService.delete(linkshare)
+				.then(() => {
+					this.success({message: 'The link share was successfully deleted'}, this)
+					this.load()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.showDeleteModal = false
+				})
+		},
+		copy(text) {
+			copy(text)
+		},
+		getShareLink(hash) {
+			return this.frontendUrl + 'share/' + hash + '/auth'
+		},
+	},
+}
 </script>

src/components/sharing/userTeam.vue

@@ -2,7 +2,7 @@
 	<div class="card is-fullwidth">
 		<header class="card-header">
 			<p class="card-header-title">
-				Shared with these {{shareType}}s
+				Shared with these {{ shareType }}s
 			</p>
 		</header>
 		<div class="card-content content sharables-list">
@@ -10,24 +10,30 @@
 				<div class="field is-grouped">
 					<p class="control is-expanded" v-bind:class="{ 'is-loading': searchService.loading}">
 						<multiselect
-								v-model="sharable"
-								:options="found"
-								:multiple="false"
-								:searchable="true"
-								:loading="searchService.loading"
-								:internal-search="true"
-								@search-change="find"
-								placeholder="Type to search"
-								:label="searchLabel"
-								track-by="id">
+							:internal-search="true"
+							:label="searchLabel"
+							:loading="searchService.loading"
+							:multiple="false"
+							:options="found"
+							:searchable="true"
+							:showNoOptions="false"
+							@search-change="find"
+							placeholder="Type to search..."
+							track-by="id"
+							v-model="sharable">
 							<template slot="clear" slot-scope="props">
-								<div class="multiselect__clear" v-if="sharable.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
+								<div
+									@mousedown.prevent.stop="clearAll(props.search)"
+									class="multiselect__clear"
+									v-if="sharable.id !== 0"></div>
 							</template>
-							<span slot="noResult">Oops! No {{shareType}} found. Consider changing the search query.</span>
+							<span slot="noResult">
+								Oops! No {{ shareType }} found. Consider changing the search query.
+							</span>
 						</multiselect>
 					</p>
 					<p class="control">
-						<button type="submit" class="button is-success">
+						<button class="button is-success" type="submit">
 								<span class="icon is-small">
 									<icon icon="plus"/>
 								</span>
@@ -38,9 +44,9 @@
 			</form>
 			<table class="table is-striped is-hoverable is-fullwidth">
 				<tbody>
-				<tr v-for="s in sharables" :key="s.id">
+				<tr :key="s.id" v-for="s in sharables">
 					<template v-if="shareType === 'user'">
-						<td>{{s.username}}</td>
+						<td>{{ s.getDisplayName() }}</td>
 						<td>
 							<template v-if="s.id === userInfo.id">
 								<b class="is-success">You</b>
@@ -50,7 +56,7 @@
 					<template v-if="shareType === 'team'">
 						<td>
 							<router-link :to="{name: 'teams.edit', params: {id: s.id}}">
-								{{s.name}}
+								{{ s.name }}
 							</router-link>
 						</td>
 					</template>
@@ -76,13 +82,16 @@
 					</td>
 					<td class="actions" v-if="userIsAdmin">
 						<div class="select">
-							<select @change="toggleType(s)" v-model="selectedRight[s.id]" class="button buttonright">
-								<option :value="rights.READ" :selected="s.right === rights.READ">Read only</option>
-								<option :value="rights.READ_WRITE" :selected="s.right === rights.READ_WRITE">Read & write</option>
-								<option :value="rights.ADMIN" :selected="s.right === rights.ADMIN">Admin</option>
+							<select @change="toggleType(s)" class="button buttonright" v-model="selectedRight[s.id]">
+								<option :selected="s.right === rights.READ" :value="rights.READ">Read only</option>
+								<option :selected="s.right === rights.READ_WRITE" :value="rights.READ_WRITE">Read &
+									write
+								</option>
+								<option :selected="s.right === rights.ADMIN" :value="rights.ADMIN">Admin</option>
 							</select>
 						</div>
-						<button @click="() => {sharable = s; showDeleteModal = true}" class="button is-danger icon-only">
+						<button @click="() => {sharable = s; showDeleteModal = true}"
+								class="button is-danger icon-only">
 							<span class="icon is-small">
 								<icon icon="trash-alt"/>
 							</span>
@@ -94,228 +103,233 @@
 		</div>
 
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="deleteSharable()">
-			<span slot="header">Remove a {{shareType}} from the {{typeString}}</span>
-			<p slot="text">Are you sure you want to remove this {{shareType}} from the {{typeString}}?<br/>
+			@close="showDeleteModal = false"
+			@submit="deleteSharable()"
+			v-if="showDeleteModal">
+			<span slot="header">Remove a {{ shareType }} from the {{ typeString }}</span>
+			<p slot="text">Are you sure you want to remove this {{ shareType }} from the {{ typeString }}?<br/>
 				<b>This CANNOT BE UNDONE!</b></p>
 		</modal>
 	</div>
 </template>
 
 <script>
-	import multiselect from 'vue-multiselect'
-	import {mapState} from 'vuex'
+import {mapState} from 'vuex'
 
-	import UserNamespaceService from '../../services/userNamespace'
-	import UserNamespaceModel from '../../models/userNamespace'
-	import UserListModel from '../../models/userList'
-	import UserListService from '../../services/userList'
-	import UserService from '../../services/user'
-	import UserModel from '../../models/user'
+import UserNamespaceService from '../../services/userNamespace'
+import UserNamespaceModel from '../../models/userNamespace'
+import UserListModel from '../../models/userList'
+import UserListService from '../../services/userList'
+import UserService from '../../services/user'
+import UserModel from '../../models/user'
 
-	import TeamNamespaceService from '../../services/teamNamespace'
-	import TeamNamespaceModel from '../../models/teamNamespace'
-	import TeamListModel from '../../models/teamList'
-	import TeamListService from '../../services/teamList'
-	import TeamService from '../../services/team'
-	import TeamModel from '../../models/team'
+import TeamNamespaceService from '../../services/teamNamespace'
+import TeamNamespaceModel from '../../models/teamNamespace'
+import TeamListModel from '../../models/teamList'
+import TeamListService from '../../services/teamList'
+import TeamService from '../../services/team'
+import TeamModel from '../../models/team'
 
-	import rights from '../../models/rights'
+import rights from '../../models/rights'
+import LoadingComponent from '../misc/loading'
+import ErrorComponent from '../misc/error'
 
-	export default {
-		name: 'userTeamShare',
-		props: {
-			type: {
-				type: String,
-				default: '',
-			},
-			shareType: {
-				type: String,
-				default: '',
-			},
-			id: {
-				type: Number,
-				default: 0,
-			},
-			userIsAdmin: {
-				type: Boolean,
-				default: false,
-			},
+export default {
+	name: 'userTeamShare',
+	props: {
+		type: {
+			type: String,
+			default: '',
 		},
-		data() {
-			return {
-				stuffService: Object, // This user service is either a userNamespaceService or a userListService, depending on the type we are using
-				stuffModel: Object,
-				searchService: Object,
-				sharable: Object,
-
-				found: [],
-				searchLabel: '',
-				rights: rights,
-				selectedRight: {},
-
-				typeString: '',
-				sharables: [], // This holds either teams or users who this namepace or list is shared with
-				showDeleteModal: false,
-			}
+		shareType: {
+			type: String,
+			default: '',
 		},
-		components: {
-			multiselect
+		id: {
+			type: Number,
+			default: 0,
 		},
-		computed: mapState({
-			userInfo: state => state.auth.info
+		userIsAdmin: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			stuffService: Object, // This user service is either a userNamespaceService or a userListService, depending on the type we are using
+			stuffModel: Object,
+			searchService: Object,
+			sharable: Object,
+
+			found: [],
+			searchLabel: '',
+			rights: rights,
+			selectedRight: {},
+
+			typeString: '',
+			sharables: [], // This holds either teams or users who this namepace or list is shared with
+			showDeleteModal: false,
+		}
+	},
+	components: {
+		multiselect: () => ({
+			component: import(/* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
 		}),
-		created() {
+	},
+	computed: mapState({
+		userInfo: state => state.auth.info,
+	}),
+	created() {
+
+		if (this.shareType === 'user') {
+			this.searchService = new UserService()
+			this.sharable = new UserModel()
+			this.searchLabel = 'username'
+
+			if (this.type === 'list') {
+				this.typeString = `list`
+				this.stuffService = new UserListService()
+				this.stuffModel = new UserListModel({listId: this.id})
+			} else if (this.type === 'namespace') {
+				this.typeString = `namespace`
+				this.stuffService = new UserNamespaceService()
+				this.stuffModel = new UserNamespaceModel({namespaceId: this.id})
+			} else {
+				throw new Error('Unknown type: ' + this.type)
+			}
+		} else if (this.shareType === 'team') {
+			this.searchService = new TeamService()
+			this.sharable = new TeamModel()
+			this.searchLabel = 'name'
+
+			if (this.type === 'list') {
+				this.typeString = `list`
+				this.stuffService = new TeamListService()
+				this.stuffModel = new TeamListModel({listId: this.id})
+			} else if (this.type === 'namespace') {
+				this.typeString = `namespace`
+				this.stuffService = new TeamNamespaceService()
+				this.stuffModel = new TeamNamespaceModel({namespaceId: this.id})
+			} else {
+				throw new Error('Unknown type: ' + this.type)
+			}
+		} else {
+			throw new Error('Unkown share type')
+		}
+
+		this.load()
+	},
+	methods: {
+		load() {
+			this.stuffService.getAll(this.stuffModel)
+				.then(r => {
+					this.$set(this, 'sharables', r)
+					r.forEach(s => this.$set(this.selectedRight, s.id, s.right))
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		deleteSharable() {
 
 			if (this.shareType === 'user') {
-				this.searchService = new UserService()
-				this.sharable = new UserModel()
-				this.searchLabel = 'username'
-
-				if (this.type === 'list') {
-					this.typeString = `list`
-					this.stuffService = new UserListService()
-					this.stuffModel = new UserListModel({listId: this.id})
-				} else if (this.type === 'namespace') {
-					this.typeString = `namespace`
-					this.stuffService = new UserNamespaceService()
-					this.stuffModel = new UserNamespaceModel({namespaceId: this.id})
-				} else {
-					throw new Error('Unknown type: ' + this.type)
-				}
+				this.stuffModel.userId = this.sharable.username
+			} else if (this.shareType === 'team') {
+				this.stuffModel.teamId = this.sharable.id
 			}
-			else if (this.shareType === 'team') {
-				this.searchService = new TeamService()
-				this.sharable = new TeamModel()
-				this.searchLabel = 'name'
-
-				if (this.type === 'list') {
-					this.typeString = `list`
-					this.stuffService = new TeamListService()
-					this.stuffModel = new TeamListModel({listId: this.id})
-				} else if (this.type === 'namespace') {
-					this.typeString = `namespace`
-					this.stuffService = new TeamNamespaceService()
-					this.stuffModel = new TeamNamespaceModel({namespaceId: this.id})
-				} else {
-					throw new Error('Unknown type: ' + this.type)
-				}
-			} else {
-				throw new Error('Unkown share type')
-			}
-
-			this.load()
+			this.stuffService.delete(this.stuffModel)
+				.then(() => {
+					this.showDeleteModal = false
+					for (const i in this.sharables) {
+						if (
+							(this.sharables[i].id === this.stuffModel.userId && this.shareType === 'user') ||
+							(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
+						) {
+							this.sharables.splice(i, 1)
+						}
+					}
+					this.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-		methods: {
-			load() {
-				this.stuffService.getAll(this.stuffModel)
-					.then(r => {
-						this.$set(this, 'sharables', r)
-						r.forEach(s => this.$set(this.selectedRight, s.id, s.right))
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			deleteSharable() {
+		add(admin) {
+			if (admin === null) {
+				admin = false
+			}
+			this.stuffModel.right = rights.READ
+			if (admin) {
+				this.stuffModel.right = rights.ADMIN
+			}
 
-				if (this.shareType === 'user') {
-					this.stuffModel.userId = this.sharable.username
-				} else if (this.shareType === 'team') {
-					this.stuffModel.teamId = this.sharable.id
-				}
-				this.stuffService.delete(this.stuffModel)
-					.then(() => {
-						this.showDeleteModal = false
-						for (const i in this.sharables) {
-							if (
-								(this.sharables[i].id === this.stuffModel.userId && this.shareType === 'user') ||
-								(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
-							) {
-								this.sharables.splice(i, 1)
-							}
+			if (this.shareType === 'user') {
+				this.stuffModel.userId = this.sharable.username
+			} else if (this.shareType === 'team') {
+				this.stuffModel.teamId = this.sharable.id
+			}
+
+			this.stuffService.create(this.stuffModel)
+				.then(() => {
+					this.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
+					this.load()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		toggleType(sharable) {
+			if (this.selectedRight[sharable.id] !== rights.ADMIN &&
+				this.selectedRight[sharable.id] !== rights.READ &&
+				this.selectedRight[sharable.id] !== rights.READ_WRITE
+			) {
+				this.selectedRight[sharable.id] = rights.READ
+			}
+			this.stuffModel.right = this.selectedRight[sharable.id]
+
+
+			if (this.shareType === 'user') {
+				this.stuffModel.userId = sharable.username
+			} else if (this.shareType === 'team') {
+				this.stuffModel.teamId = sharable.id
+			}
+
+			this.stuffService.update(this.stuffModel)
+				.then(r => {
+					for (const i in this.sharables) {
+						if (
+							(this.sharables[i].username === this.stuffModel.userId && this.shareType === 'user') ||
+							(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
+						) {
+							this.$set(this.sharables[i], 'right', r.right)
 						}
-						this.success({message: 'The ' + this.shareType + ' was successfully deleted from the ' + this.typeString + '.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			add(admin) {
-				if(admin === null) {
-					admin = false
-				}
-				this.stuffModel.right = rights.READ
-				if (admin) {
-					this.stuffModel.right = rights.ADMIN
-				}
-
-				if (this.shareType === 'user') {
-					this.stuffModel.userId = this.sharable.username
-				} else if (this.shareType === 'team') {
-					this.stuffModel.teamId = this.sharable.id
-				}
-
-				this.stuffService.create(this.stuffModel)
-					.then(() => {
-						this.success({message: 'The ' + this.shareType + ' was successfully added.'}, this)
-						this.load()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			toggleType(sharable) {
-				if (this.selectedRight[sharable.id] !== rights.ADMIN &&
-					this.selectedRight[sharable.id] !== rights.READ &&
-					this.selectedRight[sharable.id] !== rights.READ_WRITE
-				) {
-					this.selectedRight[sharable.id] = rights.READ
-				}
-				this.stuffModel.right = this.selectedRight[sharable.id]
-
-
-				if (this.shareType === 'user') {
-					this.stuffModel.userId = sharable.username
-				} else if (this.shareType === 'team') {
-					this.stuffModel.teamId = sharable.id
-				}
-
-				this.stuffService.update(this.stuffModel)
-					.then(r => {
-						for (const i in this.sharables) {
-							if (
-								(this.sharables[i].username === this.stuffModel.userId && this.shareType === 'user') ||
-								(this.sharables[i].id === this.stuffModel.teamId && this.shareType === 'team')
-							) {
-								this.$set(this.sharables[i], 'right', r.right)
-							}
-						}
-						this.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			find(query) {
-				if(query === '') {
-					this.$set(this, 'found', [])
-					return
-				}
-
-				this.searchService.getAll({}, {s: query})
-					.then(response => {
-						this.$set(this, 'found', response)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			clearAll () {
+					}
+					this.success({message: 'The ' + this.shareType + ' right was successfully updated.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		find(query) {
+			if (query === '') {
 				this.$set(this, 'found', [])
-			},
+				return
+			}
+
+			this.searchService.getAll({}, {s: query})
+				.then(response => {
+					this.$set(this, 'found', response)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		clearAll() {
+			this.$set(this, 'found', [])
+		},
+	},
+}
 </script>

src/components/tasks/edit-task.vue

@@ -3,35 +3,46 @@
 		<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.title" @change="editTaskSubmit()">
+				<input
+					:class="{ 'disabled': taskService.loading}"
+					:disabled="taskService.loading"
+					@change="editTaskSubmit()"
+					class="input"
+					id="tasktext"
+					placeholder="The task text is here..."
+					type="text"
+					v-focus
+					v-model="taskEditTask.title"/>
 			</div>
 		</div>
 		<div class="field">
 			<label class="label" for="taskdescription">Description</label>
 			<div class="control">
-				<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>
+				<editor
+					:preview-is-default="false"
+					id="taskdescription"
+					placeholder="The tasks description goes here..."
+					v-if="editorActive"
+					v-model="taskEditTask.description"
+				/>
 			</div>
 		</div>
 
 		<b>Reminder Dates</b>
-		<reminders v-model="taskEditTask.reminderDates" @change="editTaskSubmit()"/>
+		<reminders @change="editTaskSubmit()" v-model="taskEditTask.reminderDates"/>
 
 		<div class="field">
 			<label class="label" for="taskduedate">Due Date</label>
 			<div class="control">
 				<flat-pickr
-						:class="{ 'disabled': taskService.loading}"
-						class="input"
-						:disabled="taskService.loading"
-						v-model="taskEditTask.dueDate"
-						:config="flatPickerConfig"
-						@on-close="editTaskSubmit()"
-						id="taskduedate"
-						placeholder="The tasks due date is here...">
+					:class="{ 'disabled': taskService.loading}"
+					:config="flatPickerConfig"
+					:disabled="taskService.loading"
+					@on-close="editTaskSubmit()"
+					class="input"
+					id="taskduedate"
+					placeholder="The tasks due date is here..."
+					v-model="taskEditTask.dueDate">
 				</flat-pickr>
 			</div>
 		</div>
@@ -41,26 +52,26 @@
 			<div class="control columns">
 				<div class="column">
 					<flat-pickr
-							:class="{ 'disabled': taskService.loading}"
-							class="input"
-							:disabled="taskService.loading"
-							v-model="taskEditTask.startDate"
-							:config="flatPickerConfig"
-							@on-close="editTaskSubmit()"
-							id="taskduedate"
-							placeholder="Start date">
+						:class="{ 'disabled': taskService.loading}"
+						:config="flatPickerConfig"
+						:disabled="taskService.loading"
+						@on-close="editTaskSubmit()"
+						class="input"
+						id="taskduedate"
+						placeholder="Start date"
+						v-model="taskEditTask.startDate">
 					</flat-pickr>
 				</div>
 				<div class="column">
 					<flat-pickr
-							:class="{ 'disabled': taskService.loading}"
-							class="input"
-							:disabled="taskService.loading"
-							v-model="taskEditTask.endDate"
-							:config="flatPickerConfig"
-							@on-close="editTaskSubmit()"
-							id="taskduedate"
-							placeholder="End date">
+						:class="{ 'disabled': taskService.loading}"
+						:config="flatPickerConfig"
+						:disabled="taskService.loading"
+						@on-close="editTaskSubmit()"
+						class="input"
+						id="taskduedate"
+						placeholder="End date"
+						v-model="taskEditTask.endDate">
 					</flat-pickr>
 				</div>
 			</div>
@@ -68,20 +79,20 @@
 
 		<div class="field">
 			<label class="label" for="">Repeat after</label>
-			<repeat-after v-model="taskEditTask.repeatAfter" @change="editTaskSubmit()"/>
+			<repeat-after @change="editTaskSubmit()" v-model="taskEditTask.repeatAfter"/>
 		</div>
 
 		<div class="field">
 			<label class="label" for="">Priority</label>
 			<div class="control priority-select">
-				<priority-select v-model="taskEditTask.priority" @change="editTaskSubmit()"/>
+				<priority-select @change="editTaskSubmit()" v-model="taskEditTask.priority"/>
 			</div>
 		</div>
 
 		<div class="field">
 			<label class="label">Percent Done</label>
 			<div class="control">
-				<percent-done-select v-model="taskEditTask.percentDone" @change="editTaskSubmit()"/>
+				<percent-done-select @change="editTaskSubmit()" v-model="taskEditTask.percentDone"/>
 			</div>
 		</div>
 
@@ -95,8 +106,8 @@
 		<div class="field">
 			<label class="label" for="">Assignees</label>
 			<ul class="assingees">
-				<li v-for="(a, index) in taskEditTask.assignees" :key="a.id">
-					{{a.username}}
+				<li :key="a.id" v-for="(a, index) in taskEditTask.assignees">
+					{{ a.getDisplayName() }}
 					<a @click="deleteAssigneeByIndex(index)">
 						<icon icon="times"/>
 					</a>
@@ -106,7 +117,10 @@
 
 		<div class="field has-addons">
 			<div class="control is-expanded">
-				<edit-assignees :task-id="taskEditTask.id" :list-id="taskEditTask.listId" :initial-assignees="taskEditTask.assignees"/>
+				<edit-assignees
+					:initial-assignees="taskEditTask.assignees"
+					:list-id="taskEditTask.listId"
+					:task-id="taskEditTask.id"/>
 			</div>
 		</div>
 
@@ -118,13 +132,13 @@
 		</div>
 
 		<related-tasks
-			class="is-narrow"
-			:task-id="task.id"
-			:list-id="task.listId"
 			:initial-related-tasks="task.relatedTasks"
+			:list-id="task.listId"
+			:task-id="task.id"
+			class="is-narrow"
 		/>
 
-		<button type="submit" class="button is-success is-fullwidth" :class="{ 'is-loading': taskService.loading}">
+		<button :class="{ 'is-loading': taskService.loading}" class="button is-success is-fullwidth" type="submit">
 			Save
 		</button>
 
@@ -132,97 +146,113 @@
 </template>
 
 <script>
-	import flatPickr from 'vue-flatpickr-component'
-	import 'flatpickr/dist/flatpickr.css'
+import flatPickr from 'vue-flatpickr-component'
+import 'flatpickr/dist/flatpickr.css'
 
-	import ListService from '../../services/list'
-	import TaskService from '../../services/task'
-	import TaskModel from '../../models/task'
-	import priorities from '../../models/priorities'
-	import PrioritySelect from './partials/prioritySelect'
-	import PercentDoneSelect from './partials/percentDoneSelect'
-	import EditLabels from './partials/editLabels'
-	import EditAssignees from './partials/editAssignees'
-	import RelatedTasks from './partials/relatedTasks'
-	import RepeatAfter from './partials/repeatAfter'
-	import Reminders from './partials/reminders'
-	import ColorPicker from '../input/colorPicker'
+import ListService from '../../services/list'
+import TaskService from '../../services/task'
+import TaskModel from '../../models/task'
+import priorities from '../../models/priorities'
+import PrioritySelect from './partials/prioritySelect'
+import PercentDoneSelect from './partials/percentDoneSelect'
+import EditLabels from './partials/editLabels'
+import EditAssignees from './partials/editAssignees'
+import RelatedTasks from './partials/relatedTasks'
+import RepeatAfter from './partials/repeatAfter'
+import Reminders from './partials/reminders'
+import ColorPicker from '../input/colorPicker'
+import LoadingComponent from '../misc/loading'
+import ErrorComponent from '../misc/error'
 
-	export default {
-		name: 'edit-task',
-		data() {
-			return {
-				listId: this.$route.params.id,
-				listService: ListService,
-				taskService: TaskService,
+export default {
+	name: 'edit-task',
+	data() {
+		return {
+			listId: this.$route.params.id,
+			listService: ListService,
+			taskService: TaskService,
 
-				priorities: priorities,
-				list: {},
-				newTask: TaskModel,
-				isTaskEdit: false,
-				taskEditTask: TaskModel,
-				flatPickerConfig: {
-					altFormat: 'j M Y H:i',
-					altInput: true,
-					dateFormat: 'Y-m-d H:i',
-					enableTime: true,
-					onOpen: this.updateLastReminderDate,
-					onClose: this.addReminderDate,
-				},
-			}
+			priorities: priorities,
+			list: {},
+			editorActive: false,
+			newTask: TaskModel,
+			isTaskEdit: false,
+			taskEditTask: TaskModel,
+			flatPickerConfig: {
+				altFormat: 'j M Y H:i',
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				onOpen: this.updateLastReminderDate,
+				onClose: this.addReminderDate,
+			},
+		}
+	},
+	components: {
+		ColorPicker,
+		Reminders,
+		RepeatAfter,
+		RelatedTasks,
+		EditAssignees,
+		EditLabels,
+		PercentDoneSelect,
+		PrioritySelect,
+		flatPickr,
+		editor: () => ({
+			component: import(/* webpackChunkName: "editor" */ '../../components/input/editor'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	props: {
+		task: {
+			type: TaskModel,
+			required: true,
 		},
-		components: {
-			ColorPicker,
-			Reminders,
-			RepeatAfter,
-			RelatedTasks,
-			EditAssignees,
-			EditLabels,
-			PercentDoneSelect,
-			PrioritySelect,
-			flatPickr,
-		},
-		props: {
-			task: {
-				type: TaskModel,
-				required: true,
-			}
-		},
-		watch: {
-			task() {
-				this.taskEditTask = this.task
-				this.initTaskFields()
-			}
-		},
-		created() {
-			this.listService = new ListService()
-			this.taskService = new TaskService()
-			this.newTask = new TaskModel()
+	},
+	watch: {
+		task() {
 			this.taskEditTask = this.task
 			this.initTaskFields()
 		},
-		methods: {
-			initTaskFields() {
-				this.taskEditTask.dueDate = +new Date(this.task.dueDate) === 0 ? null : this.task.dueDate
-				this.taskEditTask.startDate = +new Date(this.task.startDate) === 0 ? null : this.task.startDate
-				this.taskEditTask.endDate = +new Date(this.task.endDate) === 0 ? null : this.task.endDate
-			},
-			editTaskSubmit() {
-				this.taskService.update(this.taskEditTask)
-					.then(r => {
-						this.$set(this, 'taskEditTask', r)
-						this.initTaskFields()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
+	},
+	created() {
+		this.listService = new ListService()
+		this.taskService = new TaskService()
+		this.newTask = new TaskModel()
+		this.taskEditTask = this.task
+		this.initTaskFields()
+	},
+	methods: {
+		initTaskFields() {
+			this.taskEditTask.dueDate = +new Date(this.task.dueDate) === 0 ? null : this.task.dueDate
+			this.taskEditTask.startDate = +new Date(this.task.startDate) === 0 ? null : this.task.startDate
+			this.taskEditTask.endDate = +new Date(this.task.endDate) === 0 ? null : this.task.endDate
+			// This makes the editor trigger its mounted function again which makes it forget every input
+			// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
+			// which made it impossible to detect change from the outside. Therefore the component would
+			// not update if new content from the outside was made available.
+			// See https://github.com/NikulinIlya/vue-easymde/issues/3
+			this.editorActive = false
+			this.$nextTick(() => this.editorActive = true)
 		},
-	}
+		editTaskSubmit() {
+			this.taskService.update(this.taskEditTask)
+				.then(r => {
+					this.$set(this, 'taskEditTask', r)
+					this.initTaskFields()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
 </script>
 
 <style scoped>
-	form {
-		margin-bottom: 1em;
-	}
+form {
+	margin-bottom: 1em;
+}
 </style>

src/components/tasks/gantt-component.vue

@@ -1,22 +1,40 @@
 <template>
 	<div class="gantt-chart box">
+		<div class="filter-container">
+			<div class="items">
+				<button @click="showTaskFilter = !showTaskFilter" class="button">
+					<span class="icon is-small">
+						<icon icon="filter"/>
+					</span>
+					Filters
+				</button>
+			</div>
+			<transition name="fade">
+				<filters
+					@change="loadTasks"
+					v-if="showTaskFilter"
+					v-model="params"
+				/>
+			</transition>
+		</div>
 		<div class="dates">
 			<template v-for="(y, yk) in days">
-				<div class="months" :key="yk + 'year'">
-					<div class="month" v-for="(m, mk) in days[yk]" :key="mk + 'month'">
-						{{new Date((new Date(yk)).setMonth(mk)).toLocaleString('en-us', { month: 'long' })}}, {{(new Date(yk)).getFullYear()}}
+				<div :key="yk + 'year'" class="months">
+					<div :key="mk + 'month'" class="month" v-for="(m, mk) in days[yk]">
+						{{ new Date((new Date(yk)).setMonth(mk)).toLocaleString('en-us', {month: 'long'}) }},
+						{{ (new Date(yk)).getFullYear() }}
 						<div class="days">
 							<div
-									class="day"
-									v-for="(d, dk) in days[yk][mk]"
-									:key="dk + 'day'"
-									:style="{'width': dayWidth + 'px'}"
-									:class="{'today': d.toDateString() === now.toDateString()}">
+								:class="{'today': d.toDateString() === now.toDateString()}"
+								:key="dk + 'day'"
+								:style="{'width': dayWidth + 'px'}"
+								class="day"
+								v-for="(d, dk) in days[yk][mk]">
 								<span class="theday" v-if="dayWidth > 25">
-									{{d.getDate()}}
+									{{ d.getDate() }}
 								</span>
 								<span class="weekday" v-if="dayWidth > 25">
-									{{d.toLocaleString('en-us', { weekday: 'short' })}}
+									{{ d.toLocaleString('en-us', {weekday: 'short'}) }}
 								</span>
 							</div>
 						</div>
@@ -24,38 +42,42 @@
 				</div>
 			</template>
 		</div>
-		<div class="tasks" :style="{'width': fullWidth + 'px'}">
-			<div class="row" v-for="(t, k) in theTasks" :key="t.id" :style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}">
+		<div :style="{'width': fullWidth + 'px'}" class="tasks">
+			<div
+				:key="t.id"
+				:style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}"
+				class="row"
+				v-for="(t, k) in theTasks">
 				<VueDragResize
-						class="task"
-						:class="{
+					:class="{
 							'done': t.done,
 							'is-current-edit': taskToEdit !== null && taskToEdit.id === t.id,
 							'has-light-text': !colorIsDark(t.hexColor),
 							'has-dark-text': colorIsDark(t.hexColor)
 						}"
-						:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
-						:isActive="true"
-						:x="t.offsetDays * dayWidth - 6"
-						:y="0"
-						:w="t.durationDays * dayWidth"
-						:h="31"
-						:minw="dayWidth"
-						:snapToGrid="true"
-						:gridX="dayWidth"
-						:sticks="['mr', 'ml']"
-						axis="x"
-						:parentLimitation="true"
-						:parentW="fullWidth"
-						@resizestop="resizeTask"
-						@dragstop="resizeTask"
-						@clicked="setTaskDragged(t)"
+					:gridX="dayWidth"
+					:h="31"
+					:isActive="canWrite"
+					:minw="dayWidth"
+					:parentLimitation="true"
+					:parentW="fullWidth"
+					:snapToGrid="true"
+					:sticks="['mr', 'ml']"
+					:style="{'border-color': t.hexColor, 'background-color': t.hexColor}"
+					:w="t.durationDays * dayWidth"
+					:x="t.offsetDays * dayWidth - 6"
+					:y="0"
+					@clicked="setTaskDragged(t)"
+					@dragstop="resizeTask"
+					@resizestop="resizeTask"
+					axis="x"
+					class="task"
 				>
 					<span :class="{
 					'has-high-priority': t.priority >= priorities.HIGH,
 					'has-not-so-high-priority': t.priority === priorities.HIGH,
 					'has-super-high-priority': t.priority === priorities.DO_NOW
-					}">{{t.title}}</span>
+					}">{{ t.title }}</span>
 					<priority-label :priority="t.priority"/>
 					<!-- using the key here forces vue to use the updated version model and not the response returned by the api -->
 					<a @click="editTask(theTasks[k])" class="edit-toggle">
@@ -64,43 +86,47 @@
 				</VueDragResize>
 			</div>
 			<template v-if="showTaskswithoutDates">
-				<div class="row" v-for="(t, k) in tasksWithoutDates" :key="t.id" :style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}">
+				<div
+					:key="t.id"
+					:style="{background: 'repeating-linear-gradient(90deg, #ededed, #ededed 1px, ' + (k % 2 === 0 ? '#fafafa 1px, #fafafa ' : '#fff 1px, #fff ') + dayWidth + 'px)'}"
+					class="row"
+					v-for="(t, k) in tasksWithoutDates">
 					<VueDragResize
-							class="task nodate"
-							:isActive="true"
-							:x="dayOffsetUntilToday * dayWidth - 6"
-							:y="0"
-							:h="31"
-							:minw="dayWidth"
-							:snapToGrid="true"
-							:gridX="dayWidth"
-							:sticks="['mr', 'ml']"
-							axis="x"
-							:parentLimitation="true"
-							:parentW="fullWidth"
-							@resizestop="resizeTask"
-							@dragstop="resizeTask"
-							@clicked="setTaskDragged(t)"
-							v-tooltip="'This task has no dates set.'"
+						:gridX="dayWidth"
+						:h="31"
+						:isActive="canWrite"
+						:minw="dayWidth"
+						:parentLimitation="true"
+						:parentW="fullWidth"
+						:snapToGrid="true"
+						:sticks="['mr', 'ml']"
+						:x="dayOffsetUntilToday * dayWidth - 6"
+						:y="0"
+						@clicked="setTaskDragged(t)"
+						@dragstop="resizeTask"
+						@resizestop="resizeTask"
+						axis="x"
+						class="task nodate"
+						v-tooltip="'This task has no dates set.'"
 					>
-						<span>{{t.title}}</span>
+						<span>{{ t.title }}</span>
 					</VueDragResize>
 				</div>
 			</template>
 		</div>
-		<form @submit.prevent="addNewTask()" class="add-new-task">
+		<form @submit.prevent="addNewTask()" class="add-new-task" v-if="canWrite">
 			<transition name="width">
 				<input
-					type="text"
-					v-model="newTaskTitle"
-					class="input"
-					v-if="newTaskFieldActive"
-					ref="newTaskTitleField"
-					@keyup.esc="newTaskFieldActive = false"
 					@blur="hideCrateNewTask"
+					@keyup.esc="newTaskFieldActive = false"
+					class="input"
+					ref="newTaskTitleField"
+					type="text"
+					v-if="newTaskFieldActive"
+					v-model="newTaskTitle"
 				/>
 			</transition>
-			<button class="button is-primary noshadow" @click="showCreateNewTask">
+			<button @click="showCreateNewTask" class="button is-primary noshadow">
 				<span class="icon is-small">
 					<icon icon="plus"/>
 				</span>
@@ -113,7 +139,7 @@
 					<p class="card-header-title">
 						Edit Task
 					</p>
-					<a class="card-header-icon" @click="() => {isTaskEdit = false; taskToEdit = null}">
+					<a @click="() => {isTaskEdit = false; taskToEdit = null}" class="card-header-icon">
 						<span class="icon">
 							<icon icon="times"/>
 						</span>
@@ -130,253 +156,272 @@
 </template>
 
 <script>
-	import VueDragResize from 'vue-drag-resize'
-	import EditTask from './edit-task'
+import VueDragResize from 'vue-drag-resize'
+import EditTask from './edit-task'
 
-	import TaskService from '../../services/task'
-	import TaskModel from '../../models/task'
-	import priorities from '../../models/priorities'
-	import PriorityLabel from './partials/priorityLabel'
-	import TaskCollectionService from '../../services/taskCollection'
+import TaskService from '../../services/task'
+import TaskModel from '../../models/task'
+import priorities from '../../models/priorities'
+import PriorityLabel from './partials/priorityLabel'
+import TaskCollectionService from '../../services/taskCollection'
+import {mapState} from 'vuex'
+import Rights from '../../models/rights.json'
+import Filters from '@/components/list/partials/filters'
 
-	export default {
-		name: 'GanttChart',
-		components: {
-			PriorityLabel,
-			EditTask,
-			VueDragResize,
+export default {
+	name: 'GanttChart',
+	components: {
+		Filters,
+		PriorityLabel,
+		EditTask,
+		VueDragResize,
+	},
+	props: {
+		listId: {
+			type: Number,
+			required: true,
 		},
-		props: {
-			listId: {
-				type: Number,
-				required: true,
-			},
-			showTaskswithoutDates: {
-				type: Boolean,
-				default: false,
-			},
-			dateFrom: {
-				default: new Date((new Date()).setDate((new Date()).getDate() - 15))
-			},
-			dateTo: {
-				default: new Date((new Date()).setDate((new Date()).getDate() + 30))
-			},
-			// The width of a day in pixels, used to calculate all sorts of things.
-			dayWidth: {
-				type: Number,
-				default: 35,
-			}
+		showTaskswithoutDates: {
+			type: Boolean,
+			default: false,
 		},
-		data() {
-			return {
-				days: [],
-				startDate: null,
-				endDate: null,
-				theTasks: [], // Pretty much a copy of the prop, since we cant mutate the prop directly
-				tasksWithoutDates: [],
-				taskService: TaskService,
-				taskDragged: null, // Saves to currently dragged task to be able to update it
-				fullWidth: 0,
-				now: null,
-				dayOffsetUntilToday: 0,
-				isTaskEdit: false,
-				taskToEdit: null,
-				newTaskTitle: '',
-				newTaskFieldActive: false,
-				priorities: {},
-				taskCollectionService: TaskCollectionService,
-			}
+		dateFrom: {
+			default: new Date((new Date()).setDate((new Date()).getDate() - 15)),
 		},
-		watch: {
-			'dateFrom': 'buildTheGanttChart',
-			'dateTo': 'buildTheGanttChart',
-			'listId': 'parseTasks',
+		dateTo: {
+			default: new Date((new Date()).setDate((new Date()).getDate() + 30)),
 		},
-		created() {
-			this.now = new Date()
-			this.taskCollectionService = new TaskCollectionService()
-			this.taskService = new TaskService()
-			this.priorities = priorities
+		// The width of a day in pixels, used to calculate all sorts of things.
+		dayWidth: {
+			type: Number,
+			default: 35,
 		},
-		mounted() {
-			this.buildTheGanttChart()
-		},
-		methods: {
-			buildTheGanttChart() {
-				this.setDates()
-				this.prepareGanttDays()
-				this.parseTasks()
-			},
-			setDates() {
-				this.startDate = new Date(this.dateFrom)
-				this.endDate = new Date(this.dateTo)
+	},
+	data() {
+		return {
+			days: [],
+			startDate: null,
+			endDate: null,
+			theTasks: [], // Pretty much a copy of the prop, since we cant mutate the prop directly
+			tasksWithoutDates: [],
+			taskService: TaskService,
+			taskDragged: null, // Saves to currently dragged task to be able to update it
+			fullWidth: 0,
+			now: null,
+			dayOffsetUntilToday: 0,
+			isTaskEdit: false,
+			taskToEdit: null,
+			newTaskTitle: '',
+			newTaskFieldActive: false,
+			priorities: {},
+			taskCollectionService: TaskCollectionService,
+			showTaskFilter: false,
 
-				this.dayOffsetUntilToday = Math.floor((this.now - this.startDate) / 1000 / 60 / 60 / 24) +1
+			params: {
+				sort_by: ['done', 'id'],
+				order_by: ['asc', 'desc'],
+				filter_by: ['done'],
+				filter_value: ['false'],
+				filter_comparator: ['equals'],
+				filter_concat: 'and',
 			},
-			prepareGanttDays() {
-				// Layout: years => [months => [days]]
-				let years = {};
-				for (let d = this.startDate; d <= this.endDate; d.setDate(d.getDate() + 1)) {
-					let date = new Date(d)
-					if (years[date.getFullYear() + ''] === undefined) {
-						years[date.getFullYear() + ''] = {}
-					}
-					if (years[date.getFullYear() + ''][date.getMonth()  + ''] === undefined) {
-						years[date.getFullYear() + ''][date.getMonth()  + ''] = []
-					}
-					years[date.getFullYear() + ''][date.getMonth()  + ''].push(date)
-					this.fullWidth += this.dayWidth
+		}
+	},
+	watch: {
+		'dateFrom': 'buildTheGanttChart',
+		'dateTo': 'buildTheGanttChart',
+		'listId': 'parseTasks',
+	},
+	created() {
+		this.now = new Date()
+		this.taskCollectionService = new TaskCollectionService()
+		this.taskService = new TaskService()
+		this.priorities = priorities
+	},
+	mounted() {
+		this.buildTheGanttChart()
+	},
+	computed: mapState({
+		canWrite: state => state.currentList.maxRight > Rights.READ,
+	}),
+	methods: {
+		buildTheGanttChart() {
+			this.setDates()
+			this.prepareGanttDays()
+			this.parseTasks()
+		},
+		setDates() {
+			this.startDate = new Date(this.dateFrom)
+			this.endDate = new Date(this.dateTo)
+
+			this.dayOffsetUntilToday = Math.floor((this.now - this.startDate) / 1000 / 60 / 60 / 24) + 1
+		},
+		prepareGanttDays() {
+			// Layout: years => [months => [days]]
+			let years = {}
+			for (let d = this.startDate; d <= this.endDate; d.setDate(d.getDate() + 1)) {
+				let date = new Date(d)
+				if (years[date.getFullYear() + ''] === undefined) {
+					years[date.getFullYear() + ''] = {}
 				}
-				this.$set(this, 'days', years)
-			},
-			parseTasks() {
-				this.setDates()
-				this.prepareTasks()
-			},
-			prepareTasks() {
-
-				const getAllTasks = (page = 1) => {
-					return this.taskCollectionService.getAll({listId: this.listId}, {}, page)
-						.then(tasks => {
-							if(page < this.taskCollectionService.totalPages) {
-								return getAllTasks(page + 1)
-									.then(nextTasks => {
-										return tasks.concat(nextTasks)
-									})
-							} else {
-								return tasks
-							}
-						})
-						.catch(e => {
-							return Promise.reject(e)
-						})
+				if (years[date.getFullYear() + ''][date.getMonth() + ''] === undefined) {
+					years[date.getFullYear() + ''][date.getMonth() + ''] = []
 				}
+				years[date.getFullYear() + ''][date.getMonth() + ''].push(date)
+				this.fullWidth += this.dayWidth
+			}
+			this.$set(this, 'days', years)
+		},
+		parseTasks() {
+			this.setDates()
+			this.loadTasks()
+		},
+		loadTasks() {
+			this.$set(this, 'theTasks', [])
+			this.$set(this, 'tasksWithoutDates', [])
 
-				getAllTasks()
+			const getAllTasks = (page = 1) => {
+				return this.taskCollectionService.getAll({listId: this.listId}, this.params, page)
 					.then(tasks => {
-						this.theTasks = tasks
-							.filter(t => {
-								if(t.startDate === null && !t.done) {
-									this.tasksWithoutDates.push(t)
-								}
-								return t.startDate >= this.startDate && t.endDate <= this.endDate
-							})
-							.map(t => {
-								return this.addGantAttributes(t)
-							})
-							.sort(function(a,b) {
-								if (a.startDate < b.startDate)
-									return -1
-								if (a.startDate > b.startDate)
-									return 1
-								return 0
-							})
+						if (page < this.taskCollectionService.totalPages) {
+							return getAllTasks(page + 1)
+								.then(nextTasks => {
+									return tasks.concat(nextTasks)
+								})
+						} else {
+							return tasks
+						}
 					})
 					.catch(e => {
-						this.error(e, this)
+						return Promise.reject(e)
 					})
-			},
-			addGantAttributes(t) {
-				t.endDate === null ? this.endDate : t.endDate
-				t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
-				t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1
-				return t
-			},
-			setTaskDragged(t) {
-				this.taskDragged = t
-			},
-			resizeTask(newRect) {
+			}
 
-				// Timeout to definitly catch if the user clicked on taskedit
-				setTimeout(() => {
-
-					if(this.isTaskEdit) {
-						return
-					}
-
-					let didntHaveDates = this.taskDragged.startDate === null ? true : false
-
-					let startDate = new Date(this.startDate)
-					startDate.setDate(startDate.getDate() + newRect.left / this.dayWidth)
-					startDate.setUTCHours(0)
-					startDate.setUTCMinutes(0)
-					startDate.setUTCSeconds(0)
-					startDate.setUTCMilliseconds(0)
-					this.taskDragged.startDate = startDate
-					let endDate = new Date(startDate)
-					endDate.setDate(startDate.getDate() + newRect.width / this.dayWidth)
-					this.taskDragged.startDate = startDate
-					this.taskDragged.endDate = endDate
-
-			
-					// We take the task from the overall tasks array because the one in it has bad data after it was updated once.
-					// FIXME: This is a workaround. We should use a better mechanism to get the task or, even better,
-					// prevent it from containing outdated Data in the first place.
-					for (const tt in this.theTasks) {
-						if (this.theTasks[tt].id === this.taskDragged.id) {
-							this.$set(this, 'taskDragged', this.theTasks[tt])
-							break
-						}
-					}
-
-					this.taskService.update(this.taskDragged)
-						.then(r => {
-							// If the task didn't have dates before, we'll update the list
-							if(didntHaveDates) {
-								for (const t in this.tasksWithoutDates) {
-									if (this.tasksWithoutDates[t].id === r.id) {
-										this.tasksWithoutDates.splice(t, 1)
-										break
-									}
-								}
-								this.theTasks.push(this.addGantAttributes(r))
-							} else {
-								for (const tt in this.theTasks) {
-									if (this.theTasks[tt].id === r.id) {
-										this.$set(this.theTasks, tt, this.addGantAttributes(r))
-										break
-									}
-								}
+			getAllTasks()
+				.then(tasks => {
+					this.theTasks = tasks
+						.filter(t => {
+							if (t.startDate === null && !t.done) {
+								this.tasksWithoutDates.push(t)
 							}
+							return t.startDate >= this.startDate && t.endDate <= this.endDate
 						})
-						.catch(e => {
-							this.error(e, this)
+						.map(t => {
+							return this.addGantAttributes(t)
 						})
-				}, 100)
-			},
-			editTask(task) {
-				this.taskToEdit = task
-				this.isTaskEdit = true
-			},
-			showCreateNewTask() {
-				if(!this.newTaskFieldActive) {
-					// Timeout to not send the form if the field isn't even shown
-					setTimeout(() => {
-						this.newTaskFieldActive = true
-						this.$nextTick(() => this.$refs.newTaskTitleField.focus())
-					}, 100)
-				}
-			},
-			hideCrateNewTask() {
-				if(this.newTaskTitle === '') {
-					this.$nextTick(() => this.newTaskFieldActive = false)
-				}
-			},
-			addNewTask() {
-				if (!this.newTaskFieldActive) {
+						.sort(function (a, b) {
+							if (a.startDate < b.startDate)
+								return -1
+							if (a.startDate > b.startDate)
+								return 1
+							return 0
+						})
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		addGantAttributes(t) {
+			t.endDate === null ? this.endDate : t.endDate
+			t.durationDays = Math.floor((t.endDate - t.startDate) / 1000 / 60 / 60 / 24) + 1
+			t.offsetDays = Math.floor((t.startDate - this.startDate) / 1000 / 60 / 60 / 24) + 1
+			return t
+		},
+		setTaskDragged(t) {
+			this.taskDragged = t
+		},
+		resizeTask(newRect) {
+
+			// Timeout to definitly catch if the user clicked on taskedit
+			setTimeout(() => {
+
+				if (this.isTaskEdit) {
 					return
 				}
-				let task = new TaskModel({title: this.newTaskTitle, listId: this.listId})
-				this.taskService.create(task)
+
+				let didntHaveDates = this.taskDragged.startDate === null ? true : false
+
+				let startDate = new Date(this.startDate)
+				startDate.setDate(startDate.getDate() + newRect.left / this.dayWidth)
+				startDate.setUTCHours(0)
+				startDate.setUTCMinutes(0)
+				startDate.setUTCSeconds(0)
+				startDate.setUTCMilliseconds(0)
+				this.taskDragged.startDate = startDate
+				let endDate = new Date(startDate)
+				endDate.setDate(startDate.getDate() + newRect.width / this.dayWidth)
+				this.taskDragged.startDate = startDate
+				this.taskDragged.endDate = endDate
+
+
+				// We take the task from the overall tasks array because the one in it has bad data after it was updated once.
+				// FIXME: This is a workaround. We should use a better mechanism to get the task or, even better,
+				// prevent it from containing outdated Data in the first place.
+				for (const tt in this.theTasks) {
+					if (this.theTasks[tt].id === this.taskDragged.id) {
+						this.$set(this, 'taskDragged', this.theTasks[tt])
+						break
+					}
+				}
+
+				this.taskService.update(this.taskDragged)
 					.then(r => {
-						this.tasksWithoutDates.push(this.addGantAttributes(r))
-						this.newTaskTitle = ''
-						this.hideCrateNewTask()
+						// If the task didn't have dates before, we'll update the list
+						if (didntHaveDates) {
+							for (const t in this.tasksWithoutDates) {
+								if (this.tasksWithoutDates[t].id === r.id) {
+									this.tasksWithoutDates.splice(t, 1)
+									break
+								}
+							}
+							this.theTasks.push(this.addGantAttributes(r))
+						} else {
+							for (const tt in this.theTasks) {
+								if (this.theTasks[tt].id === r.id) {
+									this.$set(this.theTasks, tt, this.addGantAttributes(r))
+									break
+								}
+							}
+						}
 					})
 					.catch(e => {
 						this.error(e, this)
 					})
-			},
+			}, 100)
 		},
-	}
+		editTask(task) {
+			this.taskToEdit = task
+			this.isTaskEdit = true
+		},
+		showCreateNewTask() {
+			if (!this.newTaskFieldActive) {
+				// Timeout to not send the form if the field isn't even shown
+				setTimeout(() => {
+					this.newTaskFieldActive = true
+					this.$nextTick(() => this.$refs.newTaskTitleField.focus())
+				}, 100)
+			}
+		},
+		hideCrateNewTask() {
+			if (this.newTaskTitle === '') {
+				this.$nextTick(() => this.newTaskFieldActive = false)
+			}
+		},
+		addNewTask() {
+			if (!this.newTaskFieldActive) {
+				return
+			}
+			let task = new TaskModel({title: this.newTaskTitle, listId: this.listId})
+			this.taskService.create(task)
+				.then(r => {
+					this.tasksWithoutDates.push(this.addGantAttributes(r))
+					this.newTaskTitle = ''
+					this.hideCrateNewTask()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
 </script>

src/components/tasks/mixins/attachmentUpload.js

@@ -0,0 +1,32 @@
+import AttachmentModel from '../../../models/attachment'
+import AttachmentService from '../../../services/attachment'
+
+export default {
+	methods: {
+		attachmentUpload(file, onSuccess) {
+			const files = [file]
+
+			const attachmentService = new AttachmentService()
+
+			const attachmentModel = new AttachmentModel({taskId: this.taskId})
+			attachmentService.create(attachmentModel, files)
+				.then(r => {
+					if (r.success !== null) {
+						r.success.forEach(a => {
+							this.$store.commit('attachments/add', a)
+							this.$store.dispatch('tasks/addTaskAttachment', {taskId: this.taskId, attachment: a})
+							onSuccess(`${window.API_URL}/tasks/${this.taskId}/attachments/${a.id}`)
+						})
+					}
+					if (r.errors !== null) {
+						r.errors.forEach(m => {
+							this.error(m)
+						})
+					}
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}

src/components/tasks/mixins/taskList.js

@@ -44,7 +44,7 @@ export default {
 			params = null,
 		) {
 
-			// Because this function is triggered every time on navigation, we're putting a condition here to only load it when we actually want to show tasks
+			// Because this function is triggered every time on topNavigation, we're putting a condition here to only load it when we actually want to show tasks
 			// FIXME: This is a bit hacky -> Cleanup.
 			if (
 				this.$route.name !== 'list.list' &&
@@ -137,7 +137,7 @@ export default {
 
 			this.$router.push({
 				name: 'list.list',
-				query: {search: this.searchTerm}
+				query: {search: this.searchTerm},
 			})
 		},
 		hideSearchBar() {
@@ -154,12 +154,12 @@ export default {
 			return {
 				name: 'list.' + type,
 				params: {
-					type: type
+					type: type,
 				},
 				query: {
 					page: page,
 				},
 			}
 		},
-	}
+	},
 }

src/components/tasks/partials/attachments.vue

@@ -6,16 +6,30 @@
 			</span>
 			Attachments
 			<a
-					class="button is-primary is-outlined is-small noshadow"
-					@click="$refs.files.click()"
-					:disabled="attachmentService.loading">
+				:disabled="attachmentService.loading"
+				@click="$refs.files.click()"
+				class="button is-primary is-outlined is-small noshadow"
+				v-if="editEnabled">
 				<span class="icon is-small"><icon icon="cloud-upload-alt"/></span>
 				Upload attachment
 			</a>
 		</h3>
 
-		<input type="file" id="files" ref="files" multiple @change="uploadNewAttachment()" :disabled="attachmentService.loading"/>
-		<progress v-if="attachmentService.uploadProgress > 0" class="progress is-primary" :value="attachmentService.uploadProgress" max="100">{{ attachmentService.uploadProgress }}%</progress>
+		<input
+			:disabled="attachmentService.loading"
+			@change="uploadNewAttachment()"
+			id="files"
+			multiple
+			ref="files"
+			type="file"
+			v-if="editEnabled"/>
+		<progress
+			:value="attachmentService.uploadProgress"
+			class="progress is-primary"
+			max="100"
+			v-if="attachmentService.uploadProgress > 0">
+			{{ attachmentService.uploadProgress }}%
+		</progress>
 
 		<table>
 			<tr>
@@ -23,25 +37,33 @@
 				<th>Size</th>
 				<th>Type</th>
 				<th>Date</th>
-				<th>Created By</th>
+				<th>Created&nbsp;By</th>
 				<th>Action</th>
 			</tr>
-			<tr class="attachment" v-for="a in attachments" :key="a.id">
+			<tr :key="a.id" class="attachment" v-for="a in attachments">
 				<td>
 					{{ a.file.name }}
 				</td>
 				<td>{{ a.file.getHumanSize() }}</td>
 				<td>{{ a.file.mime }}</td>
 				<td v-tooltip="formatDate(a.created)">{{ formatDateSince(a.created) }}</td>
-				<td><user :user="a.createdBy" :avatar-size="30"/></td>
+				<td class="has-text-centered">
+					<user :avatar-size="30" :user="a.createdBy" :show-username="false" :is-inline="true"/>
+				</td>
 				<td>
 					<div class="buttons has-addons">
-						<a class="button is-primary noshadow" @click="downloadAttachment(a)" v-tooltip="'Download this attachment'">
+						<a
+							@click="downloadAttachment(a)"
+							class="button is-primary noshadow"
+							v-tooltip="'Download this attachment'">
 							<span class="icon">
 								<icon icon="cloud-download-alt"/>
 							</span>
 						</a>
-						<a class="button is-danger noshadow" v-tooltip="'Delete this attachment'" @click="() => {attachmentToDelete = a; showDeleteModal = true}">
+						<a
+							@click="() => {attachmentToDelete = a; showDeleteModal = true}"
+							class="button is-danger noshadow" v-if="editEnabled"
+							v-tooltip="'Delete this attachment'">
 							<span class="icon">
 								<icon icon="trash-alt"/>
 							</span>
@@ -52,7 +74,7 @@
 		</table>
 
 		<!-- Dropzone -->
-		<div class="dropzone" :class="{ 'hidden': !showDropzone }">
+		<div :class="{ 'hidden': !showDropzone }" class="dropzone" v-if="editEnabled">
 			<div class="drop-hint">
 				<div class="icon">
 					<icon icon="cloud-upload-alt"/>
@@ -65,9 +87,9 @@
 
 		<!-- Delete modal -->
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				v-on:submit="deleteAttachment()">
+			@close="showDeleteModal = false"
+			v-if="showDeleteModal"
+			@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>
@@ -76,121 +98,115 @@
 </template>
 
 <script>
-	import AttachmentService from '../../../services/attachment'
-	import AttachmentModel from '../../../models/attachment'
-	import User from '../../misc/user'
+import AttachmentService from '../../../services/attachment'
+import AttachmentModel from '../../../models/attachment'
+import User from '../../misc/user'
+import {mapState} from 'vuex'
 
-	export default {
-		name: 'attachments',
-		components: {
-			User,
+export default {
+	name: 'attachments',
+	components: {
+		User,
+	},
+	data() {
+		return {
+			attachmentService: AttachmentService,
+			showDropzone: false,
+
+			showDeleteModal: false,
+			attachmentToDelete: AttachmentModel,
+		}
+	},
+	props: {
+		taskId: {
+			required: true,
+			type: Number,
 		},
-		data() {
-			return {
-				attachments: [],
-				attachmentService: AttachmentService,
-				showDropzone: false,
+		initialAttachments: {
+			type: Array,
+		},
+		editEnabled: {
+			default: true,
+		},
+	},
+	created() {
+		this.attachmentService = new AttachmentService()
+	},
+	computed: mapState({
+		attachments: state => state.attachments.attachments,
+	}),
+	mounted() {
+		document.addEventListener('dragenter', e => {
+			e.stopPropagation()
+			e.preventDefault()
+			this.showDropzone = true
+		})
 
-				showDeleteModal: false,
-				attachmentToDelete: AttachmentModel,
+		window.addEventListener('dragleave', e => {
+			e.stopPropagation()
+			e.preventDefault()
+			this.showDropzone = false
+		})
+
+		document.addEventListener('dragover', e => {
+			e.stopPropagation()
+			e.preventDefault()
+			this.showDropzone = true
+		})
+
+		document.addEventListener('drop', e => {
+			e.stopPropagation()
+			e.preventDefault()
+
+			let files = e.dataTransfer.files
+			this.uploadFiles(files)
+			this.showDropzone = false
+		})
+	},
+	methods: {
+		downloadAttachment(attachment) {
+			this.attachmentService.download(attachment)
+		},
+		uploadNewAttachment() {
+			if (this.$refs.files.files.length === 0) {
+				return
 			}
-		},
-		props: {
-			taskId: {
-				required: true,
-				type: Number,
-			},
-			initialAttachments: {
-				type: Array,
-			}
-		},
-		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
-			})
+			this.uploadFiles(this.$refs.files.files)
 		},
-		watch: {
-			initialAttachments(newVal) {
-				this.attachments = newVal
-			},
+		uploadFiles(files) {
+			const attachmentModel = new AttachmentModel({taskId: this.taskId})
+			this.attachmentService.create(attachmentModel, files)
+				.then(r => {
+					if (r.success !== null) {
+						r.success.forEach(a => {
+							this.$store.commit('attachments/add', a)
+							this.$store.dispatch('tasks/addTaskAttachment', {taskId: this.taskId, attachment: a})
+						})
+					}
+					if (r.errors !== null) {
+						r.errors.forEach(m => {
+							this.error(m)
+						})
+					}
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-		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.attachments.push(a)
-								this.$store.dispatch('tasks/addTaskAttachment', {taskId: this.taskId, attachment: a})
-							})
-						}
-						if(r.errors !== null) {
-							r.errors.forEach(m => {
-								this.error(m)
-							})
-						}
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-
-			},
-			deleteAttachment() {
-				this.attachmentService.delete(this.attachmentToDelete)
-					.then(r => {
-						// 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
-					})
-			},
+		deleteAttachment() {
+			this.attachmentService.delete(this.attachmentToDelete)
+				.then(r => {
+					this.$store.commit('attachments/removeById', this.attachmentToDelete.id)
+					this.success(r, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.showDeleteModal = false
+				})
 		},
-	}
+	},
+}
 </script>

src/components/tasks/partials/comments.vue

@@ -1,62 +1,87 @@
 <template>
-	<div class="content details has-top-border">
-		<h1>
+	<div :class="{'has-top-border': canWrite || comments.length > 0}" class="content details">
+		<h1 v-if="canWrite || comments.length > 0">
 			<span class="icon is-grey">
 				<icon :icon="['far', 'comments']"/>
 			</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"/>
+			<span class="is-inline-flex is-align-items-center" v-if="taskCommentService.loading && saving === null && !creating">
+				<span class="loader is-inline-block mr-2"></span>
+				Loading comments...
+			</span>
+			<div :key="c.id" class="media comment" v-for="c in comments">
+				<figure class="media-left is-hidden-mobile">
+					<img :src="c.author.getAvatarUrl(48)" alt="" class="image is-avatar" height="48" width="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 class="comment-info">
+						<img :src="c.author.getAvatarUrl(20)" alt="" class="image is-avatar" height="20" width="20"/>
+						<strong>{{ c.author.getDisplayName() }}</strong>&nbsp;
+						<span v-tooltip="formatDate(c.created)">{{ formatDateSince(c.created) }}</span>
+						<span v-if="+new Date(c.created) !== +new Date(c.updated)" v-tooltip="formatDate(c.updated)">
+							· edited {{ formatDateSince(c.updated) }}
+						</span>
+						<transition name="fade">
+							<span class="is-inline-flex" v-if="taskCommentService.loading && saving === c.id">
+								<span class="loader is-inline-block mr-2"></span>
+								Saving...
+							</span>
+							<span class="has-text-success" v-if="!taskCommentService.loading && saved === c.id">
+								Saved!
+							</span>
+						</transition>
 					</div>
+					<editor
+						:has-preview="true"
+						:is-edit-enabled="canWrite"
+						:upload-callback="attachmentUpload"
+						:upload-enabled="true"
+						@change="() => {toggleEdit(c);editComment()}"
+						v-model="c.comment"
+						:has-edit-bottom="true"
+						:bottom-actions="actions[c.id]"
+					/>
 				</div>
 			</div>
-			<div class="media comment">
-				<figure class="media-left">
-					<img class="image is-avatar" :src="userAvatar" alt="" width="48" height="48"/>
+			<div class="media comment" v-if="canWrite">
+				<figure class="media-left is-hidden-mobile">
+					<img :src="userAvatar" alt="" class="image is-avatar" height="48" width="48"/>
 				</figure>
 				<div class="media-content">
 					<div class="form">
+						<transition name="fade">
+							<span class="is-inline-flex" v-if="taskCommentService.loading && creating">
+								<span class="loader is-inline-block mr-2"></span>
+								Creating comment...
+							</span>
+						</transition>
 						<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>
+							<editor
+								:class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
+								:has-preview="false"
+								:upload-callback="attachmentUpload"
+								:upload-enabled="true"
+								placeholder="Add your comment..."
+								v-if="editorActive"
+								v-model="newComment.comment"
+							/>
 						</div>
 						<div class="field">
-							<button class="button is-primary" :class="{'is-loading': taskCommentService.loading && !isCommentEdit}" @click="addComment()" :disabled="newComment.comment === ''">Comment</button>
+							<button :class="{'is-loading': taskCommentService.loading && !isCommentEdit}"
+									:disabled="newComment.comment === ''"
+									@click="addComment()" class="button is-primary">Comment
+							</button>
 						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="deleteComment()">
+			@close="showDeleteModal = false"
+			@submit="deleteComment()"
+			v-if="showDeleteModal">
 			<span slot="header">Delete this comment</span>
 			<p slot="text">Are you sure you want to delete this comment?
 				<br/>This <b>CANNOT BE UNDONE!</b></p>
@@ -65,118 +90,177 @@
 </template>
 
 <script>
-	import TaskCommentService from '../../../services/taskComment'
-	import TaskCommentModel from '../../../models/taskComment'
+import TaskCommentService from '../../../services/taskComment'
+import TaskCommentModel from '../../../models/taskComment'
+import attachmentUpload from '../mixins/attachmentUpload'
+import LoadingComponent from '../../misc/loading'
+import ErrorComponent from '../../misc/error'
 
-	export default {
-		name: 'comments',
-		props: {
-			taskId: {
-				type: Number,
-				required: true,
-			}
+export default {
+	name: 'comments',
+	components: {
+		editor: () => ({
+			component: import(/* webpackChunkName: "editor" */ '../../input/editor'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	mixins: [
+		attachmentUpload,
+	],
+	props: {
+		taskId: {
+			type: Number,
+			required: true,
 		},
-		data() {
-			return {
-				comments: [],
-
-				showDeleteModal: false,
-				commentToDelete: TaskCommentModel,
-
-				isCommentEdit: false,
-				commentEdit: TaskCommentModel,
-
-				taskCommentService: TaskCommentService,
-				newComment: TaskCommentModel,
-			}
+		canWrite: {
+			default: true,
 		},
-		created() {
-			this.taskCommentService = new TaskCommentService()
-			this.newComment = new TaskCommentModel({taskId: this.taskId})
-			this.commentEdit = new TaskCommentModel({taskId: this.taskId})
-			this.commentToDelete = new TaskCommentModel({taskId: this.taskId})
-			this.comments = []
-		},
-		mounted() {
+	},
+	data() {
+		return {
+			comments: [],
+
+			showDeleteModal: false,
+			commentToDelete: TaskCommentModel,
+
+			isCommentEdit: false,
+			commentEdit: TaskCommentModel,
+
+			taskCommentService: TaskCommentService,
+			newComment: TaskCommentModel,
+			editorActive: true,
+			actions: {},
+
+			saved: null,
+			saving: null,
+			creating: false,
+		}
+	},
+	created() {
+		this.taskCommentService = new TaskCommentService()
+		this.newComment = new TaskCommentModel({taskId: this.taskId})
+		this.commentEdit = new TaskCommentModel({taskId: this.taskId})
+		this.commentToDelete = new TaskCommentModel({taskId: this.taskId})
+		this.comments = []
+	},
+	mounted() {
+		this.loadComments()
+	},
+	watch: {
+		taskId() {
 			this.loadComments()
 		},
-		watch: {
-			taskId() {
-				this.loadComments()
+		canWrite() {
+			this.makeActions()
+		},
+	},
+	computed: {
+		userAvatar() {
+			return this.$store.state.auth.info.getAvatarUrl(48)
+		},
+	},
+	methods: {
+		loadComments() {
+			this.taskCommentService.getAll({taskId: this.taskId})
+				.then(r => {
+					this.$set(this, 'comments', r)
+					this.makeActions()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		addComment() {
+			if (this.newComment.comment === '') {
+				return
 			}
+
+			// This makes the editor trigger its mounted function again which makes it forget every input
+			// it currently has in its textarea. This is a counter-hack to a hack inside of vue-easymde
+			// which made it impossible to detect change from the outside. Therefore the component would
+			// not update if new content from the outside was made available.
+			// See https://github.com/NikulinIlya/vue-easymde/issues/3
+			this.editorActive = false
+			this.$nextTick(() => this.editorActive = true)
+			this.creating = true
+
+			this.taskCommentService.create(this.newComment)
+				.then(r => {
+					this.comments.push(r)
+					this.newComment.comment = ''
+					this.success({message: 'The comment was added successfully.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.creating = false
+				})
 		},
-		computed: {
-			userAvatar() {
-				return this.$store.state.auth.info.getAvatarUrl(48)
-			},
+		toggleEdit(comment) {
+			this.isCommentEdit = !this.isCommentEdit
+			this.commentEdit = comment
 		},
-		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.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)
-							}
+		toggleDelete(commentId) {
+			this.showDeleteModal = !this.showDeleteModal
+			this.commentToDelete.id = commentId
+		},
+		editComment() {
+			if (this.commentEdit.comment === '') {
+				return
+			}
+
+			this.saving = this.commentEdit.id
+
+			this.commentEdit.taskId = this.taskId
+			this.taskCommentService.update(this.commentEdit)
+				.then(r => {
+					for (const c in this.comments) {
+						if (this.comments[c].id === this.commentEdit.id) {
+							this.$set(this.comments, c, r)
 						}
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.isCommentEdit = false
-					})
-			},
-			deleteComment() {
-				this.taskCommentService.delete(this.commentToDelete)
-					.then(() => {
-						for (const a in this.comments) {
-							if (this.comments[a].id === this.commentToDelete.id) {
-								this.comments.splice(a, 1)
-							}
-						}
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.showDeleteModal = false
-					})
-			},
+					}
+					this.saved = this.commentEdit.id
+					setTimeout(() => {
+						this.saved = null
+					}, 2000)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.isCommentEdit = false
+					this.saving = null
+				})
 		},
-	}
+		deleteComment() {
+			this.taskCommentService.delete(this.commentToDelete)
+				.then(() => {
+					for (const a in this.comments) {
+						if (this.comments[a].id === this.commentToDelete.id) {
+							this.comments.splice(a, 1)
+						}
+					}
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.showDeleteModal = false
+				})
+		},
+		makeActions() {
+			if (this.canWrite) {
+				this.comments.forEach(c => {
+					this.$set(this.actions, c.id, [{
+						action: () => this.toggleDelete(c.id),
+						title: 'Remove',
+					}])
+				})
+			}
+		}
+	},
+}
 </script>

src/components/tasks/partials/date-table-cell.vue

@@ -5,13 +5,13 @@
 </template>
 
 <script>
-	export default {
-		name: 'date-table-cell',
-		props: {
-			date: {
-				type: Date,
-				default: 0,
-			}
+export default {
+	name: 'date-table-cell',
+	props: {
+		date: {
+			type: Date,
+			default: 0,
 		},
-	}
+	},
+}
 </script>

src/components/tasks/partials/defer-task.vue

@@ -0,0 +1,112 @@
+<template>
+	<div :class="{'is-loading': taskService.loading}" class="defer-task loading-container">
+		<label class="label">Defer due date</label>
+		<div class="defer-days">
+			<button @click="() => deferDays(1)" class="button is-outlined is-primary has-no-shadow">1 day</button>
+			<button @click="() => deferDays(3)" class="button is-outlined is-primary has-no-shadow">3 days</button>
+			<button @click="() => deferDays(7)" class="button is-outlined is-primary has-no-shadow">1 week</button>
+		</div>
+		<flat-pickr
+			:class="{ 'disabled': taskService.loading}"
+			:config="flatPickerConfig"
+			:disabled="taskService.loading"
+			class="input"
+			v-model="dueDate"
+		/>
+	</div>
+</template>
+
+<script>
+import TaskService from '../../../services/task'
+import flatPickr from 'vue-flatpickr-component'
+
+export default {
+	name: 'defer-task',
+	data() {
+		return {
+			taskService: TaskService,
+			task: null,
+			// We're saving the due date seperately to prevent null errors in very short periods where the task is null.
+			dueDate: null,
+			lastValue: null,
+			changeInterval: null,
+
+			flatPickerConfig: {
+				altFormat: 'j M Y H:i',
+				altInput: true,
+				dateFormat: 'Y-m-d H:i',
+				enableTime: true,
+				time_24hr: true,
+				inline: true,
+			},
+		}
+	},
+	components: {
+		flatPickr,
+	},
+	props: {
+		value: {
+			required: true,
+		},
+	},
+	created() {
+		this.taskService = new TaskService()
+	},
+	mounted() {
+		this.task = this.value
+		this.dueDate = this.task.dueDate
+		this.lastValue = this.dueDate
+
+		// Because we don't really have other ways of handling change since if we let flatpickr
+		// change events trigger updates, it would trigger a flatpickr change event which would trigger
+		// an update which would trigger a change event and so on...
+		// This is either a bug in flatpickr or in the vue component of it.
+		// To work around that, we're only updating if something changed and check each second and when closing the popup.
+		if (this.changeInterval) {
+			clearInterval(this.changeInterval)
+		}
+
+		this.changeInterval = setInterval(this.updateDueDate, 1000)
+	},
+	beforeDestroy() {
+		if (this.changeInterval) {
+			clearInterval(this.changeInterval)
+		}
+		this.updateDueDate()
+	},
+	watch: {
+		value(newVal) {
+			this.task = newVal
+			this.dueDate = this.task.dueDate
+			this.lastValue = this.dueDate
+		},
+	},
+	methods: {
+		deferDays(days) {
+			this.dueDate = new Date(this.dueDate)
+			this.dueDate = this.dueDate.setDate(this.dueDate.getDate() + days)
+			this.updateDueDate()
+		},
+		updateDueDate() {
+			if (!this.dueDate) {
+				return
+			}
+
+			if (+new Date(this.dueDate) === +this.lastValue) {
+				return
+			}
+
+			this.task.dueDate = new Date(this.dueDate)
+			this.taskService.update(this.task)
+				.then(r => {
+					this.lastValue = r.dueDate
+					this.task = r
+					this.$emit('input', r)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+	},
+}
+</script>

src/components/tasks/partials/description.vue

@@ -0,0 +1,97 @@
+<template>
+	<div>
+		<h3>
+			<span class="icon is-grey">
+				<icon icon="align-left"/>
+			</span>
+			Description
+			<transition name="fade">
+				<span class="is-small is-inline-flex" v-if="loading && saving">
+					<span class="loader is-inline-block mr-2"></span>
+					Saving...
+				</span>
+				<span class="is-small has-text-success" v-if="!loading && saved">
+					<icon icon="check"/>
+					Saved!
+				</span>
+			</transition>
+		</h3>
+		<editor
+			:is-edit-enabled="canWrite"
+			:upload-callback="attachmentUpload"
+			:upload-enabled="true"
+			@change="save"
+			placeholder="Click here to enter a description..."
+			v-model="task.description"/>
+	</div>
+</template>
+
+<script>
+import LoadingComponent from '@/components/misc/loading'
+import ErrorComponent from '@/components/misc/error'
+
+import {LOADING} from '@/store/mutation-types'
+import {mapState} from 'vuex'
+
+export default {
+	name: 'description',
+	components: {
+		editor: () => ({
+			component: import(/* webpackChunkName: "editor" */ '@/components/input/editor'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	data() {
+		return {
+			task: {description: ''},
+			saved: false,
+			saving: false, // Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.
+		}
+	},
+	computed: mapState({
+		loading: LOADING,
+	}),
+	props: {
+		value: {
+			required: true,
+		},
+		attachmentUpload: {
+			required: true,
+		},
+		canWrite: {
+			required: true,
+		},
+	},
+	watch: {
+		value(newVal) {
+			this.task = newVal
+		},
+	},
+	mounted() {
+		this.task = this.value
+	},
+	methods: {
+		save() {
+			this.saving = true
+
+			this.$store.dispatch('tasks/update', this.task)
+				.then(() => {
+					this.$emit('input', this.task)
+					this.saved = true
+					setTimeout(() => {
+						this.saved = false
+					}, 2000)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.saving = false
+				})
+		}
+	},
+}
+</script>
+

src/components/tasks/partials/editAssignees.vue

@@ -1,127 +1,143 @@
 <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"
-		>
+		:clear-on-select="true"
+		:close-on-select="false"
+		:disabled="disabled"
+		:hide-selected="true"
+		:internal-search="true"
+		:loading="listUserService.loading"
+		:multiple="true"
+		:options="foundUsers"
+		:options-limit="300"
+		:searchable="true"
+		:showNoOptions="false"
+		@search-change="findUser"
+		@select="addAssignee"
+		label="username"
+		placeholder="Type to assign a user..."
+		select-label="Assign this user"
+		track-by="id"
+		v-model="assignees"
+	>
 		<template slot="tag" slot-scope="{ option }">
-			<user :user="option" :show-username="false" :avatar-size="30"/>
-			<a @click="removeAssignee(option)" class="remove-assignee">
+			<user :avatar-size="30" :show-username="false" :user="option"/>
+			<a @click="removeAssignee(option)" class="remove-assignee" v-if="!disabled">
 				<icon icon="times"/>
 			</a>
 		</template>
 		<template slot="clear" slot-scope="props">
-			<div class="multiselect__clear" v-if="newAssignee !== null && newAssignee.id !== 0"
-				@mousedown.prevent.stop="clearAllFoundUsers(props.search)"></div>
+			<div
+				@mousedown.prevent.stop="clearAllFoundUsers(props.search)"
+				class="multiselect__clear"
+				v-if="newAssignee !== null && newAssignee.id !== 0"></div>
 		</template>
 		<span slot="noResult">No user found. Consider changing the search query.</span>
 	</multiselect>
 </template>
 
 <script>
-	import {differenceWith} from 'lodash'
-	import multiselect from 'vue-multiselect'
+import differenceWith from 'lodash/differenceWith'
 
-	import UserModel from '../../../models/user'
-	import ListUserService from '../../../services/listUsers'
-	import TaskAssigneeService from '../../../services/taskAssignee'
-	import User from '../../misc/user'
+import UserModel from '../../../models/user'
+import ListUserService from '../../../services/listUsers'
+import TaskAssigneeService from '../../../services/taskAssignee'
+import User from '../../misc/user'
+import LoadingComponent from '../../misc/loading'
+import ErrorComponent from '../../misc/error'
 
-	export default {
-		name: 'editAssignees',
-		components: {
-			User,
-			multiselect,
+export default {
+	name: 'editAssignees',
+	components: {
+		User,
+		multiselect: () => ({
+			component: import(/* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	props: {
+		taskId: {
+			type: Number,
+			required: true,
 		},
-		props: {
-			taskId: {
-				type: Number,
-				required: true,
-			},
-			listId: {
-				type: Number,
-				required: true,
-			},
-			initialAssignees: {
-				type: Array,
-				default: () => [],
-			}
+		listId: {
+			type: Number,
+			required: true,
 		},
-		data() {
-			return {
-				newAssignee: UserModel,
-				listUserService: ListUserService,
-				foundUsers: [],
-				assignees: [],
-				taskAssigneeService: TaskAssigneeService,
-			}
+		disabled: {
+			default: false,
 		},
-		created() {
-			this.assignees = this.initialAssignees
-			this.listUserService = new ListUserService()
-			this.newAssignee = new UserModel()
-			this.taskAssigneeService = new TaskAssigneeService()
+		value: {
+			type: Array,
 		},
-		watch: {
-			initialAssignees(newVal) {
-				this.assignees = newVal
-			}
+	},
+	data() {
+		return {
+			newAssignee: UserModel,
+			listUserService: ListUserService,
+			foundUsers: [],
+			assignees: [],
+			taskAssigneeService: TaskAssigneeService,
+		}
+	},
+	created() {
+		this.assignees = this.value
+		this.listUserService = new ListUserService()
+		this.newAssignee = new UserModel()
+		this.taskAssigneeService = new TaskAssigneeService()
+	},
+	watch: {
+		value(newVal) {
+			this.assignees = newVal
 		},
-		methods: {
-			addAssignee(user) {
-				this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			removeAssignee(user) {
-				this.$store.dispatch('tasks/removeAssignee', {user: user, taskId: this.taskId})
-					.then(() => {
-						// Remove the assignee from the list
-						for (const a in this.assignees) {
-							if (this.assignees[a].id === user.id) {
-								this.assignees.splice(a, 1)
-							}
+	},
+	methods: {
+		addAssignee(user) {
+			this.$store.dispatch('tasks/addAssignee', {user: user, taskId: this.taskId})
+				.then(() => {
+					this.$emit('input', this.assignees)
+					this.success({message: 'The user has been assigned successfully.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		removeAssignee(user) {
+			this.$store.dispatch('tasks/removeAssignee', {user: user, taskId: this.taskId})
+				.then(() => {
+					// Remove the assignee from the list
+					for (const a in this.assignees) {
+						if (this.assignees[a].id === user.id) {
+							this.assignees.splice(a, 1)
 						}
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			findUser(query) {
-				if (query === '') {
-					this.clearAllFoundUsers()
-					return
-				}
-
-				this.listUserService.getAll({listId: this.listId}, {s: query})
-					.then(response => {
-						// Filter the results to not include users who are already assigned
-						this.$set(this, 'foundUsers', differenceWith(response, this.assignees, (first, second) => {
-							return first.id === second.id
-						}))
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			clearAllFoundUsers() {
-				this.$set(this, 'foundUsers', [])
-			},
+					}
+					this.success({message: 'The user has been unassinged successfully.'}, 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>

src/components/tasks/partials/editLabels.vue

@@ -1,149 +1,169 @@
 <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"
+		:clear-on-select="true"
+		:close-on-select="false"
+		:disabled="disabled"
+		:hide-selected="true"
+		:internal-search="true"
+		:loading="labelService.loading || labelTaskService.loading"
+		:multiple="true"
+		:options="foundLabels"
+		:options-limit="300"
+		:searchable="true"
+		:showNoOptions="false"
+		:taggable="true"
+		@search-change="findLabel"
+		@select="label => addLabel(label)"
+		@tag="createAndAddLabel"
+		label="title"
+		placeholder="Type to add a new label..."
+		tag-placeholder="Add this as new label"
+		track-by="id"
+		v-model="labels"
 	>
-		<template slot="tag" slot-scope="{ option }">
-						<span class="tag"
-							:style="{'background': option.hexColor, 'color': option.textColor}">
-							<span>{{ option.title }}</span>
-							<a class="delete is-small" @click="removeLabel(option)"></a>
-						</span>
+		<template
+			slot="tag"
+			slot-scope="{ option }">
+			<span
+				:style="{'background': option.hexColor, 'color': option.textColor}"
+				class="tag">
+				<span>{{ option.title }}</span>
+				<a @click="removeLabel(option)" class="delete is-small"></a>
+			</span>
 		</template>
 		<template slot="clear" slot-scope="props">
-			<div class="multiselect__clear" v-if="labels.length"
-				@mousedown.prevent.stop="clearAllLabels(props.search)"></div>
+			<div
+				@mousedown.prevent.stop="clearAllLabels(props.search)"
+				class="multiselect__clear"
+				v-if="labels.length"></div>
 		</template>
 	</multiselect>
 </template>
 
 <script>
-	import { differenceWith } from 'lodash'
-	import multiselect from 'vue-multiselect'
+import differenceWith from 'lodash/differenceWith'
 
-	import LabelService from '../../../services/label'
-	import LabelModel from '../../../models/label'
-	import LabelTaskService from '../../../services/labelTask'
+import LabelService from '../../../services/label'
+import LabelModel from '../../../models/label'
+import LabelTaskService from '../../../services/labelTask'
+import LoadingComponent from '../../misc/loading'
+import ErrorComponent from '../../misc/error'
 
-	export default {
-		name: 'edit-labels',
-		props: {
-			value: {
-				default: () => [],
-				type: Array,
-			},
-			taskId: {
-				type: Number,
-				required: true,
-			},
+export default {
+	name: 'edit-labels',
+	props: {
+		value: {
+			default: () => [],
+			type: Array,
 		},
-		data() {
-			return {
-				labelService: LabelService,
-				labelTaskService: LabelTaskService,
-				foundLabels: [],
-				labelTimeout: null,
-				labels: [],
-				searchQuery: '',
+		taskId: {
+			type: Number,
+			required: true,
+		},
+		disabled: {
+			default: false,
+		},
+	},
+	data() {
+		return {
+			labelService: LabelService,
+			labelTaskService: LabelTaskService,
+			foundLabels: [],
+			labelTimeout: null,
+			labels: [],
+			searchQuery: '',
+		}
+	},
+	components: {
+		multiselect: () => ({
+			component: import(/* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	watch: {
+		value(newLabels) {
+			this.labels = newLabels
+		},
+	},
+	created() {
+		this.labelService = new LabelService()
+		this.labelTaskService = new LabelTaskService()
+		this.labels = this.value
+	},
+	methods: {
+		findLabel(query) {
+			this.searchQuery = query
+			if (query === '') {
+				this.clearAllLabels()
+				return
 			}
-		},
-		components: {
-			multiselect,
-		},
-		watch: {
-			value(newLabels) {
-				this.labels = newLabels
+
+			if (this.labelTimeout !== null) {
+				clearTimeout(this.labelTimeout)
 			}
-		},
-		created() {
-			this.labelService = new LabelService()
-			this.labelTaskService = new LabelTaskService()
-			this.labels = this.value
-		},
-		methods: {
-			findLabel(query) {
-				this.searchQuery = query
-				if (query === '') {
-					this.clearAllLabels()
-					return
-				}
 
-				if (this.labelTimeout !== null) {
-					clearTimeout(this.labelTimeout)
-				}
-
-				// Delay the search 300ms to not send a request on every keystroke
-				this.labelTimeout = setTimeout(() => {
-					this.labelService.getAll({}, {s: query})
-						.then(response => {
-							this.$set(this, 'foundLabels', differenceWith(response, this.labels, (first, second) => {
-								return first.id === second.id
-							}))
-							this.labelTimeout = null
-						})
-						.catch(e => {
-							this.error(e, this)
-						})
-				}, 300)
-			},
-			clearAllLabels() {
-				this.$set(this, 'foundLabels', [])
-			},
-			addLabel(label) {
-				this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
-					.then(() => {
-						this.$emit('input', this.labels)
+			// Delay the search 300ms to not send a request on every keystroke
+			this.labelTimeout = setTimeout(() => {
+				this.labelService.getAll({}, {s: query})
+					.then(response => {
+						this.$set(this, 'foundLabels', differenceWith(response, this.labels, (first, second) => {
+							return first.id === second.id
+						}))
+						this.labelTimeout = null
 					})
 					.catch(e => {
 						this.error(e, this)
 					})
-			},
-			removeLabel(label) {
-				this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
-					.then(() => {
-						// Remove the label from the list
-						for (const l in this.labels) {
-							if (this.labels[l].id === label.id) {
-								this.labels.splice(l, 1)
-							}
+			}, 300)
+		},
+		clearAllLabels() {
+			this.$set(this, 'foundLabels', [])
+		},
+		addLabel(label, showNotification = true) {
+			this.$store.dispatch('tasks/addLabel', {label: label, taskId: this.taskId})
+				.then(() => {
+					this.$emit('input', this.labels)
+					if (showNotification) {
+						this.success({message: 'The label has been added successfully.'}, this)
+					}
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		removeLabel(label) {
+			this.$store.dispatch('tasks/removeLabel', {label: label, taskId: this.taskId})
+				.then(() => {
+					// Remove the label from the list
+					for (const l in this.labels) {
+						if (this.labels[l].id === label.id) {
+							this.labels.splice(l, 1)
 						}
-						this.$emit('input', this.labels)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			createAndAddLabel(title) {
-				let newLabel = new LabelModel({title: title})
-				this.labelService.create(newLabel)
-					.then(r => {
-						this.addLabel(r)
-						this.labels.push(r)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-
+					}
+					this.$emit('input', this.labels)
+					this.success({message: 'The label has been removed successfully.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		createAndAddLabel(title) {
+			let newLabel = new LabelModel({title: title})
+			this.labelService.create(newLabel)
+				.then(r => {
+					this.addLabel(r, false)
+					this.labels.push(r)
+					this.success({message: 'The label has been created successfully.'}, this)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+
+	},
+}
 </script>
 
 <style scoped>

src/components/tasks/partials/heading.vue

@@ -0,0 +1,106 @@
+<template>
+	<div class="heading">
+		<h1 class="title task-id" v-if="task.identifier === ''">
+			#{{ task.index }}
+		</h1>
+		<h1 class="title task-id" v-else>
+			{{ task.identifier }}
+		</h1>
+		<div class="is-done" v-if="task.done">Done</div>
+		<h1
+			class="title input"
+			:class="{'disabled': !canWrite}"
+			@focusout="save()"
+			@keyup.ctrl.enter="save()"
+			:contenteditable="canWrite ? 'true' : 'false'"
+			ref="taskTitle">
+			{{ task.title }}
+		</h1>
+		<transition name="fade">
+			<span class="is-inline-flex is-align-items-center" v-if="loading && saving">
+				<span class="loader is-inline-block mr-2"></span>
+				Saving...
+			</span>
+			<span class="has-text-success is-inline-flex is-align-content-center" v-if="!loading && saved">
+				<icon icon="check" class="mr-2"/>
+				Saved!
+			</span>
+		</transition>
+	</div>
+</template>
+
+<script>
+import {LOADING} from '@/store/mutation-types'
+import {mapState} from 'vuex'
+
+export default {
+	name: 'heading',
+	data() {
+		return {
+			task: {title: '', identifier: '', index:''},
+			taskTitle: '',
+			saved: false,
+			saving: false, // Since loading is global state, this variable ensures we're only showing the saving icon when saving the description.
+		}
+	},
+	computed: mapState({
+		loading: LOADING,
+	}),
+	props: {
+		value: {
+			required: true,
+		},
+		canWrite: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	watch: {
+		value(newVal) {
+			this.task = newVal
+			this.taskTitle = this.task.title
+		},
+	},
+	mounted() {
+		this.task = this.value
+		this.taskTitle = this.task.title
+	},
+	methods: {
+		save() {
+			this.$refs.taskTitle.spellcheck = false
+
+			// Pull the task title from the contenteditable
+			let taskTitle = this.$refs.taskTitle.textContent
+			this.task.title = taskTitle
+
+			// We only want to save if the title was actually change.
+			// Because the contenteditable does not have a change event,
+			// we're building it ourselves and only calling saveTask()
+			// if the task title changed.
+			if (this.task.title !== this.taskTitle) {
+				this.saveTask()
+				this.taskTitle = taskTitle
+			}
+		},
+		saveTask() {
+			this.saving = true
+
+			this.$store.dispatch('tasks/update', this.task)
+				.then(() => {
+					this.$emit('input', this.task)
+					this.saved = true
+					setTimeout(() => {
+						this.saved = false
+					}, 2000)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.saving = false
+				})
+		}
+	},
+}
+</script>
+

src/components/tasks/partials/labels.vue

@@ -1,24 +1,28 @@
 <template>
 	<div class="label-wrapper">
-		<span class="tag" v-for="label in labels" :style="{'background': label.hexColor, 'color': label.textColor}" :key="label.id">
+		<span
+			:key="label.id"
+			:style="{'background': label.hexColor, 'color': label.textColor}"
+			class="tag"
+			v-for="label in labels">
 			<span>{{ label.title }}</span>
 		</span>
 	</div>
 </template>
 
 <script>
-	export default {
-		name: 'labels',
-		props: {
-			labels: {
-				required: true,
-			}
-		}
-	}
+export default {
+	name: 'labels',
+	props: {
+		labels: {
+			required: true,
+		},
+	},
+}
 </script>
 
 <style scoped>
-	.label-wrapper {
-		display: inline;
-	}
+.label-wrapper {
+	display: inline;
+}
 </style>

src/components/tasks/partials/listSearch.vue

@@ -1,22 +1,25 @@
 <template>
 	<multiselect
-			v-model="list"
-			:options="foundLists"
-			:multiple="false"
-			:searchable="true"
-			:loading="listSerivce.loading"
-			:internal-search="true"
-			@search-change="findLists"
-			@select="select"
-			placeholder="Type to search for a list..."
-			label="title"
-			track-by="id"
-			:showNoOptions="false"
-			class="control is-expanded"
-			v-focus
+		:internal-search="true"
+		:loading="listSerivce.loading"
+		:multiple="false"
+		:options="foundLists"
+		:searchable="true"
+		:showNoOptions="false"
+		@search-change="findLists"
+		@select="select"
+		class="control is-expanded"
+		label="title"
+		placeholder="Type to search for a list..."
+		track-by="id"
+		v-focus
+		v-model="list"
 	>
 		<template slot="clear" slot-scope="props">
-			<div class="multiselect__clear" v-if="list !== null && list.id !== 0" @mousedown.prevent.stop="clearAll(props.search)"></div>
+			<div
+				@mousedown.prevent.stop="clearAll(props.search)"
+				class="multiselect__clear"
+				v-if="list !== null && list.id !== 0"></div>
 		</template>
 		<template slot="option" slot-scope="props">
 			<span class="list-namespace-title">{{ namespace(props.option.namespaceId) }} ></span>
@@ -27,54 +30,60 @@
 </template>
 
 <script>
-	import ListService from '../../../services/list'
-	import ListModel from '../../../models/list'
-	import multiselect from 'vue-multiselect'
+import ListService from '../../../services/list'
+import ListModel from '../../../models/list'
+import LoadingComponent from '../../misc/loading'
+import ErrorComponent from '../../misc/error'
 
-	export default {
-		name: 'listSearch',
-		data() {
-			return {
-				listSerivce: ListService,
-				list: ListModel,
-				foundLists: [],
+export default {
+	name: 'listSearch',
+	data() {
+		return {
+			listSerivce: ListService,
+			list: ListModel,
+			foundLists: [],
+		}
+	},
+	components: {
+		multiselect: () => ({
+			component: import(/* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	beforeMount() {
+		this.listSerivce = new ListService()
+		this.list = new ListModel()
+	},
+	methods: {
+		findLists(query) {
+			if (query === '') {
+				this.clearAll()
+				return
 			}
-		},
-		components: {
-			multiselect,
-		},
-		beforeMount() {
-			this.listSerivce = new ListService()
-			this.list = new ListModel()
-		},
-		methods: {
-			findLists(query) {
-				if (query === '') {
-					this.clearAll()
-					return
-				}
 
-				this.listSerivce.getAll({}, {s: query})
-					.then(response => {
-						this.$set(this, 'foundLists', response)
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			clearAll() {
-				this.$set(this, 'foundLists', [])
-			},
-			select(list) {
-				this.$emit('selected', list)
-			},
-			namespace(namespaceId) {
-				const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId)
-				if (namespace !== null) {
-					return namespace.title
-				}
-				return 'Shared Lists'
-			},
+			this.listSerivce.getAll({}, {s: query})
+				.then(response => {
+					this.$set(this, 'foundLists', response)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-	}
+		clearAll() {
+			this.$set(this, 'foundLists', [])
+		},
+		select(list) {
+			this.$emit('selected', list)
+		},
+		namespace(namespaceId) {
+			const namespace = this.$store.getters['namespaces/getNamespaceById'](namespaceId)
+			if (namespace !== null) {
+				return namespace.title
+			}
+			return 'Shared Lists'
+		},
+	},
+}
 </script>

src/components/tasks/partials/percentDoneSelect.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="select">
-		<select v-model.number="percentDone" @change="updateData">
+		<select :disabled="disabled" @change="updateData" v-model.number="percentDone">
 			<option value="0">0%</option>
 			<option value="0.1">10%</option>
 			<option value="0.2">20%</option>
@@ -17,33 +17,36 @@
 </template>
 
 <script>
-	export default {
-		name: 'percentDoneSelect',
-		data() {
-			return {
-				percentDone: 0,
-			}
+export default {
+	name: 'percentDoneSelect',
+	data() {
+		return {
+			percentDone: 0,
+		}
+	},
+	props: {
+		value: {
+			default: 0,
+			type: Number,
 		},
-		props: {
-			value: {
-				default: 0,
-				type: Number,
-			}
+		disabled: {
+			default: false,
 		},
-		watch: {
-			// Set the priority to the :value every time it changes from the outside
-			value(newVal) {
-				this.percentDone = newVal
-			},
+	},
+	watch: {
+		// Set the priority to the :value every time it changes from the outside
+		value(newVal) {
+			this.percentDone = newVal
 		},
-		mounted() {
-			this.percentDone = this.value
+	},
+	mounted() {
+		this.percentDone = this.value
+	},
+	methods: {
+		updateData() {
+			this.$emit('input', this.percentDone)
+			this.$emit('change')
 		},
-		methods: {
-			updateData() {
-				this.$emit('input', this.percentDone)
-				this.$emit('change')
-			}
-		},
-	}
+	},
+}
 </script>

src/components/tasks/partials/priorityLabel.vue

@@ -1,5 +1,7 @@
 <template>
-	<span v-if="showAll || priority >= priorities.HIGH" :class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}">
+	<span
+		:class="{'not-so-high': priority === priorities.HIGH, 'high-priority': priority >= priorities.HIGH}"
+		v-if="showAll || priority >= priorities.HIGH">
 		<span class="icon" v-if="priority >= priorities.HIGH">
 			<icon icon="exclamation"/>
 		</span>
@@ -16,43 +18,43 @@
 </template>
 
 <script>
-	import priorites from '../../../models/priorities'
+import priorites from '../../../models/priorities'
 
-	export default {
-		name: 'priorityLabel',
-		data() {
-			return {
-				priorities: priorites,
-			}
-		},
-		props: {
-			priority: {
-				default: 0,
-				type: Number,
-			},
-			showAll: {
-				type: Boolean,
-				default: false,
-			},
+export default {
+	name: 'priorityLabel',
+	data() {
+		return {
+			priorities: priorites,
 		}
-	}
+	},
+	props: {
+		priority: {
+			default: 0,
+			type: Number,
+		},
+		showAll: {
+			type: Boolean,
+			default: false,
+		},
+	},
+}
 </script>
 
 <style lang="scss">
-	@import '../../../styles/theme/variables';
+@import '../../../styles/theme/variables';
 
-	span.high-priority{
-		color: $red;
-		width: auto !important; // To override the width set in tasks
+span.high-priority {
+	color: $red;
+	width: auto !important; // To override the width set in tasks
 
-		.icon {
-			vertical-align: middle;
-			width: auto !important;
-			padding: 0 .5em;
-		}
-
-		&.not-so-high {
-			color: $orange;
-		}
+	.icon {
+		vertical-align: middle;
+		width: auto !important;
+		padding: 0 .5em;
 	}
+
+	&.not-so-high {
+		color: $orange;
+	}
+}
 </style>

src/components/tasks/partials/prioritySelect.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="select">
-		<select v-model="priority" @change="updateData">
+		<select :disabled="disabled" @change="updateData" v-model="priority">
 			<option :value="priorities.UNSET">Unset</option>
 			<option :value="priorities.LOW">Low</option>
 			<option :value="priorities.MEDIUM">Medium</option>
@@ -12,36 +12,39 @@
 </template>
 
 <script>
-	import priorites from '../../../models/priorities'
+import priorites from '../../../models/priorities'
 
-	export default {
-		name: 'prioritySelect',
-		data() {
-			return {
-				priorities: priorites,
-				priority: 0,
-			}
+export default {
+	name: 'prioritySelect',
+	data() {
+		return {
+			priorities: priorites,
+			priority: 0,
+		}
+	},
+	props: {
+		value: {
+			default: 0,
+			type: Number,
 		},
-		props: {
-			value: {
-				default: 0,
-				type: Number,
-			}
+		disabled: {
+			default: false,
 		},
-		watch: {
-			// Set the priority to the :value every time it changes from the outside
-			value(newVal) {
-				this.priority = newVal
-			},
+	},
+	watch: {
+		// Set the priority to the :value every time it changes from the outside
+		value(newVal) {
+			this.priority = newVal
 		},
-		mounted() {
-			this.priority = this.value
+	},
+	mounted() {
+		this.priority = this.value
+	},
+	methods: {
+		updateData() {
+			this.$emit('input', this.priority)
+			this.$emit('change')
 		},
-		methods: {
-			updateData() {
-				this.$emit('input', this.priority)
-				this.$emit('change')
-			}
-		},
-	}
+	},
+}
 </script>

src/components/tasks/partials/relatedTasks.vue

@@ -1,79 +1,98 @@
 <template>
 	<div class="task-relations">
-		<label class="label">New Task Relation</label>
-		<div class="field">
-			<multiselect
-					v-model="newTaskRelationTask"
-					:options="foundTasks"
-					:multiple="false"
-					:searchable="true"
-					:loading="taskService.loading"
+		<template v-if="editEnabled">
+			<label class="label">
+				New Task Relation
+				<transition name="fade">
+					<span class="is-inline-flex" v-if="taskRelationService.loading">
+						<span class="loader is-inline-block mr-2"></span>
+						Saving...
+					</span>
+					<span class="has-text-success" v-if="!taskRelationService.loading && saved">
+						Saved!
+					</span>
+				</transition>
+			</label>
+			<div class="field">
+				<multiselect
 					:internal-search="true"
-					@search-change="findTasks"
-					placeholder="Type search for a new task to add as related..."
-					label="title"
-					track-by="id"
-					:taggable="true"
+					:loading="taskService.loading"
+					:multiple="false"
+					:options="foundTasks"
+					:searchable="true"
 					:showNoOptions="false"
+					:taggable="true"
+					@search-change="findTasks"
 					@tag="createAndRelateTask"
+					label="title"
+					placeholder="Type search for a new task to add as related..."
 					tag-placeholder="Add this as new related task"
-			>
-				<template slot="clear" slot-scope="props">
-					<div
+					track-by="id"
+					v-model="newTaskRelationTask"
+				>
+					<template slot="clear" slot-scope="props">
+						<div
+							@mousedown.prevent.stop="clearAllFoundTasks(props.search)"
 							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="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>
+							v-if="newTaskRelationTask !== null && newTaskRelationTask.id !== 0"></div>
+					</template>
+					<span slot="noResult">No task found. Consider changing the search query.</span>
+				</multiselect>
+			</div>
+			<div class="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 :key="rk" :value="rk" v-for="(label, rk) in relationKinds">
+								{{ label[0] }}
+							</option>
+						</select>
+					</div>
+				</div>
+				<div class="control">
+					<a @click="addTaskRelation()" class="button is-primary">Add task Relation</a>
 				</div>
 			</div>
-			<div class="control">
-				<a class="button is-primary" @click="addTaskRelation()">Add task Relation</a>
-			</div>
-		</div>
+		</template>
 
-		<div class="related-tasks" v-for="(rts, kind ) in relatedTasks" :key="kind">
+		<div :key="kind" class="related-tasks" v-for="(rts, kind ) in relatedTasks">
 			<template v-if="rts.length > 0">
 				<span class="title">{{ relationKindTitle(kind, rts.length) }}</span>
 				<div class="tasks noborder">
-					<div class="task" v-for="t in rts" :key="t.id">
+					<div :key="t.id" class="task" v-for="t in rts">
 						<router-link :to="{ name: $route.name, params: { id: t.id } }">
-							<span class="tasktext" :class="{ 'done': t.done}">
-								<span v-if="t.listId !== listId" class="different-list" v-tooltip="'This task belongs to a different list.'">
-									{{ $store.getters['lists/getListById'](t.listId) === null ? '' : $store.getters['lists/getListById'](t.listId).title }} >
+							<span :class="{ 'done': t.done}" class="tasktext">
+								<span
+									class="different-list"
+									v-if="t.listId !== listId"
+									v-tooltip="'This task belongs to a different list.'">
+									{{
+										$store.getters['lists/getListById'](t.listId) === null ? '' : $store.getters['lists/getListById'](t.listId).title
+									}} >
 								</span>
-								{{t.title}}
+								{{ t.title }}
 							</span>
 						</router-link>
 						<a
-								class="remove"
-								@click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}">
+							@click="() => {showDeleteModal = true; relationToDelete = {relationKind: kind, otherTaskId: t.id}}"
+							class="remove"
+							v-if="editEnabled">
 							<icon icon="trash-alt"/>
 						</a>
 					</div>
 				</div>
 			</template>
 		</div>
-		<p v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0" class="none">
+		<p class="none" v-if="showNoRelationsNotice && Object.keys(relatedTasks).length === 0">
 			No task relations yet.
 		</p>
 
 		<!-- Delete modal -->
 		<modal
-				v-if="showDeleteModal"
-				@close="showDeleteModal = false"
-				@submit="removeTaskRelation()">
+			@close="showDeleteModal = false"
+			@submit="removeTaskRelation()"
+			v-if="showDeleteModal">
 			<span slot="header">Delete Task Relation</span>
 			<p slot="text">Are you sure you want to delete this task relation?<br/>
 				<b>This CANNOT BE UNDONE!</b></p>
@@ -82,141 +101,158 @@
 </template>
 
 <script>
-	import TaskService from '../../../services/task'
-	import TaskModel from '../../../models/task'
-	import TaskRelationService from '../../../services/taskRelation'
-	import relationKinds from '../../../models/relationKinds'
-	import TaskRelationModel from '../../../models/taskRelation'
+import TaskService from '../../../services/task'
+import TaskModel from '../../../models/task'
+import TaskRelationService from '../../../services/taskRelation'
+import relationKinds from '../../../models/relationKinds'
+import TaskRelationModel from '../../../models/taskRelation'
 
-	import multiselect from 'vue-multiselect'
+import LoadingComponent from '../../misc/loading'
+import ErrorComponent from '../../misc/error'
 
-	export default {
-		name: 'relatedTasks',
-		data() {
-			return {
-				relatedTasks: {},
-				taskService: TaskService,
-				foundTasks: [],
-				relationKinds: relationKinds,
-				newTaskRelationTask: TaskModel,
-				newTaskRelationKind: 'related',
-				taskRelationService: TaskRelationService,
-				showDeleteModal: false,
-				relationToDelete: {},
+export default {
+	name: 'relatedTasks',
+	data() {
+		return {
+			relatedTasks: {},
+			taskService: TaskService,
+			foundTasks: [],
+			relationKinds: relationKinds,
+			newTaskRelationTask: TaskModel,
+			newTaskRelationKind: 'related',
+			taskRelationService: TaskRelationService,
+			showDeleteModal: false,
+			relationToDelete: {},
+			saved: false,
+		}
+	},
+	components: {
+		multiselect: () => ({
+			component: import(/* webpackChunkName: "multiselect" */ 'vue-multiselect'),
+			loading: LoadingComponent,
+			error: ErrorComponent,
+			timeout: 60000,
+		}),
+	},
+	props: {
+		taskId: {
+			type: Number,
+			required: true,
+		},
+		initialRelatedTasks: {
+			type: Object,
+			default: () => {
+			},
+		},
+		showNoRelationsNotice: {
+			type: Boolean,
+			default: false,
+		},
+		listId: {
+			type: Number,
+			default: 0,
+		},
+		editEnabled: {
+			default: true,
+		},
+	},
+	created() {
+		this.taskService = new TaskService()
+		this.taskRelationService = new TaskRelationService()
+		this.newTaskRelationTask = new TaskModel()
+	},
+	watch: {
+		initialRelatedTasks(newVal) {
+			this.relatedTasks = newVal
+		},
+	},
+	mounted() {
+		this.relatedTasks = this.initialRelatedTasks
+	},
+	methods: {
+		findTasks(query) {
+			if (query === '') {
+				this.clearAllFoundTasks()
+				return
 			}
-		},
-		components: {
-			multiselect,
-		},
-		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.taskService.getAll({}, {s: query})
+				.then(response => {
+					this.$set(this, 'foundTasks', response)
 				})
-				this.taskRelationService.create(rel)
-					.then(() => {
-						if (!this.relatedTasks[this.newTaskRelationKind]) {
-							this.$set(this.relatedTasks, this.newTaskRelationKind, [])
-						}
-						this.relatedTasks[this.newTaskRelationKind].push(this.newTaskRelationTask)
-						this.newTaskRelationKind = 'unset'
-						this.newTaskRelationTask = new TaskModel()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			removeTaskRelation() {
-				let rel = new TaskRelationModel({
-					relationKind: this.relationToDelete.relationKind,
-					taskId: this.taskId,
-					otherTaskId: this.relationToDelete.otherTaskId,
+				.catch(e => {
+					this.error(e, this)
 				})
-				this.taskRelationService.delete(rel)
-					.then(() => {
-						Object.keys(this.relatedTasks).forEach(relationKind => {
-							for (const t in this.relatedTasks[relationKind]) {
-								if (this.relatedTasks[relationKind][t].id === this.relationToDelete.otherTaskId && relationKind === this.relationToDelete.relationKind) {
-									this.relatedTasks[relationKind].splice(t, 1)
-								}
+		},
+		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.newTaskRelationTask = new TaskModel()
+					this.saved = true
+					setTimeout(() => {
+						this.saved = false
+					}, 2000)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		removeTaskRelation() {
+			let rel = new TaskRelationModel({
+				relationKind: this.relationToDelete.relationKind,
+				taskId: this.taskId,
+				otherTaskId: this.relationToDelete.otherTaskId,
+			})
+			this.taskRelationService.delete(rel)
+				.then(() => {
+					Object.keys(this.relatedTasks).forEach(relationKind => {
+						for (const t in this.relatedTasks[relationKind]) {
+							if (this.relatedTasks[relationKind][t].id === this.relationToDelete.otherTaskId && relationKind === this.relationToDelete.relationKind) {
+								this.relatedTasks[relationKind].splice(t, 1)
 							}
-						})
+						}
 					})
-					.catch(e => {
-						this.error(e, this)
-					})
-					.finally(() => {
-						this.showDeleteModal = false
-					})
-			},
-			createAndRelateTask(title) {
-				const newTask = new TaskModel({title: title, listId: this.listId})
-				this.taskService.create(newTask)
-					.then(r => {
-						this.newTaskRelationTask = r
-						this.addTaskRelation()
-					})
-					.catch(e => {
-						this.error(e, this)
-					})
-			},
-			relationKindTitle(kind, length) {
-				if (length > 1) {
-					return relationKinds[kind][1]
-				}
-				return relationKinds[kind][0]
-			}
+					this.saved = true
+					setTimeout(() => {
+						this.saved = false
+					}, 2000)
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+				.finally(() => {
+					this.showDeleteModal = false
+				})
 		},
-	}
+		createAndRelateTask(title) {
+			const newTask = new TaskModel({title: title, listId: this.listId})
+			this.taskService.create(newTask)
+				.then(r => {
+					this.newTaskRelationTask = r
+					this.addTaskRelation()
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
+		},
+		relationKindTitle(kind, length) {
+			if (length > 1) {
+				return relationKinds[kind][1]
+			}
+			return relationKinds[kind][0]
+		},
+	},
+}
 </script>

src/components/tasks/partials/reminders.vue

@@ -1,96 +1,105 @@
 <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)">
+		<div
+			v-for="(r, index) in reminders"
+			:key="index"
+			:class="{ 'overdue': r < new Date()}"
+			class="reminder-input"
+		>
+			<datepicker
+				v-model="reminders[index]"
+				:disabled="disabled"
+				@close-on-change="() => addReminderDate(index)"
+			/>
+			<a @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
 				<icon icon="times"></icon>
 			</a>
 		</div>
+		<div class="reminder-input" v-if="!disabled">
+			<datepicker
+				v-model="newReminder"
+				@close-on-change="() => addReminderDate()"
+				choose-date-label="Add a new reminder..."
+			/>
+		</div>
 	</div>
 </template>
 
 <script>
-	import flatPickr from 'vue-flatpickr-component'
-	import 'flatpickr/dist/flatpickr.css'
+import datepicker from '@/components/input/datepicker'
 
-	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])
+export default {
+	name: 'reminders',
+	data() {
+		return {
+			newReminder: null,
+			reminders: [],
+		}
+	},
+	props: {
+		value: {
+			default: () => [],
+			validator: prop => {
+				// This allows arrays of Dates and strings
+				if (!(prop instanceof Array)) {
+					return false
+				}
 
-				// Don't update if nothing changed
-				if (newDate === this.lastReminder) {
+				for (const e of prop) {
+					const isDate = e instanceof Date
+					const isString = typeof e === 'string'
+					if (!isDate && !isString) {
+						console.log('validation failed', e, e instanceof Date)
+						return false
+					}
+				}
+
+				return true
+			},
+		},
+		disabled: {
+			default: false,
+		},
+	},
+	components: {
+		datepicker,
+	},
+	mounted() {
+		this.reminders = this.value
+	},
+	watch: {
+		value(newVal) {
+			for (const i in newVal) {
+				if (typeof newVal[i] === 'string') {
+					newVal[i] = new Date(newVal[i])
+				}
+			}
+			this.reminders = newVal
+		},
+	},
+	methods: {
+		updateData() {
+			this.$emit('input', this.reminders)
+			this.$emit('change')
+		},
+		addReminderDate(index = null) {
+			// New Date
+			if (index === null) {
+				if (this.newReminder === null) {
 					return
 				}
+				this.reminders.push(new Date(this.newReminder))
+				this.newReminder = null
+			} else if(this.reminders[index] === null) {
+				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()
-			},
+			this.updateData()
 		},
-	}
+		removeReminderByIndex(index) {
+			this.reminders.splice(index, 1)
+			this.updateData()
+		},
+	},
+}
 </script>

src/components/tasks/partials/repeatAfter.vue

@@ -1,33 +1,37 @@
 <template>
 	<div class="control repeat-after-input columns">
-		<p class="column is-1">
-			Each
-		</p>
-		<div class="column is-7 field has-addons">
-			<div class="control">
-				<input
+		<div class="is-flex column">
+			<p class="pr-4">
+				Each
+			</p>
+			<div class="field has-addons is-fullwidth">
+				<div class="control">
+					<input
+						:disabled="disabled"
+						@change="updateData"
 						class="input"
 						placeholder="Specify an amount..."
-						v-model="repeatAfter.amount"
-						@change="updateData"/>
-			</div>
-			<div class="control">
-				<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>
+						v-model="repeatAfter.amount"/>
+				</div>
+				<div class="control">
+					<div class="select">
+						<select :disabled="disabled" @change="updateData" v-model="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>
 		<fancycheckbox
-				class="column"
-				@change="updateData"
-				v-model="task.repeatFromCurrentDate"
-				v-tooltip="'When marking the task as done, all dates will be set relative to the current date rather than the date they had before.'"
+			:disabled="disabled"
+			@change="updateData"
+			class="column"
+			v-model="task.repeatFromCurrentDate"
+			v-tooltip="'When marking the task as done, all dates will be set relative to the current date rather than the date they had before.'"
 		>
 			Repeat from current date
 		</fancycheckbox>
@@ -35,66 +39,69 @@
 </template>
 
 <script>
-	import Fancycheckbox from '../../input/fancycheckbox'
+import Fancycheckbox from '../../input/fancycheckbox'
 
-	export default {
-		name: 'repeatAfter',
-		components: {Fancycheckbox},
-		data() {
-			return {
-				task: {},
-				repeatAfter: {
-					amount: 0,
-					type: '',
-				},
-			}
-		},
-		props: {
-			value: {
-				default: () => {
-				},
-				required: true,
-			}
-		},
-		watch: {
-			value(newVal) {
-				this.task = newVal
-				if (typeof newVal.repeatAfter !== 'undefined') {
-					this.repeatAfter = newVal.repeatAfter
-				}
+export default {
+	name: 'repeatAfter',
+	components: {Fancycheckbox},
+	data() {
+		return {
+			task: {},
+			repeatAfter: {
+				amount: 0,
+				type: '',
 			},
+		}
+	},
+	props: {
+		value: {
+			default: () => {
+			},
+			required: true,
 		},
-		mounted() {
-			this.task = this.value
-			if (typeof this.value.repeatAfter !== 'undefined') {
-				this.repeatAfter = this.value.repeatAfter
+		disabled: {
+			default: false,
+		},
+	},
+	watch: {
+		value(newVal) {
+			this.task = newVal
+			if (typeof newVal.repeatAfter !== 'undefined') {
+				this.repeatAfter = newVal.repeatAfter
 			}
 		},
-		methods: {
-			updateData() {
-				this.task.repeatAfter = this.repeatAfter
-				this.$emit('input', this.task)
-				this.$emit('change')
-			}
+	},
+	mounted() {
+		this.task = this.value
+		if (typeof this.value.repeatAfter !== 'undefined') {
+			this.repeatAfter = this.value.repeatAfter
+		}
+	},
+	methods: {
+		updateData() {
+			this.task.repeatAfter = this.repeatAfter
+			this.$emit('input', this.task)
+			this.$emit('change')
 		},
-	}
+	},
+}
 </script>
 
-<style scoped lang="scss">
-	p {
-		padding-top: 6px;
+<style lang="scss" scoped>
+p {
+	padding-top: 6px;
+}
+
+.field.has-addons {
+
+	margin-bottom: .5rem;
+
+	.control .select select {
+		height: 2.5em;
 	}
+}
 
-	.field.has-addons {
-
-		margin-bottom: .5rem;
-
-		.control .select select {
-			height: 2.5em;
-		}
-	}
-
-	.columns {
-		align-items: center;
-	}
+.columns {
+	align-items: center;
+}
 </style>

src/components/tasks/partials/singleTaskInList.vue

@@ -1,124 +1,185 @@
 <template>
-	<span>
-		<fancycheckbox v-model="task.done" @change="markAsDone" :disabled="isArchived"/>
-		<router-link :to="{ name: taskDetailRoute, params: { id: task.id } }" class="tasktext"  :class="{ 'done': task.done}">
-
-			<router-link
-					v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
-					v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`"
+	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
+		<fancycheckbox :disabled="isArchived || disabled" @change="markAsDone" v-model="task.done"/>
+		<span
+			:style="{backgroundColor: listColor }"
+			class="color-bubble"
+			v-if="listColor !== ''">
+		</span>
+		<span :class="{ 'done': task.done}" class="tasktext">
+			<router-link :to="{ name: taskDetailRoute, params: { id: task.id } }">
+				<router-link
 					:to="{ name: 'list.list', params: { listId: task.listId } }"
-					class="task-list">
-				{{ $store.getters['lists/getListById'](task.listId).title }}
+					class="task-list"
+					v-if="showList && $store.getters['lists/getListById'](task.listId) !== null"
+					v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`">
+					{{ $store.getters['lists/getListById'](task.listId).title }}
+				</router-link>
+
+				<!-- 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.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
+					</template>
+					>
+				</span>
+				{{ task.title }}
 			</router-link>
 
-			<!-- 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.title }}<template v-if="(i + 1) < task.relatedTasks.parenttask.length">,&nbsp;</template>
-				</template>
-				>
-			</span>
-			{{ task.title }}
 			<labels :labels="task.labels"/>
 			<user
-					:user="a"
-					:avatar-size="27"
-					:show-username="false"
-					:is-inline="true"
-					v-for="(a, i) in task.assignees"
-					:key="task.id + 'assignee' + a.id + i"
+				:avatar-size="27"
+				:is-inline="true"
+				:key="task.id + 'assignee' + a.id + i"
+				:show-username="false"
+				:user="a"
+				v-for="(a, i) in task.assignees"
 			/>
-			<i v-if="task.dueDate > 0"
+			<i
 				:class="{'overdue': task.dueDate <= new Date() && !task.done}"
-				v-tooltip="formatDate(task.dueDate)"> - Due {{formatDateSince(task.dueDate)}}</i>
+				@click.stop="showDefer = !showDefer"
+				v-if="+new Date(task.dueDate) > 0"
+				v-tooltip="formatDate(task.dueDate)"
+			>
+				- Due {{ formatDateSince(task.dueDate) }}
+			</i>
+			<transition name="fade">
+				<defer-task v-if="+new Date(task.dueDate) > 0 && showDefer" v-model="task"/>
+			</transition>
 			<priority-label :priority="task.priority"/>
+		</span>
+		<router-link
+			:to="{ name: 'list.list', params: { listId: task.listId } }"
+			class="task-list"
+			v-if="!showList && currentList.id !== task.listId && $store.getters['lists/getListById'](task.listId) !== null"
+			v-tooltip="`This task belongs to list '${$store.getters['lists/getListById'](task.listId).title}'`">
+			{{ $store.getters['lists/getListById'](task.listId).title }}
 		</router-link>
-	</span>
+		<a
+			:class="{'is-favorite': task.isFavorite}"
+			@click="toggleFavorite"
+			class="favorite">
+			<icon icon="star" v-if="task.isFavorite"/>
+			<icon :icon="['far', 'star']" v-else/>
+		</a>
+		<slot></slot>
+	</div>
 </template>
 
 <script>
-	import TaskModel from '../../../models/task'
-	import PriorityLabel from './priorityLabel'
-	import TaskService from '../../../services/task'
-	import Labels from './labels'
-	import User from '../../misc/user'
-	import Fancycheckbox from '../../input/fancycheckbox'
+import TaskModel from '../../../models/task'
+import PriorityLabel from './priorityLabel'
+import TaskService from '../../../services/task'
+import Labels from './labels'
+import User from '../../misc/user'
+import Fancycheckbox from '../../input/fancycheckbox'
+import DeferTask from './defer-task'
 
-	export default {
-		name: 'singleTaskInList',
-		data() {
-			return {
-				taskService: TaskService,
-				task: TaskModel,
+export default {
+	name: 'singleTaskInList',
+	data() {
+		return {
+			taskService: TaskService,
+			task: TaskModel,
+			showDefer: false,
+		}
+	},
+	components: {
+		DeferTask,
+		Fancycheckbox,
+		User,
+		Labels,
+		PriorityLabel,
+	},
+	props: {
+		theTask: {
+			type: TaskModel,
+			required: true,
+		},
+		isArchived: {
+			type: Boolean,
+			default: false,
+		},
+		taskDetailRoute: {
+			type: String,
+			default: 'task.list.detail',
+		},
+		showList: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	watch: {
+		theTask(newVal) {
+			this.task = newVal
+		},
+	},
+	mounted() {
+		this.task = this.theTask
+	},
+	created() {
+		this.task = new TaskModel()
+		this.taskService = new TaskService()
+	},
+	computed: {
+		listColor() {
+			const list = this.$store.getters['lists/getListById'](this.task.listId)
+			return list !== null ? list.hexColor : ''
+		},
+		currentList() {
+			return typeof this.$store.state.currentList === 'undefined' ? {
+				id: 0,
+				title: '',
+			} : this.$store.state.currentList
+		},
+	},
+	methods: {
+		markAsDone(checked) {
+			const updateFunc = () => {
+				this.taskService.update(this.task)
+					.then(t => {
+						this.task = t
+						this.$emit('task-updated', 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
 			}
 		},
-		components: {
-			Fancycheckbox,
-			User,
-			Labels,
-			PriorityLabel,
+		toggleFavorite() {
+			this.task.isFavorite = !this.task.isFavorite
+			this.taskService.update(this.task)
+				.then(t => {
+					this.task = t
+					this.$emit('task-updated', t)
+					this.$store.dispatch('namespaces/loadNamespacesIfFavoritesDontExist')
+				})
+				.catch(e => {
+					this.error(e, this)
+				})
 		},
-		props: {
-			theTask: {
-				type: TaskModel,
-				required: true,
-			},
-			isArchived: {
-				type: Boolean,
-				default: false,
-			},
-			taskDetailRoute: {
-				type: String,
-				default: 'task.list.detail'
-			},
-			showList: {
-				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>