Add 'webapp/' from commit '3bb5ed17be8cd990fad40b4c244cbc8076838392'

git-subtree-dir: webapp
git-subtree-mainline: 7ebd80d792
git-subtree-split: 3bb5ed17be

webapp/.env

@@ -0,0 +1 @@
+EXTEND_ESLINT=true

webapp/.eslintrc.js

@@ -0,0 +1,113 @@
+module.exports = {
+  "env": {
+    "shared-node-browser": true,
+    "es6": true,
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect",
+    },
+  },
+  "plugins": [
+    "@typescript-eslint",
+  ],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/member-delimiter-style": ["error", {
+      "multiline": {
+        "delimiter": "semi",
+        "requireLast": true
+      },
+      "singleline": {
+        "delimiter": "comma",
+        "requireLast": false
+      }
+    }],
+    "@typescript-eslint/no-unused-vars": ["warn", {
+      "vars": "all",
+      "args": "all",
+      "ignoreRestSiblings": true,
+      "argsIgnorePattern": "^_",
+    }],
+
+    "react/display-name": "off",
+    "react/no-unescaped-entities": "off",
+    "react/jsx-tag-spacing": ["error", {
+      "closingSlash": "never",
+      "beforeSelfClosing": "always",
+      "afterOpening": "never",
+      "beforeClosing": "never"
+    }],
+    "react/jsx-boolean-value": ["error", "never"],
+    "react/jsx-curly-spacing": ["error", { "when": "never", "children": true }],
+    "react/jsx-equals-spacing": ["error", "never"],
+    "react/jsx-indent-props": ["error", 2],
+    "react/jsx-curly-brace-presence": ["error", "never"],
+    "react/jsx-key": ["error", { "checkFragmentShorthand": true }],
+    "react/jsx-indent": ["error", 2, { checkAttributes: true, indentLogicalExpressions: true }],
+    "react/void-dom-elements-no-children": ["error"],
+    "react/no-unknown-property": ["error"],
+
+    "quotes": "off",
+    "@typescript-eslint/quotes": ["error", "double", { "allowTemplateLiterals": true, "avoidEscape": true }],
+    "semi": "off",
+    "@typescript-eslint/semi": ["error", "always", { "omitLastInOneLineBlock": true }],
+    "comma-dangle": ["error", {
+      "arrays": "always-multiline",
+      "objects": "always-multiline",
+      "imports": "always-multiline",
+      "exports": "always-multiline",
+      "functions": "never"
+    }],
+    "comma-spacing": ["error"],
+    "eqeqeq": ["error", "smart"],
+    "indent": "off",
+    "@typescript-eslint/indent": ["error", 2, {
+      "SwitchCase": 1,
+    }],
+    "no-multi-spaces": "error",
+    "object-curly-spacing": ["error", "always"],
+    "arrow-parens": "error",
+    "arrow-spacing": "error",
+    "key-spacing": "error",
+    "keyword-spacing": "error",
+    "func-call-spacing": "off",
+    "@typescript-eslint/func-call-spacing": ["error"],
+    "space-before-function-paren": ["error", {
+        "anonymous": "always",
+        "named": "never",
+        "asyncArrow": "always"
+    }],
+    "space-in-parens": ["error", "never"],
+    "space-before-blocks": "error",
+    "curly": ["error", "all"],
+    "space-infix-ops": "error",
+    "consistent-return": "error",
+    "jsx-quotes": ["error"],
+    "array-bracket-spacing": "error",
+    "brace-style": "off",
+    "@typescript-eslint/brace-style": [
+      "error",
+      "1tbs",
+      { allowSingleLine: true },
+    ],
+    "no-useless-constructor": "off",
+    "@typescript-eslint/no-useless-constructor": "warn",
+  }
+};

webapp/.github/FUNDING.yml

@@ -0,0 +1,2 @@
+github: etesync
+custom: https://www.etesync.com/contribute/#donate

webapp/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.*.swp
+Session.vim
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

webapp/AUTHORS

@@ -0,0 +1,6 @@
+Tom Hacohen <tom@stosb.com>
+Tal Leibman <leibman2@gmail.com>
+rugk <rugk@posteo.de>
+Andrew P Maney <amaney@usc.edu>
+Bryce McNab <betsythefc@users.noreply.github.com>
+Claus Niesen <cniesen@users.noreply.github.com>

webapp/LICENSE

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ 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
+
+  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.
+
+  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.
+
+  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.
+
+  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.
+
+  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.
+
+  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.
+
+  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 precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "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.
+
+  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.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  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.
+
+  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.
+
+  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.
+
+  1. Source Code.
+
+  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 "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.
+
+  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.
+
+  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.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  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.
+
+  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.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  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.
+
+  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.
+
+  4. Conveying Verbatim Copies.
+
+  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.
+
+  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/>.

webapp/README.md

@@ -0,0 +1,55 @@
+<p align="center">
+  <img width="120" src="src/images/logo.svg" />
+  <h1 align="center">EteSync - Encrypt Everything</h1>
+</p>
+
+The EteSync Web App - Use EteSync from the browser!
+
+
+![GitHub tag](https://img.shields.io/github/tag/etesync/etesync-web.svg)
+[![Chat on freenode](https://img.shields.io/badge/irc.freenode.net-%23EteSync-blue.svg)](https://webchat.freenode.net/?channels=#etesync)
+
+For notes, please refer to [the EteSync Notes](https://github.com/etesync/etesync-notes/) repository.
+
+# Usage
+
+A live instance is available on: https://pim.etesync.com
+
+Please be advised that while it's probably safe enough to use the hosted client
+in many cases, it's generally not preferable. It's recommended that you use signed
+releases which's signature you manually verify and are run locally!
+
+More info is available on the [FAQ](https://www.etesync.com/faq/#web-client).
+
+## Running your own
+
+You can either self-host your own client to be served from your own server, or
+better yet, just run an instance locally.
+
+You can get the latest version of the web client from https://pim.etesync.com/etesync-web.tgz. This
+file is automatically generated on each deploy and is exactly the same as the delpoyed version.
+After fetching this file you need to extract it by e.g. running `tar -xzf etesync-web.tgz`, and then
+you can serve the files using your favourite web server. Please keep in mind that opening the HTML files
+directly in the browser is not supported.
+
+If you are just serving the app locally, you could, for example, use the python built-in web server by
+running `python3 -m http.server` from inside the extracted `etesync-web` directory. If you plan on
+serving it from a server, please use a proper web server such as nginx.
+
+## Building it yourself
+
+Before you can build the web app from source, you need to make sure you have `yarn` install.
+
+Then clone this repository `yarn`, run `yarn` and wait until all of the deps are installed.
+
+Then it's recommended you run `yarn build` to build a production ready client you should serve
+(even if run locally!) and then just serve the `build` directory from a web server.
+
+The URL of the EteSync API the web app connects to defaults to `api.etebase.com`, but can be changed on
+the login page. You can change this default by setting the environment variable `REACT_APP_DEFAULT_API_PATH`
+during the build. This can be useful for self-hosting. You can set the default URL to the address
+of your self-hosted EteSync server so you don't have to change the address for every login.
+
+### Serving from a subdirectory
+
+In order to run your own version and serve it from a subdirectory rather than the top level of the domain, add `"homepage": "/subdir-name"` to the `package.json` file.

webapp/deploy.sh

@@ -0,0 +1,18 @@
+set -e
+
+SSH_HOST=client.etesync.com
+SSH_PORT=22
+SSH_USER=etesync
+SSH_TARGET_DIR=sites/pim.etesync.com
+
+OUTPUTDIR=./build
+
+export INLINE_RUNTIME_CHUNK=false
+
+yarn build
+
+sed -i "s#\(<script type=\"text/javascript\"\)#\1 integrity=\"sha384-$(shasum -b -a 384 build/static/js/main.*.js | xxd -r -p | base64 -w0)\" crossorigin=\"anonymous\"#" build/index.html
+./page-signer.js build/index.html build/index.html
+# Create a source tarball
+bsdtar -czf build/etesync-web.tgz --exclude build/etesync-web.tgz -s /build/etesync-web/ build/*
+rsync -e "ssh -p ${SSH_PORT}" -P --delete -rvc -zz ${OUTPUTDIR}/ ${SSH_USER}@${SSH_HOST}:${SSH_TARGET_DIR}

webapp/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "etesync-web",
+  "version": "0.6.0",
+  "private": true,
+  "dependencies": {
+    "@date-io/moment": "^1.x",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@material-ui/pickers": "^3.2.10",
+    "@material-ui/styles": "^4.10.0",
+    "etebase": "^0.41.0",
+    "fuse.js": "^5.0.9-beta",
+    "ical.js": "^1.4.0",
+    "immutable": "^4.0.0-rc.12",
+    "localforage": "^1.9.0",
+    "memoizee": "^0.4.14",
+    "moment": "^2.27.0",
+    "react": "^16.13.1",
+    "react-big-calendar": "^0.26.0",
+    "react-dom": "^16.13.1",
+    "react-dropzone": "^10.0.4",
+    "react-redux": "^7.2.1",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "^3.4.1",
+    "react-transition-group": "^4.3.0",
+    "react-virtualized": "^9.21.2",
+    "redux": "^4.0.5",
+    "redux-actions": "^2.6.5",
+    "redux-logger": "^3.0.6",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.3.0",
+    "reselect": "^4.0.0",
+    "uuid": "^3.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
+    "eject": "react-scripts eject"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@types/color": "^3.0.1",
+    "@types/jest": "^24.0.4",
+    "@types/memoizee": "^0.4.4",
+    "@types/node": "^11.9.3",
+    "@types/react": "^16.9.0",
+    "@types/react-big-calendar": "^0.22.3",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.9",
+    "@types/react-router": "^5.1.8",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/react-virtualized": "^9.21.8",
+    "@types/redux-actions": "^2.6.1",
+    "@types/redux-logger": "^3.0.8",
+    "@types/urijs": "^1.15.38",
+    "@types/uuid": "^3.4.3",
+    "typescript": "~3.9.7"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

webapp/public/index.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<!--!
+  %%%SIGNED_PAGES_PGP_SIGNATURE%%%
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#ffc107">
+
+    <meta name="google" content="notranslate">
+    <meta name="referrer" content="no-referrer">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="EteSync">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="apple-touch-icon" size="192x192" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>EteSync - Secure Data Sync</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

webapp/public/manifest.json

@@ -0,0 +1,47 @@
+{
+  "short_name": "EteSync",
+  "name": "EteSync - Secure Data Sync",
+  "description": "Secure, end-to-end encrypted, and privacy respecting sync for your contacts, calendars, tasks, and notes.",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ],
+  "start_url": "https://pim.etesync.com",
+  "display": "standalone",
+  "theme_color": "#ffc107",
+  "background_color": "#03a9f4",
+  "categories": [
+    "productivity",
+    "utilities"
+  ],
+  "related_applications": [
+    {
+      "platform": "play",
+      "url": "https://play.google.com/store/apps/details?id=com.etesync.syncadapter",
+      "id": "com.etesync.syncadapter"
+    }, {
+      "platform": "itunes",
+      "url": "https://apps.apple.com/us/app/apple-store/id1489574285"
+    }, {
+      "platform": "f-droid",
+      "url": "https://f-droid.org/packages/com.etesync.syncadapter/",
+      "id": "com.etesync.syncadapter"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Calendar",
+      "url": "/pim/events"
+    }, {
+      "name": "Tasks",
+      "url": "/pim/tasks"
+    }, {
+      "name": "Address Book",
+      "url": "/pim/contacts"
+    }
+  ]
+}

webapp/setenv

@@ -0,0 +1 @@
+export PATH="${HOME}/.npm-packages/bin:${PATH}"

webapp/src/App.css

@@ -0,0 +1,29 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+}
+
+.App-header {
+  background-color: #222;
+  height: 150px;
+  padding: 20px;
+  color: white;
+}
+
+.App-intro {
+  font-size: large;
+}
+
+.App-drawer-header {
+  background-color: #555;
+  padding: 10px;
+}
+
+.App-drawer-logo {
+  width: 60px;
+  margin-bottom: 10px;
+}

webapp/src/App.test.tsx

@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import App from "./App";
+
+import { store } from "./store";
+
+it("renders without crashing", () => {
+  const div = document.createElement("div");
+  ReactDOM.render(
+    <Provider store={store}>
+      <App />
+    </Provider>
+    , div);
+});

webapp/src/App.tsx

@@ -0,0 +1,265 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { BrowserRouter } from "react-router-dom";
+import { MuiThemeProvider as ThemeProvider, createMuiTheme } from "@material-ui/core/styles"; // v1.x
+import amber from "@material-ui/core/colors/amber";
+import lightBlue from "@material-ui/core/colors/lightBlue";
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Drawer from "@material-ui/core/Drawer";
+import IconButton from "@material-ui/core/IconButton";
+import Badge from "@material-ui/core/Badge";
+
+import NavigationMenu from "@material-ui/icons/Menu";
+import NavigationRefresh from "@material-ui/icons/Refresh";
+import ErrorsIcon from "@material-ui/icons/Error";
+
+import "react-virtualized/styles.css"; // only needs to be imported once
+
+import "./App.css";
+
+import ConfirmationDialog from "./widgets/ConfirmationDialog";
+import { List, ListItem } from "./widgets/List";
+import withSpin from "./widgets/withSpin";
+import ErrorBoundary from "./components/ErrorBoundary";
+import SideMenu from "./SideMenu";
+import { RouteResolver } from "./routes";
+
+import * as store from "./store";
+import * as actions from "./store/actions";
+
+import { useCredentials } from "./credentials";
+import { SyncManager } from "./sync/SyncManager";
+import MainRouter from "./MainRouter";
+
+export const routeResolver = new RouteResolver({
+  home: "",
+  pim: {
+    contacts: {
+      _id: {
+        _base: ":itemUid",
+        edit: {
+          contact: "contact",
+          group: "group",
+        },
+        log: "log",
+      },
+      new: {
+        contact: "contact",
+        group: "group",
+      },
+    },
+    events: {
+      _id: {
+        _base: ":itemUid",
+        edit: "edit",
+        duplicate: "duplicate",
+        log: "log",
+      },
+      new: "new",
+    },
+    tasks: {
+      _id: {
+        _base: ":itemUid",
+        edit: "edit",
+        log: "log",
+      },
+      new: "new",
+    },
+  },
+  collections: {
+    _id: {
+      _base: ":colUid",
+      edit: "edit",
+      items: {
+        _id: {
+          _base: ":itemUid",
+        },
+      },
+      entries: {
+        _id: {
+          _base: ":entryUid",
+        },
+      },
+      members: {
+      },
+    },
+    invitations: {
+      incoming: {
+      },
+      outgoing: {
+      },
+    },
+    new: "new",
+    import: "import",
+  },
+  login: {
+  },
+  signup: {
+  },
+  wizard: {
+  },
+  settings: {
+  },
+  debug: {
+  },
+});
+
+interface AppBarPropsType {
+  toggleDrawerIcon: any;
+  iconElementRight: any;
+}
+
+function AppBarWitHistory(props: AppBarPropsType) {
+  const {
+    toggleDrawerIcon,
+    iconElementRight,
+    ...rest
+  } = props;
+  return (
+    <AppBar
+      position="static"
+      {...rest}
+    >
+      <Toolbar>
+        <div style={{ marginLeft: -12, marginRight: 20 }}>
+          {toggleDrawerIcon}
+        </div>
+
+        <div style={{ flexGrow: 1, fontSize: "1.25em" }} id="appbar-title" />
+
+        <div style={{ marginRight: -12 }} id="appbar-buttons">
+          {iconElementRight}
+        </div>
+      </Toolbar>
+    </AppBar>
+  );
+}
+
+const IconRefreshWithSpin = withSpin(NavigationRefresh);
+
+export default function App() {
+  const [drawerOpen, setDrawerOpen] = React.useState(false);
+  const [errorsDialog, setErrorsDialog] = React.useState(false);
+  const dispatch = useDispatch();
+  const etebase = useCredentials();
+  const darkMode = useSelector((state: store.StoreState) => state.settings.darkMode);
+  const fetchCount = useSelector((state: store.StoreState) => state.fetchCount);
+  const errors = useSelector((state: store.StoreState) => state.errors);
+
+  async function refresh() {
+    const syncManager = SyncManager.getManager(etebase!);
+    const sync = syncManager.sync();
+    dispatch(actions.performSync(sync));
+    await sync;
+  }
+
+  function autoRefresh() {
+    if (navigator.onLine && etebase) {
+      refresh();
+    }
+  }
+
+  React.useEffect(() => {
+    const interval = 5 * 60 * 1000;
+    const id = setInterval(autoRefresh, interval);
+    return () => clearInterval(id);
+  }, []);
+
+  function toggleDrawer() {
+    setDrawerOpen(!drawerOpen);
+  }
+
+  function closeDrawer() {
+    setDrawerOpen(false);
+  }
+
+  const credentials = etebase ?? null;
+
+  const fetching = fetchCount > 0;
+
+  const muiTheme = createMuiTheme({
+    palette: {
+      type: darkMode ? "dark" : undefined,
+      primary: amber,
+      secondary: {
+        light: lightBlue.A200,
+        main: lightBlue.A400,
+        dark: lightBlue.A700,
+        contrastText: "#fff",
+      },
+    },
+  });
+
+  const styles: {[key: string]: React.CSSProperties} = {
+    main: {
+      backgroundColor: muiTheme.palette.background.default,
+      color: muiTheme.palette.text.primary,
+      flexGrow: 1,
+      display: "flex",
+      flexDirection: "column",
+    },
+  };
+
+  return (
+    <ThemeProvider theme={muiTheme}>
+      <BrowserRouter>
+        <div style={styles.main} className={darkMode ? "theme-dark" : "theme-light"}>
+          <AppBarWitHistory
+            toggleDrawerIcon={<IconButton onClick={toggleDrawer}><NavigationMenu /></IconButton>}
+            iconElementRight={
+              <>
+                {(errors.size > 0) && (
+                  <IconButton onClick={() => setErrorsDialog(true)} title="Errors">
+                    <Badge badgeContent={errors.size} color="error">
+                      <ErrorsIcon />
+                    </Badge>
+                  </IconButton>
+                )}
+                <IconButton disabled={!credentials || fetching} onClick={refresh} title="Refresh">
+                  <IconRefreshWithSpin spin={fetching} />
+                </IconButton>
+              </>
+            }
+          />
+          <ConfirmationDialog
+            title="Sync Errors"
+            open={errorsDialog}
+            labelOk="OK"
+            onCancel={() => setErrorsDialog(false)}
+            onOk={() => setErrorsDialog(false)}
+          >
+            <h4>
+              Please contact developers if any of the errors below persist.
+            </h4>
+            <List>
+              {errors.map((error, index) => (
+                <ListItem
+                  key={index}
+                  style={{ height: "unset" }}
+                  onClick={() => (window as any).navigator.clipboard.writeText(`${error.message}\n\n${error.stack}`)}
+                >
+                  {error.message}
+                </ListItem>
+              ))}
+            </List>
+          </ConfirmationDialog>
+
+          <Drawer
+            open={drawerOpen}
+            onClose={toggleDrawer}
+          >
+            <SideMenu onCloseDrawerRequest={closeDrawer} />
+          </Drawer>
+
+          <ErrorBoundary>
+            <MainRouter />
+          </ErrorBoundary>
+        </div>
+      </BrowserRouter>
+    </ThemeProvider>
+  );
+}

webapp/src/Calendars/Calendar.css

@@ -0,0 +1,9 @@
+/* Hack the layout on mobile. */
+@media (max-width: 767px) {
+  .rbc-toolbar {
+    flex-direction: column;
+  }
+  .rbc-toolbar-label {
+    margin: 10px 0;
+  }
+}

webapp/src/Calendars/Calendar.tsx

@@ -0,0 +1,118 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { Calendar as BigCalendar, momentLocalizer, View } from "react-big-calendar";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+import moment from "moment";
+import * as ICAL from "ical.js";
+import { store } from "../store";
+import { appendError } from "../store/actions";
+
+import { EventType } from "../pim-types";
+
+import "./Calendar.css";
+
+const calendarLocalizer = momentLocalizer(moment);
+
+const MAX_RECURRENCE_DATE = ICAL.Time.now();
+MAX_RECURRENCE_DATE.adjust(800, 0, 0, 0);
+
+function eventPropGetter(event: EventType) {
+  return {
+    style: {
+      backgroundColor: event.color,
+    },
+  };
+}
+
+function agendaHeaderFormat(date: {start: Date, end: Date}, _culture: string, localizer: any) {
+  const format = "ll";
+  return localizer.format(date.start, format) + " - " + localizer.format(date.end, format);
+}
+
+interface PropsType {
+  entries: EventType[];
+  onItemClick: (contact: EventType) => void;
+  onSlotClick?: (start: Date, end: Date) => void;
+}
+
+class Calendar extends React.PureComponent<PropsType> {
+  public state: {
+    currentDate?: Date;
+    view?: View;
+  };
+
+  constructor(props: any) {
+    super(props);
+    this.state = {};
+
+    this.onNavigate = this.onNavigate.bind(this);
+    this.onView = this.onView.bind(this);
+    this.slotClicked = this.slotClicked.bind(this);
+  }
+
+  public render() {
+    const entries = [] as EventType[];
+    this.props.entries.forEach((event) => {
+      entries.push(event);
+
+      try {
+        if (event.isRecurring()) {
+          const recur = event.iterator();
+
+          let next = recur.next(); // Skip the first one
+          while ((next = recur.next())) {
+            if (next.compare(MAX_RECURRENCE_DATE) > 0) {
+              break;
+            }
+
+            const shift = next.subtractDateTz(event.startDate);
+            const ev = event.clone();
+            ev.startDate.addDuration(shift);
+            ev.endDate.addDuration(shift);
+            entries.push(ev);
+          }
+        }
+      } catch (e) {
+        store.dispatch(appendError(e));
+      }
+    });
+
+    return (
+      <div style={{ width: "100%", height: "calc(100vh - 230px)", minHeight: 500 }}>
+        <BigCalendar
+          defaultDate={new Date()}
+          scrollToTime={new Date(1970, 1, 1, 8)}
+          localizer={calendarLocalizer}
+          events={entries}
+          selectable
+          onSelectEvent={this.props.onItemClick as any}
+          onSelectSlot={this.slotClicked as any}
+          formats={{ agendaHeaderFormat: agendaHeaderFormat as any }}
+          eventPropGetter={eventPropGetter}
+          date={this.state.currentDate}
+          onNavigate={this.onNavigate}
+          view={this.state.view}
+          onView={this.onView}
+        />
+      </div>
+    );
+  }
+
+  private onNavigate(currentDate: Date) {
+    this.setState({ currentDate });
+  }
+
+  private onView(view: string) {
+    this.setState({ view });
+  }
+
+  private slotClicked(slotInfo: {start: Date, end: Date}) {
+    if (this.props.onSlotClick) {
+      this.props.onSlotClick(slotInfo.start, slotInfo.end);
+    }
+  }
+}
+
+export default Calendar;

webapp/src/Calendars/Event.tsx

@@ -0,0 +1,47 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import PimItemHeader from "../components/PimItemHeader";
+
+import { formatDateRange, formatOurTimezoneOffset } from "../helpers";
+
+import { EventType } from "../pim-types";
+
+class Event extends React.PureComponent {
+  public props: {
+    item?: EventType;
+  };
+
+  public render() {
+    if (this.props.item === undefined) {
+      throw Error("Event should be defined!");
+    }
+
+    const style = {
+      content: {
+        padding: 15,
+      },
+    };
+
+    const timezone = this.props.item.timezone;
+
+    return (
+      <React.Fragment>
+        <PimItemHeader text={this.props.item.summary} backgroundColor={this.props.item.color}>
+          <div>{formatDateRange(this.props.item.startDate, this.props.item.endDate)} {timezone && <small>({formatOurTimezoneOffset()})</small>}</div>
+          <br />
+          <div><u>{this.props.item.location}</u></div>
+        </PimItemHeader>
+        <div style={style.content}>
+          <p style={{ wordWrap: "break-word" }}>{this.props.item.description}</p>
+          {(this.props.item.attendees.length > 0) && (
+            <div>Attendees: {this.props.item.attendees.map((x) => (x.getFirstValue())).join(", ")}</div>)}
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Event;

webapp/src/Calendars/EventEdit.tsx

@@ -0,0 +1,436 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import InputLabel from "@material-ui/core/InputLabel";
+import * as colors from "@material-ui/core/colors";
+
+import IconDelete from "@material-ui/icons/Delete";
+import IconCancel from "@material-ui/icons/Clear";
+import IconSave from "@material-ui/icons/Save";
+
+import DateTimePicker from "../widgets/DateTimePicker";
+
+import ConfirmationDialog from "../widgets/ConfirmationDialog";
+import TimezonePicker from "../widgets/TimezonePicker";
+import Toast from "../widgets/Toast";
+
+import * as uuid from "uuid";
+import * as ICAL from "ical.js";
+
+import { getCurrentTimezone } from "../helpers";
+
+import { EventType, timezoneLoadFromName } from "../pim-types";
+import RRule, { RRuleOptions } from "../widgets/RRule";
+
+import { History } from "history";
+import { CachedCollection } from "../Pim/helpers";
+
+interface PropsType {
+  collections: CachedCollection[];
+  initialCollection?: string;
+  item?: EventType;
+  onSave: (event: EventType, collectionUid: string, originalEvent?: EventType) => Promise<void>;
+  onDelete: (event: EventType, collectionUid: string) => void;
+  onCancel: () => void;
+  history: History;
+  duplicate?: boolean;
+}
+
+export default class EventEdit extends React.PureComponent<PropsType> {
+  public state: {
+    uid: string;
+    title: string;
+    description: string;
+    allDay: boolean;
+    start?: Date;
+    end?: Date;
+    timezone: string | null;
+    rrule?: RRuleOptions;
+    location: string;
+    collectionUid: string;
+
+    error?: string;
+    showDeleteDialog: boolean;
+  };
+
+  constructor(props: PropsType) {
+    super(props);
+    this.state = {
+      uid: "",
+      title: "",
+      allDay: false,
+      location: "",
+      description: "",
+      timezone: null,
+
+      collectionUid: "",
+      showDeleteDialog: false,
+    };
+
+    const locState = this.props.history.location.state as EventType;
+    if (locState) {
+      // FIXME: Hack to determine if all day. Should be passed as a proper state.
+      this.state.allDay = (locState.start &&
+        (locState.start.getHours() === 0) &&
+        (locState.start.getMinutes() === 0) &&
+        (locState.start.getHours() === locState.end.getHours()) &&
+        (locState.start.getMinutes() === locState.end.getMinutes()));
+      this.state.start = (locState.start) ? locState.start : undefined;
+      this.state.end = (locState.end) ? locState.end : undefined;
+    }
+
+    if (this.props.item !== undefined) {
+      const event = this.props.item;
+
+      const allDay = event.startDate.isDate;
+      const endDate = event.endDate.clone();
+
+      if (allDay) {
+        endDate.adjust(-1, 0, 0, 0);
+      }
+
+      if (this.props.duplicate) {
+        this.state.title = event.title ? `Copy of ${event.title}` : "";
+      } else {
+        this.state.uid = event.uid;
+        this.state.title = event.title ? event.title : "";
+      }
+      this.state.allDay = allDay;
+      this.state.start = event.startDate.convertToZone(ICAL.Timezone.localTimezone).toJSDate();
+      this.state.end = endDate.convertToZone(ICAL.Timezone.localTimezone).toJSDate();
+      this.state.location = event.location ? event.location : "";
+      this.state.description = event.description ? event.description : "";
+      this.state.timezone = event.timezone;
+      const rruleProp = this.props.item?.component.getFirstPropertyValue<ICAL.Recur>("rrule");
+      if (rruleProp) {
+        this.state.rrule = rruleProp.toJSON() as any;
+        if (this.state.rrule && rruleProp.until) {
+          this.state.rrule.until = rruleProp.until;
+        }
+      }
+    }
+    if (this.props.duplicate || this.props.item === undefined) {
+      this.state.uid = uuid.v4();
+    }
+
+    this.state.timezone = this.state.timezone || getCurrentTimezone();
+
+    if (props.initialCollection) {
+      this.state.collectionUid = props.initialCollection;
+    } else if (props.collections[0]) {
+      this.state.collectionUid = props.collections[0].collection.uid;
+    }
+
+    this.onSubmit = this.onSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.toggleAllDay = this.toggleAllDay.bind(this);
+    this.onDeleteRequest = this.onDeleteRequest.bind(this);
+    this.toggleRecurring = this.toggleRecurring.bind(this);
+    this.handleRRuleChange = this.handleRRuleChange.bind(this);
+    this.handleCloseToast = this.handleCloseToast.bind(this);
+  }
+
+  public handleChange(name: string, value: string) {
+    this.setState({
+      [name]: value,
+    });
+
+  }
+
+  public handleInputChange(event: React.ChangeEvent<any>) {
+    const name = event.target.name;
+    const value = event.target.value;
+    this.handleChange(name, value);
+  }
+
+  public toggleAllDay() {
+    this.setState({ allDay: !this.state.allDay });
+  }
+  public toggleRecurring() {
+    const value = this.state.rrule ? undefined : { freq: "WEEKLY", interval: 1 };
+    this.setState({ rrule: value });
+  }
+
+
+  public handleRRuleChange(rrule: RRuleOptions): void {
+    this.setState({ rrule: rrule });
+  }
+
+  public handleCloseToast(_event?: React.SyntheticEvent, reason?: string) {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    this.setState({ error: "" });
+  }
+
+  public onSubmit(e: React.FormEvent<any>) {
+    e.preventDefault();
+
+    if ((!this.state.start) || (!this.state.end)) {
+      this.setState({ error: "Both start and end time must be set!" });
+      return;
+    }
+
+    function fromDate(date: Date, allDay: boolean) {
+      const ret = ICAL.Time.fromJSDate(date, false);
+      if (!allDay) {
+        return ret;
+      } else {
+        const data = ret.toJSON();
+        data.isDate = allDay;
+        return ICAL.Time.fromData(data);
+      }
+    }
+
+    const startDate = fromDate(this.state.start, this.state.allDay);
+    const endDate = fromDate(this.state.end, this.state.allDay);
+
+    if (this.state.allDay) {
+      endDate.adjust(1, 0, 0, 0);
+    }
+
+    if (startDate.compare(endDate) >= 0) {
+      this.setState({ error: "End time must be later than start time!" });
+      return;
+    }
+
+    const event = (this.props.item && !this.props.duplicate) ?
+      this.props.item.clone()
+      :
+      new EventType()
+      ;
+
+    event.uid = this.state.uid;
+    event.summary = this.state.title;
+    event.startDate = startDate;
+    event.endDate = endDate;
+    event.location = this.state.location;
+    event.description = this.state.description;
+    if (this.state.timezone) {
+      const timezone = timezoneLoadFromName(this.state.timezone);
+      if (timezone) {
+        event.startDate = event.startDate?.convertToZone(timezone);
+        event.endDate = event.endDate?.convertToZone(timezone);
+      }
+    }
+    if (this.state.rrule) {
+      event.component.updatePropertyWithValue("rrule", new ICAL.Recur(this.state.rrule!));
+    }
+
+    event.component.updatePropertyWithValue("last-modified", ICAL.Time.now());
+
+    this.props.onSave(event, this.state.collectionUid, this.props.item)
+      .then(() => {
+        this.props.history.goBack();
+      });
+  }
+
+  public onDeleteRequest() {
+    this.setState({
+      showDeleteDialog: true,
+    });
+  }
+
+  public render() {
+    const styles = {
+      form: {
+      },
+      fullWidth: {
+        width: "100%",
+        boxSizing: "border-box" as any,
+        marginTop: 16,
+      },
+      submit: {
+        marginTop: 40,
+        marginBottom: 20,
+        textAlign: "right" as any,
+      },
+    };
+
+    const recurring = this.props.item && this.props.item.isRecurring();
+    const differentTimezone = this.state.timezone && (this.state.timezone !== getCurrentTimezone()) && timezoneLoadFromName(this.state.timezone);
+
+    return (
+      <>
+        <h2>
+          {(this.props.item && !this.props.duplicate) ? "Edit Event" : "New Event"}
+        </h2>
+        {recurring && (
+          <div>
+            <span style={{ color: "red" }}>IMPORTANT: </span>
+            This is a recurring event, for now, only editing the whole series
+            (by editing the first instance) is supported.
+          </div>
+        )}
+        <Toast open={!!this.state.error} onClose={this.handleCloseToast}>
+          ERROR! {this.state.error}
+        </Toast>
+        <form style={styles.form} onSubmit={this.onSubmit}>
+          <TextField
+            name="title"
+            placeholder="Enter title"
+            style={styles.fullWidth}
+            value={this.state.title}
+            onChange={this.handleInputChange}
+          />
+
+          <FormControl disabled={this.props.item !== undefined} style={styles.fullWidth}>
+            <InputLabel>
+              Saving to
+            </InputLabel>
+            <Select
+              name="collectionUid"
+              value={this.state.collectionUid}
+              disabled={this.props.item !== undefined && !this.props.duplicate}
+              onChange={this.handleInputChange}
+            >
+              {this.props.collections.map((x) => (
+                <MenuItem key={x.collection.uid} value={x.collection.uid}>{x.metadata.name}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl>
+            <FormHelperText>FROM</FormHelperText>
+            <DateTimePicker
+              dateOnly={this.state.allDay}
+              placeholder="Start"
+              value={this.state.start}
+              onChange={(date?: Date) => {
+                // If end is unset, set it to start + 30 minutes
+                const end = this.state.end ?? (
+                  new Date(date!.getTime() + 30 * 60 * 1000)
+                );
+                this.setState({ start: date, end });
+              }}
+            />
+            {differentTimezone && this.state.start && (
+              <FormHelperText>{ICAL.Time.fromJSDate(this.state.start, false).convertToZone(differentTimezone!).toJSDate().toString()}</FormHelperText>
+            )}
+          </FormControl>
+
+          <FormControl>
+            <FormHelperText>TO</FormHelperText>
+            <DateTimePicker
+              dateOnly={this.state.allDay}
+              placeholder="End"
+              value={this.state.end}
+              onChange={(date?: Date) => this.setState({ end: date })}
+            />
+            {differentTimezone && this.state.end && (
+              <FormHelperText>{ICAL.Time.fromJSDate(this.state.end, false).convertToZone(differentTimezone!).toJSDate().toString()}</FormHelperText>
+            )}
+          </FormControl>
+
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  name="allDay"
+                  checked={this.state.allDay}
+                  onChange={this.toggleAllDay}
+                  color="primary"
+                />
+              }
+              label="All Day"
+            />
+          </FormGroup>
+
+          {(!this.state.allDay) && (
+            <TimezonePicker value={this.state.timezone} onChange={(zone) => this.setState({ timezone: zone })} />
+          )}
+
+          <TextField
+            name="location"
+            placeholder="Add location"
+            style={styles.fullWidth}
+            value={this.state.location}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="description"
+            placeholder="Add description"
+            multiline
+            style={styles.fullWidth}
+            value={this.state.description}
+            onChange={this.handleInputChange}
+          />
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  name="recurring"
+                  checked={!!this.state.rrule}
+                  onChange={this.toggleRecurring}
+                  color="primary"
+                />
+              }
+              label="Recurring"
+            />
+          </FormGroup>
+          {this.state.rrule &&
+            <RRule
+              onChange={this.handleRRuleChange}
+              rrule={this.state.rrule ? this.state.rrule : { freq: "DAILY", interval: 1 }}
+            />
+          }
+          <div style={styles.submit}>
+            <Button
+              variant="contained"
+              onClick={this.props.onCancel}
+            >
+              <IconCancel style={{ marginRight: 8 }} />
+              Cancel
+            </Button>
+
+            {this.props.item &&
+              <Button
+                variant="contained"
+                style={{ marginLeft: 15, backgroundColor: colors.red[500], color: "white" }}
+                onClick={this.onDeleteRequest}
+              >
+                <IconDelete style={{ marginRight: 8 }} />
+                Delete
+              </Button>
+            }
+
+            <Button
+              type="submit"
+              variant="contained"
+              color="secondary"
+              style={{ marginLeft: 15 }}
+            >
+              <IconSave style={{ marginRight: 8 }} />
+              Save
+            </Button>
+          </div>
+        </form>
+
+        <ConfirmationDialog
+          title="Delete Confirmation"
+          labelOk="Delete"
+          open={this.state.showDeleteDialog}
+          onOk={() => this.props.onDelete(this.props.item!, this.props.initialCollection!)}
+          onCancel={() => this.setState({ showDeleteDialog: false })}
+        >
+          Are you sure you would like to delete this event?
+        </ConfirmationDialog>
+      </>
+    );
+  }
+}

webapp/src/Calendars/Main.tsx

@@ -0,0 +1,251 @@
+// SPDX-FileCopyrightText: © 2020 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { Switch, Route, useHistory } from "react-router";
+
+import * as Etebase from "etebase";
+
+import { Button, useTheme } from "@material-ui/core";
+import IconEdit from "@material-ui/icons/Edit";
+import IconDuplicate from "@material-ui/icons/FileCopy";
+import IconChangeHistory from "@material-ui/icons/ChangeHistory";
+
+import { EventType, PimType } from "../pim-types";
+import { useCredentials } from "../credentials";
+import { useItems, useCollections } from "../etebase-helpers";
+import { routeResolver } from "../App";
+import Calendar from "./Calendar";
+import Event from "./Event";
+import LoadingIndicator from "../widgets/LoadingIndicator";
+import EventEdit from "./EventEdit";
+import PageNotFound, { PageNotFoundRoute } from "../PageNotFound";
+
+import { CachedCollection, getItemNavigationUid, getDecryptCollectionsFunction, getDecryptItemsFunction, PimFab, itemDelete, itemSave, defaultColor } from "../Pim/helpers";
+import { historyPersistor } from "../persist-state-history";
+import ItemChangeHistory from "../Pim/ItemChangeHistory";
+
+const PersistCalendar = historyPersistor("Calendar")(Calendar);
+
+const colType = "etebase.vevent";
+
+const decryptCollections = getDecryptCollectionsFunction(colType);
+const decryptItems = getDecryptItemsFunction(colType, EventType.parse);
+
+export default function CalendarsMain() {
+  const [entries, setEntries] = React.useState<Map<string, Map<string, EventType>>>();
+  const [cachedCollections, setCachedCollections] = React.useState<CachedCollection[]>();
+  const theme = useTheme();
+  const history = useHistory();
+  const etebase = useCredentials()!;
+  const collections = useCollections(etebase, colType);
+  const items = useItems(etebase, colType);
+
+  React.useEffect(() => {
+    if (!collections || !items) {
+      return;
+    }
+    (async () => {
+      const colEntries = await decryptCollections(collections);
+
+      const entries = await decryptItems(items);
+
+      for (const collection of colEntries) {
+        const items = entries.get(collection.collection.uid)!;
+        for (const item of items.values()) {
+          item.color = collection.metadata.color || defaultColor;
+        }
+      }
+
+      setCachedCollections(colEntries);
+      setEntries(entries);
+    })();
+  }, [items, collections]);
+
+  if (!entries || !cachedCollections) {
+    return (
+      <LoadingIndicator />
+    );
+  }
+
+  async function onItemSave(item: PimType, collectionUid: string, originalItem?: PimType): Promise<void> {
+    const collection = collections!.find((x) => x.uid === collectionUid)!;
+    await itemSave(etebase, collection, items!, item, collectionUid, originalItem);
+  }
+
+  async function onItemDelete(item: PimType, collectionUid: string) {
+    const collection = collections!.find((x) => x.uid === collectionUid)!;
+    await itemDelete(etebase, collection, items!, item, collectionUid);
+
+    history.push(routeResolver.getRoute("pim.events"));
+  }
+
+  function onCancel() {
+    history.goBack();
+  }
+
+  const flatEntries = [];
+  for (const col of entries.values()) {
+    for (const item of col.values()) {
+      flatEntries.push(item);
+    }
+  }
+
+  const styles = {
+    button: {
+      marginLeft: theme.spacing(1),
+    },
+    leftIcon: {
+      marginRight: theme.spacing(1),
+    },
+  };
+
+  return (
+    <Switch>
+      <Route
+        path={routeResolver.getRoute("pim.events")}
+        exact
+      >
+        <PersistCalendar
+          entries={flatEntries}
+          onItemClick={(item: EventType) => history.push(
+            routeResolver.getRoute("pim.events._id", { itemUid: getItemNavigationUid(item) })
+          )}
+          onSlotClick={(start?: Date, end?: Date) => history.push(
+            routeResolver.getRoute("pim.events.new"),
+            { start, end }
+          )}
+        />
+        <PimFab
+          onClick={() => history.push(
+            routeResolver.getRoute("pim.events.new")
+          )}
+        />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("pim.events.new")}
+        exact
+      >
+        <EventEdit
+          collections={cachedCollections}
+          onSave={onItemSave}
+          onDelete={onItemDelete}
+          onCancel={onCancel}
+          history={history}
+        />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("pim.events._id.log")}
+        render={({ match }) => {
+          // We have this path outside because we don't want the item existing check
+          const [colUid, itemUid] = match.params.itemUid.split("|");
+          const cachedCollection = cachedCollections!.find((x) => x.collection.uid === colUid)!;
+          if (!cachedCollection) {
+            return (<PageNotFound />);
+          }
+
+          return (
+            <ItemChangeHistory collection={cachedCollection} itemUid={itemUid} />
+          );
+        }}
+      />
+      <Route
+        path={routeResolver.getRoute("pim.events._id")}
+        render={({ match }) => {
+          const [colUid, itemUid] = match.params.itemUid.split("|");
+          const item = entries.get(colUid)?.get(itemUid);
+          if (!item) {
+            return (<PageNotFound />);
+          }
+
+          const collection = collections!.find((x) => x.uid === colUid)!;
+          const readOnly = collection.accessLevel === Etebase.CollectionAccessLevel.ReadOnly;
+
+          return (
+            <Switch>
+              <Route
+                path={routeResolver.getRoute("pim.events._id.edit")}
+                exact
+              >
+                <EventEdit
+                  key={itemUid}
+                  initialCollection={item.collectionUid}
+                  item={item}
+                  collections={cachedCollections}
+                  onSave={onItemSave}
+                  onDelete={onItemDelete}
+                  onCancel={onCancel}
+                  history={history}
+                />
+              </Route>
+              <Route
+                path={routeResolver.getRoute("pim.events._id.duplicate")}
+                exact
+              >
+                <EventEdit
+                  key={itemUid}
+                  initialCollection={item.collectionUid}
+                  item={item}
+                  collections={cachedCollections}
+                  onSave={onItemSave}
+                  onDelete={onItemDelete}
+                  onCancel={onCancel}
+                  history={history}
+                  duplicate
+                />
+              </Route>
+              <Route
+                path={routeResolver.getRoute("pim.events._id")}
+                exact
+              >
+                <div style={{ textAlign: "right", marginBottom: 15 }}>
+                  <Button
+                    variant="contained"
+                    style={styles.button}
+                    onClick={() =>
+                      history.push(routeResolver.getRoute("pim.events._id.log", { itemUid: getItemNavigationUid(item) }))
+                    }
+                  >
+                    <IconChangeHistory style={styles.leftIcon} />
+                    Change History
+                  </Button>
+
+                  <Button
+                    color="secondary"
+                    variant="contained"
+                    disabled={readOnly}
+                    style={{ ...styles.button, marginLeft: 15 }}
+                    onClick={() =>
+                      history.push(routeResolver.getRoute("pim.events._id.edit", { itemUid: getItemNavigationUid(item) }))
+                    }
+                  >
+                    <IconEdit style={styles.leftIcon} />
+                    Edit
+                  </Button>
+
+                  <Button
+                    color="secondary"
+                    variant="contained"
+                    disabled={readOnly}
+                    style={{ ...styles.button, marginLeft: 15 }}
+                    onClick={() =>
+                      history.push(routeResolver.getRoute("pim.events._id.duplicate", { itemUid: getItemNavigationUid(item) }))
+                    }
+                  >
+                    <IconDuplicate style={styles.leftIcon} />
+                    Duplicate
+                  </Button>
+
+                </div>
+                <Event item={item} />
+              </Route>
+              <PageNotFoundRoute />
+            </Switch>
+          );
+        }}
+      />
+      <PageNotFoundRoute />
+    </Switch>
+  );
+}
+

webapp/src/Collections/Collection.tsx

@@ -0,0 +1,96 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import IconButton from "@material-ui/core/IconButton";
+import IconEdit from "@material-ui/icons/Edit";
+import IconMembers from "@material-ui/icons/People";
+import IconImport from "@material-ui/icons/ImportExport";
+
+import * as Etebase from "etebase";
+
+
+import AppBarOverride from "../widgets/AppBarOverride";
+import Container from "../widgets/Container";
+
+import CollectionChangeEntries from "./CollectionChangeEntries";
+import ImportDialog from "./ImportDialog";
+
+import { Link } from "react-router-dom";
+
+import { routeResolver } from "../App";
+
+import { CachedCollection } from "../Pim/helpers";
+
+interface PropsType {
+  collection: CachedCollection;
+}
+
+class Collection extends React.Component<PropsType> {
+  public state: {
+    tab: number;
+    importDialogOpen: boolean;
+  };
+
+  constructor(props: PropsType) {
+    super(props);
+
+    this.importDialogToggle = this.importDialogToggle.bind(this);
+    this.state = {
+      tab: 0,
+      importDialogOpen: false,
+    };
+  }
+
+  public render() {
+    const { collection, metadata } = this.props.collection;
+    const isAdmin = collection.accessLevel === Etebase.CollectionAccessLevel.Admin;
+
+    return (
+      <React.Fragment>
+        <AppBarOverride title={metadata.name!!}>
+          {isAdmin &&
+            <>
+              <IconButton
+                component={Link}
+                title="Edit"
+                {...{ to: routeResolver.getRoute("collections._id.edit", { colUid: collection.uid }) }}
+              >
+                <IconEdit />
+              </IconButton>
+              <IconButton
+                component={Link}
+                title="Members"
+                {...{ to: routeResolver.getRoute("collections._id.members", { colUid: collection.uid }) }}
+              >
+                <IconMembers />
+              </IconButton>
+            </>
+          }
+          <IconButton
+            title="Import"
+            onClick={this.importDialogToggle}
+          >
+            <IconImport />
+          </IconButton>
+        </AppBarOverride>
+        <Container>
+          <CollectionChangeEntries collection={this.props.collection} />
+        </Container>
+
+        <ImportDialog
+          key={this.state.importDialogOpen.toString()}
+          collection={this.props.collection}
+          open={this.state.importDialogOpen}
+          onClose={this.importDialogToggle}
+        />
+      </React.Fragment>
+    );
+  }
+
+  private importDialogToggle() {
+    this.setState((state: any) => ({ importDialogOpen: !state.importDialogOpen }));
+  }
+}
+
+export default Collection;

webapp/src/Collections/CollectionChangeEntries.tsx

@@ -0,0 +1,98 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import * as Etebase from "etebase";
+
+import { useCredentials } from "../credentials";
+import { useItems } from "../etebase-helpers";
+import { CachedCollection, getRawItemNavigationUid } from "../Pim/helpers";
+import LoadingIndicator from "../widgets/LoadingIndicator";
+import GenericChangeHistory from "../components/GenericChangeHistory";
+import { useHistory } from "react-router";
+import { routeResolver } from "../App";
+
+export interface CachedItem {
+  item: Etebase.Item;
+  metadata: Etebase.ItemMetadata;
+  content: string;
+}
+
+// FIXME: use the ones used by e.g. Contacts/Main so ew share the cache.
+// Only problem though is that we want the deleted items here and not there.
+async function decryptItems(items: Map<string, Map<string, Etebase.Item>>) {
+  const entries: Map<string, Map<string, CachedItem>> = new Map();
+  for (const [colUid, col] of items.entries()) {
+    const cur = new Map();
+    entries.set(colUid, cur);
+    for (const item of col.values()) {
+      cur.set(item.uid, {
+        item,
+        metadata: item.getMeta(),
+        content: await item.getContent(Etebase.OutputFormat.String),
+      });
+    }
+  }
+
+  return entries;
+}
+
+interface PropsType {
+  collection: CachedCollection;
+}
+
+export default function CollectionChangeEntries(props: PropsType) {
+  const [entries, setEntries] = React.useState<Map<string, CachedItem>>();
+  const history = useHistory();
+  const etebase = useCredentials()!;
+
+  const { collection, collectionType } = props.collection;
+  const items = useItems(etebase, collectionType);
+
+  React.useEffect(() => {
+    if (items) {
+      decryptItems(items)
+        .then((entries) => setEntries(entries.get(collection.uid)));
+    }
+  }, [items]);
+
+  if (!entries) {
+    return (
+      <LoadingIndicator />
+    );
+  }
+
+  const entriesList = Array.from(entries.values()).sort((a_, b_) => {
+    const a = a_.metadata.mtime ?? 0;
+    const b = b_.metadata.mtime ?? 0;
+    return a - b;
+  });
+
+  let changelogRoute = "";
+  switch (collectionType) {
+    case "etebase.vevent": {
+      changelogRoute = "pim.events._id.log";
+      break;
+    }
+    case "etebase.vtodo": {
+      changelogRoute = "pim.tasks._id.log";
+      break;
+    }
+    case "etebase.vcard": {
+      changelogRoute = "pim.contacts._id.log";
+      break;
+    }
+  }
+
+  return (
+    <div style={{ height: "calc(100vh - 300px)" }}>
+      <GenericChangeHistory
+        items={entriesList}
+        onItemClick={(item) =>
+          history.push(routeResolver.getRoute(changelogRoute, { itemUid: getRawItemNavigationUid(collection.uid, item.item.uid) }))
+        }
+      />
+    </div>
+  );
+}

webapp/src/Collections/CollectionEdit.tsx

@@ -0,0 +1,233 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import IconDelete from "@material-ui/icons/Delete";
+import IconCancel from "@material-ui/icons/Clear";
+import IconSave from "@material-ui/icons/Save";
+import * as colors from "@material-ui/core/colors";
+
+import AppBarOverride from "../widgets/AppBarOverride";
+import Container from "../widgets/Container";
+import ConfirmationDialog from "../widgets/ConfirmationDialog";
+
+import * as Etebase from "etebase";
+
+import ColorPicker from "../widgets/ColorPicker";
+import { defaultColor } from "../Pim/helpers";
+import { CachedCollection } from "../Pim/helpers";
+import { useCredentials } from "../credentials";
+import { getCollectionManager } from "../etebase-helpers";
+
+interface PropsType {
+  collection?: CachedCollection;
+  onSave: (collection: Etebase.Collection) => void;
+  onDelete: (collection: Etebase.Collection) => void;
+  onCancel: () => void;
+}
+
+interface FormErrors {
+  name?: string;
+  color?: string;
+}
+
+export default function CollectionEdit(props: PropsType) {
+  const [errors, setErrors] = React.useState<FormErrors>({});
+  const [showDeleteDialog, setShowDeleteDialog] = React.useState(false);
+  const [colType, setColType] = React.useState("");
+  const [info, setInfo] = React.useState<Etebase.ItemMetadata>();
+  const [selectedColor, setSelectedColor] = React.useState("");
+  const etebase = useCredentials()!;
+
+  React.useEffect(() => {
+    if (props.collection !== undefined) {
+      setColType(props.collection.collectionType);
+      setInfo(props.collection.metadata);
+      if (props.collection.metadata.color) {
+        setSelectedColor(props.collection.metadata.color);
+      }
+    } else {
+      setColType("etebase.vcard");
+      setInfo({
+        name: "",
+        description: "",
+      });
+    }
+  }, [props.collection]);
+
+  if (info === undefined) {
+    return <React.Fragment />;
+  }
+
+  async function onSubmit(e: React.FormEvent<any>) {
+    e.preventDefault();
+    const saveErrors: FormErrors = {};
+    const fieldRequired = "This field is required!";
+
+    const { onSave } = props;
+
+    if (!info) {
+      throw new Error("Got undefined info. Should never happen.");
+    }
+
+    const name = info.name;
+    const color = selectedColor;
+
+    if (!name) {
+      saveErrors.name = fieldRequired;
+    }
+
+    if (color && !/^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(color)) {
+      saveErrors.color = "Must be of the form #RRGGBB or #RRGGBBAA or empty";
+    }
+
+    setErrors(saveErrors);
+    if (Object.keys(saveErrors).length > 0) {
+      return;
+    }
+
+    const colMgr = getCollectionManager(etebase);
+    const mtime = (new Date()).getTime();
+    const meta = { ...info, color, mtime };
+    let collection;
+    if (props.collection) {
+      collection = props.collection.collection;
+      collection.setMeta(meta);
+    } else {
+      collection = await colMgr.create(colType, meta, "");
+    }
+
+    onSave(collection);
+  }
+
+  function onDeleteRequest() {
+    setShowDeleteDialog(true);
+  }
+
+  const { collection, onDelete, onCancel } = props;
+  const item = collection?.metadata;
+
+  const pageTitle = (item !== undefined) ? item.name! : "New Collection";
+
+  const styles = {
+    fullWidth: {
+      width: "100%",
+    },
+    submit: {
+      marginTop: 40,
+      marginBottom: 20,
+      textAlign: "right" as any,
+    },
+  };
+
+  const colTypes = {
+    "etebase.vcard": "Address Book",
+    "etebase.vevent": "Calendar",
+    "etebase.vtodo": "Task List",
+  };
+  let collectionColorBox: React.ReactNode;
+  switch (colType) {
+    case "etebase.vevent":
+    case "etebase.vtodo":
+      collectionColorBox = (
+        <ColorPicker
+          defaultColor={defaultColor}
+          color={selectedColor}
+          onChange={(color: string) => setSelectedColor(color)}
+          error={errors.color}
+        />
+      );
+      break;
+  }
+
+  return (
+    <>
+      <AppBarOverride title={pageTitle} />
+      <Container style={{ maxWidth: "30rem" }}>
+        <form onSubmit={onSubmit}>
+          <FormControl disabled={props.collection !== undefined} style={styles.fullWidth}>
+            <InputLabel>
+              Collection type
+            </InputLabel>
+            <Select
+              name="type"
+              required
+              value={colType}
+              onChange={(event: React.ChangeEvent<{ value: string }>) => setColType(event.target.value)}
+            >
+              {Object.keys(colTypes).map((x) => (
+                <MenuItem key={x} value={x}>{colTypes[x]}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <TextField
+            name="name"
+            required
+            label="Name of this collection"
+            value={info.name}
+            onChange={(event: React.ChangeEvent<{ value: string }>) => setInfo({ ...info, name: event.target.value })}
+            style={styles.fullWidth}
+            margin="normal"
+            error={!!errors.name}
+            helperText={errors.name}
+          />
+          <TextField
+            name="description"
+            label="Description (optional)"
+            value={info.description}
+            onChange={(event: React.ChangeEvent<{ value: string }>) => setInfo({ ...info, description: event.target.value })}
+            style={styles.fullWidth}
+            margin="normal"
+          />
+          {collectionColorBox}
+
+          <div style={styles.submit}>
+            <Button
+              variant="contained"
+              onClick={onCancel}
+            >
+              <IconCancel style={{ marginRight: 8 }} />
+              Cancel
+            </Button>
+
+            {props.collection &&
+              <Button
+                variant="contained"
+                style={{ marginLeft: 15, backgroundColor: colors.red[500], color: "white" }}
+                onClick={onDeleteRequest}
+              >
+                <IconDelete style={{ marginRight: 8 }} />
+                Delete
+              </Button>
+            }
+
+            <Button
+              type="submit"
+              variant="contained"
+              color="secondary"
+              style={{ marginLeft: 15 }}
+            >
+              <IconSave style={{ marginRight: 8 }} />
+              Save
+            </Button>
+          </div>
+        </form>
+      </Container>
+      <ConfirmationDialog
+        title="Delete Confirmation"
+        labelOk="Delete"
+        open={showDeleteDialog}
+        onOk={() => onDelete(props.collection?.collection!)}
+        onCancel={() => setShowDeleteDialog(false)}
+      >
+        Are you sure you would like to delete this collection?
+      </ConfirmationDialog>
+    </>
+  );
+}

webapp/src/Collections/CollectionImport.tsx

@@ -0,0 +1,86 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import ContactsIcon from "@material-ui/icons/Contacts";
+import CalendarTodayIcon from "@material-ui/icons/CalendarToday";
+import FormatListBulletedIcon from "@material-ui/icons/FormatListBulleted";
+
+import { List, ListItem } from "../widgets/List";
+
+import AppBarOverride from "../widgets/AppBarOverride";
+import Container from "../widgets/Container";
+
+import { CachedCollection, defaultColor } from "../Pim/helpers";
+import ColorBox from "../widgets/ColorBox";
+import ImportDialog from "./ImportDialog";
+
+interface PropsType {
+  collections: CachedCollection[];
+}
+
+export default function CollectionImport(props: PropsType) {
+  const [selectedCollection, setSelectedCollection] = React.useState<CachedCollection>();
+
+  const collectionMap = {
+    "etebase.vcard": [],
+    "etebase.vevent": [],
+    "etebase.vtodo": [],
+  };
+
+  function colClicked(colUid: string) {
+    const collection = props.collections.find((x) => x.collection.uid === colUid);
+    setSelectedCollection(collection);
+  }
+
+  for (const col of props.collections) {
+    const colType = col.collectionType;
+    if (collectionMap[colType]) {
+      const supportsColor = (["etebase.vevent", "etebase.vtodo"].includes(colType));
+      const colorBox = (supportsColor) ? (
+        <ColorBox size={24} color={col.metadata.color || defaultColor} />
+      ) : undefined;
+
+      collectionMap[colType].push((
+        <ListItem key={col.collection.uid} rightIcon={colorBox} insetChildren
+          onClick={() => colClicked(col.collection.uid)}>
+          {col.metadata.name}
+        </ListItem>
+      ));
+    }
+  }
+
+  return (
+    <Container>
+      <AppBarOverride title="Import" />
+      <List>
+        <ListItem
+          primaryText="Address Books"
+          leftIcon={<ContactsIcon />}
+          nestedItems={collectionMap["etebase.vcard"]}
+        />
+
+        <ListItem
+          primaryText="Calendars"
+          leftIcon={<CalendarTodayIcon />}
+          nestedItems={collectionMap["etebase.vevent"]}
+        />
+
+        <ListItem
+          primaryText="Tasks"
+          leftIcon={<FormatListBulletedIcon />}
+          nestedItems={collectionMap["etebase.vtodo"]}
+        />
+      </List>
+      {selectedCollection && (
+        <ImportDialog
+          key={(!selectedCollection).toString()}
+          collection={selectedCollection}
+          open
+          onClose={() => setSelectedCollection(undefined)}
+        />
+      )}
+    </Container>
+  );
+}

webapp/src/Collections/CollectionList.tsx

@@ -0,0 +1,89 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import { Link, useHistory } from "react-router-dom";
+
+import IconButton from "@material-ui/core/IconButton";
+import IconAdd from "@material-ui/icons/Add";
+import ContactsIcon from "@material-ui/icons/Contacts";
+import CalendarTodayIcon from "@material-ui/icons/CalendarToday";
+import FormatListBulletedIcon from "@material-ui/icons/FormatListBulleted";
+
+import { List, ListItem } from "../widgets/List";
+
+import AppBarOverride from "../widgets/AppBarOverride";
+import Container from "../widgets/Container";
+
+import { routeResolver } from "../App";
+import { CachedCollection, defaultColor } from "../Pim/helpers";
+import ColorBox from "../widgets/ColorBox";
+
+interface PropsType {
+  collections: CachedCollection[];
+}
+
+export default function CollectionList(props: PropsType) {
+  const history = useHistory();
+
+  const collectionMap = {
+    "etebase.vcard": [],
+    "etebase.vevent": [],
+    "etebase.vtodo": [],
+  };
+
+  function colClicked(colUid: string) {
+    history.push(routeResolver.getRoute("collections._id", { colUid }));
+  }
+
+  for (const col of props.collections) {
+    const colType = col.collectionType;
+    if (collectionMap[colType]) {
+      const supportsColor = (["etebase.vevent", "etebase.vtodo"].includes(colType));
+      const colorBox = (supportsColor) ? (
+        <ColorBox size={24} color={col.metadata.color || defaultColor} />
+      ) : undefined;
+
+      collectionMap[colType].push((
+        <ListItem key={col.collection.uid} rightIcon={colorBox} insetChildren
+          onClick={() => colClicked(col.collection.uid)}>
+          {col.metadata.name}
+        </ListItem>
+      ));
+    }
+  }
+
+  return (
+    <Container>
+      <AppBarOverride title="Collections">
+        <IconButton
+          component={Link}
+          title="New"
+          {...{ to: routeResolver.getRoute("collections.new") }}
+        >
+          <IconAdd />
+        </IconButton>
+      </AppBarOverride>
+      <List>
+        <ListItem
+          primaryText="Address Books"
+          leftIcon={<ContactsIcon />}
+          nestedItems={collectionMap["etebase.vcard"]}
+        />
+
+        <ListItem
+          primaryText="Calendars"
+          leftIcon={<CalendarTodayIcon />}
+          nestedItems={collectionMap["etebase.vevent"]}
+        />
+
+        <ListItem
+          primaryText="Tasks"
+          leftIcon={<FormatListBulletedIcon />}
+          nestedItems={collectionMap["etebase.vtodo"]}
+        />
+      </List>
+    </Container>
+  );
+}

webapp/src/Collections/CollectionMemberAddDialog.tsx

@@ -0,0 +1,120 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import * as Etebase from "etebase";
+
+import TextField from "@material-ui/core/TextField";
+import Checkbox from "@material-ui/core/Checkbox";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+
+import LoadingIndicator from "../widgets/LoadingIndicator";
+import ConfirmationDialog from "../widgets/ConfirmationDialog";
+import PrettyFingerprint from "../widgets/PrettyFingerprint";
+import { CachedCollection } from "../Pim/helpers";
+import { useCredentials } from "../credentials";
+
+interface PropsType {
+  collection: CachedCollection;
+  onOk: (username: string, publicKey: Uint8Array, accessLevel: Etebase.CollectionAccessLevel) => void;
+  onClose: () => void;
+}
+
+export default function CollectionMemberAddDialog(props: PropsType) {
+  const etebase = useCredentials()!;
+  const [addUser, setAddUser] = React.useState("");
+  const [publicKey, setPublicKey] = React.useState<Uint8Array>();
+  const [readOnly, setReadOnly] = React.useState(false);
+  const [userChosen, setUserChosen] = React.useState(false);
+  const [error, setError] = React.useState<Error>();
+
+  async function onAddRequest(_user: string) {
+    setUserChosen(true);
+    const inviteMgr = etebase.getInvitationManager();
+    try {
+      const userProfile = await inviteMgr.fetchUserProfile(addUser);
+      setPublicKey(userProfile.pubkey);
+    } catch (e) {
+      setError(e);
+    }
+  }
+
+  function onOk() {
+    props.onOk(addUser, publicKey!, readOnly ? Etebase.CollectionAccessLevel.ReadOnly : Etebase.CollectionAccessLevel.ReadWrite);
+  }
+
+  const { onClose } = props;
+
+  if (error) {
+    return (
+      <>
+        <ConfirmationDialog
+          title="Error adding member"
+          labelOk="OK"
+          open
+          onOk={onClose}
+          onCancel={onClose}
+        >
+          User ({addUser}) not found.
+        </ConfirmationDialog>
+      </>
+    );
+  }
+
+  if (publicKey) {
+    return (
+      <>
+        <ConfirmationDialog
+          title="Verify security fingerprint"
+          labelOk="OK"
+          open
+          onOk={onOk}
+          onCancel={onClose}
+        >
+          <p>
+            Verify {addUser}'s security fingerprint to ensure the encryption is secure.
+          </p>
+          <div style={{ textAlign: "center" }}>
+            <PrettyFingerprint publicKey={publicKey} />
+          </div>
+        </ConfirmationDialog>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <ConfirmationDialog
+          title="Invite user"
+          labelOk="OK"
+          open={!userChosen}
+          onOk={onAddRequest}
+          onCancel={onClose}
+        >
+          {userChosen ?
+            <LoadingIndicator />
+            :
+            <>
+              <TextField
+                name="addUser"
+                placeholder="Username"
+                style={{ width: "100%" }}
+                value={addUser}
+                onChange={(ev) => setAddUser(ev.target.value)}
+              />
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={readOnly}
+                    onChange={(event) => setReadOnly(event.target.checked)}
+                  />
+                }
+                label="Read only?"
+              />
+            </>
+          }
+        </ConfirmationDialog>
+      </>
+    );
+  }
+}

webapp/src/Collections/CollectionMembers.tsx

@@ -0,0 +1,157 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import * as Etebase from "etebase";
+
+import { List, ListItem } from "../widgets/List";
+
+import IconMemberAdd from "@material-ui/icons/PersonAdd";
+import VisibilityIcon from "@material-ui/icons/Visibility";
+import AdminIcon from "@material-ui/icons/SupervisedUserCircle";
+
+import AppBarOverride from "../widgets/AppBarOverride";
+import Container from "../widgets/Container";
+import LoadingIndicator from "../widgets/LoadingIndicator";
+import ConfirmationDialog from "../widgets/ConfirmationDialog";
+
+import { useCredentials } from "../credentials";
+import { getCollectionManager } from "../etebase-helpers";
+import { CachedCollection } from "../Pim/helpers";
+
+import CollectionMemberAddDialog from "./CollectionMemberAddDialog";
+import Alert from "@material-ui/lab/Alert";
+import { pushMessage } from "../store/actions";
+import { useDispatch } from "react-redux";
+
+interface PropsType {
+  collection: CachedCollection;
+}
+
+export default function CollectionMembers(props: PropsType) {
+  const etebase = useCredentials()!;
+  const dispatch = useDispatch();
+  const [members, setMembers] = React.useState<Etebase.CollectionMember[]>();
+  const [revokeUser, setRevokeUser] = React.useState<Etebase.CollectionMember | null>(null);
+  const [addMemberOpen, setAddMemberOpen] = React.useState(false);
+  const [error, setError] = React.useState<Error>();
+
+  const { collection, metadata } = props.collection;
+
+  const revokeUserIsAdmin = revokeUser?.accessLevel === Etebase.CollectionAccessLevel.Admin;
+
+  async function fetchMembers() {
+    const colMgr = getCollectionManager(etebase);
+    const memberManager = colMgr.getMemberManager(collection);
+    try {
+      const ret: Etebase.CollectionMember[] = [];
+      let iterator: string | null = null;
+      let done = false;
+      while (!done) {
+        const members = await memberManager.list({ iterator, limit: 30 });
+        iterator = members.iterator as string;
+        done = members.done;
+
+        for (const member of members.data) {
+          ret.push(member);
+        }
+      }
+      setMembers(ret);
+    } catch (e) {
+      setError(e);
+    }
+  }
+
+  React.useEffect(() => {
+    fetchMembers();
+  }, []);
+
+  async function onRevokeDo() {
+    const colMgr = getCollectionManager(etebase);
+    const memberManager = colMgr.getMemberManager(collection);
+    await memberManager.remove(revokeUser!.username);
+    await fetchMembers();
+    setRevokeUser(null);
+    dispatch(pushMessage({ message: "Removed member", severity: "success" }));
+  }
+
+  async function onMemberAdd(username: string, pubkey: Uint8Array, accessLevel: Etebase.CollectionAccessLevel) {
+    const inviteMgr = etebase.getInvitationManager();
+    await inviteMgr.invite(collection, username, pubkey, accessLevel);
+    await fetchMembers();
+    setAddMemberOpen(false);
+    dispatch(pushMessage({ message: "Invitation sent", severity: "success" }));
+  }
+
+  return (
+    <>
+      <AppBarOverride title={`${metadata.name} - Members`} />
+      <Container style={{ maxWidth: "30rem" }}>
+        {error && (
+          <Alert color="error">
+            {error.toString()}
+          </Alert>
+        )}
+        {members ?
+          <List>
+            <ListItem rightIcon={<IconMemberAdd />} onClick={() => setAddMemberOpen(true)}>
+              Invite user
+            </ListItem>
+            {(members.length > 0 ?
+              members.map((member) => {
+                let rightIcon: React.ReactElement | undefined = undefined;
+                if (member.accessLevel === Etebase.CollectionAccessLevel.ReadOnly) {
+                  rightIcon = (<div title="Read Only"><VisibilityIcon /></div>);
+                } else if (member.accessLevel === Etebase.CollectionAccessLevel.Admin) {
+                  rightIcon = (<div title="Admin"><AdminIcon /></div>);
+                }
+                return (
+                  <ListItem
+                    key={member.username}
+                    onClick={() => setRevokeUser(member)}
+                    rightIcon={rightIcon}
+                  >
+                    {member.username}
+                  </ListItem>
+                );
+              })
+              :
+              <ListItem>
+                No members
+              </ListItem>
+            )}
+          </List>
+          :
+          <LoadingIndicator />
+        }
+      </Container>
+      <ConfirmationDialog
+        title="Remove member"
+        labelOk="OK"
+        open={revokeUser !== null}
+        onOk={(revokeUserIsAdmin) ? () => setRevokeUser(null) : onRevokeDo}
+        onCancel={() => setRevokeUser(null)}
+      >
+        {(revokeUserIsAdmin) ? (
+          <p>
+            Revoking admin access is not allowed.
+          </p>
+        ) : (
+          <p>
+            Would you like to revoke {revokeUser?.username}'s access?<br />
+            Please be advised that a malicious user would potentially be able to retain access to encryption keys. Please refer to the FAQ for more information.
+          </p>
+        )}
+      </ConfirmationDialog>
+
+      {addMemberOpen &&
+        <CollectionMemberAddDialog
+          collection={props.collection}
+          onOk={onMemberAdd}
+          onClose={() => setAddMemberOpen(false)}
+        />
+      }
+    </>
+  );
+}

webapp/src/Collections/ImportDialog.tsx

@@ -0,0 +1,215 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import Button from "@material-ui/core/Button";
+import Dialog from "@material-ui/core/Dialog";
+import DialogActions from "@material-ui/core/DialogActions";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogContentText from "@material-ui/core/DialogContentText";
+import DialogTitle from "@material-ui/core/DialogTitle";
+
+import Dropzone from "react-dropzone";
+
+import LoadingIndicator from "../widgets/LoadingIndicator";
+
+import { arrayToChunkIterator } from "../helpers";
+
+import * as uuid from "uuid";
+import * as ICAL from "ical.js";
+import { ContactType, EventType, TaskType, PimType } from "../pim-types";
+import { useCredentials } from "../credentials";
+import { CachedCollection } from "../Pim/helpers";
+import { getCollectionManager } from "../etebase-helpers";
+import { useAsyncDispatch } from "../store";
+import { itemBatch } from "../store/actions";
+
+const CHUNK_SIZE = 40;
+
+interface PropsType {
+  collection: CachedCollection;
+  open: boolean;
+  onClose?: () => void;
+}
+
+export default function ImportDialog(props: PropsType) {
+  const etebase = useCredentials()!;
+  const dispatch = useAsyncDispatch();
+  const [loading, setLoading] = React.useState(false);
+  const [itemsProcessed, setItemsProccessed] = React.useState<number>();
+
+  function onFileDropCommon(itemsCreator: (fileText: string) => PimType[], acceptedFiles: File[], rejectedFiles: File[]) {
+    // XXX: implement handling of rejectedFiles
+    const reader = new FileReader();
+
+    reader.onabort = () => {
+      setLoading(false);
+      console.error("Import Aborted");
+      alert("file reading was aborted");
+    };
+    reader.onerror = (e) => {
+      setLoading(false);
+      console.error(e);
+      alert("file reading has failed");
+    };
+    reader.onload = async () => {
+      try {
+        const fileText = reader.result as string;
+        const items = itemsCreator(fileText);
+
+        const { collection } = props.collection;
+        const colMgr = getCollectionManager(etebase);
+        const itemMgr = colMgr.getItemManager(collection);
+
+        const eteItems = [];
+        for (const item of items) {
+          const mtime = (new Date()).getTime();
+          const meta = {
+            mtime,
+            name: item.uid,
+          };
+          const content = item.toIcal();
+
+          const eteItem = await itemMgr.create(meta, content);
+          eteItems.push(eteItem);
+        }
+
+        const chunks = arrayToChunkIterator(eteItems, CHUNK_SIZE);
+        for (const chunk of chunks) {
+          await dispatch(itemBatch(collection, itemMgr, chunk));
+        }
+
+        setItemsProccessed(items.length);
+      } catch (e) {
+        console.error(e);
+        alert("An error has occurred, please contact developers.");
+        throw e;
+      } finally {
+        if (props.onClose) {
+          setLoading(false);
+        }
+      }
+    };
+
+    if (acceptedFiles.length > 0) {
+      setLoading(true);
+      acceptedFiles.forEach((file) => {
+        reader.readAsText(file);
+      });
+    } else {
+      alert("Failed importing file. Is the file type supported?");
+      console.log("Failed importing files. Rejected:", rejectedFiles);
+    }
+  }
+
+  function onFileDropContact(acceptedFiles: File[], rejectedFiles: File[]) {
+    const itemsCreator = (fileText: string) => {
+      const mainComp = ICAL.parse(fileText);
+      return mainComp.map((comp) => {
+        const ret = new ContactType(new ICAL.Component(comp));
+        if (!ret.uid) {
+          ret.uid = uuid.v4();
+        }
+        return ret;
+      });
+    };
+
+    onFileDropCommon(itemsCreator, acceptedFiles, rejectedFiles);
+  }
+
+  function onFileDropEvent(acceptedFiles: File[], rejectedFiles: File[]) {
+    const itemsCreator = (fileText: string) => {
+      const calendarComp = new ICAL.Component(ICAL.parse(fileText));
+      return calendarComp.getAllSubcomponents("vevent").map((comp) => {
+        const ret = new EventType(comp);
+        if (!ret.uid) {
+          ret.uid = uuid.v4();
+        }
+        return ret;
+      });
+    };
+
+    onFileDropCommon(itemsCreator, acceptedFiles, rejectedFiles);
+  }
+
+  function onFileDropTask(acceptedFiles: File[], rejectedFiles: File[]) {
+    const itemsCreator = (fileText: string) => {
+      const calendarComp = new ICAL.Component(ICAL.parse(fileText));
+      return calendarComp.getAllSubcomponents("vtodo").map((comp) => {
+        const ret = new TaskType(comp);
+        if (!ret.uid) {
+          ret.uid = uuid.v4();
+        }
+        return ret;
+      });
+    };
+
+    onFileDropCommon(itemsCreator, acceptedFiles, rejectedFiles);
+  }
+
+  function onClose() {
+    if (loading) {
+      return;
+    }
+
+    if (props.onClose) {
+      props.onClose();
+    }
+  }
+
+  const { collectionType } = props.collection;
+  let acceptTypes;
+  let dropFunction;
+
+  if (collectionType === "etebase.vcard") {
+    acceptTypes = ["text/vcard", "text/directory", "text/x-vcard", ".vcf"];
+    dropFunction = onFileDropContact;
+  } else if (collectionType === "etebase.vevent") {
+    acceptTypes = ["text/calendar", ".ics", ".ical"];
+    dropFunction = onFileDropEvent;
+  } else if (collectionType === "etebase.vtodo") {
+    acceptTypes = ["text/calendar", ".ics", ".ical"];
+    dropFunction = onFileDropTask;
+  }
+
+  return (
+    <React.Fragment>
+      <Dialog
+        open={props.open}
+        onClose={onClose}
+      >
+        <DialogTitle>Import entries from file?</DialogTitle>
+        <DialogContent>
+          {(itemsProcessed !== undefined) ? (
+            <p>Imported {itemsProcessed} items.</p>
+          ) : (loading ?
+            <LoadingIndicator style={{ display: "block", margin: "auto" }} />
+            :
+            <Dropzone
+              onDrop={dropFunction}
+              multiple={false}
+              accept={acceptTypes}
+            >
+              {({ getRootProps, getInputProps }) => (
+                <section>
+                  <div {...getRootProps()}>
+                    <input {...getInputProps()} />
+                    <DialogContentText id="alert-dialog-description">
+                      To import entries from a file, drag 'n' drop it here, or click to open the file selector.
+                    </DialogContentText>
+                  </div>
+                </section>
+              )}
+            </Dropzone>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button disabled={loading} onClick={onClose} color="primary">
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </React.Fragment>
+  );
+}

webapp/src/Collections/Invitations.tsx

@@ -0,0 +1,135 @@
+// SPDX-FileCopyrightText: © 2020 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { Switch, Route, Redirect } from "react-router";
+
+import * as Etebase from "etebase";
+
+import { useCredentials } from "../credentials";
+import { routeResolver } from "../App";
+import LoadingIndicator from "../widgets/LoadingIndicator";
+
+import AppBarOverride from "../widgets/AppBarOverride";
+import { List, ListItem } from "../widgets/List";
+import Container from "../widgets/Container";
+import { IconButton } from "@material-ui/core";
+import IconAccept from "@material-ui/icons/Done";
+import IconReject from "@material-ui/icons/Close";
+import ConfirmationDialog from "../widgets/ConfirmationDialog";
+import PrettyFingerprint from "../widgets/PrettyFingerprint";
+
+async function loadInvitations(etebase: Etebase.Account) {
+  const ret: Etebase.SignedInvitation[] = [];
+  const invitationManager = etebase.getInvitationManager();
+
+  let iterator: string | null = null;
+  let done = false;
+  while (!done) {
+    const invitations = await invitationManager.listIncoming({ iterator, limit: 30 });
+    iterator = invitations.iterator as string;
+    done = invitations.done;
+
+    ret.push(...invitations.data);
+  }
+
+  return ret;
+}
+
+export default function Invitations() {
+  return (
+    <Switch>
+      <Route
+        path={routeResolver.getRoute("collections.invitations")}
+        exact
+      >
+        <Redirect to={routeResolver.getRoute("collections.invitations.incoming")} />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("collections.invitations.incoming")}
+        exact
+      >
+        <InvitationsIncoming
+        />
+      </Route>
+    </Switch>
+  );
+}
+
+function InvitationsIncoming() {
+  const [invitations, setInvitations] = React.useState<Etebase.SignedInvitation[]>();
+  const [chosenInvitation, setChosenInvitation] = React.useState<Etebase.SignedInvitation>();
+  const etebase = useCredentials()!;
+
+  React.useEffect(() => {
+    loadInvitations(etebase).then(setInvitations);
+  }, [etebase]);
+
+  function removeInvitation(invite: Etebase.SignedInvitation) {
+    setInvitations(invitations?.filter((x) => x.uid !== invite.uid));
+  }
+
+  async function reject(invite: Etebase.SignedInvitation) {
+    const invitationManager = etebase.getInvitationManager();
+    await invitationManager.reject(invite);
+    removeInvitation(invite);
+  }
+
+  async function accept(invite: Etebase.SignedInvitation) {
+    const invitationManager = etebase.getInvitationManager();
+    await invitationManager.accept(invite);
+    setChosenInvitation(undefined);
+    removeInvitation(invite);
+  }
+
+  return (
+    <>
+      <AppBarOverride title="Incoming Invitations" />
+      <Container style={{ maxWidth: "30rem" }}>
+        {invitations ?
+          <List>
+            {(invitations.length > 0 ?
+              invitations.map((invite) => (
+                <ListItem
+                  key={invite.uid}
+                  rightIcon={(
+                    <>
+                      <IconButton title="Reject" onClick={() => reject(invite)}>
+                        <IconReject color="error" />
+                      </IconButton>
+                      <IconButton title="Accept" onClick={() => setChosenInvitation(invite)}>
+                        <IconAccept color="secondary" />
+                      </IconButton>
+                    </>
+                  )}
+                >
+                  Invitation from {invite.fromUsername}
+                </ListItem>
+              ))
+              :
+              <ListItem>
+                No invitations
+              </ListItem>
+            )}
+          </List>
+          :
+          <LoadingIndicator />
+        }
+      </Container>
+      {chosenInvitation && (
+        <ConfirmationDialog
+          title="Accept invitation"
+          labelOk="OK"
+          open={!!chosenInvitation}
+          onOk={() => accept(chosenInvitation)}
+          onCancel={() => setChosenInvitation(undefined)}
+        >
+          Please verify the inviter's security fingerprint to ensure the invitation is secure:
+          <div style={{ textAlign: "center" }}>
+            <PrettyFingerprint publicKey={chosenInvitation.fromPubkey} />
+          </div>
+        </ConfirmationDialog>
+      )}
+    </>
+  );
+}

webapp/src/Collections/Main.tsx

@@ -0,0 +1,151 @@
+// SPDX-FileCopyrightText: © 2020 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { Switch, Route, useHistory } from "react-router";
+
+import * as Etebase from "etebase";
+
+import { useCredentials } from "../credentials";
+import { useCollections, getCollectionManager } from "../etebase-helpers";
+import { routeResolver } from "../App";
+import LoadingIndicator from "../widgets/LoadingIndicator";
+
+import { CachedCollection, getDecryptCollectionsFunction, PimFab } from "../Pim/helpers";
+import CollectionList from "./CollectionList";
+import CollectionImport from "./CollectionImport";
+import PageNotFound from "../PageNotFound";
+import CollectionEdit from "./CollectionEdit";
+import CollectionMembers from "./CollectionMembers";
+import Collection from "./Collection";
+import { useAsyncDispatch } from "../store";
+import { collectionUpload, pushMessage } from "../store/actions";
+import Invitations from "./Invitations";
+
+const decryptCollections = getDecryptCollectionsFunction();
+
+export default function CollectionsMain() {
+  const [cachedCollections, setCachedCollections] = React.useState<CachedCollection[]>();
+  const history = useHistory();
+  const etebase = useCredentials()!;
+  const collections = useCollections(etebase);
+  const dispatch = useAsyncDispatch();
+
+  React.useEffect(() => {
+    if (collections) {
+      decryptCollections(collections)
+        .then((entries) => setCachedCollections(entries));
+      // FIXME: handle failure to decrypt collections
+    }
+  }, [collections]);
+
+  if (!cachedCollections) {
+    return (
+      <LoadingIndicator />
+    );
+  }
+
+  async function onSave(collection: Etebase.Collection): Promise<void> {
+    const colMgr = getCollectionManager(etebase);
+    await dispatch(collectionUpload(colMgr, collection));
+    dispatch(pushMessage({ message: "Collection saved", severity: "success" }));
+
+    history.push(routeResolver.getRoute("collections"));
+  }
+
+  async function onDelete(collection: Etebase.Collection) {
+    const colMgr = getCollectionManager(etebase);
+    const mtime = (new Date()).getTime();
+    const meta = collection.getMeta();
+    collection.setMeta({ ...meta, mtime });
+    collection.delete(true);
+    await dispatch(collectionUpload(colMgr, collection));
+    dispatch(pushMessage({ message: "Collection deleted", severity: "success" }));
+
+    history.push(routeResolver.getRoute("collections"));
+  }
+
+  function onCancel() {
+    history.goBack();
+  }
+
+  return (
+    <Switch>
+      <Route
+        path={routeResolver.getRoute("collections")}
+        exact
+      >
+        <CollectionList
+          collections={cachedCollections}
+        />
+        <PimFab
+          onClick={() => history.push(
+            routeResolver.getRoute("collections.new")
+          )}
+        />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("collections.import")}
+        exact
+      >
+        <CollectionImport
+          collections={cachedCollections}
+        />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("collections.new")}
+        exact
+      >
+        <CollectionEdit
+          onSave={onSave}
+          onDelete={onDelete}
+          onCancel={onCancel}
+        />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("collections.invitations")}
+      >
+        <Invitations />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("collections._id")}
+        render={({ match }) => {
+          const colUid = match.params.colUid;
+          const collection = cachedCollections.find((x) => x.collection.uid === colUid);
+          if (!collection) {
+            return (<PageNotFound />);
+          }
+
+          return (
+            <Switch>
+              <Route
+                path={routeResolver.getRoute("collections._id.edit")}
+                exact
+              >
+                <CollectionEdit
+                  collection={collection}
+                  onSave={onSave}
+                  onDelete={onDelete}
+                  onCancel={onCancel}
+                />
+              </Route>
+              <Route
+                path={routeResolver.getRoute("collections._id.members")}
+                exact
+              >
+                <CollectionMembers collection={collection} />
+              </Route>
+              <Route
+                path={routeResolver.getRoute("collections._id")}
+                exact
+              >
+                <Collection collection={collection} />
+              </Route>
+            </Switch>
+          );
+        }}
+      />
+    </Switch>
+  );
+}
+

webapp/src/Contacts/AddressBook.tsx

@@ -0,0 +1,125 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import { createSelector } from "reselect";
+
+import * as colors from "@material-ui/core/colors";
+import { AutoSizer, List as VirtualizedList } from "react-virtualized";
+
+import { Avatar } from "../widgets/Avatar";
+import { List, ListItem } from "../widgets/List";
+
+import { ContactType } from "../pim-types";
+
+function getContactColor(contact: ContactType) {
+  const colorOptions = [
+    colors.red[500],
+    colors.pink[500],
+    colors.purple[500],
+    colors.deepPurple[500],
+    colors.indigo[500],
+    colors.blue[500],
+    colors.lightBlue[500],
+    colors.cyan[500],
+    colors.teal[500],
+    colors.green[500],
+    colors.lightGreen[500],
+    colors.lime[500],
+    colors.yellow[500],
+    colors.amber[500],
+    colors.orange[500],
+    colors.deepOrange[500],
+  ];
+
+  if (!contact.uid) {
+    console.error(`Contact uid is null for contact ${contact.fn}`);
+    console.error(contact.toIcal());
+    return colorOptions[0];
+  }
+
+  let sum = 0;
+  const uid = contact.uid;
+  for (let i = 0 ; i < uid.length ; i++) {
+    sum += uid.charCodeAt(i);
+  }
+
+  return colorOptions[sum % colorOptions.length];
+}
+
+const AddressBookItem = React.memo((_props: any) => {
+  const {
+    style,
+    entry,
+    onClick,
+  } = _props;
+  const name = entry.fn;
+
+  return (
+    <ListItem
+      style={style}
+      leftIcon={
+        <Avatar style={{ backgroundColor: getContactColor(entry) }}>
+          {name && name[0] && name[0].toUpperCase()}
+        </Avatar>}
+      primaryText={name}
+      onClick={() => onClick(entry)}
+    />
+  );
+});
+
+const sortSelector = createSelector(
+  (entries: ContactType[]) => entries,
+  (entries) => {
+    return entries.sort((_a, _b) => {
+      const a = _a.fn ?? "";
+      const b = _b.fn ?? "";
+
+      return a.localeCompare(b, undefined, { sensitivity: "base" });
+    });
+  }
+);
+
+interface PropsType {
+  entries: ContactType[];
+  onItemClick: (contact: ContactType) => void;
+  filter?: (a: ContactType) => boolean;
+}
+
+class AddressBook extends React.PureComponent<PropsType> {
+  public render() {
+    const sortedEntries = sortSelector(this.props.entries);
+
+    const entries = (this.props.filter) ?
+      sortedEntries.filter(this.props.filter)
+      : sortedEntries;
+
+    return (
+      <List style={{ height: "calc(100vh - 350px)" }}>
+        <AutoSizer>
+          {({ height, width }) => (
+            <VirtualizedList
+              width={width}
+              height={height}
+              rowCount={entries.length}
+              rowHeight={56}
+              rowRenderer={({ index, key, style }) => {
+                return (
+                  <AddressBookItem
+                    key={key}
+                    style={style}
+                    entry={entries[index]}
+                    onClick={this.props.onItemClick}
+                  />
+                );
+              }}
+            />
+          )}
+        </AutoSizer>
+      </List>
+    );
+  }
+}
+
+export default AddressBook;

webapp/src/Contacts/Contact.tsx

@@ -0,0 +1,203 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import moment from "moment";
+
+import { List, ListItem, ListDivider as Divider } from "../widgets/List";
+import IconHome from "@material-ui/icons/Home";
+import IconDate from "@material-ui/icons/DateRange";
+import CommunicationCall from "@material-ui/icons/Call";
+import CommunicationChatBubble from "@material-ui/icons/ChatBubble";
+import CommunicationEmail from "@material-ui/icons/Email";
+import CopyIcon from "../icons/Copy";
+
+import PimItemHeader from "../components/PimItemHeader";
+
+import { ContactType } from "../pim-types";
+import { IconButton, Avatar } from "@material-ui/core";
+
+class Contact extends React.PureComponent {
+  public props: {
+    item?: ContactType;
+  };
+
+  public render() {
+    if (this.props.item === undefined) {
+      throw Error("Contact should be defined!");
+    }
+
+    const contact = this.props.item;
+    const name = contact.fn;
+
+    const revProp = contact.comp.getFirstProperty("rev");
+    const lastModified = (revProp) ?
+      "Modified: " + moment(revProp.getFirstValue().toJSDate()).format("LLLL") : undefined;
+
+    const lists = [];
+
+    function getAllType(
+      propName: string,
+      props_: any,
+      valueToHref?: (value: string, type: string) => string,
+      primaryTransform?: (value: string, type: string) => string,
+      secondaryTransform?: (value: string, type: string) => string) {
+
+      return contact.comp.getAllProperties(propName).map((prop, idx) => {
+        const type = prop.toJSON()[1].type;
+        const values = prop.getValues().map((val) => {
+          const primaryText = primaryTransform ? primaryTransform(val, type) : val;
+          const clipboardButton = (
+            <IconButton
+              onClick={(e) => {
+                e.preventDefault();
+                (window as any).navigator.clipboard.writeText(primaryText);
+              }}
+            >
+              <CopyIcon />
+            </IconButton>
+          );
+
+          const { ref, ...props } = props_;
+
+          return (
+            <ListItem
+              key={idx}
+              href={valueToHref ? valueToHref(val, type) : undefined}
+              primaryText={primaryText}
+              rightIcon={clipboardButton}
+              secondaryText={secondaryTransform ? secondaryTransform(val, type) : type}
+              {...props}
+            />
+          );
+        });
+        return values;
+      });
+    }
+
+    lists.push(getAllType(
+      "tel",
+      {
+        leftIcon: <CommunicationCall />,
+      },
+      (x) => ("tel:" + x)
+    ));
+
+    lists.push(getAllType(
+      "email",
+      {
+        leftIcon: <CommunicationEmail />,
+      },
+      (x) => ("mailto:" + x)
+    ));
+
+    lists.push(getAllType(
+      "impp",
+      {
+        leftIcon: <CommunicationChatBubble />,
+      },
+      (x) => x,
+      (x) => (x.substring(x.indexOf(":") + 1)),
+      (x) => (x.substring(0, x.indexOf(":")))
+    ));
+
+    lists.push(getAllType(
+      "adr",
+      {
+        leftIcon: <IconHome />,
+      }
+    ));
+
+    lists.push(getAllType(
+      "bday",
+      {
+        leftIcon: <IconDate />,
+      },
+      undefined,
+      ((x: any) => moment(x.toJSDate()).format("dddd, LL")),
+      () => "Birthday"
+    ));
+
+    lists.push(getAllType(
+      "anniversary",
+      {
+        leftIcon: <IconDate />,
+      },
+      undefined,
+      ((x: any) => moment(x.toJSDate()).format("dddd, LL")),
+      () => "Anniversary"
+    ));
+
+    const skips = ["tel", "email", "impp", "adr", "bday", "anniversary", "rev",
+      "prodid", "uid", "fn", "n", "version", "photo", "note"];
+    const theRest = contact.comp.getAllProperties().filter((prop) => (
+      skips.indexOf(prop.name) === -1
+    )).map((prop, idx) => {
+      const values = prop.getValues().map((_val) => {
+        const val = (_val instanceof String) ? _val : _val.toString();
+        return (
+          <ListItem
+            key={idx}
+            insetChildren
+            primaryText={val}
+            secondaryText={prop.name}
+          />
+        );
+      });
+      return values;
+    });
+
+    {
+      const note = contact.comp.getFirstPropertyValue("note");
+      const item = (
+        <ListItem
+          key="note"
+          insetChildren
+          secondaryText="note"
+        >
+          <pre style={{ wordWrap: "break-word", whiteSpace: "pre-wrap", overflowX: "auto" }}>{note}</pre>
+        </ListItem>
+      );
+      theRest.push([item]);
+    }
+
+    function listIfNotEmpty(items: JSX.Element[][]) {
+      if (items.length > 0) {
+        return (
+          <React.Fragment>
+            <List>
+              {items}
+            </List>
+            <List>
+              <Divider inset />
+            </List>
+          </React.Fragment>
+        );
+      } else {
+        return undefined;
+      }
+    }
+
+    const contactImageSrc = contact.comp.getFirstProperty("photo")?.getFirstValue();
+
+    return (
+      <div>
+        <PimItemHeader text={name} rightItem={contactImageSrc && (<Avatar style={{ width: "3em", height: "3em" }} src={contactImageSrc} />)}>
+          {lastModified && (
+            <span style={{ fontSize: "90%" }}>{lastModified}</span>
+          )}
+        </PimItemHeader>
+        {lists.map((list, idx) => (
+          <React.Fragment key={idx}>
+            {listIfNotEmpty(list)}
+          </React.Fragment>
+        ))}
+        <List>
+          {theRest}
+        </List>
+      </div>
+    );
+  }
+}
+
+export default Contact;

webapp/src/Contacts/ContactEdit.tsx

@@ -0,0 +1,710 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import IconButton from "@material-ui/core/IconButton";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import * as colors from "@material-ui/core/colors";
+
+import IconDelete from "@material-ui/icons/Delete";
+import IconAdd from "@material-ui/icons/Add";
+import IconClear from "@material-ui/icons/Clear";
+import IconCancel from "@material-ui/icons/Clear";
+import IconSave from "@material-ui/icons/Save";
+
+import ConfirmationDialog from "../widgets/ConfirmationDialog";
+
+import { CachedCollection } from "../Pim/helpers";
+
+import * as uuid from "uuid";
+import * as ICAL from "ical.js";
+
+import { ContactType } from "../pim-types";
+
+import { History } from "history";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+
+const telTypes = [
+  { type: "Home" },
+  { type: "Work" },
+  { type: "Cell" },
+  { type: "Other" },
+];
+
+const emailTypes = telTypes;
+
+const addressTypes = [
+  { type: "Home" },
+  { type: "Work" },
+  { type: "Other" },
+];
+
+const imppTypes = [
+  { type: "Jabber" },
+  { type: "Hangouts" },
+  { type: "Other" },
+];
+
+const TypeSelector = (props: any) => {
+  const types = props.types as Array<{ type: string }>;
+
+  return (
+    <Select
+      style={props.style}
+      value={props.value}
+      onChange={props.onChange}
+    >
+      {types.map((x) => (
+        <MenuItem key={x.type} value={x.type.toLowerCase()}>{x.type}</MenuItem>
+      ))}
+    </Select>
+  );
+};
+
+class ValueType {
+  public type: string;
+  public value: string;
+
+  constructor(type?: string, value?: string) {
+    this.type = type ? type : "home";
+    this.value = value ? value : "";
+  }
+}
+
+interface ValueTypeComponentProps {
+  type?: string;
+  style?: object;
+  multiline?: boolean;
+
+  types: Array<{ type: string }>;
+  name: string;
+  placeholder: string;
+  value: ValueType;
+  onClearRequest: (name: string) => void;
+  onChange: (name: string, type: string, value: string) => void;
+}
+
+const ValueTypeComponent = (props: ValueTypeComponentProps) => {
+  return (
+    <React.Fragment>
+      <TextField
+        type={props.type}
+        placeholder={props.placeholder}
+        multiline={props.multiline}
+        style={props.style}
+        value={props.value.value}
+        onChange={(event: React.ChangeEvent<any>) => props.onChange(props.name, props.value.type, event.target.value)}
+      />
+      <IconButton
+        onClick={() => props.onClearRequest(props.name)}
+        title="Remove"
+      >
+        <IconClear />
+      </IconButton>
+      <TypeSelector
+        value={props.value.type}
+        types={props.types}
+        onChange={(event: React.ChangeEvent<HTMLSelectElement>) => (
+          props.onChange(props.name, event.target.value, props.value.value)
+        )}
+      />
+    </React.Fragment>
+  );
+};
+
+interface PropsType {
+  collections: CachedCollection[];
+  initialCollection?: string;
+  item?: ContactType;
+  onSave: (contact: ContactType, collectionUid: string, originalContact?: ContactType) => Promise<void>;
+  onDelete: (contact: ContactType, collectionUid: string) => void;
+  onCancel: () => void;
+  history: History<any>;
+  allGroups: ContactType[];
+}
+
+class ContactEdit extends React.PureComponent<PropsType> {
+  public state: {
+    uid: string;
+    fn: string;
+    lastName: string;
+    firstName: string;
+    middleName: string;
+    namePrefix: string;
+    nameSuffix: string;
+    phone: ValueType[];
+    email: ValueType[];
+    address: ValueType[];
+    impp: ValueType[];
+    org: string;
+    note: string;
+    title: string;
+
+    collectionUid: string;
+    showDeleteDialog: boolean;
+    collectionGroups: {};
+    newGroups: string[];
+    originalGroups: {};
+  };
+
+  constructor(props: PropsType) {
+    super(props);
+    this.state = {
+      uid: "",
+      fn: "",
+      lastName: "",
+      firstName: "",
+      middleName: "",
+      namePrefix: "",
+      nameSuffix: "",
+      phone: [new ValueType()],
+      email: [new ValueType()],
+      address: [new ValueType()],
+      impp: [new ValueType("jabber")],
+      org: "",
+      note: "",
+      title: "",
+
+      collectionUid: "",
+      showDeleteDialog: false,
+      collectionGroups: {},
+      newGroups: [],
+      originalGroups: [],
+    };
+
+    if (this.props.item !== undefined) {
+      const contact = this.props.item;
+
+      this.state.uid = contact.uid;
+      this.state.fn = contact.fn ? contact.fn : "";
+      if (contact.n) {
+        this.state.lastName = contact.n[0];
+        this.state.firstName = contact.n[1];
+        this.state.middleName = contact.n[2];
+        this.state.namePrefix = contact.n[3];
+        this.state.nameSuffix = contact.n[4];
+      } else {
+        let name = this.state.fn.trim().split(",");
+        if (name.length > 2 && name[0] !== "" && name[name.length - 1] !== "") {
+          this.state.nameSuffix = name.pop() || "";
+        }
+        name = name.join(",").split(" ");
+        if (name.length === 1) {
+          this.state.firstName = name[0];
+        } else if (name.length === 2) {
+          this.state.firstName = name[0];
+          this.state.lastName = name[1];
+        } else if (name.length > 2) {
+          this.state.firstName = name.slice(0, name.length - 2).join(" ");
+          this.state.middleName = name[name.length - 2];
+          this.state.lastName = name[name.length - 1];
+        }
+      }
+
+      // FIXME: Am I really getting all the values this way?
+      const propToValueType = (comp: ICAL.Component, propName: string) => (
+        comp.getAllProperties(propName).map((prop) => (
+          new ValueType(
+            prop.toJSON()[1].type,
+            prop.getFirstValue()
+          )
+        ))
+      );
+
+      this.state.phone = propToValueType(contact.comp, "tel");
+      this.state.email = propToValueType(contact.comp, "email");
+      this.state.address = propToValueType(contact.comp, "adr");
+      this.state.impp = propToValueType(contact.comp, "impp");
+
+      const propToStringType = (comp: ICAL.Component, propName: string) => {
+        const val = comp.getFirstPropertyValue(propName);
+        return val ? val : "";
+      };
+
+      this.state.org = propToStringType(contact.comp, "org");
+      this.state.title = propToStringType(contact.comp, "title");
+      this.state.note = propToStringType(contact.comp, "note");
+
+    } else {
+      this.state.uid = uuid.v4();
+    }
+
+    if (props.initialCollection) {
+      this.state.collectionUid = props.initialCollection;
+    } else if (props.collections[0]) {
+      this.state.collectionUid = props.collections[0].collection.uid;
+    }
+
+    this.state.collectionGroups = this.getCollectionGroups(this.state.collectionUid);
+    Object.values(this.state.collectionGroups).forEach((group: ContactType) => {
+      if (group.members.includes(this.state.uid)) {
+        this.state.newGroups.push(group.fn);
+        this.state.originalGroups[group.fn] = undefined;
+      }
+    });
+
+    this.onSubmit = this.onSubmit.bind(this);
+    this.addMetadata = this.addMetadata.bind(this);
+    this.getCollectionGroups = this.getCollectionGroups.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleCollectionChange = this.handleCollectionChange.bind(this);
+    this.reloadGroupSuggestions = this.reloadGroupSuggestions.bind(this);
+    this.handleValueTypeChange = this.handleValueTypeChange.bind(this);
+    this.addValueType = this.addValueType.bind(this);
+    this.removeValueType = this.removeValueType.bind(this);
+    this.onDeleteRequest = this.onDeleteRequest.bind(this);
+  }
+
+  public addValueType(name: string, _type?: string) {
+    const type = _type ? _type : "home";
+    this.setState((prevState) => {
+      const newArray = prevState[name].slice(0);
+      newArray.push(new ValueType(type));
+      return {
+        ...prevState,
+        [name]: newArray,
+      };
+    });
+  }
+
+  public removeValueType(name: string, idx: number) {
+    this.setState((prevState) => {
+      const newArray = prevState[name].slice(0);
+      newArray.splice(idx, 1);
+      return {
+        ...prevState,
+        [name]: newArray,
+      };
+    });
+  }
+
+  public handleValueTypeChange(name: string, idx: number, value: ValueType) {
+    this.setState((prevState) => {
+      const newArray = prevState[name].slice(0);
+      newArray[idx] = value;
+      return {
+        ...prevState,
+        [name]: newArray,
+      };
+    });
+  }
+
+  public handleChange(name: string, value: string | string[]) {
+    this.setState({
+      [name]: value,
+    });
+  }
+
+  public getCollectionGroups(collectionUid: string) {
+    const groups = {};
+    this.props.allGroups.forEach((group) => {
+      if (collectionUid === group.collectionUid) {
+        groups[group.fn] = group;
+      }
+    });
+    return groups;
+  }
+
+  public reloadGroupSuggestions(collectionUid: string) {
+    this.setState({
+      collectionGroups: this.getCollectionGroups(collectionUid),
+      newGroups: [],
+    });
+  }
+
+  public handleCollectionChange(contact: any) {
+    const name = contact.target.name;
+    const value = contact.target.value;
+    this.reloadGroupSuggestions(value);
+    this.handleChange(name, value);
+  }
+
+  public handleInputChange(contact: any) {
+    const name = contact.target.name;
+    const value = contact.target.value;
+    this.handleChange(name, value);
+  }
+
+  public addMetadata(item: ContactType, uid: string, isGroup: boolean) {
+    const comp = item.comp;
+    comp.updatePropertyWithValue("prodid", "-//iCal.js EteSync Web");
+    comp.updatePropertyWithValue("version", "4.0");
+    comp.updatePropertyWithValue("uid", uid);
+    comp.updatePropertyWithValue("rev", ICAL.Time.now());
+    if (isGroup) {
+      comp.updatePropertyWithValue("kind", "group");
+    }
+  }
+
+  public onSubmit(e: React.FormEvent<any>) {
+    e.preventDefault();
+
+    const contact = (this.props.item) ?
+      this.props.item.clone()
+      :
+      new ContactType(new ICAL.Component(["vcard", [], []]))
+      ;
+
+    const comp = contact.comp;
+    this.addMetadata(contact, this.state.uid, false);
+
+    // Add new groups
+    this.state.newGroups.forEach((group) => {
+      if (!this.state.collectionGroups[group]) {
+        const newGroup = new ContactType(new ICAL.Component(["vcard", [], []]));
+        this.addMetadata(newGroup, uuid.v4(), true);
+        newGroup.comp.updatePropertyWithValue("fn", group.trim());
+        newGroup.comp.updatePropertyWithValue("member", `urn:uuid:${this.state.uid}`);
+        this.props.onSave(newGroup, this.state.collectionUid, undefined);
+      } else if (!(group in this.state.originalGroups)) {
+        const oldGroup = this.state.collectionGroups[group];
+        const updatedGroup = oldGroup.clone();
+        updatedGroup.comp.addPropertyWithValue("member", `urn:uuid:${this.state.uid}`);
+        this.props.onSave(updatedGroup, this.state.collectionUid, oldGroup);
+      }
+    });
+
+    // Remove deleted groups
+    Object.keys(this.state.originalGroups).filter((x) => !this.state.newGroups.includes(x)).forEach((removed) => {
+      const deletedGroup = this.state.collectionGroups[removed];
+      const updatedGroup = deletedGroup.clone();
+      const members = updatedGroup.members.filter((uid: string) => uid !== this.state.uid);
+      updatedGroup.comp.removeAllProperties("member");
+      members.forEach((m: string) => updatedGroup.comp.addPropertyWithValue("member", `urn:uuid:${m}`));
+      this.props.onSave(updatedGroup, this.state.collectionUid, deletedGroup);
+    });
+
+    const lastName = this.state.lastName.trim();
+    const firstName = this.state.firstName.trim();
+    const middleName = this.state.middleName.trim();
+    const namePrefix = this.state.namePrefix.trim();
+    const nameSuffix = this.state.nameSuffix.trim();
+    
+    let fn = `${namePrefix} ${firstName} ${middleName} ${lastName}`.trim();
+
+    if (fn === "") { 
+      fn = nameSuffix;
+    } else if (nameSuffix !== "") { 
+      fn = `${fn}, ${nameSuffix}`;
+    }
+
+    comp.updatePropertyWithValue("fn", fn);
+
+    const name = [lastName,
+      firstName,
+      middleName,
+      namePrefix,
+      nameSuffix,
+    ];
+
+    comp.updatePropertyWithValue("n", name);
+
+    function setProperties(name: string, source: ValueType[]) {
+      comp.removeAllProperties(name);
+      source.forEach((x) => {
+        if (x.value === "") {
+          return;
+        }
+
+        const prop = new ICAL.Property(name, comp);
+        prop.setParameter("type", x.type);
+        prop.setValue(x.value);
+        comp.addProperty(prop);
+      });
+    }
+
+    setProperties("tel", this.state.phone);
+    setProperties("email", this.state.email);
+    setProperties("adr", this.state.address);
+    setProperties("impp", this.state.impp.map((x) => (
+      { type: x.type, value: x.type + ":" + x.value }
+    )));
+
+    function setProperty(name: string, value: string) {
+      comp.removeAllProperties(name);
+      if (value !== "") {
+        comp.updatePropertyWithValue(name, value);
+      }
+    }
+
+    setProperty("org", this.state.org);
+    setProperty("title", this.state.title);
+    setProperty("note", this.state.note);
+
+    this.props.onSave(contact, this.state.collectionUid, this.props.item)
+      .then(() => {
+        this.props.history.goBack();
+      });
+  }
+
+  public onDeleteRequest() {
+    this.setState({
+      showDeleteDialog: true,
+    });
+  }
+
+  public render() {
+    const styles = {
+      form: {
+      },
+      fullWidth: {
+        width: "100%",
+        boxSizing: "border-box" as any,
+      },
+      submit: {
+        marginTop: 40,
+        marginBottom: 20,
+        textAlign: "right" as any,
+      },
+    };
+
+    return (
+      <React.Fragment>
+        <h2>
+          {this.props.item ? "Edit Contact" : "New Contact"}
+        </h2>
+        <form style={styles.form} onSubmit={this.onSubmit}>
+          <FormControl disabled={this.props.item !== undefined} style={styles.fullWidth}>
+            <InputLabel>
+              Saving to
+            </InputLabel>
+            <Select
+              name="collectionUid"
+              value={this.state.collectionUid}
+              onChange={this.handleCollectionChange}
+            >
+              {this.props.collections.map((x) => (
+                <MenuItem key={x.collection.uid} value={x.collection.uid}>{x.metadata.name}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <TextField
+            name="namePrefix"
+            placeholder="Prefix"
+            style={{ marginTop: "2rem", ...styles.fullWidth }}
+            value={this.state.namePrefix}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="firstName"
+            placeholder="First name"
+            style={{ marginTop: "2rem", ...styles.fullWidth }}
+            value={this.state.firstName}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="middleName"
+            placeholder="Middle name"
+            style={{ marginTop: "2rem", ...styles.fullWidth }}
+            value={this.state.middleName}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="lastName"
+            placeholder="Last name"
+            style={{ marginTop: "2rem", ...styles.fullWidth }}
+            value={this.state.lastName}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="nameSuffix"
+            placeholder="Suffix"
+            style={{ marginTop: "2rem", ...styles.fullWidth }}
+            value={this.state.nameSuffix}
+            onChange={this.handleInputChange}
+          />
+
+          <div>
+            Phone numbers
+            <IconButton
+              onClick={() => this.addValueType("phone")}
+              title="Add phone number"
+            >
+              <IconAdd />
+            </IconButton>
+          </div>
+          {this.state.phone.map((x, idx) => (
+            <ValueTypeComponent
+              key={idx}
+              name="phone"
+              placeholder="Phone"
+              types={telTypes}
+              value={x}
+              onClearRequest={(name: string) => this.removeValueType(name, idx)}
+              onChange={(name: string, type: string, value: string) => (
+                this.handleValueTypeChange(name, idx, { type, value })
+              )}
+            />
+          ))}
+
+          <div>
+            Emails
+            <IconButton
+              onClick={() => this.addValueType("email")}
+              title="Add email address"
+            >
+              <IconAdd />
+            </IconButton>
+          </div>
+          {this.state.email.map((x, idx) => (
+            <ValueTypeComponent
+              key={idx}
+              name="email"
+              placeholder="Email"
+              types={emailTypes}
+              value={x}
+              onClearRequest={(name: string) => this.removeValueType(name, idx)}
+              onChange={(name: string, type: string, value: string) => (
+                this.handleValueTypeChange(name, idx, { type, value })
+              )}
+            />
+          ))}
+
+          <div>
+            IMPP
+            <IconButton
+              onClick={() => this.addValueType("impp", "jabber")}
+              title="Add impp address"
+            >
+              <IconAdd />
+            </IconButton>
+          </div>
+          {this.state.impp.map((x, idx) => (
+            <ValueTypeComponent
+              key={idx}
+              name="impp"
+              placeholder="IMPP"
+              types={imppTypes}
+              value={x}
+              onClearRequest={(name: string) => this.removeValueType(name, idx)}
+              onChange={(name: string, type: string, value: string) => (
+                this.handleValueTypeChange(name, idx, { type, value })
+              )}
+            />
+          ))}
+
+          <div>
+            Addresses
+            <IconButton
+              onClick={() => this.addValueType("address")}
+              title="Add address"
+            >
+              <IconAdd />
+            </IconButton>
+          </div>
+          {this.state.address.map((x, idx) => (
+            <ValueTypeComponent
+              key={idx}
+              name="address"
+              placeholder="Address"
+              types={addressTypes}
+              multiline
+              value={x}
+              onClearRequest={(name: string) => this.removeValueType(name, idx)}
+              onChange={(name: string, type: string, value: string) => (
+                this.handleValueTypeChange(name, idx, { type, value })
+              )}
+            />
+          ))}
+
+          <TextField
+            name="org"
+            placeholder="Organization"
+            style={styles.fullWidth}
+            value={this.state.org}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="title"
+            placeholder="Title"
+            style={styles.fullWidth}
+            value={this.state.title}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="note"
+            multiline
+            placeholder="Note"
+            style={styles.fullWidth}
+            value={this.state.note}
+            onChange={this.handleInputChange}
+          />
+          <Autocomplete
+            style={styles.fullWidth}
+            freeSolo
+            multiple
+            clearOnBlur
+            selectOnFocus
+            options={Object.keys(this.state.collectionGroups)}
+            value={this.state.newGroups}
+            onChange={(_e, value) => this.handleChange("newGroups", value)}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                variant="standard"
+                label="Groups"
+                fullWidth
+              />
+            )}
+          />
+
+          <div style={styles.submit}>
+            <Button
+              variant="contained"
+              onClick={this.props.onCancel}
+            >
+              <IconCancel style={{ marginRight: 8 }} />
+              Cancel
+            </Button>
+
+            {this.props.item &&
+              <Button
+                variant="contained"
+                style={{ marginLeft: 15, backgroundColor: colors.red[500], color: "white" }}
+                onClick={this.onDeleteRequest}
+              >
+                <IconDelete style={{ marginRight: 8 }} />
+                Delete
+              </Button>
+            }
+
+            <Button
+              type="submit"
+              variant="contained"
+              color="secondary"
+              style={{ marginLeft: 15 }}
+            >
+              <IconSave style={{ marginRight: 8 }} />
+              Save
+            </Button>
+          </div>
+        </form>
+
+        <ConfirmationDialog
+          title="Delete Confirmation"
+          labelOk="Delete"
+          open={this.state.showDeleteDialog}
+          onOk={() => this.props.onDelete(this.props.item!, this.props.initialCollection!)}
+          onCancel={() => this.setState({ showDeleteDialog: false })}
+        >
+          Are you sure you would like to delete this contact?
+        </ConfirmationDialog>
+      </React.Fragment>
+    );
+  }
+}
+
+export default ContactEdit;

webapp/src/Contacts/GroupEdit.tsx

@@ -0,0 +1,288 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import InputLabel from "@material-ui/core/InputLabel";
+import * as colors from "@material-ui/core/colors";
+
+import IconDelete from "@material-ui/icons/Delete";
+import IconCancel from "@material-ui/icons/Clear";
+import IconSave from "@material-ui/icons/Save";
+
+import ConfirmationDialog from "../widgets/ConfirmationDialog";
+
+import { CachedCollection } from "../Pim/helpers";
+
+import * as uuid from "uuid";
+import * as ICAL from "ical.js";
+
+import { ContactType } from "../pim-types";
+
+import { History } from "history";
+
+class ValueType {
+  public type: string;
+  public value: string;
+
+  constructor(type?: string, value?: string) {
+    this.type = type ? type : "home";
+    this.value = value ? value : "";
+  }
+}
+
+interface PropsType {
+  collections: CachedCollection[];
+  initialCollection?: string;
+  item?: ContactType;
+  onSave: (contact: ContactType, collectionUid: string, originalContact?: ContactType) => Promise<void>;
+  onDelete: (contact: ContactType, collectionUid: string) => void;
+  onCancel: () => void;
+  history: History<any>;
+  allGroups: ContactType[];
+}
+
+class GroupEdit extends React.PureComponent<PropsType> {
+  public state: {
+    uid: string;
+    fn: string;
+    collectionUid: string;
+    showDeleteDialog: boolean;
+    collectionGroups: {};
+    showError: boolean;
+  };
+
+  constructor(props: PropsType) {
+    super(props);
+    this.state = {
+      uid: "",
+      fn: "",
+      collectionUid: "",
+      showDeleteDialog: false,
+      collectionGroups: {},
+      showError: false,
+    };
+
+    if (this.props.item !== undefined) {
+      const group = this.props.item;
+      this.state.uid = group.uid;
+      this.state.fn = group.fn;
+    } else {
+      this.state.uid = uuid.v4();
+    }
+
+    if (props.initialCollection) {
+      this.state.collectionUid = props.initialCollection;
+    } else if (props.collections[0]) {
+      this.state.collectionUid = props.collections[0].collection.uid;
+    }
+
+    this.state.collectionGroups = this.getCollectionGroups(this.state.collectionUid);
+
+    this.onSubmit = this.onSubmit.bind(this);
+    this.getCollectionGroups = this.getCollectionGroups.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleCollectionChange = this.handleCollectionChange.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleValueTypeChange = this.handleValueTypeChange.bind(this);
+    this.addValueType = this.addValueType.bind(this);
+    this.removeValueType = this.removeValueType.bind(this);
+    this.onDeleteRequest = this.onDeleteRequest.bind(this);
+  }
+
+  public addValueType(name: string, _type?: string) {
+    const type = _type ? _type : "home";
+    this.setState((prevState) => {
+      const newArray = prevState[name].slice(0);
+      newArray.push(new ValueType(type));
+      return {
+        ...prevState,
+        [name]: newArray,
+      };
+    });
+  }
+
+  public removeValueType(name: string, idx: number) {
+    this.setState((prevState) => {
+      const newArray = prevState[name].slice(0);
+      newArray.splice(idx, 1);
+      return {
+        ...prevState,
+        [name]: newArray,
+      };
+    });
+  }
+
+  public handleValueTypeChange(name: string, idx: number, value: ValueType) {
+    this.setState((prevState) => {
+      const newArray = prevState[name].slice(0);
+      newArray[idx] = value;
+      return {
+        ...prevState,
+        [name]: newArray,
+      };
+    });
+  }
+
+  public handleChange(name: string, value: string) {
+    this.setState({
+      [name]: value,
+    });
+  }
+
+  public getCollectionGroups(collectionUid: string) {
+    const groups = {};
+    this.props.allGroups.forEach((group) => {
+      if (collectionUid === group.collectionUid) {
+        groups[group.fn] = null;
+      }
+    });
+    return groups;
+  }
+
+  public handleCollectionChange(contact: any) {
+    const name = contact.target.name;
+    const collectionUid: string = contact.target.value;
+    this.handleChange(name, collectionUid);
+    this.setState({ "collectionGroups": this.getCollectionGroups(collectionUid) });
+  }
+
+  public handleInputChange(contact: any) {
+    const name = contact.target.name;
+    const value = contact.target.value;
+    this.handleChange(name, value);
+  }
+
+  public onSubmit(e: React.FormEvent<any>) {
+    e.preventDefault();
+
+    const nameUsed = this.state.fn in this.state.collectionGroups;
+    if ((this.props.item && this.state.fn !== this.props.item.fn && nameUsed) || (!this.props.item && nameUsed)) {
+      this.setState({ showError: true });
+      return;
+    }
+
+    const group = (this.props.item) ?
+      this.props.item.clone()
+      :
+      new ContactType(new ICAL.Component(["vcard", [], []]))
+      ;
+
+    const comp = group.comp;
+    comp.updatePropertyWithValue("prodid", "-//iCal.js EteSync Web");
+    comp.updatePropertyWithValue("version", "4.0");
+    comp.updatePropertyWithValue("uid", this.state.uid);
+    comp.updatePropertyWithValue("rev", ICAL.Time.now());
+    comp.updatePropertyWithValue("kind", "group");
+    comp.updatePropertyWithValue("fn", this.state.fn.trim());
+
+    this.props.onSave(group, this.state.collectionUid, this.props.item)
+      .then(() => {
+        this.props.history.goBack();
+      });
+  }
+
+  public onDeleteRequest() {
+    this.setState({
+      showDeleteDialog: true,
+    });
+  }
+
+  public render() {
+    const styles = {
+      form: {
+      },
+      fullWidth: {
+        width: "100%",
+        boxSizing: "border-box" as any,
+      },
+      submit: {
+        marginTop: 40,
+        marginBottom: 20,
+        textAlign: "right" as any,
+      },
+    };
+
+    return (
+      <React.Fragment>
+        <h2>
+          {this.props.item ? "Edit Group" : "New Group"}
+        </h2>
+        <form style={styles.form} onSubmit={this.onSubmit}>
+          <FormControl disabled={this.props.item !== undefined} style={styles.fullWidth}>
+            <InputLabel>
+              Saving to
+            </InputLabel>
+            <Select
+              name="collectionUid"
+              value={this.state.collectionUid}
+              onChange={this.handleCollectionChange}
+            >
+              {this.props.collections.map((x) => (
+                <MenuItem key={x.collection.uid} value={x.collection.uid}>{x.metadata.name}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <TextField
+            name="fn"
+            placeholder="Name"
+            error={this.state.showError}
+            helperText="Group names must be unique"
+            style={{ marginTop: "2rem", ...styles.fullWidth }}
+            value={this.state.fn}
+            onChange={this.handleInputChange}
+          />
+
+          <div style={styles.submit}>
+            <Button
+              variant="contained"
+              onClick={this.props.onCancel}
+            >
+              <IconCancel style={{ marginRight: 8 }} />
+              Cancel
+            </Button>
+
+            {this.props.item &&
+              <Button
+                variant="contained"
+                style={{ marginLeft: 15, backgroundColor: colors.red[500], color: "white" }}
+                onClick={this.onDeleteRequest}
+              >
+                <IconDelete style={{ marginRight: 8 }} />
+                Delete
+              </Button>
+            }
+
+            <Button
+              type="submit"
+              variant="contained"
+              color="secondary"
+              style={{ marginLeft: 15 }}
+              disabled={this.state.fn.length === 0}
+            >
+              <IconSave style={{ marginRight: 8 }} />
+              Save
+            </Button>
+          </div>
+        </form>
+
+        <ConfirmationDialog
+          title="Delete Confirmation"
+          labelOk="Delete"
+          open={this.state.showDeleteDialog}
+          onOk={() => this.props.onDelete(this.props.item!, this.props.initialCollection!)}
+          onCancel={() => this.setState({ showDeleteDialog: false })}
+        >
+          Are you sure you would like to delete this group?
+        </ConfirmationDialog>
+      </React.Fragment>
+    );
+  }
+}
+
+export default GroupEdit;

webapp/src/Contacts/Main.tsx

@@ -0,0 +1,242 @@
+// SPDX-FileCopyrightText: © 2020 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { Switch, Route, useHistory } from "react-router";
+
+import * as Etebase from "etebase";
+
+import { Button, useTheme } from "@material-ui/core";
+import IconEdit from "@material-ui/icons/Edit";
+import IconChangeHistory from "@material-ui/icons/ChangeHistory";
+
+import { ContactType, PimType } from "../pim-types";
+import { useCredentials } from "../credentials";
+import { useItems, useCollections } from "../etebase-helpers";
+import { routeResolver } from "../App";
+import SearchableAddressBook from "./SearchableAddressBook";
+import Contact from "./Contact";
+import LoadingIndicator from "../widgets/LoadingIndicator";
+import ContactEdit from "./ContactEdit";
+import GroupEdit from "./GroupEdit";
+import PageNotFound, { PageNotFoundRoute } from "../PageNotFound";
+
+import { CachedCollection, getItemNavigationUid, getDecryptCollectionsFunction, getDecryptItemsFunction, PimFab, itemSave, itemDelete } from "../Pim/helpers";
+import ItemChangeHistory from "../Pim/ItemChangeHistory";
+
+const colType = "etebase.vcard";
+
+const decryptCollections = getDecryptCollectionsFunction(colType);
+const decryptItems = getDecryptItemsFunction(colType, ContactType.parse);
+
+export default function ContactsMain() {
+  const [entries, setEntries] = React.useState<Map<string, Map<string, ContactType>>>();
+  const [cachedCollections, setCachedCollections] = React.useState<CachedCollection[]>();
+  const theme = useTheme();
+  const history = useHistory();
+  const etebase = useCredentials()!;
+  const collections = useCollections(etebase, colType);
+  const items = useItems(etebase, colType);
+
+  React.useEffect(() => {
+    if (!collections || !items) {
+      return;
+    }
+    (async () => {
+      const colEntries = await decryptCollections(collections);
+      const entries = await decryptItems(items);
+
+      setCachedCollections(colEntries);
+      setEntries(entries);
+    })();
+  }, [items, collections]);
+
+  if (!entries || !cachedCollections) {
+    return (
+      <LoadingIndicator />
+    );
+  }
+
+  async function onItemSave(item: PimType, collectionUid: string, originalItem?: PimType): Promise<void> {
+    const collection = collections!.find((x) => x.uid === collectionUid)!;
+    await itemSave(etebase, collection, items!, item, collectionUid, originalItem);
+  }
+
+  async function onItemDelete(item: PimType, collectionUid: string) {
+    const collection = collections!.find((x) => x.uid === collectionUid)!;
+    await itemDelete(etebase, collection, items!, item, collectionUid);
+
+    history.push(routeResolver.getRoute("pim.contacts"));
+  }
+
+  function onCancel() {
+    history.goBack();
+  }
+
+  const flatEntries = [];
+  for (const col of entries.values()) {
+    for (const item of col.values()) {
+      flatEntries.push(item);
+    }
+  }
+
+  const allGroups = flatEntries.filter((x) => x.group);
+
+  const styles = {
+    button: {
+      marginLeft: theme.spacing(1),
+    },
+    leftIcon: {
+      marginRight: theme.spacing(1),
+    },
+  };
+
+  return (
+    <Switch>
+      <Route
+        path={routeResolver.getRoute("pim.contacts")}
+        exact
+      >
+        <SearchableAddressBook
+          entries={flatEntries}
+          onItemClick={(item) => history.push(
+            routeResolver.getRoute("pim.contacts._id", { itemUid: getItemNavigationUid(item) })
+          )}
+          onNewGroupClick={() => history.push(
+            routeResolver.getRoute("pim.contacts.new.group")
+          )}
+        />
+        <PimFab
+          onClick={() => history.push(
+            routeResolver.getRoute("pim.contacts.new.contact")
+          )}
+        />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("pim.contacts.new.group")}
+        exact
+      >
+        <GroupEdit
+          collections={cachedCollections}
+          onSave={onItemSave}
+          onDelete={onItemDelete}
+          onCancel={onCancel}
+          history={history}
+          allGroups={allGroups}
+        />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("pim.contacts.new.contact")}
+        exact
+      >
+        <ContactEdit
+          collections={cachedCollections}
+          onSave={onItemSave}
+          onDelete={onItemDelete}
+          onCancel={onCancel}
+          history={history}
+          allGroups={allGroups}
+        />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("pim.contacts._id.log")}
+        render={({ match }) => {
+          // We have this path outside because we don't want the item existing check
+          const [colUid, itemUid] = match.params.itemUid.split("|");
+          const cachedCollection = cachedCollections!.find((x) => x.collection.uid === colUid)!;
+          if (!cachedCollection) {
+            return (<PageNotFound />);
+          }
+
+          return (
+            <ItemChangeHistory collection={cachedCollection} itemUid={itemUid} />
+          );
+        }}
+      />
+      <Route
+        path={routeResolver.getRoute("pim.contacts._id")}
+        render={({ match }) => {
+          const [colUid, itemUid] = match.params.itemUid.split("|");
+          const item = entries.get(colUid)?.get(itemUid);
+          if (!item) {
+            return (<PageNotFound />);
+          }
+
+          const collection = collections!.find((x) => x.uid === colUid)!;
+          const readOnly = collection.accessLevel === Etebase.CollectionAccessLevel.ReadOnly;
+          const path = `pim.contacts._id.edit.${item.group ? "group" : "contact"}`;
+
+          return (
+            <Switch>
+              <Route
+                path={routeResolver.getRoute(path)}
+                exact
+              >
+                {item.group ?
+                  <GroupEdit
+                    key={itemUid}
+                    initialCollection={item.collectionUid}
+                    item={item}
+                    collections={cachedCollections}
+                    onSave={onItemSave}
+                    onDelete={onItemDelete}
+                    onCancel={onCancel}
+                    history={history}
+                    allGroups={allGroups}
+                  />
+                  :
+                  <ContactEdit
+                    key={itemUid}
+                    initialCollection={item.collectionUid}
+                    item={item}
+                    collections={cachedCollections}
+                    onSave={onItemSave}
+                    onDelete={onItemDelete}
+                    onCancel={onCancel}
+                    history={history}
+                    allGroups={allGroups}
+                  />
+                }
+              </Route>
+              <Route
+                path={routeResolver.getRoute("pim.contacts._id")}
+                exact
+              >
+                <div style={{ textAlign: "right", marginBottom: 15 }}>
+                  <Button
+                    variant="contained"
+                    style={styles.button}
+                    onClick={() =>
+                      history.push(routeResolver.getRoute("pim.contacts._id.log", { itemUid: getItemNavigationUid(item) }))
+                    }
+                  >
+                    <IconChangeHistory style={styles.leftIcon} />
+                    Change History
+                  </Button>
+
+                  <Button
+                    color="secondary"
+                    variant="contained"
+                    disabled={readOnly}
+                    style={{ ...styles.button, marginLeft: 15 }}
+                    onClick={() =>
+                      history.push(routeResolver.getRoute(path, { itemUid: getItemNavigationUid(item) }))
+                    }
+                  >
+                    <IconEdit style={styles.leftIcon} />
+                    Edit
+                  </Button>
+
+                </div>
+                <Contact item={item} />
+              </Route>
+              <PageNotFoundRoute />
+            </Switch>
+          );
+        }}
+      />
+      <PageNotFoundRoute />
+    </Switch>
+  );
+}
+

webapp/src/Contacts/SearchableAddressBook.tsx

@@ -0,0 +1,82 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import { makeStyles, useTheme } from "@material-ui/core/styles";
+import Divider from "@material-ui/core/Divider";
+import Grid from "@material-ui/core/Grid";
+
+import { ContactType } from "../pim-types";
+
+import Sidebar from "./Sidebar";
+import Toolbar from "./Toolbar";
+import AddressBook from "./AddressBook";
+
+const useStyles = makeStyles((theme) => ({
+  topBar: {
+    backgroundColor: theme.palette.primary[500],
+  },
+}));
+
+interface PropsType {
+  entries: ContactType[];
+  onItemClick: (contact: ContactType) => void;
+  onNewGroupClick: () => void;
+}
+
+export default function SearchableAddressBook(props: PropsType) {
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [filterByGroup, setFilterByGroup] = React.useState<string>();
+  const theme = useTheme();
+  const classes = useStyles();
+
+  const groups = React.useMemo(
+    (() => props.entries.filter((x) => x.group)),
+    [props.entries]
+  );
+  const group = React.useMemo(
+    (() => groups.find((x) => x.uid === filterByGroup)),
+    [groups, filterByGroup]
+  );
+
+  function filterFunc(ent: ContactType) {
+    return (
+      (!group || (group.members.includes(ent.uid))) &&
+      ent.fn?.match(reg)
+    );
+  }
+
+  const reg = new RegExp(searchQuery, "i");
+
+  return (
+    <Grid container spacing={4}>
+      <Grid item xs={3} className={classes.topBar}>
+        {/* spacer */}
+      </Grid>
+
+      <Grid item xs={9} className={classes.topBar}>
+        <Toolbar
+          searchTerm={searchQuery}
+          setSearchTerm={setSearchQuery}
+        />
+      </Grid>
+
+      <Grid item xs={3} style={{ borderRight: `1px solid ${theme.palette.divider}` }}>
+        <Sidebar
+          groups={groups}
+          filterByGroup={filterByGroup}
+          setFilterByGroup={setFilterByGroup}
+          newGroup={props.onNewGroupClick}
+          editGroup={props.onItemClick}
+        />
+      </Grid>
+
+      <Grid item xs>
+        <Divider style={{ marginTop: "1em" }} />
+
+        <AddressBook filter={filterFunc} {...props} />
+      </Grid>
+    </Grid>
+  );
+}

webapp/src/Contacts/Sidebar.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+
+import InboxIcon from "@material-ui/icons/Inbox";
+import LabelIcon from "@material-ui/icons/LabelOutlined";
+import AddIcon from "@material-ui/icons/Add";
+import EditIcon from "@material-ui/icons/EditOutlined";
+
+import IconButton from "@material-ui/core/IconButton";
+
+import { List, ListItem, ListSubheader } from "../widgets/List";
+import { ContactType } from "../pim-types";
+
+interface ListItemPropsType {
+  name: string | undefined;
+  icon?: React.ReactElement;
+  primaryText: string;
+  filterByGroup: string | undefined;
+  setFilterByGroup: (group: string | undefined) => void;
+  editGroup: () => void;
+}
+
+function SidebarListItem(props: ListItemPropsType) {
+  const { name, icon, primaryText, filterByGroup, editGroup } = props;
+
+  const handleClick = () => props.setFilterByGroup(name);
+
+  const selected = name === filterByGroup;
+
+  return (
+    <ListItem
+      onClick={handleClick}
+      selected={selected}
+      leftIcon={icon}
+      primaryText={primaryText}
+      secondaryAction={name && selected &&
+        <IconButton onClick={editGroup}>
+          <EditIcon />
+        </IconButton>
+      }
+    />
+  );
+}
+
+interface PropsType {
+  groups: ContactType[];
+  filterByGroup: string | undefined;
+  setFilterByGroup: (group: string | undefined) => void;
+  newGroup: () => void;
+  editGroup: (group: ContactType) => void;
+}
+
+export default React.memo(function Sidebar(props: PropsType) {
+  const { groups, filterByGroup, setFilterByGroup, newGroup, editGroup } = props;
+
+  const groupList = [...groups].sort((a, b) => a.fn.localeCompare(b.fn)).map((group) => (
+    <SidebarListItem
+      key={group.uid}
+      name={group.uid}
+      primaryText={group.fn}
+      icon={<LabelIcon />}
+      filterByGroup={filterByGroup}
+      setFilterByGroup={setFilterByGroup}
+      editGroup={() => editGroup(group)}
+    />
+  ));
+
+  return (
+    <List dense>
+      <SidebarListItem
+        name={undefined}
+        primaryText="All"
+        icon={<InboxIcon />}
+        filterByGroup={filterByGroup}
+        setFilterByGroup={setFilterByGroup}
+        editGroup={newGroup}
+      />
+
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <ListSubheader>
+          Groups
+        </ListSubheader>
+        <IconButton
+          edge="end"
+          onClick={newGroup}
+        >
+          <AddIcon />
+        </IconButton>
+      </div>
+
+      {groupList}
+    </List>
+  );
+});

webapp/src/Contacts/Toolbar.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+
+import SearchIcon from "@material-ui/icons/Search";
+import TextField from "@material-ui/core/TextField";
+import { makeStyles } from "@material-ui/core/styles";
+import { Transition } from "react-transition-group";
+import InputAdornment from "@material-ui/core/InputAdornment";
+
+const transitionTimeout = 300;
+
+const transitionStyles = {
+  entering: { visibility: "visible", width: "100%", overflow: "hidden" },
+  entered: { visibility: "visible", width: "100%" },
+  exiting: { visibility: "visible", width: "0%", overflow: "hidden" },
+  exited: { visibility: "hidden", width: "0%" },
+};
+
+const useStyles = makeStyles((theme) => ({
+  button: {
+    marginRight: theme.spacing(1),
+  },
+  textField: {
+    transition: `width ${transitionTimeout}ms`,
+    marginRight: theme.spacing(1),
+  },
+}));
+
+interface PropsType {
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
+}
+
+export default function Toolbar(props: PropsType) {
+  const { searchTerm, setSearchTerm } = props;
+
+  const showSearchField = true;
+  const classes = useStyles();
+
+  return (
+    <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center" }}>
+      <Transition in={showSearchField} timeout={transitionTimeout}>
+        {(state) => (
+          <TextField
+            fullWidth
+            placeholder="Search"
+            value={searchTerm}
+            color="secondary"
+            variant="standard"
+            className={classes.textField}
+            style={transitionStyles[state]}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon />
+                </InputAdornment>
+              ),
+            }}
+          />
+        )}
+      </Transition>
+    </div>
+  );
+}

webapp/src/Debug.tsx

@@ -0,0 +1,92 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import * as Etebase from "etebase";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+
+import Container from "./widgets/Container";
+import { useSelector } from "react-redux";
+import { StoreState } from "./store";
+import { useCredentials } from "./credentials";
+import { getCollectionManager } from "./etebase-helpers";
+
+export default function Debug() {
+  const etebase = useCredentials()!;
+  const [stateCollectionUid, setCollectionUid] = React.useState("");
+  const [itemsUids, setEntriesUids] = React.useState("");
+  const [result, setResult] = React.useState("");
+  const cacheCollections = useSelector((state: StoreState) => state.cache.collections);
+  const cacheItems = useSelector((state: StoreState) => state.cache.items);
+
+  function handleInputChange(func: (value: string) => void) {
+    return (event: React.ChangeEvent<any>) => {
+      func(event.target.value);
+    };
+  }
+
+  return (
+    <Container>
+      <div>
+        <TextField
+          style={{ width: "100%" }}
+          type="text"
+          label="Collection UID"
+          value={stateCollectionUid}
+          onChange={handleInputChange(setCollectionUid)}
+        />
+      </div>
+      <div>
+        <TextField
+          style={{ width: "100%" }}
+          type="text"
+          multiline
+          label="Item UIDs"
+          value={itemsUids}
+          onChange={handleInputChange(setEntriesUids)}
+        />
+      </div>
+      <Button
+        variant="contained"
+        color="secondary"
+        onClick={async () => {
+          const colUid = stateCollectionUid.trim();
+          const cachedCollection = cacheCollections.get(colUid);
+          const colItems = cacheItems.get(colUid);
+          if (!colItems || !cachedCollection) {
+            setResult("Error: collection uid not found.");
+            return;
+          }
+
+          const colMgr = getCollectionManager(etebase);
+          const col = colMgr.cacheLoad(cachedCollection);
+          const itemMgr = colMgr.getItemManager(col);
+
+          const wantedEntries = {};
+          const wantAll = (itemsUids.trim() === "all");
+          itemsUids.split("\n").forEach((ent) => wantedEntries[ent.trim()] = true);
+
+          const retEntries = [];
+          console.log(wantAll, colItems.size);
+          for (const cached of colItems.values()) {
+            const item = itemMgr.cacheLoad(cached);
+            const meta = item.getMeta();
+            const content = await item.getContent(Etebase.OutputFormat.String);
+            if (wantAll || wantedEntries[item.uid]) {
+              retEntries.push(`${JSON.stringify(meta)}\n${content}`);
+            }
+          }
+
+          setResult(retEntries.join("\n\n"));
+        }}
+      >
+        Decrypt
+      </Button>
+      <div>
+        <p>Result:</p>
+        <pre>{result}</pre>
+      </div>
+    </Container>
+  );
+}

webapp/src/LoginPage.tsx

@@ -0,0 +1,100 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import { useDispatch } from "react-redux";
+
+import Container from "./widgets/Container";
+import ExternalLink from "./widgets/ExternalLink";
+import LoginForm from "./components/LoginForm";
+
+import { login } from "./store/actions";
+
+import * as Etebase from "etebase";
+
+import * as C from "./constants";
+
+import SignedPagesBadge from "./images/signed-pages-badge.svg";
+import { useCredentials } from "./credentials";
+import LoadingIndicator from "./widgets/LoadingIndicator";
+import { startTask } from "./helpers";
+import { Redirect, useLocation } from "react-router";
+import { routeResolver } from "./App";
+import { Link } from "react-router-dom";
+
+export default function LoginPage() {
+  const credentials = useCredentials();
+  const dispatch = useDispatch();
+  const location = useLocation();
+  const [loading, setLoading] = React.useState(false);
+  const [fetchError, setFetchError] = React.useState<Error>();
+
+  if (credentials) {
+    return (
+      <Redirect to={{ pathname: routeResolver.getRoute("wizard"), state: location.state }} />
+    );
+  }
+
+  async function onFormSubmit(username: string, password: string, serviceApiUrl?: string) {
+    try {
+      setLoading(true);
+      setFetchError(undefined);
+      const etebase = await startTask((async () => {
+        return await Etebase.Account.login(username, password, serviceApiUrl ?? C.defaultServerUrl);
+      }));
+      dispatch(login(etebase));
+    } catch (e) {
+      console.log(e);
+      if ((e instanceof Etebase.HttpError) && (e.status === 404)) {
+        setFetchError(new Error("Etebase server not found: are you sure the server URL is correct?"));
+      } else {
+        setFetchError(e);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (credentials === undefined) {
+    return (
+      <LoadingIndicator />
+    );
+  } else {
+    const style = {
+      isSafe: {
+        textDecoration: "none",
+        display: "block",
+      },
+      divider: {
+        margin: "30px 0",
+        color: "#00000025",
+      },
+    };
+
+    return (
+      <Container style={{ maxWidth: "30rem" }}>
+        <h2 style={{ marginBottom: "0.1em" }}>Log In</h2>
+        <div style={{ fontSize: "90%" }}>or <Link to={routeResolver.getRoute("signup")}>create an account</Link></div>
+        <LoginForm
+          onSubmit={onFormSubmit}
+          loading={loading}
+          error={fetchError}
+        />
+        <hr style={style.divider} />
+        <ExternalLink style={style.isSafe} href="https://www.etesync.com/faq/#signed-pages">
+          <img alt="SignedPgaes badge" src={SignedPagesBadge} />
+        </ExternalLink>
+        <ul>
+          <li><ExternalLink style={style.isSafe} href={C.homePage}>
+            The EteSync Website
+          </ExternalLink></li>
+          <li><ExternalLink style={style.isSafe} href={C.faq + "#web-client"}>
+            Is the web client safe to use?
+          </ExternalLink></li>
+          <li><ExternalLink style={style.isSafe} href={C.sourceCode}>Source code</ExternalLink></li>
+        </ul>
+      </Container>
+    );
+  }
+}

webapp/src/MainRouter.tsx

@@ -0,0 +1,101 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { Route, Switch, Redirect, RouteProps } from "react-router";
+import { useCredentials } from "./credentials";
+import LoadingIndicator from "./widgets/LoadingIndicator";
+import SyncGate from "./SyncGate";
+import { routeResolver } from "./App";
+import SignupPage from "./SignupPage";
+import LoginPage from "./LoginPage";
+import WizardPage from "./WizardPage";
+import { Snackbar } from "@material-ui/core";
+import Alert from "@material-ui/lab/Alert";
+import { useSelector, useDispatch } from "react-redux";
+import { StoreState } from "./store";
+import { popMessage } from "./store/actions";
+
+
+export default function MainRouter() {
+  return (
+    <>
+      <Switch>
+        <Route
+          path={routeResolver.getRoute("signup")}
+          exact
+        >
+          <SignupPage />
+        </Route>
+        <Route
+          path={routeResolver.getRoute("login")}
+          exact
+        >
+          <LoginPage />
+        </Route>
+        <PrivateRoute
+          path={routeResolver.getRoute("wizard")}
+          exact
+        >
+          <WizardPage />
+        </PrivateRoute>
+        <PrivateRoute
+          path="*"
+        >
+          <SyncGate />
+        </PrivateRoute>
+      </Switch>
+      <GlobalMessages />
+    </>
+  );
+}
+
+function GlobalMessages() {
+  const dispatch = useDispatch();
+  const message = useSelector((state: StoreState) => state.messages.first(undefined));
+
+  function handleClose() {
+    dispatch(popMessage());
+  }
+
+  return (
+    <Snackbar
+      key={message?.message}
+      open={!!message}
+      autoHideDuration={5000}
+      onClose={handleClose}
+      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+    >
+      <Alert onClose={handleClose} severity={message?.severity}>
+        {message?.message}
+      </Alert>
+    </Snackbar>
+  );
+}
+
+function PrivateRoute(props: Omit<RouteProps, "render">) {
+  const credentials = useCredentials();
+  const { children, ...rest } = props;
+
+  if (credentials === undefined) {
+    return (<LoadingIndicator style={{ display: "block", margin: "40px auto" }} />);
+  }
+
+  return (
+    <Route
+      {...rest}
+      render={({ location }) => (
+        (credentials) ? (
+          children
+        ) : (
+          <Redirect
+            to={{
+              pathname: "/login",
+              state: { from: location },
+            }}
+          />
+        )
+      )}
+    />
+  );
+}

webapp/src/PageNotFound.tsx

@@ -0,0 +1,27 @@
+// SPDX-FileCopyrightText: © 2020 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { Route } from "react-router";
+
+import Container from "./widgets/Container";
+
+export function PageNotFoundRoute(props: { container?: boolean }) {
+  return (
+    <Route path="*">
+      {props.container ? (
+        <Container>
+          <PageNotFound />
+        </Container>
+      ) : (
+        <PageNotFound />
+      )}
+    </Route>
+  );
+}
+
+export default function PageNotFound() {
+  return (
+    <h1>404 Page Not Found</h1>
+  );
+}

webapp/src/Pim/ItemChangeHistory.tsx

@@ -0,0 +1,113 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import * as Etebase from "etebase";
+
+import Dialog from "@material-ui/core/Dialog";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+
+import { useCredentials } from "../credentials";
+import LoadingIndicator from "../widgets/LoadingIndicator";
+import GenericChangeHistory from "../components/GenericChangeHistory";
+import { useItems } from "../etebase-helpers";
+import { CachedCollection } from "./helpers";
+import PageNotFound from "../PageNotFound";
+
+export interface CachedItem {
+  item: Etebase.Item;
+  metadata: Etebase.ItemMetadata;
+  content: string;
+}
+
+async function loadRevisions(etebase: Etebase.Account, col: Etebase.Collection, item: Etebase.Item) {
+  const ret: CachedItem[] = [];
+  const colMgr = etebase.getCollectionManager();
+  const itemManager = colMgr.getItemManager(col);
+
+  let iterator: string | null = null;
+  let done = false;
+  while (!done) {
+    const revisions = await itemManager.itemRevisions(item, { iterator, limit: 30 });
+    iterator = revisions.iterator as string;
+    done = revisions.done;
+
+    for (const item of revisions.data) {
+      ret.push({
+        item,
+        metadata: item.getMeta(),
+        content: await item.getContent(Etebase.OutputFormat.String),
+      });
+    }
+  }
+
+  return ret;
+}
+
+interface PropsType {
+  collection: CachedCollection;
+  itemUid: string;
+}
+
+export default function ItemChangeHistory(props: PropsType) {
+  const [entries, setEntries] = React.useState<CachedItem[]>();
+  const [dialog, setDialog] = React.useState<CachedItem>();
+  const etebase = useCredentials()!;
+  const { collection, collectionType } = props.collection;
+  const items = useItems(etebase, collectionType);
+
+  const item = items?.get(collection.uid)?.get(props.itemUid);
+
+  React.useEffect(() => {
+    if (item) {
+      loadRevisions(etebase, collection, item)
+        .then((entries) => setEntries(entries));
+    }
+  }, [etebase, collection, item]);
+
+  if (!item) {
+    return (<PageNotFound />);
+  }
+
+  if (!entries) {
+    return (
+      <LoadingIndicator />
+    );
+  }
+
+  return (
+    <div style={{ height: "calc(100vh - 300px)" }}>
+      <Dialog
+        open={dialog !== undefined}
+        onClose={() => setDialog(undefined)}
+      >
+        <DialogTitle>
+          Raw Content
+        </DialogTitle>
+        <DialogContent>
+          <div>Revision UID: <pre className="d-inline-block">{dialog?.item.etag}</pre></div>
+          <div>Content:
+            <pre>{dialog?.content}</pre>
+          </div>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            color="primary"
+            onClick={() => setDialog(undefined)}
+          >
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+      <GenericChangeHistory
+        items={entries}
+        onItemClick={setDialog}
+      />
+    </div>
+  );
+}
+

webapp/src/Pim/NavigationTabs.tsx

@@ -0,0 +1,58 @@
+// SPDX-FileCopyrightText: © 2020 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { Tabs, Tab, useTheme } from "@material-ui/core";
+import { useHistory } from "react-router";
+import { routeResolver } from "../App";
+
+export type TabValue = "contacts" | "events" | "tasks";
+
+interface PropsType {
+  value: TabValue;
+}
+
+export default function PimNavigationTabs(props: PropsType) {
+  const theme = useTheme();
+  const history = useHistory();
+
+  const tabs = [
+    { title: "Address Book", linkValue: "contacts" },
+    { title: "Calendar", linkValue: "events" },
+    { title: "Tasks", linkValue: "tasks" },
+  ];
+
+  let selected;
+  switch (props.value) {
+    case "contacts": {
+      selected = 0;
+      break;
+    }
+    case "events": {
+      selected = 1;
+      break;
+    }
+    case "tasks": {
+      selected = 2;
+      break;
+    }
+  }
+
+  return (
+    <Tabs
+      variant="fullWidth"
+      style={{ backgroundColor: theme.palette.primary.main }}
+      value={selected}
+      onChange={(_event, value) => history.push(
+        routeResolver.getRoute(`pim.${tabs[value].linkValue}`)
+      )}
+    >
+      {tabs.map((x) => (
+        <Tab
+          key={x.linkValue}
+          label={x.title}
+        />
+      ))}
+    </Tabs>
+  );
+}

webapp/src/Pim/helpers.tsx

@@ -0,0 +1,156 @@
+// SPDX-FileCopyrightText: © 2020 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { Fab } from "@material-ui/core";
+import ContentAdd from "@material-ui/icons/Add";
+
+import memoize from "memoizee";
+
+import * as Etebase from "etebase";
+
+import { PimType } from "../pim-types";
+import { getCollectionManager } from "../etebase-helpers";
+import { asyncDispatch, store } from "../store";
+import { itemBatch, appendError } from "../store/actions";
+
+export const defaultColor = "#8BC34A";
+
+export interface CachedCollection {
+  collection: Etebase.Collection;
+  metadata: Etebase.ItemMetadata;
+  collectionType: string;
+}
+
+export function getRawItemNavigationUid(collectionUid: string, itemUid: string) {
+  // Both collectionUid and itemUid are url safe
+  return `${collectionUid}|${itemUid}`;
+}
+
+export function getItemNavigationUid(item: PimType) {
+  return getRawItemNavigationUid(item.collectionUid!, item.itemUid!);
+}
+
+export function getDecryptCollectionsFunction(_colType?: string) {
+  return memoize(
+    async function (collections: Etebase.Collection[]) {
+      const entries: CachedCollection[] = [];
+      if (collections) {
+        for (const collection of collections) {
+          try {
+            entries.push({
+              collection,
+              metadata: collection.getMeta(),
+              collectionType: collection.getCollectionType(),
+            });
+          } catch (e) {
+            store.dispatch(appendError(e));
+          }
+        }
+      }
+
+      return entries;
+    },
+    { max: 1 }
+  );
+}
+
+export function getDecryptItemsFunction<T extends PimType>(_colType: string, parseFunc: (str: string) => T) {
+  return memoize(
+    async function (items: Map<string, Map<string, Etebase.Item>>) {
+      const entries: Map<string, Map<string, T>> = new Map();
+      if (items) {
+        for (const [colUid, col] of items.entries()) {
+          const cur = new Map();
+          entries.set(colUid, cur);
+          for (const item of col.values()) {
+            if (item.isDeleted) {
+              continue;
+            }
+            try {
+              const contact = parseFunc(await item.getContent(Etebase.OutputFormat.String));
+              contact.collectionUid = colUid;
+              contact.itemUid = item.uid;
+              cur.set(item.uid, contact);
+            } catch (e) {
+              store.dispatch(appendError(e));
+            }
+          }
+        }
+      }
+
+      return entries;
+    },
+    { max: 1 }
+  );
+}
+
+export async function itemSave(etebase: Etebase.Account, collection: Etebase.Collection, items: Map<string, Map<string, Etebase.Item>>, item: PimType, collectionUid: string, originalItem?: PimType): Promise<void> {
+  const itemUid = originalItem?.itemUid;
+  const colMgr = getCollectionManager(etebase);
+  const itemMgr = colMgr.getItemManager(collection);
+
+  const mtime = (new Date()).getTime();
+  const content = item.toIcal();
+
+  let eteItem;
+  if (itemUid) {
+    // Existing item
+    eteItem = items!.get(collectionUid)?.get(itemUid)!;
+    await eteItem.setContent(content);
+    const meta = eteItem.getMeta();
+    meta.mtime = mtime;
+    eteItem.setMeta(meta);
+  } else {
+    // New
+    const meta: Etebase.ItemMetadata = {
+      mtime,
+      name: item.uid,
+    };
+    eteItem = await itemMgr.create(meta, content);
+  }
+
+  await asyncDispatch(itemBatch(collection, itemMgr, [eteItem]));
+}
+
+export async function itemDelete(etebase: Etebase.Account, collection: Etebase.Collection, items: Map<string, Map<string, Etebase.Item>>, item: PimType, collectionUid: string) {
+  const itemUid = item.itemUid!;
+  const colMgr = getCollectionManager(etebase);
+  const itemMgr = colMgr.getItemManager(collection);
+
+  const eteItem = items!.get(collectionUid)?.get(itemUid)!;
+  const mtime = (new Date()).getTime();
+  const meta = eteItem.getMeta();
+  meta.mtime = mtime;
+  eteItem.setMeta(meta);
+  eteItem.delete(true);
+
+  await asyncDispatch(itemBatch(collection, itemMgr, [eteItem]));
+}
+
+interface PimFabPropsType {
+  onClick: () => void;
+}
+
+export function PimFab(props: PimFabPropsType) {
+  const style = {
+    floatingButton: {
+      margin: 0,
+      top: "auto",
+      right: 20,
+      bottom: 20,
+      left: "auto",
+      position: "fixed",
+    },
+  };
+
+  return (
+    <Fab
+      color="primary"
+      style={style.floatingButton as any}
+      onClick={props.onClick}
+    >
+      <ContentAdd />
+    </Fab>
+  );
+}

webapp/src/Settings/index.tsx

@@ -0,0 +1,246 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import * as Etebase from "etebase";
+import { useSelector, useDispatch } from "react-redux";
+
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import FormGroup from "@material-ui/core/FormGroup";
+import Switch from "@material-ui/core/Switch";
+import InputLabel from "@material-ui/core/InputLabel";
+
+import { StoreState } from "../store";
+import { setSettings, login, pushMessage } from "../store/actions";
+
+import Container from "../widgets/Container";
+import AppBarOverride from "../widgets/AppBarOverride";
+import PrettyFingerprint from "../widgets/PrettyFingerprint";
+import { useCredentials } from "../credentials";
+import { Button } from "@material-ui/core";
+import ConfirmationDialog from "../widgets/ConfirmationDialog";
+import PasswordField from "../widgets/PasswordField";
+import Alert from "@material-ui/lab/Alert";
+import { PASSWORD_MIN_LENGTH, startTask, enforcePasswordRules } from "../helpers";
+
+function SecurityFingerprint() {
+  const etebase = useCredentials()!;
+  const inviteMgr = etebase.getInvitationManager();
+  const publicKey = inviteMgr.pubkey;
+
+  return (
+    <>
+      <p>
+        Your security fingerprint is:
+      </p>
+      <PrettyFingerprint publicKey={publicKey} />
+    </>
+  );
+}
+
+interface ChangePasswordFormErrors {
+  oldPassword?: string;
+  newPassword?: string;
+
+  general?: string;
+}
+
+function ChangePassword() {
+  const etebase = useCredentials()!;
+  const dispatch = useDispatch();
+  const [showDialog, setShowDialog] = React.useState(false);
+  const [oldPassword, setOldPassword] = React.useState("");
+  const [newPassword, setNewPassword] = React.useState("");
+  const [errors, setErrors] = React.useState<ChangePasswordFormErrors>({});
+
+  const styles = {
+    infoAlert: {
+      marginTop: 20,
+    },
+    textField: {
+      marginTop: 20,
+      width: "18em",
+    },
+  };
+
+  function handleInputChange(func: (value: string) => void) {
+    return (event: React.ChangeEvent<any>) => {
+      func(event.target.value);
+    };
+  }
+
+  async function onChangePassword() {
+    try {
+      const fieldNotEmpty = "Password can't be empty.";
+      const errors: ChangePasswordFormErrors = {};
+      if (!oldPassword) {
+        errors.oldPassword = fieldNotEmpty;
+      }
+      if (!newPassword) {
+        errors.newPassword = fieldNotEmpty;
+      } else {
+        const passwordRulesError = enforcePasswordRules(newPassword);
+        if (passwordRulesError) {
+          errors.newPassword = passwordRulesError;
+        }
+      }
+
+      setErrors(errors);
+      if (Object.keys(errors).length > 0) {
+        return;
+      }
+
+      await startTask(async () => {
+        const serverUrl = etebase.serverUrl;
+        const username = etebase.user.username;
+        try {
+          const etebase = await Etebase.Account.login(username, oldPassword, serverUrl);
+          await etebase.logout();
+        } catch (e) {
+          if (e instanceof Etebase.UnauthorizedError) {
+            setErrors({ oldPassword: "Error: wrong encryption password." });
+          } else {
+            setErrors({ oldPassword: e.toString() });
+          }
+          return;
+        }
+
+        try {
+          await etebase.changePassword(newPassword);
+          dispatch(login(etebase));
+          dispatch(pushMessage({ message: "Password successfully changed.", severity: "success" }));
+          setShowDialog(false);
+        } catch (e) {
+          setErrors({ newPassword: e.toString() });
+        }
+      });
+    } finally {
+      // Cleanup
+    }
+  }
+
+  return (
+    <>
+      <p>
+        Change your password by clicking here;
+      </p>
+      <Button color="secondary" variant="contained" onClick={() => setShowDialog(true)}>
+        Change Password
+      </Button>
+      <ConfirmationDialog
+        title="Change Password"
+        key={showDialog}
+        open={showDialog}
+        onOk={onChangePassword}
+        onCancel={() => setShowDialog(false)}
+      >
+        <PasswordField
+          style={styles.textField}
+          error={!!errors.oldPassword}
+          helperText={errors.oldPassword}
+          label="Current Password"
+          value={oldPassword}
+          onChange={handleInputChange(setOldPassword)}
+        />
+        <PasswordField
+          style={styles.textField}
+          error={!!errors.newPassword}
+          helperText={errors.newPassword}
+          label="New Password"
+          inputProps={{
+            minLength: PASSWORD_MIN_LENGTH,
+          }}
+          value={newPassword}
+          onChange={handleInputChange(setNewPassword)}
+        />
+        {errors.general && (
+          <Alert severity="error" style={styles.infoAlert}>{errors.general}</Alert>
+        )}
+
+        <Alert severity="warning" style={styles.infoAlert}>
+          Please make sure you remember your password, as it <em>can't</em> be recovered if lost!
+        </Alert>
+      </ConfirmationDialog>
+    </>
+  );
+}
+
+export default React.memo(function Settings() {
+  const etebase = useCredentials();
+  const dispatch = useDispatch();
+  const settings = useSelector((state: StoreState) => state.settings);
+
+  const darkMode = !!settings.darkMode;
+
+  function handleChange(event: React.ChangeEvent<any>) {
+    const name = event.target.name;
+    const value = event.target.value;
+
+    dispatch(setSettings({ ...settings, [name]: value }));
+  }
+
+  return (
+    <>
+      <AppBarOverride title="Settings" />
+      <Container>
+        {(etebase) && (
+          <>
+            <h1>Account</h1>
+            <h2>Security Fingerprint</h2>
+            <SecurityFingerprint />
+
+            <h2>Account Dashboard</h2>
+            <p>
+              Change your payment info, plan and other account settings
+            </p>
+            <Button color="secondary" variant="contained" onClick={async () => {
+              try {
+                const url = await etebase!.getDashboardUrl();
+                window.open(url, "_blank", "noopener,noreferrer");
+              } catch (e) {
+                dispatch(pushMessage({ message: e.message, severity: "error" }));
+              }
+            }}>
+              Open Dashboard
+            </Button>
+
+            <h2>Password</h2>
+            <ChangePassword />
+          </>
+        )}
+
+        <h1>Look & Feel</h1>
+        <h2>Date & Time</h2>
+        <FormControl style={{ width: "15em" }}>
+          <InputLabel>
+            Locale
+          </InputLabel>
+          <Select
+            name="locale"
+            value={settings.locale}
+            onChange={handleChange}
+          >
+            <MenuItem value="en-gb">English (United Kingdom)</MenuItem>
+            <MenuItem value="en-us">English (United States)</MenuItem>
+          </Select>
+        </FormControl>
+        <h2>Dark mode</h2>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Switch
+                color="primary"
+                checked={darkMode}
+                onChange={() => dispatch(setSettings({ ...settings, darkMode: !darkMode }))}
+              />
+            }
+            label="Dark mode"
+          />
+        </FormGroup>
+      </Container>
+    </>
+  );
+});

webapp/src/SideMenu/index.tsx

@@ -0,0 +1,111 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { List, ListItem, ListSubheader, ListDivider } from "../widgets/List";
+import ActionCode from "@material-ui/icons/Code";
+import ActionHome from "@material-ui/icons/Home";
+import ActionSettings from "@material-ui/icons/Settings";
+import ActionJournals from "@material-ui/icons/LibraryBooks";
+import ActionBugReport from "@material-ui/icons/BugReport";
+import ActionQuestionAnswer from "@material-ui/icons/QuestionAnswer";
+import LogoutIcon from "@material-ui/icons/PowerSettingsNew";
+import IconImport from "@material-ui/icons/ImportExport";
+import IconInvitation from "@material-ui/icons/MailOutline";
+
+import logo from "../images/logo.svg";
+
+import { routeResolver } from "../App";
+
+import { store } from "../store";
+import { logout } from "../store/actions";
+
+import * as C from "../constants";
+import { useTheme } from "@material-ui/core";
+import { useCredentials } from "../credentials";
+import { useHistory } from "react-router";
+
+interface PropsType {
+  onCloseDrawerRequest: () => void;
+}
+
+export default function SideMenu(props: PropsType) {
+  const theme = useTheme();
+  const etebase = useCredentials();
+  const username = etebase?.user.username ?? C.appName;
+  const history = useHistory();
+
+  function logoutDo() {
+    store.dispatch(logout(etebase!));
+    props.onCloseDrawerRequest();
+  }
+
+  let loggedInItems;
+  if (etebase) {
+    loggedInItems = (
+      <React.Fragment>
+        <ListItem
+          primaryText="Collections"
+          leftIcon={<ActionJournals />}
+          onClick={() => {
+            props.onCloseDrawerRequest();
+            history.push(routeResolver.getRoute("collections"));
+          }}
+        />
+        <ListItem
+          primaryText="Invitations"
+          leftIcon={<IconInvitation />}
+          onClick={() => {
+            props.onCloseDrawerRequest();
+            history.push(routeResolver.getRoute("collections.invitations"));
+          }}
+        />
+        <ListItem
+          primaryText="Import"
+          leftIcon={<IconImport />}
+          onClick={() => {
+            props.onCloseDrawerRequest();
+            history.push(routeResolver.getRoute("collections.import"));
+          }}
+        />
+        <ListItem
+          primaryText="Settings"
+          leftIcon={<ActionSettings />}
+          onClick={() => {
+            props.onCloseDrawerRequest();
+            history.push(routeResolver.getRoute("settings"));
+          }}
+        />
+        <ListItem primaryText="Log Out" leftIcon={<LogoutIcon />} onClick={logoutDo} />
+      </React.Fragment>
+    );
+  }
+
+  return (
+    <div style={{ overflowX: "hidden", width: 250 }}>
+      <div className="App-drawer-header">
+        <img alt="App logo" className="App-drawer-logo" src={logo} />
+        <div style={{ color: theme.palette.secondary.contrastText }}>
+          {username}
+        </div>
+      </div>
+      <List>
+        <ListItem
+          primaryText="Main"
+          leftIcon={<ActionHome />}
+          onClick={() => {
+            props.onCloseDrawerRequest();
+            history.push(routeResolver.getRoute("home"));
+          }}
+        />
+        {loggedInItems}
+        <ListDivider />
+        <ListSubheader>External Links</ListSubheader>
+        <ListItem primaryText="Website" leftIcon={<ActionHome />} href={C.homePage} />
+        <ListItem primaryText="FAQ" leftIcon={<ActionQuestionAnswer />} href={C.faq} />
+        <ListItem primaryText="Source Code" leftIcon={<ActionCode />} href={C.sourceCode} />
+        <ListItem primaryText="Report Issue" leftIcon={<ActionBugReport />} href={C.reportIssue} />
+      </List>
+    </div>
+  );
+}

webapp/src/SignupPage.tsx

@@ -0,0 +1,268 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import * as Etebase from "etebase";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+
+import { routeResolver } from "./App";
+
+import Container from "./widgets/Container";
+import PasswordField from "./widgets/PasswordField";
+
+import LoadingIndicator from "./widgets/LoadingIndicator";
+import Alert from "@material-ui/lab/Alert";
+import { CircularProgress } from "@material-ui/core";
+import { Redirect } from "react-router";
+import { useCredentials } from "./credentials";
+import { useDispatch } from "react-redux";
+import { startTask, PASSWORD_MIN_LENGTH, enforcePasswordRules } from "./helpers";
+import { login } from "./store/actions";
+import { Link } from "react-router-dom";
+
+import * as C from "./constants";
+import ExternalLink from "./widgets/ExternalLink";
+
+interface FormErrors {
+  username?: string;
+  email?: string;
+  password?: string;
+  server?: string;
+
+  general?: string;
+}
+
+export default function SignupPage() {
+  const credentials = useCredentials();
+  const dispatch = useDispatch();
+  const [username, setUsername] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [server, setServer] = React.useState("");
+  const [showAdvanced, setShowAdvanced] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const [errors, setErrors] = React.useState<FormErrors>({});
+
+  if (credentials) {
+    return (
+      <Redirect to={routeResolver.getRoute("wizard")} />
+    );
+  }
+
+  async function signup(e: React.FormEvent<any>) {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      const errors: FormErrors = {};
+      const fieldRequired = "This field is required!";
+      if (!username) {
+        errors.username = fieldRequired;
+      }
+      if (!email) {
+        errors.email = fieldRequired;
+      }
+      if (!password) {
+        errors.password = fieldRequired;
+      } else {
+        const passwordRulesError = enforcePasswordRules(password);
+        if (passwordRulesError) {
+          errors.password = passwordRulesError;
+        }
+      }
+
+      if (process.env.NODE_ENV !== "development") {
+        if (showAdvanced && !server.startsWith("https://")) {
+          errors.server = "Server URI must start with https://";
+        }
+      }
+
+      if (Object.keys(errors).length) {
+        setErrors(errors);
+        return;
+      } else {
+        setErrors({});
+      }
+
+      const serverUrl = (showAdvanced) ? server : C.defaultServerUrl;
+      const user: Etebase.User = {
+        username,
+        email,
+      };
+      const etebase = await startTask((async () => {
+        return await Etebase.Account.signup(user, password, serverUrl);
+      }));
+      dispatch(login(etebase));
+    } catch (e) {
+      if ((e instanceof Etebase.HttpError) && (e.content)) {
+        let found = false;
+        if (e.content.errors) {
+          for (const field of e.content.errors) {
+            if (field.field === "user.username") {
+              errors.username = field.detail;
+              found = true;
+            } else if (field.field === "user.email") {
+              errors.email = field.detail;
+              found = true;
+            } else if (!field.field) {
+              errors.general = field.detail;
+              found = true;
+            }
+          }
+        }
+
+        if (!found) {
+          errors.general = e.content.detail ?? e.toString();
+        }
+      } else {
+        errors.general = e.toString();
+      }
+      setErrors(errors);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const styles = {
+    form: {
+    },
+    infoAlert: {
+      marginTop: 20,
+    },
+    textField: {
+      marginTop: 20,
+      width: "18em",
+    },
+    submit: {
+      marginTop: 20,
+      textAlign: "right" as any,
+    },
+  };
+
+  function handleInputChange(func: (value: string) => void) {
+    return (event: React.ChangeEvent<any>) => {
+      func(event.target.value);
+    };
+  }
+
+  let advancedSettings = null;
+  if (showAdvanced) {
+    advancedSettings = (
+      <React.Fragment>
+        <TextField
+          type="url"
+          style={styles.textField}
+          error={!!errors.server}
+          helperText={errors.server}
+          label="Server"
+          value={server}
+          onChange={handleInputChange(setServer)}
+        />
+        <br />
+      </React.Fragment>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div style={{ textAlign: "center" }}>
+        <LoadingIndicator />
+        <p>Deriving encryption data...</p>
+      </div>
+    );
+  }
+
+  return (
+    <Container style={{ maxWidth: "30rem" }}>
+      <h2 style={{ marginBottom: "0.1em" }}>Signup</h2>
+      <div style={{ fontSize: "90%" }}>or <Link to={routeResolver.getRoute("home")}>log in to your account</Link></div>
+
+      <Alert
+        style={styles.infoAlert}
+        severity="info"
+      >
+        <a href={C.pricing} style={{ color: "inherit", textDecoration: "inherit", display: "block" }}>
+          You are signing up for a free trial. Click here for pricing information.
+        </a>
+      </Alert>
+
+
+      <form style={styles.form} onSubmit={signup}>
+        <TextField
+          type="text"
+          style={styles.textField}
+          error={!!errors.username}
+          helperText={errors.username}
+          label="Username"
+          value={username}
+          onChange={handleInputChange(setUsername)}
+        />
+        <br />
+        <TextField
+          type="email"
+          style={styles.textField}
+          error={!!errors.email}
+          helperText={errors.email}
+          label="Email"
+          value={email}
+          onChange={handleInputChange(setEmail)}
+        />
+        <br />
+        <PasswordField
+          style={styles.textField}
+          error={!!errors.password}
+          helperText={errors.password}
+          label="Password"
+          name="password"
+          inputProps={{
+            minLength: PASSWORD_MIN_LENGTH,
+          }}
+          value={password}
+          onChange={handleInputChange(setPassword)}
+        />
+
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Switch
+                color="primary"
+                checked={showAdvanced}
+                onChange={() => setShowAdvanced(!showAdvanced)}
+              />
+            }
+            label="Advanced settings"
+          />
+        </FormGroup>
+        {advancedSettings}
+        {errors.general && (
+          <Alert severity="error" style={styles.infoAlert}>{errors.general}</Alert>
+        )}
+
+        <Alert severity="warning" style={styles.infoAlert}>
+          Please make sure you remember your password, as it <em>can't</em> be recovered if lost!
+        </Alert>
+
+        <p style={styles.infoAlert}>
+          By signing up you agree to our <ExternalLink href={C.terms}>terms of service</ExternalLink>.
+        </p>
+
+        <div style={styles.submit}>
+          <Button
+            variant="contained"
+            type="submit"
+            color="secondary"
+            disabled={loading}
+          >
+            {loading ? (
+              <CircularProgress />
+            ) : "Sign Up"
+            }
+          </Button>
+        </div>
+      </form>
+    </Container>
+  );
+}

webapp/src/SyncGate.tsx

@@ -0,0 +1,127 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { Route, Switch, Redirect, useHistory } from "react-router";
+
+import moment from "moment";
+import "moment/locale/en-gb";
+
+import { routeResolver } from "./App";
+
+import AppBarOverride from "./widgets/AppBarOverride";
+import LoadingIndicator from "./widgets/LoadingIndicator";
+import Container from "./widgets/Container";
+import ContactsMain from "./Contacts/Main";
+import CalendarsMain from "./Calendars/Main";
+import TasksMain from "./Tasks/Main";
+import CollectionsMain from "./Collections/Main";
+
+import Settings from "./Settings";
+import Debug from "./Debug";
+
+import { SyncManager } from "./sync/SyncManager";
+
+import { StoreState } from "./store";
+import { performSync } from "./store/actions";
+import { useCredentials } from "./credentials";
+import PimNavigationTabs from "./Pim/NavigationTabs";
+import { PageNotFoundRoute } from "./PageNotFound";
+
+export default function SyncGate() {
+  const etebase = useCredentials();
+  const settings = useSelector((state: StoreState) => state.settings);
+  const dispatch = useDispatch();
+  const [loading, setLoading] = React.useState(true);
+
+  // Doing this so we refresh on route changes
+  useHistory();
+
+  React.useEffect(() => {
+    (async () => {
+      const syncManager = SyncManager.getManager(etebase!);
+      const sync = syncManager.sync();
+      dispatch(performSync(sync));
+      await sync;
+      setLoading(false);
+    })();
+  }, []);
+
+  if (loading) {
+    return (<LoadingIndicator style={{ display: "block", margin: "40px auto" }} />);
+  }
+
+  // FIXME: Shouldn't be here
+  moment.locale(settings.locale);
+
+  return (
+    <Switch>
+      <Route
+        path={routeResolver.getRoute("home")}
+        exact
+        render={() => (
+          <Redirect to={routeResolver.getRoute("pim")} />
+        )}
+      />
+      <Route
+        path={routeResolver.getRoute("pim")}
+      >
+        <AppBarOverride title="EteSync" />
+        <Switch>
+          <Route
+            path={routeResolver.getRoute("pim")}
+            exact
+          >
+            <Redirect to={routeResolver.getRoute("pim.events")} />
+          </Route>
+          <Route
+            path={routeResolver.getRoute("pim.contacts")}
+          >
+            <PimNavigationTabs value="contacts" />
+            <Container>
+              <ContactsMain />
+            </Container>
+          </Route>
+          <Route
+            path={routeResolver.getRoute("pim.events")}
+          >
+            <PimNavigationTabs value="events" />
+            <Container>
+              <CalendarsMain />
+            </Container>
+          </Route>
+          <Route
+            path={routeResolver.getRoute("pim.tasks")}
+          >
+            <PimNavigationTabs value="tasks" />
+            <Container>
+              <TasksMain />
+            </Container>
+          </Route>
+          <PageNotFoundRoute container />
+        </Switch>
+      </Route>
+      <Route
+        path={routeResolver.getRoute("collections")}
+      >
+        <CollectionsMain />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("settings")}
+        exact
+        render={() => (
+          <Settings />
+        )}
+      />
+      <Route
+        path={routeResolver.getRoute("debug")}
+        exact
+        render={() => (
+          <Debug />
+        )}
+      />
+      <PageNotFoundRoute container />
+    </Switch>
+  );
+}

webapp/src/Tasks/Main.tsx

@@ -0,0 +1,208 @@
+// SPDX-FileCopyrightText: © 2020 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { Switch, Route, useHistory } from "react-router";
+
+import * as Etebase from "etebase";
+
+import { Button, useTheme } from "@material-ui/core";
+import IconEdit from "@material-ui/icons/Edit";
+import IconChangeHistory from "@material-ui/icons/ChangeHistory";
+
+import { TaskType, PimType } from "../pim-types";
+import { useCredentials } from "../credentials";
+import { useItems, useCollections } from "../etebase-helpers";
+import { routeResolver } from "../App";
+import TaskList from "./TaskList";
+import Task from "./Task";
+import LoadingIndicator from "../widgets/LoadingIndicator";
+import TaskEdit from "./TaskEdit";
+import PageNotFound, { PageNotFoundRoute } from "../PageNotFound";
+
+import { CachedCollection, getItemNavigationUid, getDecryptCollectionsFunction, getDecryptItemsFunction, PimFab, itemSave, itemDelete } from "../Pim/helpers";
+import ItemChangeHistory from "../Pim/ItemChangeHistory";
+
+const colType = "etebase.vtodo";
+
+const decryptCollections = getDecryptCollectionsFunction(colType);
+const decryptItems = getDecryptItemsFunction(colType, TaskType.parse);
+
+export default function TasksMain() {
+  const [entries, setEntries] = React.useState<Map<string, Map<string, TaskType>>>();
+  const [cachedCollections, setCachedCollections] = React.useState<CachedCollection[]>();
+  const theme = useTheme();
+  const history = useHistory();
+  const etebase = useCredentials()!;
+  const collections = useCollections(etebase, colType);
+  const items = useItems(etebase, colType);
+
+  React.useEffect(() => {
+    if (!collections || !items) {
+      return;
+    }
+    (async () => {
+      const colEntries = await decryptCollections(collections);
+      const entries = await decryptItems(items);
+
+      setCachedCollections(colEntries);
+      setEntries(entries);
+    })();
+  }, [items, collections]);
+
+  if (!entries || !cachedCollections) {
+    return (
+      <LoadingIndicator />
+    );
+  }
+
+  async function onItemSave(item: PimType, collectionUid: string, originalItem?: PimType): Promise<void> {
+    const collection = collections!.find((x) => x.uid === collectionUid)!;
+    await itemSave(etebase, collection, items!, item, collectionUid, originalItem);
+  }
+
+  async function onItemDelete(item: PimType, collectionUid: string) {
+    const collection = collections!.find((x) => x.uid === collectionUid)!;
+    await itemDelete(etebase, collection, items!, item, collectionUid);
+
+    history.push(routeResolver.getRoute("pim.tasks"));
+  }
+
+  function onCancel() {
+    history.goBack();
+  }
+
+  const flatEntries = [];
+  for (const col of entries.values()) {
+    for (const item of col.values()) {
+      flatEntries.push(item);
+    }
+  }
+
+  const styles = {
+    button: {
+      marginLeft: theme.spacing(1),
+    },
+    leftIcon: {
+      marginRight: theme.spacing(1),
+    },
+  };
+
+  return (
+    <Switch>
+      <Route
+        path={routeResolver.getRoute("pim.tasks")}
+        exact
+      >
+        <TaskList
+          entries={flatEntries}
+          collections={cachedCollections}
+          onItemClick={(item: TaskType) => history.push(
+            routeResolver.getRoute("pim.tasks._id", { itemUid: getItemNavigationUid(item) })
+          )}
+          onItemSave={onItemSave}
+        />
+        <PimFab
+          onClick={() => history.push(
+            routeResolver.getRoute("pim.tasks.new")
+          )}
+        />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("pim.tasks.new")}
+        exact
+      >
+        <TaskEdit
+          collections={cachedCollections}
+          onSave={onItemSave}
+          onDelete={onItemDelete}
+          onCancel={onCancel}
+          history={history}
+        />
+      </Route>
+      <Route
+        path={routeResolver.getRoute("pim.tasks._id.log")}
+        render={({ match }) => {
+          // We have this path outside because we don't want the item existing check
+          const [colUid, itemUid] = match.params.itemUid.split("|");
+          const cachedCollection = cachedCollections!.find((x) => x.collection.uid === colUid)!;
+          if (!cachedCollection) {
+            return (<PageNotFound />);
+          }
+
+          return (
+            <ItemChangeHistory collection={cachedCollection} itemUid={itemUid} />
+          );
+        }}
+      />
+      <Route
+        path={routeResolver.getRoute("pim.tasks._id")}
+        render={({ match }) => {
+          const [colUid, itemUid] = match.params.itemUid.split("|");
+          const item = entries.get(colUid)?.get(itemUid);
+          if (!item) {
+            return (<PageNotFound />);
+          }
+
+          const collection = collections!.find((x) => x.uid === colUid)!;
+          const readOnly = collection.accessLevel === Etebase.CollectionAccessLevel.ReadOnly;
+
+          return (
+            <Switch>
+              <Route
+                path={routeResolver.getRoute("pim.tasks._id.edit")}
+                exact
+              >
+                <TaskEdit
+                  key={itemUid}
+                  initialCollection={item.collectionUid}
+                  item={item}
+                  collections={cachedCollections}
+                  onSave={onItemSave}
+                  onDelete={onItemDelete}
+                  onCancel={onCancel}
+                  history={history}
+                />
+              </Route>
+              <Route
+                path={routeResolver.getRoute("pim.tasks._id")}
+                exact
+              >
+                <div style={{ textAlign: "right", marginBottom: 15 }}>
+                  <Button
+                    variant="contained"
+                    style={styles.button}
+                    onClick={() =>
+                      history.push(routeResolver.getRoute("pim.tasks._id.log", { itemUid: getItemNavigationUid(item) }))
+                    }
+                  >
+                    <IconChangeHistory style={styles.leftIcon} />
+                    Change History
+                  </Button>
+
+                  <Button
+                    color="secondary"
+                    variant="contained"
+                    disabled={readOnly}
+                    style={{ ...styles.button, marginLeft: 15 }}
+                    onClick={() =>
+                      history.push(routeResolver.getRoute("pim.tasks._id.edit", { itemUid: getItemNavigationUid(item) }))
+                    }
+                  >
+                    <IconEdit style={styles.leftIcon} />
+                    Edit
+                  </Button>
+
+                </div>
+                <Task item={item} />
+              </Route>
+              <PageNotFoundRoute />
+            </Switch>
+          );
+        }}
+      />
+      <PageNotFoundRoute />
+    </Switch>
+  );
+}
+

webapp/src/Tasks/QuickAdd.tsx

@@ -0,0 +1,58 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import ICAL from "ical.js";
+
+import uuid from "uuid";
+
+import TextField from "@material-ui/core/TextField";
+
+import { TaskType, PimType, TaskStatusType } from "../pim-types";
+import { CachedCollection } from "../Pim/helpers";
+
+interface PropsType {
+  style: React.CSSProperties;
+  onSubmit: (item: PimType, journalUid: string, originalItem?: PimType) => void;
+  defaultCollection: CachedCollection;
+}
+
+function QuickAdd(props: PropsType) {
+  const [title, setTitle] = React.useState("");
+  const { style, onSubmit: save, defaultCollection } = props;
+
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setTitle(e.target.value);
+  }
+
+  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+
+    const task = new TaskType(null);
+    task.uid = uuid.v4();
+    task.title = title;
+    task.status = TaskStatusType.NeedsAction;
+    task.lastModified = ICAL.Time.now();
+
+    save(task, defaultCollection.collection.uid, undefined);
+
+    setTitle("");
+  }
+
+
+  return (
+    <form onSubmit={handleSubmit} style={style}>
+      <TextField
+        label="Add a new task"
+        variant="outlined"
+        fullWidth
+        value={title}
+        onChange={handleChange}
+      />
+    </form>
+  );
+}
+
+export default QuickAdd;

webapp/src/Tasks/Sidebar.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+
+import { useSelector, useDispatch } from "react-redux";
+
+import InboxIcon from "@material-ui/icons/Inbox";
+import LabelIcon from "@material-ui/icons/LabelOutlined";
+import TodayIcon from "@material-ui/icons/Today";
+
+import { setSettings } from "../store/actions";
+import { StoreState } from "../store";
+
+import { List, ListItem, ListSubheader } from "../widgets/List";
+import { TaskType, setTaskTags } from "../pim-types";
+
+interface ListItemPropsType {
+  name: string | null;
+  icon?: React.ReactElement;
+  primaryText: string;
+  amount: number;
+}
+
+function SidebarListItem(props: ListItemPropsType) {
+  const { name, icon, primaryText, amount } = props;
+  const dispatch = useDispatch();
+  const taskSettings = useSelector((state: StoreState) => state.settings.taskSettings);
+  const { filterBy } = taskSettings;
+
+  const handleClick = () => {
+    dispatch(setSettings({ taskSettings: { ...taskSettings, filterBy: name } }));
+  };
+
+  return (
+    <ListItem
+      onClick={handleClick}
+      selected={name === filterBy}
+      leftIcon={icon}
+      rightIcon={<span style={{ width: "100%", textAlign: "right" }}>{(amount > 0) && amount}</span>}
+      primaryText={primaryText}
+    />
+  );
+}
+
+export default React.memo(function Sidebar(props: { tasks: TaskType[] }) {
+  const { tasks } = props;
+
+  const amountDueToday = tasks.filter((x) => x.dueToday).length;
+
+  const tags = new Map<string, number>();
+  tasks.forEach((task) => task.tags.forEach((tag) => {
+    tags.set(tag, (tags.get(tag) ?? 0) + 1);
+  }));
+  // FIXME: ugly hack to support potential tags. Will be fixed very soon.
+  setTaskTags(Array.from(tags.keys()));
+
+  const tagsList = [...tags].sort(([a], [b]) => a.localeCompare(b)).map(([tag, amount]) => (
+    <SidebarListItem
+      key={tag}
+      name={`tag:${tag}`}
+      primaryText={tag}
+      icon={<LabelIcon />}
+      amount={amount}
+    />
+  ));
+
+  return (
+    <List dense>
+      <SidebarListItem name={null} primaryText="All" icon={<InboxIcon />} amount={tasks.length} />
+      <SidebarListItem name="today" primaryText="Due today" icon={<TodayIcon />} amount={amountDueToday} />
+
+      <ListSubheader>Tags</ListSubheader>
+      {tagsList}
+    </List>
+  );
+});

webapp/src/Tasks/Task.tsx

@@ -0,0 +1,54 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import PimItemHeader from "../components/PimItemHeader";
+
+import { formatDate, formatOurTimezoneOffset } from "../helpers";
+
+import { TaskType } from "../pim-types";
+
+class Task extends React.PureComponent {
+  public props: {
+    item?: TaskType;
+  };
+
+  public render() {
+    if (this.props.item === undefined) {
+      throw Error("Task should be defined!");
+    }
+
+    const { item } = this.props;
+
+    const style = {
+      content: {
+        padding: 15,
+      },
+    };
+
+    const timezone = this.props.item.timezone;
+
+    return (
+      <React.Fragment>
+        <PimItemHeader text={this.props.item.summary} backgroundColor={this.props.item.color}>
+          {item.startDate &&
+            <div>Start: {formatDate(item.startDate)} {timezone && <small>({formatOurTimezoneOffset()})</small>}</div>
+          }
+          {item.dueDate &&
+            <div>Due: {formatDate(item.dueDate)} {timezone && <small>({formatOurTimezoneOffset()})</small>}</div>
+          }
+          <br />
+          <div><u>{this.props.item.location}</u></div>
+        </PimItemHeader>
+        <div style={style.content}>
+          <p style={{ wordWrap: "break-word" }}>{this.props.item.description}</p>
+          {(this.props.item.attendees.length > 0) && (
+            <div>Attendees: {this.props.item.attendees.map((x) => (x.getFirstValue())).join(", ")}</div>)}
+        </div>
+      </React.Fragment>
+    );
+  }
+}
+
+export default Task;

webapp/src/Tasks/TaskEdit.tsx

@@ -0,0 +1,498 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import FormHelperText from "@material-ui/core/FormHelperText";
+import InputLabel from "@material-ui/core/InputLabel";
+import * as colors from "@material-ui/core/colors";
+import FormLabel from "@material-ui/core/FormLabel";
+import RadioGroup from "@material-ui/core/RadioGroup";
+
+import Autocomplete from "@material-ui/lab/Autocomplete";
+
+import IconDelete from "@material-ui/icons/Delete";
+import IconCancel from "@material-ui/icons/Clear";
+import IconSave from "@material-ui/icons/Save";
+
+import DateTimePicker from "../widgets/DateTimePicker";
+
+import ConfirmationDialog from "../widgets/ConfirmationDialog";
+import TimezonePicker from "../widgets/TimezonePicker";
+import Toast from "../widgets/Toast";
+
+import * as uuid from "uuid";
+import * as ICAL from "ical.js";
+
+import { getCurrentTimezone, mapPriority } from "../helpers";
+
+import { TaskType, TaskStatusType, timezoneLoadFromName, TaskPriorityType, TaskTags } from "../pim-types";
+
+import { History } from "history";
+
+import ColoredRadio from "../widgets/ColoredRadio";
+import RRule, { RRuleOptions } from "../widgets/RRule";
+import { CachedCollection } from "../Pim/helpers";
+
+interface PropsType {
+  collections: CachedCollection[];
+  initialCollection?: string;
+  item?: TaskType;
+  onSave: (item: TaskType, collectionUid: string, originalItem?: TaskType) => Promise<void>;
+  onDelete: (item: TaskType, collectionUid: string) => void;
+  onCancel: () => void;
+  history: History<any>;
+}
+
+export default class TaskEdit extends React.PureComponent<PropsType> {
+  public state: {
+    uid: string;
+    title: string;
+    status: TaskStatusType;
+    priority: TaskPriorityType;
+    includeTime: boolean;
+    start?: Date;
+    due?: Date;
+    timezone: string | null;
+    rrule?: RRuleOptions;
+    location: string;
+    description: string;
+    tags: string[];
+    collectionUid: string;
+
+    error?: string;
+    showDeleteDialog: boolean;
+  };
+
+  constructor(props: PropsType) {
+    super(props);
+    this.state = {
+      uid: "",
+      title: "",
+      status: TaskStatusType.NeedsAction,
+      priority: TaskPriorityType.Undefined,
+      includeTime: false,
+      location: "",
+      description: "",
+      tags: [],
+      timezone: null,
+
+      collectionUid: "",
+      showDeleteDialog: false,
+    };
+
+    if (this.props.item !== undefined) {
+      const task = this.props.item;
+
+      this.state.uid = task.uid;
+      this.state.title = task.title ? task.title : "";
+      this.state.status = task.status ?? TaskStatusType.NeedsAction;
+      this.state.priority = task.priority ?? TaskPriorityType.Undefined;
+      if (task.startDate) {
+        this.state.includeTime = !task.startDate.isDate;
+        this.state.start = task.startDate.convertToZone(ICAL.Timezone.localTimezone).toJSDate();
+      }
+      if (task.dueDate) {
+        this.state.due = task.dueDate.convertToZone(ICAL.Timezone.localTimezone).toJSDate();
+      }
+      const rrule = task.rrule;
+      if (rrule) {
+        this.state.rrule = rrule.toJSON() as any;
+        if (this.state.rrule && rrule.until) {
+          this.state.rrule.until = rrule.until;
+        }
+      }
+      this.state.location = task.location ? task.location : "";
+      this.state.description = task.description ? task.description : "";
+      this.state.timezone = task.timezone;
+      this.state.tags = task.tags;
+    } else {
+      this.state.uid = uuid.v4();
+    }
+
+    this.state.timezone = this.state.timezone || getCurrentTimezone();
+
+    if (props.initialCollection) {
+      this.state.collectionUid = props.initialCollection;
+    } else if (props.collections[0]) {
+      this.state.collectionUid = props.collections[0].collection.uid;
+    }
+
+    this.onSubmit = this.onSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.toggleTime = this.toggleTime.bind(this);
+    this.toggleRecurring = this.toggleRecurring.bind(this);
+    this.handleRRuleChange = this.handleRRuleChange.bind(this);
+    this.onDeleteRequest = this.onDeleteRequest.bind(this);
+    this.handleCloseToast = this.handleCloseToast.bind(this);
+  }
+
+  public handleChange(name: string, value: string | number | string[]) {
+    this.setState({
+      [name]: value,
+    });
+
+  }
+
+  public handleInputChange(event: React.ChangeEvent<any>) {
+    const name = event.target.name;
+    const value = event.target.value;
+    this.handleChange(name, value);
+  }
+
+  public toggleTime() {
+    this.setState({ includeTime: !this.state.includeTime });
+  }
+
+  public handleCloseToast(_event?: React.SyntheticEvent, reason?: string) {
+    if (reason === "clickaway") {
+      return;
+    }
+
+    this.setState({ error: "" });
+  }
+
+  public toggleRecurring() {
+    const value = this.state.rrule ? undefined : { freq: "WEEKLY", interval: 1 };
+    this.setState({ rrule: value });
+  }
+
+  public handleRRuleChange(rrule: RRuleOptions): void {
+    this.setState({ rrule: rrule });
+  }
+
+  public onSubmit(e: React.FormEvent<any>) {
+    e.preventDefault();
+
+    if (this.state.rrule && !(this.state.start || this.state.due)) {
+      this.setState({ error: "A recurring task must have either Hide Until or Due Date set!" });
+      return;
+    }
+
+    function fromDate(date: Date | undefined, includeTime: boolean) {
+      if (!date) {
+        return undefined;
+      }
+      const ret = ICAL.Time.fromJSDate(date, false);
+      if (includeTime) {
+        return ret;
+      } else {
+        const data = ret.toJSON();
+        data.isDate = true;
+        return ICAL.Time.fromData(data);
+      }
+    }
+
+    const startDate = fromDate(this.state.start, this.state.includeTime);
+    const dueDate = fromDate(this.state.due, this.state.includeTime);
+
+    if (startDate && dueDate) {
+      if (startDate.compare(dueDate) >= 0) {
+        this.setState({ error: "End time must be later than start time!" });
+        return;
+      }
+    }
+
+    const task = (this.props.item) ?
+      this.props.item.clone()
+      :
+      new TaskType(null)
+      ;
+
+    task.uid = this.state.uid;
+    task.summary = this.state.title;
+    task.status = this.state.status;
+    task.priority = this.state.priority;
+    task.tags = this.state.tags;
+    if (startDate) {
+      task.startDate = startDate;
+    }
+    task.dueDate = dueDate;
+    if (this.state.rrule) {
+      task.rrule = new ICAL.Recur(this.state.rrule);
+    }
+    task.location = this.state.location;
+    task.description = this.state.description;
+    if (this.state.timezone) {
+      const timezone = timezoneLoadFromName(this.state.timezone);
+      if (timezone) {
+        if (task.startDate) {
+          task.startDate = task.startDate.convertToZone(timezone);
+        }
+        if (task.dueDate) {
+          task.dueDate = task.dueDate.convertToZone(timezone);
+        }
+        if (task.completionDate) {
+          task.completionDate = task.completionDate.convertToZone(timezone);
+        }
+      }
+    }
+
+    task.component.updatePropertyWithValue("last-modified", ICAL.Time.now());
+
+    this.props.onSave(task, this.state.collectionUid, this.props.item)
+      .then(() => {
+        const nextTask = task.finished && task.getNextOccurence();
+        if (nextTask) {
+          return this.props.onSave(nextTask, this.state.collectionUid);
+        } else {
+          return Promise.resolve();
+        }
+      })
+      .then(() => {
+        this.props.history.goBack();
+      })
+      .catch(() => {
+        this.setState({ error: "Could not save task" });
+      });
+  }
+
+  public onDeleteRequest() {
+    this.setState({
+      showDeleteDialog: true,
+    });
+  }
+
+  public render() {
+    const styles = {
+      form: {
+      },
+      fullWidth: {
+        width: "100%",
+        boxSizing: "border-box" as any,
+        marginTop: 16,
+      },
+      submit: {
+        marginTop: 40,
+        marginBottom: 20,
+        textAlign: "right" as any,
+      },
+    };
+
+    const recurring = this.props.item && this.props.item.isRecurring();
+    const differentTimezone = this.state.timezone && (this.state.timezone !== getCurrentTimezone()) && timezoneLoadFromName(this.state.timezone);
+
+    return (
+      <React.Fragment>
+        <h2>
+          {this.props.item ? "Edit Task" : "New Task"}
+        </h2>
+        {recurring && (
+          <div>
+            <span style={{ color: "red" }}>IMPORTANT: </span>
+            This is a recurring task, for now, only editing the whole series
+            (by editing the first instance) is supported.
+          </div>
+        )}
+        <Toast open={!!this.state.error} severity="error" onClose={this.handleCloseToast}>
+          ERROR! {this.state.error}
+        </Toast>
+        <form style={styles.form} onSubmit={this.onSubmit}>
+          <TextField
+            name="title"
+            placeholder="Enter title"
+            style={styles.fullWidth}
+            value={this.state.title}
+            onChange={this.handleInputChange}
+          />
+
+          <FormControl disabled={this.props.item !== undefined} style={styles.fullWidth}>
+            <InputLabel>
+              Saving to
+            </InputLabel>
+            <Select
+              name="collectionUid"
+              value={this.state.collectionUid}
+              disabled={this.props.item !== undefined}
+              onChange={this.handleInputChange}
+            >
+              {this.props.collections.map((x) => (
+                <MenuItem key={x.collection.uid} value={x.collection.uid}>{x.metadata.name}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+
+          <FormControl style={styles.fullWidth}>
+            <InputLabel>
+              Status
+            </InputLabel>
+            <Select
+              name="status"
+              value={this.state.status}
+              onChange={this.handleInputChange}
+            >
+              <MenuItem value={TaskStatusType.NeedsAction}>Needs action</MenuItem>
+              <MenuItem value={TaskStatusType.InProcess}>In progress</MenuItem>
+              <MenuItem value={TaskStatusType.Completed}>Completed</MenuItem>
+              <MenuItem value={TaskStatusType.Cancelled}>Cancelled</MenuItem>
+            </Select>
+          </FormControl>
+
+          <FormControl style={styles.fullWidth}>
+            <FormLabel>Priority</FormLabel>
+
+            <RadioGroup
+              row
+              value={mapPriority(this.state.priority)}
+              onChange={(e) => this.handleChange("priority", Number(e.target.value))}
+            >
+              <ColoredRadio value={TaskPriorityType.Undefined} label="None" color={colors.grey[600]} />
+              <ColoredRadio value={TaskPriorityType.Low} label="Low" color={colors.blue[600]} />
+              <ColoredRadio value={TaskPriorityType.Medium} label="Medium" color={colors.orange[600]} />
+              <ColoredRadio value={TaskPriorityType.High} label="High" color={colors.red[600]} />
+            </RadioGroup>
+          </FormControl>
+
+          <FormControl style={styles.fullWidth}>
+            <FormHelperText>Hide until</FormHelperText>
+            <DateTimePicker
+              dateOnly={!this.state.includeTime}
+              placeholder="Hide until"
+              value={this.state.start}
+              onChange={(date?: Date) => this.setState({ start: date })}
+            />
+            {differentTimezone && this.state.start && (
+              <FormHelperText>{ICAL.Time.fromJSDate(this.state.start, false).convertToZone(differentTimezone!).toJSDate().toString()}</FormHelperText>
+            )}
+          </FormControl>
+
+          <FormControl style={styles.fullWidth}>
+            <FormHelperText>Due</FormHelperText>
+            <DateTimePicker
+              dateOnly={!this.state.includeTime}
+              placeholder="Due"
+              value={this.state.due}
+              onChange={(date?: Date) => this.setState({ due: date })}
+            />
+            {differentTimezone && this.state.due && (
+              <FormHelperText>{ICAL.Time.fromJSDate(this.state.due, false).convertToZone(differentTimezone!).toJSDate().toString()}</FormHelperText>
+            )}
+          </FormControl>
+
+          <FormGroup style={styles.fullWidth}>
+            <FormControlLabel
+              control={
+                <Switch
+                  name="includeTime"
+                  checked={this.state.includeTime}
+                  onChange={this.toggleTime}
+                  color="primary"
+                />
+              }
+              label="Include time"
+            />
+          </FormGroup>
+
+          {(this.state.includeTime) && (
+            <TimezonePicker style={styles.fullWidth} value={this.state.timezone} onChange={(zone) => this.setState({ timezone: zone })} />
+          )}
+
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  name="recurring"
+                  checked={!!this.state.rrule}
+                  onChange={this.toggleRecurring}
+                  color="primary"
+                />
+              }
+              label="Recurring"
+            />
+          </FormGroup>
+          {this.state.rrule &&
+            <RRule
+              onChange={this.handleRRuleChange}
+              rrule={this.state.rrule ? this.state.rrule : { freq: "DAILY", interval: 1 }}
+            />
+          }
+
+          <TextField
+            name="location"
+            placeholder="Add location"
+            style={styles.fullWidth}
+            value={this.state.location}
+            onChange={this.handleInputChange}
+          />
+
+          <TextField
+            name="description"
+            placeholder="Add description"
+            multiline
+            style={styles.fullWidth}
+            value={this.state.description}
+            onChange={this.handleInputChange}
+          />
+
+          <Autocomplete
+            style={styles.fullWidth}
+            freeSolo
+            multiple
+            options={TaskTags}
+            value={this.state.tags}
+            onChange={(_e, value) => this.handleChange("tags", value)}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                variant="standard"
+                label="Tags"
+                fullWidth
+              />
+            )}
+          />
+
+          <div style={styles.submit}>
+            <Button
+              variant="contained"
+              onClick={this.props.onCancel}
+            >
+              <IconCancel style={{ marginRight: 8 }} />
+              Cancel
+            </Button>
+
+            {this.props.item &&
+              <Button
+                variant="contained"
+                style={{ marginLeft: 15, backgroundColor: colors.red[500], color: "white" }}
+                onClick={this.onDeleteRequest}
+              >
+                <IconDelete style={{ marginRight: 8 }} />
+                Delete
+              </Button>
+            }
+
+            <Button
+              type="submit"
+              variant="contained"
+              color="secondary"
+              style={{ marginLeft: 15 }}
+            >
+              <IconSave style={{ marginRight: 8 }} />
+              Save
+            </Button>
+          </div>
+        </form>
+
+        <ConfirmationDialog
+          title="Delete Confirmation"
+          labelOk="Delete"
+          open={this.state.showDeleteDialog}
+          onOk={() => this.props.onDelete(this.props.item!, this.props.initialCollection!)}
+          onCancel={() => this.setState({ showDeleteDialog: false })}
+        >
+          Are you sure you would like to delete this task?
+        </ConfirmationDialog>
+      </React.Fragment>
+    );
+  }
+}

webapp/src/Tasks/TaskList.tsx

@@ -0,0 +1,235 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import { List } from "../widgets/List";
+
+import { TaskType, PimType, TaskStatusType } from "../pim-types";
+import Divider from "@material-ui/core/Divider";
+import Grid from "@material-ui/core/Grid";
+import { useTheme, makeStyles } from "@material-ui/core/styles";
+
+import { useSelector, useDispatch } from "react-redux";
+
+import Fuse from "fuse.js";
+
+import TaskListItem from "./TaskListItem";
+import Sidebar from "./Sidebar";
+import Toolbar from "./Toolbar";
+import QuickAdd from "./QuickAdd";
+
+import { StoreState } from "../store";
+import { formatDate } from "../helpers";
+import { CachedCollection } from "../Pim/helpers";
+import { pushMessage } from "../store/actions";
+
+function sortCompleted(a: TaskType, b: TaskType) {
+  return (!!a.finished === !!b.finished) ? 0 : (a.finished) ? 1 : -1;
+}
+
+function sortLastModifiedDate(aIn: TaskType, bIn: TaskType) {
+  const a = aIn.lastModified?.toJSDate() ?? new Date(0);
+  const b = bIn.lastModified?.toJSDate() ?? new Date(0);
+  return (a > b) ? -1 : (a < b) ? 1 : 0;
+}
+
+function sortDueDate(aIn: TaskType, bIn: TaskType) {
+  const impossiblyLargeDate = 8640000000000000;
+  const a = aIn.dueDate?.toJSDate() ?? new Date(impossiblyLargeDate);
+  const b = bIn.dueDate?.toJSDate() ?? new Date(impossiblyLargeDate);
+  return (a < b) ? -1 : (a > b) ? 1 : 0;
+}
+
+function sortPriority(aIn: TaskType, bIn: TaskType) {
+  // Intentionally converts 0/undefined to 10 (1 more than lowest priority) to sort to back of the list
+  const a = aIn.priority || 10;
+  const b = bIn.priority || 10;
+  return a - b;
+}
+
+function sortTitle(aIn: TaskType, bIn: TaskType) {
+  const a = aIn.title ?? "";
+  const b = bIn.title ?? "";
+  return a.localeCompare(b);
+}
+
+function getSortFunction(sortOrder: string) {
+  const sortFunctions: (typeof sortTitle)[] = [sortCompleted];
+
+  switch (sortOrder) {
+    case "smart":
+      sortFunctions.push(sortPriority);
+      sortFunctions.push(sortDueDate);
+      sortFunctions.push(sortTitle);
+      break;
+    case "dueDate":
+      sortFunctions.push(sortDueDate);
+      break;
+    case "priority":
+      sortFunctions.push(sortPriority);
+      sortFunctions.push(sortDueDate);
+      break;
+    case "title":
+      sortFunctions.push(sortTitle);
+      break;
+    case "lastModifiedDate":
+      // Do nothing because it's the last sort function anyway
+      break;
+  }
+
+  sortFunctions.push(sortLastModifiedDate);
+
+  return (a: TaskType, b: TaskType) => {
+    for (const sortFunction of sortFunctions) {
+      const ret = sortFunction(a, b);
+      if (ret !== 0) {
+        return ret;
+      }
+    }
+
+    return 0;
+  };
+}
+
+const useStyles = makeStyles((theme) => ({
+  topBar: {
+    backgroundColor: theme.palette.primary[500],
+  },
+}));
+
+interface PropsType {
+  entries: TaskType[];
+  collections: CachedCollection[];
+  onItemClick: (entry: TaskType) => void;
+  onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => Promise<void>;
+}
+
+export default function TaskList(props: PropsType) {
+  const [showCompleted, setShowCompleted] = React.useState(false);
+  const [showHidden, setShowHidden] = React.useState(false);
+  const [searchTerm, setSearchTerm] = React.useState("");
+  const settings = useSelector((state: StoreState) => state.settings.taskSettings);
+  const { filterBy, sortBy } = settings;
+  const dispatch = useDispatch();
+  const theme = useTheme();
+  const classes = useStyles();
+
+  const { onItemClick } = props;
+
+  const handleToggleComplete = async (task: TaskType, completed: boolean) => {
+    const clonedTask = task.clone();
+    clonedTask.status = completed ? TaskStatusType.Completed : TaskStatusType.NeedsAction;
+
+    const nextTask = completed ? task.getNextOccurence() : null;
+
+    try {
+      await props.onItemSave(clonedTask, task.collectionUid!, task);
+      if (nextTask) {
+        dispatch(pushMessage({ message: `${nextTask.title} rescheduled for ${formatDate(nextTask.startDate ?? nextTask.dueDate)}`, severity: "success" }));
+      }
+    } catch (_e) {
+      dispatch(pushMessage({ message: "Failed to save changes. This may be due to a network error.", severity: "error" }));
+    }
+  };
+
+  const potentialEntries = React.useMemo(
+    () => {
+      if (searchTerm) {
+        const result = new Fuse(props.entries, {
+          shouldSort: true,
+          threshold: 0.6,
+          maxPatternLength: 32,
+          minMatchCharLength: 2,
+          keys: [
+            "title",
+            "desc",
+          ],
+        }).search(searchTerm);
+        return result.map((x) => x.item);
+      } else {
+        return props.entries.filter((x) => (showCompleted || !x.finished) && (showHidden || !x.hidden));
+      }
+    },
+    [showCompleted, props.entries, searchTerm, showHidden]
+  );
+
+  let entries;
+
+  const tagPrefix = "tag:";
+  if (filterBy?.startsWith(tagPrefix)) {
+    const tag = filterBy.slice(tagPrefix.length);
+    entries = potentialEntries.filter((x) => x.tags.includes(tag));
+  } else if (filterBy === "today") {
+    entries = potentialEntries.filter((x) => x.dueToday);
+  } else {
+    entries = potentialEntries;
+  }
+
+  const subEntriesMap = new Map<string, TaskType[]>();
+
+  entries = entries.filter((x) => {
+    const relatedTo = x.relatedTo;
+    if (relatedTo) {
+      const cur = subEntriesMap.get(relatedTo) ?? [];
+      cur.push(x);
+      subEntriesMap.set(relatedTo, cur);
+      return false;
+    }
+    return true;
+  });
+
+  function taskListItemFromTask(entry: TaskType) {
+    const uid = entry.uid;
+
+    return (
+      <TaskListItem
+        key={uid}
+        entry={entry}
+        nestedItems={subEntriesMap.get(uid)?.map(taskListItemFromTask)}
+        onClick={onItemClick}
+        onToggleComplete={handleToggleComplete}
+      />
+    );
+  }
+
+  const sortedEntries = entries.sort(getSortFunction(sortBy));
+
+  const itemList = sortedEntries.map(taskListItemFromTask);
+
+  return (
+    <Grid container spacing={4}>
+      <Grid item xs={3} className={classes.topBar}>
+        {/* spacer */}
+      </Grid>
+
+      <Grid item xs={9} className={classes.topBar}>
+        <Toolbar
+          defaultCollection={props.collections?.[0]}
+          onItemSave={props.onItemSave}
+          showCompleted={showCompleted}
+          setShowCompleted={setShowCompleted}
+          searchTerm={searchTerm}
+          setSearchTerm={setSearchTerm}
+          showHidden={showHidden}
+          setShowHidden={setShowHidden}
+        />
+      </Grid>
+
+      <Grid item xs={3} style={{ borderRight: `1px solid ${theme.palette.divider}` }}>
+        <Sidebar tasks={potentialEntries} />
+      </Grid>
+
+      <Grid item xs>
+
+        {props.collections?.[0] && <QuickAdd style={{ flexGrow: 1, marginRight: "0.75em" }} onSubmit={props.onItemSave} defaultCollection={props.collections?.[0]} />}
+
+        <Divider style={{ marginTop: "1em" }} />
+
+        <List>
+          {itemList}
+        </List>
+      </Grid>
+    </Grid>
+  );
+}

webapp/src/Tasks/TaskListItem.tsx

@@ -0,0 +1,73 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import { TaskType, TaskPriorityType } from "../pim-types";
+import { ListItem } from "../widgets/List";
+
+import Checkbox from "@material-ui/core/Checkbox";
+import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank";
+import * as colors from "@material-ui/core/colors";
+import Chip from "@material-ui/core/Chip";
+
+import { mapPriority, formatDate } from "../helpers";
+
+const checkboxColor = {
+  [TaskPriorityType.Undefined]: colors.grey[600],
+  [TaskPriorityType.Low]: colors.blue[600],
+  [TaskPriorityType.Medium]: colors.orange[600],
+  [TaskPriorityType.High]: colors.red[600],
+};
+
+const TagsList = React.memo((props: { tags: string[] }) => (
+  <ul>
+    {props.tags.map((tag, i) => tag && <Chip
+      key={i}
+      color="secondary"
+      size="small"
+      label={tag}
+      style={{ marginRight: "0.75em" }}
+      component="li"
+    />)}
+  </ul>));
+
+interface PropsType {
+  entry: TaskType;
+  nestedItems?: React.ReactNode[];
+  onClick: (task: TaskType) => void;
+  onToggleComplete: (task: TaskType, completed: boolean) => void;
+}
+
+export default React.memo(function TaskListItem(props: PropsType) {
+  const {
+    entry: task,
+    nestedItems,
+    onClick,
+    onToggleComplete,
+  } = props;
+  const title = task.title;
+
+  const dueDateText = task.dueDate ? `Due ${formatDate(task.dueDate)}` : "";
+  const freqText = task.rrule ? `(repeats ${task.rrule.freq.toLowerCase()})` : "";
+  const secondaryText = `${dueDateText} ${freqText}`;
+
+  return (
+    <ListItem
+      primaryText={title}
+      secondaryText={secondaryText}
+      secondaryTextColor={task.overdue ? "error" : "textSecondary"}
+      nestedItems={nestedItems}
+      onClick={() => onClick(task)}
+      leftIcon={
+        <Checkbox
+          onClick={(e) => e.stopPropagation()}
+          onChange={(_e, checked) => onToggleComplete(task, checked)}
+          checked={task.finished}
+          icon={<CheckBoxOutlineBlankIcon style={{ color: checkboxColor[mapPriority(task.priority)] }} />}
+        />
+      }
+      rightIcon={<TagsList tags={task.tags} />}
+    />
+  );
+});

webapp/src/Tasks/Toolbar.tsx

@@ -0,0 +1,164 @@
+import * as React from "react";
+
+import Switch from "@material-ui/core/Switch";
+import IconButton from "@material-ui/core/IconButton";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
+import MenuItem from "@material-ui/core/MenuItem";
+import SortIcon from "@material-ui/icons/Sort";
+import SearchIcon from "@material-ui/icons/Search";
+import TextField from "@material-ui/core/TextField";
+import { makeStyles } from "@material-ui/core/styles";
+import { Transition } from "react-transition-group";
+import InputAdornment from "@material-ui/core/InputAdornment";
+
+import { PimType } from "../pim-types";
+
+import { useSelector, useDispatch } from "react-redux";
+
+import { setSettings } from "../store/actions";
+import { StoreState } from "../store";
+
+import Menu from "../widgets/Menu";
+import { ListItemText, ListItemSecondaryAction } from "@material-ui/core";
+import { CachedCollection } from "../Pim/helpers";
+
+const transitionTimeout = 300;
+
+const transitionStyles = {
+  entering: { visibility: "visible", width: "100%", overflow: "hidden" },
+  entered: { visibility: "visible", width: "100%" },
+  exiting: { visibility: "visible", width: "0%", overflow: "hidden" },
+  exited: { visibility: "hidden", width: "0%" },
+};
+
+const useStyles = makeStyles((theme) => ({
+  button: {
+    marginRight: theme.spacing(1),
+  },
+  textField: {
+    transition: `width ${transitionTimeout}ms`,
+    marginRight: theme.spacing(1),
+  },
+}));
+
+interface PropsType {
+  defaultCollection: CachedCollection;
+  onItemSave: (item: PimType, journalUid: string, originalItem?: PimType) => Promise<void>;
+  showCompleted: boolean;
+  showHidden: boolean;
+  setShowCompleted: (completed: boolean) => void;
+  setShowHidden: (hidden: boolean) => void;
+  searchTerm: string;
+  setSearchTerm: (term: string) => void;
+}
+
+export default function Toolbar(props: PropsType) {
+  const { showCompleted, setShowCompleted, searchTerm, setSearchTerm, showHidden, setShowHidden } = props;
+
+  const [sortAnchorEl, setSortAnchorEl] = React.useState<null | HTMLElement>(null);
+  const [optionsAnchorEl, setOptionsAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const showSearchField = true;
+  const classes = useStyles();
+
+  const dispatch = useDispatch();
+  const taskSettings = useSelector((state: StoreState) => state.settings.taskSettings);
+  const { sortBy } = taskSettings;
+
+  const handleSortChange = (sort: string) => {
+    dispatch(setSettings({ taskSettings: { ...taskSettings, sortBy: sort } }));
+    setSortAnchorEl(null);
+  };
+
+  const SortMenuItem = React.forwardRef(function SortMenuItem(props: { name: string, label: string }, ref) {
+    return (
+      <MenuItem innerRef={ref} selected={sortBy === props.name} onClick={() => handleSortChange(props.name)}>{props.label}</MenuItem>
+    );
+  });
+
+  return (
+    <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center" }}>
+      <Transition in={showSearchField} timeout={transitionTimeout}>
+        {(state) => (
+          <TextField
+            fullWidth
+            placeholder="Search"
+            value={searchTerm}
+            color="secondary"
+            variant="standard"
+            className={classes.textField}
+            style={transitionStyles[state]}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon />
+                </InputAdornment>
+              ),
+            }}
+          />
+        )}
+      </Transition>
+
+      <div className={classes.button}>
+        <IconButton
+          size="small"
+          title="Sort"
+          aria-label="Sort"
+          aria-controls="sort-menu"
+          aria-haspopup="true"
+          onClick={(e) => setSortAnchorEl(e.currentTarget)}
+        >
+          <SortIcon />
+        </IconButton>
+        <Menu
+          id="sort-menu"
+          anchorEl={sortAnchorEl}
+          keepMounted
+          open={!!sortAnchorEl}
+          onClose={() => setSortAnchorEl(null)}
+        >
+          <SortMenuItem name="smart" label="Smart" />
+          <SortMenuItem name="dueDate" label="Due Date" />
+          <SortMenuItem name="priority" label="Priority" />
+          <SortMenuItem name="title" label="Title" />
+          <SortMenuItem name="lastModifiedDate" label="Last Modified" />
+        </Menu>
+      </div>
+
+      <div className={classes.button}>
+        <IconButton
+          size="small"
+          title="Options"
+          aria-label="Options"
+          aria-controls="options-menu"
+          aria-haspopup="true"
+          onClick={(e) => setOptionsAnchorEl(e.currentTarget)}
+        >
+          <MoreVertIcon />
+        </IconButton>
+        <Menu
+          id="options-menu"
+          anchorEl={optionsAnchorEl}
+          keepMounted
+          open={!!optionsAnchorEl}
+          onClose={() => setOptionsAnchorEl(null)}
+        >
+          <MenuItem>
+            <ListItemText style={{ marginRight: "1.5em" }}>Show completed</ListItemText>
+            <ListItemSecondaryAction>
+              <Switch checked={showCompleted} onChange={(_e, checked) => setShowCompleted(checked)} edge="end" />
+            </ListItemSecondaryAction>
+          </MenuItem>
+          <MenuItem>
+            <ListItemText style={{ marginRight: "1.5em" }}>Show hidden</ListItemText>
+            <ListItemSecondaryAction>
+              <Switch checked={showHidden} onChange={(_e, checked) => setShowHidden(checked)} edge="end" />
+            </ListItemSecondaryAction>
+          </MenuItem>
+        </Menu>
+
+      </div>
+    </div>
+  );
+}

webapp/src/WizardPage.tsx

@@ -0,0 +1,171 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import * as Etebase from "etebase";
+import { Redirect, useLocation } from "react-router";
+import Button from "@material-ui/core/Button";
+import Alert from "@material-ui/lab/Alert";
+
+import { routeResolver } from "./App";
+
+import Container from "./widgets/Container";
+import LoadingIndicator from "./widgets/LoadingIndicator";
+import Wizard, { WizardNavigationBar, PagePropsType } from "./widgets/Wizard";
+
+import { SyncManager } from "./sync/SyncManager";
+
+import { store } from "./store";
+import { useCredentials } from "./credentials";
+
+import wizardWelcome from "./images/wizard-welcome.svg";
+import wizardCreate from "./images/wizard-create.svg";
+
+interface LocationState {
+  from: {
+    pathname: string;
+  };
+}
+
+const wizardPages = [
+  (props: PagePropsType) => (
+    <>
+      <div style={{ display: "flex", flexDirection: "column", flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <h2 style={{ textAlign: "center" }}>Welcome to EteSync!</h2>
+        <p style={{ textAlign: "center" }}>
+          Please follow these few quick steps to help you get started.
+        </p>
+        <img src={wizardWelcome} style={{ maxWidth: "30em", marginTop: "2em" }} />
+      </div>
+      <WizardNavigationBar {...props} />
+    </>
+  ),
+  (props: PagePropsType) => (
+    <SetupCollectionsPage {...props} />
+  ),
+];
+
+function SetupCollectionsPage(props: PagePropsType) {
+  const etebase = useCredentials()!;
+  const [error, setError] = React.useState<Error>();
+  const [loading, setLoading] = React.useState(false);
+  async function onNext() {
+    setLoading(true);
+    try {
+      const colMgr = etebase.getCollectionManager();
+      const types = [
+        ["etebase.vcard", "My Contacts"],
+        ["etebase.vevent", "My Calendar"],
+        ["etebase.vtodo", "My Tasks"],
+      ];
+      for (const [type, name] of types) {
+        const meta: Etebase.ItemMetadata = {
+          name,
+          mtime: (new Date()).getTime(),
+        };
+        const collection = await colMgr.create(type, meta, "");
+        await colMgr.upload(collection);
+      }
+
+      props.next?.();
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const next = (loading) ? undefined : onNext;
+  return (
+    <>
+      <div style={{ display: "flex", flexDirection: "column", flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <h2 style={{ textAlign: "center" }}>Setup Collections</h2>
+        <p style={{ textAlign: "center", maxWidth: "50em" }}>
+          In order to start using EteSync you need to create collections to store your data. Clicking <i>Finish</i> below will create a default calendar, address book and a task list for you.
+        </p>
+        {(loading) ? (
+          <LoadingIndicator style={{ display: "block", margin: "40px auto" }} />
+        ) : (error) ? (
+          <>
+            <Alert severity="error">{error.message}</Alert>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={props.next}
+            >
+              Skip
+            </Button>
+          </>
+        ) : (
+          <img src={wizardCreate} style={{ maxWidth: "30em", marginTop: "2em" }} />
+        )}
+      </div>
+      <WizardNavigationBar {...props} next={next} />
+    </>
+  );
+}
+
+export default function WizardPage() {
+  const [tryCount, setTryCount] = React.useState(0);
+  const [ranWizard, setRanWizard] = React.useState(false);
+  const [syncError, setSyncError] = React.useState<Error>();
+  const etebase = useCredentials();
+  const location = useLocation();
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    setLoading(true);
+    setSyncError(undefined);
+    (async () => {
+      const syncManager = SyncManager.getManager(etebase!);
+      const sync = syncManager.sync(true);
+      try {
+        await sync;
+
+        const cachedCollection = store.getState().cache.collections;
+        // XXX new account - though should change test to see if there are any PIM types
+        if (cachedCollection.size > 0) {
+          setRanWizard(true);
+        }
+      } catch (e) {
+        setSyncError(e);
+      }
+      setLoading(false);
+    })();
+  }, [tryCount]);
+
+  if (syncError) {
+    return (
+      <Container>
+        <div style={{ display: "flex", flexDirection: "column", flex: 1, justifyContent: "center", alignItems: "center" }}>
+          <h2 style={{ textAlign: "center" }}>Important</h2>
+          <p style={{ textAlign: "center" }}>
+            {syncError?.message}
+          </p>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => setTryCount(tryCount + 1)}
+          >
+            Retry
+          </Button>
+        </div>
+      </Container>
+    );
+  }
+
+  if (loading) {
+    return (<LoadingIndicator style={{ display: "block", margin: "40px auto" }} />);
+  }
+
+  if (!ranWizard) {
+    return (
+      <Wizard pages={wizardPages} onFinish={() => setRanWizard(true)} style={{ display: "flex", flexDirection: "column", flex: 1 }} />
+    );
+  }
+
+  const { from } = location.state as LocationState || { from: { pathname: routeResolver.getRoute("home") } };
+  return (
+    <Redirect to={from.pathname} />
+  );
+}

webapp/src/components/ErrorBoundary.tsx

@@ -0,0 +1,57 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import { IntegrityError } from "etebase";
+import PrettyError from "../widgets/PrettyError";
+
+interface PropsType {
+  children: React.ReactNode | React.ReactNode[];
+}
+
+class ErrorBoundary extends React.Component<PropsType> {
+  public state: {
+    error?: Error;
+  };
+
+  constructor(props: PropsType) {
+    super(props);
+    this.state = { };
+  }
+
+  public componentDidCatch(error: Error, _info: any) {
+    this.setState({ error });
+  }
+
+  public render() {
+    const { error } = this.state;
+    if (error) {
+      if (error instanceof IntegrityError) {
+        return (
+          <div>
+            <h2>Integrity Error</h2>
+            <p>
+              Please log out from the menu, refresh the page and try again, and if the problem persists, contact support.
+            </p>
+            <pre>
+              {error.message}
+            </pre>
+          </div>
+        );
+      }
+    }
+
+    if (error) {
+      return (
+        <div>
+          <h2>Something went wrong!</h2>
+          <PrettyError error={this.state.error} />
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

webapp/src/components/GenericChangeHistory.tsx

@@ -0,0 +1,118 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import moment from "moment";
+
+import * as Etebase from "etebase";
+
+import { AutoSizer, List as VirtualizedList } from "react-virtualized";
+
+import { List, ListItem } from "../widgets/List";
+import IconEdit from "@material-ui/icons/Edit";
+import IconDelete from "@material-ui/icons/Delete";
+import IconError from "@material-ui/icons/Error";
+
+import { TaskType, EventType, ContactType, parseString } from "../pim-types";
+
+export interface CachedItem {
+  item: Etebase.Item;
+  metadata: Etebase.ItemMetadata;
+  content: string;
+}
+
+interface PropsType {
+  items: CachedItem[];
+  onItemClick: (item: CachedItem) => void;
+
+}
+
+export default function GenericChangeHistory(props: PropsType) {
+  const entriesList = props.items.sort((a_, b_) => {
+    const a = a_.metadata.mtime ?? 0;
+    const b = b_.metadata.mtime ?? 0;
+    return a - b;
+  });
+
+  const onItemClick = props.onItemClick;
+
+  const rowRenderer = (params: { index: number, key: string, style: React.CSSProperties }) => {
+    const { key, index, style } = params;
+    const cacheItem = entriesList[entriesList.length - index - 1]!;
+    let comp;
+    try {
+      comp = parseString(cacheItem.content);
+    } catch (e) {
+      const icon = (<IconError style={{ color: "red" }} />);
+      return (
+        <ListItem
+          key={key}
+          style={style}
+          leftIcon={icon}
+          primaryText="Failed parsing item"
+          secondaryText="Unknown"
+          onClick={() => onItemClick(cacheItem)}
+        />
+      );
+    }
+
+    let icon;
+    if (!cacheItem.item.isDeleted) {
+      icon = (<IconEdit style={{ color: "#16B14B" }} />);
+    } else {
+      icon = (<IconDelete style={{ color: "#F20C0C" }} />);
+    }
+
+    let name;
+    if (comp.name === "vcalendar") {
+      if (EventType.isEvent(comp)) {
+        const vevent = EventType.fromVCalendar(comp);
+        name = vevent.summary;
+      } else {
+        const vtodo = TaskType.fromVCalendar(comp);
+        name = vtodo.summary;
+      }
+    } else if (comp.name === "vcard") {
+      const vcard = new ContactType(comp);
+      name = vcard.fn;
+    } else {
+      name = "Error processing entry";
+    }
+
+    const mtime = (cacheItem.metadata.mtime) ? moment(cacheItem.metadata.mtime) : undefined;
+
+    return (
+      <ListItem
+        key={key}
+        style={style}
+        leftIcon={icon}
+        primaryText={name}
+        secondaryText={mtime && mtime.format("llll")}
+        onClick={() => onItemClick(cacheItem)}
+      />
+    );
+  };
+
+  return (
+    <List style={{ height: "100%" }}>
+      {(entriesList.length > 0) ? (
+        <AutoSizer>
+          {({ height, width }) => (
+            <VirtualizedList
+              width={width}
+              height={height}
+              rowCount={entriesList.length}
+              rowHeight={56}
+              rowRenderer={rowRenderer}
+            />
+          )}
+        </AutoSizer>
+      ) : (
+        <ListItem
+          primaryText="No entries found"
+        />
+      )}
+    </List>
+  );
+}

webapp/src/components/LoginForm.tsx

@@ -0,0 +1,175 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import FormGroup from "@material-ui/core/FormGroup";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+
+import ExternalLink from "../widgets/ExternalLink";
+import PasswordField from "../widgets/PasswordField";
+
+import * as C from "../constants";
+import LoadingIndicator from "../widgets/LoadingIndicator";
+import Alert from "@material-ui/lab/Alert";
+
+interface FormErrors {
+  errorEmail?: string;
+  errorPassword?: string;
+  errorEncryptionPassword?: string;
+  errorServer?: string;
+}
+
+interface PropsType {
+  onSubmit: (username: string, password: string, serviceApiUrl?: string) => void;
+  loading?: boolean;
+  error?: Error;
+}
+
+export default function LoginForm(props: PropsType) {
+  const [username, setUsername] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [server, setServer] = React.useState("");
+  const [showAdvanced, setShowAdvanced] = React.useState(false);
+  const [errors, setErrors] = React.useState<FormErrors>({});
+
+  function generateEncryption(e: React.FormEvent<any>) {
+    e.preventDefault();
+    const errors: FormErrors = {};
+    const fieldRequired = "This field is required!";
+    if (!username) {
+      errors.errorEmail = fieldRequired;
+    } else if (username.includes("@")) {
+      errors.errorEmail = "Please use your username (not email)";
+    }
+    if (!password) {
+      errors.errorPassword = fieldRequired;
+    }
+
+    if (process.env.NODE_ENV !== "development") {
+      if (showAdvanced && !server.startsWith("https://")) {
+        errors.errorServer = "Server URI must start with https://";
+      }
+    }
+
+    if (Object.keys(errors).length) {
+      setErrors(errors);
+      return;
+    } else {
+      setErrors({});
+    }
+
+    props.onSubmit(username, password, (showAdvanced) ? server : undefined);
+  }
+
+  const styles = {
+    form: {
+    },
+    forgotPassword: {
+      paddingTop: 20,
+    },
+    infoAlert: {
+      marginTop: 20,
+    },
+    textField: {
+      marginTop: 20,
+      width: "18em",
+    },
+    submit: {
+      marginTop: 40,
+      textAlign: "right" as any,
+    },
+  };
+
+  function handleInputChange(func: (value: string) => void) {
+    return (event: React.ChangeEvent<any>) => {
+      func(event.target.value);
+    };
+  }
+
+  let advancedSettings = null;
+  if (showAdvanced) {
+    advancedSettings = (
+      <React.Fragment>
+        <TextField
+          type="url"
+          style={styles.textField}
+          error={!!errors.errorServer}
+          helperText={errors.errorServer}
+          label="Server"
+          value={server}
+          onChange={handleInputChange(setServer)}
+        />
+        <br />
+      </React.Fragment>
+    );
+  }
+
+  if (props.loading) {
+    return (
+      <div style={{ textAlign: "center" }}>
+        <LoadingIndicator />
+        <p>Deriving encryption data...</p>
+      </div>
+    );
+  }
+
+  return (
+    <React.Fragment>
+      <form style={styles.form} onSubmit={generateEncryption}>
+        <TextField
+          type="text"
+          style={styles.textField}
+          error={!!errors.errorEmail}
+          helperText={errors.errorEmail}
+          label="Username"
+          value={username}
+          onChange={handleInputChange(setUsername)}
+        />
+        <br />
+        <PasswordField
+          style={styles.textField}
+          error={!!errors.errorPassword}
+          helperText={errors.errorPassword}
+          label="Password"
+          name="password"
+          value={password}
+          onChange={handleInputChange(setPassword)}
+        />
+        <div style={styles.forgotPassword}>
+          <ExternalLink href={C.forgotPassword}>Forgot password?</ExternalLink>
+        </div>
+        <FormGroup>
+          <FormControlLabel
+            control={
+              <Switch
+                color="primary"
+                checked={showAdvanced}
+                onChange={() => setShowAdvanced(!showAdvanced)}
+              />
+            }
+            label="Advanced settings"
+          />
+        </FormGroup>
+        {advancedSettings}
+
+        {props.error && (
+          <Alert severity="error" style={styles.infoAlert}>{props.error.message}</Alert>
+        )}
+
+        <div style={styles.submit}>
+          <Button
+            variant="contained"
+            type="submit"
+            color="secondary"
+            disabled={props.loading}
+          >
+            {props.loading ? "Loading…" : "Log In"}
+          </Button>
+        </div>
+      </form>
+    </React.Fragment>
+  );
+}

webapp/src/components/PimItemHeader.tsx

@@ -0,0 +1,35 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import Color from "color";
+
+import { Theme, withTheme } from "@material-ui/core/styles";
+
+export default withTheme((props: {text: string, backgroundColor?: string, children?: any, rightItem?: React.ReactNode, theme: Theme}) => {
+  const backgroundColor = props.backgroundColor ?? props.theme.palette.secondary.main;
+  const foregroundColor = props.theme.palette.getContrastText(Color(backgroundColor).rgb().string());
+  const style = {
+    header: {
+      backgroundColor,
+      color: foregroundColor,
+      padding: 15,
+      display: "flex",
+      justifyContent: "space-between",
+    },
+    headerText: {
+      marginTop: 10,
+      marginBottom: 10,
+    },
+  };
+
+  return (
+    <div style={style.header}>
+      <div>
+        <h2 style={style.headerText}>{props.text}</h2>
+        {props.children}
+      </div>
+      {props.rightItem}
+    </div>
+  );
+});

webapp/src/constants/index.ts

@@ -0,0 +1,14 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export const appName = "EteSync";
+export const defaultServerUrl = process.env.REACT_APP_DEFAULT_API_PATH ?? "https://api.etebase.com/partner/etesync/";
+export const homePage = "https://www.etesync.com/";
+export const faq = homePage + "faq/";
+export const pricing = homePage + "pricing/";
+export const getApps = homePage + "get-apps/";
+export const terms = homePage + "tos/";
+export const sourceCode = "https://github.com/etesync/etesync-web";
+export const reportIssue = sourceCode + "/issues";
+
+export const forgotPassword = "https://www.etesync.com/faq/#forgot-password";

webapp/src/credentials.tsx

@@ -0,0 +1,26 @@
+// SPDX-FileCopyrightText: © 2017 Etebase Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { useSelector } from "react-redux";
+import { createSelector } from "reselect";
+
+import * as Etebase from "etebase";
+
+import * as store from "./store";
+import { usePromiseMemo } from "./helpers";
+
+export const credentialsSelector = createSelector(
+  (state: store.StoreState) => state.credentials.storedSession,
+  (storedSession) => {
+    if (storedSession) {
+      return Etebase.Account.restore(storedSession);
+    } else {
+      return Promise.resolve(null);
+    }
+  }
+);
+
+export function useCredentials() {
+  const credentialsPromise = useSelector(credentialsSelector);
+  return usePromiseMemo(credentialsPromise, [credentialsPromise]);
+}

webapp/src/etebase-helpers.ts

@@ -0,0 +1,77 @@
+import memoize from "memoizee";
+
+import * as Etebase from "etebase";
+import { useSelector } from "react-redux";
+
+import { StoreState } from "./store";
+import { CacheCollectionsData, CacheItems, CacheItemsData } from "./store/reducers";
+import { usePromiseMemo } from "./helpers";
+
+export const getCollections = memoize(async function (cachedCollections: CacheCollectionsData, etebase: Etebase.Account) {
+  const colMgr = getCollectionManager(etebase);
+  const ret: Etebase.Collection[] = [];
+  for (const cached of cachedCollections.values()) {
+    ret.push(colMgr.cacheLoad(cached));
+  }
+  return ret;
+}, { length: 1 });
+
+export const getCollectionsByType = memoize(async function (cachedCollections: CacheCollectionsData, colType: string, etebase: Etebase.Account) {
+  const collections = await getCollections(cachedCollections, etebase);
+  const ret: Etebase.Collection[] = [];
+  for (const col of collections) {
+    const collectionType = col.getCollectionType();
+    if (collectionType === colType) {
+      ret.push(col);
+    }
+  }
+  return ret;
+}, { length: 2 });
+
+export const getItems = memoize(async function (cachedItems: CacheItems, itemMgr: Etebase.ItemManager) {
+  const ret = new Map<string, Etebase.Item>();
+  for (const cached of cachedItems.values()) {
+    const item = itemMgr.cacheLoad(cached);
+    ret.set(item.uid, item);
+  }
+  return ret;
+}, { length: 1 });
+
+export const getItemsByType = memoize(async function (cachedCollections: CacheCollectionsData, cachedItems: CacheItemsData, colType: string, etebase: Etebase.Account) {
+  const colMgr = getCollectionManager(etebase);
+  const collections = await getCollectionsByType(cachedCollections, colType, etebase);
+  const ret = new Map<string, Map<string, Etebase.Item>>();
+  for (const col of collections) {
+    const itemMgr = colMgr.getItemManager(col);
+    const cachedColItems = cachedItems.get(col.uid);
+    if (cachedColItems) {
+      const items = await getItems(cachedColItems, itemMgr);
+      ret.set(col.uid, items);
+    }
+  }
+  return ret;
+}, { length: 3 });
+
+export const getCollectionManager = memoize(function (etebase: Etebase.Account) {
+  return etebase.getCollectionManager();
+});
+
+// React specific stuff
+export function useCollections(etebase: Etebase.Account, colType?: string) {
+  const cachedCollections = useSelector((state: StoreState) => state.cache.collections);
+  return usePromiseMemo(
+    (colType) ?
+      getCollectionsByType(cachedCollections, colType, etebase) :
+      getCollections(cachedCollections, etebase),
+    [etebase, cachedCollections, colType]
+  );
+}
+
+export function useItems(etebase: Etebase.Account, colType: string) {
+  const cachedCollections = useSelector((state: StoreState) => state.cache.collections);
+  const cachedItems = useSelector((state: StoreState) => state.cache.items);
+  return usePromiseMemo(
+    getItemsByType(cachedCollections, cachedItems, colType, etebase),
+    [etebase, cachedCollections, cachedItems, colType]
+  );
+}

webapp/src/helpers.tsx

@@ -0,0 +1,213 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import * as ICAL from "ical.js";
+import moment from "moment";
+import { TaskPriorityType } from "./pim-types";
+
+// Generic handling of input changes
+export function handleInputChange(self: React.Component, part?: string) {
+  return (event: React.ChangeEvent<any>) => {
+    const name = event.target.name;
+    const value = event.target.value;
+
+    let newState;
+
+    if (event.target.type === "checkbox") {
+      newState = {
+        [name]: event.target.checked,
+      };
+    } else {
+      newState = {
+        [name]: value,
+      };
+    }
+
+    if (part === undefined) {
+      self.setState(newState);
+    } else {
+      self.setState({
+        [part]: {
+          ...self.state[part],
+          ...newState,
+        },
+      });
+    }
+  };
+}
+
+export function insertSorted<T>(array: T[] = [], newItem: T, key: string) {
+  if (array.length === 0) {
+    return [newItem];
+  }
+
+  for (let i = 0, len = array.length; i < len; i++) {
+    if (newItem[key] < array[i][key]) {
+      array.splice(i, 0, newItem);
+      return array;
+    }
+  }
+
+  array.push(newItem);
+
+  return array;
+}
+
+const allDayFormat = "dddd, LL";
+const fullFormat = "LLLL";
+
+export function formatDate(date: ICAL.Time) {
+  const mDate = moment(date.toJSDate());
+  if (date.isDate) {
+    return mDate.format(allDayFormat);
+  } else {
+    return mDate.format(fullFormat);
+  }
+}
+
+export function formatDateRange(start: ICAL.Time, end: ICAL.Time) {
+  const mStart = moment(start.toJSDate());
+  const mEnd = moment(end.toJSDate());
+  let strStart;
+  let strEnd;
+
+  // All day
+  if (start.isDate) {
+    if (mEnd.diff(mStart, "days", true) === 1) {
+      return mStart.format(allDayFormat);
+    } else {
+      strStart = mStart.format(allDayFormat);
+      strEnd = mEnd.clone().subtract(1, "day").format(allDayFormat);
+    }
+  } else if (mStart.isSame(mEnd, "day")) {
+    strStart = mStart.format(fullFormat);
+    strEnd = mEnd.format("LT");
+
+    if (mStart.isSame(mEnd)) {
+      return strStart;
+    }
+  } else {
+    strStart = mStart.format(fullFormat);
+    strEnd = mEnd.format(fullFormat);
+  }
+
+  return strStart + " - " + strEnd;
+}
+
+export function formatOurTimezoneOffset() {
+  let offset = new Date().getTimezoneOffset();
+  const prefix = (offset > 0) ? "-" : "+";
+  offset = Math.abs(offset);
+  const hours = Math.floor(offset / 60);
+  const minutes = offset % 60;
+
+  return `GMT${prefix}${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
+}
+
+export function getCurrentTimezone() {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+
+export function mapPriority(priority: number): TaskPriorityType {
+  if (priority > 0 && priority < 5) {
+    return TaskPriorityType.High;
+  } else if (priority === 5) {
+    return TaskPriorityType.Medium;
+  } else if (priority > 5 && priority < 10) {
+    return TaskPriorityType.Low;
+  } else {
+    return TaskPriorityType.Undefined;
+  }
+}
+
+export function* arrayToChunkIterator<T>(arr: T[], size: number) {
+  for (let i = 0 ; i < arr.length ; i += size) {
+    yield arr.slice(i, i + size);
+  }
+}
+
+export function isPromise(x: any): x is Promise<any> {
+  return x && typeof x.then === "function";
+}
+
+export function isDefined<T>(x: T | undefined): x is T {
+  return x !== undefined;
+}
+
+export function startTask<T = any>(func: () => Promise<T> | T, delay = 0): Promise<T> {
+  return new Promise((resolve, reject) => {
+    setTimeout(
+      () => {
+        try {
+          const ret = func();
+          if (isPromise(ret)) {
+            ret.then(resolve)
+              .catch(reject);
+          } else {
+            resolve(ret);
+          }
+        } catch (e) {
+          reject(e);
+        }
+      },
+      delay);
+  });
+}
+
+export function usePromiseMemo<T>(promise: Promise<T> | undefined | null, deps: React.DependencyList, initial: T | undefined = undefined): T | undefined {
+  const [val, setVal] = React.useState<T>((promise as any)._returnedValue ?? initial);
+  React.useEffect(() => {
+    let cancel = false;
+    if (promise === undefined || promise === null) {
+      return undefined;
+    }
+    promise.then((val) => {
+      (promise as any)._returnedValue = val;
+      if (!cancel) {
+        setVal(val);
+      }
+    });
+    return () => {
+      cancel = true;
+    };
+  }, [...deps, promise]);
+  return val;
+}
+
+export function parseDate(prop: ICAL.Property) {
+  const value = prop.getFirstValue();
+  if ((value.day !== null) && (value.day !== undefined)) {
+    return {
+      day: value.day,
+      month: value.month - 1,
+      year: value.year ?? undefined,
+    };
+  } else {
+    const time = prop.toJSON()[3];
+    if (time.length === 6 && time.startsWith("--")) {
+      return {
+        day: parseInt(time.slice(4, 6)),
+        month: parseInt(time.slice(2, 4)) - 1,
+      };
+    } else if (time.length === 8) {
+      return {
+        day: parseInt(time.slice(6, 8)),
+        month: parseInt(time.slice(4, 6)) - 1,
+        year: parseInt(time.slice(0, 4)),
+      };
+    }
+  }
+
+  return {};
+}
+
+export const PASSWORD_MIN_LENGTH = 8;
+
+export function enforcePasswordRules(password: string): string | undefined {
+
+  if (password.length < PASSWORD_MIN_LENGTH) {
+    return `Passwourds should be at least ${PASSWORD_MIN_LENGTH} digits long.`;
+  }
+  return undefined;
+}

webapp/src/icons/Copy.tsx

@@ -0,0 +1,15 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import SvgIcon from "@material-ui/core/SvgIcon";
+
+export default function CopyIcon(props: any) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" />
+    </SvgIcon>
+  );
+}
+

webapp/src/images/logo.svg

@@ -0,0 +1,162 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   height="192"
+   viewBox="0 0 192 192"
+   width="192"
+   version="1.1"
+   id="svg3688"
+   sodipodi:docname="logo.svg"
+   inkscape:version="0.92.1 r"
+   inkscape:export-filename="/home/tom/projects/securesync/graphics/logo.png"
+   inkscape:export-xdpi="256"
+   inkscape:export-ydpi="256"
+   style="fill:#000000">
+  <metadata
+     id="metadata3694">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs3692">
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Drop Shadow"
+       id="filter4498">
+      <feFlood
+         flood-opacity="0.498039"
+         flood-color="rgb(0,0,0)"
+         result="flood"
+         id="feFlood4488" />
+      <feComposite
+         in="flood"
+         in2="SourceGraphic"
+         operator="in"
+         result="composite1"
+         id="feComposite4490" />
+      <feGaussianBlur
+         in="composite1"
+         stdDeviation="4"
+         result="blur"
+         id="feGaussianBlur4492" />
+      <feOffset
+         dx="0"
+         dy="4"
+         result="offset"
+         id="feOffset4494" />
+      <feComposite
+         in="SourceGraphic"
+         in2="offset"
+         operator="over"
+         result="composite2"
+         id="feComposite4496" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Drop Shadow"
+       id="filter4510">
+      <feFlood
+         flood-opacity="0.498039"
+         flood-color="rgb(0,0,0)"
+         result="flood"
+         id="feFlood4500" />
+      <feComposite
+         in="flood"
+         in2="SourceGraphic"
+         operator="in"
+         result="composite1"
+         id="feComposite4502" />
+      <feGaussianBlur
+         in="composite1"
+         stdDeviation="4"
+         result="blur"
+         id="feGaussianBlur4504" />
+      <feOffset
+         dx="0"
+         dy="4"
+         result="offset"
+         id="feOffset4506" />
+      <feComposite
+         in="SourceGraphic"
+         in2="offset"
+         operator="over"
+         result="composite2"
+         id="feComposite4508" />
+    </filter>
+  </defs>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3832"
+     inkscape:window-height="2095"
+     id="namedview3690"
+     showgrid="false"
+     inkscape:zoom="4"
+     inkscape:cx="21.145622"
+     inkscape:cy="121.84403"
+     inkscape:window-x="0"
+     inkscape:window-y="61"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg3688" />
+  <path
+     d="M 0,-2 H 192 V 190 H 0 Z"
+     id="path3684"
+     inkscape:connector-curvature="0"
+     style="fill:none;stroke-width:8" />
+  <path
+     d="M 160,67.52 V 30 H 122.48 L 96,3.52 69.52,30 H 32 V 67.52 L 5.52,94 32,120.48 V 158 H 69.52 L 96,184.48 122.48,158 H 160 V 120.48 L 186.48,94 Z"
+     id="path3686"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccc"
+     style="fill:#ffc107;fill-opacity:1;stroke-width:8;filter:url(#filter4498)" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="circle"
+     style="display:inline"
+     transform="translate(0,168)">
+    <ellipse
+       style="fill:#ffd740;fill-opacity:1;fill-rule:nonzero;stroke:#ffd740;stroke-width:60.96912003;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path5101"
+       cx="96.040611"
+       cy="-74.043999"
+       rx="16.102007"
+       ry="16.103439" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="arrow"
+     style="display:inline"
+     transform="translate(0,168)">
+    <path
+       inkscape:connector-curvature="0"
+       d="M 96,-120.53035 V -137.9802 L 72.705129,-114.71374 96,-91.447272 v -17.449848 c 19.2765,0 34.94231,15.646698 34.94231,34.899704 0,5.874792 -1.45593,11.458728 -4.0766,16.28652 l 8.50263,8.492256 c 4.5425,-7.154432 7.2214,-15.646688 7.2214,-24.778776 0,-25.709454 -20.8489,-46.532934 -46.58974,-46.532934 z m 0,81.43263 c -19.276507,0 -34.942311,-15.646696 -34.942311,-34.899696 0,-5.874784 1.455934,-11.458744 4.076602,-16.286532 l -8.502618,-8.492262 c -4.542509,7.15444 -7.221415,15.646698 -7.221415,24.778794 0,25.709448 20.848909,46.532928 46.589742,46.532928 v 17.449856 L 119.29487,-33.281104 96,-56.547568 Z"
+       id="path2"
+       style="fill:#448aff;fill-opacity:1;stroke-width:5.82016563;filter:url(#filter4510)" />
+    <path
+       inkscape:connector-curvature="0"
+       style="fill:none;stroke-width:8"
+       d="M 0,-170 H 192 V 22 H 0 Z"
+       id="path4" />
+  </g>
+</svg>

webapp/src/images/signed-pages-badge.svg

@@ -0,0 +1,211 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Capa_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 220 58"
+   xml:space="preserve"
+   sodipodi:docname="badge.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
+   inkscape:export-filename="/tmp/badge.png"
+   inkscape:export-xdpi="99.309998"
+   inkscape:export-ydpi="99.309998"
+   width="220"
+   height="58"><metadata
+     id="metadata1502"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs1500" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="3832"
+     inkscape:window-height="2088"
+     id="namedview1498"
+     showgrid="false"
+     inkscape:zoom="2.0344828"
+     inkscape:cx="16.03199"
+     inkscape:cy="64.841524"
+     inkscape:window-x="0"
+     inkscape:window-y="68"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="Capa_1" /><path
+     style="fill:#2aa924;fill-opacity:1"
+     d="M 29,0 C 29,0 22.333,8 7,8 V 27.085 C 7,37.051 11.328,46.662 19.164,52.82 21.937,55 25.208,56.875 29,58 32.792,56.875 36.062,55 38.836,52.82 46.672,46.662 51,37.051 51,27.085 V 8 C 35.667,8 29,0 29,0 Z"
+     id="path1463"
+     inkscape:connector-curvature="0" /><path
+     style="fill:#26e61c;fill-opacity:1"
+     d="M 29,51.661 C 26.877,50.828 24.822,49.636 22.872,48.103 16.69,43.245 13,35.388 13,27.085 V 13.628 C 20.391,12.685 25.639,10.114 29,7.83 Z"
+     id="path1465"
+     inkscape:connector-curvature="0" /><g
+     id="g1467" /><g
+     id="g1469" /><g
+     id="g1471" /><g
+     id="g1473" /><g
+     id="g1475" /><g
+     id="g1477" /><g
+     id="g1479" /><g
+     id="g1481" /><g
+     id="g1483" /><g
+     id="g1485" /><g
+     id="g1487" /><g
+     id="g1489" /><g
+     id="g1491" /><g
+     id="g1493" /><g
+     id="g1495" /><g
+     transform="matrix(0.06459484,0,0,0.06271697,15.219767,15.620369)"
+     id="g2152"><g
+       id="g2150"><g
+         id="g2148"><path
+           inkscape:connector-curvature="0"
+           d="m 133.529,352.213 c -12.907,-23.147 -19.733,-51.52 -19.733,-82.24 0,-51.627 44.693,-93.653 99.52,-93.653 54.933,0 99.52,42.027 99.52,93.653 0,5.867 4.8,10.667 10.667,10.667 5.867,0 10.667,-4.8 10.667,-10.667 0,-63.467 -54.187,-114.987 -120.853,-114.987 -66.666,0 -120.855,51.627 -120.855,114.987 0,34.347 7.787,66.453 22.507,92.693 14.4,25.707 24.427,37.547 42.88,56.213 2.133,2.133 4.8,3.2 7.573,3.2 2.667,0 5.44,-0.96 7.36,-3.2 4.267,-4.053 4.267,-10.88 0.107,-15.04 -16.427,-16.532 -25.6,-27.092 -39.36,-51.626 z"
+           id="path2138" /><path
+           inkscape:connector-curvature="0"
+           d="m 94.702,51.413 c 36.587,-19.947 76.48,-30.08 118.827,-30.08 42.453,0 77.973,9.067 118.827,30.187 1.6,0.747 3.2,1.173 4.907,1.173 v 0 c 3.84,0 7.573,-2.133 9.493,-5.76 2.667,-5.227 0.64,-11.733 -4.587,-14.4 C 298.649,10.027 258.969,0 213.529,0 167.662,0 124.249,10.987 84.462,32.64 c -5.227,2.88 -7.04,9.28 -4.267,14.507 2.88,5.226 9.28,7.04 14.507,4.266 z"
+           id="path2140" /><path
+           inkscape:connector-curvature="0"
+           d="m 212.569,103.04 c -68.8,0 -131.733,38.507 -160.213,98.027 -9.707,20.16 -14.613,43.413 -14.613,69.013 0,28.8 5.12,56.32 15.573,84.373 2.133,5.547 8.213,8.32 13.76,6.293 5.547,-2.133 8.32,-8.213 6.293,-13.76 C 60.675,312.96 59.182,286.72 59.182,270.08 c 0,-22.4 4.16,-42.56 12.48,-59.84 24.96,-52.267 80.32,-85.973 141.013,-85.973 85.227,0 154.56,65.387 154.56,145.813 0,22.933 -19.947,41.493 -44.373,41.493 -24.426,0 -44.373,-18.667 -44.373,-41.493 0,-34.667 -29.44,-62.827 -65.707,-62.827 -36.267,0 -65.707,28.16 -65.707,62.827 0,42.133 16.427,81.707 46.187,111.36 23.04,22.933 45.227,35.52 79.253,44.8 0.853,0.32 1.813,0.427 2.773,0.427 4.693,0 8.96,-3.093 10.24,-7.787 1.6,-5.653 -1.813,-11.52 -7.467,-13.12 -30.08,-8.213 -49.707,-19.307 -69.867,-39.36 -25.707,-25.6 -39.893,-59.84 -39.893,-96.213 0,-22.933 19.947,-41.493 44.373,-41.493 24.426,0 44.373,18.667 44.373,41.493 0,34.667 29.547,62.827 65.707,62.827 36.16,0 65.707,-28.16 65.707,-62.827 10e-4,-92.16 -78.932,-167.147 -175.892,-167.147 z"
+           id="path2142" /><path
+           inkscape:connector-curvature="0"
+           d="m 403.395,147.2 c -21.227,-29.653 -48.107,-52.907 -80,-69.333 -67.2,-34.56 -152.96,-34.453 -220.053,0.213 -32,16.533 -58.987,40 -80.107,69.867 -3.413,4.8 -2.24,11.413 2.56,14.827 1.92,1.28 4.053,1.92 6.187,1.92 3.307,0 6.613,-1.493 8.747,-4.373 19.093,-27.093 43.52,-48.32 72.427,-63.253 61.12,-31.573 139.307,-31.68 200.533,-0.213 28.8,14.72 53.12,35.84 72.32,62.72 3.413,4.8 10.133,5.867 14.933,2.453 4.8,-3.415 5.867,-10.028 2.453,-14.828 z"
+           id="path2144" /><path
+           inkscape:connector-curvature="0"
+           d="m 340.569,359.253 c -8.533,1.493 -17.173,2.027 -22.293,2.027 -21.333,0 -39.04,-5.013 -54.08,-15.253 -25.92,-17.6 -41.387,-45.973 -41.387,-75.947 0,-5.867 -4.8,-10.667 -10.667,-10.667 -5.867,0 -10.667,4.8 -10.667,10.667 0,37.12 18.987,72.107 50.667,93.653 18.453,12.48 40.747,18.88 66.133,18.88 2.987,0 13.547,-0.107 26.027,-2.347 5.76,-1.067 9.707,-6.613 8.64,-12.373 -1.067,-5.76 -6.613,-9.706 -12.373,-8.64 z"
+           id="path2146" /></g></g></g><flowRoot
+     xml:space="preserve"
+     id="flowRoot836"
+     style="font-style:normal;font-weight:normal;font-size:1.25px;line-height:25px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+       id="flowRegion838"><rect
+         id="rect840"
+         width="181.6006"
+         height="31.801828"
+         x="60.475609"
+         y="0.47866088" /></flowRegion><flowPara
+       id="flowPara842" /></flowRoot><text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:1.25px;line-height:25px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="182.81706"
+     y="19.942076"
+     id="text846"><tspan
+       sodipodi:role="line"
+       id="tspan844"
+       x="182.81706"
+       y="32.766785" /></text>
+<flowRoot
+     xml:space="preserve"
+     id="flowRoot848"
+     style="font-style:normal;font-weight:normal;font-size:1.25px;line-height:25px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+       id="flowRegion850"><rect
+         id="rect852"
+         width="160.92073"
+         height="37.362804"
+         x="61.69207"
+         y="1.1737828" /></flowRegion><flowPara
+       id="flowPara854" /></flowRoot><text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:1.25px;line-height:25px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="60.067513"
+     y="46.389381"
+     id="text882"><tspan
+       sodipodi:role="line"
+       x="60.067513"
+       y="46.389381"
+       id="tspan880"><tspan
+         x="60.067513"
+         y="46.389381"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:24px;font-family:'Open Sans';-inkscape-font-specification:'Open Sans, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;writing-mode:lr-tb;text-anchor:start"
+         id="tspan878">Signed Pages</tspan></tspan></text>
+<flowRoot
+     xml:space="preserve"
+     id="flowRoot864"
+     style="font-style:normal;font-weight:normal;font-size:1.25px;line-height:25px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+       id="flowRegion866"><rect
+         id="rect868"
+         width="128.94511"
+         height="13.902438"
+         x="60.301826"
+         y="6.2134166" /></flowRegion><flowPara
+       id="flowPara870">Page s</flowPara></flowRoot><flowRoot
+     xml:space="preserve"
+     id="flowRoot872"
+     style="font-style:normal;font-weight:normal;font-size:1.25px;line-height:25px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+       id="flowRegion874"><rect
+         id="rect876"
+         width="125.81707"
+         height="12.685975"
+         x="60.649387"
+         y="7.4298801" /></flowRegion><flowPara
+       id="flowPara878">Page</flowPara></flowRoot><flowRoot
+     xml:space="preserve"
+     id="flowRoot880"
+     style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:1.25px;line-height:25px;font-family:'Open Sans';-inkscape-font-specification:'Open Sans';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+       id="flowRegion882"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Open Sans';-inkscape-font-specification:'Open Sans'"><rect
+         id="rect884"
+         width="124.07926"
+         height="13.033536"
+         x="60.475609"
+         y="7.9512215"
+         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Open Sans';-inkscape-font-specification:'Open Sans'" /></flowRegion><flowPara
+       id="flowPara886">uoeuoeuoeuaeueoaueaouaeouoaeuaoeu</flowPara></flowRoot><flowRoot
+     xml:space="preserve"
+     id="flowRoot856-9"
+     style="font-style:normal;font-weight:normal;font-size:1.25px;line-height:25px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     transform="translate(-2.5362099,0.85067833)"><flowRegion
+       id="flowRegion858-3"><rect
+         id="rect860-7"
+         width="190.11584"
+         height="35.277439"
+         x="60.82317"
+         y="-0.3902415" /></flowRegion><flowPara
+       id="flowPara862-4"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:24px;font-family:'Open Sans';-inkscape-font-specification:'Open Sans, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRoot><flowRoot
+     xml:space="preserve"
+     id="flowRoot912"
+     style="font-style:normal;font-weight:normal;font-size:1.25px;line-height:25px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+       id="flowRegion914"><rect
+         id="rect916"
+         width="88.106705"
+         height="77.158531"
+         x="-73.335365"
+         y="-110.39329" /></flowRegion><flowPara
+       id="flowPara918" /></flowRoot><flowRoot
+     xml:space="preserve"
+     id="flowRoot920"
+     style="font-style:normal;font-weight:normal;font-size:1.25px;line-height:25px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"><flowRegion
+       id="flowRegion922"><rect
+         id="rect924"
+         width="148.40852"
+         height="10.253048"
+         x="61.865852"
+         y="42.8811" /></flowRegion><flowPara
+       id="flowPara926">Ver</flowPara></flowRoot><text
+     xml:space="preserve"
+     style="font-style:normal;font-weight:normal;font-size:1.25px;line-height:25px;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+     x="60.449413"
+     y="19.314518"
+     id="text888"><tspan
+       sodipodi:role="line"
+       x="60.449413"
+       y="19.314518"
+       id="tspan886"><tspan
+         x="60.449413"
+         y="19.314518"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.33333302px;font-family:'Open Sans';-inkscape-font-specification:'Open Sans, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start"
+         id="tspan884">PGP Signed With</tspan></tspan></text>
+</svg>

webapp/src/index.css

@@ -0,0 +1,36 @@
+html,
+body {
+    height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background-color: #ffc107;
+
+  /* Chrome only at the moment, disable pull to refresh in PWA */
+  overscroll-behavior-y: contain;
+}
+
+body:before {
+  content: '';
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: -1;
+  background-color: white;
+}
+
+#root {
+  background-color: white;
+
+  min-height: 100%;
+  background-color: #f0f0f0;
+  display: flex;
+  flex-direction: column;
+}
+
+a {
+  color: #00b0ff;
+}

webapp/src/index.tsx

@@ -0,0 +1,45 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import { PersistGate } from "redux-persist/es/integration/react";
+import App from "./App";
+import registerServiceWorker from "./registerServiceWorker";
+import "./index.css";
+
+import * as Etebase from "etebase";
+
+function MyPersistGate(props: React.PropsWithChildren<{}>) {
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    Etebase.ready.then(() => {
+      setLoading(false);
+      persistor.persist();
+    });
+  }, []);
+
+  if (loading) {
+    return (<React.Fragment />);
+  }
+
+  return (
+    <PersistGate persistor={persistor}>
+      {props.children}
+    </PersistGate>
+  );
+}
+
+import { store, persistor } from "./store";
+
+ReactDOM.render(
+  <Provider store={store}>
+    <MyPersistGate>
+      <App />
+    </MyPersistGate>
+  </Provider>,
+  document.getElementById("root") as HTMLElement
+);
+registerServiceWorker();

webapp/src/persist-state-history.tsx

@@ -0,0 +1,36 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import { withRouter } from "react-router";
+
+// FIXME: Should probably tie this to the history object, or at least based on the depth of the history
+const stateCache = {};
+
+type Constructor<T> = new(...args: any[]) => T;
+
+export function historyPersistor(tag: string) {
+  return <T extends Constructor<React.Component>>(Base: T) => {
+    return withRouter(class extends Base {
+      constructor(...rest: any[]) {
+        const props = rest[0];
+        super(...rest);
+        const tagName = this.getKeyForTag(props, tag);
+        if (tagName in stateCache) {
+          this.state = stateCache[tagName];
+        }
+      }
+
+      public componentWillUnmount() {
+        if (super.componentWillUnmount) {
+          super.componentWillUnmount();
+        }
+        stateCache[this.getKeyForTag(this.props, tag)] = this.state;
+      }
+
+      public getKeyForTag(props: any, tagName: string) {
+        return props.location.pathname + ":" + tagName;
+      }
+    });
+  };
+}

webapp/src/pim-types.ts

@@ -0,0 +1,412 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as ICAL from "ical.js";
+import * as zones from "./data/zones.json";
+import moment from "moment";
+import * as uuid from "uuid";
+
+export const PRODID = "-//iCal.js EteSync iOS";
+
+export interface PimType {
+  uid: string;
+  collectionUid?: string;
+  itemUid?: string;
+  toIcal(): string;
+  clone(): PimType;
+  lastModified: ICAL.Time | undefined;
+}
+
+export function timezoneLoadFromName(timezone: string | null) {
+  if (!timezone) {
+    return null;
+  }
+
+  let zone = zones.zones[timezone];
+  if (!zone && zones.aliases[timezone]) {
+    zone = zones.zones[zones.aliases[timezone]];
+  }
+
+  if (!zone) {
+    return null;
+  }
+
+  if (ICAL.TimezoneService.has(timezone)) {
+    return ICAL.TimezoneService.get(timezone);
+  }
+
+  const component = new ICAL.Component("vtimezone");
+  zone.ics.forEach((zonePart: string) => {
+    component.addSubcomponent(new ICAL.Component(ICAL.parse(zonePart)));
+  });
+  component.addPropertyWithValue("tzid", timezone);
+
+  const retZone = new ICAL.Timezone({
+    component,
+    tzid: timezone,
+  });
+
+  ICAL.TimezoneService.register(timezone, retZone);
+
+  return retZone;
+}
+
+export function parseString(content: string) {
+  content = content.replace(/^[a-zA-Z0-9]*\./gm, ""); // FIXME: ugly hack to ignore item groups.
+  return new ICAL.Component(ICAL.parse(content));
+}
+
+export class EventType extends ICAL.Event implements PimType {
+  public collectionUid?: string;
+  public itemUid?: string;
+
+  public static isEvent(comp: ICAL.Component) {
+    return !!comp.getFirstSubcomponent("vevent");
+  }
+
+  public static fromVCalendar(comp: ICAL.Component) {
+    const event = new EventType(comp.getFirstSubcomponent("vevent"));
+    // FIXME: we need to clone it so it loads the correct timezone and applies it
+    timezoneLoadFromName(event.timezone);
+    return event.clone();
+  }
+
+  public static parse(content: string) {
+    return EventType.fromVCalendar(parseString(content));
+  }
+
+  public color: string;
+
+  get timezone() {
+    if (this.startDate) {
+      return this.startDate.timezone;
+    } else if (this.endDate) {
+      return this.endDate.timezone;
+    }
+
+    return null;
+  }
+
+  get title() {
+    return this.summary;
+  }
+
+  set title(title: string) {
+    this.summary = title;
+  }
+
+  get start() {
+    return this.startDate.toJSDate();
+  }
+
+  get end() {
+    return this.endDate.toJSDate();
+  }
+
+  get allDay() {
+    return this.startDate.isDate;
+  }
+
+  get desc() {
+    return this.description;
+  }
+
+  get lastModified() {
+    return this.component.getFirstPropertyValue("last-modified");
+  }
+
+  set lastModified(time: ICAL.Time) {
+    this.component.updatePropertyWithValue("last-modified", time);
+  }
+
+  get rrule() {
+    return this.component.getFirstPropertyValue("rrule");
+  }
+
+  set rrule(rule: ICAL.Recur) {
+    this.component.updatePropertyWithValue("rrule", rule);
+  }
+
+  public toIcal() {
+    const comp = new ICAL.Component(["vcalendar", [], []]);
+    comp.updatePropertyWithValue("prodid", PRODID);
+    comp.updatePropertyWithValue("version", "2.0");
+
+    comp.addSubcomponent(this.component);
+    ICAL.helpers.updateTimezones(comp);
+    return comp.toString();
+  }
+
+  public clone() {
+    const ret = new EventType(ICAL.Component.fromString(this.component.toString()));
+    ret.color = this.color;
+    ret.collectionUid = this.collectionUid;
+    ret.itemUid = this.itemUid;
+    return ret;
+  }
+}
+
+export enum TaskStatusType {
+  NeedsAction = "NEEDS-ACTION",
+  Completed = "COMPLETED",
+  InProcess = "IN-PROCESS",
+  Cancelled = "CANCELLED",
+}
+
+export enum TaskPriorityType {
+  Undefined = 0,
+  High = 1,
+  Medium = 5,
+  Low = 9
+}
+
+export let TaskTags = ["Work", "Home"];
+
+export function setTaskTags(tags: string[]) {
+  TaskTags = tags;
+}
+
+export class TaskType extends EventType {
+  public collectionUid?: string;
+  public itemUid?: string;
+
+  public static fromVCalendar(comp: ICAL.Component) {
+    const task = new TaskType(comp.getFirstSubcomponent("vtodo"));
+    // FIXME: we need to clone it so it loads the correct timezone and applies it
+    timezoneLoadFromName(task.timezone);
+    return task.clone();
+  }
+
+  public static parse(content: string) {
+    return TaskType.fromVCalendar(parseString(content));
+  }
+
+  public color: string;
+
+  constructor(comp?: ICAL.Component | null) {
+    super(comp ? comp : new ICAL.Component("vtodo"));
+  }
+
+  get finished() {
+    return this.status === TaskStatusType.Completed ||
+      this.status === TaskStatusType.Cancelled;
+  }
+
+  set status(status: TaskStatusType) {
+    this.component.updatePropertyWithValue("status", status);
+  }
+
+  get status(): TaskStatusType {
+    return this.component.getFirstPropertyValue("status");
+  }
+
+  set priority(priority: TaskPriorityType) {
+    this.component.updatePropertyWithValue("priority", priority);
+  }
+
+  get priority() {
+    return this.component.getFirstPropertyValue("priority");
+  }
+
+  set tags(tags: string[]) {
+    const property = this.component.getFirstProperty("categories");
+    const empty = tags.length === 0;
+    if (property) {
+      if (empty) {
+        this.component.removeAllProperties("categories");
+      } else {
+        property.setValues(tags);
+      }
+    } else if (!empty) {
+      const newProp = new ICAL.Property("categories", this.component);
+      newProp.setValues(tags);
+      this.component.addProperty(newProp);
+    }
+  }
+
+  get tags() {
+    return this.component.getFirstProperty("categories")?.getValues()?.filter((x) => x !== "") ?? [];
+  }
+
+  set dueDate(date: ICAL.Time | undefined) {
+    if (date) {
+      this.component.updatePropertyWithValue("due", date);
+    } else {
+      this.component.removeAllProperties("due");
+    }
+  }
+
+  get dueDate() {
+    return this.component.getFirstPropertyValue("due");
+  }
+
+  set completionDate(date: ICAL.Time | undefined) {
+    if (date) {
+      this.component.updatePropertyWithValue("completed", date);
+    } else {
+      this.component.removeAllProperties("completed");
+    }
+  }
+
+  get completionDate() {
+    return this.component.getFirstPropertyValue("completed");
+  }
+
+  set relatedTo(parentUid: string | undefined) {
+    if (parentUid !== undefined) {
+      this.component.updatePropertyWithValue("related-to", parentUid);
+    } else {
+      this.component.removeAllProperties("related-to");
+    }
+  }
+
+  get relatedTo(): string | undefined {
+    return this.component.getFirstPropertyValue("related-to");
+  }
+
+  get endDate() {
+    // XXX: A hack to override this as it shouldn't be used
+    return undefined as any;
+  }
+
+  get allDay() {
+    return !!((this.startDate?.isDate) || (this.dueDate?.isDate));
+  }
+
+  get dueToday() {
+    return this.dueDate && moment(this.dueDate.toJSDate()).isSameOrBefore(moment(), "day");
+  }
+
+  get overdue() {
+    if (!this.dueDate) {
+      return false;
+    }
+
+    const dueDate = moment(this.dueDate.toJSDate());
+    const now = moment();
+    return (this.dueDate.isDate) ? dueDate.isBefore(now, "day") : dueDate.isBefore(now);
+  }
+
+  get hidden() {
+    if (!this.startDate) {
+      return false;
+    }
+
+    const startDate = moment(this.startDate.toJSDate());
+    const now = moment();
+    return startDate.isAfter(now);
+  }
+
+  public clone() {
+    const ret = new TaskType(ICAL.Component.fromString(this.component.toString()));
+    ret.color = this.color;
+    return ret;
+  }
+
+  public getNextOccurence(): TaskType | null {
+    if (!this.isRecurring()) {
+      return null;
+    }
+
+    const rrule = this.rrule.clone();
+
+    if (rrule.count && rrule.count <= 1) {
+      return null; // end of reccurence
+    }
+
+    rrule.count = null; // clear count so we can iterate as many times as needed
+    const recur = rrule.iterator(this.startDate ?? this.dueDate);
+    let nextRecurrence = recur.next();
+    while ((nextRecurrence = recur.next())) {
+      if (nextRecurrence.compare(ICAL.Time.now()) > 0) {
+        break;
+      }
+    }
+
+    if (!nextRecurrence) {
+      return null; // end of reccurence
+    }
+
+    const nextStartDate = this.startDate ? nextRecurrence : undefined;
+    const nextDueDate = this.dueDate ? nextRecurrence : undefined;
+    if (nextStartDate && nextDueDate) {
+      const offset = this.dueDate!.subtractDateTz(this.startDate);
+      nextDueDate.addDuration(offset);
+    }
+
+    const nextTask = this.clone();
+    nextTask.uid = uuid.v4();
+    if (nextStartDate) {
+      nextTask.startDate = nextStartDate;
+    }
+    if (nextDueDate) {
+      nextTask.dueDate = nextDueDate;
+    }
+
+    if (this.rrule.count) {
+      rrule.count = this.rrule.count - 1;
+      nextTask.rrule = rrule;
+    }
+
+    nextTask.status = TaskStatusType.NeedsAction;
+    nextTask.lastModified = ICAL.Time.now();
+
+    return nextTask;
+  }
+}
+
+export class ContactType implements PimType {
+  public comp: ICAL.Component;
+  public collectionUid?: string;
+  public itemUid?: string;
+
+
+  public static parse(content: string) {
+    return new ContactType(parseString(content));
+  }
+
+  constructor(comp: ICAL.Component) {
+    this.comp = comp;
+  }
+
+  public toIcal() {
+    return this.comp.toString();
+  }
+
+  public clone() {
+    return new ContactType(ICAL.Component.fromString(this.comp.toString()));
+  }
+
+  get uid() {
+    return this.comp.getFirstPropertyValue("uid");
+  }
+
+  set uid(uid: string) {
+    this.comp.updatePropertyWithValue("uid", uid);
+  }
+
+  get fn() {
+    return this.comp.getFirstPropertyValue("fn");
+  }
+
+  get n() {
+    return this.comp.getFirstPropertyValue("n");
+  }
+
+  get bday() {
+    return this.comp.getFirstPropertyValue("bday");
+  }
+
+  get lastModified() {
+    return this.comp.getFirstPropertyValue("rev");
+  }
+
+  get group() {
+    const kind = this.comp.getFirstPropertyValue("kind");
+    return ["group", "organization"].includes(kind);
+  }
+
+  get members() {
+    return this.comp.getAllProperties("member").map((prop) => prop.getFirstValue<string>().replace("urn:uuid:", ""));
+  }
+}

webapp/src/react-app-env.d.ts

@@ -0,0 +1,4 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+/// <reference types="react-scripts" />

webapp/src/registerServiceWorker.ts

@@ -0,0 +1,117 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+// tslint:disable:no-console
+// In production, we register a service worker to serve assets from local cache.
+
+// This lets the app load faster on subsequent visits in production, and gives
+// it offline capabilities. However, it also means that developers (and users)
+// will only see deployed updates on the 'N+1' visit to a page, since previously
+// cached resources are updated in the background.
+
+// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
+// This link also includes instructions on opting out of this behavior.
+
+const isLocalhost = Boolean(
+  window.location.hostname === "localhost" ||
+    // [::1] is the IPv6 localhost address.
+    window.location.hostname === "[::1]" ||
+    // 127.0.0.1/8 is considered localhost for IPv4.
+    window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+    )
+);
+
+export default function register() {
+  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+    // The URL constructor is available in all browsers that support SW.
+    const publicUrl = new URL(
+      process.env.PUBLIC_URL!,
+      window.location.toString()
+    );
+    if (publicUrl.origin !== window.location.origin) {
+      // Our service worker won't work if PUBLIC_URL is on a different origin
+      // from what our page is served on. This might happen if a CDN is used to
+      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
+      return;
+    }
+
+    window.addEventListener("load", () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+
+      if (!isLocalhost) {
+        // Is not local host. Just register service worker
+        registerValidSW(swUrl);
+      } else {
+        // This is running on localhost. Lets check if a service worker still exists or not.
+        checkValidServiceWorker(swUrl);
+      }
+    });
+  }
+}
+
+function registerValidSW(swUrl: string) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then((registration) => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing;
+        if (installingWorker) {
+          installingWorker.onstatechange = () => {
+            if (installingWorker.state === "installed") {
+              if (navigator.serviceWorker.controller) {
+                // At this point, the old content will have been purged and
+                // the fresh content will have been added to the cache.
+                // It's the perfect time to display a 'New content is
+                // available; please refresh.' message in your web app.
+                console.log("New content is available; please refresh.");
+              } else {
+                // At this point, everything has been precached.
+                // It's the perfect time to display a
+                // 'Content is cached for offline use.' message.
+                console.log("Content is cached for offline use.");
+              }
+            }
+          };
+        }
+      };
+    })
+    .catch((error) => {
+      console.error("Error during service worker registration:", error);
+    });
+}
+
+function checkValidServiceWorker(swUrl: string) {
+  // Check if the service worker can be found. If it can't reload the page.
+  fetch(swUrl)
+    .then((response) => {
+      // Ensure service worker exists, and that we really are getting a JS file.
+      if (
+        response.status === 404 ||
+        response.headers.get("content-type")!.indexOf("javascript") === -1
+      ) {
+        // No service worker found. Probably a different app. Reload the page.
+        navigator.serviceWorker.ready.then((registration) => {
+          registration.unregister().then(() => {
+            window.location.reload();
+          });
+        });
+      } else {
+        // Service worker found. Proceed as normal.
+        registerValidSW(swUrl);
+      }
+    })
+    .catch(() => {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    });
+}
+
+export function unregister() {
+  if ("serviceWorker" in navigator) {
+    navigator.serviceWorker.ready.then((registration) => {
+      registration.unregister();
+    });
+  }
+}

webapp/src/routes.test.ts

@@ -0,0 +1,63 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { RouteResolver } from "./routes";
+
+const routes = {
+  home: "",
+  post: {
+    _base: "post",
+    _id: {
+      _base: ":postId",
+      comment: "comment/:commentId",
+      revision: "history/:revisionId/:someOtherVar/test",
+    },
+  },
+};
+
+const routeResolver = new RouteResolver(routes);
+
+it("translating routes", () => {
+  // Working basic resolves
+  expect(routeResolver.getRoute("home")).toBe("/");
+  expect(routeResolver.getRoute("post")).toBe("/post");
+  expect(routeResolver.getRoute("post._id")).toBe("/post/:postId");
+  expect(routeResolver.getRoute("post._id.comment")).toBe("/post/:postId/comment/:commentId");
+
+  // Working translation resolves
+  expect(routeResolver.getRoute("home")).toBe("/");
+  expect(routeResolver.getRoute("post")).toBe("/post");
+  expect(routeResolver.getRoute("post._id", { postId: 3 })).toBe("/post/3");
+  expect(routeResolver.getRoute("post._id.comment",
+    { postId: 3, commentId: 5 })).toBe("/post/3/comment/5");
+  expect(routeResolver.getRoute("post._id.revision",
+    { postId: 3, revisionId: 5, someOtherVar: "a" })).toBe("/post/3/history/5/a/test");
+
+  // Failing basic resolves
+  expect(() => {
+    routeResolver.getRoute("bad");
+  }).toThrow();
+  expect(() => {
+    routeResolver.getRoute("home.bad");
+  }).toThrow();
+  expect(() => {
+    routeResolver.getRoute("post._id.bad");
+  }).toThrow();
+
+  // Failing translations
+  expect(() => {
+    routeResolver.getRoute("home", { test: 4 });
+  }).toThrow();
+  expect(() => {
+    routeResolver.getRoute("post._id", { test: 4 });
+  }).toThrow();
+  expect(() => {
+    routeResolver.getRoute("post._id", { postId: 3, test: 4 });
+  }).toThrow();
+  expect(() => {
+    routeResolver.getRoute("post._id.comment", { postId: 3, commentId: 5, test: 4 });
+  }).toThrow();
+  expect(() => {
+    routeResolver.getRoute("post._id.comment", { postId: 3 });
+  }).toThrow();
+});

webapp/src/routes.ts

@@ -0,0 +1,52 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+export interface RouteKeysType {
+  [Identifier: string]: any;
+}
+
+export class RouteResolver {
+  public routes: {};
+
+  constructor(routes: {}) {
+    this.routes = routes;
+  }
+
+  public getRoute(name: string, _keys?: RouteKeysType): string {
+    let dict = this.routes;
+
+    let path: string[] = [];
+    name.split(".").forEach((key) => {
+      const val = (typeof dict[key] === "string") ? dict[key] : (dict[key]._base) ? dict[key]._base : key;
+      path.push(val);
+
+      dict = dict[key];
+    });
+
+    if (_keys) {
+      const keys = Object.assign({}, _keys);
+
+      path = path.map((pathComponent) => {
+        return pathComponent.split("/").map((val) => {
+          if (val[0] === ":") {
+            const ret = keys[val.slice(1)];
+            if (ret === undefined) {
+              throw new Error("Missing key: " + val.slice(1));
+            }
+
+            delete keys[val.slice(1)];
+            return ret;
+          }
+
+          return val;
+        }).join("/");
+      });
+
+      if (Object.keys(keys).length !== 0) {
+        throw new Error("Too many keys for route.");
+      }
+    }
+
+    return "/" + path.join("/");
+  }
+}

webapp/src/store/actions.ts

@@ -0,0 +1,190 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { createAction as origCreateAction, ActionMeta } from "redux-actions";
+
+import * as Etebase from "etebase";
+
+import { SettingsType } from "./";
+import { Message } from "./reducers";
+
+type FunctionAny = (...args: any[]) => any;
+
+function createAction<Func extends FunctionAny, MetaFunc extends FunctionAny>(
+  actionType: string,
+  payloadCreator: Func,
+  metaCreator?: MetaFunc
+): (..._params: Parameters<Func>) => ActionMeta<ReturnType<Func>, ReturnType<MetaFunc>> {
+  return origCreateAction(actionType, payloadCreator, metaCreator as any) as any;
+}
+
+export const resetKey = createAction(
+  "RESET_KEY",
+  () => {
+    return null;
+  }
+);
+
+export const logout = createAction(
+  "LOGOUT",
+  async (etebase: Etebase.Account) => {
+    // We don't wait on purpose, because we would like to logout and clear local data anyway
+    etebase.logout();
+  }
+);
+
+export const login = createAction(
+  "LOGIN",
+  async (etebase: Etebase.Account) => {
+    return etebase.save();
+  }
+);
+
+export const setCacheCollection = createAction(
+  "SET_CACHE_COLLECTION",
+  async (colMgr: Etebase.CollectionManager, col: Etebase.Collection) => {
+    return colMgr.cacheSave(col);
+  },
+  (_colMgr: Etebase.CollectionManager, col: Etebase.Collection) => {
+    return {
+      colUid: col.uid,
+      deleted: col.isDeleted,
+    };
+  }
+);
+
+export const unsetCacheCollection = createAction(
+  "UNSET_CACHE_COLLECTION",
+  (_colMgr: Etebase.CollectionManager, colUid: string) => {
+    return colUid;
+  },
+  (_colMgr: Etebase.CollectionManager, colUid: string) => {
+    return {
+      colUid,
+      deleted: true,
+    };
+  }
+);
+
+export const collectionUpload = createAction(
+  "COLLECTION_UPLOAD",
+  async (colMgr: Etebase.CollectionManager, col: Etebase.Collection) => {
+    await colMgr.upload(col);
+    return colMgr.cacheSave(col);
+  },
+  (_colMgr: Etebase.CollectionManager, col: Etebase.Collection) => {
+    return {
+      colUid: col.uid,
+      deleted: col.isDeleted,
+    };
+  }
+);
+
+export const setCacheItem = createAction(
+  "SET_CACHE_ITEM",
+  async (_col: Etebase.Collection, itemMgr: Etebase.ItemManager, item: Etebase.Item) => {
+    return itemMgr.cacheSave(item);
+  },
+  (col: Etebase.Collection, _itemMgr: Etebase.ItemManager, item: Etebase.Item) => {
+    return {
+      colUid: col.uid,
+      itemUid: item.uid,
+      deleted: item.isDeleted,
+    };
+  }
+);
+
+export const setCacheItemMulti = createAction(
+  "SET_CACHE_ITEM_MULTI",
+  async (_colUid: string, itemMgr: Etebase.ItemManager, items: Etebase.Item[]) => {
+    const ret = [];
+    for (const item of items) {
+      ret.push(itemMgr.cacheSave(item));
+    }
+    return ret;
+  },
+  (colUid: string, _itemMgr: Etebase.ItemManager, items: Etebase.Item[], _deps?: Etebase.Item[]) => {
+    return {
+      colUid,
+      items: items,
+    };
+  }
+);
+
+export const itemBatch = createAction(
+  "ITEM_BATCH",
+  async (_col: Etebase.Collection, itemMgr: Etebase.ItemManager, items: Etebase.Item[], deps?: Etebase.Item[]) => {
+    await itemMgr.batch(items, deps);
+    const ret = [];
+    for (const item of items) {
+      ret.push(itemMgr.cacheSave(item));
+    }
+    return ret;
+  },
+  (col: Etebase.Collection, _itemMgr: Etebase.ItemManager, items: Etebase.Item[], _deps?: Etebase.Item[]) => {
+    return {
+      colUid: col.uid,
+      items: items,
+    };
+  }
+);
+
+export const setSyncCollection = createAction(
+  "SET_SYNC_COLLECTION",
+  (uid: string, stoken: string) => {
+    return {
+      uid,
+      stoken,
+    };
+  }
+);
+
+export const setSyncGeneral = createAction(
+  "SET_SYNC_GENERAL",
+  (stoken: string | null) => {
+    return stoken;
+  }
+);
+
+export const performSync = createAction(
+  "PERFORM_SYNC",
+  (syncPromise: Promise<any>) => {
+    return syncPromise;
+  }
+);
+
+export const appendError = createAction(
+  "APPEND_ERROR",
+  (error: Error | Error[]) => {
+    return error;
+  }
+);
+
+export const clearErros = createAction(
+  "CLEAR_ERRORS",
+  (_etesync: Etebase.Account) => {
+    return true;
+  }
+);
+
+export const pushMessage = createAction(
+  "PUSH_MESSAGE",
+  (message: Message) => {
+    return message;
+  }
+);
+
+export const popMessage = createAction(
+  "POP_MESSAGE",
+  () => {
+    return true;
+  }
+);
+
+// FIXME: Move the rest to their own file
+export const setSettings = createAction(
+  "SET_SETTINGS",
+  (settings: Partial<SettingsType>) => {
+    return { ...settings };
+  }
+);

webapp/src/store/construct.ts

@@ -0,0 +1,142 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as localforage from "localforage";
+import { combineReducers } from "redux";
+import { createMigrate, persistReducer, createTransform } from "redux-persist";
+import session from "redux-persist/lib/storage/session";
+
+import * as Etebase from "etebase";
+
+import { List, Map as ImmutableMap } from "immutable";
+import {
+  SettingsType,
+  fetchCount, credentials, settingsReducer, encryptionKeyReducer, errorsReducer, messagesReducer,
+  syncGeneral, syncCollections, collections, items,
+  SyncGeneralData, SyncCollectionsData, CacheCollectionsData, CacheItemsData, CredentialsData, Message,
+} from "./reducers";
+
+export interface StoreState {
+  fetchCount: number;
+  credentials: CredentialsData;
+  settings: SettingsType;
+  encryptionKey: {key: string};
+  sync: {
+    collections: SyncCollectionsData;
+    general: SyncGeneralData;
+  };
+  cache: {
+    collections: CacheCollectionsData;
+    items: CacheItemsData;
+  };
+  errors: List<Error>;
+  messages: List<Message>;
+}
+
+const settingsMigrations = {
+  0: (state: any) => {
+    return {
+      ...state,
+      taskSettings: {
+        filterBy: null,
+        sortBy: "smart",
+      },
+    };
+  },
+};
+
+const settingsPersistConfig = {
+  key: "settings",
+  version: 0,
+  storage: localforage,
+  migrate: createMigrate(settingsMigrations, { debug: false }),
+};
+
+const credentialsPersistConfig = {
+  key: "credentials2",
+  version: 0,
+  storage: localforage,
+};
+
+const encryptionKeyPersistConfig = {
+  key: "encryptionKey",
+  storage: session,
+};
+
+const syncSerialize = (state: any, key: string | number) => {
+  if (key === "collections") {
+    return state.toJS();
+  }
+
+  return state;
+};
+
+const syncDeserialize = (state: any, key: string | number) => {
+  if (key === "collections") {
+    return ImmutableMap(state);
+  }
+
+  return state;
+};
+
+const syncPersistConfig = {
+  key: "sync",
+  storage: localforage,
+  transforms: [createTransform(syncSerialize, syncDeserialize)],
+};
+
+const cacheSerialize = (state: any, key: string | number) => {
+  if (key === "collections") {
+    const typedState = state as CacheCollectionsData;
+    const ret = typedState.map((x) => Etebase.toBase64(x));
+    return ret.toJS();
+  } else if (key === "items") {
+    const typedState = state as CacheItemsData;
+    const ret = typedState.map((items) => {
+      return items.map((x) => Etebase.toBase64(x));
+    });
+    return ret.toJS();
+  }
+
+  return state;
+};
+
+const cacheDeserialize = (state: any, key: string | number) => {
+  if (key === "collections") {
+    return ImmutableMap<string, string>(state).map((x) => {
+      return Etebase.fromBase64(x);
+    });
+  } else if (key === "items") {
+    return ImmutableMap(state).map((item: any) => {
+      return ImmutableMap<string, string>(item).map((x) => Etebase.fromBase64(x));
+    });
+  }
+
+  return state;
+};
+
+const cachePersistConfig = {
+  key: "cache2",
+  version: 0,
+  storage: localforage,
+  transforms: [createTransform(cacheSerialize, cacheDeserialize)] as any,
+};
+
+const reducers = combineReducers({
+  fetchCount,
+  settings: persistReducer(settingsPersistConfig, settingsReducer),
+  credentials: persistReducer(credentialsPersistConfig, credentials),
+  encryptionKey: persistReducer(encryptionKeyPersistConfig, encryptionKeyReducer),
+  sync: persistReducer(syncPersistConfig, combineReducers({
+    collections: syncCollections,
+    general: syncGeneral,
+  })),
+  cache: persistReducer(cachePersistConfig, combineReducers({
+    collections,
+    items,
+  })),
+  errors: errorsReducer,
+  messages: messagesReducer,
+});
+
+export default reducers;

webapp/src/store/index.ts

@@ -0,0 +1,45 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { createStore, applyMiddleware } from "redux";
+import { persistStore } from "redux-persist";
+import thunkMiddleware from "redux-thunk";
+import { createLogger } from "redux-logger";
+import { ActionMeta } from "redux-actions";
+import { useDispatch } from "react-redux";
+
+import promiseMiddleware from "./promise-middleware";
+
+import reducers from "./construct";
+
+// Workaround babel limitation
+export * from "./reducers";
+export * from "./construct";
+
+const middleware = [
+  thunkMiddleware,
+  promiseMiddleware,
+];
+
+if (process.env.NODE_ENV === "development") {
+  middleware.push(createLogger());
+}
+
+// FIXME: Hack, we don't actually return a promise when one is not passed.
+export function asyncDispatch<T, V>(action: ActionMeta<Promise<T> | T, V>): Promise<ActionMeta<T, V>> {
+  return store.dispatch(action) as any;
+}
+
+export function useAsyncDispatch() {
+  const dispatch = useDispatch();
+  return function (action: any): any {
+    return dispatch(action) as any;
+  } as typeof asyncDispatch;
+}
+
+export const store = createStore(
+  reducers,
+  applyMiddleware(...middleware)
+);
+
+export const persistor = persistStore(store, { manualPersist: true } as any);

webapp/src/store/promise-middleware.ts

@@ -0,0 +1,25 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+// Based on: https://github.com/acdlite/redux-promise/blob/master/src/index.js
+
+function isPromise(val: any): val is Promise<any> {
+  return val && typeof val.then === "function";
+}
+
+export default function promiseMiddleware({ dispatch }: any) {
+  return (next: any) => (action: any) => {
+    if (isPromise(action.payload)) {
+      dispatch({ ...action, payload: undefined });
+
+      return action.payload
+        .then((result: any) => dispatch({ ...action, payload: result }))
+        .catch((error: Error) => {
+          dispatch({ ...action, payload: error, error: true });
+          return Promise.reject(error);
+        });
+    } else {
+      return next(action);
+    }
+  };
+}

webapp/src/store/reducers.ts

@@ -0,0 +1,264 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { Action, ActionMeta, ActionFunctionAny, combineActions, handleAction, handleActions } from "redux-actions";
+
+import { List, Map as ImmutableMap } from "immutable";
+
+import * as Etebase from "etebase";
+
+import * as actions from "./actions";
+
+interface BaseModel {
+  uid: string;
+}
+
+export interface SyncCollectionsEntryData extends BaseModel {
+  stoken: string;
+}
+
+export type SyncCollectionsData = ImmutableMap<string, SyncCollectionsEntryData>;
+
+export type CacheItem = Uint8Array;
+export type CacheItems = ImmutableMap<string, CacheItem>;
+export type CacheItemsData = ImmutableMap<string, CacheItems>;
+export type CacheCollection = Uint8Array;
+export type CacheCollectionsData = ImmutableMap<string, Uint8Array>;
+
+export type SyncGeneralData = {
+  stoken: string | null;
+  lastSyncDate: Date;
+};
+
+export type Message = {
+  message: string;
+  severity: "error" | "warning" | "info" | "success";
+};
+
+export interface CredentialsData {
+  storedSession?: string;
+}
+
+export const credentials = handleActions(
+  {
+    [actions.login.toString()]: (
+      state: CredentialsData, action: Action<string>) => {
+      if (action.error) {
+        return state;
+      } else if (action.payload === undefined) {
+        return state;
+      } else {
+        return {
+          storedSession: action.payload,
+        };
+      }
+    },
+    [actions.logout.toString()]: (_state: CredentialsData, _action: any) => {
+      return { storedSession: undefined };
+    },
+  },
+  { storedSession: undefined }
+);
+
+export const encryptionKeyReducer = handleActions(
+  {
+  },
+  { key: null }
+);
+
+export const syncCollections = handleActions(
+  {
+    [actions.setSyncCollection.toString()]: (state: SyncCollectionsData, action: Action<SyncCollectionsEntryData>) => {
+      if (action.payload !== undefined) {
+        return state.set(action.payload.uid, action.payload);
+      }
+      return state;
+    },
+    [actions.logout.toString()]: (state: SyncCollectionsData, _action: any) => {
+      return state.clear();
+    },
+  },
+  ImmutableMap({})
+);
+
+export const syncGeneral = handleActions(
+  {
+    [actions.setSyncGeneral.toString()]: (state: SyncGeneralData, action: Action<string | null | undefined>) => {
+      if (action.payload !== undefined) {
+        return {
+          stoken: action.payload,
+          lastSyncDate: new Date(),
+        };
+      }
+      return state;
+    },
+    [actions.logout.toString()]: (_state: SyncGeneralData, _action: any) => {
+      return {};
+    },
+  },
+  {}
+);
+
+export const collections = handleActions(
+  {
+    [combineActions(
+      actions.setCacheCollection,
+      actions.collectionUpload,
+      actions.unsetCacheCollection
+    ).toString()]: (state: CacheCollectionsData, action: ActionMeta<CacheCollection, { colUid: string, deleted: boolean }>) => {
+      if (action.payload !== undefined) {
+        if (action.meta.deleted) {
+          return state.remove(action.meta.colUid);
+        } else {
+          return state.set(action.meta.colUid, action.payload);
+        }
+      }
+      return state;
+    },
+    [actions.logout.toString()]: (state: CacheCollectionsData, _action: any) => {
+      return state.clear();
+    },
+  },
+  ImmutableMap({})
+);
+
+export const items = handleActions(
+  {
+    [combineActions(
+      actions.setCacheItem
+    ).toString()]: (state: CacheItemsData, action: ActionMeta<CacheItem, { colUid: string, itemUid: string, deleted: boolean }>) => {
+      if (action.payload !== undefined) {
+        return state.setIn([action.meta.colUid, action.meta.itemUid], action.payload);
+      }
+      return state;
+    },
+    [combineActions(
+      actions.itemBatch,
+      actions.setCacheItemMulti
+    ).toString()]: (state: CacheItemsData, action_: any) => {
+      // Fails without it for some reason
+      const action = action_ as ActionMeta<CacheItem[], { colUid: string, items: Etebase.Item[] }>;
+      if (action.payload !== undefined) {
+        return state.withMutations((state) => {
+          let i = 0;
+          for (const item of action.meta.items) {
+            state.setIn([action.meta.colUid, item.uid], action.payload[i]);
+            i++;
+          }
+        });
+      }
+      return state;
+    },
+    [actions.setCacheCollection.toString()]: (state: CacheItemsData, action: ActionMeta<CacheCollection, { colUid: string }>) => {
+      if (action.payload !== undefined) {
+        if (!state.has(action.meta.colUid)) {
+          return state.set(action.meta.colUid, ImmutableMap());
+        }
+      }
+      return state;
+    },
+    [actions.unsetCacheCollection.toString()]: (state: CacheItemsData, action: ActionMeta<string, { colUid: string }>) => {
+      if (action.payload !== undefined) {
+        return state.remove(action.meta.colUid);
+      }
+      return state;
+    },
+    [actions.logout.toString()]: (state: CacheItemsData, _action: any) => {
+      return state.clear();
+    },
+  },
+  ImmutableMap({})
+);
+
+const fetchActions = [
+] as Array<ActionFunctionAny<Action<any>>>;
+
+for (const func in actions) {
+  if (func.startsWith("fetch") ||
+    func.startsWith("add") ||
+    func.startsWith("update") ||
+    func.startsWith("delete")) {
+
+    fetchActions.push(actions[func]);
+  }
+}
+
+// Indicates network activity, not just fetch
+export const fetchCount = handleAction(
+  combineActions(
+    actions.performSync.toString(),
+    ...fetchActions
+  ),
+  (state: number, action: any) => {
+    if (action.payload === undefined) {
+      return state + 1;
+    } else {
+      return state - 1;
+    }
+  },
+  0
+);
+
+export const errorsReducer = handleActions(
+  {
+    [combineActions(
+      actions.performSync
+    ).toString()]: (state: List<Error>, action: Action<any>) => {
+      if (action.error) {
+        return state.push(action.payload);
+      }
+
+      return state;
+    },
+    [actions.appendError.toString()]: (state: List<Error>, action: Action<any>) => {
+      if (Array.isArray(action.payload)) {
+        return state.push(...action.payload);
+      } else {
+        return state.push(action.payload);
+      }
+    },
+    [actions.clearErros.toString()]: (state: List<Error>, _action: Action<any>) => {
+      return state.clear();
+    },
+  },
+  List([])
+);
+
+export const messagesReducer = handleActions(
+  {
+    [actions.pushMessage.toString()]: (state: List<Message>, action: Action<Message>) => {
+      return state.push(action.payload);
+    },
+    [actions.popMessage.toString()]: (state: List<Message>, _action: Action<unknown>) => {
+      return state.remove(0);
+    },
+  },
+  List([])
+);
+
+
+// FIXME Move all the below (potentially the fetchCount ones too) to their own file
+export interface SettingsType {
+  locale: string;
+  darkMode?: boolean;
+  taskSettings: {
+    filterBy: string | null;
+    sortBy: string;
+  };
+}
+
+export const settingsReducer = handleActions(
+  {
+    [actions.setSettings.toString()]: (state: { key: string | null }, action: any) => (
+      { ...state, ...action.payload }
+    ),
+  },
+  {
+    locale: "en-gb",
+    darkMode: false,
+    taskSettings: {
+      filterBy: null,
+      sortBy: "smart",
+    },
+  }
+);

webapp/src/sync/SyncManager.ts

@@ -0,0 +1,119 @@
+// SPDX-FileCopyrightText: © 2019 EteSync Authors
+// SPDX-License-Identifier: GPL-3.0-only
+
+import * as Etebase from "etebase";
+
+import { store, StoreState } from "../store";
+
+import { credentialsSelector } from "../credentials";
+import { setSyncCollection, setSyncGeneral, setCacheCollection, unsetCacheCollection, setCacheItemMulti, appendError } from "../store/actions";
+
+const cachedSyncManager = new Map<string, SyncManager>();
+export class SyncManager {
+  private COLLECTION_TYPES = ["etebase.vcard", "etebase.vevent", "etebase.vtodo"];
+  private BATCH_SIZE = 40;
+
+  public static getManager(etebase: Etebase.Account) {
+    const cached = cachedSyncManager.get(etebase.user.username);
+    if (cached) {
+      return cached;
+    }
+
+    const ret = new SyncManager();
+    cachedSyncManager.set(etebase.user.username, ret);
+    return ret;
+  }
+
+  public static removeManager(etebase: Etebase.Account) {
+    cachedSyncManager.delete(etebase.user.username);
+  }
+
+  protected etebase: Etebase.Account;
+  protected isSyncing: boolean;
+
+  private async fetchCollection(col: Etebase.Collection) {
+    const storeState = store.getState() as unknown as StoreState;
+    const etebase = (await credentialsSelector(storeState))!;
+    const syncCollection = storeState.sync.collections.get(col.uid, undefined);
+
+    const colMgr = etebase.getCollectionManager();
+    const itemMgr = colMgr.getItemManager(col);
+
+    let stoken = syncCollection?.stoken;
+    const limit = this.BATCH_SIZE;
+    let done = false;
+    while (!done) {
+      const items = await itemMgr.list({ stoken, limit });
+      store.dispatch(setCacheItemMulti(col.uid, itemMgr, items.data));
+      done = items.done;
+      stoken = items.stoken;
+    }
+
+    if (syncCollection?.stoken !== stoken) {
+      store.dispatch(setSyncCollection(col.uid, stoken!));
+    }
+  }
+
+  private async fetchAllCollections() {
+    const storeState = store.getState() as unknown as StoreState;
+    const etebase = (await credentialsSelector(storeState))!;
+    const syncGeneral = storeState.sync.general;
+
+    const colMgr = etebase.getCollectionManager();
+    const limit = this.BATCH_SIZE;
+    let stoken = syncGeneral?.stoken;
+    let done = false;
+    while (!done) {
+      const collections = await colMgr.list(this.COLLECTION_TYPES, { stoken, limit });
+      for (const col of collections.data) {
+        const collectionType = col.getCollectionType();
+        if (this.COLLECTION_TYPES.includes(collectionType)) {
+          store.dispatch(setCacheCollection(colMgr, col));
+          await this.fetchCollection(col);
+        }
+      }
+      if (collections.removedMemberships) {
+        for (const removed of collections.removedMemberships) {
+          store.dispatch(unsetCacheCollection(colMgr, removed.uid));
+        }
+      }
+      done = collections.done;
+      stoken = collections.stoken;
+    }
+
+    if (syncGeneral?.stoken !== stoken) {
+      store.dispatch(setSyncGeneral(stoken));
+    }
+    return true;
+  }
+
+  public async sync(alwaysThrowErrors = false) {
+    if (this.isSyncing) {
+      return false;
+    }
+    this.isSyncing = true;
+
+    try {
+      const stoken = await this.fetchAllCollections();
+      return stoken;
+    } catch (e) {
+      if (alwaysThrowErrors) {
+        throw e;
+      }
+
+      if (e instanceof Etebase.NetworkError || e instanceof Etebase.TemporaryServerError) {
+        // Ignore network errors
+        return null;
+      } else if (e instanceof Etebase.PermissionDeniedError) {
+        store.dispatch(appendError(e));
+        return null;
+      } else if (e instanceof Etebase.HttpError) {
+        store.dispatch(appendError(e));
+        return null;
+      }
+      throw e;
+    } finally {
+      this.isSyncing = false;
+    }
+  }
+}

webapp/src/types/ical.js.d.ts

@@ -0,0 +1,198 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: MPL-2.0
+
+// Disable some style eslint rules for things we can't control
+/* eslint-disable @typescript-eslint/camelcase, @typescript-eslint/class-name-casing */
+
+declare module "ical.js" {
+  function parse(input: string): any[];
+
+  export class helpers {
+    static public updateTimezones(vcal: Component): Component;
+  }
+
+  class Component {
+    static public fromString(str: string): Component;
+
+    public name: string;
+
+    constructor(jCal: any[] | string, parent?: Component);
+
+    public toJSON(): any[];
+
+    public getFirstSubcomponent(name?: string): Component | null;
+    public getAllSubcomponents(name?: string): Component[];
+
+    public getFirstPropertyValue<T = any>(name?: string): T;
+
+    public getFirstProperty(name?: string): Property;
+    public getAllProperties(name?: string): Property[];
+
+    public addProperty(property: Property): Property;
+    public addPropertyWithValue(name: string, value: string | number | object): Property;
+
+    public updatePropertyWithValue(name: string, value: string | number | object): Property;
+
+    public removeAllProperties(name?: string): boolean;
+
+    public addSubcomponent(component: Component): Component;
+  }
+
+  export class Event {
+    public uid: string;
+    public summary: string;
+    public startDate: Time;
+    public endDate: Time;
+    public description: string;
+    public location: string;
+    public attendees: Property[];
+
+    public component: Component;
+
+    public constructor(component?: Component | null, options?: {strictExceptions: boolean, exepctions: Array<Component | Event>});
+
+    public isRecurring(): boolean;
+    public iterator(startTime?: Time): RecurExpansion;
+  }
+
+  export class Property {
+    public name: string;
+    public type: string;
+
+    constructor(jCal: any[] | string, parent?: Component);
+
+    public getFirstValue<T = any>(): T;
+    public getValues<T = any>(): T[];
+
+    public setParameter(name: string, value: string | string[]): void;
+    public setValue(value: string | object): void;
+    public setValues(values: (string | object)[]): void;
+    public toJSON(): any;
+  }
+
+  interface TimeJsonData {
+    year?: number;
+    month?: number;
+    day?: number;
+    hour?: number;
+    minute?: number;
+    second?: number;
+    isDate?: boolean;
+  }
+
+  export class Time {
+    static public fromString(str: string): Time;
+    static public fromJSDate(aDate: Date | null, useUTC: boolean): Time;
+    static public fromData(aData: TimeJsonData): Time;
+
+    static public now(): Time;
+
+    public isDate: boolean;
+    public timezone: string;
+    public zone: Timezone;
+
+    public year: number;
+    public month: number;
+    public day: number;
+    public hour: number;
+    public minute: number;
+    public second: number;
+
+    constructor(data?: TimeJsonData);
+    public compare(aOther: Time): number;
+
+    public clone(): Time;
+    public convertToZone(zone: Timezone): Time;
+
+    public adjust(
+      aExtraDays: number, aExtraHours: number, aExtraMinutes: number, aExtraSeconds: number, aTimeopt?: Time): void;
+
+    public addDuration(aDuration: Duration): void;
+    public subtractDateTz(aDate: Time): Duration;
+
+    public toUnixTime(): number;
+    public toJSDate(): Date;
+    public toJSON(): TimeJsonData;
+  }
+
+  export class Duration {
+    public days: number;
+  }
+
+  export class RecurExpansion {
+    public complete: boolean;
+
+    public next(): Time;
+  }
+
+  export class Timezone {
+    static public utcTimezone: Timezone;
+    static public localTimezone: Timezone;
+    static public convert_time(tt: Time, fromZone: Timezone, toZone: Timezone): Time;
+
+
+    public tzid: string;
+    public component: Component;
+
+    constructor(data: Component | {
+      component: string | Component;
+      tzid?: string;
+      location?: string;
+      tznames?: string;
+      latitude?: number;
+      longitude?: number;
+    });
+  }
+
+  export class TimezoneService {
+    static public get(tzid: string): Timezone | null;
+    static public has(tzid: string): boolean;
+    static public register(tzid: string, zone: Timezone | Component);
+    static public remove(tzid: string): Timezone | null;
+  }
+
+  export type FrequencyValues = "YEARLY" | "MONTHLY" | "WEEKLY" | "DAILY" | "HOURLY" | "MINUTELY" | "SECONDLY";
+
+  export enum WeekDay {
+    SU = 1,
+    MO,
+    TU,
+    WE,
+    TH,
+    FR,
+    SA,
+  }
+
+  export class RecurData {
+    public freq?: FrequencyValues;
+    public interval?: number;
+    public wkst?: WeekDay;
+    public until?: Time;
+    public count?: number;
+    public bysecond?: number[] | number;
+    public byminute?: number[] | number;
+    public byhour?: number[] | number;
+    public byday?: string[] | string;
+    public bymonthday?: number[] | number;
+    public byyearday?: number[] | number;
+    public byweekno?: number[] | number;
+    public bymonth?: number[] | number;
+    public bysetpos?: number[] | number;
+  }
+
+  export class RecurIterator {
+    public next(): Time;
+  }
+
+  export class Recur {
+    constructor(data?: RecurData);
+    public until: Time | null;
+    public freq: FrequencyValues;
+    public count: number | null;
+
+    public clone(): Recur;
+    public toJSON(): Omit<RecurData, "until"> & { until?: string };
+    public iterator(startTime?: Time): RecurIterator;
+    public isByCount(): boolean;
+  }
+}

webapp/src/types/redux-persist.d.ts

@@ -0,0 +1,6 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+declare module "redux-persist";
+declare module "redux-persist/lib/storage/session";
+declare module "redux-persist/es/integration/react";

webapp/src/widgets/AppBarOverride.tsx

@@ -0,0 +1,23 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+export default (props: {title: string, children?: React.ReactNode | React.ReactNode[]}) => {
+  const titleEl = document.querySelector("#appbar-title");
+  const buttonsEl = document.querySelector("#appbar-buttons");
+
+  return (
+    <>
+      {titleEl && ReactDOM.createPortal(
+        <span>{props.title}</span>,
+        titleEl
+      )}
+      {buttonsEl && props.children && ReactDOM.createPortal(
+        props.children,
+        buttonsEl
+      )}
+    </>
+  );
+};

webapp/src/widgets/Avatar.tsx

@@ -0,0 +1,26 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+export const Avatar = React.memo((props: { children: React.ReactNode[] | React.ReactNode, size?: number, style?: any }) => {
+  const size = (props.size) ? props.size : 40;
+
+  return (
+    <div
+      style={{
+        backgroundColor: "grey",
+        color: "white",
+        display: "inline-flex",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "50%",
+        height: size,
+        width: size,
+        ...props.style,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+});

webapp/src/widgets/ColorBox.tsx

@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+interface PropsType {
+  color: string;
+  size?: number | string;
+  style?: React.CSSProperties;
+}
+
+export default function ColorBox(props: PropsType) {
+  const size = props.size ?? 64;
+  const style = { ...props.style, backgroundColor: props.color, width: size, height: size };
+  return (
+    <div style={style} />
+  );
+}

webapp/src/widgets/ColorPicker.tsx

@@ -0,0 +1,71 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import ColorBox from "./ColorBox";
+import { TextField, ButtonBase } from "@material-ui/core";
+
+interface PropsType {
+  color: string;
+  defaultColor: string;
+  label?: string;
+  placeholder?: string;
+  error?: string;
+  onChange: (color: string) => void;
+}
+
+
+export default function ColorPicker(props: PropsType) {
+  const colors = [
+    [
+      "#F44336",
+      "#E91E63",
+      "#673AB7",
+      "#3F51B5",
+      "#2196F3",
+    ],
+    [
+      "#03A9F4",
+      "#4CAF50",
+      "#8BC34A",
+      "#FFEB3B",
+      "#FF9800",
+    ],
+  ];
+  const color = props.color;
+
+  return (
+    <div>
+      {colors.map((colorGroup, idx) => (
+        <div key={idx} style={{ flex: 1, flexDirection: "row", justifyContent: "space-between" }}>
+          {colorGroup.map((colorOption) => (
+            <ButtonBase
+              style={{ margin: 5, borderRadius: 36 / 2 }}
+              key={colorOption}
+              onClick={() => props.onChange(colorOption)}
+            >
+              <ColorBox size={36} style={{ borderRadius: 36 / 2 }} color={colorOption} />
+            </ButtonBase>
+          ))}
+        </div>
+      ))}
+      <div style={{ flex: 1, alignItems: "center", flexDirection: "row", margin: 5 }}>
+        <ColorBox
+          style={{ display: "inline-block" }}
+          size={36}
+          color={color}
+        />
+        <TextField
+          style={{ marginLeft: 10, flex: 1 }}
+          error={!!props.error}
+          onChange={(event: React.FormEvent<{ value: string }>) => props.onChange(event.currentTarget.value)}
+          placeholder={props.placeholder ?? "E.g. #aabbcc"}
+          label={props.label ?? "Color"}
+          value={color}
+          helperText={props.error}
+        />
+      </div>
+    </div>
+  );
+}

webapp/src/widgets/ColoredRadio.tsx

@@ -0,0 +1,32 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import { makeStyles } from "@material-ui/core/styles";
+import Radio from "@material-ui/core/Radio";
+import { Omit } from "@material-ui/types";
+import FormControlLabel, { FormControlLabelProps } from "@material-ui/core/FormControlLabel";
+
+interface Props {
+  color: string;
+  label: string;
+}
+
+const useStyles = makeStyles({
+  root: {
+    color: (props: Props) => props.color,
+  },
+});
+
+export default function ColoredRadio(props: Props & Omit<FormControlLabelProps, keyof Props | "control">) {
+  const { color, label, value, ...other } = props;
+  const { root } = useStyles(props);
+
+  return <FormControlLabel
+    className={root}
+    label={label}
+    control={<Radio color="default" className={root} value={value} />}
+    {...other}
+  />;
+}

webapp/src/widgets/ConfirmationDialog.tsx

@@ -0,0 +1,49 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import Dialog from "@material-ui/core/Dialog";
+import DialogTitle from "@material-ui/core/DialogTitle";
+import DialogContent from "@material-ui/core/DialogContent";
+import DialogActions from "@material-ui/core/DialogActions";
+import Button from "@material-ui/core/Button";
+
+export default React.memo((_props: any) => {
+  const {
+    title,
+    children,
+    onCancel,
+    onOk,
+    labelOk,
+    ...props
+  } = _props;
+
+  return (
+    <Dialog
+      onClose={onCancel}
+      {...props}
+    >
+      <DialogTitle>
+        {title}
+      </DialogTitle>
+      <DialogContent>
+        {children}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          color="primary"
+          onClick={onCancel}
+        >
+          Cancel
+        </Button>
+        <Button
+          color="primary"
+          onClick={onOk}
+        >
+          {labelOk || "Confirm"}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+});

webapp/src/widgets/Container.css

@@ -0,0 +1,25 @@
+.Container {
+  margin-right: auto;
+  margin-left: auto;
+}
+@media (min-width: 768px) {
+  .Container {
+    padding-top: 40px;
+    padding-bottom: 40px;
+    width: 750px;
+  }
+}
+@media (min-width: 992px) {
+  .Container {
+    width: 970px;
+  }
+}
+@media (min-width: 1200px) {
+  .Container {
+    width: 1170px;
+  }
+}
+
+.Container-inner {
+  padding: 15px;
+}

webapp/src/widgets/Container.tsx

@@ -0,0 +1,22 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+import Paper from "@material-ui/core/Paper";
+
+import "./Container.css";
+
+export default (props: {style?: React.CSSProperties, children: any}) => {
+  const display = props.style?.display;
+  const flexDirection = props.style?.flexDirection;
+
+  return (
+    <div className="Container" style={props.style}>
+      <Paper elevation={3} style={{ display, flexDirection, flexGrow: 1 }}>
+        <div className="Container-inner" style={{ display, flexDirection, flexGrow: 1 }}>
+          {props.children}
+        </div>
+      </Paper>
+    </div>
+  );
+};

webapp/src/widgets/DateTimePicker.tsx

@@ -0,0 +1,52 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import MomentUtils from "@date-io/moment";
+import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardDateTimePicker } from "@material-ui/pickers";
+
+import moment from "moment";
+
+interface PropsType {
+  placeholder: string;
+  value?: Date;
+  dateOnly?: boolean;
+  onChange: (date?: Date) => void;
+}
+
+class DateTimePicker extends React.PureComponent<PropsType> {
+  constructor(props: any) {
+    super(props);
+    this.handleInputChange = this.handleInputChange.bind(this);
+  }
+
+  public render() {
+    const Picker = (this.props.dateOnly) ? KeyboardDatePicker : KeyboardDateTimePicker;
+    const dateFormat = (this.props.dateOnly) ? "L" : "L LT";
+    return (
+      <MuiPickersUtilsProvider utils={MomentUtils}>
+        <Picker
+          value={this.props.value || null}
+          onChange={this.handleInputChange}
+          format={dateFormat}
+          ampm={false}
+          showTodayButton
+          KeyboardButtonProps={{
+            "aria-label": "change date",
+          }}
+        />
+      </MuiPickersUtilsProvider>
+    );
+  }
+
+  private handleInputChange(date: moment.Moment) {
+    if (moment.isMoment(date)) {
+      this.props.onChange(date.toDate());
+    } else {
+      this.props.onChange(undefined);
+    }
+  }
+}
+
+export default DateTimePicker;

webapp/src/widgets/ExternalLink.tsx

@@ -0,0 +1,12 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+export const ExternalLink = React.memo(({ children, ...props }: any) => (
+  <a target="_blank" rel="noopener noreferrer" {...props}>
+    {children}
+  </a>
+));
+
+export default ExternalLink;

webapp/src/widgets/List.tsx

@@ -0,0 +1,113 @@
+// SPDX-FileCopyrightText: © 2017 EteSync Authors
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import * as React from "react";
+
+import { createStyles, makeStyles } from "@material-ui/core/styles";
+import MuiList from "@material-ui/core/List";
+import MuiListItem from "@material-ui/core/ListItem";
+import MuiListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import MuiListSubheader from "@material-ui/core/ListSubheader";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import Divider from "@material-ui/core/Divider";
+
+import ExternalLink from "./ExternalLink";
+
+const useStyles = makeStyles((theme) => (createStyles({
+  inset: {
+    marginLeft: 64,
+  },
+  nested: {
+    paddingLeft: theme.spacing(4),
+  },
+})));
+
+export const List = MuiList;
+
+export const ListSubheader = MuiListSubheader;
+
+export const ListDivider = React.memo(function ListDivider(props: { inset?: boolean }) {
+  const classes = useStyles();
+  const insetClass = (props.inset) ? classes.inset : undefined;
+  return (
+    <Divider className={insetClass} />
+  );
+});
+
+interface ListItemPropsType {
+  leftIcon?: React.ReactElement;
+  rightIcon?: React.ReactElement;
+  style?: React.CSSProperties;
+  primaryText?: string;
+  secondaryText?: string;
+  children?: React.ReactNode | React.ReactNode[];
+  onClick?: () => void;
+  href?: string;
+  insetChildren?: boolean;
+  nestedItems?: React.ReactNode[];
+  selected?: boolean;
+  secondaryTextColor?: "initial" | "inherit" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error";
+  secondaryAction?: React.ReactNode;
+}
+
+export const ListItem = React.memo(function ListItem(_props: ListItemPropsType) {
+  const classes = useStyles();
+  const {
+    leftIcon,
+    rightIcon,
+    primaryText,
+    secondaryText,
+    children,
+    onClick,
+    href,
+    style,
+    insetChildren,
+    nestedItems,
+    selected,
+    secondaryTextColor,
+    secondaryAction,
+  } = _props;
+
+  const extraProps = (onClick || href) ? {
+    button: true,
+    href,
+    onClick,
+    component: (href) ? ExternalLink : "div",
+  } : undefined;
+
+  return (
+    <>
+      <MuiListItem
+        style={style}
+        onClick={onClick}
+        selected={selected}
+        {...(extraProps as any)}
+      >
+        {leftIcon && (
+          <ListItemIcon>
+            {leftIcon}
+          </ListItemIcon>
+        )}
+        <ListItemText inset={insetChildren} primary={primaryText} secondary={secondaryText} secondaryTypographyProps={{ color: secondaryTextColor }}>
+          {children}
+        </ListItemText>
+        {rightIcon && (
+          <ListItemIcon>
+            {rightIcon}
+          </ListItemIcon>
+        )}
+        {secondaryAction && (
+          <MuiListItemSecondaryAction>
+            {secondaryAction}
+          </MuiListItemSecondaryAction>
+        )}
+      </MuiListItem>
+      {nestedItems && (
+        <List className={classes.nested} disablePadding>
+          {nestedItems}
+        </List>
+      )}
+    </>
+  );
+});