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
@@ -86,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
@@ -150,6 +294,10 @@ kind: pipeline
 type: docker
 name: docker-arm-release
 
+depends_on:
+  - release-latest
+  - release-version
+
 platform:
   os: linux
   arch: arm
@@ -160,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:
@@ -175,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
@@ -186,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:
@@ -207,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

.gitignore

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

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,7 +3,7 @@
 > 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)
+[![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,49 +4,58 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
+    "serve:dist": "node scripts/serve-dist.js",
     "build": "vue-cli-service build --modern",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint --ignore-pattern '*.test.*'",
+    "cypress:open": "cypress open",
+    "test:unit": "jest",
+    "test:frontend": "cypress run"
   },
   "dependencies": {
     "bulma": "0.9.1",
-    "camel-case": "4.1.1",
+    "camel-case": "4.1.2",
     "copy-to-clipboard": "3.3.1",
     "date-fns": "2.16.1",
-    "dompurify": "2.2.2",
+    "dompurify": "2.2.6",
     "lodash": "4.17.20",
-    "marked": "1.2.5",
-    "register-service-worker": "1.7.1",
-    "snake-case": "3.0.3",
+    "marked": "1.2.7",
+    "register-service-worker": "1.7.2",
+    "snake-case": "3.0.4",
     "verte": "0.0.12",
     "vue": "2.6.12",
-    "vue-advanced-cropper": "0.17.9",
+    "vue-advanced-cropper": "0.20.1",
     "vue-drag-resize": "1.4.2",
-    "vue-easymde": "1.3.1",
+    "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.32",
     "@fortawesome/free-regular-svg-icons": "5.15.1",
     "@fortawesome/free-solid-svg-icons": "5.15.1",
-    "@fortawesome/vue-fontawesome": "2.0.0",
+    "@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.0",
+    "axios": "0.21.1",
     "babel-eslint": "10.1.0",
-    "eslint": "7.14.0",
-    "eslint-plugin-vue": "7.1.0",
+    "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.4.9",
-    "vue-template-compiler": "2.6.12"
+    "vue-template-compiler": "2.6.12",
+    "wait-on": "5.2.0"
   },
   "eslintConfig": {
     "root": true,
@@ -60,7 +69,11 @@
     "rules": {},
     "parserOptions": {
       "parser": "babel-eslint"
-    }
+    },
+    "ignorePatterns": [
+      "*.test.js",
+      "cypress/*"
+    ]
   },
   "postcss": {
     "plugins": {
@@ -72,5 +85,8 @@
     "last 2 versions",
     "not ie <= 8"
   ],
-  "license": "LGPL-3.0-or-later"
+  "license": "AGPL-3.0-or-later",
+  "jest": {
+    "testPathIgnorePatterns": ["cypress"]
+  }
 }

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/components/home/navigation.vue

@@ -21,14 +21,6 @@
 						Upcoming
 					</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">
@@ -45,6 +37,14 @@
 						Labels
 					</router-link>
 				</li>
+				<li>
+					<router-link :to="{ name: 'teams.index'}">
+						<span class="icon">
+							<icon icon="users"/>
+						</span>
+						Teams
+					</router-link>
+				</li>
 			</ul>
 		</div>
 
@@ -133,7 +133,7 @@
 
 <script>
 import {mapState} from 'vuex'
-import {CURRENT_LIST, IS_FULLPAGE, LOADING, MENU_ACTIVE} from '@/store/mutation-types'
+import {CURRENT_LIST, IS_FULLPAGE, MENU_ACTIVE} from '@/store/mutation-types'
 
 export default {
 	name: 'navigation',
@@ -145,16 +145,16 @@ export default {
 		currentList: CURRENT_LIST,
 		background: 'background',
 		menuActive: MENU_ACTIVE,
-		loading: LOADING,
+		loading: state => state.namespaces.loading,
 	}),
 	beforeCreate() {
 		this.$store.dispatch('namespaces/loadNamespaces')
 	},
 	created() {
-		// Hide the menu by default on mobile
-		if (window.innerWidth < 770) {
-			this.$store.commit(MENU_ACTIVE, false)
-		}
+		window.addEventListener('resize', this.resize)
+	},
+	mounted() {
+		this.resize()
 	},
 	methods: {
 		toggleFavoriteList(list) {
@@ -166,6 +166,14 @@ export default {
 			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/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/editor.vue

@@ -345,27 +345,33 @@ export default {
 			// not already made available.
 			// Some docs at https://stackoverflow.com/q/62865160/10924593
 			this.$nextTick(() => {
-				document.getElementsByClassName('attachment-image').forEach(img => {
-					// The url is something like /tasks/<id>/attachments/<id>
-					const parts = img.dataset.src.substr(window.API_URL.length + 1).split('/')
-					const taskId = parseInt(parts[1])
-					const attachmentId = parseInt(parts[3])
-					const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
+				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()
-					}
+						if (this.attachmentService === null) {
+							this.attachmentService = new AttachmentService()
+						}
 
-					this.attachmentService.getBlobUrl(attachment)
-						.then(url => {
-							img.src = url
-						})
-				})
+						this.attachmentService.getBlobUrl(attachment)
+							.then(url => {
+								img.src = url
+							})
+					})
+				}
 
-				document.getElementsByClassName(`text-checkbox-${this._uid}`).forEach(check => {
-					check.removeEventListener('change', this.handleCheckboxClick)
-					check.addEventListener('change', this.handleCheckboxClick)
-				})
+				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) {
@@ -405,6 +411,10 @@ export default {
 	.tabs ul {
 		margin-left: 0;
 	}
+
+	.preview.content ul li input[type="checkbox"] {
+		margin-right: .5rem;
+	}
 }
 
 .CodeMirror {

src/components/list/partials/filters.vue

@@ -18,18 +18,6 @@
 					</fancycheckbox>
 				</div>
 			</div>
-			<div class="field">
-				<label class="label">Due Date</label>
-				<div class="control">
-					<flat-pickr
-						:config="flatPickerConfig"
-						@on-close="setDueDateFilter"
-						class="input"
-						placeholder="Due Date Range"
-						v-model="filters.dueDate"
-					/>
-				</div>
-			</div>
 			<div class="field">
 				<label class="label">Priority</label>
 				<div class="control single-value-control">
@@ -46,6 +34,34 @@
 					</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
+						: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">
@@ -71,21 +87,158 @@
 				</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"
+				<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"
 					/>
-					<fancycheckbox
-						v-model="filters.usePercentDone"
-						@change="setPercentDoneFilter"
-					>
-						Enable Filter By Percent Done
-					</fancycheckbox>
 				</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>
@@ -94,11 +247,19 @@
 import Fancycheckbox from '../../input/fancycheckbox'
 import flatPickr from 'vue-flatpickr-component'
 import 'flatpickr/dist/flatpickr.css'
+import Multiselect from 'vue-multiselect'
 
 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: {
@@ -106,6 +267,7 @@ export default {
 		Fancycheckbox,
 		flatPickr,
 		PercentDoneSelect,
+		Multiselect,
 	},
 	data() {
 		return {
@@ -128,6 +290,11 @@ export default {
 				endDate: '',
 				percentDone: 0,
 				usePercentDone: false,
+				reminders: '',
+				assignees: '',
+				labels: '',
+				list_id: '',
+				namespace: '',
 			},
 			flatPickerConfig: {
 				altFormat: 'j M Y H:i',
@@ -137,8 +304,30 @@ export default {
 				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'
@@ -162,11 +351,16 @@ export default {
 		},
 		prepareFilters() {
 			this.prepareDone()
-			this.prepareDueDate()
-			this.prepareStartDate()
-			this.prepareEndDate()
-			this.preparePriority()
-			this.preparePercentDone()
+			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')
 		},
 		removePropertyFromFilter(propertyName) {
 			for (const i in this.params.filter_by) {
@@ -241,8 +435,8 @@ export default {
 				this.filters[variableName] = `${start.getFullYear()}-${start.getMonth() + 1}-${start.getDate()} to ${end.getFullYear()}-${end.getMonth() + 1}-${end.getDate()}`
 			}
 		},
-		setSingleValueFilter(filterName, variableName, useVariableName) {
-			if (!this.filters[useVariableName]) {
+		setSingleValueFilter(filterName, variableName, useVariableName = '', comparator = 'equals') {
+			if (useVariableName !== '' && !this.filters[useVariableName]) {
 				this.removePropertyFromFilter(filterName)
 				return
 			}
@@ -257,13 +451,24 @@ export default {
 
 			if (!found) {
 				this.params.filter_by.push(filterName)
-				this.params.filter_comparator.push('equals')
+				this.params.filter_comparator.push(comparator)
 				this.params.filter_value.push(this.filters[variableName])
 			}
 
 			this.change()
 		},
-		prepareSingleValue(filterName, variableName, useVariableName, isNumber = false) {
+		/**
+		 *
+		 * @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) {
@@ -272,7 +477,7 @@ export default {
 				}
 			}
 
-			if (found === false) {
+			if (found === false && useVariableName !== null) {
 				this.filters[useVariableName] = false
 				return
 			}
@@ -283,7 +488,9 @@ export default {
 				this.filters[variableName] = this.params.filter_value[found]
 			}
 
-			this.filters[useVariableName] = true
+			if (useVariableName !== null) {
+				this.filters[useVariableName] = true
+			}
 		},
 		prepareDone() {
 			// Set filters.done based on params
@@ -301,6 +508,24 @@ export default {
 				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')
@@ -333,20 +558,105 @@ export default {
 		setPercentDoneFilter() {
 			this.setSingleValueFilter('percent_done', 'percentDone', 'usePercentDone')
 		},
-		prepareDueDate() {
-			this.prepareDate('due_date', 'dueDate')
+		setReminderFilter() {
+			this.setDateFilter('reminders')
 		},
-		preparePriority() {
-			this.prepareSingleValue('priority', 'priority', 'usePriority', true)
+		clear(kind) {
+			this.$set(this, `found${kind}`, [])
 		},
-		prepareStartDate() {
-			this.prepareDate('start_date', 'startDate')
+		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)
+				})
 		},
-		prepareEndDate() {
-			this.prepareDate('end_date', 'endDate')
+		add(kind, filterName) {
+			this.$nextTick(() => {
+				this.changeMultiselectFilter(kind, filterName)
+			})
 		},
-		preparePercentDone() {
-			this.prepareSingleValue('percent_done', 'percentDone', 'usePercentDone', true)
+		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')
 		},
 	},
 }

src/components/migrator/migration.vue

@@ -64,7 +64,7 @@ export default {
 			isMigrating: false,
 			lastMigrationDate: null,
 			message: '',
-			wunderlistCode: '',
+			migratorAuthCode: '',
 		}
 	},
 	props: {
@@ -82,13 +82,25 @@ export default {
 		this.getAuthUrl()
 		this.message = ''
 
-		if (typeof this.$route.query.code !== 'undefined') {
-			this.wunderlistCode = this.$route.query.code
+		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
+			}
 			this.migrationService.getStatus()
 				.then(r => {
 					if (r.time) {
-						this.lastMigrationDate = new Date(r.time)
-						return
+						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()
 				})
@@ -109,10 +121,12 @@ export default {
 		},
 		migrate() {
 			this.isMigrating = true
-			this.lastMigrationDate = 0
-			this.migrationService.migrate({code: this.wunderlistCode})
+			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)

src/components/misc/notification.vue

@@ -1,5 +1,5 @@
 <template>
-	<notifications position="bottom left" :max="2">
+	<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

src/components/tasks/partials/heading.vue

@@ -8,10 +8,11 @@
 		</h1>
 		<div class="is-done" v-if="task.done">Done</div>
 		<h1
+			class="title input"
+			:class="{'disabled': !canWrite}"
 			@focusout="save()"
 			@keyup.ctrl.enter="save()"
-			class="title input"
-			contenteditable="true"
+			:contenteditable="canWrite ? 'true' : 'false'"
 			ref="taskTitle">
 			{{ task.title }}
 		</h1>
@@ -49,6 +50,10 @@ export default {
 		value: {
 			required: true,
 		},
+		canWrite: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	watch: {
 		value(newVal) {

src/components/tasks/partials/reminders.vue

@@ -1,70 +1,79 @@
 <template>
 	<div class="reminders">
 		<div
-			:class="{ 'overdue': (r < nowUnix && index !== (reminders.length - 1))}"
+			v-for="(r, index) in reminders"
 			:key="index"
+			:class="{ 'overdue': r < new Date()}"
 			class="reminder-input"
-			v-for="(r, index) in reminders">
-			<flat-pickr
-				:config="flatPickerConfig"
-				:data-index="index"
+		>
+			<datepicker
+				v-model="reminders[index]"
 				:disabled="disabled"
-				:value="r"
+				@close-on-change="() => addReminderDate(index)"
 			/>
-			<a @click="removeReminderByIndex(index)" v-if="!disabled">
+			<a @click="removeReminderByIndex(index)" v-if="!disabled" class="remove">
 				<icon icon="times"></icon>
 			</a>
 		</div>
-		<div class="reminder-input" v-if="showNewReminder">
-			<flat-pickr
-				:config="flatPickerConfig"
-				:disabled="disabled"
-				:value="null"
-				placeholder="Add a new reminder..."
+		<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 {
+			newReminder: null,
 			reminders: [],
-			lastReminder: 0,
-			nowUnix: new Date(),
-			showNewReminder: true,
-			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,
+			validator: prop => {
+				// This allows arrays of Dates and strings
+				if (!(prop instanceof Array)) {
+					return false
+				}
+
+				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: {
-		flatPickr,
+		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
 		},
 	},
@@ -73,40 +82,22 @@ export default {
 			this.$emit('input', this.reminders)
 			this.$emit('change')
 		},
-		updateLastReminderDate(selectedDates) {
-			this.lastReminder = +new Date(selectedDates[0])
-		},
-		addReminderDate(selectedDates, dateStr, instance) {
-			const newDate = +new Date(selectedDates[0])
-
-			// Don't update if nothing changed
-			if (newDate === this.lastReminder) {
+		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
 			}
 
-			// No date selected
-			if (isNaN(newDate)) {
-				return
-			}
-
-			const index = parseInt(instance.input.dataset.index)
-			if (isNaN(index)) {
-				this.reminders.push(newDate)
-				// This is a workaround to recreate the flatpicker instance which essentially resets it.
-				// Even though flatpickr itself has a reset event, the Vue component does not expose it.
-				this.showNewReminder = false
-				this.$nextTick(() => this.showNewReminder = true)
-			} else {
-				this.reminders[index] = newDate
-			}
-
 			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()
 		},
 	},

src/components/tasks/partials/repeatAfter.vue

@@ -1,26 +1,28 @@
 <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
-					:disabled="disabled"
-					@change="updateData"
-					class="input"
-					placeholder="Specify an amount..."
-					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 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"/>
+				</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>

src/components/tasks/partials/singleTaskInList.vue

@@ -1,6 +1,11 @@
 <template>
 	<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
@@ -121,6 +126,10 @@ export default {
 		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,

src/helpers/time/calculateDayInterval.js

@@ -0,0 +1,26 @@
+export function calculateDayInterval(date, currentDay = (new Date().getDay())) {
+	switch (date) {
+		case 'today':
+			return 0
+		case 'tomorrow':
+			return 1
+		case 'nextMonday':
+			// Monday is 1, so we calculate the distance to the next 1
+			return (currentDay + (8 - currentDay * 2)) % 7
+		case 'thisWeekend':
+			// Saturday is 6 so we calculate the distance to the next 6
+			return (6 - currentDay) % 6
+		case 'laterThisWeek':
+			if (currentDay === 5 || currentDay === 6 || currentDay === 0) {
+				return 0
+			}
+
+			return 2
+		case 'laterNextWeek':
+			return calculateDayInterval('laterThisWeek', currentDay) + 7
+		case 'nextWeek':
+			return 7
+		default:
+			return 0
+	}
+}

src/helpers/time/calculateDayInterval.test.js

@@ -0,0 +1,93 @@
+import {calculateDayInterval} from './calculateDayInterval'
+
+const days = {
+    monday:    1,
+    tuesday:   2,
+    wednesday: 3,
+    thursday:  4,
+    friday:    5,
+    saturday:  6,
+    sunday:    0,
+}
+
+for (const n in days) {
+    test(`today on a ${n}`, () => {
+        expect(calculateDayInterval('today', days[n])).toBe(0)
+    })
+}
+
+for (const n in days) {
+    test(`tomorrow on a ${n}`, () => {
+        expect(calculateDayInterval('tomorrow', days[n])).toBe(1)
+    })
+}
+
+const nextMonday = {
+    monday:    0,
+    tuesday:   6,
+    wednesday: 5,
+    thursday:  4,
+    friday:    3,
+    saturday:  2,
+    sunday:    1,
+}
+
+for (const n in nextMonday) {
+    test(`next monday on a ${n}`, () => {
+        expect(calculateDayInterval('nextMonday', days[n])).toBe(nextMonday[n])
+    })
+}
+
+const thisWeekend = {
+    monday:    5,
+    tuesday:   4,
+    wednesday: 3,
+    thursday:  2,
+    friday:    1,
+    saturday:  0,
+    sunday:    0,
+}
+
+for (const n in thisWeekend) {
+    test(`this weekend on a ${n}`, () => {
+        expect(calculateDayInterval('thisWeekend', days[n])).toBe(thisWeekend[n])
+    })
+}
+
+const laterThisWeek = {
+    monday:    2,
+    tuesday:   2,
+    wednesday: 2,
+    thursday:  2,
+    friday:    0,
+    saturday:  0,
+    sunday:    0,
+}
+
+for (const n in laterThisWeek) {
+    test(`later this week on a ${n}`, () => {
+        expect(calculateDayInterval('laterThisWeek', days[n])).toBe(laterThisWeek[n])
+    })
+}
+
+const laterNextWeek = {
+    monday:    7 + 2,
+    tuesday:   7 + 2,
+    wednesday: 7 + 2,
+    thursday:  7 + 2,
+    friday:    7 + 0,
+    saturday:  7 + 0,
+    sunday:    7 + 0,
+}
+
+for (const n in laterNextWeek) {
+    test(`later next week on a ${n} (this week)`, () => {
+        expect(calculateDayInterval('laterNextWeek', days[n])).toBe(laterNextWeek[n])
+    })
+}
+
+for (const n in days) {
+    test(`next week on a ${n}`, () => {
+        expect(calculateDayInterval('nextWeek', days[n])).toBe(7)
+    })
+}

src/helpers/time/calculateNearestHours.js

@@ -0,0 +1,21 @@
+export function calculateNearestHours(currentDate = new Date()) {
+	if (currentDate.getHours() <= 9 || currentDate.getHours() > 21) {
+		return 9
+	}
+
+	if (currentDate.getHours() <= 12) {
+		return 12
+	}
+
+	if (currentDate.getHours() <= 15) {
+		return 15
+	}
+
+	if (currentDate.getHours() <= 18) {
+		return 18
+	}
+
+	if (currentDate.getHours() <= 21) {
+		return 21
+	}
+}

src/helpers/time/calculateNearestTime.test.js

@@ -0,0 +1,90 @@
+import {calculateNearestHours} from './calculateNearestHours'
+
+test('5:00', () => {
+	const date = new Date()
+	date.setHours(5)
+	expect(calculateNearestHours(date)).toBe(9)
+})
+
+test('7:00', () => {
+	const date = new Date()
+	date.setHours(7)
+	expect(calculateNearestHours(date)).toBe(9)
+})
+
+test('7:41', () => {
+	const date = new Date()
+	date.setHours(7)
+	date.setMinutes(41)
+	expect(calculateNearestHours(date)).toBe(9)
+})
+
+test('9:00', () => {
+	const date = new Date()
+	date.setHours(9)
+	date.setMinutes(0)
+	expect(calculateNearestHours(date)).toBe(9)
+})
+
+test('10:00', () => {
+	const date = new Date()
+	date.setHours(10)
+	date.setMinutes(0)
+	expect(calculateNearestHours(date)).toBe(12)
+})
+
+test('12:00', () => {
+	const date = new Date()
+	date.setHours(12)
+	date.setMinutes(0)
+	expect(calculateNearestHours(date)).toBe(12)
+})
+
+test('13:00', () => {
+	const date = new Date()
+	date.setHours(13)
+	date.setMinutes(0)
+	expect(calculateNearestHours(date)).toBe(15)
+})
+
+test('15:00', () => {
+	const date = new Date()
+	date.setHours(15)
+	date.setMinutes(0)
+	expect(calculateNearestHours(date)).toBe(15)
+})
+
+test('16:00', () => {
+	const date = new Date()
+	date.setHours(16)
+	date.setMinutes(0)
+	expect(calculateNearestHours(date)).toBe(18)
+})
+
+test('18:00', () => {
+	const date = new Date()
+	date.setHours(18)
+	date.setMinutes(0)
+	expect(calculateNearestHours(date)).toBe(18)
+})
+
+test('19:00', () => {
+	const date = new Date()
+	date.setHours(19)
+	date.setMinutes(0)
+	expect(calculateNearestHours(date)).toBe(21)
+})
+
+test('22:00', () => {
+	const date = new Date()
+	date.setHours(22)
+	date.setMinutes(0)
+	expect(calculateNearestHours(date)).toBe(9)
+})
+
+test('22:40', () => {
+	const date = new Date()
+	date.setHours(22)
+	date.setMinutes(0)
+	expect(calculateNearestHours(date)).toBe(9)
+})

src/main.js

@@ -53,8 +53,12 @@ import {
 	faTrashAlt,
 	faUser,
 	faUsers,
+	faForward,
+	faChessKnight,
+	faCoffee,
+	faCocktail,
 } from '@fortawesome/free-solid-svg-icons'
-import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle} from '@fortawesome/free-regular-svg-icons'
+import {faCalendarAlt, faClock, faComments, faSave, faStar, faTimesCircle, faSun} from '@fortawesome/free-regular-svg-icons'
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
 // PWA
 import './registerServiceWorker'
@@ -135,6 +139,11 @@ library.add(faFillDrip)
 library.add(faKeyboard)
 library.add(faSave)
 library.add(faStarSolid)
+library.add(faForward)
+library.add(faSun)
+library.add(faChessKnight)
+library.add(faCoffee)
+library.add(faCocktail)
 
 Vue.component('icon', FontAwesomeIcon)
 
@@ -146,6 +155,13 @@ Vue.directive('focus', focus)
 import tooltip from '@/directives/tooltip'
 Vue.directive('tooltip', tooltip)
 
+const formatDate = (date, f) => {
+	if (typeof date === 'string') {
+		date = new Date(date)
+	}
+	return date ? format(date, f) : ''
+}
+
 Vue.mixin({
 	methods: {
 		formatDateSince: date => {
@@ -170,6 +186,9 @@ Vue.mixin({
 			}
 			return date ? format(date, 'PPPPpppp') : ''
 		},
+		formatDateShort: date => {
+			return formatDate(date, 'PPpp')
+		},
 		error: (e, context, actions = []) => message.error(e, context, actions),
 		success: (s, context, actions = []) => message.success(s, context, actions),
 		colorIsDark: colorIsDark,

src/models/task.js

@@ -3,6 +3,13 @@ import UserModel from './user'
 import LabelModel from './label'
 import AttachmentModel from './attachment'
 
+const parseDate = date => {
+	if (date && !date.startsWith('0001')) {
+		return new Date(date)
+	}
+	return null
+}
+
 export default class TaskModel extends AbstractModel {
 
 	defaultColor = '198CFF'
@@ -14,9 +21,10 @@ export default class TaskModel extends AbstractModel {
 		this.listId = Number(this.listId)
 
 		// Make date objects from timestamps
-		this.dueDate = this.dueDate && !this.dueDate.startsWith('0001') ? new Date(this.dueDate) : null
-		this.startDate = this.startDate && !this.startDate.startsWith('0001') ? new Date(this.startDate) : null
-		this.endDate = this.endDate && !this.endDate.startsWith('0001') ? new Date(this.endDate) : null
+		this.dueDate = parseDate(this.dueDate)
+		this.startDate = parseDate(this.startDate)
+		this.endDate = parseDate(this.endDate)
+		this.doneAt = parseDate(this.doneAt)
 
 		// Cancel all scheduled notifications for this task to be sure to only have available notifications
 		this.cancelScheduledNotifications()
@@ -77,6 +85,7 @@ export default class TaskModel extends AbstractModel {
 			title: '',
 			description: '',
 			done: false,
+			doneAt: null,
 			priority: 0,
 			labels: [],
 			assignees: [],

src/models/user.js

@@ -19,7 +19,7 @@ export default class UserModel extends AbstractModel {
 	}
 
 	getAvatarUrl(size = 50) {
-		return `${window.API_URL}/${this.username}/avatar?size=${size}`
+		return `${window.API_URL}/avatar/${this.username}?size=${size}`
 	}
 
 	getDisplayName() {

src/models/userName.js

@@ -1,10 +0,0 @@
-
-import AbstractModel from './abstractModel'
-
-export default class UserNameModel extends AbstractModel {
-	defaults() {
-		return {
-			name: '',
-		}
-	}
-}

src/models/userSettings.js

@@ -0,0 +1,11 @@
+
+import AbstractModel from './abstractModel'
+
+export default class UserSettingsModel extends AbstractModel {
+	defaults() {
+		return {
+			name: '',
+			emailRemindersEnabled: true,
+		}
+	}
+}

src/services/task.js

@@ -5,6 +5,14 @@ import LabelService from './label'
 
 import {formatISO} from 'date-fns'
 
+const parseDate = date => {
+	if (date) {
+		return formatISO(new Date(date))
+	}
+
+	return null
+}
+
 export default class TaskService extends AbstractService {
 	constructor() {
 		super({
@@ -34,9 +42,10 @@ export default class TaskService extends AbstractService {
 		model.listId = Number(model.listId)
 
 		// Convert dates into an iso string
-		model.dueDate = !model.dueDate ? null : formatISO(new Date(model.dueDate))
-		model.startDate = !model.startDate ? null : formatISO(new Date(model.startDate))
-		model.endDate = !model.endDate ? null : formatISO(new Date(model.endDate))
+		model.dueDate = parseDate(model.dueDate)
+		model.startDate = parseDate(model.startDate)
+		model.endDate = parseDate(model.endDate)
+		model.doneAt = parseDate(model.doneAt)
 		model.created = formatISO(new Date(model.created))
 		model.updated = formatISO(new Date(model.updated))
 

src/services/userName.js

@@ -1,10 +0,0 @@
-
-import AbstractService from './abstractService'
-
-export default class UserNameService extends AbstractService {
-	constructor() {
-		super({
-			update: '/user/settings/name',
-		})
-	}
-}

src/services/userSettings.js

@@ -0,0 +1,10 @@
+
+import AbstractService from './abstractService'
+
+export default class UserSettingsService extends AbstractService {
+	constructor() {
+		super({
+			update: '/user/settings/general',
+		})
+	}
+}

src/store/helper.js

@@ -1,11 +1,19 @@
 import {LOADING} from './mutation-types'
 
-export const setLoading = context => {
+export const setLoading = (context, loadFunc = null) => {
 	const timeout = setTimeout(() => {
-		context.commit(LOADING, true, {root: true})
+		if (loadFunc === null) {
+			context.commit(LOADING, true, {root: true})
+		} else {
+			loadFunc(true)
+		}
 	}, 100)
 	return () => {
 		clearTimeout(timeout)
-		context.commit(LOADING, false, {root: true})
+		if (loadFunc === null) {
+			context.commit(LOADING, false, {root: true})
+		} else {
+			loadFunc(false)
+		}
 	}
 }

src/store/modules/auth.js

@@ -16,8 +16,9 @@ export default {
 			state.info = info
 			state.avatarUrl = info.getAvatarUrl()
 		},
-		setUserName(state, name) {
+		setUserSettings(state, {name, emailRemindersEnabled}) {
 			state.info.name = name
+			state.info.emailRemindersEnabled = emailRemindersEnabled
 		},
 		authenticated(state, authenticated) {
 			state.authenticated = authenticated
@@ -185,6 +186,12 @@ export default {
 				.catch(e => {
 					// eslint-disable-next-line
 					console.log('Error renewing token: ', e)
+
+					// Don't logout on network errors as the user would then get logged out if they don't have
+					// internet for a short period of time - such as when the laptop is still reconnecting
+					if (e.request.status) {
+						ctx.dispatch('logout')
+					}
 				})
 		},
 		logout(ctx) {

src/store/modules/kanban.js

@@ -113,14 +113,14 @@ export default {
 		},
 	},
 	actions: {
-		loadBucketsForList(ctx, listId) {
+		loadBucketsForList(ctx, {listId, params}) {
 			const cancel = setLoading(ctx)
 
 			// Clear everything to prevent having old buckets in the list if loading the buckets from this list takes a few moments
 			ctx.commit('setBuckets', [])
 
 			const bucketService = new BucketService()
-			return bucketService.getAll({listId: listId})
+			return bucketService.getAll({listId: listId}, params)
 				.then(r => {
 					ctx.commit('setBuckets', r)
 					ctx.commit('setListId', listId)

src/store/modules/namespaces.js

@@ -7,6 +7,7 @@ export default {
 	namespaced: true,
 	state: () => ({
 		namespaces: [],
+		loading: false,
 	}),
 	mutations: {
 		namespaces(state, namespaces) {
@@ -88,7 +89,9 @@ export default {
 	},
 	actions: {
 		loadNamespaces(ctx) {
-			const cancel = setLoading(ctx)
+			const cancel = setLoading(ctx, status => {
+				ctx.commit('loading', status, {root: true})
+			})
 
 			const namespaceService = new NamespaceService()
 			// We always load all namespaces and filter them on the frontend

src/styles/components/_all.scss

@@ -22,3 +22,4 @@
 @import 'legal';
 @import 'keyboard-shortcuts';
 @import 'api-config';
+@import 'datepicker'

src/styles/components/base/tooltip.scss

@@ -1,5 +1,5 @@
 .tooltip {
-  display: block !important;
+  visibility: collapse;
   z-index: 10000;
   font-size: 0.8em;
   text-align: center;
@@ -17,7 +17,7 @@
   &-arrow {
     opacity: 0;
     content: '';
-    display: block;
+    visibility: collapse;
     position: absolute;
     transition: opacity $transition;
     z-index: 10000;
@@ -35,6 +35,7 @@
 
   &.visible, &-arrow.visible {
     opacity: 1;
+    visibility: visible;
   }
 
   &[x-placement^="top"] {

src/styles/components/datepicker.scss

@@ -0,0 +1,68 @@
+.datepicker {
+	input.input {
+		display: none;
+	}
+
+	&.disabled a {
+		cursor: default;
+	}
+
+	.datepicker-popup {
+		position: absolute;
+		z-index: 99;
+		width: 320px;
+		background: $white;
+		border-radius: $radius;
+		box-shadow: $card-shadow;
+
+		a {
+			display: flex;
+			align-items: center;
+			padding: 0 .5rem;
+			width: 100%;
+			height: 2.25rem;
+			color: $text;
+			transition: all $transition;
+
+			&:first-child {
+				border-radius: $radius $radius 0 0;
+			}
+
+			&:hover {
+				background: $light;
+			}
+
+			.text {
+				width: 100%;
+				font-size: .85rem;
+				display: flex;
+				justify-content: space-between;
+				padding-right: .25rem;
+
+				.weekday {
+					color: $text-light;
+					text-transform: capitalize;
+				}
+			}
+
+			.icon {
+				width: 2rem;
+				text-align: center;
+			}
+
+			&.button {
+				margin: 1rem;
+				width: calc(100% - 2rem);
+			}
+		}
+
+		.flatpickr-calendar {
+			margin: 0 auto 8px;
+			box-shadow: none;
+		}
+
+		@media screen and (max-width: ($tablet)) {
+			width: calc(100vw - 4rem);
+		}
+	}
+}

src/styles/components/namespaces.scss

@@ -38,6 +38,7 @@ $lists-per-row: 5;
       border-radius: 3px;
       font-family: $vikunja-font;
       background: rgba($white, 0.75);
+      margin-left: .5rem;
     }
 
     .lists {

src/styles/components/reminders.scss

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
 
-    &.overdue input {
+    &.overdue .datepicker a.show {
       color: $red;
     }
 
@@ -11,19 +11,9 @@
       margin-bottom: 0.75rem;
     }
 
-    a {
+    a.remove {
       color: $red;
       padding-left: .5rem;
     }
-
-    input {
-      width: 100%;
-      border: none;
-
-      &:focus {
-        border: none;
-        box-shadow: none;
-      }
-    }
   }
 }

src/styles/components/task.scss

@@ -44,13 +44,22 @@
       color: lighten($grey, 25%);
       white-space: nowrap;
     }
+
+    @media screen and (max-width: $tablet) {
+      flex-direction: column;
+      align-items: start;
+
+      .title.input {
+        margin: 0 -.3em .5rem -.3em; // the title has 0.3em padding - this make the text inside of it align with the rest
+      }
+    }
   }
 
   .date-input {
     display: flex;
     align-items: center;
 
-    a {
+    a.remove {
       color: $red;
       vertical-align: middle;
       padding-left: .5em;
@@ -58,6 +67,27 @@
     }
   }
 
+  .datepicker {
+    width: 100%;
+
+    a.show {
+      color: $text;
+      padding: .25rem .5rem;
+      transition: background-color $transition;
+      border-radius: $radius;
+      display: block;
+      margin: .1rem 0;
+
+      &:hover {
+        background: $white;
+      }
+    }
+
+    &.disabled a.show:hover {
+      background: transparent;
+    }
+  }
+
   table {
     table-layout: fixed;
 
@@ -213,13 +243,14 @@
   border-radius: $radius;
   padding: 1em;
   color: $text;
-
-  .task {
-    max-width: 500px;
-  }
+  background-color: $light-background !important;
 
   @media screen and (max-width: 800px) {
     border-radius: 0;
     padding-top: 2rem;
   }
 }
+
+.link-share-container .task-view {
+  background-color: transparent;
+}

src/styles/components/tasks.scss

@@ -53,6 +53,11 @@
       display: none;
     }
 
+    .color-bubble {
+      width: 11px;
+      height: 10px;
+    }
+
     .tag {
       margin: 0 0.5em;
     }

src/styles/theme/content.scss

@@ -16,6 +16,11 @@
       margin-left: 0;
       padding-top: 1.5em;
       min-height: calc(100vh - 4rem);
+
+      &.is-menu-enabled {
+        min-width: 100%;
+        margin-left: 0;
+      }
     }
 
     .card {

src/styles/theme/form.scss

@@ -179,6 +179,14 @@
     background: $input-background-color;
     border-color: $input-focus-border-color;
   }
+
+  &.disabled {
+    &:focus, &:hover {
+      background: transparent !important;
+      border-color: transparent !important;
+      cursor: default !important;
+    }
+  }
 }
 
 h1, h2, h3 {

src/styles/theme/navigation.scss

@@ -163,11 +163,8 @@
         }
 
         .color-bubble {
-          display: inline-block;
           width: 14px; // Without this, the bubble is only 10.2342357612px wide and seems squashed.
           height: 12px;
-          border-radius: 100%;
-          margin-right: 4px;
         }
 
         .favorite {

src/styles/theme/theme.scss

@@ -94,3 +94,13 @@ button.table {
 .has-no-shadow {
   box-shadow: none !important;
 }
+
+.is-fullwidth {
+  width: 100%;
+}
+
+.color-bubble {
+  display: inline-block;
+  border-radius: 100%;
+  margin-right: 4px;
+}

src/views/filters/EditSavedFilter.vue

@@ -72,7 +72,7 @@
 
 		<modal
 			@close="showDeleteModal = false"
-			@submit="deleteList()"
+			@submit="() => deleteSavedFilter()"
 			v-if="showDeleteModal">
 			<span slot="header">Delete this saved filter</span>
 			<p slot="text">
@@ -152,6 +152,15 @@ export default {
 				})
 				.catch(e => this.error(e, this))
 		},
+		deleteSavedFilter() {
+			this.filterService.delete(this.filter)
+				.then(() => {
+					this.$store.dispatch('namespaces/loadNamespaces')
+					this.success({message: 'The filter was deleted successfully.'}, this)
+					this.$router.push({name: 'namespaces.index'})
+				})
+				.catch(e => this.error(e, this))
+		},
 	},
 }
 </script>

src/views/list/views/Kanban.vue

@@ -1,6 +1,23 @@
 <template>
 	<div>
-		<div :class="{ 'is-loading': loading}" class="kanban loader-container">
+		<div class="filter-container" v-if="list.isSavedFilter && !list.isSavedFilter()">
+			<div class="items">
+				<button @click="showFilters = !showFilters" class="button">
+					<span class="icon is-small">
+						<icon icon="filter"/>
+					</span>
+					Filters
+				</button>
+			</div>
+			<transition name="fade">
+				<filters
+					@change="() => {filtersChanged = true; loadBuckets()}"
+					v-if="showFilters"
+					v-model="params"
+				/>
+			</transition>
+		</div>
+		<div :class="{ 'is-loading': loading && !oneTaskUpdating}" class="kanban loader-container">
 			<div :key="`bucket${bucket.id}`" class="bucket" v-for="bucket in buckets">
 				<div class="bucket-header">
 					<h2
@@ -90,8 +107,8 @@
 						>
 							<div
 								:class="{
-							'is-loading': taskService.loading && taskUpdating[task.id],
-							'draggable': !taskService.loading || !taskUpdating[task.id],
+							'is-loading': (taskService.loading || loading) && taskUpdating[task.id],
+							'draggable': !(taskService.loading || loading) || !taskUpdating[task.id],
 							'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
 						}"
 								:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
@@ -154,15 +171,13 @@
 				</div>
 				<div class="bucket-footer" v-if="canWrite">
 					<div class="field" v-if="showNewTaskInput[bucket.id]">
-						<div class="control">
+						<div class="control" :class="{'is-loading': taskService.loading || loading}">
 							<input
-
-								:class="{'is-loading': taskService.loading}"
-								:disabled="taskService.loading"
+								class="input"
+								:disabled="taskService.loading || loading"
 								@focusout="toggleShowNewTaskInput(bucket.id)"
 								@keyup.enter="addTaskToBucket(bucket.id)"
 								@keyup.esc="toggleShowNewTaskInput(bucket.id)"
-								class="input"
 								placeholder="Enter the new task text..."
 								type="text"
 								v-focus.always
@@ -182,7 +197,7 @@
 						</span>
 						<span v-if="bucket.tasks.length === 0">
 						Add a task
-					</span>
+						</span>
 						<span v-else>
 						Add another task
 					</span>
@@ -190,7 +205,7 @@
 				</div>
 			</div>
 
-			<div class="bucket new-bucket" v-if="!loading && canWrite">
+			<div class="bucket new-bucket" v-if="canWrite">
 				<input
 					:class="{'is-loading': loading}"
 					:disabled="loading"
@@ -207,12 +222,12 @@
 				<a
 					@click="() => showNewBucketInput = true"
 					class="button noshadow is-transparent is-fullwidth has-text-centered" v-if="!showNewBucketInput">
-				<span class="icon is-small">
-					<icon icon="plus"/>
-				</span>
+					<span class="icon is-small">
+						<icon icon="plus"/>
+					</span>
 					<span>
-					Create a new bucket
-				</span>
+						Create a new bucket
+					</span>
 				</a>
 			</div>
 		</div>
@@ -245,6 +260,7 @@ import {Container, Draggable} from 'vue-smooth-dnd'
 import PriorityLabel from '../../../components/tasks/partials/priorityLabel'
 import User from '../../../components/misc/user'
 import Labels from '../../../components/tasks/partials/labels'
+import Filters from '../../../components/list/partials/filters'
 
 import {filterObject} from '@/helpers/filterObject'
 import {applyDrag} from '@/helpers/applyDrag'
@@ -261,6 +277,7 @@ export default {
 		Labels,
 		User,
 		PriorityLabel,
+		Filters,
 	},
 	data() {
 		return {
@@ -286,6 +303,16 @@ export default {
 
 			// We're using this to show the loading animation only at the task when updating it
 			taskUpdating: {},
+			oneTaskUpdating: false,
+
+			params: {
+				filter_by: [],
+				filter_value: [],
+				filter_comparator: [],
+				filter_concat: 'and',
+			},
+			showFilters: false,
+			filtersChanged: false, // To trigger a reload of the board
 		}
 	},
 	created() {
@@ -305,6 +332,7 @@ export default {
 		loadedListId: state => state.kanban.listId,
 		loading: LOADING,
 		canWrite: state => state.currentList.maxRight > Rights.READ,
+		list: state => state.currentList,
 	}),
 	methods: {
 		loadBuckets() {
@@ -316,15 +344,17 @@ export default {
 
 			// Only load buckets if we don't already loaded them
 			if (
+				!this.filtersChanged && (
 				this.loadedListId === this.$route.params.listId ||
-				this.loadedListId === parseInt(this.$route.params.listId)
+				this.loadedListId === parseInt(this.$route.params.listId))
 			) {
 				return
 			}
 
 			console.debug(`Loading buckets, loadedListId = ${this.loadedListId}, $route.params =`, this.$route.params)
+			this.filtersChanged = false
 
-			this.$store.dispatch('kanban/loadBucketsForList', this.$route.params.listId)
+			this.$store.dispatch('kanban/loadBucketsForList', {listId: this.$route.params.listId, params: this.params})
 				.catch(e => {
 					this.error(e, this)
 				})
@@ -362,6 +392,7 @@ export default {
 				const taskAfter = typeof this.buckets[bucketIndex].tasks[taskIndex + 1] === 'undefined' ? null : this.buckets[bucketIndex].tasks[taskIndex + 1]
 				const task = this.buckets[bucketIndex].tasks[taskIndex]
 				this.$set(this.taskUpdating, task.id, true)
+				this.oneTaskUpdating = true
 
 				// If there is no task before, our task is the first task in which case we let it have half of the position of the task after it
 				if (taskBefore === null && taskAfter !== null) {
@@ -384,10 +415,13 @@ export default {
 					})
 					.finally(() => {
 						this.$set(this.taskUpdating, task.id, false)
+						this.oneTaskUpdating = false
 					})
 			}
 		},
 		markTaskAsDone(task) {
+			this.oneTaskUpdating = true
+			this.$set(this.taskUpdating, task.id, true)
 			task.done = !task.done
 			this.$store.dispatch('tasks/update', task)
 				.catch(e => {
@@ -395,6 +429,7 @@ export default {
 				})
 				.finally(() => {
 					this.$set(this.taskUpdating, task.id, false)
+					this.oneTaskUpdating = false
 				})
 		},
 		getTaskPayload(bucketId) {

src/views/list/views/List.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="{ 'is-loading': taskCollectionService.loading}" class="loader-container is-max-width-desktop">
-		<div class="filter-container">
+		<div class="filter-container" v-if="list.isSavedFilter && !list.isSavedFilter()">
 			<div class="items">
 				<div class="search">
 					<div :class="{ 'hidden': !showTaskSearch }" class="field has-addons">

src/views/migrator/MigrateService.vue

@@ -33,6 +33,14 @@ export default {
 				this.name = 'Todoist'
 				this.identifier = 'todoist'
 				break
+			case 'trello':
+				this.name = 'Trello'
+				this.identifier = 'trello'
+				break
+			case 'microsoft-todo':
+				this.name = 'Microsoft Todo'
+				this.identifier = 'microsoft-todo'
+				break
 			default:
 				router.push({name: '404'})
 		}

src/views/tasks/ShowTasks.vue

@@ -29,7 +29,7 @@
 				v-model="cEndDate"
 			/>
 		</h3>
-		<div>
+		<div v-if="!showAll">
 			<a @click="setDatesToNextWeek()" class="button is-primary is-outlined noshadow mr-2">Next Week</a>
 			<a @click="setDatesToNextMonth()" class="button is-primary is-outlined noshadow">Next Month</a>
 		</div>

src/views/tasks/TaskDetailView.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="{ 'is-loading': taskService.loading}" class="loader-container task-view-container">
 		<div class="task-view">
-			<heading v-model="task"/>
+			<heading v-model="task" :can-write="canWrite"/>
 			<h6 class="subtitle" v-if="parent && parent.namespace && parent.list">
 				{{ parent.namespace.title }} >
 				<router-link :to="{ name: listViewName, params: { listId: parent.list.id } }">
@@ -47,18 +47,14 @@
 								Due Date
 							</div>
 							<div class="date-input">
-								<flat-pickr
-									:class="{ 'disabled': taskService.loading}"
-									:config="flatPickerConfig"
+								<datepicker
+									v-model="task.dueDate"
+									@close-on-change="() => saveTask()"
+									choose-date-label="Click here to set a due date"
 									:disabled="taskService.loading || !canWrite"
-									@on-close="() => saveTask()"
-									class="input"
-									placeholder="Click here to set a due date"
 									ref="dueDate"
-									v-model="dueDate"
-								>
-								</flat-pickr>
-								<a @click="() => {dueDate = task.dueDate = null;saveTask()}" v-if="dueDate && canWrite">
+									/>
+								<a @click="() => {task.dueDate = null;saveTask()}" v-if="task.dueDate && canWrite" class="remove">
 									<span class="icon is-small">
 										<icon icon="times"></icon>
 									</span>
@@ -84,18 +80,14 @@
 								Start Date
 							</div>
 							<div class="date-input">
-								<flat-pickr
-									:class="{ 'disabled': taskService.loading}"
-									:config="flatPickerConfig"
-									:disabled="taskService.loading || !canWrite"
-									@on-close="() => saveTask()"
-									class="input"
-									placeholder="Click here to set a start date"
-									ref="startDate"
+								<datepicker
 									v-model="task.startDate"
-								>
-								</flat-pickr>
-								<a @click="() => {task.startDate = null;saveTask()}" v-if="task.startDate && canWrite">
+									@close-on-change="() => saveTask()"
+									choose-date-label="Click here to set a start date"
+									:disabled="taskService.loading || !canWrite"
+									ref="startDate"
+								/>
+								<a @click="() => {task.startDate = null;saveTask()}" v-if="task.startDate && canWrite" class="remove">
 									<span class="icon is-small">
 										<icon icon="times"></icon>
 									</span>
@@ -109,18 +101,14 @@
 								End Date
 							</div>
 							<div class="date-input">
-								<flat-pickr
-									:class="{ 'disabled': taskService.loading}"
-									:config="flatPickerConfig"
-									:disabled="taskService.loading || !canWrite"
-									@on-close="() => saveTask()"
-									class="input"
-									placeholder="Click here to set an end date"
-									ref="endDate"
+								<datepicker
 									v-model="task.endDate"
-								>
-								</flat-pickr>
-								<a @click="() => {task.endDate = null;saveTask()}" v-if="task.endDate && canWrite">
+									@close-on-change="() => saveTask()"
+									choose-date-label="Click here to set an end date"
+									:disabled="taskService.loading || !canWrite"
+									ref="endDate"
+								/>
+								<a @click="() => {task.endDate = null;saveTask()}" v-if="task.endDate && canWrite" class="remove">
 									<span class="icon is-small">
 										<icon icon="times"></icon>
 									</span>
@@ -329,6 +317,10 @@
 							<!-- Computed properties to show the actual date every time it gets updated -->
 							Updated <span v-tooltip="updatedFormatted">{{ updatedSince }}</span>
 						</template>
+						<template v-if="task.done">
+							<br/>
+							Done  <span v-tooltip="doneFormatted">{{ doneSince }}</span>
+						</template>
 					</p>
 				</div>
 			</div>
@@ -356,9 +348,6 @@ import relationKinds from '../../models/relationKinds.json'
 import priorites from '../../models/priorities.json'
 import rights from '../../models/rights.json'
 
-import flatPickr from 'vue-flatpickr-component'
-import 'flatpickr/dist/flatpickr.css'
-
 import PrioritySelect from '../../components/tasks/partials/prioritySelect'
 import PercentDoneSelect from '../../components/tasks/partials/percentDoneSelect'
 import EditLabels from '../../components/tasks/partials/editLabels'
@@ -368,16 +357,17 @@ import RelatedTasks from '../../components/tasks/partials/relatedTasks'
 import RepeatAfter from '../../components/tasks/partials/repeatAfter'
 import Reminders from '../../components/tasks/partials/reminders'
 import Comments from '../../components/tasks/partials/comments'
-import router from '../../router'
 import ListSearch from '../../components/tasks/partials/listSearch'
 import description from '@/components/tasks/partials/description'
 import ColorPicker from '../../components/input/colorPicker'
 import attachmentUpload from '../../components/tasks/mixins/attachmentUpload'
 import heading from '@/components/tasks/partials/heading'
+import Datepicker from '@/components/input/datepicker'
 
 export default {
 	name: 'TaskDetailView',
 	components: {
+		Datepicker,
 		ColorPicker,
 		ListSearch,
 		Reminders,
@@ -389,7 +379,6 @@ export default {
 		PercentDoneSelect,
 		PrioritySelect,
 		Comments,
-		flatPickr,
 		description,
 		heading,
 	},
@@ -402,9 +391,6 @@ export default {
 			taskService: TaskService,
 			task: TaskModel,
 			relationKinds: relationKinds,
-			// The due date is a seperate property in the task to prevent flatpickr from modifying the task model
-			// in store right after updating it from the api resulting in the wrong due date format being saved in the task.
-			dueDate: null,
 			// We doubled the task color property here because verte does not have a real change property, leading
 			// to the color property change being triggered when the # is removed from it, leading to an update,
 			// which leads in turn to a change... This creates an infinite loop in which the task is updated, changed,
@@ -417,17 +403,7 @@ export default {
 			descriptionChanged: false,
 			listViewName: 'list.list',
 
-			descriptionSaving: false,
-			descriptionRecentlySaved: false,
-
 			priorities: priorites,
-			flatPickerConfig: {
-				altFormat: 'j M Y H:i',
-				altInput: true,
-				dateFormat: 'Y-m-d H:i',
-				enableTime: true,
-				time_24hr: true,
-			},
 			activeFields: {
 				assignees: false,
 				priority: false,
@@ -486,6 +462,12 @@ export default {
 		updatedFormatted() {
 			return this.formatDate(this.task.updated)
 		},
+		doneSince() {
+			return this.formatDateSince(this.task.doneAt)
+		},
+		doneFormatted() {
+			return this.formatDate(this.task.doneAt)
+		},
 	},
 	methods: {
 		loadTask() {
@@ -504,7 +486,6 @@ export default {
 		},
 		setActiveFields() {
 
-			this.dueDate = this.task.dueDate ? this.task.dueDate : null
 			this.task.startDate = this.task.startDate ? this.task.startDate : null
 			this.task.endDate = this.task.endDate ? this.task.endDate : null
 
@@ -530,7 +511,6 @@ export default {
 			// We're doing the whole update in a nextTick because sometimes race conditions can occur when
 			// setting the due date on mobile which leads to no due date change being saved.
 			this.$nextTick(() => {
-				this.task.dueDate = this.dueDate
 				this.task.hexColor = this.taskColor
 
 				// If no end date is being set, but a start date and due date,
@@ -574,7 +554,7 @@ export default {
 			this.$store.dispatch('tasks/delete', this.task)
 				.then(() => {
 					this.success({message: 'The task has been deleted successfully.'}, this)
-					router.back()
+					this.$router.push({name: 'list.index', params: {listId: this.task.listId}})
 				})
 				.catch(e => {
 					this.error(e, this)

src/views/user/Login.vue

@@ -8,7 +8,7 @@
 			<api-config/>
 			<form @submit.prevent="submit" id="loginform" v-if="localAuthEnabled">
 				<div class="field">
-					<label class="label" for="username">Username</label>
+					<label class="label" for="username">Username Or Email Address</label>
 					<div class="control">
 						<input
 							class="input" id="username"
@@ -72,7 +72,7 @@
 				</div>
 			</form>
 
-			<div v-if="openidConnect.enabled && openidConnect.providers.length > 0" class="mt-4">
+			<div v-if="openidConnect.enabled && openidConnect.providers && openidConnect.providers.length > 0" class="mt-4">
 				<a @click="redirectToProvider(p)" v-for="(p, k) in openidConnect.providers" :key="k" class="button is-fullwidth">
 					Log in with {{ p.name }}
 				</a>
@@ -165,7 +165,7 @@ export default {
 			const state = Math.random().toString(36).substring(2, 24)
 			localStorage.setItem('state', state)
 
-			window.location.href = `${provider.authUrl}?client_id=${provider.clientId}&redirect_uri=${this.openidConnect.redirectUrl}${provider.key}&response_type=code&scope=&state=${state}`
+			window.location.href = `${provider.authUrl}?client_id=${provider.clientId}&redirect_uri=${this.openidConnect.redirectUrl}${provider.key}&response_type=code&scope=openid&state=${state}`
 		},
 	},
 }

src/views/user/Register.vue

@@ -62,7 +62,7 @@
 
 				<div class="field is-grouped">
 					<div class="control">
-						<button class="button is-primary" type="submit" v-bind:class="{ 'is-loading': loading}">
+						<button class="button is-primary" type="submit" :class="{ 'is-loading': loading}" id="register-submit">
 							Register
 						</button>
 						<router-link :to="{ name: 'user.login' }" class="button">Login</router-link>

src/views/user/Settings.vue

@@ -106,30 +106,36 @@
 			</div>
 		</div>
 
-		<!-- Name -->
-		<div class="card">
+		<!-- General -->
+		<div class="card update-name">
 			<header class="card-header">
 				<p class="card-header-title">
-					Update your name
+					General Settings
 				</p>
 			</header>
 			<div class="card-content">
 				<div class="content">
-						<div class="field">
-							<label class="label" for="newEmail">Name</label>
-							<div class="control">
-								<input
-									@keyup.enter="updateName"
-									class="input"
-									id="newEmail"
-									placeholder="The new name"
-									type="text"
-									v-model="name"/>
-							</div>
+					<div class="field">
+						<label class="label" for="newName">Name</label>
+						<div class="control">
+							<input
+								@keyup.enter="updateSettings"
+								class="input"
+								id="newName"
+								placeholder="The new name"
+								type="text"
+								v-model="settings.name"/>
 						</div>
+					</div>
+					<div class="field">
+						<label class="checkbox">
+							<input type="checkbox" v-model="settings.emailRemindersEnabled"/>
+							Send me Reminders for tasks via Email
+						</label>
+					</div>
 
 					<div class="bigbuttons">
-						<button :class="{ 'is-loading': userNameService.loading}" @click="updateName()"
+						<button :class="{ 'is-loading': userSettingsService.loading}" @click="updateSettings()"
 								class="button is-primary is-fullwidth">
 							Save
 						</button>
@@ -217,7 +223,7 @@
 			<div class="card-content">
 				<router-link
 					:to="{name: 'migrate.start'}"
-					class="button is-primary is-right noshadow is-outlined"
+					class="button is-primary"
 					v-if="migratorsEnabled"
 				>
 					Import your data into Vikunja
@@ -266,8 +272,8 @@ import EmailUpdateService from '../../services/emailUpdate'
 import EmailUpdateModel from '../../models/emailUpdate'
 import TotpModel from '../../models/totp'
 import TotpService from '../../services/totp'
-import UserNameService from '../../services/userName'
-import UserNameModel from '../../models/userName'
+import UserSettingsService from '../../services/userSettings'
+import UserSettingsModel from '../../models/userSettings'
 
 import {mapState} from 'vuex'
 
@@ -295,8 +301,8 @@ export default {
 
 			caldavUrl: '',
 
-			name: '',
-			userNameService: UserNameService,
+			settings: UserSettingsModel,
+			userSettingsService: UserSettingsService,
 		}
 	},
 	components: {
@@ -312,8 +318,11 @@ export default {
 		this.totpService = new TotpService()
 		this.totp = new TotpModel()
 
-		this.userNameService = new UserNameService()
-		this.name = this.$store.state.auth.info.name
+		this.userSettingsService = new UserSettingsService()
+		this.settings = new UserSettingsModel({
+			name: this.$store.state.auth.info.name,
+			emailRemindersEnabled: this.$store.state.auth.info.emailRemindersEnabled ?? false,
+		})
 
 		this.totpStatus()
 		this.buildCaldavUrl()
@@ -399,12 +408,10 @@ export default {
 				})
 				.catch(e => this.error(e, this))
 		},
-		updateName() {
-			const name = new UserNameModel({name: this.name})
-
-			this.userNameService.update(name)
+		updateSettings() {
+			this.userSettingsService.update(this.settings)
 				.then(() => {
-					this.$store.commit('auth/setUserName', this.name)
+					this.$store.commit('auth/setUserSettings', this.settings)
 					this.success({message: 'The name was successfully changed.'}, this)
 				})
 				.catch(e => this.error(e, this))